Update index.html

index.html

@@ -5,50 +5,308 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>K-AI 커뮤니티 서밋 2025</title>
     <style>
-        body {
+        * {
             margin: 0;
             padding: 0;
-            font-family: 'Pretendard', sans-serif;
-            background-color: #f8f9fc;
-            display: flex;
-            justify-content: center;
-            align-items: center;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            position: relative;
+            overflow-x: hidden;
+        }
+        
+        /* Animated background particles */
+        .particles {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            z-index: 1;
+        }
+        
+        .particle {
+            position: absolute;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 50%;
+            animation: float 20s infinite ease-in-out;
+        }
+        
+        @keyframes float {
+            0%, 100% {
+                transform: translateY(0) translateX(0) scale(1);
+                opacity: 0;
+            }
+            10% {
+                opacity: 0.4;
+            }
+            90% {
+                opacity: 0.4;
+            }
+            100% {
+                transform: translateY(-100vh) translateX(100px) scale(0.5);
+                opacity: 0;
+            }
+        }
+        
+        /* Main container */
+        .container {
+            position: relative;
+            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;
+            animation: fadeInDown 1s ease-out;
+        }
+        
+        .header h1 {
+            color: white;
+            font-size: 48px;
+            font-weight: 700;
+            margin-bottom: 10px;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
+        }
+        
+        .header p {
+            color: rgba(255, 255, 255, 0.9);
+            font-size: 20px;
+            font-weight: 300;
+        }
+        
+        /* Content section */
+        .content {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-bottom: 80px;
+        }
+        
+        .poster-container {
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 20px;
+            padding: 40px;
+            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+            text-align: center;
+            animation: fadeInUp 1s ease-out 0.5s both;
+            backdrop-filter: blur(10px);
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .poster-container::before {
+            content: '';
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
+            transform: rotate(45deg);
+            animation: shine 3s infinite;
+        }
+        
+        @keyframes shine {
+            0% {
+                transform: translateX(-100%) translateY(-100%) rotate(45deg);
+            }
+            100% {
+                transform: translateX(100%) translateY(100%) rotate(45deg);
+            }
+        }
+        
         .poster {
             max-width: 100%;
             height: auto;
             border-radius: 12px;
-            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+            margin-bottom: 30px;
+            position: relative;
+            z-index: 1;
         }
-        .link-container {
-            margin-top: 30px;
-            text-align: center;
+        
+        .cta-section {
+            margin-top: 20px;
         }
+        
         .apply-btn {
+            display: inline-block;
             text-decoration: none;
             color: #ffffff;
-            background-color: #1976D2;
-            padding: 14px 24px;
-            border-radius: 8px;
-            font-size: 18px;
-            transition: background-color 0.3s;
+            background: linear-gradient(135deg, #1976D2 0%, #135ba1 100%);
+            padding: 18px 40px;
+            border-radius: 50px;
+            font-size: 20px;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            box-shadow: 0 5px 20px rgba(25, 118, 210, 0.4);
+            position: relative;
+            overflow: hidden;
         }
+        
+        .apply-btn::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
+            transition: left 0.6s ease;
+        }
+        
         .apply-btn:hover {
-            background-color: #135ba1;
+            transform: translateY(-3px);
+            box-shadow: 0 8px 30px rgba(25, 118, 210, 0.6);
+        }
+        
+        .apply-btn:hover::before {
+            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 {
+                opacity: 0;
+                transform: translateY(-30px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        
+        @keyframes fadeInUp {
+            from {
+                opacity: 0;
+                transform: translateY(30px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        
+        /* Responsive */
+        @media (max-width: 768px) {
+            .header h1 {
+                font-size: 36px;
+            }
+            
+            .header p {
+                font-size: 18px;
+            }
+            
+            .poster-container {
+                padding: 20px;
+            }
+            
+            .apply-btn {
+                font-size: 18px;
+                padding: 16px 32px;
+            }
+            
+            .footer-info span {
+                display: block;
+                margin: 5px 0;
+            }
         }
     </style>
 </head>
 <body>
-    <img src="image.png" alt="K-AI 커뮤니티 서밋 2025 포스터" class="poster">
-
-    <div class="link-container">
-        <a href="https://onoffmix.com/event/325919" target="_blank" class="apply-btn">
-            📌 행사 참가 신청하기
-        </a>
+    <!-- Animated particles background -->
+    <div class="particles">
+        <div class="particle" style="width: 80px; height: 80px; left: 10%; animation-delay: 0s;"></div>
+        <div class="particle" style="width: 60px; height: 60px; left: 20%; animation-delay: 2s;"></div>
+        <div class="particle" style="width: 100px; height: 100px; left: 35%; animation-delay: 4s;"></div>
+        <div class="particle" style="width: 40px; height: 40px; left: 50%; animation-delay: 1s;"></div>
+        <div class="particle" style="width: 70px; height: 70px; left: 65%; animation-delay: 3s;"></div>
+        <div class="particle" style="width: 50px; height: 50px; left: 80%; animation-delay: 5s;"></div>
+        <div class="particle" style="width: 90px; height: 90px; left: 90%; animation-delay: 2.5s;"></div>
+    </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) {
+                const particle = document.createElement('div');
+                particle.className = 'particle';
+                particle.style.width = Math.random() * 20 + 10 + 'px';
+                particle.style.height = particle.style.width;
+                particle.style.left = e.clientX + 'px';
+                particle.style.top = e.clientY + 'px';
+                particle.style.animationDuration = Math.random() * 3 + 2 + 's';
+                document.querySelector('.particles').appendChild(particle);
+                
+                setTimeout(() => particle.remove(), 5000);
+            }
+        });
+    </script>
 </body>
 </html>
-
-