self modifying website
dunkirk.sh
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>