Update index.html

index.html

@@ -46,9 +46,9 @@
         .background-overlay {
             position: fixed;
             inset: 0;
-            background: rgba(0, 0, 0, 0.7);
-            backdrop-filter: blur(20px);
-            -webkit-backdrop-filter: blur(20px);
+            background: rgba(0, 0, 0, 0.6);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(5px);
             z-index: 0;
         }
         
@@ -674,9 +674,17 @@
     
     <div class="container mx-auto py-4 md:py-8 px-4">
         <!-- Header -->
-        <header class="text-center mb-8 md:mb-12">
-            <h1 class="header-text mb-6">Deck Doctor</h1>
+        <header class="text-center mb-8 md:mb-12">            
             
+            <h1 class="header-text text-4xl md:text-6xl lg:text-8xl mb-4 md:mb-6">
+                Deck Doctor
+            </h1>
+            <div class="flex justify-center gap-5 md:gap-8 text-xs md:text-sm flex-wrap">
+                <span class="text-white/40"><i class="fas fa-shield-alt mr-2"></i>Name Search</span>
+                <span class="text-white/40"><i class="fas fa-chart-line mr-2"></i>Deck Analysis</span>
+                <span class="text-white/40"><i class="fas fa-search mr-2"></i>Smart Discovery</span>
+            </div>
+
             <!-- Search -->
             <div class="search-container">
                 <i class="fas fa-search search-icon"></i>
@@ -692,6 +700,8 @@
                 </button>
                 <div class="autocomplete-dropdown" id="autocomplete"></div>
             </div>
+
+
         </header>
 
         <!-- Main Card Display -->
@@ -1266,11 +1276,19 @@
                 const query = buildCardQueryString(card);
                 console.log('Query string:', query); // Debug logging
                 
-                const response = await fetch(`https://api.deck.doctor/v1/mtg/search?q=${encodeURIComponent(query)}&topk=8`);
+                const response = await fetch(`https://api.deck.doctor/v1/mtg/search?q=${encodeURIComponent(query)}&topk=12`);
                 const data = await response.json();
                 
                 if (data?.length > 0) {
-                    displayGallery(data.filter(([c]) => c.id !== card.id));
+                    // Filter out the current card more robustly
+                    const filteredResults = data.filter(([c]) => {
+                        // Check multiple identifiers to ensure we exclude the current card
+                        return c.id !== card.id && 
+                               c.name !== card.name &&
+                               (!c.scryfall_uri || c.scryfall_uri !== card.scryfall_uri);
+                    }).slice(0, 11); // Take at most 11 cards after filtering
+                    
+                    displayGallery(filteredResults);
                     $('gallery-section').classList.remove('hidden');
                 }
             } catch (error) {