Modernise webpage (#9)

Derpius · web-flow · commit e8e2af4e9292 · 2021-10-03T17:24:13.000-07:00
diff --git a/static/index.html b/static/index.html
@@ -1,56 +1,39 @@
 <!DOCTYPE html>
 
+<html lang="en">
 <head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta http-equiv="X-UA-Compatible" content="ie=edge">
+
 	<title>ExpressionScript Playground</title>
+	<link rel="stylesheet" href="style.css">
 </head>
-
-<div class="header">
-	Basic ExpressionScript Playground
-</div>
-
 <body>
-	<textarea id="input" onkeydown="if(event.keyCode===9){var v=this.value,s=this.selectionStart,e=this.selectionEnd;this.value=v.substring(0, s)+'    '+v.substring(e);this.selectionStart=this.selectionEnd=s+4;return false;}" rows=50>
-@name Example Code
+	<div class="header">Basic ExpressionScript Playground</div>
+	<div class="editors">
+		<textarea id="input" onkeydown="onEditInput(this, event)" rows=50>@name Example Code
 print("Hello world!")
 
 for(I = 1, 5) {
 	if(I == 4) { continue }
 	print(I)
-}
-
-	</textarea>
-
-	<textarea readonly id="output" rows=50> </textarea>
-
-	<center>
-		<button id="transpile">Transpile!</button>
-	</center>
-
+}</textarea>
+
+		<textarea readonly id="output" rows=50></textarea>
+	</div>
+	<div class="footer"><button id="transpile">Transpile</button></div>
+
+	<script>
+		function onEditInput(element, event) {
+			if (event.keyCode === 9) {
+				const v = element.value, s = element.selectionStart, e = element.selectionEnd;
+				element.value = v.substring(0, s) + '    ' + v.substring(e);
+				element.selectionStart = element.selectionEnd = s + 4;
+				return false;
+			}
+		}
+	</script>
 	<script src="out.js"></script>
 </body>
-
-<style>
-	textarea {
-		width: 40%;
-		margin-left: 50px;
-		background-color: #39464e;
-		border: none;
-		outline: none;
-		color: lightslategray;
-	}
-	body {
-		margin: 0;
-		background-color:#1f2227;
-		display: block;
-		color: lightslategray;
-	}
-
-	div.header {
-		text-align: center;
-		background-color: #1f1f7a;
-		color: #ebebfa;
-		padding: 0;
-		height: 50px;
-		margin: 0;
-	}
-</style>
+</html>
diff --git a/static/style.css b/static/style.css
@@ -0,0 +1,92 @@
+:root {
+	--primary: #2e3031;
+	--primary-font: rgb(118, 78, 134);
+
+	--editor: #262727;
+	--editor-font: rgb(216, 220, 224);
+
+	--button: rgb(118, 78, 134);
+	--button-font: rgb(216, 220, 224);
+
+	font-size: 20px;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+
+html,body {
+	margin: 0;
+	padding: 0;
+	width: 100vw;
+	height: 100vh;
+}
+
+body {
+	display: flex;
+	flex-direction: column;
+
+	background-color: var(--primary);
+	color: var(--primary-font);
+
+	overflow: hidden;
+}
+
+.header {
+	text-align: center;
+	margin-top: 5px;
+
+	font-size: 2em;
+	font-weight: 300;
+	letter-spacing: 0.1em;
+}
+
+.editors {
+	flex: 1;
+	min-height: 5em;
+
+	display: flex;
+	flex-direction: row;
+}
+textarea {
+	flex: 1;
+
+	margin: 10px;
+	padding: 5px;
+
+	background-color: var(--editor);
+	color: var(--editor-font);
+
+	resize: none;
+
+	border: none;
+	outline: none;
+
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
+}
+
+.footer {
+	display: grid;
+	justify-content: center;
+	align-items: center;
+
+	padding-bottom: 10px;
+
+	flex-shrink: 0;
+}
+
+button {
+	border: 0;
+	border-radius: 5px;
+	padding: 3px;
+
+	background-color: var(--button);
+	color: var(--button-font);
+
+	font-size: 1.5em;
+}
+button:hover {
+	filter: brightness(110%);
+}
+button:active {
+	filter: brightness(90%);
+}
