Spaces:

ginipick
/

ginigen

Running

App Files Files Community

ginipick commited on 15 days ago

Commit

0c9f0c6

verified ·

1 Parent(s): f8942df

Update index.html

Browse files

Files changed (1) hide show

index.html +145 -15

index.html CHANGED Viewed

@@ -4,19 +4,56 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>GiniGen AI</title>
-</head>
-<body style="background: linear-gradient(135deg, #fef9f3 0%, #f0e6fa 50%, #e6f0fa 100%); margin: 0; padding: 40px;">
-<div style="text-align: center; margin: 20px 0;">
-    <h3 style="color: #6b5b7a; margin-bottom: 15px;">GiniGen AI</h3>
-    <a href="https://ginigen.ai/en" target="_blank">
-        <img src="screenshot.png"
-             style="width: 100%; max-width: 900px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); cursor: pointer;"
-             alt="GiniGen AI Preview">
-    </a>
-    <p style="margin-top: 15px;">
-        <a href="https://ginigen.ai/en" target="_blank" style="
             display: inline-block;
             padding: 15px 40px;
             background: linear-gradient(90deg, #6b5b7a, #8b7b9b);
             color: white;
@@ -25,11 +62,104 @@
             font-weight: 600;
             font-size: 1.1rem;
             box-shadow: 0 4px 15px rgba(0,0,0,0.2);
-        ">
             Visit GiniGen AI
         </a>
-    </p>
 </div>
 </body>
-</html>

     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>GiniGen AI</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            background: linear-gradient(135deg, #fef9f3 0%, #f0e6fa 50%, #e6f0fa 100%);
+            min-height: 100vh;
+            padding: 40px;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        .header {
+            text-align: center;
+            margin-bottom: 30px;
+        }
+        .header h1 {
+            color: #6b5b7a;
+            font-size: 2.5rem;
+            margin-bottom: 10px;
+        }
+        .header p {
+            color: #8b7b9b;
+            font-size: 1.1rem;
+        }
+        .container {
+            display: flex;
+            gap: 40px;
+            max-width: 1400px;
+            margin: 0 auto;
+            align-items: flex-start;
+        }
+        .left-section {
+            flex: 1;
+            text-align: center;
+        }
+        .left-section img {
+            width: 100%;
+            max-width: 600px;
+            border-radius: 16px;
+            box-shadow: 0 8px 30px rgba(0,0,0,0.15);
+            cursor: pointer;
+            transition: transform 0.3s ease;
+        }
+        .left-section img:hover {
+            transform: scale(1.02);
+        }
+        .visit-btn {
             display: inline-block;
+            margin-top: 20px;
             padding: 15px 40px;
             background: linear-gradient(90deg, #6b5b7a, #8b7b9b);
             color: white;
             font-weight: 600;
             font-size: 1.1rem;
             box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+            transition: transform 0.3s ease;
+        }
+        .visit-btn:hover {
+            transform: translateY(-3px);
+        }
+        .right-section {
+            flex: 1;
+            background: white;
+            border-radius: 16px;
+            padding: 30px;
+            box-shadow: 0 8px 30px rgba(0,0,0,0.1);
+        }
+        .right-section h2 {
+            color: #6b5b7a;
+            font-size: 1.5rem;
+            margin-bottom: 20px;
+            text-align: center;
+        }
+        .service-list {
+            list-style: none;
+        }
+        .service-list li {
+            padding: 12px 15px;
+            margin-bottom: 10px;
+            background: linear-gradient(135deg, #f8f4ff 0%, #f0f4ff 100%);
+            border-radius: 10px;
+            color: #5a4a6a;
+            font-size: 0.95rem;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            transition: transform 0.2s ease, box-shadow 0.2s ease;
+        }
+        .service-list li:hover {
+            transform: translateX(5px);
+            box-shadow: 0 4px 15px rgba(107, 91, 122, 0.15);
+        }
+        .service-icon {
+            font-size: 1.3rem;
+        }
+        @media (max-width: 900px) {
+            .container {
+                flex-direction: column;
+            }
+        }
+    </style>
+</head>
+<body>
+<div class="header">
+    <h1>GiniGen AI</h1>
+    <p>All-in-One AI Creative Platform</p>
+</div>
+<div class="container">
+    <div class="left-section">
+        <a href="https://ginigen.ai/en" target="_blank">
+            <img src="screenshot.png" alt="GiniGen AI Preview">
+        </a>
+        <br>
+        <a href="https://ginigen.ai/en" target="_blank" class="visit-btn">
             Visit GiniGen AI
         </a>
+    </div>
+    <div class="right-section">
+        <h2>13 AI Services</h2>
+        <ul class="service-list">
+            <li><span class="service-icon">🎨</span> Image Generation & Editing</li>
+            <li><span class="service-icon">🎬</span> Image to Video Generation</li>
+            <li><span class="service-icon">🎤</span> Voice Clone / TTS</li>
+            <li><span class="service-icon">🎵</span> Music & Song Generation</li>
+            <li><span class="service-icon">👄</span> Lip-Sync Video (Image + Audio)</li>
+            <li><span class="service-icon">📰</span> Card News Generation</li>
+            <li><span class="service-icon">🎭</span> Card Toon (Toon-style Card News)</li>
+            <li><span class="service-icon">🎞️</span> Movie Storyboard Generation</li>
+            <li><span class="service-icon">📱</span> Short Toon Generation</li>
+            <li><span class="service-icon">📹</span> Short-Form Video Generation</li>
+            <li><span class="service-icon">📊</span> Diagram Generation</li>
+            <li><span class="service-icon">📝</span> Movie Scenario Generation</li>
+            <li><span class="service-icon">🎥</span> Video Editing (Video + Image to Video)</li>
+        </ul>
+    </div>
 </div>
 </body>
+</html>
+```
+**레이아웃:**
+```
+┌─────────────────────────────────────────────────────┐
+│              GiniGen AI (제목)                       │
+├────────────────────┬────────────────────────────────┤
+│                    │  13 AI Services                │
+│   [스크린샷 이미지]  │  🎨 Image Generation...        │
+│                    │  🎬 Image to Video...          │
+│                    │  🎤 Voice Clone / TTS          │
+│   [Visit 버튼]      │  🎵 Music & Song...            │
+│                    │  ... (13개 서비스 목록)         │
+└────────────────────┴────────────────────────────────┘