first

2026-01-06 10:10:36 +01:00
commit 6a0f1771f6
15 changed files with 3295 additions and 0 deletions
--- a/data/html/index.html
+++ b/data/html/index.html
@@ -0,0 +1,341 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Image Upload</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <h1>Black Hole Share</h1>
+
+  <div class="upload-container">
+    <div class="upload-area">
+      <input type="file" id="fileInput" accept="image/*" style="display: none;">
+      <div id="uploadZone" class="upload-zone">
+        <p>Click to select file, paste image data, or drag & drop</p>
+      </div>
+    </div>
+  </div>
+
+  <div class="duration-container">
+    <label for="durationSlider">Duration: <span id="durationValue">5</span> min</label>
+    <input type="range" id="durationSlider" min="1" max="60" value="5" step="1">
+    <div class="button-row">
+      <button id="resetBtn" class="reset-btn" style="display: none;">Reset</button>
+      <button id="uploadBtn" class="upload-btn" style="display: none;">Upload</button>
+    </div>
+    <div id="linkContainer" class="link-container" style="display: none;">
+      <p>Link:</p>
+      <a id="uploadedLink" href="#" target="_blank"></a>
+      <p id="clipboardMessage" class="clipboard-message" style="display: none;"></p>
+    </div>
+  </div>
+
+  <footer class="powered-by">
+    <span>Powered by: <img src="logo.png" alt="ICSBox" class="footer-logo"></span>
+  </footer>
+
+  <!-- Zoom overlay -->
+  <div id="zoomOverlay" class="zoom-overlay" style="display: none;">
+  </div>
+
+  <script>
+    let currentContentData = null;
+    const fileInput = document.getElementById('fileInput');
+    const uploadZone = document.getElementById('uploadZone');
+    const uploadContainer = document.querySelector('.upload-container');
+    const durationSlider = document.getElementById('durationSlider');
+    const durationValue = document.getElementById('durationValue');
+    const uploadBtn = document.getElementById('uploadBtn');
+    const resetBtn = document.getElementById('resetBtn');
+    const zoomOverlay = document.getElementById('zoomOverlay');
+    const linkContainer = document.getElementById('linkContainer');
+    const uploadedLink = document.getElementById('uploadedLink');
+    const clipboardMessage = document.getElementById('clipboardMessage');
+
+    // Update duration display
+    durationSlider.addEventListener('input', function () {
+      durationValue.textContent = this.value;
+    });
+
+    uploadBtn.addEventListener('click', async () => {
+      const duration = durationSlider.value;
+      const isText = uploadZone.querySelector('.text-content') !== null;
+      const mimeType = isText ? 'text/plain' : 'image/png';
+      const contentData = currentContentData;
+
+      if (!contentData) {
+        console.log('❌ No content to upload!');
+        return;
+      }
+
+      sendUpload(duration, mimeType, contentData);
+    });
+
+    async function sendUpload(duration, mimeType, contentData) {
+      const isText = mimeType === 'text/plain';
+      let content = contentData;
+
+      // For images, remove data URL prefix to send only base64 string
+      if (!isText && contentData.includes('base64,')) {
+        content = contentData.split('base64,')[1];
+      }
+
+      const payload = {
+        duration: parseInt(duration),
+        content_type: mimeType,
+        content: content
+      };
+
+      try {
+        const response = await fetch('/api/upload', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify(payload)
+        });
+
+        const result = await response.json();
+        console.log(`✅ Upload received!\n${JSON.stringify(result, null, 2)}`);
+
+        // Hide duration controls and buttons
+        document.querySelector('label[for="durationSlider"]').style.display = 'none';
+        durationSlider.style.display = 'none';
+        uploadBtn.style.display = 'none';
+        resetBtn.style.display = 'none';
+
+        // Show link
+        const fullLink = window.location.origin + result.link;
+        uploadedLink.href = fullLink;
+        uploadedLink.textContent = fullLink;
+        linkContainer.style.display = 'block';
+
+        // Copy to clipboard
+        try {
+          await navigator.clipboard.writeText(fullLink);
+          clipboardMessage.textContent = '✓ Copied to clipboard!';
+          clipboardMessage.style.color = 'var(--accent-green)';
+          clipboardMessage.style.cursor = 'default';
+          clipboardMessage.style.display = 'block';
+          clipboardMessage.onclick = null;
+        } catch (error) {
+          clipboardMessage.textContent = '⚠ Click here to copy link';
+          clipboardMessage.style.color = 'var(--accent-cyan)';
+          clipboardMessage.style.cursor = 'pointer';
+          clipboardMessage.style.display = 'block';
+          clipboardMessage.onclick = function () {
+            const textArea = document.createElement('textarea');
+            textArea.value = fullLink;
+            textArea.style.position = 'fixed';
+            textArea.style.left = '-999999px';
+            document.body.appendChild(textArea);
+            textArea.select();
+            try {
+              document.execCommand('copy');
+              clipboardMessage.textContent = '✓ Copied to clipboard!';
+              clipboardMessage.style.color = 'var(--accent-green)';
+              clipboardMessage.style.cursor = 'default';
+              clipboardMessage.onclick = null;
+            } catch (e) {
+              clipboardMessage.textContent = '✗ Copy failed';
+              clipboardMessage.style.color = '#ff6666';
+            }
+            document.body.removeChild(textArea);
+          };
+        }
+
+      } catch (error) {
+        console.log(`❌ Error: ${error.message}`);
+      }
+    }
+
+
+    // Reset to initial state
+    resetBtn.addEventListener('click', function () {
+      currentContentData = null;
+      uploadZone.innerHTML = '<p>Click to select file, paste image data, or drag & drop</p>';
+      uploadContainer.style.height = '180px';
+      uploadContainer.style.pointerEvents = '';
+      uploadContainer.style.overflow = '';
+      uploadZone.style.pointerEvents = '';
+      uploadZone.style.alignItems = '';
+      uploadZone.style.justifyContent = '';
+      uploadZone.style.padding = '';
+      fileInput.value = '';
+      durationSlider.value = '5';
+      durationValue.textContent = '5';
+      document.querySelector('label[for="durationSlider"]').style.display = '';
+      durationSlider.style.display = '';
+      uploadBtn.style.display = 'none';
+      resetBtn.style.display = 'none';
+      linkContainer.style.display = 'none';
+      clipboardMessage.style.display = 'none';
+      uploadZone.focus();
+    });
+
+    // Display and scale image or text content maintaining aspect ratio
+    function displayContent(content, isText = false) {
+      currentContentData = content;
+
+      if (isText) {
+        // Display text content - ZOOM ENABLED
+        uploadZone.innerHTML = `<div class="text-content" style="cursor: zoom-in;">${content.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</div>`;
+        uploadContainer.style.height = '500px';
+        uploadContainer.style.overflow = 'hidden';
+        uploadZone.style.pointerEvents = 'auto';
+        uploadZone.style.alignItems = 'stretch';
+        uploadZone.style.justifyContent = 'stretch';
+        uploadZone.style.padding = '0';
+        uploadBtn.style.display = 'block';
+        resetBtn.style.display = 'block';
+
+        // ZOOM FOR TEXT
+        const textContent = uploadZone.querySelector('.text-content');
+        textContent.addEventListener('click', function (e) {
+          e.stopPropagation();
+          showZoom(content, true);
+        });
+
+      } else {
+        // Display image
+        const img = new Image();
+        img.onload = function () {
+          const maxWidth = 620;
+          const maxHeight = 800;
+          const scale = Math.min(maxWidth / img.width, maxHeight / img.height, 1);
+          const displayHeight = Math.floor(img.height * scale);
+          const displayWidth = Math.floor(img.width * scale);
+
+          uploadZone.innerHTML = `<img src="${content}" alt="Uploaded Image" style="width: ${displayWidth}px; height: ${displayHeight}px; object-fit: contain; cursor: zoom-in;">`;
+          uploadContainer.style.height = `${displayHeight + 20}px`;
+          uploadContainer.style.pointerEvents = 'none';
+          uploadZone.style.pointerEvents = 'auto';
+          uploadBtn.style.display = 'block';
+          resetBtn.style.display = 'block';
+
+          const uploadedImg = uploadZone.querySelector('img');
+          uploadedImg.addEventListener('click', function (e) {
+            e.stopPropagation();
+            showZoom(content, false);
+          });
+        };
+        img.src = content;
+      }
+    }
+
+    // Open file picker on container click (ONLY IF EMPTY)
+    uploadContainer.addEventListener('click', function (e) {
+      if (uploadContainer.style.pointerEvents !== 'none' && !uploadZone.querySelector('.text-content') && !uploadZone.querySelector('img')) {
+        fileInput.click();
+      }
+    });
+
+    fileInput.addEventListener('change', function (e) {
+      const file = e.target.files[0];
+      if (file) {
+        const reader = new FileReader();
+        reader.onload = function (event) {
+          displayContent(event.target.result);
+        };
+        reader.readAsDataURL(file);
+      }
+    });
+
+    // Handle paste from clipboard
+    uploadZone.addEventListener('paste', function (e) {
+      e.preventDefault();
+      const items = e.clipboardData.items;
+
+      for (let item of items) {
+        if (item.type.startsWith('image/')) {
+          const file = item.getAsFile();
+          const reader = new FileReader();
+          reader.onload = function (event) {
+            displayContent(event.target.result);
+          };
+          reader.readAsDataURL(file);
+          return;
+        }
+      }
+
+      const text = e.clipboardData.getData('text');
+      if (text) {
+        displayContent(text, true);
+      }
+    });
+
+    // Handle drag and drop
+    uploadZone.addEventListener('drop', handleDrop);
+    uploadContainer.addEventListener('drop', handleDrop);
+
+    function handleDrop(e) {
+      e.preventDefault();
+      const file = e.dataTransfer.files[0];
+      if (file && file.type.startsWith('image/')) {
+        const reader = new FileReader();
+        reader.onload = function (event) {
+          displayContent(event.target.result);
+        };
+        reader.readAsDataURL(file);
+      }
+    }
+
+    uploadZone.addEventListener('dragover', function (e) {
+      e.preventDefault();
+      uploadZone.style.borderColor = 'var(--border-hover)';
+    });
+
+    uploadZone.addEventListener('dragleave', function (e) {
+      uploadZone.style.borderColor = '';
+    });
+
+    uploadContainer.addEventListener('dragover', function (e) {
+      e.preventDefault();
+    });
+
+    uploadZone.setAttribute('tabindex', '0');
+
+    window.addEventListener('focus', function () {
+      uploadZone.focus();
+    });
+
+    uploadZone.focus();
+
+    // Improved zoom overlay functions
+    function showZoom(content, isText = false) {
+      if (isText) {
+        zoomOverlay.innerHTML = `
+          <div class="zoom-text-content">${content.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</div>
+        `;
+      } else {
+        zoomOverlay.innerHTML = `<img id="zoomImage" src="${content}" alt="Zoomed Image" style="max-width: 95vw; max-height: 95vh; object-fit: contain; box-shadow: 0 0 50px rgba(51, 204, 255, 0.5);">`;
+      }
+      zoomOverlay.style.display = 'flex';
+    }
+
+    function hideZoom() {
+      zoomOverlay.style.display = 'none';
+    }
+
+    zoomOverlay.addEventListener('click', hideZoom);
+
+    // ESC TO EXIT ZOOM
+    document.addEventListener('keydown', function (e) {
+      if (e.key === 'Escape' || e.key === 'Esc') {
+        hideZoom();
+      }
+    });
+
+    window.addEventListener('resize', function () {
+      if (currentContentData) {
+        displayContent(currentContentData);
+      }
+    });
+  </script>
+</body>
+
+</html>
--- a/data/html/logo.png
+++ b/data/html/logo.png
--- a/data/html/style.css
+++ b/data/html/style.css
@@ -0,0 +1,563 @@
+/* Color variables from Hyprland config */
+:root {
+  --bg-primary: #1e1e2e;
+  --bg-secondary: #1a1a1a;
+  --bg-tertiary: #1a1a1a;
+  --active-cyan: #33ccff;
+  --active-green: #00ff99;
+  --inactive-gray: #595959;
+  --text-primary: #cdd6f4;
+  --text-secondary: #a6adc8;
+  --border-color: var(--active-cyan);
+  --border-hover: var(--active-green);
+  --accent-cyan: var(--active-cyan);
+  --accent-green: var(--active-green);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+/* Main layout container */
+body {
+  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace, Arial, sans-serif;
+  min-width: 640px;
+  min-height: 360px;
+  width: 660px;
+  height: 100vh;
+  margin: 0 auto;
+  padding: 20px;
+  padding-bottom: 140px;
+  background-color: var(--bg-tertiary);
+  color: var(--text-primary);
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  overflow: auto;
+}
+
+h1 {
+  color: var(--accent-cyan);
+  text-shadow: 0 0 10px rgba(51, 204, 255, 0.3);
+  text-align: center;
+  margin: 0 0 15px 0;
+  font-size: 1.8em;
+  font-weight: bold;
+  flex-shrink: 0;
+}
+
+h1 .home-link {
+  color: var(--accent-cyan);
+  text-decoration: none;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+h1 .home-link:hover {
+  color: var(--accent-green);
+  text-shadow: 0 0 15px rgba(0, 255, 153, 0.5);
+}
+
+.upload-container {
+  padding: 0;
+  text-align: center;
+  background-color: transparent;
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
+  height: 180px;
+  max-height: 500px;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.duration-container {
+  margin-top: 15px;
+  padding: 15px;
+  border: 2px solid var(--border-color);
+  border-radius: 12px;
+  background-color: var(--bg-secondary);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  flex-shrink: 0;
+  transition: all 0.3s ease;
+}
+
+.duration-container .button-row {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-items: center;
+  width: 100%;
+}
+
+.duration-container:hover {
+  border-color: var(--border-hover);
+  box-shadow: 0 4px 15px rgba(0, 255, 153, 0.2);
+}
+
+.duration-container label {
+  color: var(--text-primary);
+  font-size: 0.9em;
+  text-align: center;
+}
+
+#durationSlider {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 6px;
+  border-radius: 3px;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  outline: none;
+  cursor: pointer;
+}
+
+#durationSlider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--border-color);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+#durationSlider::-webkit-slider-thumb:hover {
+  background: var(--border-hover);
+  transform: scale(1.2);
+}
+
+#durationSlider::-moz-range-thumb {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--border-color);
+  cursor: pointer;
+  border: none;
+  transition: all 0.2s ease;
+}
+
+#durationSlider::-moz-range-thumb:hover {
+  background: var(--border-hover);
+  transform: scale(1.2);
+}
+
+.upload-btn {
+  background-color: var(--border-color);
+  color: var(--bg-tertiary);
+  border: none;
+  padding: 12px 24px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-weight: bold;
+  font-size: 1em;
+  transition: all 0.2s ease;
+  box-shadow: 0 2px 10px rgba(51, 204, 255, 0.3);
+  flex: 1;
+}
+
+.upload-btn:hover {
+  background-color: var(--border-hover);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 15px rgba(0, 255, 153, 0.4);
+}
+
+.upload-btn:active {
+  transform: translateY(0);
+}
+
+.reset-btn {
+  background-color: var(--border-color);
+  color: var(--bg-tertiary);
+  border: none;
+  padding: 12px 24px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-weight: bold;
+  font-size: 1em;
+  transition: all 0.2s ease;
+  box-shadow: 0 2px 10px rgba(51, 204, 255, 0.3);
+  flex: 0 0 10%;
+}
+
+.reset-btn:hover {
+  background-color: var(--border-hover);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 15px rgba(0, 255, 153, 0.4);
+}
+
+.reset-btn:active {
+  transform: translateY(0);
+}
+
+.link-container {
+  text-align: center;
+  padding: 15px;
+  background-color: var(--bg-primary);
+  border: 2px solid var(--border-hover);
+  border-radius: 8px;
+  box-shadow: 0 0 20px rgba(0, 255, 153, 0.3);
+}
+
+.link-container p {
+  margin: 0 0 10px 0;
+  color: var(--text-secondary);
+  font-weight: bold;
+  font-size: 0.9em;
+}
+
+.link-container a {
+  color: var(--accent-green);
+  text-decoration: none;
+  font-weight: bold;
+  word-break: break-all;
+  transition: all 0.2s ease;
+}
+
+.link-container a:hover {
+  color: var(--accent-cyan);
+  text-shadow: 0 0 10px rgba(51, 204, 255, 0.5);
+}
+
+.clipboard-message {
+  margin: 10px 0 0 0;
+  font-size: 0.85em;
+  font-style: italic;
+  transition: all 0.2s ease;
+}
+
+.clipboard-message:hover {
+  text-shadow: 0 0 5px currentColor;
+}
+
+.upload-area {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  flex: 1;
+  justify-content: center;
+  min-height: 0;
+}
+
+/* Upload zone - SENZA translateY su hover */
+.upload-zone {
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+  border: 2px dashed var(--border-color);
+  border-radius: 12px;
+  background-color: var(--bg-secondary);
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  outline: none;
+  min-height: 100%;
+  overflow: hidden;
+  position: relative;
+  box-sizing: border-box;
+}
+
+.upload-zone:hover {
+  border-color: var(--border-hover);
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
+  box-shadow: 0 4px 15px rgba(0, 255, 153, 0.2);
+}
+
+/* Container per testo - riempie tutto */
+.upload-zone:has(.text-content) {
+  padding: 0 !important;
+  align-items: stretch !important;
+  justify-content: stretch !important;
+  position: relative !important;
+  height: 100% !important;
+}
+
+/* Upload container altezza precisa per testo */
+.upload-container:has(.text-content) {
+  height: 500px !important;
+}
+
+/* TEXT CONTENT - NO SPAZIO SOTTO + PERFETTAMENTE CENTRATO */
+.text-content {
+  width: 100%;
+  max-width: 620px;
+  height: 480px !important;
+  max-height: 480px !important;
+  min-height: 480px !important;
+  overflow-y: scroll !important;
+  overflow-x: hidden !important;
+  text-align: left;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  word-break: break-word;
+  color: var(--text-primary);
+  background-color: var(--bg-secondary);
+  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
+  font-size: 0.9em;
+  line-height: 1.5;
+  padding: 15px;
+  margin: 0;
+  box-sizing: border-box;
+  border-radius: 12px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  cursor: zoom-in;
+  border: none !important;
+  box-shadow: none !important;
+}
+
+.text-content::-webkit-scrollbar {
+  width: 8px;
+}
+
+.text-content::-webkit-scrollbar-track {
+  background: var(--bg-primary);
+  border-radius: 4px;
+}
+
+.text-content::-webkit-scrollbar-thumb {
+  background: var(--border-color);
+  border-radius: 4px;
+}
+
+.text-content::-webkit-scrollbar-thumb:hover {
+  background: var(--border-hover);
+}
+
+/* ZOOM TEXT OVERLAY */
+.zoom-text-content {
+  max-width: 90vw;
+  max-height: 90vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 30px;
+  background-color: var(--bg-secondary);
+  border: 2px solid var(--border-hover);
+  border-radius: 12px;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 1.2em;
+  line-height: 1.6;
+  color: var(--text-primary);
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  box-shadow: 0 0 50px rgba(0, 255, 153, 0.5);
+  scrollbar-width: thin;
+}
+
+.zoom-text-content::-webkit-scrollbar {
+  width: 8px;
+}
+
+.zoom-text-content::-webkit-scrollbar-track {
+  background: var(--bg-primary);
+  border-radius: 4px;
+}
+
+.zoom-text-content::-webkit-scrollbar-thumb {
+  background: var(--border-color);
+  border-radius: 4px;
+}
+
+.zoom-text-content::-webkit-scrollbar-thumb:hover {
+  background: var(--border-hover);
+}
+
+/* Zoom overlay */
+.zoom-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.95);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+  cursor: zoom-out;
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+.zoom-overlay img {
+  max-width: 95vw;
+  max-height: 95vh;
+  object-fit: contain;
+  box-shadow: 0 0 50px rgba(51, 204, 255, 0.5);
+}
+
+.upload-zone:focus {
+  outline: none;
+  border-color: var(--border-hover);
+  box-shadow: 0 0 10px rgba(0, 255, 153, 0.3);
+}
+
+.upload-zone:focus-within .text-content {
+  outline: none;
+}
+
+.upload-zone p {
+  margin: 0;
+  font-size: 0.9em;
+}
+
+/* Custom scrollbar styling */
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--bg-secondary);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--border-color);
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--border-hover);
+}
+
+/* View page styles */
+body.view-page {
+  width: 860px;
+  padding-bottom: 140px;
+}
+
+.view-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  flex: 1;
+  margin-top: 20px;
+}
+
+.powered-by {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  text-align: center;
+  padding: 15px;
+  background-color: var(--bg-secondary);
+  border-top: 1px solid var(--border-color);
+  font-size: 0.9em;
+  color: var(--text-secondary);
+}
+
+.powered-by .home-link {
+  color: var(--accent-cyan);
+  text-decoration: none;
+  font-weight: bold;
+  transition: all 0.3s ease;
+}
+
+.powered-by .home-link:hover {
+  color: var(--accent-green);
+  text-shadow: 0 0 10px rgba(0, 255, 153, 0.5);
+}
+
+.footer-logo {
+  height: 40px;
+  vertical-align: middle;
+  margin-left: 5px;
+  transition: all 0.3s ease;
+}
+
+.powered-by a:hover .footer-logo {
+  filter: brightness(1.3) drop-shadow(0 0 5px rgba(0, 255, 153, 0.5));
+}
+
+.content-area {
+  width: 800px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  border: 2px dashed var(--border-color);
+  border-radius: 12px;
+  background-color: var(--bg-secondary);
+  min-height: 400px;
+  transition: all 0.3s ease;
+}
+
+.content-area:hover {
+  border-color: var(--border-hover);
+  box-shadow: 0 4px 15px rgba(0, 255, 153, 0.2);
+}
+
+.content-area .loading {
+  color: var(--text-secondary);
+  font-size: 1.1em;
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+.content-area .error {
+  color: #ff6666;
+  font-size: 1.1em;
+  text-align: center;
+}
+
+@keyframes pulse {
+
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.text-content-view {
+  width: 760px;
+  max-height: 560px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  text-align: left;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  word-break: break-word;
+  color: var(--text-primary);
+  background-color: var(--bg-primary);
+  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
+  font-size: 0.9em;
+  line-height: 1.5;
+  padding: 15px;
+  border-radius: 8px;
+  cursor: zoom-in;
+  border: none;
+}
+
+.text-content-view::-webkit-scrollbar {
+  width: 8px;
+}
+
+.text-content-view::-webkit-scrollbar-track {
+  background: var(--bg-secondary);
+  border-radius: 4px;
+}
+
+.text-content-view::-webkit-scrollbar-thumb {
+  background: var(--border-color);
+  border-radius: 4px;
+}
+
+.text-content-view::-webkit-scrollbar-thumb:hover {
+  background: var(--border-hover);
+}
--- a/data/html/view.html
+++ b/data/html/view.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Black Hole Share - View</title>
+  <link rel="stylesheet" href="/style.css">
+</head>
+
+<body class="view-page">
+  <h1><a href="/" class="home-link">Black Hole Share</a></h1>
+
+  <div class="view-container">
+    <div id="contentArea" class="content-area">
+      <p class="loading">Loading...</p>
+    </div>
+  </div>
+
+  <footer class="powered-by">
+    <span>Powered by: <img src="/logo.png" alt="ICSBox" class="footer-logo"></span>
+  </footer>
+
+  <!-- Zoom overlay -->
+  <div id="zoomOverlay" class="zoom-overlay" style="display: none;"></div>
+
+  <script>
+    const contentArea = document.getElementById('contentArea');
+    const zoomOverlay = document.getElementById('zoomOverlay');
+
+    // Get asset ID from URL path
+    const pathParts = window.location.pathname.split('/');
+    const assetId = pathParts[pathParts.length - 1];
+
+    async function loadContent() {
+      try {
+        const response = await fetch(`/api/content/${assetId}`);
+
+        if (!response.ok) {
+          if (response.status === 404) {
+            contentArea.innerHTML = '<p class="error">Content not found or expired</p>';
+          } else {
+            contentArea.innerHTML = '<p class="error">Error loading content</p>';
+          }
+          return;
+        }
+
+        const contentType = response.headers.get('content-type');
+
+        if (contentType.startsWith('image/')) {
+          // Display image
+          const blob = await response.blob();
+          const imageUrl = URL.createObjectURL(blob);
+
+          const img = new Image();
+          img.onload = function () {
+            const maxWidth = 780;
+            const maxHeight = 760;
+            const scale = Math.min(maxWidth / img.width, maxHeight / img.height, 1);
+            const displayHeight = Math.floor(img.height * scale);
+            const displayWidth = Math.floor(img.width * scale);
+
+            contentArea.innerHTML = `<img src="${imageUrl}" alt="Shared Content" 
+              style="width: ${displayWidth}px; height: ${displayHeight}px; object-fit: contain; cursor: zoom-in;">`;
+
+            const displayedImg = contentArea.querySelector('img');
+            displayedImg.addEventListener('click', function (e) {
+              e.stopPropagation();
+              showZoom(imageUrl, false);
+            });
+          };
+          img.src = imageUrl;
+
+        } else if (contentType.startsWith('text/')) {
+          // Display text
+          const text = await response.text();
+          contentArea.innerHTML = `<div class="text-content-view" style="cursor: zoom-in;">${text.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</div>`;
+
+          const textContent = contentArea.querySelector('.text-content-view');
+          textContent.addEventListener('click', function (e) {
+            e.stopPropagation();
+            showZoom(text, true);
+          });
+        } else {
+          contentArea.innerHTML = '<p class="error">Unsupported content type</p>';
+        }
+
+      } catch (error) {
+        console.error('Error loading content:', error);
+        contentArea.innerHTML = '<p class="error">Failed to load content</p>';
+      }
+    }
+
+    function showZoom(content, isText = false) {
+      if (isText) {
+        zoomOverlay.innerHTML = `
+          <div class="zoom-text-content">${content.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</div>
+        `;
+      } else {
+        zoomOverlay.innerHTML = `<img id="zoomImage" src="${content}" alt="Zoomed Content" 
+          style="max-width: 95vw; max-height: 95vh; object-fit: contain; box-shadow: 0 0 50px rgba(51, 204, 255, 0.5);">`;
+      }
+      zoomOverlay.style.display = 'flex';
+    }
+
+    function hideZoom() {
+      zoomOverlay.style.display = 'none';
+    }
+
+    zoomOverlay.addEventListener('click', hideZoom);
+
+    document.addEventListener('keydown', function (e) {
+      if (e.key === 'Escape' || e.key === 'Esc') {
+        hideZoom();
+      }
+    });
+
+    // Load content on page load
+    loadContent();
+  </script>
+</body>
+
+</html>