Added basic editor page

2025-11-29 14:23:15 +00:00
parent 23f0578bd0
commit 02dadd613d
1 changed files with 104 additions and 0 deletions
--- a/editor.html
+++ b/editor.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Code Editor</title>
+</head>
+<body>
+    <style>
+        body {
+            display: flex;
+            height: calc(100vh-1.5vw);
+            background-color: #363636;
+            margin: 1.5vw;
+            padding: 0px;
+            overflow: hidden;
+        }
+        p{
+            color: white;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            margin: 1vw;
+        }
+        .codeEditor{
+            width: 37vw;
+            height: 85vh;
+            border-radius: 10px;
+            overflow: hidden;
+            margin-bottom: 1vw;
+        }
+        .documentationLookup{
+            width: 37vw;
+            height: 7vh;
+            border-radius: 10px;
+            overflow: hidden;
+        }
+        .canvas{
+            width: 58vw;
+            /* height: 33.75vw; */
+            aspect-ratio: 16/9;
+            border-radius: 10px;
+            overflow: hidden;
+            margin-bottom: 1vw;
+        }
+        .terminal{
+            width: 58vw;
+            height: auto;
+            flex-grow: 1;
+            border-radius: 10px;
+            overflow: hidden;
+        }
+        #terminalBlock{
+            resize: none;
+            width: 100%;
+            height: 100%;
+            background-color: #2f3129;
+        }
+        /*.left{
+            float: left;
+        }
+        .right{
+            float: right;
+        }*/
+
+        .left {
+            display: flex;
+            margin-right: 1vw;
+            flex-direction: column;
+        }
+        
+        .right {
+            display: flex;
+            flex-direction: column;
+        }
+    </style>
+    <div class="left">
+        <div class="canvas">
+            <canvas id="canvas" style="height: 100%;width:100%;background: white;"></canvas>
+        </div>
+        <div class="terminal">
+            <textarea id="terminalBlock"></textarea>
+        </div>
+    </div>
+    <div class="right">
+        <div class="codeEditor">
+            <div style="overflow: hidden; height: 4vw;width: 100%;background: #2f3129;">
+                <p style="float: left;">main.py</p>
+                <button style="height: 100%; aspect-ratio: 1/1; float: right; border-radius: 0px; border: none;padding: 1.2vw; background: #282923;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="#aaa" d="M91.2 36.9c-12.4-6.8-27.4-6.5-39.6 .7S32 57.9 32 72l0 368c0 14.1 7.5 27.2 19.6 34.4s27.2 7.5 39.6 .7l336-184c12.8-7 20.8-20.5 20.8-35.1s-8-28.1-20.8-35.1l-336-184z"/></svg></button>
+            </div>
+            <div id='editor' style="height: calc(100% - 4vw);width:100%;"></div>
+        </div>
+        <div class="documentationLookup">
+            <input type="text" placeholder="Documentation" style="height: 100%;width: 100%;background: #2f3129;border: 0px;color: white;padding-left: 1vw;"></input>
+        </div>
+    </div>
+    <script src="https://www.unpkg.com/ace-builds@latest/src-noconflict/ace.js" crossorigin="anonymous"></script>
+    <script>
+        ace.edit("editor", {
+            theme: "ace/theme/monokai",
+            mode: "ace/mode/python",
+            value: "print('Hello world!')"
+        });
+    </script>
+</body>
+</html>