Update templates/upload.html

templates/upload.html

@@ -4,146 +4,329 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Upload Database</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
   <style>
-    /* Overall dark theme background */
-    body {
-      background-color: #1a1a2e;
-      color: #eaeaea;
-      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    :root {
+      --primary: #10a37f;
+      --primary-dark: #0d8a6a;
+      --bg-color: #343541;
+      --chat-bg: #444654;
+      --user-bg: #343541;
+      --text-color: #ececf1;
+      --text-secondary: #acacbe;
+      --border-color: #565869;
+      --error-color: #ef4146;
+      --warning-color: #f0b72f;
+    }
+
+    * {
+      box-sizing: border-box;
       margin: 0;
       padding: 0;
     }
-    .container {
-      max-width: 800px;
-      margin: 0 auto;
-      padding: 20px;
+
+    body {
+      background-color: var(--bg-color);
+      color: var(--text-color);
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+      display: flex;
+      flex-direction: column;
+      min-height: 100vh;
     }
-    header {
+
+    nav {
+      background-color: var(--user-bg);
+      padding: 12px 20px;
+      border-bottom: 1px solid var(--border-color);
       display: flex;
       justify-content: space-between;
       align-items: center;
-      margin-bottom: 20px;
     }
-    h1 {
-      margin-bottom: 20px;
-      color: #eaeaea;
+
+    .nav-title {
+      font-size: 1.2rem;
+      font-weight: 600;
     }
-    .upload-btn, .back-btn {
-      background-color: #007bff;
-      color: #fff;
+
+    .btn {
+      background-color: var(--primary);
+      color: white;
+      border: none;
+      border-radius: 4px;
       padding: 8px 12px;
+      font-size: 0.9rem;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      transition: background-color 0.2s;
       text-decoration: none;
-      border-radius: 5px;
     }
-    .upload-btn:hover, .back-btn:hover {
-      background-color: #0056b3;
+
+    .btn:hover {
+      background-color: var(--primary-dark);
+    }
+
+    main {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 40px 20px;
     }
-    /* Form container styling */
-    .form-container {
-      background-color: #16213e;
+
+    .upload-container {
+      max-width: 600px;
+      width: 100%;
+      background-color: var(--chat-bg);
       border-radius: 8px;
-      padding: 20px;
+      padding: 30px;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
     }
-    .form-container h2 {
-      margin-top: 0;
+
+    .upload-header {
+      margin-bottom: 24px;
+      text-align: center;
+    }
+
+    .upload-header h1 {
+      font-size: 1.5rem;
+      margin-bottom: 8px;
     }
-    /* Form elements styling */
+
+    .upload-header p {
+      color: var(--text-secondary);
+      font-size: 0.9rem;
+    }
+
+    .upload-icon {
+      font-size: 2.5rem;
+      color: var(--primary);
+      margin-bottom: 16px;
+    }
+
     .form-group {
-      margin-bottom: 15px;
+      margin-bottom: 20px;
     }
+
     .form-group label {
       display: block;
-      margin-bottom: 5px;
+      margin-bottom: 8px;
+      font-size: 0.9rem;
+      color: var(--text-secondary);
     }
-    .form-group input[type="file"] {
-      display: block;
-      padding: 8px;
-      border-radius: 5px;
-      border: 1px solid #ccc;
-      width: 100%;
-      background-color: #eaeaea;
-      color: #333;
+
+    .file-input-wrapper {
+      position: relative;
+      margin-bottom: 20px;
     }
-    .form-group button {
-      background-color: #007bff;
-      color: #fff;
-      padding: 10px 20px;
-      border: none;
-      border-radius: 5px;
+
+    .file-input-label {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 40px 20px;
+      border: 2px dashed var(--border-color);
+      border-radius: 8px;
       cursor: pointer;
-      font-size: 1rem;
+      transition: all 0.2s;
+      text-align: center;
+    }
+
+    .file-input-label:hover {
+      border-color: var(--primary);
+      background-color: rgba(16, 163, 127, 0.05);
     }
-    .form-group button:hover {
-      background-color: #0056b3;
+
+    .file-input-label i {
+      font-size: 2rem;
+      color: var(--primary);
+      margin-bottom: 12px;
     }
 
-    .alert {
-        padding: 10px;
-        margin-bottom: 10px;
-        border-radius: 5px;
-        text-align: center;
-        position: absolute;
-        position-area: top center;
-        top: 30px;
-        align-items: center;
+    .file-input-label span {
+      font-size: 0.9rem;
+      color: var(--text-secondary);
     }
 
-    .alert-error {
-        background-color: #D84040;
-        color: #ffffff;
+    .file-input-label strong {
+      color: var(--primary);
+      font-weight: 600;
+    }
+
+    .file-input {
+      position: absolute;
+      width: 0.1px;
+      height: 0.1px;
+      opacity: 0;
+      overflow: hidden;
+      z-index: -1;
+    }
+
+    .file-name {
+      margin-top: 8px;
+      font-size: 0.9rem;
+      color: var(--text-color);
+      display: none;
+    }
+
+    .submit-btn {
+      width: 100%;
+      padding: 12px;
+      font-size: 1rem;
+      font-weight: 500;
+    }
+
+    .submit-btn:disabled {
+      background-color: var(--border-color);
+      cursor: not-allowed;
+    }
+
+    .alert {
+      position: fixed;
+      top: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      padding: 12px 20px;
+      border-radius: 8px;
+      background-color: var(--error-color);
+      color: white;
+      z-index: 1000;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+      animation: slideIn 0.3s ease-out;
     }
 
     .alert-success {
-        background-color: #D2DE32;
-        color: #ffffff;
+      background-color: var(--primary);
     }
 
     .alert-warning {
-        background-color: #FFC700;
-        color: #ffffff;
+      background-color: var(--warning-color);
+    }
+
+    @keyframes slideIn {
+      from { top: -50px; opacity: 0; }
+      to { top: 20px; opacity: 1; }
+    }
+
+    footer {
+      background-color: var(--user-bg);
+      padding: 12px 20px;
+      border-top: 1px solid var(--border-color);
+      font-size: 0.8rem;
+      color: var(--text-secondary);
+      text-align: center;
     }
-            
   </style>
 </head>
 <body>
+  <nav>
+    <div class="nav-title">Agent Chat</div>
+    <a href="/" class="btn">
+      <i class="fas fa-arrow-left"></i> Back to Chat
+    </a>
+  </nav>
 
-  <div class="container-flash">
-      {% with messages = get_flashed_messages(with_categories=true) %}
-      {% if messages %}
-          <div id="flash-message" class="alert alert-{{ messages[0][0] }}">
-              <strong>{{ messages[0][1] }}</strong>
-          </div>
-      {% endif %}
-  {% endwith %}
-  </div>
-  
-  <div class="container">
-    <header>
-      <h1>Upload Database</h1>
-      <!-- Optional: Back link to main chat page -->
-      <a href="/" class="back-btn">Back to Chat</a>
-    </header>
-    <div class="form-container">
-      <h2>Upload a SQLite DB file</h2>
-      <form method="POST" action="/upload" enctype="multipart/form-data">
+  <main>
+    <div class="upload-container">
+      <div class="upload-header">
+        <div class="upload-icon">
+          <i class="fas fa-database"></i>
+        </div>
+        <h1>Upload Database</h1>
+        <p>Select a SQLite database file to upload (.db extension)</p>
+      </div>
+
+      <form method="POST" action="/upload" enctype="multipart/form-data" id="uploadForm">
         <div class="form-group">
-          <label for="dbFile">Choose file:</label>
-          <input type="file" id="dbFile" name="file" accept=".db" required>
+          <div class="file-input-wrapper">
+            <input type="file" id="dbFile" name="file" accept=".db" class="file-input" required>
+            <label for="dbFile" class="file-input-label" id="fileInputLabel">
+              <i class="fas fa-cloud-upload-alt"></i>
+              <span>Drag & drop your file here or <strong>browse</strong></span>
+              <span class="file-name" id="fileName"></span>
+            </label>
+          </div>
         </div>
         <div class="form-group">
-          <button type="submit">Upload</button>
+          <button type="submit" class="btn submit-btn" id="submitBtn" disabled>
+            <i class="fas fa-upload"></i> Upload Database
+          </button>
         </div>
       </form>
     </div>
-  </div>
-</body>
+  </main>
+
+  <footer>
+    <div>Agent Chat v1.0 · © 2023</div>
+  </footer>
+
+  <div id="flash-message" class="alert" style="display: none;"></div>
+
   <script>
+    const fileInput = document.getElementById('dbFile');
+    const fileInputLabel = document.getElementById('fileInputLabel');
+    const fileName = document.getElementById('fileName');
+    const submitBtn = document.getElementById('submitBtn');
+    const uploadForm = document.getElementById('uploadForm');
     const flashMessage = document.getElementById('flash-message');
-    //for flash message
-        if (flashMessage) {
-            setTimeout(function() {
-                flashMessage.style.display = 'none';
-            }, 2000); // Hide after 2 seconds
-        }
+
+    // Handle file selection
+    fileInput.addEventListener('change', function() {
+      if (this.files.length > 0) {
+        const file = this.files[0];
+        fileName.textContent = file.name;
+        fileName.style.display = 'block';
+        submitBtn.disabled = false;
+        
+        // Update label text
+        fileInputLabel.querySelector('span').textContent = 'Selected file:';
+        fileInputLabel.querySelector('i').className = 'fas fa-check-circle';
+        fileInputLabel.querySelector('i').style.color = 'var(--primary)';
+      } else {
+        fileName.style.display = 'none';
+        submitBtn.disabled = true;
+        
+        // Reset label text
+        fileInputLabel.querySelector('span').textContent = 'Drag & drop your file here or <strong>browse</strong>';
+        fileInputLabel.querySelector('i').className = 'fas fa-cloud-upload-alt';
+      }
+    });
+
+    // Handle drag and drop
+    fileInputLabel.addEventListener('dragover', (e) => {
+      e.preventDefault();
+      fileInputLabel.style.borderColor = 'var(--primary)';
+      fileInputLabel.style.backgroundColor = 'rgba(16, 163, 127, 0.1)';
+    });
+
+    fileInputLabel.addEventListener('dragleave', () => {
+      fileInputLabel.style.borderColor = 'var(--border-color)';
+      fileInputLabel.style.backgroundColor = 'transparent';
+    });
+
+    fileInputLabel.addEventListener('drop', (e) => {
+      e.preventDefault();
+      fileInputLabel.style.borderColor = 'var(--border-color)';
+      fileInputLabel.style.backgroundColor = 'transparent';
+      
+      if (e.dataTransfer.files.length) {
+        fileInput.files = e.dataTransfer.files;
+        const event = new Event('change');
+        fileInput.dispatchEvent(event);
+      }
+    });
+
+    // Handle flash messages
+    if (flashMessage) {
+      setTimeout(() => {
+        flashMessage.style.display = 'none';
+      }, 3000);
+    }
   </script>
+</body>
 </html>