Spaces:

kimhyunwoo
/

travel

Running

App Files Files Community

travel / index.html

kimhyunwoo

Update index.html

c8d0139 verified 9 days ago

raw

history blame contribute delete

10.5 kB

	<!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>