Hugging Face's logo

Spaces:
VIDraft
/
Mouse-Hackathon
Running

App Files Community
1
openfree commited on
Commit
4e0db43
β€’
1 Parent(s): a5b91d3

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +557 -19
index.html CHANGED
@@ -1,19 +1,557 @@
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="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>MOUSE-I Hackathon 2024</title>
7
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
8
+ <style>
9
+ :root {
10
+ --primary: #4F46E5;
11
+ --secondary: #7C3AED;
12
+ --accent: #F59E0B;
13
+ --success: #10B981;
14
+ --info: #3B82F6;
15
+ --warning: #F97316;
16
+ --background: #F8FAFC;
17
+ --text: #1E293B;
18
+ --white: #FFFFFF;
19
+ --card-bg: rgba(255, 255, 255, 0.95);
20
+ }
21
+
22
+ * {
23
+ margin: 0;
24
+ padding: 0;
25
+ box-sizing: border-box;
26
+ font-family: 'Segoe UI', system-ui, sans-serif;
27
+ }
28
+
29
+ body {
30
+ background: linear-gradient(120deg, #E0F2FE, #EDE9FE, #FEF3C7);
31
+ color: var(--text);
32
+ line-height: 1.6;
33
+ overflow-x: hidden;
34
+ min-height: 100vh;
35
+ }
36
+
37
+ .container {
38
+ max-width: 1200px;
39
+ margin: 0 auto;
40
+ padding: 20px;
41
+ }
42
+
43
+ .header {
44
+ text-align: center;
45
+ padding: 80px 20px;
46
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
47
+ border-radius: 30px;
48
+ margin-bottom: 40px;
49
+ position: relative;
50
+ overflow: hidden;
51
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
52
+ }
53
+
54
+ .header::before {
55
+ content: '';
56
+ position: absolute;
57
+ top: 0;
58
+ left: 0;
59
+ right: 0;
60
+ bottom: 0;
61
+ background:
62
+ linear-gradient(45deg, rgba(255,255,255,0.1) 25%, transparent 25%),
63
+ linear-gradient(-45deg, rgba(255,255,255,0.1) 25%, transparent 25%),
64
+ linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.1) 75%),
65
+ linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.1) 75%);
66
+ background-size: 60px 60px;
67
+ animation: patternMove 20s linear infinite;
68
+ opacity: 0.3;
69
+ }
70
+
71
+ .header h1 {
72
+ font-size: 3.5em;
73
+ color: var(--white);
74
+ margin-bottom: 20px;
75
+ text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
76
+ position: relative;
77
+ z-index: 1;
78
+ animation: slideDown 1s ease-out;
79
+ }
80
+
81
+ .slogan {
82
+ font-size: 1.8em;
83
+ color: #FFD700;
84
+ margin: 30px 0;
85
+ font-weight: bold;
86
+ text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
87
+ background: rgba(0,0,0,0.2);
88
+ padding: 15px 30px;
89
+ border-radius: 50px;
90
+ display: inline-block;
91
+ position: relative;
92
+ z-index: 1;
93
+ animation: pulse 2s infinite;
94
+ }
95
+
96
+ .organizers {
97
+ text-align: center;
98
+ background: var(--card-bg);
99
+ padding: 20px;
100
+ border-radius: 15px;
101
+ margin: 30px auto;
102
+ max-width: 800px;
103
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
104
+ transform: translateY(-20px);
105
+ }
106
+
107
+ .tabs {
108
+ display: flex;
109
+ gap: 20px;
110
+ justify-content: center;
111
+ margin: 40px 0;
112
+ }
113
+
114
+ .tab {
115
+ padding: 15px 40px;
116
+ font-size: 1.2em;
117
+ background: var(--card-bg);
118
+ border: none;
119
+ border-radius: 50px;
120
+ cursor: pointer;
121
+ transition: all 0.3s ease;
122
+ box-shadow: 0 5px 15px rgba(0,0,0,0.1);
123
+ position: relative;
124
+ overflow: hidden;
125
+ }
126
+
127
+ .tab.active {
128
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
129
+ color: var(--white);
130
+ transform: translateY(-3px);
131
+ }
132
+
133
+ .content {
134
+ background: var(--card-bg);
135
+ padding: 40px;
136
+ border-radius: 30px;
137
+ box-shadow: 0 20px 40px rgba(0,0,0,0.1);
138
+ backdrop-filter: blur(10px);
139
+ }
140
+
141
+ .tab-content {
142
+ display: none;
143
+ }
144
+
145
+ .tab-content.active {
146
+ display: block;
147
+ animation: fadeIn 0.5s ease-out;
148
+ }
149
+
150
+ .highlight-section {
151
+ background: linear-gradient(135deg, #F0F9FF, rgba(255,255,255,0.9));
152
+ border-left: 6px solid var(--primary);
153
+ padding: 30px;
154
+ margin: 30px 0;
155
+ border-radius: 20px;
156
+ box-shadow: 0 10px 20px rgba(0,0,0,0.05);
157
+ transform: translateZ(0);
158
+ transition: all 0.3s ease;
159
+ }
160
+
161
+ .highlight-section:hover {
162
+ transform: translateY(-5px);
163
+ box-shadow: 0 15px 30px rgba(0,0,0,0.1);
164
+ }
165
+
166
+ .prize {
167
+ background: linear-gradient(135deg, var(--white), #F8FAFC);
168
+ padding: 30px;
169
+ border-radius: 20px;
170
+ margin-bottom: 20px;
171
+ transition: all 0.3s ease;
172
+ position: relative;
173
+ overflow: hidden;
174
+ border-top: 5px solid var(--primary);
175
+ }
176
+
177
+ .prize:hover {
178
+ transform: translateY(-10px) scale(1.02);
179
+ box-shadow: 0 20px 40px rgba(0,0,0,0.15);
180
+ }
181
+
182
+ .emoji {
183
+ font-size: 3em;
184
+ margin-bottom: 20px;
185
+ display: inline-block;
186
+ animation: bounce 2s infinite;
187
+ }
188
+
189
+ .process-step {
190
+ background: linear-gradient(135deg, var(--white), #F8FAFC);
191
+ padding: 30px;
192
+ border-radius: 20px;
193
+ margin: 20px 0;
194
+ transition: all 0.3s ease;
195
+ border-left: 5px solid var(--info);
196
+ box-shadow: 0 10px 20px rgba(0,0,0,0.05);
197
+ }
198
+
199
+ .process-step:hover {
200
+ transform: translateX(10px);
201
+ box-shadow: 0 15px 30px rgba(0,0,0,0.1);
202
+ }
203
+
204
+ .section h2 {
205
+ color: var(--primary);
206
+ font-size: 2em;
207
+ margin-bottom: 30px;
208
+ text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
209
+ display: flex;
210
+ align-items: center;
211
+ gap: 15px;
212
+ }
213
+
214
+ .emphasis {
215
+ font-size: 1.3em;
216
+ color: var(--primary);
217
+ font-weight: bold;
218
+ text-align: center;
219
+ margin: 25px 0;
220
+ padding: 15px;
221
+ border-radius: 10px;
222
+ background: linear-gradient(to right, rgba(79, 70, 229, 0.1), transparent);
223
+ }
224
+
225
+ @keyframes fadeIn {
226
+ from { opacity: 0; transform: translateY(20px); }
227
+ to { opacity: 1; transform: translateY(0); }
228
+ }
229
+
230
+ @keyframes bounce {
231
+ 0%, 100% { transform: translateY(0); }
232
+ 50% { transform: translateY(-10px); }
233
+ }
234
+
235
+ @keyframes pulse {
236
+ 0% { transform: scale(1); }
237
+ 50% { transform: scale(1.05); }
238
+ 100% { transform: scale(1); }
239
+ }
240
+
241
+ @keyframes patternMove {
242
+ 0% { background-position: 0 0; }
243
+ 100% { background-position: 60px 60px; }
244
+ }
245
+
246
+ @media (max-width: 768px) {
247
+ .container { padding: 10px; }
248
+ .header { padding: 40px 15px; }
249
+ .header h1 { font-size: 2em; }
250
+ .slogan { font-size: 1.2em; padding: 10px 20px; }
251
+ .tab { padding: 10px 20px; }
252
+ .content { padding: 20px; }
253
+ }
254
+
255
+ .floating-circle {
256
+ position: fixed;
257
+ border-radius: 50%;
258
+ pointer-events: none;
259
+ z-index: -1;
260
+ }
261
+
262
+ .circle-1 {
263
+ width: 300px;
264
+ height: 300px;
265
+ background: radial-gradient(circle, rgba(79, 70, 229, 0.2) 0%, transparent 70%);
266
+ top: 10%;
267
+ left: -150px;
268
+ animation: float 15s infinite alternate;
269
+ }
270
+
271
+ .circle-2 {
272
+ width: 200px;
273
+ height: 200px;
274
+ background: radial-gradient(circle, rgba(245, 158, 11, 0.2) 0%, transparent 70%);
275
+ bottom: 20%;
276
+ right: -100px;
277
+ animation: float 20s infinite alternate-reverse;
278
+ }
279
+
280
+ @keyframes float {
281
+ 0% { transform: translate(0, 0); }
282
+ 100% { transform: translate(50px, 50px); }
283
+ }
284
+ </style>
285
+ </head>
286
+ <body>
287
+ <div class="floating-circle circle-1"></div>
288
+ <div class="floating-circle circle-2"></div>
289
+
290
+ <div class="container">
291
+ <div class="header">
292
+ <h1>MOUSE-I Hackathon<br>1-Minute Creative Innovation with AI</h1>
293
+ <div class="slogan">
294
+ "One-minute creation by AI Coding Autonomous Agent MOUSE-I"
295
+ </div>
296
+ </div>
297
+
298
+ <div class="organizers">
299
+ Hosted by VIDraft | Organized by Korea AI Promotion Association (KAIPA)<br>
300
+ <span style="font-size: 0.9em">주졜: λΉ„λ“œλž˜ν”„νŠΈ | μ£Όκ΄€: ν•œκ΅­μΈκ³΅μ§€λŠ₯진ν₯ν˜‘νšŒ(KAIPA)</span>
301
+ </div>
302
+
303
+ <div class="tabs">
304
+ <button class="tab active" onclick="switchLanguage('eng')">English</button>
305
+ <button class="tab" onclick="switchLanguage('kor')">ν•œκ΅­μ–΄</button>
306
+ </div>
307
+
308
+ <div class="content">
309
+ <div id="eng" class="tab-content active">
310
+ <div class="highlight-section">
311
+ <h2>🌟 Revolutionary Era of AI Coding</h2>
312
+ <p>Among thousands of diverse services created in just one minute with MOUSE-I, hundreds are already publicly available online. Many have reached top rankings on HuggingFace, amazing the world with their capabilities.</p>
313
+ <p class="emphasis">A Magical Experience: Anyone aged 5 and above can create web apps without any coding knowledge!</p>
314
+ </div>
315
+
316
+ <div class="section">
317
+ <h2>πŸ† Period & Prizes</h2>
318
+ <p style="font-size: 1.2em; margin-bottom: 20px;">Period: November 28 - December 23, 2024</p>
319
+ <p style="font-size: 1.2em; margin-bottom: 20px;">Total Prize: 20,000 USD(USDT)</p>
320
+
321
+ <div class="prize">
322
+ <span class="emoji">πŸ†</span>
323
+ <div>
324
+ <h3>Top Rank: 10,000 USDT</h3>
325
+ <p>Highest HuggingFace Trending Rank</p>
326
+ </div>
327
+ </div>
328
+
329
+ <div class="prize">
330
+ <span class="emoji">❀️</span>
331
+ <div>
332
+ <h3>Top Likes: 5,000 USDT</h3>
333
+ <p>Most Likes</p>
334
+ </div>
335
+ </div>
336
+
337
+ <div class="prize">
338
+ <span class="emoji">πŸ’«</span>
339
+ <div>
340
+ <h3>Top Creative: 5,000 USDT</h3>
341
+ <p>Most Innovative</p>
342
+ </div>
343
+ </div>
344
+ </div>
345
+
346
+ <div class="section">
347
+ <h2>πŸš€ Participation Process</h2>
348
+ <div class="process-step">
349
+ <h3>1. Start with MOUSE-I</h3>
350
+ <p>β€’ Access https://VIDraft-mouse1.hf.space</p>
351
+ <p>β€’ Generate basic web app code in 1 minute</p>
352
+ <p>β€’ Create unlimited content: games, dashboards, landing pages, utilities, etc.</p>
353
+ </div>
354
+
355
+ <div class="process-step">
356
+ <h3>2. Creative Development</h3>
357
+ <p>β€’ Free development based on MOUSE-I generated code</p>
358
+ <p>β€’ Additional languages like Python can be used</p>
359
+ </div>
360
+
361
+ <div class="process-step">
362
+ <h3>3. Submission</h3>
363
+ <p>β€’ Public deployment on Hugging Face</p>
364
+ <p>β€’ Register in Static mode</p>
365
+ <p>β€’ Required in README.md:</p>
366
+ <div class="code-block">
367
+ short_description: "One-minute creation by AI Coding Autonomous Agent MOUSE-I"
368
+ </div>
369
+ </div>
370
+ </div>
371
+
372
+ <div class="section">
373
+ <h2>πŸ“… Key Dates</h2>
374
+ <div class="process-step">
375
+ <p>β€’ Submission Deadline: December 23, 2024, midnight (NYC time)</p>
376
+ <p>β€’ Winners Announcement: December 24, 2024</p>
377
+ </div>
378
+ </div>
379
+
380
+ <div class="section">
381
+ <h2>✨ Participant Benefits</h2>
382
+ <div class="process-step">
383
+ <p>β€’ Full ownership and copyright of all creations</p>
384
+ <p>β€’ Experience new paradigm of AI coding</p>
385
+ <p>β€’ Multiple submissions allowed from the same account</p>
386
+ <p>β€’ Contact: [email protected]</p>
387
+ </div>
388
+ </div>
389
+
390
+ <div class="section">
391
+ <h2>"Give Yourself the Best Christmas Gift
392
+
393
+
394
+
395
+ <h2>"Give Yourself the Best Christmas Gift" πŸŽ„βœ¨</h2>
396
+ <div class="highlight-section">
397
+ <p>What amazing results will emerge when your creativity combines with MOUSE-I's one-minute miracle?</p>
398
+ </div>
399
+ </div>
400
+ </div>
401
+
402
+ <div id="kor" class="tab-content">
403
+ <div class="highlight-section">
404
+ <h2>🌟 ν˜μ‹ μ μΈ AI μ½”λ”©μ˜ μƒˆλ‘œμš΄ μ‹œλŒ€</h2>
405
+ <p>MOUSE-I둜 단 1λΆ„ λ§Œμ— μƒμ„±λœ 수천 개의 λ‹€μ–‘ν•œ μ„œλΉ„μŠ€λ“€ 쀑 수백 κ°œκ°€ 이미 인터넷에 κ³΅κ°œλ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€. κ·Έ 쀑 λ‹€μˆ˜κ°€ ν—ˆκΉ…νŽ˜μ΄μŠ€ 인기 μˆœμœ„ μƒμœ„κΆŒμ— μ§„μž…ν•˜λ©° 세상을 λ†€λΌκ²Œ ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€.</p>
406
+ <p class="emphasis">5μ„Έ 이상이면 λˆ„κ΅¬λ‚˜, 코딩을 λͺ°λΌλ„ 웹앱을 λ§Œλ“€ 수 μžˆλŠ” λ§ˆλ²• 같은 κ²½ν—˜!</p>
407
+ </div>
408
+
409
+ <div class="section">
410
+ <h2>πŸ† λŒ€νšŒ κΈ°κ°„ 및 μƒκΈˆ</h2>
411
+ <p style="font-size: 1.2em; margin-bottom: 20px;">κΈ°κ°„: 2024λ…„ 11μ›” 28일 ~ 12μ›” 23일</p>
412
+ <p style="font-size: 1.2em; margin-bottom: 20px;">μ΄μƒκΈˆ: 20,000 USD(USDT)</p>
413
+
414
+ <div class="prize">
415
+ <span class="emoji">πŸ†</span>
416
+ <div>
417
+ <h3>Top Rank: 10,000 USDT</h3>
418
+ <p>ν—ˆκΉ…νŽ˜μ΄μŠ€ Trending 졜고 μˆœμœ„</p>
419
+ </div>
420
+ </div>
421
+
422
+ <div class="prize">
423
+ <span class="emoji">❀️</span>
424
+ <div>
425
+ <h3>Top Likes: 5,000 USDT</h3>
426
+ <p>μ΅œλ‹€ μ’‹μ•„μš” 수</p>
427
+ </div>
428
+ </div>
429
+
430
+ <div class="prize">
431
+ <span class="emoji">πŸ’«</span>
432
+ <div>
433
+ <h3>Top Creative: 5,000 USDT</h3>
434
+ <p>ν˜μ‹ μ„± 평가</p>
435
+ </div>
436
+ </div>
437
+ </div>
438
+
439
+ <div class="section">
440
+ <h2>πŸš€ μ°Έκ°€ ν”„λ‘œμ„ΈμŠ€</h2>
441
+ <div class="process-step">
442
+ <h3>1. MOUSE-I둜 μ‹œμž‘ν•˜κΈ°</h3>
443
+ <p>β€’ https://VIDraft-mouse1.hf.space 접속</p>
444
+ <p>β€’ 1λΆ„ λ§Œμ— μ›Ήμ•± κΈ°λ³Έ μ½”λ“œ 생성</p>
445
+ <p>β€’ κ²Œμž„, λŒ€μ‹œλ³΄λ“œ, λžœλ”©νŽ˜μ΄μ§€, μœ ν‹Έλ¦¬ν‹° λ“± λ¬΄μ œν•œ μ°½μž‘</p>
446
+ </div>
447
+
448
+ <div class="process-step">
449
+ <h3>2. 창의적 개발</h3>
450
+ <p>β€’ MOUSE-I 생성 μ½”λ“œ 기반 자유둜운 λ°œμ „</p>
451
+ <p>β€’ Python λ“± μΆ”κ°€ μ–Έμ–΄ ν™œμš© κ°€λŠ₯</p>
452
+ </div>
453
+
454
+ <div class="process-step">
455
+ <h3>3. μž‘ν’ˆ 제좜</h3>
456
+ <p>β€’ Hugging Face에 Public 배포</p>
457
+ <p>β€’ Static mode둜 등둝</p>
458
+ <p>β€’ README.md ν•„μˆ˜ 문ꡬ:</p>
459
+ <div class="code-block">
460
+ short_description: "One-minute creation by AI Coding Autonomous Agent MOUSE-I"
461
+ </div>
462
+ </div>
463
+ </div>
464
+
465
+ <div class="section">
466
+ <h2>πŸ“… μ£Όμš” 일정</h2>
467
+ <div class="process-step">
468
+ <p>β€’ 제좜 마감: 2024λ…„ 12μ›” 23일 μžμ • (λ‰΄μš•μ‹œκ°„)</p>
469
+ <p>β€’ μˆ˜μƒμž λ°œν‘œ: 2024λ…„ 12μ›” 24일</p>
470
+ </div>
471
+ </div>
472
+
473
+ <div class="section">
474
+ <h2>✨ μ°Έκ°€μž νŠΉμ „</h2>
475
+ <div class="process-step">
476
+ <p>β€’ λͺ¨λ“  μ°½μž‘λ¬Όμ˜ μ†Œμœ κΆŒκ³Ό μ €μž‘κΆŒ 보μž₯</p>
477
+ <p>β€’ AI μ½”λ”©μ˜ μƒˆλ‘œμš΄ νŒ¨λŸ¬λ‹€μž„ κ²½ν—˜</p>
478
+ <p>β€’ 동일 κ³„μ •μœΌλ‘œ λ‹€μˆ˜μ˜ μ°½μž‘λ¬Όλ“€μ„ μΆœν’ˆν•˜λŠ”κ²ƒ ν—ˆμš©λ¨</p>
479
+ <p>β€’ λ¬Έμ˜μ‚¬ν•­: [email protected]</p>
480
+ </div>
481
+ </div>
482
+
483
+ <div class="section">
484
+ <h2>"λ‹Ήμ‹ μ—κ²Œ 졜고의 크리슀마슀 선물을 μ£Όμ„Έμš”" πŸŽ„βœ¨</h2>
485
+ <div class="highlight-section">
486
+ <p>MOUSE-Iκ°€ 1λΆ„ λ§Œμ— μ°½μ‘°ν•˜λŠ” 기적 같은 μˆœκ°„, 여기에 μ—¬λŸ¬λΆ„μ˜ μ°½μ˜μ„±μ΄ 더해진닀면 μ–΄λ–€ λ†€λΌμš΄ 결과물이 νƒ„μƒν• κΉŒμš”?</p>
487
+ </div>
488
+ </div>
489
+ </div>
490
+ </div>
491
+ </div>
492
+
493
+ <script>
494
+ function switchLanguage(lang) {
495
+ // λͺ¨λ“  νƒ­ 컨텐츠 숨기기
496
+ const tabContents = document.querySelectorAll('.tab-content');
497
+ tabContents.forEach(content => {
498
+ content.classList.remove('active');
499
+ });
500
+
501
+ // λͺ¨λ“  νƒ­ λ²„νŠΌμ—μ„œ active 클래슀 제거
502
+ const tabButtons = document.querySelectorAll('.tab');
503
+ tabButtons.forEach(button => {
504
+ button.classList.remove('active');
505
+ });
506
+
507
+ // μ„ νƒλœ μ–Έμ–΄μ˜ 컨텐츠 ν‘œμ‹œ
508
+ const selectedContent = document.getElementById(lang);
509
+ if (selectedContent) {
510
+ selectedContent.classList.add('active');
511
+ }
512
+
513
+ // 클릭된 λ²„νŠΌμ— active 클래슀 μΆ”κ°€
514
+ const clickedButton = event.currentTarget;
515
+ if (clickedButton) {
516
+ clickedButton.classList.add('active');
517
+ }
518
+ }
519
+
520
+ // νŽ˜μ΄μ§€ λ‘œλ“œ μ‹œ μ΄ˆκΈ°ν™”
521
+ document.addEventListener('DOMContentLoaded', () => {
522
+ // μ˜μ–΄ 탭을 기본으둜 ν™œμ„±ν™”
523
+ const engContent = document.getElementById('eng');
524
+ const engTab = document.querySelector('.tab');
525
+
526
+ if (engContent && engTab) {
527
+ engContent.classList.add('active');
528
+ engTab.classList.add('active');
529
+ }
530
+
531
+ // μ• λ‹ˆλ©”μ΄μ…˜ 효과 μΆ”κ°€
532
+ const prizes = document.querySelectorAll('.prize');
533
+ prizes.forEach(prize => {
534
+ prize.addEventListener('mouseenter', () => {
535
+ prize.style.transform = 'translateY(-10px) scale(1.02)';
536
+ });
537
+
538
+ prize.addEventListener('mouseleave', () => {
539
+ prize.style.transform = 'translateY(0) scale(1)';
540
+ });
541
+ });
542
+
543
+ // ν”„λ‘œμ„ΈμŠ€ μŠ€ν… ν˜Έλ²„ 효과
544
+ const steps = document.querySelectorAll('.process-step');
545
+ steps.forEach(step => {
546
+ step.addEventListener('mouseenter', () => {
547
+ step.style.transform = 'translateX(10px)';
548
+ });
549
+
550
+ step.addEventListener('mouseleave', () => {
551
+ step.style.transform = 'translateX(0)';
552
+ });
553
+ });
554
+ });
555
+ </script>
556
+ </body>
557
+ </html>