Add index.html

python-processing-unit · python-processing-unit · commit f1aba26ce96c · 2025-12-15T22:06:01.000-05:00
diff --git a/SPECIFICATION.html b/SPECIFICATION.html
@@ -5,6 +5,8 @@
   <meta name="viewport" content="width=device-width,initial-scale=1" />
   <title>ASM-Lang SPECIFICATION</title>
   <style>
+    @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');
+    @import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;700&display=swap');
     body{background:#222;color:#99ddff;font-family:Open Sans, sans-serif;margin:0;padding:1rem}
     .container{max-width:1000px;margin:0 auto;text-align:justify;text-justify:inter-word}
     pre, code{background:#3c3c3c;color:inherit;font-family:Source Code Pro, monospace;padding:.25rem .5rem}
@@ -18,18 +20,6 @@
   <script id="md" type="text/markdown">
 # Abstract State Machine Language Specification
 
-<style>
-@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;700&display=swap');
-
-:root { --asm-default-text-color: rgb(153,221,255); }
-:root { --asm-default-background-color: rgb(34,34,34); }
-:root { --asm-keyword-background-color: rgb(60,60,60); }
-
-body { color: var(--asm-default-text-color); background-color: var(--asm-default-background-color); font-family: 'Open Sans', sans-serif; }
-code { color: var(--asm-default-text-color); background-color: var(--asm-keyword-background-color); font-family: 'Source Code Pro', monospace; }
-</style>
-
 <p align="center">
   <img alt="ASM-Lang icon" src="./icon.png">
 </p>
diff --git a/index.html b/index.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <title>ASM-Lang SPECIFICATION</title>
+  <style>
+    body{background:#222;color:#99ddff;font-family:Open Sans, sans-serif;margin:0;padding:1rem}
+    .container{max-width:1000px;margin:0 auto;text-align:justify;text-justify:inter-word}
+    .container h1{ text-align:center; margin-top:0; }
+    pre, code{background:#3c3c3c;color:inherit;font-family:Source Code Pro, monospace;padding:.25rem .5rem}
+    img{max-width:100%}
+  </style>
+</head>
+<body>
+  <div class="container" id="content">Rendering specification…</div>
+
+  <!-- Markdown source is embedded below. marked.js will render it into #content. -->
+  <script id="md" type="text/markdown">
+# Abstract State Machine Language
+
+<p align="center">
+  <img alt="ASM-Lang icon" src="./icon.png">
+</p>
+
+ASM-Lang is a statement-based, imperative language focused on simplicity, readability, and brevity.
+It is designed to be easy to learn and use, while still being powerful enough to handle a wide range of programming tasks.
+
+- [ASM-Lang Specification](./SPECIFICATION.html)
+- [Contribution Guide](./CONTRIBUTING.html)
+- [Unlicense](./UNLICENSE.html)
+
+  </script>
+
+  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+  <script>
+    document.addEventListener('DOMContentLoaded', function(){
+      const md = document.getElementById('md').textContent;
+      const rendered = marked.parse(md);
+      document.getElementById('content').innerHTML = rendered;
+    });
+  </script>
+</body>
+</html>
