madebydanny.uk written in html, css, and a lot of JavaScript I don't understand madeydanny.uk
html css javascript
at main 152 lines 6.6 kB view raw
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>MBD CDN Limits - madebydanny.uk</title> 7 <script src="https://kit.fontawesome.com/0ca27f8db1.js" crossorigin="anonymous"></script> 8 <link rel="icon" href="https://public-cdn.madebydanny.uk/user-content/2026-01-30/33913bec-bc2f-4e6c-a474-2ef8f8c00197"> 9 <meta name="description" content="MBD CDN usage and upload limits."> 10 <meta property="og:title" content="MBD CDN Limits - madebydanny.uk"> 11 <meta property="og:description" content="MBD CDN usage and upload limits."> 12 <meta property="og:image" content="https://imrs.madebydanny.uk?url=https://public-cdn.madebydanny.uk/user-content/2026-01-30/cb09a559-ae35-4617-971c-9230521f7a9c.png"> 13 <meta property="og:type" content="website"> 14 <link rel="stylesheet" href="/css/cdn/limits.css"> 15</head> 16<body> 17 <header class="site-header"> 18 <h1><i class="fa-solid fa-database" style="color:#fff"></i> MBD CDN</h1> 19 <p>A simple easy to use CDN, free for life</p> 20 </header> 21 22 <div class="tabs-wrap"> 23 <div class="tab-bar"> 24 <a class="tab-btn" href="index.html"><i class="fa-solid fa-cloud-arrow-up"></i> Upload</a> 25 <a class="tab-btn" href="about.html"><i class="fa-solid fa-circle-info"></i> About</a> 26 <a class="tab-btn" href="how-it-works.html"><i class="fa-solid fa-gears"></i> How it Works</a> 27 <a class="tab-btn active" href="limits.html"><i class="fa-solid fa-gauge-high"></i> Limits</a> 28 </div> 29 30 <div class="card"> 31 <h2>Usage Limits</h2> 32 <p class="desc">Fair-use limits are in place to keep the CDN reliable and available for everyone.</p> 33 34 <div class="limits-grid"> 35 <div class="limit-card"> 36 <i class="fa-solid fa-file-arrow-up"></i> 37 <div class="limit-value" id="limit-max-file">100 MB</div> 38 <div class="limit-label">Max File Size</div> 39 <div class="limit-note">Per individual upload</div> 40 </div> 41 <div class="limit-card"> 42 <i class="fa-solid fa-hard-drive"></i> 43 <div class="limit-value" id="limit-max-bytes">-</div> 44 <div class="limit-label">Daily Storage</div> 45 <div class="limit-note">Total uploads per day</div> 46 </div> 47 <div class="limit-card"> 48 <i class="fa-solid fa-arrow-up-from-bracket"></i> 49 <div class="limit-value" id="limit-max-files">-</div> 50 <div class="limit-label">Uploads Per Day</div> 51 <div class="limit-note">Resets at midnight UTC</div> 52 </div> 53 </div> 54 55 <div class="limits-note"> 56 <i class="fa-solid fa-circle-exclamation"></i> 57 All limits reset daily at <strong>midnight UTC</strong>. They are enforced per IP to protect performance for all users. If you need higher limits, consider self-hosting the stack or get in touch via the social links in the About section. 58 </div> 59 60 <div class="usage-section"> 61 <h2>Your Usage Today</h2> 62 <div id="usage-loading" class="usage-loading">Loading your usage...</div> 63 <div id="usage-bars" style="display:none"> 64 <div class="usage-item"> 65 <div class="usage-row"> 66 <span>Files Uploaded</span> 67 <span id="usage-files-label">0 / 30</span> 68 </div> 69 <div class="usage-track"><div class="usage-fill" id="usage-files-fill" style="width:0%"></div></div> 70 </div> 71 <div class="usage-item" style="margin-top:14px"> 72 <div class="usage-row"> 73 <span>Storage Used</span> 74 <span id="usage-bytes-label">0 B / 1 GB</span> 75 </div> 76 <div class="usage-track"><div class="usage-fill" id="usage-bytes-fill" style="width:0%"></div></div> 77 </div> 78 </div> 79 </div> 80 81 <hr class="divider"> 82 83 <h2 style="font-size:1rem; margin-bottom:10px;">Accepted File Types</h2> 84 <p style="color:var(--subtext); font-size:0.85rem; line-height:1.7;"> 85 <strong style="color:var(--text)">Images:</strong> JPEG, PNG, WebP, AVIF, SVG &nbsp;&nbsp; 86 <strong style="color:var(--text)">Animated:</strong> GIF &nbsp;&nbsp; 87 <strong style="color:var(--text)">Video:</strong> MP4, WebM, MOV 88 </p> 89 </div> 90 </div> 91 92 <footer class="site-footer"> 93 &copy; <script>document.write(new Date().getFullYear())</script> <a href="https://madebydanny.uk" target="_blank">madebydanny.uk</a> 94 </footer> 95 96 <script> 97 const API = 'https://cdn.madebydanny.uk'; 98 99 function formatBytes(b) { 100 if (!b) return '0 B'; 101 const k = 1024; 102 const s = ['B','KB','MB','GB','TB']; 103 const i = Math.floor(Math.log(b) / Math.log(k)); 104 return (b / Math.pow(k, i)).toFixed(1).replace(/\.0$/, '') + ' ' + s[i]; 105 } 106 107 function fmt(n) { return Number(n).toLocaleString(); } 108 109 async function loadLimits() { 110 try { 111 const r = await fetch(`${API}/limits`); 112 const d = await r.json(); 113 if (!d.success) throw new Error(); 114 115 const { file_count, total_size, max_files, max_bytes, max_file } = d.limits; 116 117 document.getElementById('limit-max-file').textContent = formatBytes(max_file); 118 document.getElementById('limit-max-bytes').textContent = formatBytes(max_bytes); 119 document.getElementById('limit-max-files').textContent = max_files; 120 121 const filePct = Math.min((file_count / max_files) * 100, 100); 122 const bytesPct = Math.min((total_size / max_bytes) * 100, 100); 123 124 const filesFill = document.getElementById('usage-files-fill'); 125 const bytesFill = document.getElementById('usage-bytes-fill'); 126 127 filesFill.style.width = filePct + '%'; 128 bytesFill.style.width = bytesPct + '%'; 129 130 function fillClass(pct) { 131 if (pct >= 90) return 'danger'; 132 if (pct >= 70) return 'warn'; 133 return ''; 134 } 135 136 filesFill.className = 'usage-fill ' + fillClass(filePct); 137 bytesFill.className = 'usage-fill ' + fillClass(bytesPct); 138 139 document.getElementById('usage-files-label').textContent = `${fmt(file_count)} / ${fmt(max_files)}`; 140 document.getElementById('usage-bytes-label').textContent = `${formatBytes(total_size)} / ${formatBytes(max_bytes)}`; 141 142 document.getElementById('usage-loading').style.display = 'none'; 143 document.getElementById('usage-bars').style.display = 'block'; 144 } catch { 145 document.getElementById('usage-loading').textContent = 'Could not load usage data.'; 146 } 147 } 148 149 loadLimits(); 150 </script> 151</body> 152</html>