add glow wffect for orb - Follow Up Deployment

index.html

@@ -30,6 +30,8 @@
       --space-gradient-alt: radial-gradient(ellipse at top left, var(--space-col), transparent),
                        radial-gradient(ellipse at bottom, var(--galaxy-col) 10%, transparent 60%),
                        radial-gradient(ellipse at bottom right, var(--bg-col), transparent);
+      --default-left: 50%;
+      --default-top: 50%;
       --stars: radial-gradient(circle at 52% 54%, rgba(255, 255, 255, 0.582) 3px, transparent 4px),
                radial-gradient(circle at 22% 24%, rgba(255, 255, 255, 0.582) 2px, transparent 3px),
                radial-gradient(circle at 14% 18%, rgba(255, 255, 255, 0.582) 3px, transparent 8px),
@@ -55,9 +57,13 @@
                radial-gradient(circle at 6% 59%, rgba(255, 255, 255, 0.336) 2px, transparent 10px),
                radial-gradient(circle at 9% 57%, rgba(255, 255, 255, 0.336) 1px, transparent 2px),
                radial-gradient(circle at 14% 61%, rgba(255, 255, 255, 0.336) 2px, transparent 6px);
-      min-width: 30rem;
-      padding: 2rem 4rem;
+      width: 700px;
+      height: 700px;
+      padding: 0;
       border-radius: 2rem;
+      left: var(--default-left);
+      top: var(--default-top);
+      transform: translate(-50%, -50%);
       background-color: #010101;
       background-image: var(--space-gradient), var(--stars);
       background-size: 175% 200%;
@@ -72,8 +78,6 @@
       z-index: 10;
       cursor: grab;
       user-select: none;
-      min-height: 300px;
-      min-width: 400px;
     }
 
     .heading {
@@ -237,6 +241,44 @@
       display: inline-block;
       margin-right: 0.15rem;
     }
+
+    /* ---------- 2-D Red-Orange Glowing Orb ---------- */
+    .spinner {
+      position: absolute;
+      width: 130px;
+      height: 130px;
+      border-radius: 50%;
+      background: radial-gradient(circle at 30% 30%, #ff1a1a, #cc0000 40%, #990000 100%);
+      box-shadow:
+        0 0 30px rgba(255, 26, 26, 0.4),
+        0 0 60px rgba(255, 26, 26, 0.3),
+        0 0 90px rgba(255, 26, 26, 0.2),
+        0 0 120px rgba(255, 26, 26, 0.1),
+        inset 0 0 20px rgba(255, 255, 255, 0.3);
+      filter: blur(0.5px);
+      cursor: grab;
+      z-index: 20;
+      animation: pulseGlow 2s ease-in-out infinite;
+    }
+
+    @keyframes pulseGlow {
+      0%, 100% {
+        box-shadow:
+          0 0 30px rgba(255, 26, 26, 0.4),
+          0 0 60px rgba(255, 26, 26, 0.3),
+          0 0 90px rgba(255, 26, 26, 0.2),
+          0 0 120px rgba(255, 26, 26, 0.1),
+          inset 0 0 20px rgba(255, 255, 255, 0.3);
+      }
+      50% {
+        box-shadow:
+          0 0 40px rgba(255, 26, 26, 0.6),
+          0 0 80px rgba(255, 26, 26, 0.5),
+          0 0 110px rgba(255, 26, 26, 0.4),
+          0 0 150px rgba(255, 26, 26, 0.3),
+          inset 0 0 25px rgba(255, 255, 255, 0.4);
+      }
+    }
   </style>
 </head>
 
@@ -244,8 +286,11 @@
 
   <canvas id="particleCanvas"></canvas>
 
+  <!-- 3-D Red-Orange Glowing Orb -->
+  <div id="orb" class="spinner" style="top:50%; left:50%; transform:translate(-50%,-50%);"></div>
+
   <!-- From Uiverse.io by krokettenkoal -->
-  <div id="draggableCard" class="card relative flex flex-col min-w-0 w-full max-w-xl mx-auto !min-h-[28rem] !rounded-xl !p-0">
+  <div id="draggableCard" class="card relative flex flex-col min-w-0 w-full mx-auto !min-h-[28rem] !rounded-xl !p-0">
 
     <!-- Header -->
     <header class="flex items-center justify-between px-4 py-2 border-b border-white/20">
@@ -354,11 +399,18 @@
       </ul>
     </div>
 
-    <div id="resizeHandle" class="absolute bottom-0 right-0 w-6 h-6 cursor-se-resize">
-      <svg class="w-full h-full text-white opacity-40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-        <polyline points="9 15 15 9 15 15 9 9"></polyline>
-      </svg>
-    </div>
+    <!-- Resize handles -->
+    <!-- Corners -->
+    <div class="absolute top-0 left-0 w-3 h-3 cursor-nw-resize" data-corner="nw"></div>
+    <div class="absolute top-0 right-0 w-3 h-3 cursor-ne-resize" data-corner="ne"></div>
+    <div class="absolute bottom-0 right-0 w-3 h-3 cursor-se-resize" data-corner="se"></div>
+    <div class="absolute bottom-0 left-0 w-3 h-3 cursor-sw-resize" data-corner="sw"></div>
+
+    <!-- Edges -->
+    <div class="absolute top-0 left-3 right-3 h-2 cursor-n-resize" data-edge="n"></div>
+    <div class="absolute right-0 top-3 bottom-3 w-2 cursor-e-resize" data-edge="e"></div>
+    <div class="absolute bottom-0 left-3 right-3 h-2 cursor-s-resize" data-edge="s"></div>
+    <div class="absolute left-0 top-3 bottom-3 w-2 cursor-w-resize" data-edge="w"></div>
   </div>
 
   <!-- API Key Modal -->
@@ -410,16 +462,15 @@
   <script>
     /* ---------- DRAGGABLE & RESIZABLE CARD ---------- */
     const card = document.getElementById('draggableCard');
-    const resizeHandle = document.getElementById('resizeHandle');
+    const resizeHandles = document.querySelectorAll('[data-corner], [data-edge]');
 
     // Dragging variables
     let isDragging = false;
     let isResizing = false;
-    let currentX, currentY, initialX, initialY;
-    let xOffset = 0, yOffset = 0;
+    let startMouseX, startMouseY, startLeft, startTop;
 
     // Resizing variables
-    let startWidth, startHeight, startX, startY;
+    let startWidth, startHeight, startX, startY, resizeDirection;
 
     const lockButton = document.getElementById('lockButton');
     const lockIcon = document.getElementById('lockIcon');
@@ -427,68 +478,115 @@
     let isLocked = false;
 
     card.addEventListener('mousedown', dragStart);
-    resizeHandle.addEventListener('mousedown', resizeStart);
+    resizeHandles.forEach(h => h.addEventListener('mousedown', resizeStart));
     document.addEventListener('mousemove', dragMove);
     document.addEventListener('mouseup', dragEnd);
 
     lockButton.addEventListener('click', () => {
       isLocked = !isLocked;
+      const handles = document.querySelectorAll('[data-corner], [data-edge]');
       if (isLocked) {
         lockIcon.classList.add('hidden');
         unlockIcon.classList.remove('hidden');
         card.style.cursor = 'default';
-        resizeHandle.style.display = 'none';
+        handles.forEach(h => h.style.display = 'none');
       } else {
         lockIcon.classList.remove('hidden');
         unlockIcon.classList.add('hidden');
         card.style.cursor = 'grab';
-        resizeHandle.style.display = 'block';
+        handles.forEach(h => h.style.display = 'block');
       }
     });
 
     function dragStart(e) {
       if (isLocked || e.target.tagName === 'BUTTON') return;
-      
-      initialX = e.clientX - xOffset;
-      initialY = e.clientY - yOffset;
 
-      if (e.target === card || card.contains(e.target)) {
-        isDragging = true;
+      const rect = card.getBoundingClientRect();
+
+      // Remove centering transform once at start
+      if (card.style.transform.includes('translate')) {
+        card.style.transform = 'none';
+        card.style.left = `${rect.left}px`;
+        card.style.top = `${rect.top}px`;
       }
+
+      startMouseX = e.clientX;
+      startMouseY = e.clientY;
+      startLeft = parseFloat(card.style.left) || rect.left;
+      startTop  = parseFloat(card.style.top)  || rect.top;
+
+      isDragging = true;
     }
 
     function resizeStart(e) {
       if (isLocked) return;
       e.stopPropagation();
-      isResizing = true;
+
+      const rect = card.getBoundingClientRect();
+      // Remove centering transform once at start
+      if (card.style.transform.includes('translate')) {
+        card.style.transform = 'none';
+        card.style.left = `${rect.left}px`;
+        card.style.top = `${rect.top}px`;
+      }
+
       startX = e.clientX;
       startY = e.clientY;
+      startLeft = parseFloat(card.style.left) || rect.left;
+      startTop  = parseFloat(card.style.top)  || rect.top;
       startWidth = parseInt(getComputedStyle(card).width, 10);
       startHeight = parseInt(getComputedStyle(card).height, 10);
+      resizeDirection = e.target.dataset.corner || e.target.dataset.edge;
+      isResizing = true;
     }
 
     function dragMove(e) {
       if (!isLocked && isDragging) {
         e.preventDefault();
-        currentX = e.clientX - initialX;
-        currentY = e.clientY - initialY;
-
-        xOffset = currentX;
-        yOffset = currentY;
-
-        card.style.transform = `translate(calc(-50% + ${currentX}px), calc(-50% + ${currentY}px))`;
+        const dx = e.clientX - startMouseX;
+        const dy = e.clientY - startMouseY;
+        card.style.left = `${startLeft + dx}px`;
+        card.style.top  = `${startTop  + dy}px`;
       } else if (!isLocked && isResizing) {
         e.preventDefault();
-        const newWidth = startWidth + (e.clientX - startX);
-        const newHeight = startHeight + (e.clientY - startY);
-        card.style.width = `${Math.max(300, newWidth)}px`;
-        card.style.height = `${Math.max(250, newHeight)}px`;
+        // Remove transform-centering on first resize
+        if (card.style.transform.includes('translate')) {
+          const rect = card.getBoundingClientRect();
+          card.style.transform = 'none';
+          card.style.left = `${rect.left}px`;
+          card.style.top = `${rect.top}px`;
+        }
+
+        let newWidth = startWidth;
+        let newHeight = startHeight;
+        let newLeft = startLeft;
+        let newTop = startTop;
+
+        const dx = e.clientX - startX;
+        const dy = e.clientY - startY;
+
+        if (resizeDirection.includes('e')) newWidth = startWidth + dx;
+        if (resizeDirection.includes('w')) {
+          newWidth = startWidth - dx;
+          newLeft = startLeft + dx;
+        }
+        if (resizeDirection.includes('s')) newHeight = startHeight + dy;
+        if (resizeDirection.includes('n')) {
+          newHeight = startHeight - dy;
+          newTop = startTop + dy;
+        }
+
+        newWidth = Math.max(300, newWidth);
+        newHeight = Math.max(250, newHeight);
+
+        card.style.width = `${newWidth}px`;
+        card.style.height = `${newHeight}px`;
+        card.style.left = `${newLeft}px`;
+        card.style.top = `${newTop}px`;
       }
     }
 
-    function dragEnd(e) {
-      initialX = currentX;
-      initialY = currentY;
+    function dragEnd() {
       isDragging = false;
       isResizing = false;
     }
@@ -524,6 +622,16 @@
 
     apiCancelBtn.addEventListener('click', () => apiModal.classList.add('hidden'));
 
+    // Persist current size & position as the default
+    const cardRect = card.getBoundingClientRect();
+    document.documentElement.style.setProperty('--default-left', `${cardRect.left}px`);
+    document.documentElement.style.setProperty('--default-top',  `${cardRect.top}px`);
+    document.documentElement.style.setProperty('--default-width',  `${cardRect.width}px`);
+    document.documentElement.style.setProperty('--default-height', `${cardRect.height}px`);
+    card.style.left = `${cardRect.left}px`;
+    card.style.top  = `${cardRect.top}px`;
+    card.style.transform = 'none';
+
     /* ---------- CONFIG ---------- */
     const CONFIG = {
       particleCount: 120,
@@ -638,6 +746,42 @@
         card.style.background = `linear-gradient(135deg, ${colour}, rgba(0,0,0,0.8))`;
       }
     });
+
+    /* ---------- ORB DRAG ---------- */
+    const orb = document.getElementById('orb');
+    let orbDragging = false;
+    let orbStartX, orbStartY, orbStartLeft, orbStartTop;
+
+    orb.addEventListener('mousedown', (e) => {
+      orbDragging = true;
+      orbStartX = e.clientX;
+      orbStartY = e.clientY;
+
+      const rect = orb.getBoundingClientRect();
+      // remove centering
+      if (orb.style.transform.includes('translate')) {
+        orb.style.transform = 'none';
+        orb.style.left = `${rect.left}px`;
+        orb.style.top  = `${rect.top}px`;
+      }
+
+      orbStartLeft = parseFloat(orb.style.left) || rect.left;
+      orbStartTop  = parseFloat(orb.style.top)  || rect.top;
+
+      e.preventDefault();
+    });
+
+    document.addEventListener('mousemove', (e) => {
+      if (!orbDragging) return;
+      const dx = e.clientX - orbStartX;
+      const dy = e.clientY - orbStartY;
+      orb.style.left = `${orbStartLeft + dx}px`;
+      orb.style.top  = `${orbStartTop  + dy}px`;
+    });
+
+    document.addEventListener('mouseup', () => {
+      orbDragging = false;
+    });
   </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=basheer1414/aiui" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>