I want the info icon button inside the dropdown menu, if possible. The reason is to maximize the size of select box

index.html

@@ -68,50 +68,110 @@
                     <p class="text-sm text-gray-500 dark:text-gray-400">Configure your AI image generation settings</p>
                 </div>
             </div>
-
             <!-- Model Selector Component -->
             <div class="space-y-4">
                 <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                     Select Model
                 </label>
                 
-                <!-- Custom Select with Integrated Info Button -->
-                <div class="relative group">
-                    <div class="flex items-stretch">
-                        <!-- Select Dropdown -->
-                        <div class="relative flex-1">
-                            <select 
-                                id="modelSelect"
-                                class="w-full appearance-none bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-l-xl px-4 py-3 pr-10 text-gray-700 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200 cursor-pointer"
-                            >
-                                <option value="" disabled selected>Choose a model...</option>
-                                <option value="stable-diffusion-xl">Stable Diffusion XL</option>
-                                <option value="dall-e-3">DALL-E 3</option>
-                                <option value="midjourney-v6">Midjourney V6</option>
-                                <option value="imagen-3">Imagen 3</option>
-                                <option value="firefly-3">Adobe Firefly 3</option>
-                                <option value="leonardo-phoenix">Leonardo Phoenix</option>
-                            </select>
-                            <!-- Custom Arrow -->
-                            <div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none">
-                                <i data-feather="chevron-down" class="w-5 h-5 text-gray-400"></i>
-                            </div>
-                        </div>
-                        
-                        <!-- Info Button -->
-                        <button 
-                            id="infoBtn"
-                            disabled
-                            class="px-4 bg-gray-100 dark:bg-gray-700 border border-l-0 border-gray-300 dark:border-gray-600 rounded-r-xl flex items-center justify-center transition-all duration-200 disabled:opacity-40 disabled:cursor-not-allowed hover:bg-primary-50 dark:hover:bg-primary-900/20 hover:border-primary-300 dark:hover:border-primary-700 group/btn"
-                        >
-                            <i data-feather="info" class="w-5 h-5 text-gray-500 dark:text-gray-400 group-hover/btn:text-primary-500 transition-colors"></i>
-                        </button>
-                    </div>
+                <!-- Custom Dropdown with Info Button Inside -->
+                <div class="relative group" id="customDropdown">
+                    <!-- Dropdown Trigger -->
+                    <button 
+                        id="dropdownTrigger"
+                        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"
+                    >
+                        <span id="dropdownSelectedText">Choose a model...</span>
+                        <i data-feather="chevron-down" class="w-5 h-5 text-gray-400 transition-transform duration-200" id="dropdownArrow"></i>
+                    </button>
                     
                     <!-- Floating Label Animation -->
                     <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">
                         Modelo
                     </div>
+                    
+                    <!-- Dropdown Menu -->
+                    <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">
+                        <div class="py-1 max-h-64 overflow-y-auto">
+                            <!-- Stable Diffusion XL -->
+                            <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">
+                                <div class="flex items-center gap-3">
+                                    <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center">
+                                        <i data-feather="cpu" class="text-white w-4 h-4"></i>
+                                    </div>
+                                    <span class="font-medium text-gray-800 dark:text-gray-200">Stable Diffusion XL</span>
+                                </div>
+                                <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">
+                                    <i data-feather="info" class="w-4 h-4 text-primary-600 dark:text-primary-400"></i>
+                                </button>
+                            </div>
+                            
+                            <!-- DALL-E 3 -->
+                            <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">
+                                <div class="flex items-center gap-3">
+                                    <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-green-500 to-emerald-500 flex items-center justify-center">
+                                        <i data-feather="image" class="text-white w-4 h-4"></i>
+                                    </div>
+                                    <span class="font-medium text-gray-800 dark:text-gray-200">DALL-E 3</span>
+                                </div>
+                                <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">
+                                    <i data-feather="info" class="w-4 h-4 text-primary-600 dark:text-primary-400"></i>
+                                </button>
+                            </div>
+                            
+                            <!-- Midjourney V6 -->
+                            <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">
+                                <div class="flex items-center gap-3">
+                                    <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center">
+                                        <i data-feather="aperture" class="text-white w-4 h-4"></i>
+                                    </div>
+                                    <span class="font-medium text-gray-800 dark:text-gray-200">Midjourney V6</span>
+                                </div>
+                                <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">
+                                    <i data-feather="info" class="w-4 h-4 text-primary-600 dark:text-primary-400"></i>
+                                </button>
+                            </div>
+                            
+                            <!-- Imagen 3 -->
+                            <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">
+                                <div class="flex items-center gap-3">
+                                    <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-red-500 to-orange-500 flex items-center justify-center">
+                                        <i data-feather="camera" class="text-white w-4 h-4"></i>
+                                    </div>
+                                    <span class="font-medium text-gray-800 dark:text-gray-200">Imagen 3</span>
+                                </div>
+                                <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">
+                                    <i data-feather="info" class="w-4 h-4 text-primary-600 dark:text-primary-400"></i>
+                                </button>
+                            </div>
+                            
+                            <!-- Adobe Firefly 3 -->
+                            <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">
+                                <div class="flex items-center gap-3">
+                                    <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-yellow-500 to-amber-500 flex items-center justify-center">
+                                        <i data-feather="sun" class="text-white w-4 h-4"></i>
+                                    </div>
+                                    <span class="font-medium text-gray-800 dark:text-gray-200">Adobe Firefly 3</span>
+                                </div>
+                                <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">
+                                    <i data-feather="info" class="w-4 h-4 text-primary-600 dark:text-primary-400"></i>
+                                </button>
+                            </div>
+                            
+                            <!-- Leonardo Phoenix -->
+                            <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">
+                                <div class="flex items-center gap-3">
+                                    <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-indigo-500 to-violet-500 flex items-center justify-center">
+                                        <i data-feather="zap" class="text-white w-4 h-4"></i>
+                                    </div>
+                                    <span class="font-medium text-gray-800 dark:text-gray-200">Leonardo Phoenix</span>
+                                </div>
+                                <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">
+                                    <i data-feather="info" class="w-4 h-4 text-primary-600 dark:text-primary-400"></i>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
                 </div>
 
                 <!-- Selected Model Display -->
@@ -127,8 +187,7 @@
                     </div>
                 </div>
             </div>
-
-            <!-- Additional Settings -->
+<!-- Additional Settings -->
             <div class="mt-8 pt-6 border-t border-gray-100 dark:border-gray-700">
                 <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-4">Quick Settings</h3>
                 <div class="grid grid-cols-2 gap-4">

script.js

@@ -61,10 +61,12 @@ const modelData = {
         tags: ['Gaming', 'Assets', 'Fine-tune', 'Community']
     }
 };
-
 // DOM Elements
-const modelSelect = document.getElementById('modelSelect');
-const infoBtn = document.getElementById('infoBtn');
+const dropdownTrigger = document.getElementById('dropdownTrigger');
+const dropdownMenu = document.getElementById('dropdownMenu');
+const dropdownArrow = document.getElementById('dropdownArrow');
+const dropdownSelectedText = document.getElementById('dropdownSelectedText');
+const customDropdown = document.getElementById('customDropdown');
 const modal = document.getElementById('modelModal');
 const modalBackdrop = document.getElementById('modalBackdrop');
 const modalContent = document.getElementById('modalContent');
@@ -73,7 +75,6 @@ const floatingLabel = document.getElementById('floatingLabel');
 const selectedDisplay = document.getElementById('selectedDisplay');
 const selectedModelName = document.getElementById('selectedModelName');
 const themeToggle = document.getElementById('themeToggle');
-
 // Modal content elements
 const modalTitle = document.getElementById('modalTitle');
 const modalVersion = document.getElementById('modalVersion');
@@ -83,16 +84,16 @@ const modalSpeed = document.getElementById('modalSpeed');
 const modalStyle = document.getElementById('modalStyle');
 const modalLicense = document.getElementById('modalLicense');
 const modalTags = document.getElementById('modalTags');
-
 // State
 let currentModel = null;
+let isDropdownOpen = false;
 
 // Initialize
 document.addEventListener('DOMContentLoaded', () => {
     feather.replace();
     initTheme();
+    initDropdown();
 });
-
 // Theme handling
 function initTheme() {
     const savedTheme = localStorage.getItem('theme') || 'light';
@@ -107,42 +108,104 @@ themeToggle.addEventListener('click', () => {
     localStorage.setItem('theme', isDark ? 'dark' : 'light');
     feather.replace();
 });
+// Dropdown functions
+function initDropdown() {
+    // Toggle dropdown on trigger click
+    dropdownTrigger.addEventListener('click', (e) => {
+        e.stopPropagation();
+        toggleDropdown();
+    });
+    
+    // Handle dropdown item clicks
+    document.querySelectorAll('.dropdown-item').forEach(item => {
+        item.addEventListener('click', (e) => {
+            // Don't select if info button was clicked
+            if (e.target.closest('.info-btn')) {
+                e.stopPropagation();
+                return;
+            }
+            
+            const value = item.dataset.value;
+            selectModel(value);
+            closeDropdown();
+        });
+    });
+    
+    // Handle info button clicks
+    document.querySelectorAll('.info-btn').forEach(btn => {
+        btn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            const modelKey = btn.dataset.model;
+            showModelInfo(modelKey);
+        });
+    });
+    
+    // Close dropdown when clicking outside
+    document.addEventListener('click', (e) => {
+        if (isDropdownOpen && !customDropdown.contains(e.target)) {
+            closeDropdown();
+        }
+    });
+    
+    // Close dropdown on escape key
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape' && isDropdownOpen) {
+            closeDropdown();
+        }
+    });
+}
+
+function toggleDropdown() {
+    if (isDropdownOpen) {
+        closeDropdown();
+    } else {
+        openDropdown();
+    }
+}
+
+function openDropdown() {
+    isDropdownOpen = true;
+    dropdownMenu.classList.remove('opacity-0', 'invisible', 'scale-95');
+    dropdownMenu.classList.add('opacity-100', 'visible', 'scale-100');
+    dropdownArrow.classList.add('rotate-180');
+    dropdownTrigger.classList.add('ring-2', 'ring-primary-500', 'border-transparent');
+}
+
+function closeDropdown() {
+    isDropdownOpen = false;
+    dropdownMenu.classList.add('opacity-0', 'invisible', 'scale-95');
+    dropdownMenu.classList.remove('opacity-100', 'visible', 'scale-100');
+    dropdownArrow.classList.remove('rotate-180');
+    dropdownTrigger.classList.remove('ring-2', 'ring-primary-500', 'border-transparent');
+}
 
-// Select change handler
-modelSelect.addEventListener('change', (e) => {
-    const value = e.target.value;
+function selectModel(value) {
     currentModel = value;
     
     if (value) {
-        // Enable info button
-        infoBtn.disabled = false;
-        
         // Show floating label
         floatingLabel.classList.add('show-label');
         
-        // Show selected display
+        // Update trigger text
         const model = modelData[value];
+        dropdownSelectedText.textContent = model.name;
+        dropdownSelectedText.classList.add('text-gray-800', 'dark:text-white');
+        
+        // Show selected display
         selectedModelName.textContent = model.name;
         selectedDisplay.classList.remove('hidden');
         selectedDisplay.classList.add('selected-show');
         
         // Add focus ring animation
-        modelSelect.parentElement.classList.add('focus-ring-animate');
+        dropdownTrigger.classList.add('focus-ring-animate');
         setTimeout(() => {
-            modelSelect.parentElement.classList.remove('focus-ring-animate');
+            dropdownTrigger.classList.remove('focus-ring-animate');
         }, 300);
-    } else {
-        infoBtn.disabled = true;
-        floatingLabel.classList.remove('show-label');
-        selectedDisplay.classList.add('hidden');
     }
-});
+}
 
-// Info button click handler
-infoBtn.addEventListener('click', () => {
-    if (!currentModel) return;
-    
-    const model = modelData[currentModel];
+function showModelInfo(modelKey) {
+    const model = modelData[modelKey];
     if (!model) return;
     
     // Populate modal
@@ -163,8 +226,7 @@ infoBtn.addEventListener('click', () => {
     
     // Show modal
     openModal();
-});
-
+}
 // Modal functions
 function openModal() {
     modal.classList.remove('hidden');
@@ -222,14 +284,3 @@ document.getElementById('docsBtn').addEventListener('click', () => {
         window.open(urls[currentModel], '_blank');
     }
 });
-
-// Add hover effect to info button
-infoBtn.addEventListener('mouseenter', () => {
-    if (!infoBtn.disabled) {
-        infoBtn.classList.add('btn-glow');
-    }
-});
-
-infoBtn.addEventListener('mouseleave', () => {
-    infoBtn.classList.remove('btn-glow');
-});

style.css

@@ -119,12 +119,78 @@ select option {
     padding: 12px;
     font-size: 14px;
 }
+/* Dropdown menu animations */
+#dropdownMenu {
+    transform-origin: top;
+}
+
+/* Info button in dropdown */
+.info-btn {
+    transition: all 0.2s ease;
+}
 
-/* Info button active state */
-#infoBtn:not(:disabled):active {
+.info-btn:hover {
+    transform: scale(1.1);
+}
+
+.info-btn:active {
     transform: scale(0.95);
 }
 
+/* Dropdown item hover effects */
+.dropdown-item {
+    position: relative;
+}
+
+.dropdown-item::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 3px;
+    background: linear-gradient(to bottom, #0ea5e9, #d946ef);
+    opacity: 0;
+    transition: opacity 0.2s ease;
+}
+
+.dropdown-item:hover::before {
+    opacity: 1;
+}
+
+/* Dropdown arrow rotation */
+#dropdownArrow {
+    transition: transform 0.2s ease;
+}
+
+#dropdownArrow.rotate-180 {
+    transform: rotate(180deg);
+}
+
+/* Custom scrollbar for dropdown */
+#dropdownMenu::-webkit-scrollbar {
+    width: 6px;
+}
+
+#dropdownMenu::-webkit-scrollbar-track {
+    background: transparent;
+    border-radius: 0 8px 8px 0;
+}
+
+#dropdownMenu::-webkit-scrollbar-thumb {
+    background: #cbd5e1;
+    border-radius: 3px;
+}
+
+.dark #dropdownMenu::-webkit-scrollbar-thumb {
+    background: #475569;
+}
+
+/* Dropdown trigger focus state */
+#dropdownTrigger:focus,
+#dropdownTrigger.ring-2 {
+    border-color: transparent;
+}
 /* Floating label show */
 .show-label {
     opacity: 1 !important;