From 5796a01a85dc66f7ce33572b5ad1744b0675d4df Mon Sep 17 00:00:00 2001
From: Ku6epXBOCTuK <Ku6epXBOCTuK@gmail.com>
Date: Wed, 24 Jun 2026 07:01:53 +0500
Subject: [PATCH] fix: update load bg file flow

---
 index.html |  2 +-
 js/ui.js   | 37 +++++++++++++++++++++++++++++++++++--
 style.css  | 37 +++++++++++++++++++++++++++++++++++++
 3 files changed, 73 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 55690f6..d38fb0f 100644
--- a/index.html
+++ b/index.html
@@ -77,7 +77,7 @@
           </div>
         </div>
 
-        <div class="panel">
+        <div class="panel" id="bgPanel">
           <h2>Background</h2>
           <div class="bg-controls">
             <input type="file" id="bgFileInput" accept="image/*" hidden />
diff --git a/js/ui.js b/js/ui.js
index 897de1c..a05e236 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -217,16 +217,49 @@ export function initUI(state, updateAll) {
   });
 
   const lc = document.querySelector('.left-col');
+
+  document.addEventListener('dragover', (e) => {
+    e.preventDefault();
+    document.body.classList.add('file-dragging');
+  });
+
+  document.addEventListener('drop', () => {
+    document.body.classList.remove('file-dragging');
+    lc.classList.remove('drag-over');
+  });
+
   lc.addEventListener('dragover', (e) => {
     e.preventDefault();
     lc.classList.add('drag-over');
   });
-  lc.addEventListener('dragleave', () => {
-    lc.classList.remove('drag-over');
+
+  lc.addEventListener('dragleave', (e) => {
+    if (!lc.contains(e.relatedTarget)) {
+      lc.classList.remove('drag-over');
+    }
   });
+
   lc.addEventListener('drop', (e) => {
     e.preventDefault();
+    document.body.classList.remove('file-dragging');
     lc.classList.remove('drag-over');
     if (e.dataTransfer.files[0]) loadBgFile(e.dataTransfer.files[0], state);
   });
+
+  const bp = $('bgPanel');
+  bp.addEventListener('dragover', (e) => {
+    e.preventDefault();
+    bp.classList.add('drag-over');
+  });
+  bp.addEventListener('dragleave', (e) => {
+    if (!bp.contains(e.relatedTarget)) {
+      bp.classList.remove('drag-over');
+    }
+  });
+  bp.addEventListener('drop', (e) => {
+    e.preventDefault();
+    document.body.classList.remove('file-dragging');
+    bp.classList.remove('drag-over');
+    if (e.dataTransfer.files[0]) loadBgFile(e.dataTransfer.files[0], state);
+  });
 }
diff --git a/style.css b/style.css
index 376e05a..ea9552c 100644
--- a/style.css
+++ b/style.css
@@ -142,6 +142,10 @@ main {
   touch-action: none;
 }
 
+#svg image {
+  transition: opacity 0.15s;
+}
+
 .corner-circle {
   cursor: grab;
   filter: drop-shadow(0 0 4px rgba(88, 166, 255, 0.5));
@@ -454,6 +458,39 @@ main {
   background-color: #0c1018;
   background-repeat: no-repeat;
   background-position: center;
+  transition: opacity 0.15s;
+}
+
+body.file-dragging #field {
+  opacity: 0.1;
+}
+
+body.file-dragging #svg image {
+  opacity: 0.1;
+}
+
+body.file-dragging .left-col {
+  outline: 3px dashed rgba(88, 166, 255, 0.9);
+  outline-offset: -3px;
+  border-radius: 8px;
+}
+
+body.file-dragging .left-col.drag-over {
+  outline: 5px dashed var(--accent);
+  outline-offset: -5px;
+  border-radius: 8px;
+  background: rgba(88, 166, 255, 0.15);
+}
+
+body.file-dragging #bgPanel {
+  outline: 2px dashed rgba(88, 166, 255, 0.7);
+  outline-offset: -2px;
+}
+
+body.file-dragging #bgPanel.drag-over {
+  outline: 3px dashed var(--accent);
+  outline-offset: -3px;
+  background: rgba(88, 166, 255, 0.08);
 }
 
 #widget {