Spaces:

kimhyunwoo
/

travel

Running

File size: 10,505 Bytes

c8d0139

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>나에게 어울리는 여행지 찾기 ✈️</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            background-color: #f4f4f4;
            color: #333;
            margin: 0;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        .quiz-container {
            background-color: #fff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
            max-width: 600px;
            width: 100%;
            text-align: center;
        }

        h1 {
            color: #0056b3;
            margin-bottom: 20px;
        }

        .question-container {
            margin-bottom: 20px;
        }

        .question-container p {
            font-size: 1.2em;
            margin-bottom: 15px;
            font-weight: bold;
        }

        .options button {
            display: block;
            width: 100%;
            padding: 12px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #eee;
            font-size: 1em;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .options button:hover {
            background-color: #ddd;
        }

        .options button:active {
            background-color: #ccc;
        }

        .result-container {
            display: none; /* 초기에는 숨김 */
            text-align: center;
        }

        .result-container h2 {
            color: #28a745;
            margin-bottom: 15px;
        }

        .result-container p {
            font-size: 1.1em;
            margin-bottom: 20px;
        }

        .result-container a {
            display: inline-block;
            background-color: #ff5722; /* 쿠팡 오렌지색 느낌 */
            color: white;
            padding: 12px 25px;
            border-radius: 5px;
            text-decoration: none;
            font-size: 1.1em;
            transition: background-color 0.3s ease;
        }

        .result-container a:hover {
            background-color: #e64a19;
        }

        /* 질문 숨기기/보이기 애니메이션 */
        .question-container.hidden {
            display: none;
            opacity: 0;
            transition: opacity 0.5s ease;
        }
        .question-container.visible {
             display: block;
             opacity: 1;
             transition: opacity 0.5s ease;
        }

    </style>
</head>
<body>

    <div class="quiz-container">
        <h1>나에게 어울리는 여행지 찾기 ✈️</h1>
        <div id="intro" class="question-container visible">
            <p>몇 가지 질문에 답하고 당신에게 딱 맞는 여행지를 찾아보세요!</p>
            <div class="options">
                 <button onclick="startQuiz()">퀴즈 시작하기</button>
            </div>
        </div>

        <div id="question1" class="question-container hidden">
            <p>1. 어떤 종류의 여행을 가장 좋아하시나요?</p>
            <div class="options">
                <button onclick="answerQuestion(1, 'relax')">푹 쉬는 휴양 여행 🏖️</button>
                <button onclick="answerQuestion(1, 'activity')">신나는 액티비티 여행 🧗‍♀️</button>
                <button onclick="answerQuestion(1, 'culture')">다양한 문화를 경험하는 여행 🏛️</button>
            </div>
        </div>

        <div id="question2" class="question-container hidden">
            <p>2. 여행지에서 가장 중요하게 생각하는 것은?</p>
            <div class="options">
                <button onclick="answerQuestion(2, 'nature')">아름다운 자연 경관 🏞️</button>
                <button onclick="answerQuestion(2, 'food')">맛있는 현지 음식 🍲</button>
                <button onclick="answerQuestion(2, 'shopping')">다양한 쇼핑 기회 🛍️</button>
            </div>
        </div>

        <div id="question3" class="question-container hidden">
            <p>3. 여행 예산은 어느 정도 생각하시나요?</p>
            <div class="options">
                <button onclick="answerQuestion(3, 'low')">저렴하게 즐기는 여행 💰</button>
                <button onclick="answerQuestion(3, 'medium')">적당히 투자하는 여행 😉</button>
                <button onclick="answerQuestion(3, 'high')">예산 상관없이 즐기는 여행 럭셔리하게 ✨</button>
            </div>
        </div>

         <div id="question4" class="question-container hidden">
            <p>4. 누구와 함께 여행하는 것을 선호하시나요?</p>
            <div class="options">
                <button onclick="answerQuestion(4, 'alone')">혼자만의 시간 즐기기 🚶</button>
                <button onclick="answerQuestion(4, 'friends')">친구 또는 연인과 함께 👫</button>
                <button onclick="answerQuestion(4, 'family')">가족과 소중한 추억 만들기 👨‍👩‍👧‍👦</button>
            </div>
        </div>


        <div id="result" class="result-container">
            <h2>당신에게 어울리는 여행지는...</h2>
            <p id="result-text"></p>
            <a id="coupang-link" href="#" target="_blank">쿠팡에서 관련 여행 상품 찾아보기 ✈️</a>
        </div>
    </div>

    <script>
        let currentQuestion = 0;
        const questions = ['intro', 'question1', 'question2', 'question3', 'question4']; // 질문 ID 목록
        const answers = {}; // 사용자의 답변을 저장할 객체

        function startQuiz() {
            document.getElementById('intro').classList.remove('visible');
            document.getElementById('intro').classList.add('hidden');
            currentQuestion++;
            showQuestion(currentQuestion);
        }

        function showQuestion(index) {
            if (index > questions.length - 1) {
                showResult();
                return;
            }

            // 이전 질문 숨기기 (만약 있다면)
            if (currentQuestion > 0) {
                 const prevQuestionId = questions[currentQuestion - 1];
                 const prevQuestionElement = document.getElementById(prevQuestionId);
                 if (prevQuestionElement) {
                      prevQuestionElement.classList.remove('visible');
                      prevQuestionElement.classList.add('hidden');
                 }
            }


            const currentQuestionId = questions[index];
            const currentQuestionElement = document.getElementById(currentQuestionId);
            if (currentQuestionElement) {
                 currentQuestionElement.classList.remove('hidden');
                 currentQuestionElement.classList.add('visible');
            }
        }

        function answerQuestion(questionNumber, answer) {
            answers[questionNumber] = answer; // 답변 저장
            currentQuestion++;
            showQuestion(currentQuestion); // 다음 질문으로 이동
        }

        function showResult() {
            // 모든 질문을 숨깁니다.
            questions.forEach(id => {
                const element = document.getElementById(id);
                if (element) {
                    element.classList.remove('visible');
                    element.classList.add('hidden');
                }
            });

            const resultElement = document.getElementById('result');
            const resultTextElement = document.getElementById('result-text');
            const coupangLinkElement = document.getElementById('coupang-link');

            let result = "";
            let coupangLink = "#"; // 기본 쿠팡 링크 (나중에 실제 링크로 변경 필요)

            // 간단한 로직으로 결과 결정 (각 답변의 조합에 따라 다른 결과 도출)
            // 이 부분은 더 복잡한 로직으로 발전시킬 수 있습니다.
            if (answers[1] === 'relax' && answers[2] === 'nature') {
                result = "아름다운 해변가 휴양지 🏖️";
                coupangLink = "https://www.coupang.com/np/search?q=%ED%95%B4%EB%B3%80%EA%B0%80+%ED%9C%B4%EC%96%91&channel=user&component=list_vertical&source=user_component"; // 쿠팡 해변가 휴양 검색 링크 (예시)
            } else if (answers[1] === 'activity' && answers[3] === 'medium') {
                result = "신나는 액티비티 도시 여행 🏙️";
                 coupangLink = "https://www.coupang.com/np/search?q=%EB%8F%84%EC%8B%9C+%EC%97%AC%ED%96%89+%EC%95%A1%ED%8B%B0%EB%B9%84%ED%8B%B0&channel=user&component=list_vertical&source=user_component"; // 쿠팡 도시 여행 액티비티 검색 링크 (예시)
            } else if (answers[1] === 'culture' && answers[4] === 'alone') {
                result = "역사와 문화가 살아 숨쉬는 곳 🏛️";
                 coupangLink = "https://www.coupang.com/np/search?q=%EB%AC%B8%ED%99%94+%EC%97%AC%ED%96%89&channel=user&component=list_vertical&source=user_component"; // 쿠팡 문화 여행 검색 링크 (예시)
            } else if (answers[3] === 'low' && answers[4] === 'friends') {
                 result = "저렴하게 즐기는 배낭여행 명소 🎒";
                  coupangLink = "https://www.coupang.com/np/search?q=%EB%B0%B0%EB%82%AD%EC%97%AC%ED%96%85+%EB%AA%85%EC%86%8C&channel=user&component=list_vertical&source=user_component"; // 쿠팡 배낭여행 명소 검색 링크 (예시)
            }
            // 더 다양한 결과 조합을 추가할 수 있습니다.
            else {
                result = "당신에게는 다채로운 경험이 가득한 여행이 어울립니다! 🌍";
                 coupangLink = "https://www.coupang.com/np/search?q=%ED%95%B4%EC%99%B8%EC%97%AC%ED%96%85&channel=user&component=list_vertical&source=user_component"; // 쿠팡 해외여행 카테고리 링크 (예시)
            }


            resultTextElement.innerText = result;
            coupangLinkElement.href = coupangLink; // 쿠팡 링크 설정

            resultElement.style.display = 'block'; // 결과 컨테이너 표시
        }

    </script>

</body>
</html>