sfja/karlkoder-playground
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

beautiful

Browse Source
This commit is contained in:
Reimar 2025-08-20 20:47:30 +02:00
parent 41ec0814f7
commit 5520cd0142
No known key found for this signature in database
GPG Key ID: 93549FA07F0AE268
2 changed files with 111 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
index.html
View File

@ -11,28 +11,38 @@
<script src="./index.js" defer></script> <script src="./index.js" defer></script>
</head> </head>
<body> <body>
<div id="buttons">
<button id="start-stop">Start</button>
<button id="save">Save</button>
</div>
<main> <main>
<div id="dashboard"> <div class="column" style="flex: 1">
<canvas id="canvas-area"> <section>
</canvas> <div class="section-header">Output</div>
<div id="console"> <canvas id="canvas-area">
<pre><code id="console-code">Karlkode 1.0</code></pre> </canvas>
<input type="text" placeholder=">"> </section>
</div>
<section>
<div class="section-header">Console</div>
<div id="console">
<pre><code id="console-code">Karlkode 1.0</code></pre>
<input type="text" placeholder=">">
</div>
</section>
</div> </div>
<div id="editor-area"> <div class="column" style="flex: 3">
<pre id="editor"> <div>
<button id="start-stop">Start</button>
<button id="save">Save</button>
</div>
<section>
<div class="section-header">Code editor</div>
<div id="editor-area">
<pre id="editor">
lib.clear("green"); lib.clear("green");
@ -53,7 +63,9 @@ lib.startGameLoop(loop);
return 5; return 5;
</pre> </pre>
</div> </div>
</section>
</div>
</main> </main>

131
style.css
View File

@ -1,81 +1,114 @@
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
body { body {
margin: 0; margin: 0;
height: 100vh; height: 100vh;
background-color: #EEE;
} }
main { main {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
height: 100vh; height: 100vh;
gap: 32px;
} }
#buttons { .section-header {
width: 100%; background-color: white;
display: flex; border-top-left-radius: 8px;
flex-direction: row; border-top-right-radius: 8px;
justify-content: end; border: 1px solid #BDBDBD;
align-items: center; padding: 4px;
gap: 10px; padding-left: 8px;
font-family: sans-serif;
color: #747474;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
} }
#buttons button { section {
margin: 5px; width: 100%;
padding: 10px; flex: 1;
min-width: 100px; display: flex;
flex-direction: column;
} }
#dashboard { section *:last-child {
display: flex; border-bottom-left-radius: 8px;
flex-direction: column; border-bottom-right-radius: 8px;
gap: 5px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
width: 40vw; flex: 1;
justify-content: space-evenly; }
align-items: center;
.column {
display: flex;
flex-direction: column;
gap: 5px;
justify-content: space-evenly;
align-items: flex-start;
padding: 32px;
gap: 32px;
height: 100vh;
flex: 1;
} }
canvas { canvas {
background-color: black; background-color: black;
width: 100%; width: 100%;
} }
#console { #console {
width: 100%; display: flex;
padding: 5px; flex-direction: column;
} }
#console pre { #console pre {
color: white; color: white;
background-color: black; background-color: black;
margin: 0; margin: 0;
width: 100%; width: 100%;
font-size: 1rem; font-size: 1rem;
height: 24rem; padding: 4px 8px;
flex: 1;
} }
#console input { #console input {
width: 100%; width: 100%;
margin: 0; margin: 0;
outline: none; outline: none;
border: 2px solid white; padding: none;
padding: none; color: white;
color: white; border: none;
background-color: black; background-color: #222;
font-family: monospace; padding: 4px 8px;
font-size: 1rem; font-family: monospace;
font-size: 1rem;
flex-grow: 0;
} }
#editor-area { #editor-area {
width: 100%; width: 100%;
height: 100%;
} }
#editor { #editor {
margin: 0; margin: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 16px; font-size: 16px;
} }
button {
background-color: #4FC3F7;
border: none;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
padding: 8px 16px;
border-radius: 8px;
cursor: pointer;
transition-duration: 200ms;
}
button:hover {
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}