Update index.html

index.html

@@ -260,22 +260,118 @@
             left: 100%;
         }
         
-        /* Iframe styles */
-        .iframe-container {
+        /* External link container */
+        .external-container {
             background: rgba(255, 255, 255, 0.95);
             border-radius: 20px;
-            padding: 20px;
+            padding: 40px;
             box-shadow: 0 20px 60px rgba(0,0,0,0.3);
             backdrop-filter: blur(10px);
-            height: calc(100vh - 200px);
-            min-height: 600px;
+            text-align: center;
+        }
+        
+        .external-container h2 {
+            color: #333;
+            font-size: 28px;
+            margin-bottom: 20px;
+        }
+        
+        .external-container p {
+            color: #666;
+            font-size: 16px;
+            margin-bottom: 30px;
+            line-height: 1.6;
         }
         
-        .iframe-container iframe {
+        .external-link {
+            display: inline-block;
+            color: #1976D2;
+            background: white;
+            padding: 14px 30px;
+            border-radius: 30px;
+            text-decoration: none;
+            font-weight: 600;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+            transition: all 0.3s;
+        }
+        
+        .external-link:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(0,0,0,0.15);
+        }
+        
+        /* News section styles */
+        .news-container {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+            gap: 30px;
+            margin-top: 40px;
+        }
+        
+        .news-card {
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 16px;
+            overflow: hidden;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+            transition: all 0.3s;
+            cursor: pointer;
+        }
+        
+        .news-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 15px 40px rgba(0,0,0,0.25);
+        }
+        
+        .news-thumbnail {
             width: 100%;
-            height: 100%;
-            border: none;
-            border-radius: 12px;
+            height: 200px;
+            background-size: cover;
+            background-position: center;
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .news-thumbnail::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.5) 100%);
+        }
+        
+        .news-content {
+            padding: 25px;
+        }
+        
+        .news-title {
+            font-size: 20px;
+            font-weight: 700;
+            color: #333;
+            margin-bottom: 10px;
+            line-height: 1.4;
+        }
+        
+        .news-description {
+            font-size: 14px;
+            color: #666;
+            line-height: 1.6;
+            margin-bottom: 15px;
+        }
+        
+        .news-source {
+            font-size: 12px;
+            color: #999;
+            display: flex;
+            align-items: center;
+            gap: 5px;
+        }
+        
+        .news-link {
+            text-decoration: none;
+            color: inherit;
+            display: block;
         }
         
         /* Footer */
@@ -362,6 +458,10 @@
             .container {
                 padding-top: 180px;
             }
+            
+            .news-container {
+                grid-template-columns: 1fr;
+            }
         }
     </style>
 </head>
@@ -375,6 +475,7 @@
                 <a href="#heatmap" class="tab" data-tab="heatmap">히트맵 리더보드</a>
                 <a href="#korean" class="tab" data-tab="korean">코리안 리더보드</a>
                 <a href="#best" class="tab" data-tab="best">베스트 AI</a>
+                <a href="#news" class="tab" data-tab="news">News</a>
             </div>
         </div>
         <div class="powered-by">Powered by 비드래프트</div>
@@ -413,31 +514,95 @@
         
         <!-- Heatmap Leaderboard Tab -->
         <div id="heatmap" class="tab-content">
-            <div class="iframe-container">
-                <iframe src="https://huggingface.co/spaces/aiqtech/Heatmap-Leaderboard" 
-                        title="히트맵 리더보드"
-                        allowfullscreen>
-                </iframe>
+            <div class="external-container">
+                <h2>🔥 히트맵 리더보드</h2>
+                <p>AI 모델들의 성능을 히트맵으로 시각화하여 비교할 수 있는 리더보드입니다.<br>
+                다양한 벤치마크에서의 성능을 한눈에 확인해보세요.</p>
+                <a href="https://huggingface.co/spaces/aiqtech/Heatmap-Leaderboard" target="_blank" class="external-link">
+                    히트맵 리더보드 바로가기 →
+                </a>
             </div>
         </div>
         
         <!-- Korean Leaderboard Tab -->
         <div id="korean" class="tab-content">
-            <div class="iframe-container">
-                <iframe src="https://huggingface.co/spaces/openfree/Korean-Leaderboard" 
-                        title="코리안 리더보드"
-                        allowfullscreen>
-                </iframe>
+            <div class="external-container">
+                <h2>🇰🇷 코리안 리더보드</h2>
+                <p>한국어 AI 모델들의 성능을 평가하고 비교하는 리더보드입니다.<br>
+                한국어 처리 능력에 특화된 모델들의 순위를 확인해보세요.</p>
+                <a href="https://huggingface.co/spaces/openfree/Korean-Leaderboard" target="_blank" class="external-link">
+                    코리안 리더보드 바로가기 →
+                </a>
             </div>
         </div>
         
         <!-- Best AI Tab -->
         <div id="best" class="tab-content">
-            <div class="iframe-container">
-                <iframe src="https://huggingface.co/spaces/openfree/Best-AI" 
-                        title="베스트 AI"
-                        allowfullscreen>
-                </iframe>
+            <div class="external-container">
+                <h2>🏆 베스트 AI</h2>
+                <p>다양한 카테고리별 최고의 AI 모델들을 소개합니다.<br>
+                각 분야에서 뛰어난 성능을 보이는 AI들을 만나보세요.</p>
+                <a href="https://huggingface.co/spaces/openfree/Best-AI" target="_blank" class="external-link">
+                    베스트 AI 바로가기 →
+                </a>
+            </div>
+        </div>
+        
+        <!-- News Tab -->
+        <div id="news" class="tab-content">
+            <header class="header">
+                <h1>📰 AI News</h1>
+                <p>한국 AI 커뮤니티의 최신 소식과 인사이트</p>
+            </header>
+            
+            <div class="news-container">
+                <!-- News Card 1 -->
+                <div class="news-card">
+                    <a href="https://zdnet.co.kr/view/?no=20241130181300" target="_blank" class="news-link">
+                        <div class="news-thumbnail" style="background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+                        </div>
+                        <div class="news-content">
+                            <h3 class="news-title">AI 기술의 최신 동향과 미래 전망</h3>
+                            <p class="news-description">인공지능 기술이 빠르게 발전하면서 산업 전반에 걸친 혁신이 가속화되고 있습니다. 최신 AI 트렌드와 기술 발전 현황을 살펴봅니다.</p>
+                            <div class="news-source">
+                                <span>📍</span>
+                                <span>ZDNet Korea</span>
+                            </div>
+                        </div>
+                    </a>
+                </div>
+                
+                <!-- News Card 2 -->
+                <div class="news-card">
+                    <a href="http://koreanjournal.net/gameit/9866" target="_blank" class="news-link">
+                        <div class="news-thumbnail" style="background-image: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
+                        </div>
+                        <div class="news-content">
+                            <h3 class="news-title">게임 산업에서의 AI 활용 사례</h3>
+                            <p class="news-description">게임 개발과 운영에 AI 기술이 어떻게 적용되고 있는지, 그리고 앞으로의 발전 방향에 대해 알아봅니다.</p>
+                            <div class="news-source">
+                                <span>📍</span>
+                                <span>Korean Journal</span>
+                            </div>
+                        </div>
+                    </a>
+                </div>
+                
+                <!-- News Card 3 -->
+                <div class="news-card">
+                    <a href="https://brunch.co.kr/@seawolf/30" target="_blank" class="news-link">
+                        <div class="news-thumbnail" style="background-image: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
+                        </div>
+                        <div class="news-content">
+                            <h3 class="news-title">AI 시대의 창업과 비즈니스 전략</h3>
+                            <p class="news-description">AI 기술을 활용한 스타트업의 성공 사례와 비즈니스 모델 혁신에 대한 인사이트를 공유합니다.</p>
+                            <div class="news-source">
+                                <span>📍</span>
+                                <span>Brunch</span>
+                            </div>
+                        </div>
+                    </a>
+                </div>
             </div>
         </div>
     </div>