mirror of
https://github.com/Open-Argon/argon-v3.git
synced 2025-12-06 08:56:07 +00:00
110 lines
4.2 KiB
HTML
110 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Argon WASM Runtime Example</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<style>
|
|
.terminal {
|
|
font-family: monospace;
|
|
font-size: 12px;
|
|
color: #fff;
|
|
background-color: #000;
|
|
padding: 10px;
|
|
margin: 10px;
|
|
border-radius: 5px;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
|
min-height: 250px;
|
|
max-width: 500px;
|
|
overflow-x: auto;
|
|
}
|
|
.terminal * {
|
|
min-height: 1rem;
|
|
}
|
|
.terminal .command {
|
|
color: #0f0;
|
|
}
|
|
.terminal .output {
|
|
color: #fff;
|
|
}
|
|
.terminal .error {
|
|
color: #f00;
|
|
}
|
|
.editbox {
|
|
font-family: monospace;
|
|
font-size: 12px;
|
|
color: #000;
|
|
background-color: #fff;
|
|
padding: 10px;
|
|
margin: 10px;
|
|
border-radius: 5px;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
|
min-height: 250px;
|
|
max-width: 500px;
|
|
width: 100%;
|
|
resize: none;
|
|
border: none;
|
|
}
|
|
.runButton {
|
|
border: 2.5px solid #ffffff;
|
|
background-color: #3a9200;
|
|
box-shadow: none;
|
|
color: #ffffff;
|
|
font-weight: 900;
|
|
font-size: 1rem;
|
|
width: 100px;
|
|
display: block;
|
|
padding: 10px;
|
|
margin: 10px;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
}
|
|
.runButton:active {
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
|
}
|
|
</style>
|
|
<script src="/argon_wasm.js"></script>
|
|
</head>
|
|
<body>
|
|
<h1>Argon WASM Runtime Example</h1>
|
|
<button id="run" class="runButton">run</button>
|
|
<textarea id="editbox" class="editbox" spellcheck="flase" autocapitalize="false">
|
|
term.log("hello world")</textarea
|
|
>
|
|
<pre
|
|
id="terminal"
|
|
class="terminal"
|
|
><div> ____ </div><div> /\ |___ \ </div><div> / \ _ __ __ _ ___ _ __ __ ____) |</div><div> / /\ \ | '__/ _` |/ _ \| '_ \ \ \ / /__ < </div><div> / ____ \| | | (_| | (_) | | | | \ V /___) |</div><div> /_/ \_\_| \__, |\___/|_| |_| \_/|____/ </div><div> __/ | </div><div> |___/ </div><div>----------------------------------------------</div><div>Welcome to ARGON for WASM!</div><div>write code above and click run to see it work like magic!</div></pre>
|
|
<script>
|
|
const output = document.getElementById("terminal");
|
|
const editbox = document.getElementById("editbox");
|
|
const run = document.getElementById("run");
|
|
run.addEventListener("click", async () => {
|
|
output.innerHTML = "";
|
|
setTimeout(() => Ar.eval(editbox.value, true), 0);
|
|
});
|
|
|
|
const runAr = ArgonWASMRuntime({
|
|
console: {
|
|
log: (...msg) => {
|
|
const p = document.createElement("div");
|
|
p.innerText = msg.join(" ");
|
|
output.appendChild(p);
|
|
},
|
|
warn: (...msg) => {
|
|
const p = document.createElement("div");
|
|
p.innerText = msg.join(" ");
|
|
p.style.color = "orange";
|
|
output.appendChild(p);
|
|
},
|
|
error: (...msg) => {
|
|
const p = document.createElement("div");
|
|
p.innerText = msg.join(" ");
|
|
p.style.color = "red";
|
|
output.appendChild(p);
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|