Hugging Face's logo

Spaces:
kimhyunwoo
/
travel
Running

App Files Community
kimhyunwoo commited on
Commit
c8d0139
Β·
verified Β·
1 Parent(s): f9f5eb8

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +257 -19
index.html CHANGED
@@ -1,19 +1,257 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ko">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>λ‚˜μ—κ²Œ μ–΄μšΈλ¦¬λŠ” 여행지 μ°ΎκΈ° ✈️</title>
7
+ <style>
8
+ body {
9
+ font-family: 'Arial', sans-serif;
10
+ line-height: 1.6;
11
+ background-color: #f4f4f4;
12
+ color: #333;
13
+ margin: 0;
14
+ padding: 20px;
15
+ display: flex;
16
+ justify-content: center;
17
+ align-items: center;
18
+ min-height: 100vh;
19
+ }
20
+
21
+ .quiz-container {
22
+ background-color: #fff;
23
+ padding: 30px;
24
+ border-radius: 8px;
25
+ box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
26
+ max-width: 600px;
27
+ width: 100%;
28
+ text-align: center;
29
+ }
30
+
31
+ h1 {
32
+ color: #0056b3;
33
+ margin-bottom: 20px;
34
+ }
35
+
36
+ .question-container {
37
+ margin-bottom: 20px;
38
+ }
39
+
40
+ .question-container p {
41
+ font-size: 1.2em;
42
+ margin-bottom: 15px;
43
+ font-weight: bold;
44
+ }
45
+
46
+ .options button {
47
+ display: block;
48
+ width: 100%;
49
+ padding: 12px;
50
+ margin-bottom: 10px;
51
+ border: 1px solid #ccc;
52
+ border-radius: 5px;
53
+ background-color: #eee;
54
+ font-size: 1em;
55
+ cursor: pointer;
56
+ transition: background-color 0.3s ease;
57
+ }
58
+
59
+ .options button:hover {
60
+ background-color: #ddd;
61
+ }
62
+
63
+ .options button:active {
64
+ background-color: #ccc;
65
+ }
66
+
67
+ .result-container {
68
+ display: none; /* μ΄ˆκΈ°μ—λŠ” μˆ¨κΉ€ */
69
+ text-align: center;
70
+ }
71
+
72
+ .result-container h2 {
73
+ color: #28a745;
74
+ margin-bottom: 15px;
75
+ }
76
+
77
+ .result-container p {
78
+ font-size: 1.1em;
79
+ margin-bottom: 20px;
80
+ }
81
+
82
+ .result-container a {
83
+ display: inline-block;
84
+ background-color: #ff5722; /* 쿠팑 μ˜€λ Œμ§€μƒ‰ λŠλ‚Œ */
85
+ color: white;
86
+ padding: 12px 25px;
87
+ border-radius: 5px;
88
+ text-decoration: none;
89
+ font-size: 1.1em;
90
+ transition: background-color 0.3s ease;
91
+ }
92
+
93
+ .result-container a:hover {
94
+ background-color: #e64a19;
95
+ }
96
+
97
+ /* 질문 숨기기/보이기 μ• λ‹ˆλ©”μ΄μ…˜ */
98
+ .question-container.hidden {
99
+ display: none;
100
+ opacity: 0;
101
+ transition: opacity 0.5s ease;
102
+ }
103
+ .question-container.visible {
104
+ display: block;
105
+ opacity: 1;
106
+ transition: opacity 0.5s ease;
107
+ }
108
+
109
+ </style>
110
+ </head>
111
+ <body>
112
+
113
+ <div class="quiz-container">
114
+ <h1>λ‚˜μ—κ²Œ μ–΄μšΈλ¦¬λŠ” 여행지 μ°ΎκΈ° ✈️</h1>
115
+ <div id="intro" class="question-container visible">
116
+ <p>λͺ‡ 가지 μ§ˆλ¬Έμ— λ‹΅ν•˜κ³  λ‹Ήμ‹ μ—κ²Œ λ”± λ§žλŠ” 여행지λ₯Ό μ°Ύμ•„λ³΄μ„Έμš”!</p>
117
+ <div class="options">
118
+ <button onclick="startQuiz()">ν€΄μ¦ˆ μ‹œμž‘ν•˜κΈ°</button>
119
+ </div>
120
+ </div>
121
+
122
+ <div id="question1" class="question-container hidden">
123
+ <p>1. μ–΄λ–€ μ’…λ₯˜μ˜ 여행을 κ°€μž₯ μ’‹μ•„ν•˜μ‹œλ‚˜μš”?</p>
124
+ <div class="options">
125
+ <button onclick="answerQuestion(1, 'relax')">ν‘Ή μ‰¬λŠ” νœ΄μ–‘ μ—¬ν–‰ πŸ–οΈ</button>
126
+ <button onclick="answerQuestion(1, 'activity')">μ‹ λ‚˜λŠ” μ•‘ν‹°λΉ„ν‹° μ—¬ν–‰ πŸ§—β€β™€οΈ</button>
127
+ <button onclick="answerQuestion(1, 'culture')">λ‹€μ–‘ν•œ λ¬Έν™”λ₯Ό κ²½ν—˜ν•˜λŠ” μ—¬ν–‰ πŸ›οΈ</button>
128
+ </div>
129
+ </div>
130
+
131
+ <div id="question2" class="question-container hidden">
132
+ <p>2. μ—¬ν–‰μ§€μ—μ„œ κ°€μž₯ μ€‘μš”ν•˜κ²Œ μƒκ°ν•˜λŠ” 것은?</p>
133
+ <div class="options">
134
+ <button onclick="answerQuestion(2, 'nature')">μ•„λ¦„λ‹€μš΄ μžμ—° κ²½κ΄€ 🏞️</button>
135
+ <button onclick="answerQuestion(2, 'food')">λ§›μžˆλŠ” ν˜„μ§€ μŒμ‹ 🍲</button>
136
+ <button onclick="answerQuestion(2, 'shopping')">λ‹€μ–‘ν•œ μ‡Όν•‘ 기회 πŸ›οΈ</button>
137
+ </div>
138
+ </div>
139
+
140
+ <div id="question3" class="question-container hidden">
141
+ <p>3. μ—¬ν–‰ μ˜ˆμ‚°μ€ μ–΄λŠ 정도 μƒκ°ν•˜μ‹œλ‚˜μš”?</p>
142
+ <div class="options">
143
+ <button onclick="answerQuestion(3, 'low')">μ €λ ΄ν•˜κ²Œ μ¦κΈ°λŠ” μ—¬ν–‰ πŸ’°</button>
144
+ <button onclick="answerQuestion(3, 'medium')">μ λ‹Ήνžˆ νˆ¬μžν•˜λŠ” μ—¬ν–‰ πŸ˜‰</button>
145
+ <button onclick="answerQuestion(3, 'high')">μ˜ˆμ‚° 상관없이 μ¦κΈ°λŠ” μ—¬ν–‰ λŸ­μ…”λ¦¬ν•˜κ²Œ ✨</button>
146
+ </div>
147
+ </div>
148
+
149
+ <div id="question4" class="question-container hidden">
150
+ <p>4. λˆ„κ΅¬μ™€ ν•¨κ»˜ μ—¬ν–‰ν•˜λŠ” 것을 μ„ ν˜Έν•˜μ‹œλ‚˜μš”?</p>
151
+ <div class="options">
152
+ <button onclick="answerQuestion(4, 'alone')">혼자만의 μ‹œκ°„ 즐기기 🚢</button>
153
+ <button onclick="answerQuestion(4, 'friends')">친ꡬ λ˜λŠ” 연인과 ν•¨κ»˜ πŸ‘«</button>
154
+ <button onclick="answerQuestion(4, 'family')">κ°€μ‘±κ³Ό μ†Œμ€‘ν•œ μΆ”μ–΅ λ§Œλ“€κΈ° πŸ‘¨β€πŸ‘©β€πŸ‘§β€πŸ‘¦</button>
155
+ </div>
156
+ </div>
157
+
158
+
159
+ <div id="result" class="result-container">
160
+ <h2>λ‹Ήμ‹ μ—κ²Œ μ–΄μšΈλ¦¬λŠ” μ—¬ν–‰μ§€λŠ”...</h2>
161
+ <p id="result-text"></p>
162
+ <a id="coupang-link" href="#" target="_blank">μΏ νŒ‘μ—μ„œ κ΄€λ ¨ μ—¬ν–‰ μƒν’ˆ 찾아보기 ✈️</a>
163
+ </div>
164
+ </div>
165
+
166
+ <script>
167
+ let currentQuestion = 0;
168
+ const questions = ['intro', 'question1', 'question2', 'question3', 'question4']; // 질문 ID λͺ©λ‘
169
+ const answers = {}; // μ‚¬μš©μžμ˜ 닡변을 μ €μž₯ν•  객체
170
+
171
+ function startQuiz() {
172
+ document.getElementById('intro').classList.remove('visible');
173
+ document.getElementById('intro').classList.add('hidden');
174
+ currentQuestion++;
175
+ showQuestion(currentQuestion);
176
+ }
177
+
178
+ function showQuestion(index) {
179
+ if (index > questions.length - 1) {
180
+ showResult();
181
+ return;
182
+ }
183
+
184
+ // 이전 질문 숨기기 (λ§Œμ•½ μžˆλ‹€λ©΄)
185
+ if (currentQuestion > 0) {
186
+ const prevQuestionId = questions[currentQuestion - 1];
187
+ const prevQuestionElement = document.getElementById(prevQuestionId);
188
+ if (prevQuestionElement) {
189
+ prevQuestionElement.classList.remove('visible');
190
+ prevQuestionElement.classList.add('hidden');
191
+ }
192
+ }
193
+
194
+
195
+ const currentQuestionId = questions[index];
196
+ const currentQuestionElement = document.getElementById(currentQuestionId);
197
+ if (currentQuestionElement) {
198
+ currentQuestionElement.classList.remove('hidden');
199
+ currentQuestionElement.classList.add('visible');
200
+ }
201
+ }
202
+
203
+ function answerQuestion(questionNumber, answer) {
204
+ answers[questionNumber] = answer; // λ‹΅λ³€ μ €μž₯
205
+ currentQuestion++;
206
+ showQuestion(currentQuestion); // λ‹€μŒ 질문으둜 이동
207
+ }
208
+
209
+ function showResult() {
210
+ // λͺ¨λ“  μ§ˆλ¬Έμ„ μˆ¨κΉλ‹ˆλ‹€.
211
+ questions.forEach(id => {
212
+ const element = document.getElementById(id);
213
+ if (element) {
214
+ element.classList.remove('visible');
215
+ element.classList.add('hidden');
216
+ }
217
+ });
218
+
219
+ const resultElement = document.getElementById('result');
220
+ const resultTextElement = document.getElementById('result-text');
221
+ const coupangLinkElement = document.getElementById('coupang-link');
222
+
223
+ let result = "";
224
+ let coupangLink = "#"; // κΈ°λ³Έ 쿠팑 링크 (λ‚˜μ€‘μ— μ‹€μ œ 링크둜 λ³€κ²½ ν•„μš”)
225
+
226
+ // κ°„λ‹¨ν•œ 둜직으둜 κ²°κ³Ό κ²°μ • (각 λ‹΅λ³€μ˜ 쑰합에 따라 λ‹€λ₯Έ κ²°κ³Ό λ„μΆœ)
227
+ // 이 뢀뢄은 더 λ³΅μž‘ν•œ 둜직으둜 λ°œμ „μ‹œν‚¬ 수 μžˆμŠ΅λ‹ˆλ‹€.
228
+ if (answers[1] === 'relax' && answers[2] === 'nature') {
229
+ result = "μ•„λ¦„λ‹€μš΄ ν•΄λ³€κ°€ νœ΄μ–‘μ§€ πŸ–οΈ";
230
+ 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"; // 쿠팑 ν•΄λ³€κ°€ νœ΄μ–‘ 검색 링크 (μ˜ˆμ‹œ)
231
+ } else if (answers[1] === 'activity' && answers[3] === 'medium') {
232
+ result = "μ‹ λ‚˜λŠ” μ•‘ν‹°λΉ„ν‹° λ„μ‹œ μ—¬ν–‰ πŸ™οΈ";
233
+ 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"; // 쿠팑 λ„μ‹œ μ—¬ν–‰ μ•‘ν‹°λΉ„ν‹° 검색 링크 (μ˜ˆμ‹œ)
234
+ } else if (answers[1] === 'culture' && answers[4] === 'alone') {
235
+ result = "역사와 λ¬Έν™”κ°€ μ‚΄μ•„ μˆ¨μ‰¬λŠ” κ³³ πŸ›οΈ";
236
+ 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"; // 쿠팑 λ¬Έν™” μ—¬ν–‰ 검색 링크 (μ˜ˆμ‹œ)
237
+ } else if (answers[3] === 'low' && answers[4] === 'friends') {
238
+ result = "μ €λ ΄ν•˜κ²Œ μ¦κΈ°λŠ” λ°°λ‚­μ—¬ν–‰ λͺ…μ†Œ πŸŽ’";
239
+ 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"; // 쿠팑 λ°°λ‚­μ—¬ν–‰ λͺ…μ†Œ 검색 링크 (μ˜ˆμ‹œ)
240
+ }
241
+ // 더 λ‹€μ–‘ν•œ κ²°κ³Ό 쑰합을 μΆ”κ°€ν•  수 μžˆμŠ΅λ‹ˆλ‹€.
242
+ else {
243
+ result = "λ‹Ήμ‹ μ—κ²ŒλŠ” λ‹€μ±„λ‘œμš΄ κ²½ν—˜μ΄ κ°€λ“ν•œ 여행이 μ–΄μšΈλ¦½λ‹ˆλ‹€! 🌍";
244
+ 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"; // 쿠팑 ν•΄μ™Έμ—¬ν–‰ μΉ΄ν…Œκ³ λ¦¬ 링크 (μ˜ˆμ‹œ)
245
+ }
246
+
247
+
248
+ resultTextElement.innerText = result;
249
+ coupangLinkElement.href = coupangLink; // 쿠팑 링크 μ„€μ •
250
+
251
+ resultElement.style.display = 'block'; // κ²°κ³Ό μ»¨ν…Œμ΄λ„ˆ ν‘œμ‹œ
252
+ }
253
+
254
+ </script>
255
+
256
+ </body>
257
+ </html>