ground/gride
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Client style updates

Browse Source
This commit is contained in:
Maxwell
2025-09-25 09:07:44 +10:00
parent b677b9f507
commit 2dc3992566
3 changed files with 51 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
client/index.css Normal file
View File

@@ -0,0 +1,39 @@
p {
line-height: 0.3;
}
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
button {
font-family: monospace;
background-color: #48156e;
color: #e6e8ff;
border: 0px;
border-radius: 2px;
}
.left {
height: 100%;
width: 70%;
padding: 10px;
background-color: #331d42;
color: #e6e8ff;
position: absolute;
overflow: scroll;
}
.right {
height: 100%;
width: 30%;
padding: 10px;
background-color: #1b0f24;
color: #e6e8ff;
position: absolute;
right: 0;
}

14
client/index.html
View File

@@ -3,14 +3,16 @@
<head>
<title>gride</title>
<script src="index.js"></script>
<style>
p {
line-height: 0.3;
}
</style>
<link rel="stylesheet" href="index.css">
</head>
<body>
<button onclick="runCode()">Run</button>
<div class="left">
<code id="editor"></code>
</div>
<div class="right">
<button onclick="runCode()">Run</button>
<br>
<code id="console">Output will be shown here, click the run button to run your code!</code>
</div>
</body>
</html>

4
client/index.js
View File

@@ -1,9 +1,11 @@
let textbox;
let textconsole;
let text = '<p># welcome to gride!</p>\n<p># start typing to code a program in Ground!</p>\n<p>';
// Wait for the window to load before doing anything
window.addEventListener("load", function() {
textbox = document.getElementById("editor");
textconsole = document.getElementById("console");
textbox.innerHTML = text + "</p>";
});
@@ -33,5 +35,5 @@ async function runCode() {
"body": text.split("<p>").join("").split("</p>").join("")
});
const data = await result.json();
console.log("Output: ", data);
textconsole.innerHTML = data.stdout;
}