icsboyx
cde83139b1
- Updated the layout and styling of the statistics page for better responsiveness and visual appeal. - Introduced a new error page for 404 errors with user-friendly messaging and navigation options. - Enhanced logging functionality to capture detailed events related to asset uploads, deletions, and HTTP requests. - Implemented an AssetTracker to manage assets in memory, allowing for efficient tracking and retrieval. - Improved the API for uploading and retrieving assets, ensuring better error handling and response formatting. - Added auto-refresh functionality to the statistics page to keep data up-to-date.
132 lines
4.3 KiB
HTML
132 lines
4.3 KiB
HTML
<!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" style="display: flex; align-items: center">
|
|
<span style="flex: 1"></span>
|
|
<span>Powered by: <img src="/logo.png" alt="ICSBox" class="footer-logo" /></span>
|
|
<span style="flex: 1; text-align: right">
|
|
<a href="/stats" style="
|
|
color: var(--text-secondary);
|
|
font-size: 0.8em;
|
|
text-decoration: none;
|
|
">📊 Stats</a>
|
|
</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, '<').replace(/>/g, '>')}</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, '<').replace(/>/g, '>')}</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>
|