1 files changed, 32 insertions, 9 deletions
diff --git a/html/playground/index.html b/html/playground/index.html
index a55ede3..d987c22 100644
--- a/html/playground/index.html
+++ b/html/playground/index.html
@@ -5,11 +5,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>JavaScript Playground</title>
     <style>
-    
+        /*
         @font-face {
             font-family: "APL386";
             src: url("./APL386.ttf") format("truetype");
         }
+        */
 
         body {
             display: flex;
@@ -53,7 +54,7 @@
             width: 100%;
             height: 22%;
             background-color: #000;
-            color: teal;
+            color: #0fc;
             font-family: monospace;
             font-size: 1rem;
             overflow-y: auto;
@@ -92,6 +93,8 @@
 <body>
 
     <div class="button-container">
+        <button onclick="document.getElementById('codeInput').value='';window.location.hash='';">Clear</button>
+        <button onclick="downloadCodeAndEditor()">Download</button>
         <button onclick="shareCode()">Share</button>
         <button onclick="evaluateCode()" class="run">Run Code</button>
     </div>
@@ -99,13 +102,6 @@
     <div id="console"></div>
 
     <script>
-        document.getElementById('codeInput').addEventListener('keydown', function(event) {
-            if (event.metaKey && event.key === 'Enter') {
-                event.preventDefault();
-                evaluateCode();
-            }
-        });
-
         function evaluateCode() {
             const code = document.getElementById('codeInput').value;
             const consoleDiv = document.getElementById('console');
@@ -135,10 +131,29 @@
             console.log = originalConsoleLog;
         }
 
+        function downloadCodeAndEditor() {
+            const codeInput = document.getElementById('codeInput').value;
+            const htmlContent = document.documentElement.outerHTML.replace(
+                /<textarea id="codeInput"[^>]*>.*<\/textarea>/,
+                `<textarea id="codeInput">${codeInput}</textarea>`
+            );
+
+            const blob = new Blob([htmlContent], { type: 'text/html' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = 'code_editor.html';
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url);
+        }
+
         function shareCode() {
             const code = document.getElementById('codeInput').value;
             const encodedCode = btoa(encodeURIComponent(code));
             window.location.hash = encodedCode;
+            window.prompt("Copy the URL to share.\nBe warned! Very long URLs don't share wicked well, sometimes.", window.location.href);
         }
 
         function loadCodeFromHash() {
@@ -153,8 +168,16 @@
             }
         }
 
+        document.getElementById('codeInput').addEventListener('keydown', function(event) {
+            if (event.metaKey && event.key === 'Enter') {
+                event.preventDefault();
+                evaluateCode();
+            }
+        });
+
         window.onload = loadCodeFromHash;
     </script>
+    </script>
 
 </body>
 </html>