Update templates/create_db.html

templates/create_db.html

@@ -2,7 +2,6 @@
 
 {% block content %}
 <style>
-    /* Ensure the body takes full height for proper layout */
     html, body {
         height: 100%;
         margin: 0;
@@ -11,8 +10,8 @@
     .container {
         display: flex;
         flex-direction: column;
-        height: 50vh; /* Full height of the viewport */
-        overflow: hidden; /* Prevent extra scrollbars */
+        height: 50vh;
+        overflow: hidden;
     }
 
     .card {
@@ -20,9 +19,9 @@
         background-color: #2c2c3e;
         color: #f5f5f5;
         border: none;
-        width: 50%; /* Centered and appropriately sized */
-        max-height: calc(50vh - 50px); /* Adjust to fit within view */
-        overflow-y: auto; /* Add scrolling if content overflows */
+        width: 50%;
+        max-height: calc(50vh - 50px);
+        overflow-y: auto;
     }
 
     .card-header {
@@ -30,14 +29,9 @@
         border-bottom: 2px solid #444;
         padding: 1rem;
         text-align: center;
-        position: sticky; /* Keeps header fixed */
+        position: sticky;
         top: 0;
-        z-index: 1000; /* Ensures it stays above scrollable content */
-    }
-
-    .text-muted {
-        --bs-text-opacity: 1;
-        color: rgb(121 136 151 / 75%) !important;
+        z-index: 1000;
     }
 
     .form-label {
@@ -64,7 +58,6 @@
         display: flex;
         justify-content: center;
         align-items: center;
-        position: relative;
     }
 
     .btn-primary:hover {
@@ -72,33 +65,42 @@
         border-color: #3838e8;
     }
 
-    /* Loader on the button */
-    .button-spinner {
-        display: none; /* Hidden by default */
-        width: 20px;
-        height: 20px;
-        border: 3px solid #f3f3f3;
-        border-top: 3px solid #ffffff;
-        border-radius: 50%;
-        animation: spin 1s linear infinite;
-        margin-left: 10px; /* Space between button text and loader */
+    .toggle-switch {
+        margin: 1rem 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .toggle-switch input {
+        display: none;
+    }
+
+    .toggle-label {
+        background-color: #444;
+        color: #cfcfcf;
+        padding: 0.5rem 1.5rem;
+        border: 1px solid #555;
+        cursor: pointer;
+        margin-right: 1rem;
+        text-align: center;
+        border-radius: 4px;
     }
 
-    .btn-loading .button-spinner {
-        display: inline-block; /* Show spinner when loading */
+    .toggle-label.active {
+        background-color: #4c4cff;
+        color: #fff;
     }
 
-    @keyframes spin {
-        0% {
-            transform: rotate(0deg);
-        }
-        100% {
-            transform: rotate(360deg);
-        }
+    .hidden {
+        display: none;
     }
 
-    .btn-loading .btn-text {
-        opacity: 0.5; /* Dim button text when loading */
+    .text-center.d-flex {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100px; /* Optional: Add height if needed to ensure vertical alignment */
     }
 </style>
 
@@ -114,34 +116,59 @@
                     <label for="db_name" class="form-label">Database Name</label>
                     <input type="text" id="db_name" name="db_name" class="form-control" placeholder="Enter database name" required>
                 </div>
-            
+
+                <!-- Toggle Upload Mode -->
+                <div class="toggle-switch">
+                    <label class="toggle-label active" id="folder-label" for="upload-folder">Upload Folder</label>
+                    <label class="toggle-label" id="file-label" for="upload-file">Upload Files</label>
+                </div>
+
                 <!-- Folder Upload Input -->
-                <div class="form-group mt-3">
+                <div id="folder-upload" class="form-group mt-3">
                     <label for="folder" class="form-label">Upload Folder</label>
-                    <input type="file" id="folder" name="folder" class="form-control" webkitdirectory directory multiple required>
-                    <small class="text-muted">Note: You can upload folder having your documents.</small>
+                    <input type="file" id="folder" name="folder" class="form-control" webkitdirectory directory multiple>
+                    <small class="text-muted">Note: You can upload a folder containing multiple files.</small>
+                </div>
+
+                <!-- Single File Upload Input -->
+                <div id="file-upload" class="form-group mt-3 hidden">
+                    <label for="file" class="form-label">Upload Files</label>
+                    <input type="file" id="file" name="file" class="form-control" multiple>
+                    <small class="text-muted">Note: You can upload one or more files.</small>
                 </div>
-            
+
                 <!-- Submit Button -->
-                <div class="mt-4 text-center">
+                <div class="mt-4 text-center d-flex justify-content-center align-items-center">
                     <button type="submit" class="btn btn-primary px-5">
                         <span class="btn-text">Create</span>
                         <div class="button-spinner"></div>
                     </button>
                 </div>
+                
             </form>
         </div>
     </div>
 </div>
 
 <script>
-    // Show loader on button click
-    const form = document.getElementById('db-form');
-    const submitButton = document.querySelector('.btn-primary');
+    const folderLabel = document.getElementById('folder-label');
+    const fileLabel = document.getElementById('file-label');
+    const folderUpload = document.getElementById('folder-upload');
+    const fileUpload = document.getElementById('file-upload');
+
+    // Toggle upload mode
+    folderLabel.addEventListener('click', () => {
+        folderLabel.classList.add('active');
+        fileLabel.classList.remove('active');
+        folderUpload.classList.remove('hidden');
+        fileUpload.classList.add('hidden');
+    });
 
-    form.addEventListener('submit', function (event) {
-        submitButton.classList.add('btn-loading'); // Add loading class
-        submitButton.disabled = true; // Disable button to prevent multiple clicks
+    fileLabel.addEventListener('click', () => {
+        fileLabel.classList.add('active');
+        folderLabel.classList.remove('active');
+        fileUpload.classList.remove('hidden');
+        folderUpload.classList.add('hidden');
     });
 </script>