first commit 2
This commit is contained in:
hmw1001
@@ -0,0 +1,563 @@
|
||||
<?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');
|
||||
?>
|
||||
Reference in New Issue
Block a user