Hugging Face's logo

Spaces:
VIDraft
/
Mouse-Hackathon
Running

App Files Community
1
Mouse-Hackathon / index.html
openfree's picture
openfree
Update index.html
031d8e4 verified
raw
history blame contribute delete
26 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MOUSE-I Hackathon 2024</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
<style>
:root {
--primary: #4F46E5;
--secondary: #7C3AED;
--accent: #F59E0B;
--success: #10B981;
--info: #3B82F6;
--warning: #F97316;
--background: #F8FAFC;
--text: #1E293B;
--white: #FFFFFF;
--card-bg: rgba(255, 255, 255, 0.95);
}
.news-card {
background: var(--white);
border-radius: 15px;
padding: 25px;
margin-bottom: 30px;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.news-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}
.news-subject {
font-size: 1.3em;
font-weight: bold;
color: var(--primary);
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 2px solid var(--secondary);
}
.news-content {
color: var(--text);
line-height: 1.6;
max-height: 6.4em;
overflow: hidden;
}
.news-date {
color: #666;
font-size: 0.9em;
margin-top: 15px;
text-align: right;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', system-ui, sans-serif;
}
body {
background: linear-gradient(120deg, #E0F2FE, #EDE9FE, #FEF3C7);
color: var(--text);
line-height: 1.6;
overflow-x: hidden;
min-height: 100vh;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.header {
text-align: center;
padding: 80px 20px;
background: linear-gradient(135deg, var(--primary), var(--secondary));
border-radius: 30px;
margin-bottom: 40px;
position: relative;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
linear-gradient(45deg, rgba(255,255,255,0.1) 25%, transparent 25%),
linear-gradient(-45deg, rgba(255,255,255,0.1) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.1) 75%),
linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.1) 75%);
background-size: 60px 60px;
animation: patternMove 20s linear infinite;
opacity: 0.3;
}
.header h1 {
font-size: 3.5em;
color: var(--white);
margin-bottom: 20px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
position: relative;
z-index: 1;
animation: slideDown 1s ease-out;
}
.slogan {
font-size: 1.8em;
color: #FFD700;
margin: 30px 0;
font-weight: bold;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
background: rgba(0,0,0,0.2);
padding: 15px 30px;
border-radius: 50px;
display: inline-block;
position: relative;
z-index: 1;
animation: pulse 2s infinite;
}
.organizers {
text-align: center;
background: var(--card-bg);
padding: 20px;
border-radius: 15px;
margin: 30px auto;
max-width: 800px;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
transform: translateY(-20px);
}
.tabs {
display: flex;
gap: 20px;
justify-content: center;
margin: 40px 0;
}
.tab {
padding: 15px 40px;
font-size: 1.2em;
background: var(--card-bg);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
position: relative;
overflow: hidden;
}
.tab.active {
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: var(--white);
transform: translateY(-3px);
}
.content {
background: var(--card-bg);
padding: 40px;
border-radius: 30px;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
backdrop-filter: blur(10px);
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
animation: fadeIn 0.5s ease-out;
}
.highlight-section {
background: linear-gradient(135deg, #F0F9FF, rgba(255,255,255,0.9));
border-left: 6px solid var(--primary);
padding: 30px;
margin: 30px 0;
border-radius: 20px;
box-shadow: 0 10px 20px rgba(0,0,0,0.05);
transform: translateZ(0);
transition: all 0.3s ease;
}
.highlight-section:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}
.prize {
background: linear-gradient(135deg, var(--white), #F8FAFC);
padding: 30px;
border-radius: 20px;
margin-bottom: 20px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
border-top: 5px solid var(--primary);
}
.prize:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}
.emoji {
font-size: 3em;
margin-bottom: 20px;
display: inline-block;
animation: bounce 2s infinite;
}
.process-step {
background: linear-gradient(135deg, var(--white), #F8FAFC);
padding: 30px;
border-radius: 20px;
margin: 20px 0;
transition: all 0.3s ease;
border-left: 5px solid var(--info);
box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}
.process-step:hover {
transform: translateX(10px);
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}
.section h2 {
color: var(--primary);
font-size: 2em;
margin-bottom: 30px;
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
display: flex;
align-items: center;
gap: 15px;
}
.emphasis {
font-size: 1.3em;
color: var(--primary);
font-weight: bold;
text-align: center;
margin: 25px 0;
padding: 15px;
border-radius: 10px;
background: linear-gradient(to right, rgba(79, 70, 229, 0.1), transparent);
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
@keyframes patternMove {
0% { background-position: 0 0; }
100% { background-position: 60px 60px; }
}
@media (max-width: 768px) {
.container { padding: 10px; }
.header { padding: 40px 15px; }
.header h1 { font-size: 2em; }
.slogan { font-size: 1.2em; padding: 10px 20px; }
.tab { padding: 10px 20px; }
.content { padding: 20px; }
}
.floating-circle {
position: fixed;
border-radius: 50%;
pointer-events: none;
z-index: -1;
}
.circle-1 {
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(79, 70, 229, 0.2) 0%, transparent 70%);
top: 10%;
left: -150px;
animation: float 15s infinite alternate;
}
.circle-2 {
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(245, 158, 11, 0.2) 0%, transparent 70%);
bottom: 20%;
right: -100px;
animation: float 20s infinite alternate-reverse;
}
@keyframes float {
0% { transform: translate(0, 0); }
100% { transform: translate(50px, 50px); }
}
</style>
</head>
<body>
<div class="floating-circle circle-1"></div>
<div class="floating-circle circle-2"></div>
<div class="container">
<div class="header">
<h1>MOUSE-I Hackathon<br>1-Minute Creative Innovation with AI</h1>
<div class="slogan">
"One-minute creation by AI Coding Autonomous Agent MOUSE-I"
</div>
</div>
<div class="organizers">
Hosted by VIDraft | Organized by Korea AI Promotion Association (KAIPA)<br>
<span style="font-size: 0.9em">์ฃผ์ตœ: ๋น„๋“œ๋ž˜ํ”„ํŠธ | ์ฃผ๊ด€: ํ•œ๊ตญ์ธ๊ณต์ง€๋Šฅ์ง„ํฅํ˜‘ํšŒ(KAIPA)</span>
</div>
<div class="tabs">
<button class="tab active" onclick="switchLanguage('eng')">English</button>
<button class="tab" onclick="switchLanguage('kor')">ํ•œ๊ตญ์–ด</button>
<button class="tab" onclick="switchLanguage('news')">NEWS</button>
</div>
<div class="content">
<div id="eng" class="tab-content active">
<div class="highlight-section">
<h2>๐ŸŒŸ Revolutionary Era of AI Coding</h2>
<p>"Creating a web app in just one minute" - This is no longer just imagination, but reality. With the emergence of AI Coding Autonomous Agent MOUSE-I ("One-minute creation by AI Coding Autonomous Agent MOUSE-I"), we are witnessing a new era of software development.</p>
<p>While existing AI coding tools have remained in supporting roles for developers, MOUSE-I takes a step further by enabling autonomous code generation and web app implementation. What's remarkable is that this entire process takes just one minute. It provides an innovative experience, like creating an artwork on the spot.</p>
<p>The MOUSE-I Hackathon is a special experiment that maximizes the potential of this innovative AI agent and develops basic code created in just one minute with human creativity. This is not just a coding competition, but a new creative platform where AI and humans collaborate.</p>
<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>
<p class="emphasis">A Magical Experience: Anyone aged 5 and above can create web apps without any coding knowledge!</p>
</div>
<div class="section">
<h2>๐Ÿ† Period & Prizes</h2>
<p style="font-size: 1.2em; margin-bottom: 20px;">Period: November 28 - December 23, 2024</p>
<p style="font-size: 1.2em; margin-bottom: 20px;">Total Prize: 20,000 USD(USDT)</p>
<div class="prize">
<span class="emoji">๐Ÿ†</span>
<div>
<h3>Top Rank: 10,000 USDT</h3>
<p>Highest HuggingFace Trending Rank</p>
</div>
</div>
<div class="prize">
<span class="emoji">โค๏ธ</span>
<div>
<h3>Top Likes: 5,000 USDT</h3>
<p>Most Likes</p>
</div>
</div>
<div class="prize">
<span class="emoji">๐Ÿ’ซ</span>
<div>
<h3>Top Creative: 5,000 USDT</h3>
<p>Most Innovative</p>
</div>
</div>
</div>
<div class="section">
<h2>๐Ÿš€ Participation Process</h2>
<div class="process-step">
<h3>1. Start with MOUSE-I</h3>
<p>โ€ข Access https://VIDraft-mouse1.hf.space</p>
<p>โ€ข Generate basic web app code in 1 minute</p>
<p>โ€ข Create unlimited content: games, dashboards, landing pages, utilities, etc.</p>
</div>
<div class="process-step">
<h3>2. Creative Development</h3>
<p>โ€ข Free development based on MOUSE-I generated code</p>
<p>โ€ข Additional languages like Python can be used</p>
</div>
<div class="process-step">
<h3>3. Submission</h3>
<p>โ€ข Public deployment on Hugging Face</p>
<p>โ€ข Register in Static mode</p>
<p>โ€ข Required in README.md:</p>
<div class="code-block">
short_description: "One-minute creation by AI Coding Autonomous Agent MOUSE-I"
</div>
</div>
</div>
<div class="section">
<h2>๐Ÿ“… Key Dates</h2>
<div class="process-step">
<p>โ€ข Submission Deadline: December 23, 2024, midnight (NYC time)</p>
<p>โ€ข Winners Announcement: December 24, 2024</p>
</div>
</div>
<div class="section">
<h2>โœจ Participant Benefits</h2>
<div class="process-step">
<p>โ€ข Full ownership and copyright of all creations</p>
<p>โ€ข Experience new paradigm of AI coding</p>
<p>โ€ข Multiple submissions allowed from the same account</p>
<p>โ€ข Contact: arxivgpt@gmail.com</p>
</div>
</div>
<h2>"Give Yourself the Best Christmas Gift" ๐ŸŽ„โœจ</h2>
<div class="highlight-section">
<p>What amazing results will emerge when your creativity combines with MOUSE-I's one-minute miracle?</p>
</div>
</div>
</div>
<div id="kor" class="tab-content">
<div class="highlight-section">
<h2>๐ŸŒŸ ํ˜์‹ ์ ์ธ AI ์ฝ”๋”ฉ์˜ ์ƒˆ๋กœ์šด ์‹œ๋Œ€</h2>
<p>"๋‹จ 1๋ถ„๋งŒ์— ์›น์•ฑ์„ ์ฐฝ์กฐํ•œ๋‹ค" - ์ด๋Š” ๋” ์ด์ƒ ์ƒ์ƒ์ด ์•„๋‹Œ ํ˜„์‹ค์ด ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. AI ์ฝ”๋”ฉ ์ž์œจํ˜• ์—์ด์ „ํŠธ MOUSE-I("One-minute creation by AI Coding Autonomous Agent MOUSE-I")์˜ ๋“ฑ์žฅ์œผ๋กœ, ์šฐ๋ฆฌ๋Š” ์†Œํ”„ํŠธ์›จ์–ด ๊ฐœ๋ฐœ์˜ ์ƒˆ๋กœ์šด ์‹œ๋Œ€๋ฅผ ๋ชฉ๊ฒฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.</p>
<p>๊ธฐ์กด์˜ AI ์ฝ”๋”ฉ ๋„๊ตฌ๋“ค์ด ๊ฐœ๋ฐœ์ž์˜ ๋ณด์กฐ ์—ญํ• ์— ๋จธ๋ฌผ๋ €๋‹ค๋ฉด, MOUSE-I๋Š” ํ•œ ๊ฑธ์Œ ๋” ๋‚˜์•„๊ฐ€ ์ž์œจ์ ์ธ ์ฝ”๋“œ ์ƒ์„ฑ๊ณผ ์›น์•ฑ ๊ตฌํ˜„์„ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•ฉ๋‹ˆ๋‹ค. ๋†€๋ผ์šด ๊ฒƒ์€ ์ด ๋ชจ๋“  ๊ณผ์ •์ด ๋‹จ 1๋ถ„ ๋งŒ์— ์ด๋ฃจ์–ด์ง„๋‹ค๋Š” ์ ์ž…๋‹ˆ๋‹ค. ์ด๋Š” ๋งˆ์น˜ ์ฆ‰์„์—์„œ ์˜ˆ์ˆ  ์ž‘ํ’ˆ์„ ์ฐฝ์กฐํ•˜๋Š” ๊ฒƒ๊ณผ ๊ฐ™์€ ํ˜์‹ ์ ์ธ ๊ฒฝํ—˜์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.</p>
<p>MOUSE-I ํ•ด์ปคํ†ค์€ ์ด๋Ÿฌํ•œ ํ˜์‹ ์ ์ธ AI ์—์ด์ „ํŠธ์˜ ์ž ์žฌ๋ ฅ์„ ๊ทน๋Œ€ํ™”ํ•˜๊ณ , 1๋ถ„์ด๋ผ๋Š” ์งง์€ ์ˆœ๊ฐ„์— ์ฐฝ์กฐ๋œ ๊ธฐ๋ณธ ์ฝ”๋“œ๋ฅผ ์ธ๊ฐ„์˜ ์ฐฝ์˜์„ฑ์œผ๋กœ ๋ฐœ์ „์‹œํ‚ค๋Š” ํŠน๋ณ„ํ•œ ์‹คํ—˜์ž…๋‹ˆ๋‹ค. ์ด๋Š” ๋‹จ์ˆœํ•œ ์ฝ”๋”ฉ ๋Œ€ํšŒ๊ฐ€ ์•„๋‹Œ, AI์™€ ์ธ๊ฐ„์ด ํ˜‘๋ ฅํ•˜์—ฌ ๋งŒ๋“ค์–ด๋‚ด๋Š” ์ƒˆ๋กœ์šด ์ฐฝ์ž‘์˜ ์žฅ์ด ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค.</p>
<p>MOUSE-I๋กœ ๋‹จ 1๋ถ„ ๋งŒ์— ์ƒ์„ฑ๋œ ์ˆ˜์ฒœ ๊ฐœ์˜ ๋‹ค์–‘ํ•œ ์„œ๋น„์Šค๋“ค ์ค‘ ์ˆ˜๋ฐฑ ๊ฐœ๊ฐ€ ์ด๋ฏธ ์ธํ„ฐ๋„ท์— ๊ณต๊ฐœ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ ์ค‘ ๋‹ค์ˆ˜๊ฐ€ ํ—ˆ๊น…ํŽ˜์ด์Šค ์ธ๊ธฐ ์ˆœ์œ„ ์ƒ์œ„๊ถŒ์— ์ง„์ž…ํ•˜๋ฉฐ ์„ธ์ƒ์„ ๋†€๋ผ๊ฒŒ ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.</p>
<p class="emphasis">5์„ธ ์ด์ƒ์ด๋ฉด ๋ˆ„๊ตฌ๋‚˜, ์ฝ”๋”ฉ์„ ๋ชฐ๋ผ๋„ ์›น์•ฑ์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋Š” ๋งˆ๋ฒ• ๊ฐ™์€ ๊ฒฝํ—˜!</p>
</div>
<div class="section">
<h2>๐Ÿ† ๋Œ€ํšŒ ๊ธฐ๊ฐ„ ๋ฐ ์ƒ๊ธˆ</h2>
<p style="font-size: 1.2em; margin-bottom: 20px;">๊ธฐ๊ฐ„: 2024๋…„ 11์›” 28์ผ ~ 12์›” 23์ผ</p>
<p style="font-size: 1.2em; margin-bottom: 20px;">์ด์ƒ๊ธˆ: 20,000 USD(USDT)</p>
<div class="prize">
<span class="emoji">๐Ÿ†</span>
<div>
<h3>Top Rank: 10,000 USDT</h3>
<p>ํ—ˆ๊น…ํŽ˜์ด์Šค Trending ์ตœ๊ณ  ์ˆœ์œ„</p>
</div>
</div>
<div class="prize">
<span class="emoji">โค๏ธ</span>
<div>
<h3>Top Likes: 5,000 USDT</h3>
<p>์ตœ๋‹ค ์ข‹์•„์š” ์ˆ˜</p>
</div>
</div>
<div class="prize">
<span class="emoji">๐Ÿ’ซ</span>
<div>
<h3>Top Creative: 5,000 USDT</h3>
<p>ํ˜์‹ ์„ฑ ํ‰๊ฐ€</p>
</div>
</div>
</div>
<div class="section">
<h2>๐Ÿš€ ์ฐธ๊ฐ€ ํ”„๋กœ์„ธ์Šค</h2>
<div class="process-step">
<h3>1. MOUSE-I๋กœ ์‹œ์ž‘ํ•˜๊ธฐ</h3>
<p>โ€ข https://VIDraft-mouse1.hf.space ์ ‘์†</p>
<p>โ€ข 1๋ถ„ ๋งŒ์— ์›น์•ฑ ๊ธฐ๋ณธ ์ฝ”๋“œ ์ƒ์„ฑ</p>
<p>โ€ข ๊ฒŒ์ž„, ๋Œ€์‹œ๋ณด๋“œ, ๋žœ๋”ฉํŽ˜์ด์ง€, ์œ ํ‹ธ๋ฆฌํ‹ฐ ๋“ฑ ๋ฌด์ œํ•œ ์ฐฝ์ž‘</p>
</div>
<div class="process-step">
<h3>2. ์ฐฝ์˜์  ๊ฐœ๋ฐœ</h3>
<p>โ€ข MOUSE-I ์ƒ์„ฑ ์ฝ”๋“œ ๊ธฐ๋ฐ˜ ์ž์œ ๋กœ์šด ๋ฐœ์ „</p>
<p>โ€ข Python ๋“ฑ ์ถ”๊ฐ€ ์–ธ์–ด ํ™œ์šฉ ๊ฐ€๋Šฅ</p>
</div>
<div class="process-step">
<h3>3. ์ž‘ํ’ˆ ์ œ์ถœ</h3>
<p>โ€ข Hugging Face์— Public ๋ฐฐํฌ</p>
<p>โ€ข Static mode๋กœ ๋“ฑ๋ก</p>
<p>โ€ข README.md ํ•„์ˆ˜ ๋ฌธ๊ตฌ:</p>
<div class="code-block">
short_description: "One-minute creation by AI Coding Autonomous Agent MOUSE-I"
</div>
</div>
</div>
<div class="section">
<h2>๐Ÿ“… ์ฃผ์š” ์ผ์ •</h2>
<div class="process-step">
<p>โ€ข ์ œ์ถœ ๋งˆ๊ฐ: 2024๋…„ 12์›” 23์ผ ์ž์ • (๋‰ด์š•์‹œ๊ฐ„)</p>
<p>โ€ข ์ˆ˜์ƒ์ž ๋ฐœํ‘œ: 2024๋…„ 12์›” 24์ผ</p>
</div>
</div>
<div class="section">
<h2>โœจ ์ฐธ๊ฐ€์ž ํŠน์ „</h2>
<div class="process-step">
<p>โ€ข ๋ชจ๋“  ์ฐฝ์ž‘๋ฌผ์˜ ์†Œ์œ ๊ถŒ๊ณผ ์ €์ž‘๊ถŒ ๋ณด์žฅ</p>
<p>โ€ข AI ์ฝ”๋”ฉ์˜ ์ƒˆ๋กœ์šด ํŒจ๋Ÿฌ๋‹ค์ž„ ๊ฒฝํ—˜</p>
<p>โ€ข ๋™์ผ ๊ณ„์ •์œผ๋กœ ๋‹ค์ˆ˜์˜ ์ฐฝ์ž‘๋ฌผ๋“ค์„ ์ถœํ’ˆํ•˜๋Š”๊ฒƒ ํ—ˆ์šฉ๋จ</p>
<p>โ€ข ๋ฌธ์˜์‚ฌํ•ญ: arxivgpt@gmail.com</p>
</div>
</div>
<div class="section">
<h2>"๋‹น์‹ ์—๊ฒŒ ์ตœ๊ณ ์˜ ํฌ๋ฆฌ์Šค๋งˆ์Šค ์„ ๋ฌผ์„ ์ฃผ์„ธ์š”" ๐ŸŽ„โœจ</h2>
<div class="highlight-section">
<p>MOUSE-I๊ฐ€ 1๋ถ„ ๋งŒ์— ์ฐฝ์กฐํ•˜๋Š” ๊ธฐ์  ๊ฐ™์€ ์ˆœ๊ฐ„, ์—ฌ๊ธฐ์— ์—ฌ๋Ÿฌ๋ถ„์˜ ์ฐฝ์˜์„ฑ์ด ๋”ํ•ด์ง„๋‹ค๋ฉด ์–ด๋–ค ๋†€๋ผ์šด ๊ฒฐ๊ณผ๋ฌผ์ด ํƒ„์ƒํ• ๊นŒ์š”?</p>
</div>
</div>
</div> <!-- ํ•œ๊ตญ์–ด ์„น์…˜ ๋ -->
<!-- News Content -->
<div id="news" class="tab-content">
<div class="section">
<h2>๐Ÿ“ฐ Latest Updates</h2>
<!-- ๋‰ด์Šค ์นด๋“œ 1 -->
<div class="news-card">
<div class="news-subject">
MOUSE-I Hackathon Announces Extended Submission Deadline
</div>
<div class="news-content">
Due to overwhelming interest from the global developer community, the MOUSE-I Hackathon has extended its submission deadline. This extension will give participants more time to perfect their innovative creations and maximize their chances of winning the substantial prize pool.
</div>
<div class="news-date">November 28, 2024</div>
</div>
<!-- ๋‰ด์Šค ์นด๋“œ 2 -->
<div class="news-card">
<div class="news-subject">
Early Submissions Show Promising Innovation
</div>
<div class="news-content">
The first wave of MOUSE-I Hackathon submissions has demonstrated remarkable creativity and technical prowess. Several projects have already gained significant traction on HuggingFace, showcasing the potential of one-minute AI-powered development.
</div>
<div class="news-date">November 29, 2024</div>
</div>
<!-- ์ƒˆ๋กœ์šด ๋‰ด์Šค ์นด๋“œ ํ…œํ”Œ๋ฆฟ -->
<!--
<div class="news-card">
<div class="news-subject">
[์ œ๋ชฉ์„ ์ž…๋ ฅํ•˜์„ธ์š”]
</div>
<div class="news-content">
[๋‚ด์šฉ์„ ์ž…๋ ฅํ•˜์„ธ์š”]
</div>
<div class="news-date">[๋‚ ์งœ๋ฅผ ์ž…๋ ฅํ•˜์„ธ์š”]</div>
</div>
-->
</div>
</div>
</div> <!-- content div ๋ -->
</div> <!-- container div ๋ -->
<script>
function switchLanguage(lang) {
// ๋ชจ๋“  ํƒญ ์ปจํ…์ธ  ์ˆจ๊ธฐ๊ธฐ
const tabContents = document.querySelectorAll('.tab-content');
tabContents.forEach(content => {
content.classList.remove('active');
});
// ๋ชจ๋“  ํƒญ ๋ฒ„ํŠผ์—์„œ active ํด๋ž˜์Šค ์ œ๊ฑฐ
const tabButtons = document.querySelectorAll('.tab');
tabButtons.forEach(button => {
button.classList.remove('active');
});
// ์„ ํƒ๋œ ์–ธ์–ด์˜ ์ปจํ…์ธ  ํ‘œ์‹œ
const selectedContent = document.getElementById(lang);
if (selectedContent) {
selectedContent.classList.add('active');
}
// ํด๋ฆญ๋œ ๋ฒ„ํŠผ์— active ํด๋ž˜์Šค ์ถ”๊ฐ€
const clickedButton = event.currentTarget;
if (clickedButton) {
clickedButton.classList.add('active');
}
}
// ํŽ˜์ด์ง€ ๋กœ๋“œ ์‹œ ์ดˆ๊ธฐํ™”
document.addEventListener('DOMContentLoaded', () => {
// ์˜์–ด ํƒญ์„ ๊ธฐ๋ณธ์œผ๋กœ ํ™œ์„ฑํ™”
const engContent = document.getElementById('eng');
const engTab = document.querySelector('.tab');
if (engContent && engTab) {
engContent.classList.add('active');
engTab.classList.add('active');
}
// ์• ๋‹ˆ๋ฉ”์ด์…˜ ํšจ๊ณผ ์ถ”๊ฐ€
const prizes = document.querySelectorAll('.prize');
prizes.forEach(prize => {
prize.addEventListener('mouseenter', () => {
prize.style.transform = 'translateY(-10px) scale(1.02)';
});
prize.addEventListener('mouseleave', () => {
prize.style.transform = 'translateY(0) scale(1)';
});
});
// ํ”„๋กœ์„ธ์Šค ์Šคํ… ํ˜ธ๋ฒ„ ํšจ๊ณผ
const steps = document.querySelectorAll('.process-step');
steps.forEach(step => {
step.addEventListener('mouseenter', () => {
step.style.transform = 'translateX(10px)';
});
step.addEventListener('mouseleave', () => {
step.style.transform = 'translateX(0)';
});
});
});
</script>
</body>
</html>