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,13 +1,52 @@
-// Lazy loading for gallery images using Intersection Observer
-let currentOffset = 20; // Initial load was 20 items
-let isLoading = false;
-let hasMore = true;
+// 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');
 
-// Create intersection observer for lazy loading
-const loadingElement = document.getElementById('loading');
-const galleryElement = document.getElementById('gallery');
+    if (addFilesBtn && uploadFormCard) {
+        addFilesBtn.addEventListener('click', () => {
+            uploadFormCard.style.display = 'block';
+            addFilesBtn.classList.add('active');
+        });
 
-if (loadingElement && galleryElement) {
+        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;
+    let hasMore = true;
+
+    // Create intersection observer for lazy loading
+    const loadingElement = document.getElementById('loading');
+    const galleryElement = document.getElementById('gallery');
+
+    if (loadingElement && galleryElement) {
         const observer = new IntersectionObserver((entries) => {
             entries.forEach(entry => {
                 if (entry.isIntersecting && !isLoading && hasMore) {
@@ -19,9 +58,9 @@ if (loadingElement && galleryElement) {
         });
 
         observer.observe(loadingElement);
-}
+    }
 
-async function loadMoreImages() {
+    async function loadMoreImages() {
         if (isLoading || !hasMore) return;
 
         isLoading = true;
@@ -58,9 +97,9 @@ async function loadMoreImages() {
                 loadingElement.style.display = 'none';
             }
         }
-}
+    }
 
-function createGalleryItem(media) {
+    function createGalleryItem(media) {
         const item = document.createElement('div');
         item.className = 'gallery-item';
         item.setAttribute('data-media-id', media.id);
@@ -121,17 +160,17 @@ function createGalleryItem(media) {
         item.appendChild(info);
 
         return item;
-}
+    }
 
-// Optional: Add image preview on click
-galleryElement?.addEventListener('click', (e) => {
+    // Optional: Add image preview on click
+    galleryElement?.addEventListener('click', (e) => {
         if (e.target.tagName === 'IMG') {
             const modal = createImageModal(e.target.src);
             document.body.appendChild(modal);
         }
-});
+    });
 
-function createImageModal(imageSrc) {
+    function createImageModal(imageSrc) {
         const modal = document.createElement('div');
         modal.className = 'image-modal';
         modal.innerHTML = `
@@ -151,4 +190,5 @@ function createImageModal(imageSrc) {
         });
 
         return modal;
-}
+    }
+}); // End of DOMContentLoaded