Spaces:

VIDraft
/

Mouse-Hackathon

Running

File size: 20,744 Bytes

4e0db43

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