Update index.html

index.html

@@ -148,6 +148,31 @@
       display: inline-block;
       vertical-align: middle;
     }
+    .delete-btn {
+      position: absolute;
+      top: 14px;
+      right: 18px;
+      background: rgba(34, 34, 34, 0.85);
+      border: none;
+      color: #ffb347;
+      font-size: 1.3rem;
+      font-weight: bold;
+      border-radius: 50%;
+      width: 32px;
+      height: 32px;
+      cursor: pointer;
+      z-index: 2;
+      transition: background 0.2s, color 0.2s, transform 0.15s;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0 1px 6px #0005;
+    }
+    .delete-btn:hover {
+      background: #ffb347;
+      color: #222;
+      transform: scale(1.13) rotate(12deg);
+    }
     iframe {
       width: 100%;
       height: 260px;
@@ -213,6 +238,7 @@
 
     <div class="card-grid" id="cardGrid">
       <div class="heatmap-card">
+        <button class="delete-btn" title="Remove this card" onclick="this.parentElement.remove()">✖️</button>
         <div class="heatmap-label">Kadir Nar</div>
         <iframe src="https://cfahlgren1-model-release-heatmap.hf.space/kadirnar"></iframe>
         <div class="scroll-tip">
@@ -221,6 +247,7 @@
         </div>
       </div>
       <div class="heatmap-card">
+        <button class="delete-btn" title="Remove this card" onclick="this.parentElement.remove()">✖️</button>
         <div class="heatmap-label">OpenSpeechHub</div>
         <iframe src="https://cfahlgren1-model-release-heatmap.hf.space/OpenSpeechHub"></iframe>
         <div class="scroll-tip">
@@ -229,6 +256,7 @@
         </div>
       </div>
       <div class="heatmap-card">
+        <button class="delete-btn" title="Remove this card" onclick="this.parentElement.remove()">✖️</button>
         <div class="heatmap-label">Closed-TTS</div>
         <iframe src="https://cfahlgren1-model-release-heatmap.hf.space/Closed-TTS"></iframe>
         <div class="scroll-tip">
@@ -260,6 +288,7 @@
       const card = document.createElement('div');
       card.className = 'heatmap-card';
       card.innerHTML = `
+        <button class="delete-btn" title="Remove this card" onclick="this.parentElement.remove()">✖️</button>
         <div class="heatmap-label">${username}</div>
         <iframe src="https://cfahlgren1-model-release-heatmap.hf.space/${encodeURIComponent(username)}"></iframe>
         <div class="scroll-tip">