Spaces:

ginigen
/

AI

Running

App Files Files Community

ginipick commited on Oct 19

Commit

242dd77

verified ·

1 Parent(s): 0e38c93

Create index.html

Browse files

Files changed (1) hide show

index.html +259 -19

index.html CHANGED Viewed

@@ -1,19 +1,259 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI 프로젝트 갤러리</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: #0f0f0f;
+            color: #fff;
+            padding: 20px;
+        }
+        .header {
+            text-align: center;
+            padding: 40px 20px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-radius: 20px;
+            margin-bottom: 40px;
+        }
+        .header h1 {
+            font-size: 2.5em;
+            margin-bottom: 10px;
+        }
+        /* 나노 바나나 섹션 */
+        .featured-link {
+            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+            border-radius: 20px;
+            padding: 30px;
+            margin-bottom: 50px;
+            display: flex;
+            align-items: center;
+            gap: 30px;
+            flex-wrap: wrap;
+        }
+        .featured-link img {
+            width: 300px;
+            border-radius: 10px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+        }
+        .featured-link .content {
+            flex: 1;
+            min-width: 250px;
+        }
+        .featured-link h2 {
+            font-size: 2em;
+            margin-bottom: 15px;
+        }
+        .visit-button {
+            display: inline-block;
+            padding: 15px 40px;
+            background: white;
+            color: #f5576c;
+            text-decoration: none;
+            border-radius: 50px;
+            font-weight: bold;
+            font-size: 1.1em;
+            transition: all 0.3s ease;
+            margin-top: 15px;
+        }
+        .visit-button:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 10px 20px rgba(255,255,255,0.3);
+        }
+        /* 갤러리 그리드 */
+        .section-title {
+            font-size: 2em;
+            margin: 40px 0 20px 0;
+            text-align: center;
+        }
+        .gallery {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+            gap: 20px;
+            margin-bottom: 50px;
+        }
+        .gallery-item {
+            background: #1a1a1a;
+            border-radius: 15px;
+            overflow: hidden;
+            transition: transform 0.3s ease;
+            cursor: pointer;
+        }
+        .gallery-item:hover {
+            transform: translateY(-10px);
+            box-shadow: 0 20px 40px rgba(102, 126, 234, 0.4);
+        }
+        .gallery-item img,
+        .gallery-item video {
+            width: 100%;
+            height: 250px;
+            object-fit: cover;
+            display: block;
+        }
+        .gallery-item .caption {
+            padding: 15px;
+            text-align: center;
+            font-size: 1.1em;
+        }
+        /* 라이트박스 모달 */
+        .lightbox {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0,0,0,0.95);
+            z-index: 1000;
+            justify-content: center;
+            align-items: center;
+        }
+        .lightbox.active {
+            display: flex;
+        }
+        .lightbox-content {
+            max-width: 90%;
+            max-height: 90%;
+        }
+        .lightbox img,
+        .lightbox video {
+            max-width: 100%;
+            max-height: 90vh;
+            border-radius: 10px;
+        }
+        .close-lightbox {
+            position: absolute;
+            top: 20px;
+            right: 40px;
+            font-size: 40px;
+            color: white;
+            cursor: pointer;
+            background: none;
+            border: none;
+        }
+        @media (max-width: 768px) {
+            .featured-link {
+                flex-direction: column;
+                text-align: center;
+            }
+            .featured-link img {
+                width: 100%;
+            }
+            .gallery {
+                grid-template-columns: 1fr;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <h1>🤖 AI 프로젝트 갤러리</h1>
+        <p>허깅페이스 기반 AI 개발 포트폴리오</p>
+    </div>
+    <!-- 나노 바나나 특집 섹션 -->
+    <div class="featured-link">
+        <img src="images/ginigen-screenshot.png" alt="Ginigen AI">
+        <div class="content">
+            <h2>🍌 Ginigen AI</h2>
+            <p>차세대 AI 솔루션 플랫폼</p>
+            <p>혁신적인 인공지능 기술로 비즈니스를 가속화하세요</p>
+            <a href="https://www.ginigen.ai/en" target="_blank" class="visit-button">
+                지금 방문하기 →
+            </a>
+        </div>
+    </div>
+    <!-- 이미지 갤러리 -->
+    <h2 class="section-title">📸 이미지 갤러리</h2>
+    <div class="gallery" id="image-gallery">
+        <div class="gallery-item" onclick="openLightbox('images/project1.jpg')">
+            <img src="images/project1.jpg" alt="프로젝트 1">
+            <div class="caption">AI 이미지 생성</div>
+        </div>
+        <div class="gallery-item" onclick="openLightbox('images/project2.png')">
+            <img src="images/project2.png" alt="프로젝트 2">
+            <div class="caption">텍스트 분석 모델</div>
+        </div>
+        <div class="gallery-item" onclick="openLightbox('images/project3.jpg')">
+            <img src="images/project3.jpg" alt="프로젝트 3">
+            <div class="caption">음성 인식 시스템</div>
+        </div>
+        <!-- 이미지 파일 추가 -->
+    </div>
+    <!-- 비디오 갤러리 -->
+    <h2 class="section-title">🎬 비디오 갤러리</h2>
+    <div class="gallery" id="video-gallery">
+        <div class="gallery-item">
+            <video src="videos/demo1.mp4" controls>
+                Your browser does not support the video tag.
+            </video>
+            <div class="caption">AI 챗봇 데모</div>
+        </div>
+        <div class="gallery-item">
+            <video src="videos/demo2.mp4" controls>
+                Your browser does not support the video tag.
+            </video>
+            <div class="caption">객체 인식 시연</div>
+        </div>
+        <!-- 비디오 파일 추가 -->
+    </div>
+    <!-- 라이트박스 모달 -->
+    <div class="lightbox" id="lightbox" onclick="closeLightbox()">
+        <button class="close-lightbox">&times;</button>
+        <div class="lightbox-content">
+            <img id="lightbox-img" src="" alt="Full size">
+        </div>
+    </div>
+    <script>
+        function openLightbox(src) {
+            document.getElementById('lightbox').classList.add('active');
+            document.getElementById('lightbox-img').src = src;
+        }
+        function closeLightbox() {
+            document.getElementById('lightbox').classList.remove('active');
+        }
+        // ESC 키로 라이트박스 닫기
+        document.addEventListener('keydown', function(e) {
+            if (e.key === 'Escape') {
+                closeLightbox();
+            }
+        });
+    </script>
+</body>
+</html>