hugo/PyCanvas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Added basic editor page

Browse Source
This commit is contained in:
Hugo H
2025-11-29 14:23:15 +00:00
parent 23f0578bd0
commit 02dadd613d
1 changed files with 104 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
editor.html Normal file
View File

@@ -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>