From 5520cd01420b8d53082b00791a8ca6ff964b9097 Mon Sep 17 00:00:00 2001 From: Reimar Date: Wed, 20 Aug 2025 20:47:30 +0200 Subject: [PATCH] beautiful --- index.html | 46 ++++++++++++------- style.css | 131 +++++++++++++++++++++++++++++++++-------------------- 2 files changed, 111 insertions(+), 66 deletions(-) diff --git a/index.html b/index.html index 1e2cab8..da2ad97 100644 --- a/index.html +++ b/index.html @@ -11,28 +11,38 @@ - - -
- - -
-
-
+
- - +
+
Output
-
- 
Karlkode 1.0
- -
+ + +
+ +
+
Console
+ +
+ 
Karlkode 1.0
+ +
+
-
- 
+		

+			

+				
+				
+			

+
+			

+				
Code editor

+
+				

+					
 
 lib.clear("green");
 
@@ -53,7 +63,9 @@ lib.startGameLoop(loop);
 
 return 5;
 

-        

+				

+			
+
diff --git a/style.css b/style.css index 033cdc0..43e2252 100644 --- a/style.css +++ b/style.css @@ -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); +} +