Update templates/index.html

templates/index.html

@@ -243,7 +243,8 @@
                     <div class="xl:col-span-2 glass-card p-6 fade-in">
                         <h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
                             <svg class="w-5 h-5 mr-2 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v4a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 11-6 0 3 3 0 016 0z"></path>
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                             </svg>
                             Analysis Results
                         </h2>
@@ -603,12 +604,13 @@
             cachedExamples.slice(0, 9).forEach((url) => {
                 const card = document.createElement('button');
                 card.type = 'button';
-                card.className = 'relative group rounded-xl overflow-hidden shadow hover:shadow-lg transition focus:outline-none focus:ring-2 focus:ring-indigo-500';
+                card.className = 'relative group rounded-xl overflow-hidden shadow hover:shadow-lg transition focus:outline-none focus:ring-2 focus:ring-indigo-500 text-left';
                 card.title = 'Use this example';
                 card.onclick = () => selectExample(url);
+                const name = decodeURIComponent(url.split('/').pop() || 'example');
                 card.innerHTML = `
-                    <img src="${url}" alt="example" class="w-full h-24 object-cover">
-                    <div class="absolute inset-0 bg-black/0 group-hover:bg-black/20"></div>
+                    <img src="${url}" alt="${name}" class="w-full h-24 object-cover">
+                    <div class="px-2 py-1 text-xs bg-white text-gray-700 truncate">${name}</div>
                 `;
                 examplesContainer.appendChild(card);
             });