hmw1001
563 lines
17 KiB
PHP
563 lines
17 KiB
PHP
<?php
|
|
include_once('../../_common.php');
|
|
|
|
// 설문 관리 라이브러리 로드
|
|
include_once(G5_ADMIN_PATH . '/survey_manage/lib/survey.lib.php');
|
|
|
|
$sv_id = isset($_GET['sv_id']) ? (int)$_GET['sv_id'] : 0;
|
|
$sr_id = isset($_GET['sr_id']) ? (int)$_GET['sr_id'] : 0;
|
|
|
|
if (!$sv_id || !$sr_id) {
|
|
alert('잘못된 접근입니다.', G5_URL);
|
|
}
|
|
|
|
$survey = get_survey($sv_id);
|
|
if (!$survey) {
|
|
alert('존재하지 않는 설문입니다.', G5_URL);
|
|
}
|
|
|
|
// 응답 확인
|
|
$response = sql_fetch("SELECT * FROM survey_responses WHERE sr_id = '$sr_id' AND sv_id = '$sv_id'");
|
|
if (!$response || $response['sr_status'] !== 'completed') {
|
|
alert('완료되지 않은 응답입니다.', G5_URL);
|
|
}
|
|
|
|
$g5['title'] = '설문 완료 - ' . $survey['sv_title'];
|
|
include_once(G5_THEME_PATH . '/head.sub.php');
|
|
|
|
// 설문 테마 색상
|
|
$theme_color = $survey['sv_theme_color'] ?: '#AA20FF';
|
|
|
|
// 응답 통계
|
|
$total_responses = get_survey_response_count($sv_id, 'completed');
|
|
?>
|
|
|
|
<style>
|
|
/* 페이지 전용 스타일 */
|
|
:root {
|
|
--survey-primary: <?php echo $theme_color; ?>;
|
|
--survey-primary-light: <?php echo $theme_color; ?>20;
|
|
--survey-primary-dark: <?php echo $theme_color; ?>CC;
|
|
}
|
|
|
|
body {
|
|
background: linear-gradient(135deg, var(--survey-primary-light) 0%, #ffffff 100%);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.complete-page-container {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 100px 20px 20px;
|
|
}
|
|
|
|
.complete-card {
|
|
background: white;
|
|
border-radius: 20px;
|
|
padding: 60px 40px;
|
|
text-align: center;
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
|
position: relative;
|
|
overflow: hidden;
|
|
animation: slideInUp 0.8s ease;
|
|
max-width: 600px;
|
|
width: 100%;
|
|
}
|
|
|
|
.complete-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 5px;
|
|
background: linear-gradient(90deg, var(--survey-primary) 0%, var(--survey-primary-dark) 100%);
|
|
}
|
|
|
|
.success-icon {
|
|
width: 100px;
|
|
height: 100px;
|
|
background: var(--survey-primary);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto 30px;
|
|
animation: bounceIn 1s ease 0.3s both;
|
|
}
|
|
|
|
.success-icon i {
|
|
font-size: 3em;
|
|
color: white;
|
|
}
|
|
|
|
.complete-title {
|
|
font-size: 2.5em;
|
|
font-weight: 700;
|
|
color: #333;
|
|
margin-bottom: 20px;
|
|
animation: fadeInUp 0.8s ease 0.5s both;
|
|
}
|
|
|
|
.complete-message {
|
|
font-size: 1.2em;
|
|
color: #666;
|
|
line-height: 1.6;
|
|
margin-bottom: 30px;
|
|
animation: fadeInUp 0.8s ease 0.7s both;
|
|
}
|
|
|
|
.thank-message {
|
|
background: var(--survey-primary-light);
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
margin: 30px 0;
|
|
font-style: italic;
|
|
color: var(--survey-primary-dark);
|
|
animation: fadeInUp 0.8s ease 0.9s both;
|
|
}
|
|
|
|
.stats-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 30px;
|
|
margin: 40px 0;
|
|
animation: fadeInUp 0.8s ease 1.1s both;
|
|
}
|
|
|
|
.stat-item {
|
|
text-align: center;
|
|
}
|
|
|
|
.stat-number {
|
|
font-size: 2em;
|
|
font-weight: bold;
|
|
color: var(--survey-primary);
|
|
display: block;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 0.9em;
|
|
color: #666;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.action-buttons {
|
|
display: flex;
|
|
gap: 15px;
|
|
justify-content: center;
|
|
margin-top: 40px;
|
|
animation: fadeInUp 0.8s ease 1.3s both;
|
|
}
|
|
|
|
.btn {
|
|
padding: 15px 30px;
|
|
border-radius: 50px;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
transition: all 0.3s ease;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 1em;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--survey-primary);
|
|
color: white;
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: var(--survey-primary-dark);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
|
|
color: white;
|
|
}
|
|
|
|
.btn-outline {
|
|
background: transparent;
|
|
color: var(--survey-primary);
|
|
border: 2px solid var(--survey-primary);
|
|
}
|
|
|
|
.btn-outline:hover {
|
|
background: var(--survey-primary);
|
|
color: white;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.social-share {
|
|
margin-top: 30px;
|
|
padding-top: 30px;
|
|
border-top: 1px solid #f0f0f0;
|
|
animation: fadeInUp 0.8s ease 1.5s both;
|
|
}
|
|
|
|
.social-share h4 {
|
|
color: #666;
|
|
margin-bottom: 15px;
|
|
font-size: 1em;
|
|
}
|
|
|
|
.social-buttons {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.social-btn {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-decoration: none;
|
|
color: white;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.social-btn:hover {
|
|
transform: scale(1.1);
|
|
color: white;
|
|
}
|
|
|
|
.social-facebook {
|
|
background: #3b5998;
|
|
}
|
|
|
|
.social-twitter {
|
|
background: #1da1f2;
|
|
}
|
|
|
|
.social-kakao {
|
|
background: #fee500;
|
|
color: #3c1e1e;
|
|
}
|
|
|
|
.social-line {
|
|
background: #00c300;
|
|
}
|
|
|
|
/* 파티클 효과 */
|
|
.particles {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.particle {
|
|
position: absolute;
|
|
background: var(--survey-primary);
|
|
border-radius: 50%;
|
|
opacity: 0.6;
|
|
animation: float 6s ease-in-out infinite;
|
|
}
|
|
|
|
.particle:nth-child(1) {
|
|
width: 4px;
|
|
height: 4px;
|
|
left: 10%;
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.particle:nth-child(2) {
|
|
width: 6px;
|
|
height: 6px;
|
|
left: 20%;
|
|
animation-delay: 1s;
|
|
}
|
|
|
|
.particle:nth-child(3) {
|
|
width: 3px;
|
|
height: 3px;
|
|
left: 30%;
|
|
animation-delay: 2s;
|
|
}
|
|
|
|
.particle:nth-child(4) {
|
|
width: 5px;
|
|
height: 5px;
|
|
left: 40%;
|
|
animation-delay: 3s;
|
|
}
|
|
|
|
.particle:nth-child(5) {
|
|
width: 4px;
|
|
height: 4px;
|
|
left: 50%;
|
|
animation-delay: 4s;
|
|
}
|
|
|
|
.particle:nth-child(6) {
|
|
width: 6px;
|
|
height: 6px;
|
|
left: 60%;
|
|
animation-delay: 5s;
|
|
}
|
|
|
|
.particle:nth-child(7) {
|
|
width: 3px;
|
|
height: 3px;
|
|
left: 70%;
|
|
animation-delay: 0.5s;
|
|
}
|
|
|
|
.particle:nth-child(8) {
|
|
width: 5px;
|
|
height: 5px;
|
|
left: 80%;
|
|
animation-delay: 1.5s;
|
|
}
|
|
|
|
.particle:nth-child(9) {
|
|
width: 4px;
|
|
height: 4px;
|
|
left: 90%;
|
|
animation-delay: 2.5s;
|
|
}
|
|
|
|
/* 반응형 */
|
|
@media (max-width: 768px) {
|
|
.complete-page-container {
|
|
padding: 80px 10px 20px;
|
|
}
|
|
|
|
.complete-card {
|
|
padding: 40px 20px;
|
|
}
|
|
|
|
.complete-title {
|
|
font-size: 2em;
|
|
}
|
|
|
|
.stats-container {
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
.action-buttons {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.btn {
|
|
width: 100%;
|
|
max-width: 250px;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
/* 애니메이션 */
|
|
@keyframes slideInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(50px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes bounceIn {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(0.3);
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
transform: scale(1.05);
|
|
}
|
|
70% {
|
|
transform: scale(0.9);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% {
|
|
transform: translateY(100vh) rotate(0deg);
|
|
opacity: 0;
|
|
}
|
|
10%, 90% {
|
|
opacity: 0.6;
|
|
}
|
|
50% {
|
|
transform: translateY(-10px) rotate(180deg);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div class="complete-page-container">
|
|
<div class="complete-card">
|
|
<!-- 파티클 효과 -->
|
|
<div class="particles">
|
|
<div class="particle"></div>
|
|
<div class="particle"></div>
|
|
<div class="particle"></div>
|
|
<div class="particle"></div>
|
|
<div class="particle"></div>
|
|
<div class="particle"></div>
|
|
<div class="particle"></div>
|
|
<div class="particle"></div>
|
|
<div class="particle"></div>
|
|
</div>
|
|
|
|
<!-- 성공 아이콘 -->
|
|
<div class="success-icon">
|
|
<i class="fa fa-check"></i>
|
|
</div>
|
|
|
|
<!-- 완료 메시지 -->
|
|
<h1 class="complete-title">설문 완료!</h1>
|
|
<p class="complete-message">
|
|
<strong><?php echo htmlspecialchars($survey['sv_title']); ?></strong><br>
|
|
설문에 참여해 주셔서 감사합니다.
|
|
</p>
|
|
|
|
<!-- 감사 메시지 -->
|
|
<?php if ($survey['sv_thank_message']): ?>
|
|
<div class="thank-message">
|
|
<?php echo nl2br(htmlspecialchars($survey['sv_thank_message'])); ?>
|
|
</div>
|
|
<?php else: ?>
|
|
<div class="thank-message">
|
|
소중한 의견을 주셔서 감사합니다.<br>
|
|
더 나은 서비스를 위해 활용하겠습니다.
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<!-- 통계 정보 -->
|
|
<div class="stats-container">
|
|
<div class="stat-item">
|
|
<span class="stat-number"><?php echo number_format($total_responses); ?></span>
|
|
<div class="stat-label">총 참여자 수</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-number"><?php echo $response['sr_id']; ?></span>
|
|
<div class="stat-label">응답 번호</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 액션 버튼 -->
|
|
<div class="action-buttons">
|
|
<a href="<?php echo G5_URL; ?>" class="btn btn-primary">
|
|
<i class="fa fa-home"></i> 홈으로 이동
|
|
</a>
|
|
<!-- <a href="survey_list_page.php" class="btn btn-outline">-->
|
|
<!-- <i class="fa fa-list"></i> 다른 설문 보기-->
|
|
<!-- </a>-->
|
|
</div>
|
|
|
|
<!-- 소셜 공유 -->
|
|
<div class="social-share">
|
|
<h4>설문을 공유해보세요</h4>
|
|
<div class="social-buttons">
|
|
<a href="#" class="social-btn social-facebook" onclick="shareToFacebook()" title="페이스북 공유">
|
|
<i class="fab fa-facebook-f"></i>
|
|
</a>
|
|
<a href="#" class="social-btn social-twitter" onclick="shareToTwitter()" title="트위터 공유">
|
|
<i class="fab fa-twitter"></i>
|
|
</a>
|
|
<a href="#" class="social-btn social-kakao" onclick="shareToKakao()" title="카카오톡 공유">
|
|
<i class="fab fa-comment"></i>
|
|
</a>
|
|
<a href="#" class="social-btn social-line" onclick="shareToLine()" title="라인 공유">
|
|
<i class="fab fa-line"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 소셜 공유 함수들
|
|
function shareToFacebook() {
|
|
const url = encodeURIComponent(window.location.origin + '/theme/rd.lwd/survey_page.php?sv_id=<?php echo $sv_id; ?>');
|
|
const title = encodeURIComponent('<?php echo addslashes($survey['sv_title']); ?>');
|
|
window.open(`https://www.facebook.com/sharer/sharer.php?u=${url}`, '_blank', 'width=600,height=400');
|
|
}
|
|
|
|
function shareToTwitter() {
|
|
const url = encodeURIComponent(window.location.origin + '/theme/rd.lwd/survey_page.php?sv_id=<?php echo $sv_id; ?>');
|
|
const text = encodeURIComponent('<?php echo addslashes($survey['sv_title']); ?> 설문에 참여해보세요!');
|
|
window.open(`https://twitter.com/intent/tweet?url=${url}&text=${text}`, '_blank', 'width=600,height=400');
|
|
}
|
|
|
|
function shareToKakao() {
|
|
// 카카오톡 공유 (실제 구현시 카카오 SDK 필요)
|
|
alert('카카오톡 공유 기능은 카카오 개발자 등록 후 사용 가능합니다.');
|
|
}
|
|
|
|
function shareToLine() {
|
|
const url = encodeURIComponent(window.location.origin + '/theme/rd.lwd/survey_page.php?sv_id=<?php echo $sv_id; ?>');
|
|
const text = encodeURIComponent('<?php echo addslashes($survey['sv_title']); ?>');
|
|
window.open(`https://social-plugins.line.me/lineit/share?url=${url}&text=${text}`, '_blank', 'width=600,height=400');
|
|
}
|
|
|
|
// 페이지 로드 시 축하 효과
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
// 3초 후 파티클 효과 시작
|
|
setTimeout(() => {
|
|
document.querySelector('.particles').style.display = 'block';
|
|
}, 1000);
|
|
|
|
// 성공 사운드 효과 (선택사항)
|
|
// playSuccessSound();
|
|
});
|
|
|
|
// 성공 사운드 재생 함수 (선택사항)
|
|
function playSuccessSound() {
|
|
// Web Audio API를 사용한 간단한 성공 사운드
|
|
try {
|
|
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
|
|
const oscillator = audioContext.createOscillator();
|
|
const gainNode = audioContext.createGain();
|
|
|
|
oscillator.connect(gainNode);
|
|
gainNode.connect(audioContext.destination);
|
|
|
|
oscillator.frequency.setValueAtTime(523.25, audioContext.currentTime); // C5
|
|
oscillator.frequency.setValueAtTime(659.25, audioContext.currentTime + 0.1); // E5
|
|
oscillator.frequency.setValueAtTime(783.99, audioContext.currentTime + 0.2); // G5
|
|
|
|
gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
|
|
gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.5);
|
|
|
|
oscillator.start(audioContext.currentTime);
|
|
oscillator.stop(audioContext.currentTime + 0.5);
|
|
} catch (e) {
|
|
// 오디오 컨텍스트 생성 실패시 무시
|
|
console.log('Audio context not supported');
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<?php
|
|
include_once(G5_THEME_PATH . '/tail.sub.php');
|
|
?>
|