first

2026-01-06 10:10:36 +01:00
commit 6a0f1771f6
15 changed files with 3295 additions and 0 deletions
--- 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>