Move file addition to modal

Media.JoshHeaps.Net/Pages/Index.cshtml

@@ -29,8 +29,11 @@
         </div>
     </div>
 
-    <div class="card">
+    <div class="card" id="upload-form-card" style="display:none;">
+        <div class="upload-form-header">
             <h2>Upload Image</h2>
+            <button type="button" class="close-upload-form" id="close-upload-btn">&times;</button>
+        </div>
         @if (!string.IsNullOrEmpty(Model.UploadMessage))
         {
             <div class="alert @(Model.UploadSuccess ? "alert-success" : "alert-error")">
@@ -79,6 +82,11 @@
     </div>
 </div>
 
+<!-- Floating Add Files Button -->
+<button type="button" class="floating-add-btn" id="add-files-btn" title="Add Files">
+    <span class="btn-icon">+</span>
+</button>
+
 @section Scripts {
     <script src="~/js/gallery.js" asp-append-version="true"></script>
 }

Media.JoshHeaps.Net/wwwroot/css/gallery.css

@@ -1,3 +1,78 @@
+/* Floating Add Files Button */
+.floating-add-btn {
+    position: fixed;
+    bottom: 30px;
+    right: 30px;
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border: none;
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+    cursor: pointer;
+    z-index: 1000;
+    transition: transform 0.2s, box-shadow 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 32px;
+    line-height: 1;
+}
+
+.floating-add-btn:hover {
+    transform: scale(1.1);
+    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.6);
+}
+
+.floating-add-btn:active {
+    transform: scale(0.95);
+}
+
+.floating-add-btn .btn-icon {
+    transition: transform 0.3s;
+}
+
+.floating-add-btn.active .btn-icon {
+    transform: rotate(45deg);
+}
+
+/* Upload Form Styles */
+#upload-form-card {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1001;
+    max-width: 500px;
+    width: 90%;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+
+.upload-form-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 15px;
+}
+
+.close-upload-form {
+    background: transparent;
+    border: none;
+    font-size: 32px;
+    color: #999;
+    cursor: pointer;
+    padding: 0;
+    width: 32px;
+    height: 32px;
+    line-height: 1;
+    transition: color 0.2s;
+}
+
+.close-upload-form:hover {
+    color: #333;
+}
+
 /* Gallery Grid Layout */
 .gallery-grid {
     display: grid;

Media.JoshHeaps.Net/wwwroot/js/gallery.js

@@ -1,3 +1,42 @@
+// Wait for DOM to be fully loaded
+document.addEventListener('DOMContentLoaded', function() {
+    // Upload form toggle functionality
+    const addFilesBtn = document.getElementById('add-files-btn');
+    const uploadFormCard = document.getElementById('upload-form-card');
+    const closeUploadBtn = document.getElementById('close-upload-btn');
+
+    if (addFilesBtn && uploadFormCard) {
+        addFilesBtn.addEventListener('click', () => {
+            uploadFormCard.style.display = 'block';
+            addFilesBtn.classList.add('active');
+        });
+
+        if (closeUploadBtn) {
+            closeUploadBtn.addEventListener('click', () => {
+                uploadFormCard.style.display = 'none';
+                addFilesBtn.classList.remove('active');
+            });
+        }
+
+        // Close on Escape key
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape' && uploadFormCard.style.display === 'block') {
+                uploadFormCard.style.display = 'none';
+                addFilesBtn.classList.remove('active');
+            }
+        });
+
+        // Close when clicking outside the form
+        document.addEventListener('click', (e) => {
+            if (uploadFormCard.style.display === 'block' &&
+                !uploadFormCard.contains(e.target) &&
+                !addFilesBtn.contains(e.target)) {
+                uploadFormCard.style.display = 'none';
+                addFilesBtn.classList.remove('active');
+            }
+        });
+    }
+
     // Lazy loading for gallery images using Intersection Observer
     let currentOffset = 20; // Initial load was 20 items
     let isLoading = false;
@@ -152,3 +191,4 @@ function createImageModal(imageSrc) {
 
         return modal;
     }
+}); // End of DOMContentLoaded