first
This commit is contained in:
341
data/html/index.html
Normal file
341
data/html/index.html
Normal file
@@ -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, '<').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';
|
||||
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, '<').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';
|
||||
}
|
||||
|
||||
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>
|
||||
Reference in New Issue
Block a user