madebydanny.uk written in html, css, and a lot of JavaScript I don't understand
madebydanny.uk
html
css
javascript
i did a thing
+513
-196
+351
-2
cdn.html
+351
-2
cdn.html
···
1
-
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
2
-
If you wish to use the MBD CDN please email cdn@danielmorrisey.com
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 - madebydanny.uk</title>
7
+
<script src="https://kit.fontawesome.com/0ca27f8db1.js" crossorigin="anonymous"></script>
8
+
<link rel="icon" href="https://imrs.madebydanny.uk/?url=https://cloudflareisawesome.madebydanny.uk/madebydanny.uk/seo/favicon.webp">
9
+
<meta name="description" content="Private Cloudflare R2 Storage for madebydanny.uk">
10
+
<meta property="og:title" content="MBD CDN - madebydanny.uk">
11
+
<meta property="og:description" content="Private Cloudflare R2 Storage">
12
+
<meta property="og:type" content="website">
13
+
14
+
<style>
15
+
/* --- THEME VARIABLES (Matching your site) --- */
16
+
:root {
17
+
--card-bg: #4a2b32;
18
+
--post-bg: #1e1e1e;
19
+
--text-color: #ffffff;
20
+
--subtext-color: #dcbaba;
21
+
--link-color: #ffcccc;
22
+
--border: rgba(255,255,255,0.1);
23
+
--success-green: #34c759;
24
+
--error-red: #ff6b6b;
25
+
}
26
+
27
+
body {
28
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
29
+
background-color: #121212;
30
+
color: var(--text-color);
31
+
padding: 20px;
32
+
line-height: 1.5;
33
+
margin: auto;
34
+
text-align: center;
35
+
max-width: 600px;
36
+
}
37
+
38
+
h1 {
39
+
font-weight: 700;
40
+
letter-spacing: -1px;
41
+
margin-bottom: 8px;
42
+
}
43
+
44
+
p {
45
+
color: var(--subtext-color);
46
+
margin-top: 0;
47
+
}
48
+
49
+
a {
50
+
color: var(--link-color);
51
+
text-decoration: none;
52
+
}
53
+
54
+
a:hover {
55
+
text-decoration: underline;
56
+
}
57
+
58
+
/* --- UPLOADER STYLING --- */
59
+
.upload-card {
60
+
background-color: var(--card-bg);
61
+
border: 1px solid var(--border);
62
+
border-radius: 12px;
63
+
padding: 30px;
64
+
margin: 40px auto;
65
+
box-shadow: 0 4px 6px rgba(0,0,0,0.3);
66
+
}
67
+
68
+
.file-input-label {
69
+
display: block;
70
+
border: 2px dashed var(--border);
71
+
border-radius: 12px;
72
+
padding: 40px 20px;
73
+
cursor: pointer;
74
+
transition: all 0.2s ease;
75
+
color: var(--subtext-color);
76
+
}
77
+
78
+
.file-input-label:hover {
79
+
border-color: var(--link-color);
80
+
background: rgba(255,255,255,0.02);
81
+
}
82
+
83
+
.file-input-label i {
84
+
font-size: 2rem;
85
+
margin-bottom: 10px;
86
+
display: block;
87
+
}
88
+
89
+
#file-input {
90
+
display: none;
91
+
}
92
+
93
+
button {
94
+
background: var(--text-color);
95
+
color: #000000;
96
+
border: none;
97
+
padding: 12px 24px;
98
+
border-radius: 999px;
99
+
font-weight: 600;
100
+
margin-top: 20px;
101
+
cursor: pointer;
102
+
width: 100%;
103
+
transition: transform 0.1s ease;
104
+
}
105
+
106
+
button:hover {
107
+
transform: translateY(-2px);
108
+
}
109
+
110
+
button:active {
111
+
transform: scale(0.98);
112
+
}
113
+
114
+
button:disabled {
115
+
opacity: 0.5;
116
+
cursor: not-allowed;
117
+
}
118
+
119
+
/* --- RESULT AREA --- */
120
+
#result {
121
+
margin-top: 20px;
122
+
display: none;
123
+
text-align: left;
124
+
background: var(--post-bg);
125
+
padding: 15px;
126
+
border-radius: 8px;
127
+
word-break: break-all;
128
+
border: 1px solid var(--border);
129
+
}
130
+
131
+
#result small {
132
+
color: var(--subtext-color);
133
+
}
134
+
135
+
#url-text {
136
+
margin: 5px 0;
137
+
font-family: monospace;
138
+
font-size: 0.9rem;
139
+
}
140
+
141
+
.copy-btn {
142
+
background: rgba(255,255,255,0.04);
143
+
color: var(--link-color);
144
+
border: 1px solid var(--border);
145
+
font-size: 0.9rem;
146
+
padding: 8px 14px;
147
+
width: auto;
148
+
margin-top: 10px;
149
+
}
150
+
151
+
.copy-btn:hover {
152
+
background: rgba(255,255,255,0.08);
153
+
border-color: var(--link-color);
154
+
}
155
+
156
+
hr {
157
+
border: none;
158
+
border-top: 1px solid var(--border);
159
+
margin: 30px 0;
160
+
}
161
+
162
+
.status-msg {
163
+
margin-top: 10px;
164
+
font-size: 0.9rem;
165
+
color: var(--link-color);
166
+
}
167
+
168
+
/* --- SOCIAL BUTTONS --- */
169
+
.social-row {
170
+
display: flex;
171
+
gap: 10px;
172
+
flex-wrap: wrap;
173
+
margin: 12px 0 20px 0;
174
+
justify-content: center;
175
+
}
176
+
177
+
.social-btn {
178
+
display: inline-flex;
179
+
align-items: center;
180
+
justify-content: center;
181
+
gap: 8px;
182
+
padding: 8px 14px;
183
+
border-radius: 999px;
184
+
background: rgba(255,255,255,0.04);
185
+
color: var(--text-color);
186
+
text-decoration: none;
187
+
border: 1px solid var(--border);
188
+
font-size: 0.95rem;
189
+
flex: 0 0 auto;
190
+
min-width: 44px;
191
+
transition: all 0.2s ease;
192
+
}
193
+
194
+
.social-btn:hover {
195
+
background: rgba(255,255,255,0.08);
196
+
transform: translateY(-2px);
197
+
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
198
+
}
199
+
200
+
.social-btn i {
201
+
width: 1.1em;
202
+
text-align: center;
203
+
font-size: 1.05em;
204
+
}
205
+
206
+
.social-btn .label {
207
+
display: inline-block;
208
+
opacity: 1;
209
+
transform: translateX(0);
210
+
margin-left: 8px;
211
+
white-space: nowrap;
212
+
color: inherit;
213
+
font-weight: 600;
214
+
font-size: 0.95rem;
215
+
max-width: 180px;
216
+
overflow: hidden;
217
+
vertical-align: middle;
218
+
}
219
+
220
+
#file-name {
221
+
display: block;
222
+
margin-top: 8px;
223
+
}
224
+
</style>
225
+
</head>
226
+
<body>
227
+
228
+
<h1>MBD CDN</h1>
229
+
<p>
230
+
The MBD CDN is a network of servers located around the world powered by the Cloudflare global network.
231
+
<br>
232
+
It's designed to deliver media <i>(images, videos, live broadcasts, etc)</i> at extremely fast speeds with 100% uptime
233
+
</p>
234
+
235
+
<div class="upload-card">
236
+
<label for="file-input" class="file-input-label" id="drop-zone">
237
+
<span id="file-name">Click to select or drag file here</span>
238
+
</label>
239
+
<input type="file" id="file-input">
240
+
241
+
<button id="upload-btn">Upload to MBD CDN <i class="fa-solid fa-cloud-arrow-up"></i></button>
242
+
<div id="status" class="status-msg"></div>
243
+
244
+
<div id="result">
245
+
<small>Public URL:</small>
246
+
<div id="url-text"></div>
247
+
<button class="copy-btn" onclick="copyUrl()">Copy URL</button>
248
+
</div>
249
+
</div>
250
+
251
+
<hr>
252
+
<p><b>Social Links:</b></p>
253
+
<div id="social-links"></div>
254
+
<hr>
255
+
<div id="site-footer"></div>
256
+
<script src="/js/social-links.js"></script>
257
+
258
+
<script>
259
+
const fileInput = document.getElementById('file-input');
260
+
const fileNameDisp = document.getElementById('file-name');
261
+
const uploadBtn = document.getElementById('upload-btn');
262
+
const status = document.getElementById('status');
263
+
const result = document.getElementById('result');
264
+
const urlText = document.getElementById('url-text');
265
+
const dropZone = document.getElementById('drop-zone');
266
+
267
+
// Update UI when file selected
268
+
fileInput.addEventListener('change', () => {
269
+
if (fileInput.files.length > 0) {
270
+
fileNameDisp.innerText = fileInput.files[0].name;
271
+
}
272
+
});
273
+
274
+
// Drag and drop support
275
+
dropZone.addEventListener('dragover', (e) => {
276
+
e.preventDefault();
277
+
dropZone.style.borderColor = 'var(--link-color)';
278
+
dropZone.style.background = 'rgba(255,255,255,0.02)';
279
+
});
280
+
281
+
dropZone.addEventListener('dragleave', (e) => {
282
+
e.preventDefault();
283
+
dropZone.style.borderColor = '';
284
+
dropZone.style.background = '';
285
+
});
286
+
287
+
dropZone.addEventListener('drop', (e) => {
288
+
e.preventDefault();
289
+
dropZone.style.borderColor = '';
290
+
dropZone.style.background = '';
291
+
292
+
if (e.dataTransfer.files.length > 0) {
293
+
fileInput.files = e.dataTransfer.files;
294
+
fileNameDisp.innerText = e.dataTransfer.files[0].name;
295
+
}
296
+
});
297
+
298
+
uploadBtn.addEventListener('click', async () => {
299
+
if (fileInput.files.length === 0) {
300
+
status.innerText = "Please select a file first.";
301
+
status.style.color = 'var(--error-red)';
302
+
return;
303
+
}
304
+
305
+
const file = fileInput.files[0];
306
+
uploadBtn.disabled = true;
307
+
uploadBtn.innerText = "Uploading...";
308
+
status.innerText = "";
309
+
result.style.display = 'none';
310
+
311
+
try {
312
+
// Point this to your Worker URL
313
+
const response = await fetch('https://cdn.madebydanny.uk', {
314
+
method: 'POST',
315
+
body: file,
316
+
headers: {
317
+
'Content-Type': file.type || 'application/octet-stream'
318
+
}
319
+
});
320
+
321
+
const data = await response.json();
322
+
323
+
if (data.success) {
324
+
result.style.display = 'block';
325
+
urlText.innerText = data.url;
326
+
status.style.color = 'var(--success-green)';
327
+
status.innerText = "Upload successful!";
328
+
} else {
329
+
throw new Error(data.error || "Upload failed");
330
+
}
331
+
} catch (err) {
332
+
status.style.color = 'var(--error-red)';
333
+
status.innerText = "Error: " + err.message;
334
+
} finally {
335
+
uploadBtn.disabled = false;
336
+
uploadBtn.innerText = "Upload to R2";
337
+
}
338
+
});
339
+
340
+
function copyUrl() {
341
+
navigator.clipboard.writeText(urlText.innerText);
342
+
const copyBtn = document.querySelector('.copy-btn');
343
+
const originalText = copyBtn.innerText;
344
+
copyBtn.innerText = "Copied!";
345
+
setTimeout(() => {
346
+
copyBtn.innerText = originalText;
347
+
}, 2000);
348
+
}
349
+
</script>
350
+
</body>
351
+
</html>
+162
-194
css/cdn.css
+162
-194
css/cdn.css
···
1
-
:root {
2
-
--bg: #121212;
3
-
--panel: #1e1e1e;
4
-
--muted: #888;
5
-
--text: #e0e0e0;
6
-
--accent: #f71900;
7
-
--radius: 12px;
8
-
--gap: 20px;
9
-
}
1
+
/* --- THEME VARIABLES --- */
2
+
:root {
3
+
--bsky-card-bg: #4a2b32;
4
+
--bsky-post-bg: #1e1e1e;
5
+
--bsky-text-color: #ffffff;
6
+
--bsky-subtext-color: #dcbaba;
7
+
--bsky-link-color: #ffcccc;
8
+
--bsky-border: rgba(255,255,255,0.1);
9
+
}
10
10
11
-
body {
12
-
font-family: 'Fira Code', monospace;
13
-
background-color: var(--bg);
14
-
color: var(--text);
15
-
margin: 40px;
16
-
line-height: 1.6;
17
-
}
11
+
body {
12
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
13
+
background-color: #121212;
14
+
color: white;
15
+
padding: 20px;
16
+
line-height: 1.5;
17
+
margin: auto;
18
+
text-align: center;
19
+
max-width: 600px;
20
+
}
18
21
19
-
.center {
20
-
max-width: 800px;
21
-
margin: 0 auto;
22
-
}
22
+
/* --- CARD STYLING --- */
23
+
#music-status-card, #latest-post-card {
24
+
background-color: var(--bsky-card-bg);
25
+
color: var(--bsky-text-color);
26
+
border-radius: 12px;
27
+
padding: 16px;
28
+
margin: 20px auto;
29
+
display: none;
30
+
box-shadow: 0 4px 6px rgba(0,0,0,0.3);
31
+
max-width: 500px;
32
+
border: 1px solid var(--bsky-border);
33
+
text-align: center;
34
+
}
23
35
24
-
h1 {
25
-
text-align: center;
26
-
margin-bottom: 10px;
27
-
}
36
+
.bsky-header {
37
+
font-size: 0.75rem;
38
+
text-transform: uppercase;
39
+
letter-spacing: 0.05em;
40
+
color: var(--bsky-subtext-color);
41
+
margin-bottom: 12px;
42
+
display: flex;
43
+
justify-content: center;
44
+
align-items: center;
45
+
gap: 8px;
46
+
}
28
47
29
-
p {
30
-
text-align: center;
31
-
color: var(--muted);
32
-
}
48
+
.bsky-header a {
49
+
color: var(--bsky-subtext-color);
50
+
text-decoration: none;
51
+
}
33
52
34
-
ul, ol {
35
-
color: var(--text);
36
-
padding-left: 20px;
37
-
}
53
+
.bsky-content-body {
54
+
margin-bottom: 12px;
55
+
word-wrap: break-word;
56
+
text-align: center;
57
+
}
38
58
39
-
li {
40
-
margin-bottom: 6px;
41
-
}
59
+
/* --- POST IMAGE STYLING --- */
60
+
.post-image {
61
+
width: 100%;
62
+
border-radius: 8px;
63
+
margin: 10px auto 0 auto;
64
+
border: 1px solid var(--bsky-border);
65
+
display: block;
66
+
}
42
67
43
-
a {
44
-
color: var(--accent);
45
-
text-decoration: none;
46
-
}
47
-
/* Card */
48
-
.card {
49
-
background-color: var(--panel);
50
-
padding: 22px;
51
-
border-radius: var(--radius);
52
-
margin-top: 20px;
53
-
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
54
-
transition: transform 0.3s ease, box-shadow 0.3s ease;
55
-
}
56
-
.card:hover {
57
-
transform: translateY(-4px);
58
-
box-shadow: 0 8px 16px rgba(0,0,0,0.25);
59
-
}
68
+
.bsky-trackname {
69
+
font-weight: 700;
70
+
font-size: 1.1rem;
71
+
display: block;
72
+
color: var(--bsky-text-color);
73
+
text-decoration: none;
74
+
margin-bottom: 2px;
75
+
}
60
76
61
-
.heading {
62
-
font-size: 18px;
63
-
margin-bottom: 14px;
64
-
font-weight: 600;
65
-
}
77
+
.bsky-artist {
78
+
color: var(--bsky-subtext-color);
79
+
font-size: 0.95rem;
80
+
}
66
81
67
-
/* Drop Zone */
68
-
.drop-zone {
69
-
background-color: #2a2a2a;
70
-
border: 2px dashed #444;
71
-
border-radius: var(--radius);
72
-
padding: 30px;
73
-
text-align: center;
74
-
margin-bottom: 18px;
75
-
cursor: pointer;
76
-
transition: border-color 0.3s ease, background-color 0.3s ease;
77
-
}
78
-
.drop-zone.drag-over {
79
-
border-color: var(--accent);
80
-
background-color: #1b1b1b;
81
-
}
82
-
.drop-zone p {
83
-
margin: 0;
84
-
color: var(--muted);
85
-
}
82
+
.bsky-footer {
83
+
border-top: 1px solid var(--bsky-border);
84
+
padding-top: 10px;
85
+
margin-top: 12px;
86
+
font-size: 0.8rem;
87
+
color: var(--bsky-subtext-color);
88
+
display: flex;
89
+
align-items: center;
90
+
justify-content: center;
91
+
gap: 8px;
92
+
}
86
93
87
-
/* Checkbox + Button */
88
-
.checkbox-label {
89
-
display: flex;
90
-
align-items: center;
91
-
gap: 8px;
92
-
color: var(--text);
93
-
font-size: 14px;
94
-
margin-bottom: 16px;
95
-
}
94
+
a { color: var(--bsky-link-color); }
95
+
96
+
.error-msg {
97
+
color: #ff6b6b;
98
+
font-size: 0.9rem;
99
+
}
100
+
101
+
hr {
102
+
border: none;
103
+
border-top: 1px solid var(--bsky-border);
104
+
margin: 20px 0;
105
+
}
96
106
97
-
.btn {
98
-
background: var(--accent);
99
-
color: white;
100
-
border: none;
101
-
border-radius: 8px;
102
-
padding: 10px 16px;
103
-
font-family: 'Fira Code', monospace;
104
-
cursor: pointer;
105
-
transition: background 0.2s ease, transform 0.2s ease, filter 0.2s ease;
106
-
display: flex;
107
-
align-items: center;
108
-
justify-content: center;
109
-
gap: 6px;
110
-
width: 100%;
111
-
}
112
-
.btn:hover {
113
-
filter: brightness(1.15);
114
-
transform: translateY(-2px);
115
-
}
107
+
/* Social button row */
108
+
.social-row {
109
+
display: flex;
110
+
gap: 10px;
111
+
flex-wrap: wrap;
112
+
margin: 12px 0 20px 0;
113
+
justify-content: center;
114
+
}
116
115
117
-
.result {
118
-
margin-top: 16px;
119
-
text-align: center;
120
-
word-break: break-all;
121
-
}
122
-
.result a {
123
-
color: var(--accent);
124
-
}
116
+
.social-btn {
117
+
display: inline-flex;
118
+
align-items: center;
119
+
justify-content: center;
120
+
gap: 8px;
121
+
padding: 8px 14px; /* keep expanded size by default */
122
+
border-radius: 999px;
123
+
background: rgba(255,255,255,0.04);
124
+
color: var(--bsky-text-color);
125
+
text-decoration: none;
126
+
border: 1px solid var(--bsky-border);
127
+
font-size: 0.95rem;
128
+
flex: 0 0 auto; /* don't stretch; allow pushing */
129
+
min-width: 44px;
130
+
transition: all 0.2s ease;
131
+
}
132
+
133
+
.social-btn:hover {
134
+
background: var(--btn-bg);
135
+
border-color: var(--btn-border);
136
+
transform: translateY(-2px);
137
+
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
138
+
}
125
139
126
-
/* Stats Section */
127
-
.stats {
128
-
margin-top: 10px;
129
-
display: flex;
130
-
justify-content: center;
131
-
gap: 1rem;
132
-
flex-wrap: wrap;
133
-
margin-bottom: 1rem;
134
-
}
135
-
.stat-box {
136
-
background: var(--panel);
137
-
border-radius: 10px;
138
-
padding: 0.8rem 1.2rem;
139
-
text-align: center;
140
-
min-width: calc(33% - 3rem);
141
-
}
142
-
.stat-box p {
143
-
margin: 0;
144
-
font-size: 13px;
145
-
color: var(--muted);
146
-
}
147
-
.stat-box h1 {
148
-
margin: 4px 0 0 0;
149
-
color: var(--accent);
150
-
font-weight: 600;
151
-
font-size: 20px;
152
-
}
140
+
.social-btn i {
141
+
width: 1.1em;
142
+
text-align: center;
143
+
font-size: 1.05em;
144
+
}
153
145
154
-
/* Features / Docs Section */
155
-
.features-card ul,
156
-
.docs-card ol {
157
-
margin: 0;
158
-
padding-left: 20px;
159
-
}
160
-
.features-card li,
161
-
.docs-card li {
162
-
margin-bottom: 8px;
163
-
}
146
+
/* label hidden by default, revealed on hover */
147
+
.social-btn .label {
148
+
display: inline-block;
149
+
/* always visible (no hover reveal) */
150
+
opacity: 1;
151
+
transform: translateX(0);
152
+
margin-left: 8px;
153
+
white-space: nowrap;
154
+
color: inherit;
155
+
font-weight: 600;
156
+
font-size: 0.95rem;
157
+
max-width: 180px;
158
+
overflow: hidden;
159
+
vertical-align: middle;
160
+
}
161
+
162
+
/* hover styles removed - buttons are static */
164
163
165
-
/* Footer */
166
-
footer {
167
-
text-align: center;
168
-
margin-top: 40px;
169
-
}
170
-
hr {
171
-
border: 0;
172
-
height: 1px;
173
-
background: #333;
174
-
margin: 30px 0;
175
-
}
164
+
/* brand color variables per button */
165
+
.btn-bluesky { --btn-bg: #0077ff; --btn-border: rgba(0,119,255,0.6); }
166
+
.btn-instagram { --btn-bg: #E1306C; --btn-border: rgba(225,48,108,0.5); }
167
+
.btn-tangled { --btn-bg: #000000; --btn-border: rgba(107,114,128,0.4); }
168
+
.btn-threads { --btn-bg: #000000; --btn-border: rgba(17,24,39,0.4); }
169
+
.btn-mastodon { --btn-bg: #6364FF; --btn-border: rgba(48,136,212,0.4); }
176
170
177
-
/* Optional responsive tweaks */
178
-
@media (max-width: 600px) {
179
-
body {
180
-
margin: 20px;
181
-
}
182
-
.stats {
183
-
flex-direction: column;
184
-
align-items: center;
185
-
}
186
-
.stat-box {
187
-
min-width: unset;
188
-
width: 80%;
189
-
}
190
-
}
191
-
header2 {
192
-
display: flex;
193
-
justify-content: space-between;
194
-
align-items: center;
195
-
max-width: 900px;
196
-
margin: 0 auto 1.5rem;
197
-
}
198
-
header2 h1 {
199
-
font-size: 1.2rem;
200
-
margin: 0;
201
-
color: var(--accent);
202
-
}
203
-
nav a {
204
-
color: #eaeaea;
205
-
text-decoration: none;
206
-
margin-left: 1rem;
207
-
}
208
-
nav a:hover {
209
-
color: var(--accent);
210
-
}
171
+
/* Screen-reader only text (keep for accessibility) */
172
+
.sr-only {
173
+
position: absolute !important;
174
+
height: 1px; width: 1px;
175
+
overflow: hidden;
176
+
clip: rect(1px, 1px, 1px, 1px);
177
+
white-space: nowrap;
178
+
}