Spaces:

VIDraft
/

AI

Running

App Files Files Community

openfree commited on 6 days ago

Commit

20ed127

verified ·

1 Parent(s): 14e735d

Update index.html

Browse files

Files changed (1) hide show

index.html +221 -39

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>K-AI 커뮤니티 서밋 2025</title>
     <style>
         * {
             margin: 0;
@@ -19,6 +19,70 @@
             overflow-x: hidden;
         }
         /* Animated background particles */
         .particles {
             position: fixed;
@@ -60,13 +124,32 @@
             z-index: 10;
             max-width: 1200px;
             margin: 0 auto;
-            padding: 60px 20px;
             min-height: 100vh;
             display: flex;
             flex-direction: column;
         }
-        /* Header */
         .header {
             text-align: center;
             margin-bottom: 50px;
@@ -87,7 +170,6 @@
             font-weight: 300;
         }
-        /* Content section */
         .content {
             flex: 1;
             display: flex;
@@ -178,28 +260,35 @@
             left: 100%;
         }
         /* Footer */
         .footer {
             background: rgba(0, 0, 0, 0.3);
             backdrop-filter: blur(10px);
-            padding: 30px 20px;
             text-align: center;
             color: rgba(255, 255, 255, 0.8);
             font-size: 13px;
-            line-height: 1.8;
             margin-top: auto;
         }
-        .footer-info {
-            max-width: 600px;
-            margin: 0 auto;
-        }
-        .footer-info span {
-            display: inline-block;
-            margin: 0 10px;
-        }
         /* Animations */
         @keyframes fadeInDown {
             from {
@@ -225,6 +314,34 @@
         /* Responsive */
         @media (max-width: 768px) {
             .header h1 {
                 font-size: 36px;
             }
@@ -242,14 +359,27 @@
                 padding: 16px 32px;
             }
-            .footer-info span {
-                display: block;
-                margin: 5px 0;
             }
         }
     </style>
 </head>
 <body>
     <!-- Animated particles background -->
     <div class="particles">
         <div class="particle" style="width: 80px; height: 80px; left: 10%; animation-delay: 0s;"></div>
@@ -262,36 +392,88 @@
     </div>
     <div class="container">
-        <!-- Header -->
-        <header class="header">
-            <h1>K-AI 커뮤니티 서밋 2025</h1>
-            <p>한국 AI의 미래를 함께 만들어갑니다</p>
-        </header>
-        <!-- Main content -->
-        <main class="content">
-            <div class="poster-container">
-                <img src="image.png" alt="K-AI 커뮤니티 서밋 2025 포스터" class="poster">
-                <div class="cta-section">
-                    <a href="https://onoffmix.com/event/325919" target="_blank" class="apply-btn">
-                        📌 행사 참가 신청하기
-                    </a>
                 </div>
             </div>
-        </main>
     </div>
     <!-- Footer -->
     <footer class="footer">
         <div class="footer-info">
-            <span>(주) 비드래프트</span>
-            <span>대표 김민식</span><br>
-            <span>주소: 서울특별시 강남구 학동로 165</span><br>
-            <span>사업자 등록번호: 879-87-03063</span>
         </div>
     </footer>
     <script>
         // Add dynamic particles on mouse move
         document.addEventListener('mousemove', (e) => {
             if (Math.random() > 0.95) {
@@ -309,4 +491,4 @@
         });
     </script>
 </body>
-</html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>K-AI 커뮤니티 허브</title>
     <style>
         * {
             margin: 0;
             overflow-x: hidden;
         }
+        /* Navigation */
+        .nav-container {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0, 0, 0, 0.3);
+            backdrop-filter: blur(10px);
+            z-index: 1000;
+            padding: 20px 40px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .nav-left {
+            display: flex;
+            align-items: center;
+            gap: 40px;
+        }
+        .home-btn {
+            color: white;
+            text-decoration: none;
+            font-size: 18px;
+            font-weight: 600;
+            transition: opacity 0.3s;
+        }
+        .home-btn:hover {
+            opacity: 0.8;
+        }
+        .tabs {
+            display: flex;
+            gap: 30px;
+        }
+        .tab {
+            color: rgba(255, 255, 255, 0.8);
+            text-decoration: none;
+            font-size: 16px;
+            font-weight: 500;
+            padding: 8px 16px;
+            border-radius: 20px;
+            transition: all 0.3s;
+            cursor: pointer;
+        }
+        .tab:hover {
+            background: rgba(255, 255, 255, 0.1);
+            color: white;
+        }
+        .tab.active {
+            background: rgba(255, 255, 255, 0.2);
+            color: white;
+        }
+        .powered-by {
+            color: rgba(255, 255, 255, 0.7);
+            font-size: 13px;
+        }
         /* Animated background particles */
         .particles {
             position: fixed;
             z-index: 10;
             max-width: 1200px;
             margin: 0 auto;
+            padding: 120px 20px 60px;
             min-height: 100vh;
             display: flex;
             flex-direction: column;
         }
+        /* Tab content */
+        .tab-content {
+            display: none;
+            animation: fadeIn 0.5s ease-out;
+        }
+        .tab-content.active {
+            display: block;
+        }
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+            }
+            to {
+                opacity: 1;
+            }
+        }
+        /* Home tab styles */
         .header {
             text-align: center;
             margin-bottom: 50px;
             font-weight: 300;
         }
         .content {
             flex: 1;
             display: flex;
             left: 100%;
         }
+        /* Iframe styles */
+        .iframe-container {
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 20px;
+            padding: 20px;
+            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            height: calc(100vh - 200px);
+            min-height: 600px;
+        }
+        .iframe-container iframe {
+            width: 100%;
+            height: 100%;
+            border: none;
+            border-radius: 12px;
+        }
         /* Footer */
         .footer {
             background: rgba(0, 0, 0, 0.3);
             backdrop-filter: blur(10px);
+            padding: 20px;
             text-align: center;
             color: rgba(255, 255, 255, 0.8);
             font-size: 13px;
             margin-top: auto;
         }
         /* Animations */
         @keyframes fadeInDown {
             from {
         /* Responsive */
         @media (max-width: 768px) {
+            .nav-container {
+                padding: 15px 20px;
+                flex-direction: column;
+                gap: 15px;
+            }
+            .nav-left {
+                flex-direction: column;
+                gap: 15px;
+                width: 100%;
+            }
+            .tabs {
+                width: 100%;
+                justify-content: center;
+                flex-wrap: wrap;
+                gap: 10px;
+            }
+            .tab {
+                font-size: 14px;
+                padding: 6px 12px;
+            }
+            .powered-by {
+                font-size: 11px;
+            }
             .header h1 {
                 font-size: 36px;
             }
                 padding: 16px 32px;
             }
+            .container {
+                padding-top: 180px;
             }
         }
     </style>
 </head>
 <body>
+    <!-- Navigation -->
+    <nav class="nav-container">
+        <div class="nav-left">
+            <a href="#" class="home-btn">HOME</a>
+            <div class="tabs">
+                <a href="#home" class="tab active" data-tab="home">K-AI 커뮤니티 서밋 2025</a>
+                <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>
+            </div>
+        </div>
+        <div class="powered-by">Powered by 비드래프트</div>
+    </nav>
     <!-- Animated particles background -->
     <div class="particles">
         <div class="particle" style="width: 80px; height: 80px; left: 10%; animation-delay: 0s;"></div>
     </div>
     <div class="container">
+        <!-- Home Tab -->
+        <div id="home" class="tab-content active">
+            <header class="header">
+                <h1>K-AI 커뮤니티 허브</h1>
+                <p>한국 AI의 미래를 함께 만들어갑니다</p>
+            </header>
+            <main class="content">
+                <div class="poster-container">
+                    <img src="image.png" alt="K-AI 커뮤니티 서밋 2025 포스터" class="poster">
+                    <div class="cta-section">
+                        <a href="https://onoffmix.com/event/325919" target="_blank" class="apply-btn">
+                            📌 행사 참가 신청하기
+                        </a>
+                    </div>
                 </div>
+            </main>
+        </div>
+        <!-- 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>
+        </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>
+        </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>
+        </div>
     </div>
     <!-- Footer -->
     <footer class="footer">
         <div class="footer-info">
+            (주) 비드래프트 | 대표 김민식 | 주소: 서울특별시 강남구 학동로 165 | 사업자 등록번호: 879-87-03063
         </div>
     </footer>
     <script>
+        // Tab switching functionality
+        document.querySelectorAll('.tab').forEach(tab => {
+            tab.addEventListener('click', (e) => {
+                e.preventDefault();
+                const targetTab = tab.getAttribute('data-tab');
+                // Update active tab
+                document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+                tab.classList.add('active');
+                // Show corresponding content
+                document.querySelectorAll('.tab-content').forEach(content => {
+                    content.classList.remove('active');
+                });
+                document.getElementById(targetTab).classList.add('active');
+            });
+        });
+        // Home button functionality
+        document.querySelector('.home-btn').addEventListener('click', (e) => {
+            e.preventDefault();
+            document.querySelector('.tab[data-tab="home"]').click();
+        });
         // Add dynamic particles on mouse move
         document.addEventListener('mousemove', (e) => {
             if (Math.random() > 0.95) {
         });
     </script>
 </body>
+</html>