Add new assets and error handling pages

- Added various icon images (128x128, 16x16, 32x32, 48x48, 64x64, 76x76 PNGs).
- Introduced logo images in JPG and PNG formats, along with an SVG version.
- Created device XML file for UPnP compatibility.
- Implemented custom 404 and 405 error pages with a Commodore 64 theme.
- Added an SVG graphic for server error representation.
- Developed CSS styles for error pages to enhance visual appeal.
- Included a favicon cursor icon.
- Added a font file for "Microgramma D Extended Bold".
- Created a WebSocket test page with interactive command execution.

public/assets/icon.svg

@@ -0,0 +1 @@
+<svg width="3in" height="3in" viewBox="0 0 629.007 629.007" xmlns="http://www.w3.org/2000/svg"><path fill="#4d4d4d" stroke="#4d4d4d" stroke-width="27.974" stroke-linecap="round" stroke-linejoin="round" d="M14.318 13.749h600.666v601.095H14.318z"/><g stroke-width=".114"><path d="M518.37 460.295l.012 74.528h74.515v-74.3z" fill="#fa574a" stroke="#fa574a" stroke-width=".46976664"/><path d="M518.369 366.903l.012 74.527h74.516v-74.3z" fill="#fc9149" stroke="#fc9149" stroke-width=".46976664"/><path d="M518.369 275.903l.012 74.527h74.516v-74.3z" fill="#ede24c" stroke="#ede24c" stroke-width=".46976664"/><path d="M518.369 184.903l.012 74.528h74.516v-74.3z" fill="#91cb41" stroke="#91cb41" stroke-width=".46976664"/><path d="M518.369 93.864l.012 74.528h74.516v-74.3z" fill="#76c4f2" stroke="#76c4f2" stroke-width=".46976664"/></g><g fill="#fffffb" stroke="#fff" stroke-width=".265"><path d="M37.092 95.066l206.612 206.612.336 233.152-207.62-.336zM496.418 95.068L289.805 301.68l-.336 233.153 207.621-.336z" stroke-width="1.0920014"/></g></svg>

public/assets/logo.svg

@@ -0,0 +1 @@
+<svg width="5in" height="2in" viewBox="0 0 1329.716 530.585" xmlns="http://www.w3.org/2000/svg"><path fill="#4d4d4d" stroke="#4d4d4d" stroke-width="27.195" stroke-linecap="round" stroke-linejoin="round" d="M13.598 13.597h1302.52v503.39H13.599z"/><g aria-label="eatloaf" style="line-height:1.25;-inkscape-font-specification:'Microgramma D Extended'" font-size="45.303" font-family="Microgramma D Extended" fill="#fff" stroke-width=".607"><path d="M611.141 459.333c-1.312 7.808-5.248 9.296-26.43 9.296-11.996 0-18.932-1.116-22.493-3.719-3.187-2.417-4.124-5.392-4.124-14.316h86.6c.187-3.718.187-7.808.187-8.924 0-19.893-2.999-29.747-10.871-36.254-8.06-6.507-18.558-8.367-48.549-8.367-28.867 0-39.926 1.86-48.548 7.81-9.373 6.506-11.997 15.244-11.997 38.856 0 22.497 2.624 31.235 11.247 37.742 8.06 5.95 20.244 8.18 45.924 8.18 47.424 0 59.608-5.949 62.045-30.304zm-53.047-26.773c.375-12.27 5.623-15.06 27.93-15.06 13.12 0 19.869 1.302 22.868 4.463 2.062 2.045 2.437 3.718 2.624 10.597zM691.18 426.983c.938-7.995 3.374-8.739 27.18-8.739 20.057 0 22.681 1.86 22.681 15.618v4.648h-1.5c-5.248-5.578-9.747-6.88-25.117-6.88-24.368 0-32.99.558-41.05 2.79-12.935 3.346-18.933 12.084-18.933 27.887 0 20.823 9.185 27.33 38.614 27.33 21.556 0 29.991-.743 35.427-2.974 5.998-2.417 9.56-5.578 12.372-11.341h1.312v12.084h31.866V434.42c0-15.989-1.875-22.682-7.498-28.631-7.498-7.437-14.246-8.739-43.3-8.739-26.618 0-41.988 1.674-49.674 5.206-10.309 5.02-14.62 11.9-15.557 24.728zm22.119 23.24c14.058 0 19.307.185 21.369.93 3.749 1.3 5.81 3.903 5.81 7.436 0 7.808-6.56 10.04-29.99 10.04-17.808 0-22.869-2.046-22.869-9.11 0-7.251 5.436-9.297 25.68-9.297zM798.4 379.201v20.265h-17.433v23.612h17.432v25.657c0 7.251 0 11.713.188 13.2.375 10.04 2.249 14.874 6.935 19.522 6.56 6.321 15.183 8.18 36.365 8.18 22.868 0 32.99-2.788 39.738-11.155 5.061-6.507 6.373-11.899 6.748-28.631h-30.366c0 9.11-.187 9.853-1.312 11.898-1.5 3.161-5.249 4.463-11.997 4.463-6.373 0-9.747-1.302-11.434-4.277-1.5-2.23-1.687-3.532-1.687-13.2v-25.657h52.485v-23.612h-52.485v-20.265zM896.996 363.398v124.008h33.177V363.398zM1005.527 397.235c-30.18 0-43.113 2.045-51.36 7.995-8.81 6.321-11.435 14.688-11.435 35.325 0 25.47 2.062 33.651 10.31 40.344 8.435 6.88 19.494 8.738 52.672 8.738 32.803 0 43.863-1.859 52.298-8.738 8.06-6.693 10.31-14.873 10.31-39.043 0-22.124-2.438-30.119-11.435-36.626-8.248-5.95-20.994-7.995-51.36-7.995zm.187 24.728c9.372 0 17.245.93 21.369 2.603 6.186 2.417 8.06 6.693 8.06 18.592 0 18.591-4.311 21.752-29.429 21.752-10.684 0-18.182-.93-22.306-2.789-5.998-2.417-7.498-6.32-7.498-18.034 0-18.778 4.499-22.124 29.804-22.124zM1114.62 426.983c.937-7.995 3.374-8.739 27.18-8.739 20.057 0 22.68 1.86 22.68 15.618v4.648h-1.499c-5.248-5.578-9.747-6.88-25.118-6.88-24.367 0-32.99.558-41.05 2.79-12.934 3.346-18.932 12.084-18.932 27.887 0 20.823 9.185 27.33 38.614 27.33 21.556 0 29.991-.743 35.427-2.974 5.998-2.417 9.56-5.578 12.371-11.341h1.312v12.084h31.866V434.42c0-15.989-1.874-22.682-7.498-28.631-7.497-7.437-14.245-8.739-43.3-8.739-26.617 0-41.987 1.674-49.673 5.206-10.31 5.02-14.62 11.9-15.558 24.728zm22.119 23.24c14.058 0 19.307.185 21.369.93 3.749 1.3 5.81 3.903 5.81 7.436 0 7.808-6.56 10.04-29.99 10.04-17.808 0-22.87-2.046-22.87-9.11 0-7.251 5.437-9.297 25.68-9.297zM1204.407 423.078h17.057v64.328h33.178v-64.328h32.616v-23.612h-32.616c.375-13.758 3.562-16.175 21.181-16.175 2.062 0 2.625 0 8.81.186v-21.752c-7.123-.372-10.497-.558-16.682-.558-22.119 0-30.554 1.86-37.677 8.366-6.748 6.136-8.248 11.155-8.81 29.933h-17.057z"/></g><g stroke-width=".268"><path d="M525.47 295.584l.12 40.101h761.114v-39.98z" fill="#fa574a" stroke="#fa574a" stroke-width="1.10436368"/><path d="M525.47 233.772l.12 40.102h761.114v-39.98z" fill="#fc9149" stroke="#fc9149" stroke-width="1.10436368"/><path d="M525.47 171.96l.12 40.102h761.114v-39.98z" fill="#ede24c" stroke="#ede24c" stroke-width="1.10436368"/><path d="M525.47 110.15l.12 40.1h761.114v-39.979z" fill="#91cb41" stroke="#91cb41" stroke-width="1.10436368"/><path d="M525.47 48.214l.12 40.102h761.114v-39.98z" fill="#76c4f2" stroke="#76c4f2" stroke-width="1.10436368"/></g><g fill="#fffffb" stroke="#fff" stroke-width=".265"><path d="M43.875 49.099L250.488 255.71l.336 233.152-207.62-.335zM503.202 49.1L296.59 255.714l-.336 233.153 207.621-.336z" stroke-width="1.0920014"/></g></svg>

public/device.xml

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8" standalone="yes"?>
+<root xmlns="urn:schemas-upnp-org:device-1-0">
+    <specVersion>
+        <major>1</major>
+        <minor>0</minor>
+    </specVersion>
+    <device>
+        <deviceType>urn:schemas-upnp-org:device:ManageableDevice:1</deviceType>
+        <UDN>uuid:SSDP-DISABLED</UDN>
+        <friendlyName>Meatloaf (Multi-device emulator)</friendlyName>
+        <manufacturer>Meatloaf</manufacturer>
+        <manufacturerURL>https://meatloaf.cc/</manufacturerURL>
+        <modelName>ML CBM 1.6.1</modelName>
+        <modelNumber>ML-CBM-1.6.1</modelNumber>
+        <modelURL>https://github.com/idolpx/meatloaf</modelURL>
+        <serialNumber>MLCBM3C214F90</serialNumber>
+        <presentationURL>http://192.168.1.185</presentationURL>
+    </device> 
+</root>

public/error/404.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Commodore 64 Boot Screen</title>
+    <link rel="stylesheet" href="error/styles.css">
+    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
+</head>
+<body>
+    <div class="boot-screen">
+        <h1>**** MEATLOAF 64 BASIC V2 ****</h1>
+		<h1>64K RAM SYSTEM  38911 BASIC BYTES FREE</h1>
+		<p>?SERVER 404  ERROR</p>
+        <p>READY.</p>
+		    <p>USE JOYSTICK IN PORT 2 TO SELECT</p>
+    <div class="help-actions">
+      <a href="javascript:location.reload();">RELOAD PAGE</a>
+      <a href="javascript:history.back();">BACK TO PREVIOUS</a>
+      <a href="/">HOME PAGE</a>
+    </div>
+    </div>
+</body>
+</html>

public/error/405.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Commodore 64 Boot Screen</title>
+    <link rel="stylesheet" href="error/styles.css">
+    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
+</head>
+<body>
+    <div class="boot-screen">
+        <h1>**** MEATLOAF 64 BASIC V2 ****</h1>
+		<h1>64K RAM SYSTEM  38911 BASIC BYTES FREE</h1>
+		<p>?SERVER 405  ERROR</p>
+        <p>READY.</p>
+    </div>
+</body>
+</html>

public/error/styles.css

@@ -0,0 +1,37 @@
+body {
+    margin: 0;
+    padding: 0;
+    background-color: #6C5EB5; /* dark blue */
+    font-family: 'Press Start 2P', cursive;
+    color: #6C5EB5; /* light blue */
+}
+
+.boot-screen {
+    text-align: center;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    border: 5px solid #6C5EB5; /* light blue */
+    padding: 20px;
+    background-color: #352879; /* black */
+    width: 80%;
+    height: 80%;
+}
+
+h1 {
+    font-size: 24px;
+    letter-spacing: 4px;
+    margin-bottom: 10px;
+}
+
+p {
+    font-size: 24px;
+	text-align: left;
+}
+
+.help-actions {
+    font-size: 24px;
+    text-align: center;
+	color: #FFFFFF; /* light blue */
+}

public/ws.html

@@ -0,0 +1,141 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+    <title>ESP32 Web Server</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" href="data:,">
+    <style>
+        html {
+            font-family: Arial, Helvetica, sans-serif;
+            text-align: center;
+        }
+
+        h1 {
+            font-size: 1.8rem;
+            color: white;
+        }
+
+        h2 {
+            font-size: 1.5rem;
+            font-weight: bold;
+            color: #07156d;
+        }
+
+        .card {
+            background-color: #F8F7F9;
+            ;
+            box-shadow: 2px 2px 12px 1px rgba(140, 140, 140, .5);
+            padding-top: 10px;
+            padding-bottom: 20px;
+        }
+        .card input {
+            width: 80%;
+            height: 2em;
+            font-size: 24px;
+            text-align: center;
+        }
+
+        .topnav {
+            overflow: hidden;
+            background-color: #4d4d4d;
+        }
+        .topnav img {
+            height: 100px;
+        }
+
+        body {
+            margin: 0;
+        }
+
+        .content {
+            padding: 30px;
+            max-width: 600px;
+            margin: 0 auto;
+        }
+
+        .button {
+            padding: 15px 50px;
+            font-size: 24px;
+            text-align: center;
+            outline: none;
+            color: #fff;
+            background-color: #0ffa6d; //green
+            border: #0ffa6d;
+            border-radius: 5px;
+            -webkit-touch-callout: none;
+            -webkit-user-select: none;
+            -khtml-user-select: none;
+            -moz-user-select: none;
+            -ms-user-select: none;
+            user-select: none;
+            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+        }
+
+        .button:active {
+            background-color: #fa0f0f;
+            transform: translateY(2px);
+        }
+
+        .state {
+            font-size: 1.5rem;
+            color: #120707;
+            font-weight: bold;
+        }
+    </style>
+    <title>Meatloaf WebSocket Test</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" href="data:,">
+</head>
+
+<body>
+    <div class="topnav">
+        <img src="assets/logo.svg" />
+        <h1>WebSocket Test</h1>
+    </div>
+    <div class="content">
+        <div class="card">
+            <h2>COMMAND</h2>
+            <input id="command" type="text"/>
+            <p><button id="button" class="button">Execute</button></p>
+        </div>
+    </div>
+    </div>
+    <script>
+        var gateway = `ws://${window.location.hostname}/ws`;
+        var websocket;
+        window.addEventListener('load', onLoad);
+        function initWebSocket() {
+            console.log('Trying to open a WebSocket connection...');
+            websocket = new WebSocket(gateway);
+            websocket.onopen = onOpen;
+            websocket.onclose = onClose;
+            websocket.onmessage = onMessage; // <-- add this line
+        }
+        function onOpen(event) {
+            console.log('Connection opened');
+        }
+        function onClose(event) {
+            console.log('Connection closed');
+            setTimeout(initWebSocket, 2000);
+        }
+        function onMessage(event) {
+            var state;
+            console.log(event.data);
+        }
+        function onLoad(event) {
+            initWebSocket();
+            initButton();
+        }
+        function initButton() {
+            document.getElementById('button').addEventListener('click', execute);
+        }
+        function execute() {
+            var command = document.getElementById('command').value;
+            console.log(command);
+            websocket.send(command);
+        }
+    </script>
+</body>
+
+</html>