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>
</head>
<body>
<div id="buttons">
<button id="start-stop">Start</button>
<button id="save">Save</button>
</div>
<main>
<div id="dashboard">
<div class="column" style="flex: 1">
<canvas id="canvas-area">
</canvas>
<section>
<div class="section-header">Output</div>
<div id="console">
<pre><code id="console-code">Karlkode 1.0</code></pre>
<input type="text" placeholder=">">
</div>
<canvas id="canvas-area">
</canvas>
</section>
<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 id="editor-area">
<pre id="editor">
<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">
<pre id="editor">
lib.clear("green");
@ -53,7 +63,9 @@ lib.startGameLoop(loop);
return 5;
</pre>
</div>
</div>
</section>
</div>
</main>

131
style.css
View File

@ -1,81 +1,114 @@
* {
box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
height: 100vh;
margin: 0;
height: 100vh;
background-color: #EEE;
}
main {
display: flex;
flex-direction: row;
height: 100vh;
display: flex;
flex-direction: row;
height: 100vh;
gap: 32px;
}
#buttons {
width: 100%;
display: flex;
flex-direction: row;
justify-content: end;
align-items: center;
gap: 10px;
.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);
}
#buttons button {
margin: 5px;
padding: 10px;
min-width: 100px;
section {
width: 100%;
flex: 1;
display: flex;
flex-direction: column;
}
#dashboard {
display: flex;
flex-direction: column;
gap: 5px;
width: 40vw;
justify-content: space-evenly;
align-items: center;
section *:last-child {
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
flex: 1;
}
.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 {
background-color: black;
width: 100%;
background-color: black;
width: 100%;
}
#console {
width: 100%;
padding: 5px;
display: flex;
flex-direction: column;
}
#console pre {
color: white;
background-color: black;
margin: 0;
width: 100%;
font-size: 1rem;
height: 24rem;
color: white;
background-color: black;
margin: 0;
width: 100%;
font-size: 1rem;
padding: 4px 8px;
flex: 1;
}
#console input {
width: 100%;
margin: 0;
outline: none;
border: 2px solid white;
padding: none;
color: white;
background-color: black;
font-family: monospace;
font-size: 1rem;
width: 100%;
margin: 0;
outline: none;
padding: none;
color: white;
border: none;
background-color: #222;
padding: 4px 8px;
font-family: monospace;
font-size: 1rem;
flex-grow: 0;
}
#editor-area {
width: 100%;
height: 100%;
width: 100%;
}
#editor {
margin: 0;
width: 100%;
height: 100%;
font-size: 16px;
margin: 0;
width: 100%;
height: 100%;
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);
}