diff --git a/cdn.html b/cdn.html index f5eefa9..ffc93da 100644 --- a/cdn.html +++ b/cdn.html @@ -5,14 +5,15 @@ MBD CDN - madebydanny.uk - - + + - + + -

MBD CDN

+

MBD CDN

The MBD CDN is a network of servers located around the world powered by the Cloudflare global network.
- It's designed to deliver media (images, videos, live broadcasts, etc) at extremely fast speeds with 100% uptime + It's designed to deliver media (images, videos, live broadcasts, etc) at extremely fast speeds with 100% uptime.

+ +
+
+
+
--
+
Images
+
+
+
+
--
+
Videos
+
+
+
+
--
+
GIFs
+
+
+
+
--
+
Storage Used
+
+
+ +
- +
+
File:
+
Size:
+
Type:
+
+ +
+
+
+
+
+ +
- Public URL: + ✅ Public URL:
- +
-

Social Links:

+

Quick Links:

@@ -263,53 +484,119 @@ const result = document.getElementById('result'); const urlText = document.getElementById('url-text'); const dropZone = document.getElementById('drop-zone'); + const fileInfo = document.getElementById('file-info'); + const progressContainer = document.getElementById('progress-container'); + const progressFill = document.getElementById('progress-fill'); + + // Format bytes to human readable + function formatBytes(bytes) { + if (bytes === 0) return '0 Bytes'; + const k = 1024; + const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']; + const i = Math.floor(Math.log(bytes) / Math.log(k)); + return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i]; + } + + // Format large numbers + function formatNumber(num) { + return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); + } + + // Load statistics + async function loadStats() { + try { + const response = await fetch('https://cdn.madebydanny.uk/stats'); + const data = await response.json(); + + if (data.success) { + document.getElementById('stat-images').innerText = formatNumber(data.stats.images); + document.getElementById('stat-videos').innerText = formatNumber(data.stats.videos); + document.getElementById('stat-gifs').innerText = formatNumber(data.stats.gifs); + document.getElementById('stat-storage').innerText = formatBytes(data.stats.totalSize); + + // Remove loading state + document.querySelectorAll('.stat-value').forEach(el => { + el.classList.remove('stat-loading'); + }); + } + } catch (err) { + console.error('Failed to load stats:', err); + document.querySelectorAll('.stat-value').forEach(el => { + el.innerText = '—'; + el.classList.remove('stat-loading'); + }); + } + } + + // Load stats on page load + loadStats(); // Update UI when file selected fileInput.addEventListener('change', () => { if (fileInput.files.length > 0) { - fileNameDisp.innerText = fileInput.files[0].name; + const file = fileInput.files[0]; + fileNameDisp.innerText = file.name; + + // Show file info + document.getElementById('detail-name').innerText = file.name; + document.getElementById('detail-size').innerText = formatBytes(file.size); + document.getElementById('detail-type').innerText = file.type || 'Unknown'; + fileInfo.classList.add('show'); } }); // Drag and drop support dropZone.addEventListener('dragover', (e) => { e.preventDefault(); - dropZone.style.borderColor = 'var(--link-color)'; - dropZone.style.background = 'rgba(255,255,255,0.02)'; + dropZone.classList.add('drag-over'); }); dropZone.addEventListener('dragleave', (e) => { e.preventDefault(); - dropZone.style.borderColor = ''; - dropZone.style.background = ''; + dropZone.classList.remove('drag-over'); }); dropZone.addEventListener('drop', (e) => { e.preventDefault(); - dropZone.style.borderColor = ''; - dropZone.style.background = ''; + dropZone.classList.remove('drag-over'); if (e.dataTransfer.files.length > 0) { fileInput.files = e.dataTransfer.files; - fileNameDisp.innerText = e.dataTransfer.files[0].name; + const file = e.dataTransfer.files[0]; + fileNameDisp.innerText = file.name; + + // Show file info + document.getElementById('detail-name').innerText = file.name; + document.getElementById('detail-size').innerText = formatBytes(file.size); + document.getElementById('detail-type').innerText = file.type || 'Unknown'; + fileInfo.classList.add('show'); } }); uploadBtn.addEventListener('click', async () => { if (fileInput.files.length === 0) { - status.innerText = "Please select a file first."; + status.innerText = "⚠️ Please select a file first."; status.style.color = 'var(--error-red)'; return; } const file = fileInput.files[0]; uploadBtn.disabled = true; - uploadBtn.innerText = "Uploading..."; + uploadBtn.innerHTML = ' Uploading...'; status.innerText = ""; - result.style.display = 'none'; + result.classList.remove('show'); + progressContainer.classList.add('show'); + progressFill.style.width = '0%'; + + // Simulate progress + let progress = 0; + const progressInterval = setInterval(() => { + progress += Math.random() * 15; + if (progress > 90) progress = 90; + progressFill.style.width = progress + '%'; + }, 200); try { - // Point this to your Worker URL const response = await fetch('https://cdn.madebydanny.uk', { method: 'POST', body: file, @@ -318,32 +605,52 @@ } }); + clearInterval(progressInterval); + progressFill.style.width = '100%'; + const data = await response.json(); if (data.success) { - result.style.display = 'block'; + result.classList.add('show'); urlText.innerText = data.url; status.style.color = 'var(--success-green)'; - status.innerText = "Upload successful!"; + status.innerText = "✅ Upload successful!"; + + // Reload stats + setTimeout(() => loadStats(), 500); + + // Reset form after 3 seconds + setTimeout(() => { + fileInput.value = ''; + fileNameDisp.innerText = 'Click to select or drag file here'; + fileInfo.classList.remove('show'); + progressContainer.classList.remove('show'); + }, 3000); } else { throw new Error(data.error || "Upload failed"); } } catch (err) { + clearInterval(progressInterval); + progressContainer.classList.remove('show'); status.style.color = 'var(--error-red)'; - status.innerText = "Error: " + err.message; + status.innerText = "❌ Error: " + err.message; } finally { uploadBtn.disabled = false; - uploadBtn.innerText = "Upload to R2"; + uploadBtn.innerHTML = ' Upload to MBD CDN'; } }); function copyUrl() { navigator.clipboard.writeText(urlText.innerText); const copyBtn = document.querySelector('.copy-btn'); - const originalText = copyBtn.innerText; - copyBtn.innerText = "Copied!"; + const originalHTML = copyBtn.innerHTML; + copyBtn.innerHTML = ' Copied!'; + copyBtn.style.background = 'var(--success-green)'; + copyBtn.style.color = '#000'; setTimeout(() => { - copyBtn.innerText = originalText; + copyBtn.innerHTML = originalHTML; + copyBtn.style.background = ''; + copyBtn.style.color = ''; }, 2000); }