8 files changed, 39 insertions, 173 deletions
diff --git a/templates/partials/empty-files.html b/templates/partials/empty-files.html
new file mode 100644
index 0000000..29f9ca1
--- /dev/null
+++ b/templates/partials/empty-files.html
@@ -0,0 +1,5 @@
+<div style="text-align: center; padding: 60px 20px; color: #666;">
+  <div style="font-size: 64px; margin-bottom: 20px;">📭</div>
+  <h3>No files uploaded yet</h3>
+  <p>Upload some files to see them here!</p>
+</div>
diff --git a/templates/partials/empty-gallery.html b/templates/partials/empty-gallery.html
new file mode 100644
index 0000000..dcafdc0
--- /dev/null
+++ b/templates/partials/empty-gallery.html
@@ -0,0 +1,5 @@
+<div style="text-align: center; padding: 60px 20px; color: #666;">
+  <div style="font-size: 64px; margin-bottom: 20px;">🖼️</div>
+  <h3>No images or videos yet</h3>
+  <p>Upload some media files to see them here!</p>
+</div>
diff --git a/templates/partials/file-row.html b/templates/partials/file-row.html
new file mode 100644
index 0000000..75ce50e
--- /dev/null
+++ b/templates/partials/file-row.html
@@ -0,0 +1,9 @@
+<tr>
+  <td><a href="/download/{{encoded-name}}" target="_blank">{{filename}}</a></td>
+  <td>{{size}}</td>
+  <td>{{uploaded}}</td>
+  <td>
+    {{view-button}}
+    <a href="/download/{{encoded-name}}" download class="button">Download</a>
+  </td>
+</tr>
diff --git a/templates/partials/gallery-item.html b/templates/partials/gallery-item.html
new file mode 100644
index 0000000..8694791
--- /dev/null
+++ b/templates/partials/gallery-item.html
@@ -0,0 +1,9 @@
+<div class="gallery-item" data-index="{{index}}">
+  <a href="#" onclick="openSlideshow({{index}}); return false;">
+    {{media}}
+  </a>
+  <div class="gallery-info">
+    <div class="gallery-filename" title="{{filename}}">{{filename}}</div>
+    <div class="gallery-meta">{{size}} • {{uploaded}}</div>
+  </div>
+</div>
diff --git a/templates/scripts/chunked-upload.js b/templates/scripts/chunked-upload.js
index 980c61c..a4ac7bc 100644
--- a/templates/scripts/chunked-upload.js
+++ b/templates/scripts/chunked-upload.js
@@ -39,9 +39,10 @@ form.addEventListener('submit', async (e) => {
       uploadedFiles.push(filename);
     }
 
-    const links = uploadedFiles.map(f =>
-      `<a href="/download/${f}" target="_blank" style="display: block; margin: 5px 0;">${window.location.origin}/download/${f}</a>`
-    ).join('');
+    const links = uploadedFiles.map(f => {
+      const encoded = encodeURIComponent(f);
+      return `<a href="/download/${encoded}" target="_blank" style="display: block; margin: 5px 0;">${window.location.origin}/download/${encoded}</a>`;
+    }).join('');
     showResult('Upload successful!<br>' + links, 'success');
     form.reset();
     fileInfo.textContent = 'Max size: {{max-size}}MB per file';
diff --git a/templates/scripts/simple-upload.js b/templates/scripts/simple-upload.js
index c3a0def..48653a1 100644
--- a/templates/scripts/simple-upload.js
+++ b/templates/scripts/simple-upload.js
@@ -38,9 +38,10 @@ form.addEventListener('submit', async (e) => {
     const data = await response.json();
 
     if (response.ok) {
-      const links = data.files.map(f =>
-        `<a href="/download/${f}" target="_blank" style="display: block; margin: 5px 0;">${window.location.origin}/download/${f}</a>`
-      ).join('');
+      const links = data.files.map(f => {
+        const encoded = encodeURIComponent(f);
+        return `<a href="/download/${encoded}" target="_blank" style="display: block; margin: 5px 0;">${window.location.origin}/download/${encoded}</a>`;
+      }).join('');
       showResult('Upload successful!<br>' + links, 'success');
       form.reset();
       fileInfo.textContent = 'Max size: {{max-size}}MB per file';
diff --git a/templates/scripts/slideshow.js b/templates/scripts/slideshow.js
index ccf7c32..3ab2ada 100644
--- a/templates/scripts/slideshow.js
+++ b/templates/scripts/slideshow.js
@@ -33,11 +33,12 @@ function changeSlide(direction) {
 function showSlide(index) {
   const file = mediaFiles[index];
   const container = document.getElementById('slideshow-media-container');
+  const encodedName = encodeURIComponent(file.name);
 
   if (file.isVideo) {
-    container.innerHTML = `<video src="/download/${file.name}" controls autoplay style="max-width: 100%; max-height: 80vh;"></video>`;
+    container.innerHTML = `<video src="/download/${encodedName}" controls autoplay style="max-width: 100%; max-height: 80vh;"></video>`;
   } else {
-    container.innerHTML = `<img src="/download/${file.name}" alt="${file.name}" style="max-width: 100%; max-height: 80vh;">`;
+    container.innerHTML = `<img src="/download/${encodedName}" alt="${file.name}" style="max-width: 100%; max-height: 80vh;">`;
   }
 
   document.getElementById('slideshow-filename').textContent = file.name;
diff --git a/templates/styles/gallery.css b/templates/styles/gallery.css
deleted file mode 100644
index 5ae5615..0000000
--- a/templates/styles/gallery.css
+++ /dev/null
@@ -1,165 +0,0 @@
-.gallery-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-  gap: 20px;
-  padding: 10px 0;
-}
-.gallery-item {
-  position: relative;
-  background: #f5f5f5;
-  border-radius: 4px;
-  overflow: hidden;
-  transition: transform 0.2s, box-shadow 0.2s;
-  cursor: pointer;
-}
-.gallery-item:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-}
-.gallery-item a {
-  display: block;
-  position: relative;
-  text-decoration: none;
-}
-.video-overlay {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  font-size: 48px;
-  color: white;
-  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
-  pointer-events: none;
-}
-.gallery-info {
-  padding: 10px;
-  background: white;
-}
-.gallery-filename {
-  font-size: 14px;
-  font-weight: 600;
-  color: #333;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  margin-bottom: 4px;
-}
-.gallery-meta {
-  font-size: 12px;
-  color: #666;
-}
-
-/* Slideshow Styles */
-.slideshow-modal {
-  display: none;
-  position: fixed;
-  z-index: 9999;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.95);
-}
-.slideshow-modal.active {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.slideshow-close {
-  position: absolute;
-  top: 20px;
-  right: 40px;
-  color: #fff;
-  font-size: 50px;
-  font-weight: bold;
-  cursor: pointer;
-  z-index: 10001;
-  transition: color 0.3s;
-}
-.slideshow-close:hover {
-  color: #bbb;
-}
-.slideshow-content {
-  max-width: 90%;
-  max-height: 90%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-#slideshow-media-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  max-width: 100%;
-  max-height: 80vh;
-}
-#slideshow-media-container img,
-#slideshow-media-container video {
-  max-width: 100%;
-  max-height: 80vh;
-  object-fit: contain;
-  border-radius: 4px;
-}
-.slideshow-info {
-  color: white;
-  text-align: center;
-  margin-top: 20px;
-  font-size: 16px;
-}
-#slideshow-filename {
-  font-weight: 600;
-  margin-bottom: 8px;
-}
-#slideshow-counter {
-  font-size: 14px;
-  color: #ccc;
-}
-.slideshow-nav {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  background-color: rgba(255, 255, 255, 0.2);
-  color: white;
-  border: none;
-  font-size: 40px;
-  padding: 20px;
-  cursor: pointer;
-  transition: background-color 0.3s;
-  z-index: 10001;
-}
-.slideshow-nav:hover {
-  background-color: rgba(255, 255, 255, 0.4);
-}
-.slideshow-prev {
-  left: 20px;
-}
-.slideshow-next {
-  right: 20px;
-}
-
-@media (max-width: 550px) {
-  .gallery-grid {
-    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-    gap: 10px;
-  }
-  .gallery-item a img,
-  .gallery-item a video {
-    height: 150px !important;
-  }
-  .slideshow-close {
-    top: 10px;
-    right: 20px;
-    font-size: 40px;
-  }
-  .slideshow-nav {
-    font-size: 30px;
-    padding: 15px;
-  }
-  .slideshow-prev {
-    left: 10px;
-  }
-  .slideshow-next {
-    right: 10px;
-  }
-}