MateusFF/model-intellect-hub
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Model Intellect Hub</title>7 <link rel="stylesheet" href="style.css">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script src="https://unpkg.com/feather-icons"></script>11 <script>12 tailwind.config = {13 darkMode: 'class',14 theme: {15 extend: {16 colors: {17 primary: {18 50: '#f0f9ff',19 100: '#e0f2fe',20 200: '#bae6fd',21 300: '#7dd3fc',22 400: '#38bdf8',23 500: '#0ea5e9',24 600: '#0284c7',25 700: '#0369a1',26 800: '#075985',27 900: '#0c4a6e',28 },29 secondary: {30 50: '#fdf4ff',31 100: '#fae8ff',32 200: '#f5d0fe',33 300: '#f0abfc',34 400: '#e879f9',35 500: '#d946ef',36 600: '#c026d3',37 700: '#a21caf',38 800: '#86198f',39 900: '#701a75',40 }41 }42 }43 }44 }45 </script>46</head>47<body class="bg-gray-50 dark:bg-gray-900 min-h-screen transition-colors duration-300">48 <div class="container mx-auto px-4 py-8 max-w-4xl">49 <!-- Header -->50 <header class="mb-8 text-center">51 <h1 class="text-3xl md:text-4xl font-bold text-gray-800 dark:text-white mb-2">52 <span class="bg-gradient-to-r from-primary-500 to-secondary-500 bg-clip-text text-transparent">53 Model Intellect Hub54 </span>55 🔮56 </h1>57 <p class="text-gray-600 dark:text-gray-400">Explore AI models with intelligent insights</p>58 </header>59 60 <!-- Main Card -->61 <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 md:p-8 border border-gray-100 dark:border-gray-700">62 <div class="flex items-center gap-3 mb-6">63 <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-primary-500 to-secondary-500 flex items-center justify-center">64 <i data-feather="image" class="text-white w-5 h-5"></i>65 </div>66 <div>67 <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Image Generation Model</h2>68 <p class="text-sm text-gray-500 dark:text-gray-400">Configure your AI image generation settings</p>69 </div>70 </div>71 <!-- Model Selector Component -->72 <div class="space-y-4">73 <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">74 Select Model75 </label>76 77 <!-- Custom Dropdown with Info Button Inside -->78 <div class="relative group" id="customDropdown">79 <!-- Dropdown Trigger -->80 <button 81 id="dropdownTrigger"82 class="w-full flex items-center justify-between bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-xl px-4 py-3 text-gray-700 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200 hover:border-primary-300 dark:hover:border-primary-700"83 >84 <span id="dropdownSelectedText">Choose a model...</span>85 <i data-feather="chevron-down" class="w-5 h-5 text-gray-400 transition-transform duration-200" id="dropdownArrow"></i>86 </button>87 88 <!-- Floating Label Animation -->89 <div class="absolute -top-2 left-3 px-1 bg-white dark:bg-gray-800 text-xs text-primary-500 font-medium opacity-0 transition-opacity duration-200" id="floatingLabel">90 Modelo91 </div>92 93 <!-- Dropdown Menu -->94 <div id="dropdownMenu" class="absolute z-20 w-full mt-2 bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-xl shadow-xl opacity-0 invisible transform scale-95 transition-all duration-200 origin-top">95 <div class="py-1 max-h-64 overflow-y-auto">96 <!-- Stable Diffusion XL -->97 <div class="dropdown-item group/item flex items-center justify-between px-4 py-3 hover:bg-primary-50 dark:hover:bg-primary-900/20 cursor-pointer transition-colors border-b border-gray-100 dark:border-gray-600 last:border-b-0" data-value="stable-diffusion-xl">98 <div class="flex items-center gap-3">99 <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center">100 <i data-feather="cpu" class="text-white w-4 h-4"></i>101 </div>102 <span class="font-medium text-gray-800 dark:text-gray-200">Stable Diffusion XL</span>103 </div>104 <button class="info-btn p-2 rounded-lg hover:bg-primary-200 dark:hover:bg-primary-800 transition-colors opacity-0 group-hover/item:opacity-100" data-model="stable-diffusion-xl">105 <i data-feather="info" class="w-4 h-4 text-primary-600 dark:text-primary-400"></i>106 </button>107 </div>108 109 <!-- DALL-E 3 -->110 <div class="dropdown-item group/item flex items-center justify-between px-4 py-3 hover:bg-primary-50 dark:hover:bg-primary-900/20 cursor-pointer transition-colors border-b border-gray-100 dark:border-gray-600 last:border-b-0" data-value="dall-e-3">111 <div class="flex items-center gap-3">112 <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-green-500 to-emerald-500 flex items-center justify-center">113 <i data-feather="image" class="text-white w-4 h-4"></i>114 </div>115 <span class="font-medium text-gray-800 dark:text-gray-200">DALL-E 3</span>116 </div>117 <button class="info-btn p-2 rounded-lg hover:bg-primary-200 dark:hover:bg-primary-800 transition-colors opacity-0 group-hover/item:opacity-100" data-model="dall-e-3">118 <i data-feather="info" class="w-4 h-4 text-primary-600 dark:text-primary-400"></i>119 </button>120 </div>121 122 <!-- Midjourney V6 -->123 <div class="dropdown-item group/item flex items-center justify-between px-4 py-3 hover:bg-primary-50 dark:hover:bg-primary-900/20 cursor-pointer transition-colors border-b border-gray-100 dark:border-gray-600 last:border-b-0" data-value="midjourney-v6">124 <div class="flex items-center gap-3">125 <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center">126 <i data-feather="aperture" class="text-white w-4 h-4"></i>127 </div>128 <span class="font-medium text-gray-800 dark:text-gray-200">Midjourney V6</span>129 </div>130 <button class="info-btn p-2 rounded-lg hover:bg-primary-200 dark:hover:bg-primary-800 transition-colors opacity-0 group-hover/item:opacity-100" data-model="midjourney-v6">131 <i data-feather="info" class="w-4 h-4 text-primary-600 dark:text-primary-400"></i>132 </button>133 </div>134 135 <!-- Imagen 3 -->136 <div class="dropdown-item group/item flex items-center justify-between px-4 py-3 hover:bg-primary-50 dark:hover:bg-primary-900/20 cursor-pointer transition-colors border-b border-gray-100 dark:border-gray-600 last:border-b-0" data-value="imagen-3">137 <div class="flex items-center gap-3">138 <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-red-500 to-orange-500 flex items-center justify-center">139 <i data-feather="camera" class="text-white w-4 h-4"></i>140 </div>141 <span class="font-medium text-gray-800 dark:text-gray-200">Imagen 3</span>142 </div>143 <button class="info-btn p-2 rounded-lg hover:bg-primary-200 dark:hover:bg-primary-800 transition-colors opacity-0 group-hover/item:opacity-100" data-model="imagen-3">144 <i data-feather="info" class="w-4 h-4 text-primary-600 dark:text-primary-400"></i>145 </button>146 </div>147 148 <!-- Adobe Firefly 3 -->149 <div class="dropdown-item group/item flex items-center justify-between px-4 py-3 hover:bg-primary-50 dark:hover:bg-primary-900/20 cursor-pointer transition-colors border-b border-gray-100 dark:border-gray-600 last:border-b-0" data-value="firefly-3">150 <div class="flex items-center gap-3">151 <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-yellow-500 to-amber-500 flex items-center justify-center">152 <i data-feather="sun" class="text-white w-4 h-4"></i>153 </div>154 <span class="font-medium text-gray-800 dark:text-gray-200">Adobe Firefly 3</span>155 </div>156 <button class="info-btn p-2 rounded-lg hover:bg-primary-200 dark:hover:bg-primary-800 transition-colors opacity-0 group-hover/item:opacity-100" data-model="firefly-3">157 <i data-feather="info" class="w-4 h-4 text-primary-600 dark:text-primary-400"></i>158 </button>159 </div>160 161 <!-- Leonardo Phoenix -->162 <div class="dropdown-item group/item flex items-center justify-between px-4 py-3 hover:bg-primary-50 dark:hover:bg-primary-900/20 cursor-pointer transition-colors" data-value="leonardo-phoenix">163 <div class="flex items-center gap-3">164 <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-indigo-500 to-violet-500 flex items-center justify-center">165 <i data-feather="zap" class="text-white w-4 h-4"></i>166 </div>167 <span class="font-medium text-gray-800 dark:text-gray-200">Leonardo Phoenix</span>168 </div>169 <button class="info-btn p-2 rounded-lg hover:bg-primary-200 dark:hover:bg-primary-800 transition-colors opacity-0 group-hover/item:opacity-100" data-model="leonardo-phoenix">170 <i data-feather="info" class="w-4 h-4 text-primary-600 dark:text-primary-400"></i>171 </button>172 </div>173 </div>174 </div>175 </div>176 177 <!-- Selected Model Display -->178 <div id="selectedDisplay" class="hidden mt-4 p-4 bg-gradient-to-r from-primary-50 to-secondary-50 dark:from-primary-900/20 dark:to-secondary-900/20 rounded-xl border border-primary-100 dark:border-primary-800">179 <div class="flex items-center gap-3">180 <div class="w-8 h-8 rounded-lg bg-primary-500 flex items-center justify-center">181 <i data-feather="check" class="text-white w-4 h-4"></i>182 </div>183 <div>184 <p class="text-sm text-gray-500 dark:text-gray-400">Selected Model</p>185 <p id="selectedModelName" class="font-semibold text-gray-800 dark:text-white"></p>186 </div>187 </div>188 </div>189 </div>190<!-- Additional Settings -->191 <div class="mt-8 pt-6 border-t border-gray-100 dark:border-gray-700">192 <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-4">Quick Settings</h3>193 <div class="grid grid-cols-2 gap-4">194 <button class="p-3 rounded-xl border border-gray-200 dark:border-gray-600 hover:border-primary-300 dark:hover:border-primary-700 hover:bg-primary-50 dark:hover:bg-primary-900/10 transition-all text-left">195 <i data-feather="sliders" class="w-4 h-4 text-primary-500 mb-2"></i>196 <p class="text-sm font-medium text-gray-700 dark:text-gray-300">Advanced</p>197 </button>198 <button class="p-3 rounded-xl border border-gray-200 dark:border-gray-600 hover:border-secondary-300 dark:hover:border-secondary-700 hover:bg-secondary-50 dark:hover:bg-secondary-900/10 transition-all text-left">199 <i data-feather="zap" class="w-4 h-4 text-secondary-500 mb-2"></i>200 <p class="text-sm font-medium text-gray-700 dark:text-gray-300">Turbo Mode</p>201 </button>202 </div>203 </div>204 </div>205 </div>206 207 <!-- Modal/Dialog -->208 <div id="modelModal" class="fixed inset-0 z-50 hidden">209 <!-- Backdrop -->210 <div class="absolute inset-0 bg-black/50 backdrop-blur-sm transition-opacity duration-300 opacity-0" id="modalBackdrop"></div>211 212 <!-- Modal Content -->213 <div class="absolute inset-0 flex items-center justify-center p-4">214 <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl max-w-md w-full transform scale-95 opacity-0 transition-all duration-300" id="modalContent">215 <!-- Modal Header -->216 <div class="relative p-6 pb-4">217 <div class="absolute top-4 right-4">218 <button id="closeModal" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">219 <i data-feather="x" class="w-5 h-5 text-gray-500 dark:text-gray-400"></i>220 </button>221 </div>222 223 <div class="flex items-center gap-4">224 <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-primary-500 to-secondary-500 flex items-center justify-center shadow-lg shadow-primary-500/25">225 <i data-feather="cpu" class="text-white w-7 h-7"></i>226 </div>227 <div>228 <h3 id="modalTitle" class="text-xl font-bold text-gray-800 dark:text-white">Model Name</h3>229 <span id="modalVersion" class="text-xs font-medium px-2 py-1 rounded-full bg-primary-100 dark:bg-primary-900 text-primary-600 dark:text-primary-400">v1.0</span>230 </div>231 </div>232 </div>233 234 <!-- Modal Body -->235 <div class="px-6 pb-6">236 <p id="modalDescription" class="text-gray-600 dark:text-gray-300 leading-relaxed mb-6">237 Model description goes here...238 </p>239 240 <!-- Specs Grid -->241 <div class="grid grid-cols-2 gap-3 mb-6">242 <div class="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-xl">243 <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">Resolution</p>244 <p id="modalResolution" class="font-semibold text-gray-800 dark:text-white">1024×1024</p>245 </div>246 <div class="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-xl">247 <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">Speed</p>248 <p id="modalSpeed" class="font-semibold text-gray-800 dark:text-white">Fast</p>249 </div>250 <div class="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-xl">251 <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">Style</p>252 <p id="modalStyle" class="font-semibold text-gray-800 dark:text-white">Photorealistic</p>253 </div>254 <div class="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-xl">255 <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">License</p>256 <p id="modalLicense" class="font-semibold text-gray-800 dark:text-white">Commercial</p>257 </div>258 </div>259 260 <!-- Tags -->261 <div id="modalTags" class="flex flex-wrap gap-2">262 <!-- Tags injected via JS -->263 </div>264 </div>265 266 <!-- Modal Footer -->267 <div class="px-6 pb-6 pt-2 flex gap-3">268 <button id="useModelBtn" class="flex-1 bg-gradient-to-r from-primary-500 to-secondary-500 hover:from-primary-600 hover:to-secondary-600 text-white font-medium py-3 px-4 rounded-xl transition-all duration-200 shadow-lg shadow-primary-500/25 hover:shadow-primary-500/40 transform hover:-translate-y-0.5">269 Use This Model270 </button>271 <button id="docsBtn" class="px-4 py-3 border border-gray-200 dark:border-gray-600 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">272 <i data-feather="external-link" class="w-5 h-5 text-gray-600 dark:text-gray-400"></i>273 </button>274 </div>275 </div>276 </div>277 </div>278 279 <!-- Theme Toggle -->280 <button id="themeToggle" class="fixed bottom-6 right-6 p-3 rounded-full bg-white dark:bg-gray-800 shadow-lg border border-gray-200 dark:border-gray-700 hover:scale-110 transition-transform">281 <i data-feather="sun" class="w-5 h-5 text-amber-500 hidden dark:block"></i>282 <i data-feather="moon" class="w-5 h-5 text-primary-500 block dark:hidden"></i>283 </button>284 285 <script src="script.js"></script>286 <script>feather.replace();</script>287<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>288</body>289</html>