Refactor statistics page and enhance logging
- 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.
This commit is contained in:
40
data/html/error.html
Normal file
40
data/html/error.html
Normal file
@@ -0,0 +1,40 @@
|
||||
<!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 - Error</title>
|
||||
<link rel="stylesheet" href="/style.css" />
|
||||
</head>
|
||||
|
||||
<body class="view-page error-page">
|
||||
<h1><a href="/" class="home-link">Black Hole Share</a> - Error</h1>
|
||||
|
||||
<div class="view-container">
|
||||
<div class="content-area">
|
||||
<div class="error-content">
|
||||
<div class="error-code">404</div>
|
||||
<p class="error-message">The page you're looking for vanished into the black hole.</p>
|
||||
<div class="error-actions">
|
||||
<a class="upload-btn action-btn" href="/">Go Home</a>
|
||||
<a class="reset-btn action-btn" href="/stats">View Stats</a>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,388 +1,373 @@
|
||||
<!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>
|
||||
<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>
|
||||
|
||||
<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, text data, or drag & drop</p>
|
||||
</div>
|
||||
<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, text 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 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" 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.html"
|
||||
style="
|
||||
<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>
|
||||
">📊 Stats</a>
|
||||
</span>
|
||||
</footer>
|
||||
|
||||
<!-- Zoom overlay -->
|
||||
<div id="zoomOverlay" class="zoom-overlay" style="display: none"></div>
|
||||
<!-- 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");
|
||||
<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;
|
||||
});
|
||||
// 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;
|
||||
// fischi20 thanks!!!
|
||||
durationSlider.addEventListener("wheel", (e) => {
|
||||
e.preventDefault();
|
||||
durationSlider.valueAsNumber += e.deltaY < 0 ? -1 : 1;
|
||||
durationValue.textContent = durationSlider.value;
|
||||
});
|
||||
|
||||
if (!contentData) {
|
||||
console.log("❌ No content to upload!");
|
||||
return;
|
||||
}
|
||||
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;
|
||||
|
||||
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}`);
|
||||
}
|
||||
if (!contentData) {
|
||||
console.log("❌ No content to upload!");
|
||||
return;
|
||||
}
|
||||
|
||||
// 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";
|
||||
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 =
|
||||
"";
|
||||
durationSlider.style.display = "";
|
||||
"none";
|
||||
durationSlider.style.display = "none";
|
||||
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;
|
||||
// Show link
|
||||
const fullLink = window.location.origin + result.link;
|
||||
uploadedLink.href = fullLink;
|
||||
uploadedLink.textContent = fullLink;
|
||||
linkContainer.style.display = "block";
|
||||
|
||||
if (isText) {
|
||||
// Display text content - ZOOM ENABLED
|
||||
uploadZone.innerHTML = `<div class="text-content" style="cursor: zoom-in;">${content
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")}</div>`;
|
||||
uploadContainer.style.height = "500px";
|
||||
uploadContainer.style.overflow = "hidden";
|
||||
// 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, "<")
|
||||
.replace(/>/g, ">")}</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";
|
||||
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) {
|
||||
const uploadedImg = uploadZone.querySelector("img");
|
||||
uploadedImg.addEventListener("click", function (e) {
|
||||
e.stopPropagation();
|
||||
showZoom(content, true);
|
||||
showZoom(content, false);
|
||||
});
|
||||
} 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;
|
||||
}
|
||||
};
|
||||
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();
|
||||
}
|
||||
});
|
||||
// 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/")) {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
uploadZone.addEventListener("dragover", function (e) {
|
||||
e.preventDefault();
|
||||
uploadZone.style.borderColor = "var(--border-hover)";
|
||||
});
|
||||
const text = e.clipboardData.getData("text");
|
||||
if (text) {
|
||||
displayContent(text, true);
|
||||
}
|
||||
});
|
||||
|
||||
uploadZone.addEventListener("dragleave", function (e) {
|
||||
uploadZone.style.borderColor = "";
|
||||
});
|
||||
// Handle drag and drop
|
||||
uploadZone.addEventListener("drop", handleDrop);
|
||||
uploadContainer.addEventListener("drop", handleDrop);
|
||||
|
||||
uploadContainer.addEventListener("dragover", function (e) {
|
||||
e.preventDefault();
|
||||
});
|
||||
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.setAttribute("tabindex", "0");
|
||||
uploadZone.addEventListener("dragover", function (e) {
|
||||
e.preventDefault();
|
||||
uploadZone.style.borderColor = "var(--border-hover)";
|
||||
});
|
||||
|
||||
window.addEventListener("focus", function () {
|
||||
uploadZone.focus();
|
||||
});
|
||||
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();
|
||||
});
|
||||
|
||||
// Improved zoom overlay functions
|
||||
function showZoom(content, isText = false) {
|
||||
if (isText) {
|
||||
zoomOverlay.innerHTML = `
|
||||
uploadZone.focus();
|
||||
|
||||
// Improved zoom overlay functions
|
||||
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 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";
|
||||
} 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";
|
||||
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();
|
||||
}
|
||||
});
|
||||
|
||||
zoomOverlay.addEventListener("click", hideZoom);
|
||||
window.addEventListener("resize", function () {
|
||||
if (currentContentData) {
|
||||
displayContent(currentContentData);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
// 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>
|
||||
</html>
|
||||
@@ -1,207 +1,258 @@
|
||||
<!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 - Statistics</title>
|
||||
<link rel="stylesheet" href="/style.css" />
|
||||
<style>
|
||||
.stats-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background-color: var(--bg-secondary);
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Black Hole Share - Statistics</title>
|
||||
<link rel="stylesheet" href="/style.css" />
|
||||
<style>
|
||||
.stats-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(140px, 170px);
|
||||
gap: 20px;
|
||||
margin-top: 20px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
border-color: var(--border-hover);
|
||||
box-shadow: 0 4px 15px rgba(0, 255, 153, 0.2);
|
||||
}
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(160px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 2.5em;
|
||||
font-weight: bold;
|
||||
color: var(--accent-cyan);
|
||||
margin: 10px 0;
|
||||
}
|
||||
.stats-request-card {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9em;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.stat-card {
|
||||
background-color: var(--bg-secondary);
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.stat-card.highlight .stat-value {
|
||||
color: var(--accent-green);
|
||||
}
|
||||
.stat-card:hover {
|
||||
border-color: var(--border-hover);
|
||||
box-shadow: 0 4px 15px rgba(0, 255, 153, 0.2);
|
||||
}
|
||||
|
||||
.recent-activity {
|
||||
margin-top: 30px;
|
||||
background-color: var(--bg-secondary);
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
}
|
||||
.stat-value {
|
||||
font-size: 1.5em;
|
||||
font-weight: bold;
|
||||
color: var(--accent-cyan);
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.recent-activity h2 {
|
||||
color: var(--accent-cyan);
|
||||
margin: 0 0 15px 0;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
.stat-label {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9em;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.activity-list {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
.stat-card.highlight .stat-value {
|
||||
color: var(--accent-green);
|
||||
}
|
||||
|
||||
.activity-item {
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid var(--inactive-gray);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.recent-activity {
|
||||
margin-top: 30px;
|
||||
background-color: var(--bg-secondary);
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.activity-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.recent-activity h2 {
|
||||
color: var(--accent-cyan);
|
||||
margin: 0 0 15px 0;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.activity-action {
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.8em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.recent-activity:hover {
|
||||
border-color: var(--border-hover);
|
||||
box-shadow: 0 4px 15px rgba(0, 255, 153, 0.2);
|
||||
}
|
||||
|
||||
.activity-action.upload {
|
||||
background-color: rgba(0, 255, 153, 0.2);
|
||||
color: var(--accent-green);
|
||||
}
|
||||
.activity-list {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
.activity-action.delete {
|
||||
background-color: rgba(255, 102, 102, 0.2);
|
||||
color: #ff6666;
|
||||
}
|
||||
.activity-item {
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid var(--inactive-gray);
|
||||
display: grid;
|
||||
grid-template-columns: 90px minmax(120px, 1fr) minmax(90px, 1fr) minmax(180px, 1fr);
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.activity-time {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.activity-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.activity-details {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.activity-action {
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.8em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
background-color: var(--border-color);
|
||||
color: var(--bg-tertiary);
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
margin-top: 20px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.activity-action.upload {
|
||||
background-color: rgba(0, 255, 153, 0.2);
|
||||
color: var(--accent-green);
|
||||
}
|
||||
|
||||
.refresh-btn:hover {
|
||||
background-color: var(--border-hover);
|
||||
}
|
||||
.activity-action.delete {
|
||||
background-color: rgba(255, 102, 102, 0.2);
|
||||
color: #ff6666;
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
color: var(--text-secondary);
|
||||
padding: 40px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
.activity-time {
|
||||
color: var(--text-secondary);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
<body class="view-page">
|
||||
<h1><a href="/" class="home-link">Black Hole Share</a> - Statistics</h1>
|
||||
.activity-details {
|
||||
color: var(--text-primary);
|
||||
display: contents;
|
||||
}
|
||||
|
||||
<div id="statsContent" class="loading">
|
||||
<p>Loading statistics...</p>
|
||||
</div>
|
||||
.activity-mime {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
<footer class="powered-by">
|
||||
<span
|
||||
>Powered by: <img src="/logo.png" alt="ICSBox" class="footer-logo"
|
||||
/></span>
|
||||
</footer>
|
||||
.activity-duration {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
<script>
|
||||
async function loadStats() {
|
||||
try {
|
||||
const response = await fetch("/api/stats");
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to load stats");
|
||||
}
|
||||
const stats = await response.json();
|
||||
renderStats(stats);
|
||||
} catch (error) {
|
||||
document.getElementById("statsContent").innerHTML = `
|
||||
.activity-time {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
background-color: var(--border-color);
|
||||
color: var(--bg-tertiary);
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
margin-top: 20px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.refresh-btn:hover {
|
||||
background-color: var(--border-hover);
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
color: var(--text-secondary);
|
||||
padding: 40px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="view-page">
|
||||
<h1><a href="/" class="home-link">Black Hole Share</a> - Statistics</h1>
|
||||
|
||||
<div id="statsContent" class="loading">
|
||||
<p>Loading statistics...</p>
|
||||
</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>
|
||||
|
||||
<script>
|
||||
async function loadStats() {
|
||||
try {
|
||||
const response = await fetch("/api/stats");
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to load stats");
|
||||
}
|
||||
const stats = await response.json();
|
||||
renderStats(stats);
|
||||
} catch (error) {
|
||||
document.getElementById("statsContent").innerHTML = `
|
||||
<p class="error">Failed to load statistics: ${error.message}</p>
|
||||
`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function formatBytes(bytes) {
|
||||
if (bytes === 0) return "0 B";
|
||||
const k = 1024;
|
||||
const sizes = ["B", "KB", "MB", "GB"];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
|
||||
}
|
||||
function formatBytes(bytes) {
|
||||
if (bytes === 0) return "0 B";
|
||||
const k = 1024;
|
||||
const sizes = ["B", "KB", "MB", "GB"];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
|
||||
}
|
||||
|
||||
function formatTime(timestamp) {
|
||||
const date = new Date(timestamp);
|
||||
return date.toLocaleString();
|
||||
}
|
||||
function formatTime(timestamp) {
|
||||
const date = new Date(timestamp);
|
||||
return date.toLocaleString("en-GB", {
|
||||
year: "numeric",
|
||||
month: "2-digit",
|
||||
day: "2-digit",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
second: "2-digit",
|
||||
hour12: false,
|
||||
});
|
||||
}
|
||||
|
||||
function renderStats(stats) {
|
||||
const html = `
|
||||
<div class="stats-container">
|
||||
<div class="stat-card highlight">
|
||||
<div class="stat-label">Active Assets</div>
|
||||
<div class="stat-value">${stats.active_assets}</div>
|
||||
function renderStats(stats) {
|
||||
const html = `
|
||||
<div class="stats-layout">
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card highlight">
|
||||
<div class="stat-label">Active Assets</div>
|
||||
<div class="stat-value">${stats.active_assets}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Total Uploads</div>
|
||||
<div class="stat-value">${stats.total_uploads}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Total Deleted</div>
|
||||
<div class="stat-value">${stats.total_deleted}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Storage Used</div>
|
||||
<div class="stat-value">${formatBytes(stats.storage_bytes)}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Images</div>
|
||||
<div class="stat-value">${stats.image_count}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Text</div>
|
||||
<div class="stat-value">${stats.text_count}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Total Uploads</div>
|
||||
<div class="stat-value">${stats.total_uploads}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Total Deleted</div>
|
||||
<div class="stat-value">${stats.total_deleted}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Storage Used</div>
|
||||
<div class="stat-value">${formatBytes(stats.storage_bytes)}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Images</div>
|
||||
<div class="stat-value">${stats.image_count}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Text</div>
|
||||
<div class="stat-value">${stats.text_count}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Avg Response</div>
|
||||
<div class="stat-value">${stats.avg_response_ms.toFixed(2)} ms</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Total Requests</div>
|
||||
|
||||
<div class="stat-card stats-request-card">
|
||||
<div class="stat-label">Total Server Requests</div>
|
||||
<div class="stat-value">${stats.total_requests}</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -209,36 +260,36 @@
|
||||
<div class="recent-activity">
|
||||
<h2>Recent Activity</h2>
|
||||
<div class="activity-list">
|
||||
${
|
||||
stats.recent_activity.length === 0
|
||||
? '<p style="color: var(--text-secondary);">No recent activity</p>'
|
||||
: stats.recent_activity
|
||||
.map(
|
||||
(item) => `
|
||||
${stats.recent_activity.length === 0
|
||||
? '<p style="color: var(--text-secondary);">No recent activity</p>'
|
||||
: stats.recent_activity
|
||||
.map(
|
||||
(item) => `
|
||||
<div class="activity-item">
|
||||
<span class="activity-action ${item.action}">${
|
||||
item.action
|
||||
}</span>
|
||||
<span class="activity-details">${item.mime} (${formatBytes(
|
||||
item.size_bytes
|
||||
)})</span>
|
||||
<span class="activity-time">${item.timestamp}</span>
|
||||
<span class="activity-action ${item.action}">${item.action
|
||||
}</span>
|
||||
<span class="activity-details">
|
||||
<span class="activity-mime">${item.mime}</span>
|
||||
<span class="activity-duration">${item.share_duration} min</span>
|
||||
</span>
|
||||
<span class="activity-time">${formatTime(item.timestamp)}</span>
|
||||
</div>
|
||||
`
|
||||
)
|
||||
.join("")
|
||||
}
|
||||
)
|
||||
.join("")
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="refresh-btn" onclick="loadStats()">Refresh</button>
|
||||
`;
|
||||
document.getElementById("statsContent").innerHTML = html;
|
||||
}
|
||||
document.getElementById("statsContent").innerHTML = html;
|
||||
}
|
||||
|
||||
loadStats();
|
||||
// Auto-refresh every 30 seconds
|
||||
setInterval(loadStats, 30000);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
loadStats();
|
||||
// Auto-refresh every 30 seconds
|
||||
setInterval(loadStats, 30000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -3,6 +3,8 @@
|
||||
--bg-primary: #1e1e2e;
|
||||
--bg-secondary: #1a1a1a;
|
||||
--bg-tertiary: #1a1a1a;
|
||||
--bg-glow: rgba(51, 204, 255, 0.08);
|
||||
--bg-glow-strong: rgba(0, 255, 153, 0.07);
|
||||
--active-cyan: #33ccff;
|
||||
--active-green: #00ff99;
|
||||
--inactive-gray: #595959;
|
||||
@@ -29,6 +31,11 @@ body {
|
||||
padding: 20px;
|
||||
padding-bottom: 140px;
|
||||
background-color: var(--bg-tertiary);
|
||||
background-image:
|
||||
radial-gradient(1200px 800px at 10% -20%, var(--bg-glow), transparent 60%),
|
||||
radial-gradient(900px 700px at 110% 0%, var(--bg-glow-strong), transparent 55%),
|
||||
linear-gradient(180deg, rgba(30, 30, 46, 0.35), rgba(26, 26, 26, 0.85));
|
||||
background-attachment: fixed;
|
||||
color: var(--text-primary);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -512,6 +519,55 @@ body.view-page {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Error page styles */
|
||||
.error-page .content-area {
|
||||
min-height: 320px;
|
||||
}
|
||||
|
||||
.error-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.error-code {
|
||||
font-size: 3.2em;
|
||||
font-weight: bold;
|
||||
color: var(--accent-cyan);
|
||||
text-shadow: 0 0 12px rgba(51, 204, 255, 0.4);
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: var(--text-secondary);
|
||||
font-size: 1.05em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.error-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
.error-actions .upload-btn,
|
||||
.error-actions .reset-btn {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
|
||||
0%,
|
||||
@@ -560,4 +616,4 @@ body.view-page {
|
||||
|
||||
.text-content-view::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--border-hover);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,8 +17,16 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="powered-by">
|
||||
<span>Powered by: <img src="/logo.png" alt="ICSBox" class="footer-logo"></span>
|
||||
<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 -->
|
||||
@@ -120,4 +128,4 @@
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user