mirror of
https://github.com/Open-Argon/argon-v3.git
synced 2025-12-06 08:56:07 +00:00
107 lines
3.4 KiB
HTML
107 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Argon WASM Runtime Example</title>
|
|
<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;
|
|
}
|
|
.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">
|
|
term.log("hello world")</textarea
|
|
>
|
|
<pre id="terminal" class="terminal">
|
|
|
|
</pre>
|
|
<script>
|
|
const output = document.getElementById("terminal");
|
|
const editbox = document.getElementById("editbox");
|
|
const run = document.getElementById("run");
|
|
run.addEventListener("click", () => {
|
|
output.innerHTML = "";
|
|
setTimeout(()=>Ar.eval(editbox.value), 100)
|
|
});
|
|
|
|
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>
|