From dc05c90cc409450242a3d148448d9fafdb76b89b Mon Sep 17 00:00:00 2001
From: Matt Hills <mattintech@gmail.com>
Date: Sat, 27 Dec 2025 14:47:37 -0500
Subject: [PATCH] Replace browser confirm dialog with custom modal

Add custom confirmation modal for file deletion with smooth animations and backdrop blur. Improves UI consistency and provides better user experience than default browser dialogs.
---
 src/templates/index.html | 132 ++++++++++++++++++++++++++++++++++++++-
 1 file changed, 130 insertions(+), 2 deletions(-)

diff --git a/src/templates/index.html b/src/templates/index.html
index ff3472b..dc22059 100644
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -180,6 +180,87 @@
             color: #718096;
             opacity: 0.8;
         }
+
+        .modal-overlay {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.5);
+            backdrop-filter: blur(4px);
+            z-index: 1000;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .modal-overlay.active {
+            display: flex;
+        }
+
+        .modal {
+            background: white;
+            border-radius: 1rem;
+            padding: 2rem;
+            max-width: 400px;
+            width: 90%;
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+            animation: modalSlideIn 0.3s ease-out;
+        }
+
+        @keyframes modalSlideIn {
+            from {
+                opacity: 0;
+                transform: translateY(-20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .modal h2 {
+            color: #2d3748;
+            font-size: 1.5rem;
+            margin-bottom: 1rem;
+            font-weight: 600;
+        }
+
+        .modal p {
+            color: #4a5568;
+            font-size: 1rem;
+            margin-bottom: 1.5rem;
+            line-height: 1.5;
+        }
+
+        .modal-buttons {
+            display: flex;
+            gap: 0.75rem;
+            justify-content: flex-end;
+        }
+
+        .modal-buttons button {
+            padding: 0.625rem 1.5rem;
+            font-size: 0.95rem;
+        }
+
+        .modal-cancel {
+            background-color: #e2e8f0;
+            color: #2d3748;
+        }
+
+        .modal-cancel:hover {
+            background-color: #cbd5e0;
+        }
+
+        .modal-confirm {
+            background-color: #e53e3e;
+        }
+
+        .modal-confirm:hover {
+            background-color: #c53030;
+        }
     </style>
     <script>
         document.addEventListener('DOMContentLoaded', () => {
@@ -189,6 +270,9 @@
             const deleteButton = document.querySelector('.delete-button');
             const spinner = document.querySelector('.spinner');
             const message = document.querySelector('.message');
+            const deleteModal = document.getElementById('deleteModal');
+            const modalCancel = document.getElementById('modalCancel');
+            const modalConfirm = document.getElementById('modalConfirm');
 
             const showMessage = (text, type) => {
                 message.textContent = text;
@@ -199,6 +283,38 @@
                 }, 5000);
             };
 
+            const showDeleteModal = () => {
+                return new Promise((resolve) => {
+                    deleteModal.classList.add('active');
+
+                    const handleConfirm = () => {
+                        deleteModal.classList.remove('active');
+                        modalConfirm.removeEventListener('click', handleConfirm);
+                        modalCancel.removeEventListener('click', handleCancel);
+                        deleteModal.removeEventListener('click', handleOverlayClick);
+                        resolve(true);
+                    };
+
+                    const handleCancel = () => {
+                        deleteModal.classList.remove('active');
+                        modalConfirm.removeEventListener('click', handleConfirm);
+                        modalCancel.removeEventListener('click', handleCancel);
+                        deleteModal.removeEventListener('click', handleOverlayClick);
+                        resolve(false);
+                    };
+
+                    const handleOverlayClick = (e) => {
+                        if (e.target === deleteModal) {
+                            handleCancel();
+                        }
+                    };
+
+                    modalConfirm.addEventListener('click', handleConfirm);
+                    modalCancel.addEventListener('click', handleCancel);
+                    deleteModal.addEventListener('click', handleOverlayClick);
+                });
+            };
+
             inputs.forEach((input, index) => {
                 input.addEventListener('input', (e) => {
                     const value = e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, '');
@@ -237,13 +353,14 @@
             deleteButton.addEventListener('click', async (e) => {
                 e.preventDefault();
                 const code = Array.from(inputs).map(input => input.value).join('');
-                
+
                 if (code.length !== 6) {
                     showMessage('Please enter a valid 6-character code.', 'error');
                     return;
                 }
 
-                if (!confirm('Are you sure you want to delete this file? This action cannot be undone.')) {
+                const confirmed = await showDeleteModal();
+                if (!confirmed) {
                     return;
                 }
 
@@ -351,5 +468,16 @@
         </form>
     </div>
     <div class="version">v{{ version }}</div>
+
+    <div class="modal-overlay" id="deleteModal">
+        <div class="modal">
+            <h2>Delete File</h2>
+            <p>Are you sure you want to delete this file? This action cannot be undone.</p>
+            <div class="modal-buttons">
+                <button type="button" class="modal-cancel" id="modalCancel">Cancel</button>
+                <button type="button" class="modal-confirm" id="modalConfirm">Delete</button>
+            </div>
+        </div>
+    </div>
 </body>
 </html>
\ No newline at end of file