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

28
index.html
View File

@ -11,26 +11,36 @@
<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">
<section>
<div class="section-header">Output</div>
<canvas id="canvas-area"> <canvas id="canvas-area">
</canvas> </canvas>
</section>
<section>
<div class="section-header">Console</div>
<div id="console"> <div id="console">
<pre><code id="console-code">Karlkode 1.0</code></pre> <pre><code id="console-code">Karlkode 1.0</code></pre>
<input type="text" placeholder=">"> <input type="text" placeholder=">">
</div> </div>
</section>
</div> </div>
<div class="column" style="flex: 3">
<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"> <div id="editor-area">
<pre id="editor"> <pre id="editor">
@ -54,6 +64,8 @@ lib.startGameLoop(loop);
return 5; return 5;
</pre> </pre>
</div> </div>
</section>
</div>
</main> </main>

69
style.css
View File

@ -5,36 +5,52 @@
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 {
background-color: white;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border: 1px solid #BDBDBD;
padding: 4px;
padding-left: 8px;
font-family: sans-serif;
color: #747474;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
}
section {
width: 100%; width: 100%;
flex: 1;
display: flex; display: flex;
flex-direction: row; flex-direction: column;
justify-content: end;
align-items: center;
gap: 10px;
} }
#buttons button { section *:last-child {
margin: 5px; border-bottom-left-radius: 8px;
padding: 10px; border-bottom-right-radius: 8px;
min-width: 100px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
flex: 1;
} }
#dashboard { .column {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 5px; gap: 5px;
width: 40vw;
justify-content: space-evenly; justify-content: space-evenly;
align-items: center; align-items: flex-start;
padding: 32px;
gap: 32px;
height: 100vh;
flex: 1;
} }
canvas { canvas {
@ -43,8 +59,8 @@ canvas {
} }
#console { #console {
width: 100%; display: flex;
padding: 5px; flex-direction: column;
} }
#console pre { #console pre {
@ -53,24 +69,26 @@ canvas {
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;
background-color: black; border: none;
background-color: #222;
padding: 4px 8px;
font-family: monospace; font-family: monospace;
font-size: 1rem; font-size: 1rem;
flex-grow: 0;
} }
#editor-area { #editor-area {
width: 100%; width: 100%;
height: 100%;
} }
#editor { #editor {
@ -79,3 +97,18 @@ canvas {
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);
}