danielmorrisey.com
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>How MBD CDN Works - 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="How uploads and delivery work in the MBD CDN.">
10 <meta property="og:title" content="How MBD CDN Works - madebydanny.uk">
11 <meta property="og:description" content="How uploads and delivery work in the MBD CDN.">
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 <style>
15 :root {
16 --bg: #121212;
17 --card-bg: #4a2b32;
18 --stat-bg: #2a1a21;
19 --text: #fff;
20 --subtext: #dcbaba;
21 --link: #ffcccc;
22 --border: rgba(255,255,255,0.1);
23 }
24
25 * { box-sizing: border-box; margin: 0; padding: 0; }
26 body {
27 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
28 background: var(--bg);
29 color: var(--text);
30 line-height: 1.5;
31 min-height: 100vh;
32 }
33
34 a { color: var(--link); text-decoration: none; }
35 a:hover { text-decoration: underline; }
36
37 .site-header {
38 text-align: center;
39 padding: 44px 20px 10px;
40 max-width: 900px;
41 margin: 0 auto;
42 }
43
44 .site-header h1 { font-size: 2rem; margin-bottom: 8px; }
45 .site-header p { color: var(--subtext); font-size: 0.95rem; }
46
47 .tabs-wrap { max-width: 900px; margin: 20px auto 0; padding: 0 20px; }
48 .tab-bar {
49 display: flex;
50 gap: 4px;
51 border-bottom: 1px solid var(--border);
52 overflow-x: auto;
53 scrollbar-width: none;
54 }
55 .tab-bar::-webkit-scrollbar { display: none; }
56 .tab-btn {
57 font-size: 0.9rem;
58 font-weight: 600;
59 color: var(--subtext);
60 border-bottom: 2px solid transparent;
61 padding: 10px 18px;
62 white-space: nowrap;
63 margin-bottom: -1px;
64 display: inline-block;
65 }
66 .tab-btn.active { color: var(--link); border-bottom-color: var(--link); }
67
68 .card {
69 background: var(--card-bg);
70 border: 1px solid var(--border);
71 border-radius: 16px;
72 padding: 32px;
73 box-shadow: 0 6px 12px rgba(0,0,0,0.35);
74 margin-top: 26px;
75 }
76
77 .card h2 { font-size: 1.25rem; margin-bottom: 8px; }
78 .desc { color: var(--subtext); font-size: 0.9rem; margin-bottom: 20px; }
79
80 .steps { display: grid; gap: 12px; margin-bottom: 22px; }
81 .step {
82 display: grid;
83 grid-template-columns: 34px 1fr;
84 gap: 12px;
85 background: rgba(0,0,0,0.18);
86 border: 1px solid var(--border);
87 border-radius: 12px;
88 padding: 12px;
89 }
90 .step-num {
91 width: 34px;
92 height: 34px;
93 border-radius: 50%;
94 background: #623640;
95 border: 1px solid var(--border);
96 display: grid;
97 place-items: center;
98 font-weight: 700;
99 color: var(--link);
100 }
101 .step-body h3 { font-size: 1rem; margin-bottom: 4px; }
102 .step-body p { color: var(--subtext); font-size: 0.9rem; }
103
104 .how-grid {
105 display: grid;
106 grid-template-columns: repeat(3, minmax(0, 1fr));
107 gap: 12px;
108 margin-top: 18px;
109 }
110
111 .how-card {
112 background: linear-gradient(135deg, var(--stat-bg) 0%, #3f242b 100%);
113 border: 1px solid var(--border);
114 border-radius: 12px;
115 padding: 16px;
116 }
117
118 .how-card i { color: var(--link); font-size: 1.2rem; margin-bottom: 8px; }
119 .how-card h3 { font-size: 0.95rem; margin-bottom: 4px; }
120 .how-card p { color: var(--subtext); font-size: 0.83rem; }
121
122 .site-footer {
123 max-width: 900px;
124 margin: 26px auto 40px;
125 padding: 0 20px;
126 text-align: center;
127 color: var(--subtext);
128 font-size: 0.85rem;
129 }
130
131 @media (max-width: 780px) {
132 .how-grid { grid-template-columns: 1fr; }
133 .card { padding: 24px; }
134 }
135 </style>
136</head>
137<body>
138 <header class="site-header">
139 <h1><i class="fa-solid fa-database" style="color:#fff"></i> MBD CDN</h1>
140 <p>A simple easy to use CDN, free for life</p>
141 </header>
142
143 <div class="tabs-wrap">
144 <div class="tab-bar">
145 <a class="tab-btn" href="index.html"><i class="fa-solid fa-cloud-arrow-up"></i> Upload</a>
146 <a class="tab-btn" href="about.html"><i class="fa-solid fa-circle-info"></i> About</a>
147 <a class="tab-btn active" href="how-it-works.html"><i class="fa-solid fa-gears"></i> How it Works</a>
148 <a class="tab-btn" href="limits.html"><i class="fa-solid fa-gauge-high"></i> Limits</a>
149 </div>
150
151 <div class="card">
152 <h2>How it Works</h2>
153 <p class="desc">From the moment you click Upload to the moment someone loads your file - here's what happens.</p>
154
155 <div class="steps">
156 <div class="step">
157 <div class="step-num">1</div>
158 <div class="step-body">
159 <h3>You select a file</h3>
160 <p>Your file is read locally in the browser and sent directly to the CDN API over HTTPS. It goes straight to the Cloudflare edge - no intermediate servers involved.</p>
161 </div>
162 </div>
163 <div class="step">
164 <div class="step-num">2</div>
165 <div class="step-body">
166 <h3>The Worker receives it</h3>
167 <p>A Cloudflare Worker handles the upload at the edge. It assigns a UUID filename, detects the file type, and streams the body directly into R2 object storage - with no cold starts and near-instant response times.</p>
168 </div>
169 </div>
170 <div class="step">
171 <div class="step-num">3</div>
172 <div class="step-body">
173 <h3>R2 stores it permanently</h3>
174 <p>The file is written to Cloudflare R2 - S3-compatible storage with zero egress fees and 11 nines of durability. Upload metadata is logged to D1 (Cloudflare's edge SQL database) to track stats.</p>
175 </div>
176 </div>
177 <div class="step">
178 <div class="step-num">4</div>
179 <div class="step-body">
180 <h3>You get a public URL</h3>
181 <p>A permanent <code style="font-size:0.8rem;color:var(--link)">public-cdn.madebydanny.uk</code> link is returned instantly. Anyone with it can access the file - served from whichever Cloudflare PoP is closest to them.</p>
182 </div>
183 </div>
184 </div>
185
186 <div class="how-grid">
187 <div class="how-card">
188 <i class="fa-brands fa-cloudflare"></i>
189 <h3>310+ Edge Locations</h3>
190 <p>Files are cached and served globally - sub-50ms for most users regardless of where they are.</p>
191 </div>
192 <div class="how-card">
193 <i class="fa-solid fa-database"></i>
194 <h3>R2 Object Storage</h3>
195 <p>Zero egress fees, no expiry. Files are stored in Cloudflare R2 with enterprise-grade durability.</p>
196 </div>
197 <div class="how-card">
198 <i class="fa-solid fa-bolt"></i>
199 <h3>Zero Cold Starts</h3>
200 <p>Workers run at the edge with no spin-up delay - every upload and file request is handled immediately.</p>
201 </div>
202 </div>
203 </div>
204 </div>
205
206 <footer class="site-footer">
207 © <script>document.write(new Date().getFullYear())</script> <a href="https://madebydanny.uk" target="_blank">madebydanny.uk</a>
208 </footer>
209</body>
210</html>