Merge pull request #1 from JoshHeaps/feature/deletePictures

Feature/delete pictures

.claude/settings.local.json

@@ -4,7 +4,8 @@
       "Bash(dotnet build)",
       "Bash(dotnet run:*)",
       "Bash(powershell:*)",
-      "Bash(dotnet script:*)"
+      "Bash(dotnet script:*)",
+      "Bash(taskkill:*)"
     ],
     "deny": [],
     "ask": []

Media.JoshHeaps.Net/Pages/Index.cshtml

@@ -1,4 +1,4 @@
-@page
+@page "{handler?}"
 @model Media.JoshHeaps.Net.Pages.IndexModel
 @{
     ViewData["Title"] = "Dashboard";
@@ -13,11 +13,6 @@
 <div class="dashboard-container">
     <div class="welcome-section">
         <h1>Welcome back, @Model.Dashboard?.Username!</h1>
-        <p>Here's your account overview</p>
-    </div>
-
-    <div class="card">
-        <h2>Quick Actions</h2>
         <div class="quick-actions">
             @if (Model.Dashboard?.EmailVerified == false)
             {
@@ -25,29 +20,39 @@
                     Verify Email
                 </a>
             }
+            <a href="/Profile" class="btn btn-secondary">Edit Profile</a>
             <a href="/Logout" class="btn btn-danger">Logout</a>
         </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")">
                 @Model.UploadMessage
             </div>
         }
-        <form method="post" enctype="multipart/form-data">
+        <form method="post" enctype="multipart/form-data" id="upload-form">
             @Html.AntiForgeryToken()
             <div class="form-group">
-                <label for="UploadedFile">Select Image</label>
+                <label for="UploadedFile">Select Image(s)</label>
-                <input type="file" id="UploadedFile" name="UploadedFile" accept="image/*" required />
+                <input type="file" id="UploadedFile" name="UploadedFile" accept="image/*" multiple required />
             </div>
             <div class="form-group">
                 <label for="Description">Description (optional)</label>
-                <textarea id="Description" name="Description" rows="3" placeholder="Add a description..."></textarea>
+                <textarea id="Description" name="Description" rows="3" placeholder="Add a description for all images..."></textarea>
             </div>
-            <button type="submit" class="btn btn-primary">Upload</button>
+            <div id="upload-progress" style="display:none;">
+                <div class="progress-bar">
+                    <div class="progress-fill" id="progress-fill"></div>
+                </div>
+                <div class="progress-text" id="progress-text">Uploading...</div>
+            </div>
+            <button type="submit" class="btn btn-primary" id="upload-btn">Upload</button>
         </form>
     </div>
 
@@ -64,10 +69,10 @@
                     }
                     <div class="gallery-item-info">
                         <span class="gallery-item-date">@media.CreatedAt.ToString("MMM d, yyyy")</span>
-                        <form method="post" asp-page-handler="Delete" style="display:inline;">
+                        <form method="post" style="display:inline;">
                             @Html.AntiForgeryToken()
-                            <input type="hidden" name="mediaId" value="@media.Id" />
+                            <input type="hidden" name="MediaId" value="@media.Id" />
-                            <button type="submit" class="btn-delete" onclick="return confirm('Are you sure you want to delete this image?');">Delete</button>
+                            <button type="submit" class="btn-delete" onclick="return confirm('Are you sure you want to delete this image?');" asp-page-handler="Delete">Delete</button>
                         </form>
                     </div>
                 </div>
@@ -79,6 +84,12 @@
     </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>
+    <script src="~/js/upload.js" asp-append-version="true"></script>
 }

Media.JoshHeaps.Net/Pages/Index.cshtml.cs

@@ -17,6 +17,9 @@ namespace Media.JoshHeaps.Net.Pages
         [BindProperty]
         public string? Description { get; set; }
 
+        [BindProperty]
+        public long? MediaId { get; set; }
+
         public string? UploadMessage { get; set; }
         public bool UploadSuccess { get; set; }
 
@@ -39,6 +42,17 @@ namespace Media.JoshHeaps.Net.Pages
             RequireAuthentication();
             LoadUserSession();
 
+            Dashboard = await userService.GetUserDashboardAsync(UserId);
+            MediaItems = await _mediaService.GetUserMediaAsync(UserId, 0, 20);
+
+            return Page();
+        }
+
+        public async Task<IActionResult> OnPostAddAsync()
+        {
+            RequireAuthentication();
+            LoadUserSession();
+
             if (UploadedFile == null || UploadedFile.Length == 0)
             {
                 UploadMessage = "Please select a file to upload.";
@@ -69,19 +83,19 @@ namespace Media.JoshHeaps.Net.Pages
                 }
             }
 
-            // Reload data
+            // Redirect to prevent form resubmission on refresh
-            Dashboard = await userService.GetUserDashboardAsync(UserId);
+            return RedirectToPage();
-            MediaItems = await _mediaService.GetUserMediaAsync(UserId, 0, 20);
-
-            return Page();
         }
 
-        public async Task<IActionResult> OnPostDeleteAsync(long mediaId)
+        public async Task<IActionResult> OnPostDeleteAsync()
         {
             RequireAuthentication();
             LoadUserSession();
 
-            var success = await _mediaService.DeleteMediaAsync(mediaId, UserId);
+            if (MediaId.HasValue)
+            {
+                var success = await _mediaService.DeleteMediaAsync(MediaId.Value, UserId);
+            }
 
             return RedirectToPage();
         }

Media.JoshHeaps.Net/Pages/Profile.cshtml

@@ -0,0 +1,180 @@
+@page
+@model Media.JoshHeaps.Net.Pages.ProfileModel
+@{
+    ViewData["Title"] = "Profile Settings";
+    Layout = "_Layout";
+}
+
+@section Styles {
+    <link rel="stylesheet" href="~/css/Home/page.css" asp-append-version="true" />
+    <style>
+        .profile-container {
+            max-width: 800px;
+            margin: 40px auto;
+            padding: 0 20px;
+        }
+
+        .profile-section {
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-primary);
+            border-radius: 8px;
+            padding: 24px;
+            margin-bottom: 20px;
+        }
+
+        .profile-section h2 {
+            margin: 0 0 20px 0;
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            border-bottom: 1px solid var(--border-primary);
+            padding-bottom: 12px;
+        }
+
+        .profile-field {
+            margin-bottom: 16px;
+        }
+
+        .profile-field label {
+            display: block;
+            font-weight: 500;
+            color: var(--text-secondary);
+            margin-bottom: 4px;
+            font-size: 14px;
+        }
+
+        .profile-field-value {
+            color: var(--text-primary);
+            font-size: 15px;
+        }
+
+        .theme-toggle-container {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 12px 0;
+        }
+
+        .theme-toggle-label {
+            display: flex;
+            flex-direction: column;
+        }
+
+        .theme-toggle-label strong {
+            color: var(--text-primary);
+            font-size: 15px;
+            margin-bottom: 4px;
+        }
+
+        .theme-toggle-label span {
+            color: var(--text-secondary);
+            font-size: 13px;
+        }
+
+        .toggle-switch {
+            position: relative;
+            display: inline-block;
+            width: 50px;
+            height: 26px;
+        }
+
+        .toggle-switch input {
+            opacity: 0;
+            width: 0;
+            height: 0;
+        }
+
+        .toggle-slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: var(--bg-tertiary);
+            border: 1px solid var(--border-primary);
+            transition: 0.3s;
+            border-radius: 34px;
+        }
+
+        .toggle-slider:before {
+            position: absolute;
+            content: "";
+            height: 18px;
+            width: 18px;
+            left: 3px;
+            bottom: 3px;
+            background-color: var(--text-secondary);
+            transition: 0.3s;
+            border-radius: 50%;
+        }
+
+        input:checked + .toggle-slider {
+            background-color: var(--accent-primary);
+            border-color: var(--accent-primary);
+        }
+
+        input:checked + .toggle-slider:before {
+            transform: translateX(24px);
+            background-color: var(--bg-primary);
+        }
+
+        .back-link {
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            color: var(--accent-primary);
+            text-decoration: none;
+            font-size: 14px;
+            margin-bottom: 20px;
+            transition: color 0.2s ease;
+        }
+
+        .back-link:hover {
+            color: var(--accent-hover);
+        }
+    </style>
+}
+
+<div class="profile-container">
+    <a href="/" class="back-link">← Back to Dashboard</a>
+
+    <div class="profile-section">
+        <h2>Profile Information</h2>
+        <div class="profile-field">
+            <label>Username</label>
+            <div class="profile-field-value">@Model.Dashboard?.Username</div>
+        </div>
+        <div class="profile-field">
+            <label>Email</label>
+            <div class="profile-field-value">@Model.Dashboard?.Email</div>
+        </div>
+        <div class="profile-field">
+            <label>Email Status</label>
+            <div class="profile-field-value">
+                @if (Model.Dashboard?.EmailVerified == true)
+                {
+                    <span class="status-badge status-verified">Verified</span>
+                }
+                else
+                {
+                    <span class="status-badge status-unverified">Unverified</span>
+                }
+            </div>
+        </div>
+    </div>
+
+    <div class="profile-section">
+        <h2>Appearance</h2>
+        <div class="theme-toggle-container">
+            <div class="theme-toggle-label">
+                <strong>Dark Mode</strong>
+                <span>Enable dark theme across the application</span>
+            </div>
+            <label class="toggle-switch">
+                <input type="checkbox" id="theme-toggle" />
+                <span class="toggle-slider"></span>
+            </label>
+        </div>
+    </div>
+</div>

Media.JoshHeaps.Net/Pages/Profile.cshtml.cs

@@ -0,0 +1,22 @@
+using Media.JoshHeaps.Net.Models;
+using Media.JoshHeaps.Net.Services;
+using Microsoft.AspNetCore.Mvc;
+
+namespace Media.JoshHeaps.Net.Pages
+{
+    public class ProfileModel(UserService userService) : AuthenticatedPageModel
+    {
+        public UserDashboard? Dashboard { get; set; }
+
+        public async Task<IActionResult> OnGetAsync()
+        {
+            RequireAuthentication();
+            LoadUserSession();
+
+            // Load user dashboard data
+            Dashboard = await userService.GetUserDashboardAsync(UserId);
+
+            return Page();
+        }
+    }
+}

Media.JoshHeaps.Net/Pages/Shared/_Layout.cshtml

@@ -9,6 +9,8 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>@ViewData["Title"]</title>
+    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
+    <script src="~/js/theme.js" asp-append-version="true"></script>
     @await RenderSectionAsync("Styles", required: false)
     @await RenderSectionAsync("Scripts", required: false)
     <script src="~/lib/jquery/dist/jquery.min.js"></script>

Media.JoshHeaps.Net/Pages/_ViewImports.cshtml

@@ -0,0 +1,4 @@
+@using Media.JoshHeaps.Net
+@using Media.JoshHeaps.Net.Pages
+@namespace Media.JoshHeaps.Net.Pages
+@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Media.JoshHeaps.Net/appsettings.json

@@ -19,8 +19,5 @@
     "MaxFileSizeMB": 10,
     "AllowedImageTypes": ["image/jpeg", "image/png", "image/gif", "image/webp"],
     "UploadPath": "App_Data/media"
-  },
-  "Encryption": {
-    "Key": "***REMOVED***"
   }
 }

Media.JoshHeaps.Net/wwwroot/css/Home/page.css

@@ -5,23 +5,27 @@
 }
 
 .welcome-section {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: var(--bg-tertiary);
-    color: white;
+    border: 1px solid var(--border-primary);
-    padding: 40px;
+    color: var(--text-primary);
-    border-radius: 12px;
+    padding: 32px 40px;
-    margin-bottom: 30px;
+    border-radius: 8px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    margin-bottom: 32px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 }
 
 .welcome-section h1 {
-    margin: 0 0 10px 0;
+    margin: 0;
-    font-size: 32px;
+    font-size: 28px;
     font-weight: 600;
+    letter-spacing: -0.5px;
 }
 
 .welcome-section p {
     margin: 0;
-    opacity: 0.9;
+    opacity: 0.8;
     font-size: 16px;
 }
 
@@ -33,26 +37,31 @@
 }
 
 .card {
-    background: white;
+    background: var(--bg-secondary);
-    border-radius: 12px;
+    border: 1px solid var(--border-primary);
-    padding: 30px;
+    border-radius: 8px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    padding: 24px;
+    transition: border-color 0.2s ease;
+}
+
+.card:hover {
+    border-color: var(--border-secondary);
 }
 
 .card h2 {
     margin: 0 0 20px 0;
-    font-size: 20px;
+    font-size: 18px;
     font-weight: 600;
-    color: #333;
+    color: var(--text-primary);
-    border-bottom: 2px solid #667eea;
+    border-bottom: 1px solid var(--border-primary);
-    padding-bottom: 10px;
+    padding-bottom: 12px;
 }
 
 .info-row {
     display: flex;
     justify-content: space-between;
     padding: 12px 0;
-    border-bottom: 1px solid #f0f0f0;
+    border-bottom: 1px solid var(--border-secondary);
 }
 
 .info-row:last-child {
@@ -61,78 +70,86 @@
 
 .info-label {
     font-weight: 500;
-    color: #666;
+    color: var(--text-secondary);
 }
 
 .info-value {
-    color: #333;
+    color: var(--text-primary);
     font-weight: 500;
 }
 
 .status-badge {
     display: inline-block;
     padding: 4px 12px;
-    border-radius: 12px;
+    border-radius: 6px;
     font-size: 12px;
     font-weight: 600;
 }
 
 .status-verified {
-    background: #d4edda;
+    background: rgba(63, 185, 80, 0.15);
-    color: #155724;
+    color: var(--success);
 }
 
 .status-unverified {
-    background: #fff3cd;
+    background: rgba(187, 128, 9, 0.15);
-    color: #856404;
+    color: #d29922;
 }
 
 .quick-actions {
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
-    margin-top: 20px;
+    align-content: space-evenly;
 }
 
 .btn {
-    padding: 10px 20px;
+    padding: 8px 16px;
     border-radius: 6px;
     text-decoration: none;
     font-weight: 500;
+    font-size: 14px;
     display: inline-block;
-    transition: all 0.2s;
+    transition: all 0.2s ease;
+    border: 1px solid transparent;
 }
 
 .btn-primary {
-    background: #667eea;
+    background: var(--accent-primary);
-    color: white;
+    color: var(--bg-primary);
+    border-color: var(--accent-primary);
 }
 
 .btn-primary:hover {
-    background: #5568d3;
+    background: var(--accent-hover);
+    border-color: var(--accent-hover);
 }
 
 .btn-secondary {
-    background: #6c757d;
+    background: var(--bg-tertiary);
-    color: white;
+    color: var(--text-primary);
+    border-color: var(--border-primary);
 }
 
 .btn-secondary:hover {
-    background: #5a6268;
+    background: var(--bg-hover);
+    border-color: var(--border-secondary);
 }
 
 .btn-danger {
-    background: #dc3545;
+    background: transparent;
-    color: white;
+    color: var(--danger);
+    border-color: var(--danger);
 }
 
 .btn-danger:hover {
-    background: #c82333;
+    background: var(--danger);
+    color: var(--text-primary);
 }
 
 .empty-state {
     text-align: center;
-    color: #999;
+    color: var(--text-secondary);
     padding: 20px;
     font-style: italic;
 }

Media.JoshHeaps.Net/wwwroot/css/auth.css

@@ -1,29 +1,19 @@
 /* Authentication Pages Styling */
 
-:root {
-    --primary-color: #007bff;
-    --primary-hover: #0056b3;
-    --danger-color: #dc3545;
-    --success-color: #28a745;
-    --warning-color: #ffc107;
-    --border-color: #dee2e6;
-    --input-focus: #80bdff;
-    --text-muted: #6c757d;
-}
-
 .auth-container {
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: var(--bg-primary);
     padding: 20px;
 }
 
 .auth-card {
-    background: white;
+    background: var(--bg-secondary);
-    border-radius: 12px;
+    border: 1px solid var(--border-primary);
-    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
     padding: 40px;
     width: 100%;
     max-width: 450px;
@@ -31,18 +21,19 @@
 
 .auth-header {
     text-align: center;
-    margin-bottom: 30px;
+    margin-bottom: 32px;
 }
 
 .auth-header h1 {
     font-size: 28px;
     font-weight: 600;
-    color: #333;
+    color: var(--text-primary);
-    margin-bottom: 10px;
+    margin-bottom: 8px;
+    letter-spacing: -0.5px;
 }
 
 .auth-header p {
-    color: var(--text-muted);
+    color: var(--text-secondary);
     font-size: 14px;
 }
 
@@ -52,7 +43,7 @@
 
 .form-label {
     font-weight: 500;
-    color: #333;
+    color: var(--text-primary);
     margin-bottom: 8px;
     display: block;
     font-size: 14px;
@@ -61,28 +52,30 @@
 .form-control {
     width: 100%;
     padding: 12px 16px;
-    border: 1px solid var(--border-color);
+    border: 1px solid var(--border-primary);
     border-radius: 6px;
     font-size: 14px;
-    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+    background: var(--bg-tertiary);
+    color: var(--text-primary);
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
 }
 
 .form-control:focus {
     outline: none;
-    border-color: var(--input-focus);
+    border-color: var(--accent-primary);
-    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
+    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15);
 }
 
 .form-control.is-invalid {
-    border-color: var(--danger-color);
+    border-color: var(--danger);
 }
 
 .form-control.is-invalid:focus {
-    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
+    box-shadow: 0 0 0 3px rgba(248, 81, 73, 0.15);
 }
 
 .invalid-feedback {
-    color: var(--danger-color);
+    color: var(--danger);
     font-size: 13px;
     margin-top: 5px;
     display: none;
@@ -103,20 +96,21 @@
     transform: translateY(-50%);
     background: none;
     border: none;
-    color: var(--text-muted);
+    color: var(--text-secondary);
     cursor: pointer;
     padding: 4px 8px;
     font-size: 14px;
+    transition: color 0.2s ease;
 }
 
 .password-toggle:hover {
-    color: #333;
+    color: var(--text-primary);
 }
 
 .password-strength {
     margin-top: 8px;
     height: 4px;
-    background: var(--border-color);
+    background: var(--bg-tertiary);
     border-radius: 2px;
     overflow: hidden;
     display: none;
@@ -133,17 +127,17 @@
 }
 
 .password-strength-bar.weak {
-    background-color: var(--danger-color);
+    background-color: var(--danger);
     width: 33%;
 }
 
 .password-strength-bar.medium {
-    background-color: var(--warning-color);
+    background-color: #d29922;
     width: 66%;
 }
 
 .password-strength-bar.strong {
-    background-color: var(--success-color);
+    background-color: var(--success);
     width: 100%;
 }
 
@@ -151,6 +145,7 @@
     font-size: 12px;
     margin-top: 4px;
     display: none;
+    color: var(--text-secondary);
 }
 
 .password-strength-text.active {
@@ -167,11 +162,13 @@
     margin-right: 8px;
     width: 16px;
     height: 16px;
+    accent-color: var(--accent-primary);
+    cursor: pointer;
 }
 
 .checkbox-wrapper label {
     font-size: 14px;
-    color: #333;
+    color: var(--text-primary);
     margin: 0;
     cursor: pointer;
 }
@@ -179,22 +176,25 @@
 .btn-primary {
     width: 100%;
     padding: 12px;
-    background: var(--primary-color);
+    background: var(--accent-primary);
-    color: white;
+    color: var(--bg-primary);
-    border: none;
+    border: 1px solid var(--accent-primary);
     border-radius: 6px;
-    font-size: 16px;
+    font-size: 15px;
     font-weight: 500;
     cursor: pointer;
-    transition: background-color 0.15s ease-in-out;
+    transition: all 0.2s ease;
 }
 
 .btn-primary:hover {
-    background: var(--primary-hover);
+    background: var(--accent-hover);
+    border-color: var(--accent-hover);
 }
 
 .btn-primary:disabled {
-    background: var(--text-muted);
+    background: var(--bg-tertiary);
+    border-color: var(--border-primary);
+    color: var(--text-secondary);
     cursor: not-allowed;
 }
 
@@ -202,22 +202,24 @@
     text-align: center;
     margin-top: 24px;
     padding-top: 24px;
-    border-top: 1px solid var(--border-color);
+    border-top: 1px solid var(--border-primary);
 }
 
 .auth-footer p {
-    color: var(--text-muted);
+    color: var(--text-secondary);
     font-size: 14px;
     margin: 0;
 }
 
 .auth-footer a {
-    color: var(--primary-color);
+    color: var(--accent-primary);
     text-decoration: none;
     font-weight: 500;
+    transition: color 0.2s ease;
 }
 
 .auth-footer a:hover {
+    color: var(--accent-hover);
     text-decoration: underline;
 }
 
@@ -229,29 +231,29 @@
 }
 
 .alert-danger {
-    background-color: #f8d7da;
+    background-color: rgba(248, 81, 73, 0.15);
-    color: #721c24;
+    color: var(--danger);
-    border: 1px solid #f5c6cb;
+    border: 1px solid rgba(248, 81, 73, 0.3);
 }
 
 .alert-success {
-    background-color: #d4edda;
+    background-color: rgba(63, 185, 80, 0.15);
-    color: #155724;
+    color: var(--success);
-    border: 1px solid #c3e6cb;
+    border: 1px solid rgba(63, 185, 80, 0.3);
 }
 
 .alert-warning {
-    background-color: #fff3cd;
+    background-color: rgba(187, 128, 9, 0.15);
-    color: #856404;
+    color: #d29922;
-    border: 1px solid #ffeaa7;
+    border: 1px solid rgba(187, 128, 9, 0.3);
 }
 
 .spinner {
     display: inline-block;
     width: 16px;
     height: 16px;
-    border: 2px solid rgba(255, 255, 255, 0.3);
+    border: 2px solid rgba(88, 166, 255, 0.3);
-    border-top-color: white;
+    border-top-color: var(--accent-primary);
     border-radius: 50%;
     animation: spin 0.6s linear infinite;
     margin-right: 8px;

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

@@ -1,23 +1,129 @@
+/* Floating Add Files Button */
+.floating-add-btn {
+    position: fixed;
+    bottom: 30px;
+    right: 30px;
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    background: var(--accent-primary);
+    color: var(--bg-primary);
+    border: 1px solid var(--accent-primary);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+    cursor: pointer;
+    z-index: 1000;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 28px;
+    line-height: 1;
+    font-weight: 300;
+}
+
+.floating-add-btn:hover {
+    transform: scale(1.05);
+    background: var(--accent-hover);
+    border-color: var(--accent-hover);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
+}
+
+.floating-add-btn:active {
+    transform: scale(0.98);
+}
+
+.floating-add-btn .btn-icon {
+    transition: transform 0.3s ease;
+}
+
+.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.6);
+}
+
+/* Upload Progress Bar */
+#upload-progress {
+    margin: 15px 0;
+}
+
+.progress-bar {
+    width: 100%;
+    height: 8px;
+    background: var(--bg-tertiary);
+    border-radius: 4px;
+    overflow: hidden;
+    margin-bottom: 10px;
+}
+
+.progress-fill {
+    height: 100%;
+    background: var(--accent-primary);
+    transition: width 0.3s ease;
+    width: 0%;
+}
+
+.progress-text {
+    text-align: center;
+    font-size: 13px;
+    color: var(--text-secondary);
+    font-weight: 500;
+}
+
+.upload-form-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 15px;
+}
+
+.close-upload-form {
+    background: transparent;
+    border: none;
+    font-size: 28px;
+    color: var(--text-secondary);
+    cursor: pointer;
+    padding: 0;
+    width: 32px;
+    height: 32px;
+    line-height: 1;
+    transition: color 0.2s ease;
+}
+
+.close-upload-form:hover {
+    color: var(--text-primary);
+}
+
 /* Gallery Grid Layout */
 .gallery-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-    gap: 20px;
+    gap: 16px;
     padding: 20px 0;
 }
 
 .gallery-item {
     position: relative;
-    background: #fff;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-primary);
     border-radius: 8px;
     overflow: hidden;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    transition: all 0.2s ease;
-    transition: transform 0.2s, box-shadow 0.2s;
 }
 
 .gallery-item:hover {
-    transform: translateY(-4px);
+    transform: translateY(-2px);
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+    border-color: var(--border-secondary);
 }
 
 .gallery-item img {
@@ -26,91 +132,137 @@
     object-fit: cover;
     display: block;
     cursor: pointer;
+    transition: opacity 0.2s ease;
+}
+
+.gallery-item img:hover {
+    opacity: 0.9;
 }
 
 .gallery-item-description {
-    padding: 10px;
+    padding: 12px;
-    font-size: 14px;
+    font-size: 13px;
-    color: #555;
+    color: var(--text-secondary);
-    background: #f9f9f9;
+    background: var(--bg-secondary);
-    border-top: 1px solid #eee;
+    border-top: 1px solid var(--border-primary);
+    line-height: 1.5;
 }
 
 .gallery-item-info {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 10px;
+    padding: 10px 12px;
-    background: #fff;
+    background: var(--bg-tertiary);
-    border-top: 1px solid #eee;
+    border-top: 1px solid var(--border-primary);
 }
 
 .gallery-item-date {
     font-size: 12px;
-    color: #888;
+    color: var(--text-secondary);
 }
 
 .btn-delete {
-    background: #dc3545;
+    background: transparent;
-    color: white;
+    color: var(--danger);
-    border: none;
+    border: 1px solid var(--danger);
-    padding: 5px 12px;
+    padding: 4px 10px;
     border-radius: 4px;
     font-size: 12px;
     cursor: pointer;
-    transition: background 0.2s;
+    transition: all 0.2s ease;
+    font-weight: 500;
 }
 
 .btn-delete:hover {
-    background: #c82333;
+    background: var(--danger);
+    color: var(--text-primary);
 }
 
 /* Upload Form Styles */
 .form-group {
-    margin-bottom: 15px;
+    margin-bottom: 16px;
 }
 
 .form-group label {
     display: block;
-    margin-bottom: 5px;
+    margin-bottom: 8px;
     font-weight: 500;
-    color: #333;
+    color: var(--text-primary);
+    font-size: 14px;
 }
 
 .form-group input[type="file"] {
     width: 100%;
-    padding: 8px;
+    padding: 12px;
-    border: 2px dashed #ddd;
+    border: 1px dashed var(--border-primary);
-    border-radius: 4px;
+    border-radius: 6px;
     cursor: pointer;
+    background: var(--bg-tertiary);
+    color: var(--text-primary);
+    font-size: 14px;
+    transition: border-color 0.2s ease;
+}
+
+.form-group input[type="file"]:hover {
+    border-color: var(--accent-primary);
+}
+
+.form-group input[type="file"]::file-selector-button {
+    padding: 8px 16px;
+    margin-right: 12px;
+    background: var(--accent-primary);
+    color: var(--bg-primary);
+    border: 1px solid var(--accent-primary);
+    border-radius: 4px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.form-group input[type="file"]::file-selector-button:hover {
+    background: var(--accent-hover);
+    border-color: var(--accent-hover);
 }
 
 .form-group textarea {
     width: 100%;
     padding: 10px;
-    border: 1px solid #ddd;
+    border: 1px solid var(--border-primary);
-    border-radius: 4px;
+    border-radius: 6px;
     font-family: inherit;
     resize: vertical;
+    background: var(--bg-tertiary);
+    color: var(--text-primary);
+    font-size: 14px;
+    line-height: 1.5;
+    transition: border-color 0.2s ease;
+}
+
+.form-group textarea:focus {
+    outline: none;
+    border-color: var(--accent-primary);
 }
 
 /* Alert Messages */
 .alert {
     padding: 12px 16px;
-    border-radius: 4px;
+    border-radius: 6px;
-    margin-bottom: 15px;
+    margin-bottom: 16px;
+    font-size: 14px;
 }
 
 .alert-success {
-    background: #d4edda;
+    background: rgba(63, 185, 80, 0.15);
-    color: #155724;
+    color: var(--success);
-    border: 1px solid #c3e6cb;
+    border: 1px solid rgba(63, 185, 80, 0.3);
 }
 
 .alert-error {
-    background: #f8d7da;
+    background: rgba(248, 81, 73, 0.15);
-    color: #721c24;
+    color: var(--danger);
-    border: 1px solid #f5c6cb;
+    border: 1px solid rgba(248, 81, 73, 0.3);
 }
 
 /* Image Modal */
@@ -132,7 +284,8 @@
     left: 0;
     right: 0;
     bottom: 0;
-    background: rgba(0, 0, 0, 0.8);
+    background: rgba(0, 0, 0, 0.85);
+    backdrop-filter: blur(4px);
 }
 
 .modal-content {
@@ -147,25 +300,27 @@
     max-height: 90vh;
     display: block;
     border-radius: 8px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
 }
 
 .modal-close {
     position: absolute;
-    top: -40px;
+    top: -50px;
     right: 0;
     background: transparent;
     border: none;
-    color: white;
+    color: var(--text-primary);
-    font-size: 36px;
+    font-size: 32px;
     cursor: pointer;
     padding: 0;
     width: 40px;
     height: 40px;
-    line-height: 36px;
+    line-height: 32px;
+    transition: color 0.2s ease;
 }
 
 .modal-close:hover {
-    color: #ccc;
+    color: var(--text-secondary);
 }
 
 /* Responsive Design */

Media.JoshHeaps.Net/wwwroot/css/site.css

@@ -0,0 +1,81 @@
+/* Theme Variables */
+:root {
+    /* Dark Mode (Default) */
+    --bg-primary: #0d1117;
+    --bg-secondary: #161b22;
+    --bg-tertiary: #1f2937;
+    --bg-hover: #252d3a;
+    --text-primary: #e6edf3;
+    --text-secondary: #8b949e;
+    --border-primary: #30363d;
+    --border-secondary: #21262d;
+    --accent-primary: #58a6ff;
+    --accent-hover: #4a93e3;
+    --danger: #f85149;
+    --danger-hover: #da3633;
+    --success: #3fb950;
+}
+
+/* Light Mode */
+[data-theme="light"] {
+    --bg-primary: #ffffff;
+    --bg-secondary: #f6f8fa;
+    --bg-tertiary: #E2EFFF;
+    --bg-hover: #f3f4f6;
+    --text-primary: #24292f;
+    --text-secondary: #57606a;
+    --border-primary: #d0d7de;
+    --border-secondary: #e5e7eb;
+    --accent-primary: #0969da;
+    --accent-hover: #0550ae;
+    --danger: #cf222e;
+    --danger-hover: #a40e26;
+    --success: #1a7f37;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html, body {
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
+    line-height: 1.6;
+    min-height: 100vh;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+}
+
+a {
+    color: var(--accent-primary);
+    text-decoration: none;
+    transition: color 0.2s ease;
+}
+
+a:hover {
+    color: var(--accent-hover);
+}
+
+/* Scrollbar Styling */
+::-webkit-scrollbar {
+    width: 12px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--bg-primary);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--border-primary);
+    border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--bg-hover);
+}

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

@@ -1,3 +1,48 @@
+// 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', () => {
+            if (addFilesBtn.classList.contains('active')) {
+                uploadFormCard.style.display = 'none';
+                addFilesBtn.classList.remove('active');
+            }
+            else {
+                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;
@@ -89,7 +134,7 @@ function createGalleryItem(media) {
 
         const form = document.createElement('form');
         form.method = 'post';
-    form.action = '/?handler=Delete';
+        form.action = '?handler=Delete'; // Relative to current page
         form.style.display = 'inline';
 
         // Add anti-forgery token
@@ -101,7 +146,7 @@ function createGalleryItem(media) {
 
         const hiddenInput = document.createElement('input');
         hiddenInput.type = 'hidden';
-    hiddenInput.name = 'mediaId';
+        hiddenInput.name = 'MediaId'; // Match C# property name exactly
         hiddenInput.value = media.id;
         form.appendChild(hiddenInput);
 
@@ -110,7 +155,10 @@ function createGalleryItem(media) {
         deleteBtn.className = 'btn-delete';
         deleteBtn.textContent = 'Delete';
         deleteBtn.onclick = function(e) {
-        return confirm('Are you sure you want to delete this image?');
+            if (!confirm('Are you sure you want to delete this image?')) {
+                e.preventDefault();
+                return false;
+            }
         };
         form.appendChild(deleteBtn);
 
@@ -149,3 +197,4 @@ function createImageModal(imageSrc) {
 
         return modal;
     }
+}); // End of DOMContentLoaded

Media.JoshHeaps.Net/wwwroot/js/theme.js

@@ -0,0 +1,38 @@
+// Theme Toggle Functionality
+(function() {
+    const THEME_KEY = 'theme-preference';
+
+    // Initialize theme on page load
+    function initTheme() {
+        const savedTheme = localStorage.getItem(THEME_KEY);
+        const theme = savedTheme || 'light'; // Default to light
+
+        document.documentElement.setAttribute('data-theme', theme);
+
+        // Update toggle if it exists
+        const toggle = document.getElementById('theme-toggle');
+        if (toggle) {
+            toggle.checked = theme === 'dark';
+        }
+    }
+
+    // Toggle theme
+    function toggleTheme() {
+        const currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
+        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+
+        document.documentElement.setAttribute('data-theme', newTheme);
+        localStorage.setItem(THEME_KEY, newTheme);
+    }
+
+    // Initialize immediately (before DOMContentLoaded to prevent flash)
+    initTheme();
+
+    // Set up toggle listener when DOM is ready
+    document.addEventListener('DOMContentLoaded', function() {
+        const toggle = document.getElementById('theme-toggle');
+        if (toggle) {
+            toggle.addEventListener('change', toggleTheme);
+        }
+    });
+})();

Media.JoshHeaps.Net/wwwroot/js/upload.js

@@ -0,0 +1,106 @@
+// Handle multiple file uploads sequentially
+document.addEventListener('DOMContentLoaded', function() {
+    const uploadForm = document.getElementById('upload-form');
+    const fileInput = document.getElementById('UploadedFile');
+    const descriptionInput = document.getElementById('Description');
+    const uploadBtn = document.getElementById('upload-btn');
+    const progressContainer = document.getElementById('upload-progress');
+    const progressFill = document.getElementById('progress-fill');
+    const progressText = document.getElementById('progress-text');
+    const galleryElement = document.getElementById('gallery');
+
+    if (!uploadForm) return;
+
+    uploadForm.addEventListener('submit', async function(e) {
+        e.preventDefault();
+
+        const files = fileInput.files;
+        if (!files || files.length === 0) {
+            alert('Please select at least one file');
+            return;
+        }
+
+        // Validate file sizes
+        const maxSize = 10 * 1024 * 1024; // 10MB
+        for (let file of files) {
+            if (file.size > maxSize) {
+                alert(`File "${file.name}" exceeds 10MB limit`);
+                return;
+            }
+        }
+
+        // Disable form during upload
+        uploadBtn.disabled = true;
+        fileInput.disabled = true;
+        descriptionInput.disabled = true;
+        progressContainer.style.display = 'block';
+
+        const description = descriptionInput.value;
+        let successCount = 0;
+        let failCount = 0;
+
+        // Upload files sequentially
+        for (let i = 0; i < files.length; i++) {
+            const file = files[i];
+            const progress = Math.round(((i + 1) / files.length) * 100);
+
+            progressFill.style.width = `${progress}%`;
+            progressText.textContent = `Uploading ${i + 1} of ${files.length}: ${file.name}`;
+
+            try {
+                const success = await uploadSingleFile(file, description);
+                if (success) {
+                    successCount++;
+                } else {
+                    failCount++;
+                }
+            } catch (error) {
+                console.error(`Failed to upload ${file.name}:`, error);
+                failCount++;
+            }
+        }
+
+        // Reset form
+        uploadBtn.disabled = false;
+        fileInput.disabled = false;
+        descriptionInput.disabled = false;
+        progressContainer.style.display = 'none';
+        progressFill.style.width = '0%';
+
+        // Show results
+        if (successCount > 0 && failCount === 0) { }
+        else if (successCount > 0 && failCount > 0) {
+            alert(`Uploaded ${successCount} image(s), but ${failCount} failed.`);
+        } else {
+            alert(`Failed to upload all ${failCount} image(s).`);
+        }
+
+        // Reset form and reload page
+        uploadForm.reset();
+        window.location.reload();
+    });
+
+    async function uploadSingleFile(file, description) {
+        const formData = new FormData();
+        formData.append('UploadedFile', file);
+        if (description) {
+            formData.append('Description', description);
+        }
+
+        // Get anti-forgery token
+        const token = document.querySelector('input[name="__RequestVerificationToken"]').value;
+        formData.append('__RequestVerificationToken', token);
+
+        try {
+            const response = await fetch('/?handler=Add', {
+                method: 'POST',
+                body: formData
+            });
+
+            return response.ok;
+        } catch (error) {
+            console.error('Upload error:', error);
+            return false;
+        }
+    }
+});