Spaces:

VIDraft
/

Mouse-Hackathon

Running

App Files Files Community

Mouse-Hackathon / index.html

openfree

Update index.html

4e0db43 verified 9 months ago

raw

history blame

20.7 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);
	}

	* {
	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>
	</div>

	<div class="content">
	<div id="eng" class="tab-content active">
	<div class="highlight-section">
	<h2>🌟 Revolutionary Era of AI Coding</h2>
	<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: [email protected]</p>
	</div>
	</div>

	<div class="section">
	<h2>"Give Yourself the Best Christmas Gift



	<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>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>• 문의사항: [email protected]</p>
	</div>
	</div>

	<div class="section">
	<h2>"당신에게 최고의 크리스마스 선물을 주세요" 🎄✨</h2>
	<div class="highlight-section">
	<p>MOUSE-I가 1분 만에 창조하는 기적 같은 순간, 여기에 여러분의 창의성이 더해진다면 어떤 놀라운 결과물이 탄생할까요?</p>
	</div>
	</div>
	</div>
	</div>
	</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>