Update index.html

index.html

@@ -464,6 +464,9 @@
         .card-preview.gradient-helpdesk {
             background: linear-gradient(135deg, #10B981 0%, #059669 30%, #047857 70%, #065F46 100%);
         }
+        .card-preview.gradient-camera3d {
+            background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 30%, #EC4899 70%, #F97316 100%);
+        }
         .card-badge {
             position: absolute;
             top: 12px;
@@ -553,6 +556,10 @@
             color: var(--white);
             animation: helpdesk-pulse 2s infinite;
         }
+        .badge-camera3d {
+            background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
+            color: var(--white);
+        }
         @keyframes helpdesk-pulse {
             0%, 100% { box-shadow: 2px 2px 0px var(--dark), 0 0 8px #10B981; }
             50% { box-shadow: 2px 2px 0px var(--dark), 0 0 15px #10B981, 0 0 20px #059669; }
@@ -685,6 +692,13 @@
             padding: 2px 6px;
             border-radius: 4px;
         }
+        .card-highlight-camera3d {
+            background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
+            color: var(--white);
+            font-weight: 700;
+            padding: 2px 6px;
+            border-radius: 4px;
+        }
         .card-meta {
             display: flex;
             justify-content: space-between;
@@ -840,6 +854,15 @@
             border-radius: 4px;
             color: #059669;
         }
+        .tag-camera3d {
+            font-size: 0.75rem;
+            font-weight: 700;
+            padding: 0.25rem 0.5rem;
+            background: linear-gradient(135deg, #DBEAFE 0%, #E9D5FF 100%);
+            border: 2px solid #3B82F6;
+            border-radius: 4px;
+            color: #3B82F6;
+        }
         .card-arrow {
             font-size: 1.5rem;
             transition: transform 0.2s ease;
@@ -980,6 +1003,7 @@
         .card:nth-child(6) { animation-delay: 0.6s; }
         .card:nth-child(7) { animation-delay: 0.7s; }
         .card:nth-child(8) { animation-delay: 0.8s; }
+        .card:nth-child(9) { animation-delay: 0.9s; }
         /* ===== Search Bar ===== */
         .search-container {
             max-width: 600px;
@@ -1039,7 +1063,7 @@
     <!-- Stats Bar -->
     <div class="stats-bar">
         <div class="stat-item">
-            <div class="stat-number">38</div>
+            <div class="stat-number">39</div>
             <div class="stat-label">AI Models</div>
         </div>
         <div class="stat-item">
@@ -1058,7 +1082,7 @@
     <!-- Search Bar -->
     <div class="search-container">
         <span class="search-icon">🔍</span>
-        <input type="text" class="search-input" placeholder="Search AI tools... (e.g., image, video, youtube, trend, nsfw, novel, exam, best, llm, motion, helpdesk)" id="searchInput">
+        <input type="text" class="search-input" placeholder="Search AI tools... (e.g., image, video, youtube, trend, nsfw, novel, exam, best, llm, motion, camera, 3d)" id="searchInput">
     </div>
     <!-- Navigation Tabs (Text moved after BEST) -->
     <nav class="nav-tabs">
@@ -1198,7 +1222,7 @@
                         <h3 class="card-title">🤖 Help Desk & Chatbot</h3>
                         <p class="card-description">
                             <span class="card-highlight-helpdesk">AI-Powered Service Guide</span> - 
-                            Ask anything about HumanGen.AI's <strong>37 AI services</strong>! 
+                            Ask anything about HumanGen.AI's <strong>39 AI services</strong>! 
                             Get instant recommendations, usage guides, and support.
                             🌐 <strong>English / 한국어</strong> bilingual support.
                         </p>
@@ -1358,9 +1382,33 @@
             <div class="category-header">
                 <span class="category-icon">🖼️</span>
                 <h2 class="category-title">IMAGE GENERATION</h2>
-                <span class="category-count">8 models</span>
+                <span class="category-count">9 models</span>
             </div>
             <div class="card-grid">
+                <!-- NEW! 3D Camera Angle Editor Card - 39th Card -->
+                <a href="https://cam3d.humangen.ai" target="_blank" class="card" data-tags="image,camera,angle,3d,qwen,lora,lightning,edit,azimuth,elevation,distance,multiangle,threejs,interactive">
+                    <div class="card-preview gradient-camera3d">
+                        <span>🎬</span>
+                        <span class="card-badge badge-camera3d">🎮 3D CTRL</span>
+                    </div>
+                    <div class="card-content">
+                        <h3 class="card-title">🎬 3D Camera Angle Editor</h3>
+                        <p class="card-description">
+                            <span class="card-highlight-camera3d">Qwen + Lightning + Multi-Angles LoRA</span> - 
+                            Transform camera angles with interactive <strong>3D viewport</strong>! 
+                            🎮 8 Azimuths • 📐 4 Elevations • 🔍 3 Distances.
+                            ⚡ Lightning-fast 4-step generation!
+                        </p>
+                        <div class="card-meta">
+                            <div class="card-tags">
+                                <span class="tag-camera3d">3D Control</span>
+                                <span class="tag-camera3d">Multi-Angle</span>
+                                <span class="tag">Qwen</span>
+                            </div>
+                            <span class="card-arrow">→</span>
+                        </div>
+                    </div>
+                </a>
                 <!-- Qwen Image 2512 Card -->
                 <a href="https://q2512.humangen.ai" target="_blank" class="card" data-tags="image,qwen,2512,lightning,turbo,fast,alibaba,32b">
                     <div class="card-preview gradient-qwen">