madebydanny.uk written in html, css, and a lot of JavaScript I don't understand
madeydanny.uk
html
css
javascript
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
86 <strong style="color:var(--text)">Animated:</strong> GIF
87 <strong style="color:var(--text)">Video:</strong> MP4, WebM, MOV
88 </p>
89 </div>
90 </div>
91
92 <footer class="site-footer">
93 © <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>