Update index.html

index.html

@@ -467,6 +467,9 @@
         .card-preview.gradient-camera3d {
             background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 30%, #EC4899 70%, #F97316 100%);
         }
+        .card-preview.gradient-flipbook {
+            background: linear-gradient(135deg, #EF4444 0%, #F97316 25%, #FACC15 50%, #3B82F6 75%, #8B5CF6 100%);
+        }
         .card-badge {
             position: absolute;
             top: 12px;
@@ -560,10 +563,19 @@
             background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
             color: var(--white);
         }
+        .badge-flipbook {
+            background: linear-gradient(135deg, #EF4444 0%, #8B5CF6 100%);
+            color: var(--white);
+            animation: flipbook-pulse 2s infinite;
+        }
         @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; }
         }
+        @keyframes flipbook-pulse {
+            0%, 100% { box-shadow: 2px 2px 0px var(--dark), 0 0 8px #EF4444; }
+            50% { box-shadow: 2px 2px 0px var(--dark), 0 0 15px #EF4444, 0 0 20px #8B5CF6; }
+        }
         .card-content {
             padding: 1.25rem;
         }
@@ -699,6 +711,13 @@
             padding: 2px 6px;
             border-radius: 4px;
         }
+        .card-highlight-flipbook {
+            background: linear-gradient(135deg, #EF4444 0%, #8B5CF6 100%);
+            color: var(--white);
+            font-weight: 700;
+            padding: 2px 6px;
+            border-radius: 4px;
+        }
         .card-meta {
             display: flex;
             justify-content: space-between;
@@ -863,6 +882,15 @@
             border-radius: 4px;
             color: #3B82F6;
         }
+        .tag-flipbook {
+            font-size: 0.75rem;
+            font-weight: 700;
+            padding: 0.25rem 0.5rem;
+            background: linear-gradient(135deg, #FEE2E2 0%, #E9D5FF 100%);
+            border: 2px solid #EF4444;
+            border-radius: 4px;
+            color: #EF4444;
+        }
         .card-arrow {
             font-size: 1.5rem;
             transition: transform 0.2s ease;
@@ -1061,12 +1089,12 @@
         </div>
     </header>
 
-<!-- "수정할 부분 첫번째" -->
+<!-- "수정할 부분 첫번째" - AI Models 41로 변경 -->
   
     <!-- Stats Bar -->
     <div class="stats-bar">
         <div class="stat-item">
-            <div class="stat-number">40</div>
+            <div class="stat-number">41</div>
             <div class="stat-label">AI Models</div>
         </div>
         <div class="stat-item">
@@ -1085,7 +1113,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, camera, 3d)" 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, flipbook)" id="searchInput">
     </div>
     <!-- Navigation Tabs (Text moved after BEST) -->
     <nav class="nav-tabs">
@@ -1182,24 +1210,25 @@
                         </div>
                     </div>
                 </a>
-                <!-- BEST 4: Ultimate File Converter -->
-                <a href="https://conv.humangen.ai" target="_blank" class="card best-card" data-tags="best,tools,converter,file,data,csv,json,excel,parquet,image,png,jpg,webp,audio,mp3,wav,video,mp4,document,pdf,archive,zip,config,yaml,encoding,base64">
-                    <div class="card-preview gradient-best">
-                        <span>🔄</span>
+                <!-- BEST 4: AI 플립북 (NEW - Replaced Ultimate File Converter) -->
+                <a href="https://flipbook.humangen.ai" target="_blank" class="card best-card" data-tags="best,korea,flipbook,pdf,ai,vlm,3d,chatbot,한국어,문서,분석,플립북,webgl,interactive,qwen">
+                    <div class="card-preview gradient-flipbook">
+                        <span>📚</span>
                         <span class="card-badge badge-best">🏆 BEST</span>
                     </div>
                     <div class="card-content">
-                        <h3 class="card-title">🔄 Ultimate File Converter</h3>
+                        <h3 class="card-title">📚 AI 플립북 (AI FlipBook)</h3>
                         <p class="card-description">
-                            <span class="card-highlight-best">Convert Anything to Anything!</span> - 
-                            📊 Data (CSV/JSON/Excel/Parquet) • 🖼️ Image • 🎵 Audio • 🎬 Video • 
-                            📄 Document • 🗜️ Archive • ⚙️ Config • 🔤 Encoding. All-in-One!
+                            <span class="card-highlight-flipbook">VLM + 3D FlipBook + AI 챗봇!</span> - 
+                            PDF를 인터랙티브 3D 플립북으로 변환! 🤖 AI가 ���서 분석 후 질의응답.
+                            📖 WebGL 페이지 넘김, 🎨 Comic Style UI.
+                            🌐 <strong>한국어 특화</strong>
                         </p>
                         <div class="card-meta">
                             <div class="card-tags">
-                                <span class="tag-best">All-in-One</span>
-                                <span class="tag-best">8 Types</span>
-                                <span class="tag">FREE</span>
+                                <span class="tag-flipbook">3D FlipBook</span>
+                                <span class="tag-flipbook">VLM AI</span>
+                                <span class="tag-korea">한글</span>
                             </div>
                             <span class="card-arrow">→</span>
                         </div>
@@ -2144,14 +2173,38 @@
                 </a>
             </div>
         </section>
-        <!-- Korea Section -->
+        <!-- Korea Section - 3 models로 업데이트 -->
         <section class="category-section" data-section="korea">
             <div class="category-header">
                 <span class="category-icon">🇰🇷</span>
                 <h2 class="category-title">KOREA 한국 특화</h2>
-                <span class="category-count">2 models</span>
+                <span class="category-count">3 models</span>
             </div>
             <div class="card-grid">
+                <!-- NEW! 41번째 카드 - AI 플립북 -->
+                <a href="https://flipbook.humangen.ai" target="_blank" class="card" data-tags="korea,flipbook,pdf,ai,vlm,3d,chatbot,한국어,문서,분석,플립북,webgl,interactive,qwen,fireworks">
+                    <div class="card-preview gradient-flipbook">
+                        <span>📚</span>
+                        <span class="card-badge badge-flipbook">🆕 NEW</span>
+                    </div>
+                    <div class="card-content">
+                        <h3 class="card-title">📚 AI 플립북 (AI FlipBook)</h3>
+                        <p class="card-description">
+                            <span class="card-highlight-flipbook">VLM + 3D FlipBook + AI 챗봇!</span> - 
+                            PDF를 인터랙티브 3D 플립북으로 변환! 🤖 Qwen VLM이 문서 분석 후 질의응답.
+                            📖 WebGL 페이지 넘김 효과, 🎨 Comic Style UI, 💬 마크다운 채팅.
+                            🌐 <strong>한국어 특화</strong>
+                        </p>
+                        <div class="card-meta">
+                            <div class="card-tags">
+                                <span class="tag-flipbook">3D FlipBook</span>
+                                <span class="tag-flipbook">VLM AI</span>
+                                <span class="tag-korea">한글</span>
+                            </div>
+                            <span class="card-arrow">→</span>
+                        </div>
+                    </div>
+                </a>
                 <!-- AI 상권 분석 시스템 Card -->
                 <a href="https://markets.humangen.ai" target="_blank" class="card" data-tags="korea,상권,창업,분석,데이터,소상공인,market,business,ai,한국,korean,startup">
                     <div class="card-preview gradient-korea">