Spaces:

MateusFF
/

model-intellect-hub

Running

App Files Files Community

MateusFF commited on Jan 28

Commit

9a4dd6d

verified ·

1 Parent(s): 218f305

<v-row align="center">

Browse files

<v-col cols="10">
<v-select
v-model="image1.selectedModel"
:items="getImage1ModelsKeys"
label="Modelo"
density="compact"
hide-details
variant="outlined"
class="mb-2"
>
</v-select>
</v-col>
<v-col class="ma-0 pa-0" align-self='center' cols="2">
<v-btn color="primary" density='compact' icon='mdi-information-outline' size='medium'
@click="console.log('wee')" :disabled="!image1.selectedModel">
</v-btn>
</v-col>
</v-row>

I need a button with a mdi info icon, that shows a modal/dialog with a description of the selected model. The button must be inside the select box, side by side the text showing the model name

Files changed (4) hide show

README.md +8 -5
index.html +230 -19
script.js +235 -0
style.css +138 -19

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Model Intellect Hub
-emoji: 🐢
-colorFrom: pink
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Model Intellect Hub 🔮
+colorFrom: blue
+colorTo: yellow
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html CHANGED Viewed

@@ -1,19 +1,230 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Model Intellect Hub</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            50: '#f0f9ff',
+                            100: '#e0f2fe',
+                            200: '#bae6fd',
+                            300: '#7dd3fc',
+                            400: '#38bdf8',
+                            500: '#0ea5e9',
+                            600: '#0284c7',
+                            700: '#0369a1',
+                            800: '#075985',
+                            900: '#0c4a6e',
+                        },
+                        secondary: {
+                            50: '#fdf4ff',
+                            100: '#fae8ff',
+                            200: '#f5d0fe',
+                            300: '#f0abfc',
+                            400: '#e879f9',
+                            500: '#d946ef',
+                            600: '#c026d3',
+                            700: '#a21caf',
+                            800: '#86198f',
+                            900: '#701a75',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gray-50 dark:bg-gray-900 min-h-screen transition-colors duration-300">
+    <div class="container mx-auto px-4 py-8 max-w-4xl">
+        <!-- Header -->
+        <header class="mb-8 text-center">
+            <h1 class="text-3xl md:text-4xl font-bold text-gray-800 dark:text-white mb-2">
+                <span class="bg-gradient-to-r from-primary-500 to-secondary-500 bg-clip-text text-transparent">
+                    Model Intellect Hub
+                </span>
+                🔮
+            </h1>
+            <p class="text-gray-600 dark:text-gray-400">Explore AI models with intelligent insights</p>
+        </header>
+        <!-- Main Card -->
+        <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">
+            <div class="flex items-center gap-3 mb-6">
+                <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-primary-500 to-secondary-500 flex items-center justify-center">
+                    <i data-feather="image" class="text-white w-5 h-5"></i>
+                </div>
+                <div>
+                    <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Image Generation Model</h2>
+                    <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>
+                    <!-- 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>
+                </div>
+                <!-- Selected Model Display -->
+                <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">
+                    <div class="flex items-center gap-3">
+                        <div class="w-8 h-8 rounded-lg bg-primary-500 flex items-center justify-center">
+                            <i data-feather="check" class="text-white w-4 h-4"></i>
+                        </div>
+                        <div>
+                            <p class="text-sm text-gray-500 dark:text-gray-400">Selected Model</p>
+                            <p id="selectedModelName" class="font-semibold text-gray-800 dark:text-white"></p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- 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">
+                    <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">
+                        <i data-feather="sliders" class="w-4 h-4 text-primary-500 mb-2"></i>
+                        <p class="text-sm font-medium text-gray-700 dark:text-gray-300">Advanced</p>
+                    </button>
+                    <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">
+                        <i data-feather="zap" class="w-4 h-4 text-secondary-500 mb-2"></i>
+                        <p class="text-sm font-medium text-gray-700 dark:text-gray-300">Turbo Mode</p>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Modal/Dialog -->
+    <div id="modelModal" class="fixed inset-0 z-50 hidden">
+        <!-- Backdrop -->
+        <div class="absolute inset-0 bg-black/50 backdrop-blur-sm transition-opacity duration-300 opacity-0" id="modalBackdrop"></div>
+        <!-- Modal Content -->
+        <div class="absolute inset-0 flex items-center justify-center p-4">
+            <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">
+                <!-- Modal Header -->
+                <div class="relative p-6 pb-4">
+                    <div class="absolute top-4 right-4">
+                        <button id="closeModal" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
+                            <i data-feather="x" class="w-5 h-5 text-gray-500 dark:text-gray-400"></i>
+                        </button>
+                    </div>
+                    <div class="flex items-center gap-4">
+                        <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">
+                            <i data-feather="cpu" class="text-white w-7 h-7"></i>
+                        </div>
+                        <div>
+                            <h3 id="modalTitle" class="text-xl font-bold text-gray-800 dark:text-white">Model Name</h3>
+                            <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>
+                        </div>
+                    </div>
+                </div>
+                <!-- Modal Body -->
+                <div class="px-6 pb-6">
+                    <p id="modalDescription" class="text-gray-600 dark:text-gray-300 leading-relaxed mb-6">
+                        Model description goes here...
+                    </p>
+                    <!-- Specs Grid -->
+                    <div class="grid grid-cols-2 gap-3 mb-6">
+                        <div class="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-xl">
+                            <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">Resolution</p>
+                            <p id="modalResolution" class="font-semibold text-gray-800 dark:text-white">1024×1024</p>
+                        </div>
+                        <div class="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-xl">
+                            <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">Speed</p>
+                            <p id="modalSpeed" class="font-semibold text-gray-800 dark:text-white">Fast</p>
+                        </div>
+                        <div class="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-xl">
+                            <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">Style</p>
+                            <p id="modalStyle" class="font-semibold text-gray-800 dark:text-white">Photorealistic</p>
+                        </div>
+                        <div class="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-xl">
+                            <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">License</p>
+                            <p id="modalLicense" class="font-semibold text-gray-800 dark:text-white">Commercial</p>
+                        </div>
+                    </div>
+                    <!-- Tags -->
+                    <div id="modalTags" class="flex flex-wrap gap-2">
+                        <!-- Tags injected via JS -->
+                    </div>
+                </div>
+                <!-- Modal Footer -->
+                <div class="px-6 pb-6 pt-2 flex gap-3">
+                    <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">
+                        Use This Model
+                    </button>
+                    <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">
+                        <i data-feather="external-link" class="w-5 h-5 text-gray-600 dark:text-gray-400"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Theme Toggle -->
+    <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">
+        <i data-feather="sun" class="w-5 h-5 text-amber-500 hidden dark:block"></i>
+        <i data-feather="moon" class="w-5 h-5 text-primary-500 block dark:hidden"></i>
+    </button>
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,235 @@

+// Model data with descriptions and specs
+const modelData = {
+    'stable-diffusion-xl': {
+        name: 'Stable Diffusion XL',
+        version: 'SDXL 1.0',
+        description: 'Open-source latent diffusion model capable of generating photo-realistic images given any text input. Features enhanced composition and improved face generation with a native 1024×1024 resolution.',
+        resolution: '1024×1024',
+        speed: 'Medium',
+        style: 'Versatile',
+        license: 'Open Source',
+        tags: ['Open Source', 'Customizable', 'Local Run', 'Community']
+    },
+    'dall-e-3': {
+        name: 'DALL-E 3',
+        version: 'Latest',
+        description: 'OpenAI\'s most advanced image generation model with exceptional prompt understanding and text rendering capabilities. Produces highly detailed, accurate images that closely follow complex prompts.',
+        resolution: '1024×1024',
+        speed: 'Fast',
+        style: 'Photorealistic',
+        license: 'Commercial',
+        tags: ['OpenAI', 'Text Rendering', 'API', 'Enterprise']
+    },
+    'midjourney-v6': {
+        name: 'Midjourney V6',
+        version: 'Alpha',
+        description: 'Latest iteration with unprecedented realism, coherent text generation, and improved prompt accuracy. Known for stunning artistic quality and aesthetic appeal in generated imagery.',
+        resolution: 'Up to 2048×2048',
+        speed: 'Medium',
+        style: 'Artistic',
+        license: 'Commercial',
+        tags: ['Discord', 'Artistic', 'High Quality', 'Trending']
+    },
+    'imagen-3': {
+        name: 'Imagen 3',
+        version: 'v3.0',
+        description: 'Google DeepMind\'s highest quality text-to-image model with exceptional detail, lighting, and fewer distracting artifacts. Excels at rendering text and following complex prompts.',
+        resolution: '1024×1024',
+        speed: 'Fast',
+        style: 'Photorealistic',
+        license: 'Commercial',
+        tags: ['Google', 'Safe', 'Reliable', 'Enterprise']
+    },
+    'firefly-3': {
+        name: 'Adobe Firefly 3',
+        version: 'v3.0',
+        description: 'Adobe\'s creative generative AI designed for safe commercial use. Integrated with Creative Cloud, featuring structure reference and style reference for precise control.',
+        resolution: '1024×1024',
+        speed: 'Fast',
+        style: 'Commercial',
+        license: 'Commercial Safe',
+        tags: ['Adobe', 'Creative Cloud', 'Safe', 'Designers']
+    },
+    'leonardo-phoenix': {
+        name: 'Leonardo Phoenix',
+        version: 'Phoenix',
+        description: 'Leonardo.ai\'s flagship model with exceptional coherence, prompt adherence, and native 1536×1536 resolution. Features Alchemy for premium quality enhancement.',
+        resolution: '1536×1536',
+        speed: 'Medium',
+        style: 'Game Assets',
+        license: 'Commercial',
+        tags: ['Gaming', 'Assets', 'Fine-tune', 'Community']
+    }
+};
+// DOM Elements
+const modelSelect = document.getElementById('modelSelect');
+const infoBtn = document.getElementById('infoBtn');
+const modal = document.getElementById('modelModal');
+const modalBackdrop = document.getElementById('modalBackdrop');
+const modalContent = document.getElementById('modalContent');
+const closeModal = document.getElementById('closeModal');
+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');
+const modalDescription = document.getElementById('modalDescription');
+const modalResolution = document.getElementById('modalResolution');
+const modalSpeed = document.getElementById('modalSpeed');
+const modalStyle = document.getElementById('modalStyle');
+const modalLicense = document.getElementById('modalLicense');
+const modalTags = document.getElementById('modalTags');
+// State
+let currentModel = null;
+// Initialize
+document.addEventListener('DOMContentLoaded', () => {
+    feather.replace();
+    initTheme();
+});
+// Theme handling
+function initTheme() {
+    const savedTheme = localStorage.getItem('theme') || 'light';
+    if (savedTheme === 'dark') {
+        document.documentElement.classList.add('dark');
+    }
+}
+themeToggle.addEventListener('click', () => {
+    document.documentElement.classList.toggle('dark');
+    const isDark = document.documentElement.classList.contains('dark');
+    localStorage.setItem('theme', isDark ? 'dark' : 'light');
+    feather.replace();
+});
+// Select change handler
+modelSelect.addEventListener('change', (e) => {
+    const value = e.target.value;
+    currentModel = value;
+    if (value) {
+        // Enable info button
+        infoBtn.disabled = false;
+        // Show floating label
+        floatingLabel.classList.add('show-label');
+        // Show selected display
+        const model = modelData[value];
+        selectedModelName.textContent = model.name;
+        selectedDisplay.classList.remove('hidden');
+        selectedDisplay.classList.add('selected-show');
+        // Add focus ring animation
+        modelSelect.parentElement.classList.add('focus-ring-animate');
+        setTimeout(() => {
+            modelSelect.parentElement.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];
+    if (!model) return;
+    // Populate modal
+    modalTitle.textContent = model.name;
+    modalVersion.textContent = model.version;
+    modalDescription.textContent = model.description;
+    modalResolution.textContent = model.resolution;
+    modalSpeed.textContent = model.speed;
+    modalStyle.textContent = model.style;
+    modalLicense.textContent = model.license;
+    // Populate tags
+    modalTags.innerHTML = model.tags.map((tag, i) => `
+        <span class="px-3 py-1 text-xs font-medium rounded-full bg-gradient-to-r from-primary-100 to-secondary-100 dark:from-primary-900/50 dark:to-secondary-900/50 text-primary-700 dark:text-primary-300 border border-primary-200 dark:border-primary-800 tag-pop" style="animation-delay: ${i * 50}ms">
+            ${tag}
+        </span>
+    `).join('');
+    // Show modal
+    openModal();
+});
+// Modal functions
+function openModal() {
+    modal.classList.remove('hidden');
+    // Trigger reflow
+    void modal.offsetWidth;
+    modalBackdrop.classList.remove('opacity-0');
+    modalContent.classList.remove('scale-95', 'opacity-0');
+    modalContent.classList.add('scale-100', 'opacity-100');
+}
+function closeModalFunc() {
+    modalBackdrop.classList.add('opacity-0');
+    modalContent.classList.remove('scale-100', 'opacity-100');
+    modalContent.classList.add('scale-95', 'opacity-0');
+    setTimeout(() => {
+        modal.classList.add('hidden');
+    }, 300);
+}
+// Close modal handlers
+closeModal.addEventListener('click', closeModalFunc);
+modalBackdrop.addEventListener('click', closeModalFunc);
+// Close on escape key
+document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
+        closeModalFunc();
+    }
+});
+// Use model button
+document.getElementById('useModelBtn').addEventListener('click', () => {
+    closeModalFunc();
+    // Add a subtle confirmation animation
+    modelSelect.parentElement.classList.add('focus-ring-animate');
+    setTimeout(() => {
+        modelSelect.parentElement.classList.remove('focus-ring-animate');
+    }, 300);
+});
+// Docs button
+document.getElementById('docsBtn').addEventListener('click', () => {
+    const urls = {
+        'stable-diffusion-xl': 'https://stability.ai/stable-diffusion',
+        'dall-e-3': 'https://openai.com/dall-e-3',
+        'midjourney-v6': 'https://www.midjourney.com',
+        'imagen-3': 'https://deepmind.google/technologies/imagen-3/',
+        'firefly-3': 'https://www.adobe.com/products/firefly.html',
+        'leonardo-phoenix': 'https://leonardo.ai'
+    };
+    if (currentModel && urls[currentModel]) {
+        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 CHANGED Viewed

@@ -1,28 +1,147 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
 }
+::-webkit-scrollbar-track {
+    background: transparent;
 }
+::-webkit-scrollbar-thumb {
+    background: #cbd5e1;
+    border-radius: 4px;
 }
+::-webkit-scrollbar-thumb:hover {
+    background: #94a3b8;
 }
+.dark ::-webkit-scrollbar-thumb {
+    background: #475569;
 }
+.dark ::-webkit-scrollbar-thumb:hover {
+    background: #64748b;
+}
+/* Select styling enhancements */
+select {
+    background-image: none !important;
+}
+/* Focus ring animation */
+.focus-ring-animate {
+    animation: focusPulse 0.3s ease-out;
+}
+@keyframes focusPulse {
+    0% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.4); }
+    100% { box-shadow: 0 0 0 4px rgba(14, 165, 233, 0); }
+}
+/* Modal animations */
+.modal-enter {
+    animation: modalIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+.modal-exit {
+    animation: modalOut 0.2s ease-out forwards;
+}
+@keyframes modalIn {
+    from {
+        opacity: 0;
+        transform: scale(0.95) translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+    }
+}
+@keyframes modalOut {
+    from {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+    }
+    to {
+        opacity: 0;
+        transform: scale(0.95) translateY(10px);
+    }
+}
+/* Gradient text animation */
+.gradient-text-animate {
+    background-size: 200% auto;
+    animation: gradientShift 3s ease infinite;
+}
+@keyframes gradientShift {
+    0%, 100% { background-position: 0% center; }
+    50% { background-position: 100% center; }
+}
+/* Button hover glow */
+.btn-glow:hover {
+    box-shadow: 0 0 20px rgba(14, 165, 233, 0.4);
+}
+/* Tag animation */
+.tag-pop {
+    animation: tagPop 0.3s ease-out;
+}
+@keyframes tagPop {
+    0% { transform: scale(0); opacity: 0; }
+    70% { transform: scale(1.1); }
+    100% { transform: scale(1); opacity: 1; }
+}
+/* Smooth transitions */
+.transition-smooth {
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+/* Glass effect */
+.glass {
+    background: rgba(255, 255, 255, 0.7);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+}
+.dark .glass {
+    background: rgba(15, 23, 42, 0.7);
+}
+/* Custom select dropdown styling */
+select option {
+    padding: 12px;
+    font-size: 14px;
+}
+/* Info button active state */
+#infoBtn:not(:disabled):active {
+    transform: scale(0.95);
+}
+/* Floating label show */
+.show-label {
+    opacity: 1 !important;
+}
+/* Selected display animation */
+.selected-show {
+    animation: slideDown 0.3s ease-out;
+}
+@keyframes slideDown {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}