fix UI

app/static/script.js

@@ -898,23 +898,26 @@ function loadCluster(name) {
 
 document.getElementById("delete-btn").onclick = async () => {
   const selectedCards = Array.from(document.querySelectorAll(".thumbnail-card.selected"));
-  
   const paths = selectedCards.map((c) => c.dataset.path);
 
   if (!paths.length) return alert("Please select images to delete.");
-  if (!confirm(`Are you sure you want to delete ${paths.length} images?`)) return;
+  
+  if (!confirm(`Initialize deletion sequence for ${paths.length} targets?`)) return;
 
   selectedCards.forEach(card => card.classList.add("being-deleted"));
 
   try {
-    const res = await fetch(`${API_URL}/delete-images`, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({
-        session_id: currentSessionId,
-        image_paths: paths,
-      }),
-    });
+    const [res, _] = await Promise.all([
+        fetch(`${API_URL}/delete-images`, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+                session_id: currentSessionId,
+                image_paths: paths,
+            }),
+        }),
+        new Promise(resolve => setTimeout(resolve, 800))
+    ]);
 
     if (!res.ok) {
         const errData = await res.json();
@@ -923,8 +926,6 @@ document.getElementById("delete-btn").onclick = async () => {
     
     const data = await res.json();
 
-    await new Promise(resolve => setTimeout(resolve, 800));
-
     selectedCards.forEach(card => card.remove());
 
     if (currentClusterName && currentGroups[currentClusterName]) {
@@ -932,11 +933,11 @@ document.getElementById("delete-btn").onclick = async () => {
     }
 
     syncUniverseMap(data.deleted);
-    renderClusterList();
 
   } catch (e) {
+    console.error(e);
     selectedCards.forEach(card => card.classList.remove("being-deleted"));
-    alert("Error during deletion: " + e.message);
+    alert("Anomaly Detected: " + e.message);
   }
 };
 

app/static/styles.css

@@ -161,7 +161,7 @@ body {
 .thumbnail-card.selected {
   border-color: #8b5cf6;
   background-color: rgba(139, 92, 246, 0.1);
-  ring: 1px solid #8b5cf6;
+  box-shadow: 0 0 0 1px #8b5cf6;
 }
 .thumbnail-card.best-quality {
   border: 2px solid #10b981;
@@ -803,41 +803,41 @@ body {
   box-shadow: 0 0 10px rgba(239, 68, 68, 0.1);
 }
 
-@keyframes vortex-spin {
+@keyframes vortex-implode {
   0% {
     transform: scale(1) rotate(0deg);
-    filter: brightness(1) hue-rotate(0deg) blur(0px);
-    border-radius: 4px;
-    box-shadow: 0 0 0 transparent;
-  }
-  20% {
-    transform: scale(1.05) rotate(-5deg);
-    filter: brightness(1.2) contrast(1.2);
-    box-shadow: 0 0 15px rgba(139, 92, 246, 0.5);
+    filter: brightness(1) contrast(1);
+    opacity: 1;
   }
   40% {
-    transform: scale(0.8) rotate(45deg);
-    border-radius: 50%;
-    filter: brightness(1.5) hue-rotate(45deg) blur(2px);
-    background-color: #000;
+    transform: scale(0.9) rotate(-10deg);
+    filter: brightness(1.5) hue-rotate(90deg);
   }
   100% {
-    transform: scale(0) rotate(1080deg);
+    transform: scale(0) rotate(720deg);
     opacity: 0;
-    border-radius: 50%;
-    filter: brightness(3) hue-rotate(180deg) blur(4px);
-    box-shadow: inset 0 0 20px #8b5cf6, 0 0 50px #8b5cf6; 
+    filter: brightness(0);
   }
 }
 
 .thumbnail-card.being-deleted {
   position: relative;
-  z-index: 50;
   pointer-events: none;
-  animation: vortex-spin 0.8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
+  animation: vortex-implode 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards;
   
-  background: black !important;
+  background: transparent !important;
   border: none !important;
+  box-shadow: none !important;
+  z-index: 50;
+}
+
+.thumbnail-card.being-deleted input,
+.thumbnail-card.being-deleted .quality-badge,
+.thumbnail-card.being-deleted .best-badge,
+.thumbnail-card.being-deleted .text-\[10px\],
+.thumbnail-card.being-deleted .impact-badge {
+    opacity: 0;
+    transition: opacity 0.2s;
 }
 
 .thumbnail-card.being-deleted::after {
@@ -845,32 +845,18 @@ body {
   position: absolute;
   top: 50%;
   left: 50%;
-  width: 10%;
-  height: 10%;
+  width: 0%;
+  height: 0%;
   background: black;
   border-radius: 50%;
   transform: translate(-50%, -50%);
-  box-shadow: 0 0 10px 5px rgba(139, 92, 246, 0.8);
+  box-shadow: 0 0 20px 5px rgba(139, 92, 246, 0.9), inset 0 0 10px #fff;
   z-index: 60;
-  animation: singularity-grow 0.8s ease-in forwards;
+  animation: singularity-expand 0.8s ease-out forwards;
 }
 
-@keyframes singularity-grow {
+@keyframes singularity-expand {
   0% { width: 0%; height: 0%; opacity: 0; }
-  50% { opacity: 1; }
-  100% { width: 120%; height: 120%; opacity: 0; }
-}
-
-.thumbnail-card.being-deleted input,
-.thumbnail-card.being-deleted .quality-badge,
-.thumbnail-card.being-deleted .best-badge,
-.thumbnail-card.being-deleted .text-\[10px\] {
-    display: none;
-}
-
-.thumbnail-card.being-deleted img {
-    object-fit: cover !important;
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
+  50% { opacity: 1; width: 40%; height: 40%; }
+  100% { width: 0%; height: 0%; opacity: 0; }
 }