dunkirk.sh
self modifying website
feat: add basic site
+419
index.html
+419
index.html
···
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>C:\PLASTIC.EXE - Self-Modifying System</title>
7
+
<style>
8
+
@import url("https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap");
9
+
10
+
body {
11
+
background: #f0f0f0;
12
+
font-family: "Courier Prime", "Courier New", monospace;
13
+
color: #000000;
14
+
margin: 0;
15
+
padding: 20px;
16
+
line-height: 1.2;
17
+
font-size: 14px;
18
+
}
19
+
20
+
.terminal {
21
+
background: #ffffff;
22
+
border: 2px solid #808080;
23
+
box-shadow:
24
+
inset -2px -2px #c0c0c0,
25
+
inset 2px 2px #404040;
26
+
max-width: 800px;
27
+
margin: 0 auto;
28
+
padding: 0;
29
+
}
30
+
31
+
.title-bar {
32
+
background: #c0c0c0;
33
+
color: #000000;
34
+
padding: 4px 8px;
35
+
font-weight: bold;
36
+
border-bottom: 1px solid #808080;
37
+
font-size: 12px;
38
+
}
39
+
40
+
.content {
41
+
padding: 10px;
42
+
background: #ffffff;
43
+
}
44
+
45
+
.prompt {
46
+
color: #000000;
47
+
margin: 0;
48
+
}
49
+
50
+
.cursor {
51
+
background: #000000;
52
+
color: #ffffff;
53
+
animation: blink 1s infinite;
54
+
}
55
+
56
+
@keyframes blink {
57
+
0%,
58
+
50% {
59
+
opacity: 1;
60
+
}
61
+
51%,
62
+
100% {
63
+
opacity: 0;
64
+
}
65
+
}
66
+
67
+
h1 {
68
+
color: #000000;
69
+
font-size: 24px;
70
+
margin: 10px 0;
71
+
text-transform: uppercase;
72
+
}
73
+
74
+
h2 {
75
+
color: #000000;
76
+
font-size: 16px;
77
+
margin: 15px 0 5px 0;
78
+
text-transform: uppercase;
79
+
}
80
+
81
+
.command {
82
+
color: #ffffff;
83
+
background: #808080;
84
+
padding: 2px 4px;
85
+
display: inline-block;
86
+
margin: 2px;
87
+
}
88
+
89
+
.button {
90
+
background: #c0c0c0;
91
+
color: #000000;
92
+
border: 2px outset #c0c0c0;
93
+
padding: 4px 8px;
94
+
font-family: inherit;
95
+
font-size: 12px;
96
+
cursor: pointer;
97
+
margin: 5px 2px;
98
+
display: inline-block;
99
+
text-decoration: none;
100
+
text-transform: uppercase;
101
+
}
102
+
103
+
.button:active {
104
+
border: 2px inset #c0c0c0;
105
+
}
106
+
107
+
.button:hover {
108
+
background: #d0d0d0;
109
+
}
110
+
111
+
.editor {
112
+
width: calc(100% - 20px);
113
+
height: 150px;
114
+
background: #0000ff;
115
+
color: #ffffff;
116
+
font-family: inherit;
117
+
margin: 10px 0;
118
+
padding: 10px;
119
+
border: 2px inset #c0c0c0;
120
+
font-size: 12px;
121
+
resize: none;
122
+
}
123
+
124
+
.status-bar {
125
+
background: #c0c0c0;
126
+
color: #000000;
127
+
padding: 2px 8px;
128
+
border-top: 1px solid #808080;
129
+
font-size: 11px;
130
+
display: flex;
131
+
justify-content: space-between;
132
+
}
133
+
134
+
.file-listing {
135
+
margin: 10px 0;
136
+
}
137
+
138
+
.file-line {
139
+
margin: 2px 0;
140
+
font-family: inherit;
141
+
}
142
+
143
+
.dir {
144
+
color: #000080;
145
+
}
146
+
147
+
.exe {
148
+
color: #000000;
149
+
}
150
+
151
+
.txt {
152
+
color: #000000;
153
+
}
154
+
155
+
.error {
156
+
color: #ffffff;
157
+
background: #ff0000;
158
+
padding: 2px 4px;
159
+
}
160
+
161
+
ul {
162
+
margin: 5px 0;
163
+
padding-left: 20px;
164
+
}
165
+
166
+
li {
167
+
margin: 2px 0;
168
+
}
169
+
170
+
.separator {
171
+
color: #808080;
172
+
margin: 10px 0;
173
+
}
174
+
175
+
.ascii-art {
176
+
color: #000000;
177
+
font-size: 10px;
178
+
line-height: 1;
179
+
white-space: pre;
180
+
margin: 10px 0;
181
+
}
182
+
</style>
183
+
</head>
184
+
<body>
185
+
<div class="terminal">
186
+
<div class="title-bar">
187
+
C:\PLASTIC.EXE - [Self-Modifying System v2.1]
188
+
</div>
189
+
190
+
<div class="content">
191
+
<p class="prompt">C:\PLASTIC> DIR</p>
192
+
193
+
<div class="file-listing">
194
+
<div class="file-line">
195
+
Volume in drive C is PLASTIC-SYS
196
+
</div>
197
+
<div class="file-line">Directory of C:\PLASTIC</div>
198
+
<div class="file-line"></div>
199
+
<div class="file-line">
200
+
<span class="dir">SYSTEM <DIR></span> 12-15-95
201
+
3:42p
202
+
</div>
203
+
<div class="file-line">
204
+
<span class="exe">PLASTIC EXE</span> 24,576 12-15-95
205
+
3:42p
206
+
</div>
207
+
<div class="file-line">
208
+
<span class="txt">README TXT</span> 1,024 12-15-95 3:42p
209
+
</div>
210
+
<div class="file-line">
211
+
<span class="txt">CONFIG SYS</span> 512 12-15-95 3:42p
212
+
</div>
213
+
<div class="file-line">4 File(s) 26,112 bytes</div>
214
+
<div class="file-line">524,288 bytes free</div>
215
+
</div>
216
+
217
+
<p class="prompt">C:\PLASTIC> PLASTIC.EXE</p>
218
+
219
+
<pre class="ascii-art">
220
+
██████╗ ██╗ █████╗ ███████╗████████╗██╗ ██████╗
221
+
██╔══██╗██║ ██╔══██╗██╔════╝╚══██╔══╝██║██╔════╝
222
+
██████╔╝██║ ███████║███████╗ ██║ ██║██║
223
+
██╔═══╝ ██║ ██╔══██║╚════██║ ██║ ██║██║
224
+
██║ ███████╗██║ ██║███████║ ██║ ██║╚██████╗
225
+
╚═╝ ╚══════╝╚═╝ ╚═╝╚══════╝ ╚═╝ ╚═╝ ╚═════╝</pre
226
+
>
227
+
228
+
<h2>System Information:</h2>
229
+
<p>PLASTIC v2.1 - Self-Modifying Code System</p>
230
+
<p>Copyright (C) 1995 DUNKIRK Corp.</p>
231
+
<p>
232
+
All rights reserved. Licensed to: REGISTERED USER under MIT
233
+
</p>
234
+
235
+
<div class="separator">
236
+
════════════════════════════════════════════════════════════
237
+
</div>
238
+
239
+
<h2>About This System:</h2>
240
+
<p>
241
+
PLASTIC.EXE is an experimental self-modifying executable
242
+
that allows real-time code injection and system
243
+
modification. WARNING: Use at your own risk. System may
244
+
become unstable.
245
+
</p>
246
+
247
+
<h2>Experimental Code Generator:</h2>
248
+
<p>Describe changes to make to the page:</p>
249
+
<textarea
250
+
class="editor"
251
+
id="codeEditor"
252
+
placeholder="e.g., 'Add a retro calculator widget', 'Change theme to green terminal', or 'Completely redesign as a DOS file manager'"
253
+
></textarea>
254
+
<div class="button" onclick="generateAndExecute()">
255
+
GENERATE & EXECUTE
256
+
</div>
257
+
<div class="button" onclick="clearEditor()">CLEAR</div>
258
+
<div
259
+
id="statusDisplay"
260
+
style="color: #000080; margin-top: 10px"
261
+
></div>
262
+
263
+
<h2>System Features:</h2>
264
+
<ul>
265
+
<li>
266
+
Real-time <span class="command">EXEC</span> code
267
+
modification
268
+
</li>
269
+
<li>Compatible with DOS 6.22 and Windows 95</li>
270
+
<li>640K memory optimized</li>
271
+
<li>No TSR conflicts detected</li>
272
+
<li>Supports EGA/VGA graphics modes</li>
273
+
</ul>
274
+
275
+
<h2>System Commands:</h2>
276
+
<p>
277
+
<span class="command">HELP</span>
278
+
<span class="command">DIR</span>
279
+
<span class="command">EDIT</span>
280
+
<span class="command">RUN</span>
281
+
<span class="command">EXIT</span>
282
+
</p>
283
+
284
+
<div class="separator">
285
+
════════════════════════════════════════════════════════════
286
+
</div>
287
+
288
+
<p>Runtime: 00:13:37 | Memory: 589K free | CPU: 80486DX-33</p>
289
+
<p class="error">
290
+
WARNING: Unauthorized modification may corrupt system files
291
+
</p>
292
+
293
+
<p class="prompt">C:\PLASTIC> <span class="cursor">_</span></p>
294
+
</div>
295
+
296
+
<div class="status-bar">
297
+
<span>F1=Help F2=Save F3=Load F10=Menu</span>
298
+
<span>12:34 PM</span>
299
+
</div>
300
+
</div>
301
+
302
+
<script>
303
+
async function generateAndExecute() {
304
+
const userPrompt = document.getElementById("codeEditor").value;
305
+
const statusDiv = document.getElementById("statusDisplay");
306
+
307
+
if (userPrompt.trim() === "") {
308
+
statusDiv.textContent = "ERROR: No description provided";
309
+
return;
310
+
}
311
+
312
+
statusDiv.textContent = "CONNECTING TO AI SYSTEM...";
313
+
314
+
try {
315
+
const currentPageHTML = document.documentElement.outerHTML;
316
+
317
+
const response = await fetch(
318
+
"https://ai.hackclub.com/chat/completions",
319
+
{
320
+
method: "POST",
321
+
headers: {
322
+
"Content-Type": "application/json",
323
+
},
324
+
body: JSON.stringify({
325
+
messages: [
326
+
{
327
+
role: "user",
328
+
content: `Here is the current HTML page:\n\n${currentPageHTML}\n\nUser request: "${userPrompt}"\n\nGenerate HTML code that fits the DOS/retro terminal aesthetic for this request. Use flat colors like #00ff41 (green), #ffff00 (yellow), #00ffff (cyan), #ffffff (white), #c0c0c0 (gray), #000080 (blue), and #ff0000 (red). Use monospace fonts and simple borders. Make it look like it belongs in a 1990s DOS program. Only return the HTML code to add, no explanations.`,
329
+
},
330
+
],
331
+
}),
332
+
},
333
+
);
334
+
335
+
if (!response.ok) {
336
+
throw new Error(
337
+
`HTTP ${response.status}: ${response.statusText}`,
338
+
);
339
+
}
340
+
341
+
statusDiv.textContent = "AI PROCESSING...";
342
+
343
+
const data = await response.json();
344
+
console.log("API Response:", data); // Debug log
345
+
346
+
let generatedCode;
347
+
if (
348
+
data.choices &&
349
+
data.choices[0] &&
350
+
data.choices[0].message
351
+
) {
352
+
generatedCode = data.choices[0].message.content;
353
+
} else if (data.content) {
354
+
generatedCode = data.content;
355
+
} else if (data.response) {
356
+
generatedCode = data.response;
357
+
} else if (typeof data === "string") {
358
+
generatedCode = data;
359
+
} else {
360
+
throw new Error("Unexpected API response format");
361
+
}
362
+
363
+
// Clean up the code (remove markdown formatting if present)
364
+
let cleanCode = generatedCode
365
+
.replace(/```html\n?/g, "")
366
+
.replace(/```\n?/g, "");
367
+
368
+
statusDiv.textContent = "INJECTING CODE...";
369
+
370
+
// Insert the generated code
371
+
document.querySelector(".content").innerHTML += cleanCode;
372
+
document.getElementById("codeEditor").value = "";
373
+
374
+
statusDiv.textContent = "CODE EXECUTION SUCCESSFUL";
375
+
376
+
// Clear status after 3 seconds
377
+
setTimeout(() => {
378
+
statusDiv.textContent = "";
379
+
}, 3000);
380
+
} catch (error) {
381
+
statusDiv.textContent = `SYSTEM ERROR: ${error.message}`;
382
+
console.error("Error:", error);
383
+
}
384
+
}
385
+
386
+
function clearEditor() {
387
+
document.getElementById("codeEditor").value = "";
388
+
document.getElementById("statusDisplay").textContent = "";
389
+
}
390
+
391
+
// Handle Ctrl+Enter in textarea
392
+
document.addEventListener("DOMContentLoaded", function () {
393
+
document
394
+
.getElementById("codeEditor")
395
+
.addEventListener("keydown", function (e) {
396
+
if (e.ctrlKey && e.key === "Enter") {
397
+
e.preventDefault();
398
+
generateAndExecute();
399
+
}
400
+
});
401
+
});
402
+
403
+
// Update time in status bar
404
+
setInterval(() => {
405
+
const now = new Date();
406
+
const timeStr = now.toLocaleTimeString([], {
407
+
hour: "2-digit",
408
+
minute: "2-digit",
409
+
});
410
+
const statusBarTime = document.querySelector(
411
+
".status-bar span:last-child",
412
+
);
413
+
if (statusBarTime) {
414
+
statusBarTime.textContent = timeStr;
415
+
}
416
+
}, 1000);
417
+
</script>
418
+
</body>
419
+
</html>