Update index.html

index.html

@@ -18,14 +18,44 @@
             --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);
@@ -33,13 +63,11 @@
             overflow-x: hidden;
             min-height: 100vh;
         }
-
         .container {
             max-width: 1200px;
             margin: 0 auto;
             padding: 20px;
         }
-
         .header {
             text-align: center;
             padding: 80px 20px;
@@ -50,7 +78,6 @@
             overflow: hidden;
             box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
         }
-
         .header::before {
             content: '';
             position: absolute;
@@ -67,7 +94,6 @@
             animation: patternMove 20s linear infinite;
             opacity: 0.3;
         }
-
         .header h1 {
             font-size: 3.5em;
             color: var(--white);
@@ -77,7 +103,6 @@
             z-index: 1;
             animation: slideDown 1s ease-out;
         }
-
         .slogan {
             font-size: 1.8em;
             color: #FFD700;
@@ -92,7 +117,6 @@
             z-index: 1;
             animation: pulse 2s infinite;
         }
-
         .organizers {
             text-align: center;
             background: var(--card-bg);
@@ -103,14 +127,12 @@
             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;
@@ -123,13 +145,11 @@
             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;
@@ -137,16 +157,13 @@
             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);
@@ -157,12 +174,10 @@
             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;
@@ -173,19 +188,16 @@
             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;
@@ -195,12 +207,10 @@
             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;
@@ -210,7 +220,6 @@
             align-items: center;
             gap: 15px;
         }
-
         .emphasis {
             font-size: 1.3em;
             color: var(--primary);
@@ -221,28 +230,23 @@
             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; }
@@ -251,14 +255,12 @@
             .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;
@@ -267,7 +269,6 @@
             left: -150px;
             animation: float 15s infinite alternate;
         }
-
         .circle-2 {
             width: 200px;
             height: 200px;
@@ -276,13 +277,13 @@
             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>
@@ -303,6 +304,7 @@
         <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">
@@ -390,8 +392,7 @@
                     </div>
                 </div>
 
-                <div class="section">
-                    <h2>"Give Yourself the Best Christmas Gift
+
 
 
 
@@ -492,9 +493,51 @@
                         <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">December 1, 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 30, 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>
-    </div>
+        </div> <!-- content div 끝 -->
+    </div> <!-- container div 끝 -->               
 
     <script>
         function switchLanguage(lang) {
@@ -522,7 +565,6 @@
                 clickedButton.classList.add('active');
             }
         }
-
         // 페이지 로드 시 초기화
         document.addEventListener('DOMContentLoaded', () => {
             // 영어 탭을 기본으로 활성화
@@ -533,26 +575,22 @@
                 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)';
                 });
@@ -560,4 +598,4 @@
         });
     </script>
 </body>
-</html>                      
+</html>