Spaces:

VIDraft
/

Mouse-Hackathon

Running

File size: 25,988 Bytes

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