1
Fork 0
hare-playground/frontend/index.html
2024-05-25 17:38:09 +02:00

139 lines
4.1 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>code</title>
<link rel="stylesheet" href="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="codapi.js"></script>
<script src="codapi-settings.js"></script>
<link rel="stylesheet" href="codapi.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/github.min.css" />
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
codapi-snippet {
display: block;
margin: 10px 0;
}
codapi-snippet button {
padding: 0;
border: none;
background: none;
line-height: 1.35;
color: #008bf5;
font-size: 16px;
}
codapi-toolbar button::after {
content: " ▶";
}
codapi-toolbar a {
color: #008bf5;
border-bottom: 1px solid rgba(0, 139, 245, 0.2);
text-decoration: none;
font-size: 16px;
}
.editor {
border-radius: 6px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
font-family: 'Source Code Pro', monospace;
font-size: 14px;
font-weight: 400;
height: 340px;
letter-spacing: normal;
line-height: 20px;
padding: 10px;
resize: none !important;
tab-size: 4;
}
codapi-output {
border-radius: 6px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
font-family: 'Source Code Pro', monospace;
font-size: 14px;
font-weight: 400;
letter-spacing: normal;
line-height: 20px;
padding: 10px;
resize: none !important;
tab-size: 4;
background-color: #f8f8f8;
}
codapi-output pre {
margin: 0;
}
</style>
</head>
<body>
<codapi-settings url="https://hare-exec.fly.dev/v1"></codapi-settings>
<div class="editor language-c"></div>
<codapi-snippet sandbox="hare" editor="external" selector=".editor">
<button class="share">Share</button>
</codapi-snippet>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
<script type="module">
import {CodeJar} from "./codejar.js"
const highlight = editor => {
editor.textContent = editor.textContent
hljs.highlightBlock(editor)
}
function base64ToBytes(base64) {
const binString = atob(base64);
return Uint8Array.from(binString, (m) => m.codePointAt(0));
}
function base64Encode(str) {
return bytesToBase64(new TextEncoder().encode(str));
}
function bytesToBase64(bytes) {
const binString = Array.from(bytes, (byte) =>
String.fromCodePoint(byte),
).join("");
return btoa(binString);
}
function base64Decode(bytes) {
return new TextDecoder().decode(base64ToBytes(bytes));
}
let jar = CodeJar(document.querySelector('.editor'), highlight)
const defaultCode = `use fmt;
export fn main() void = {
const greetings = [
"Hello, world!",
"¡Hola Mundo!",
"Γειά σου Κόσμε!",
"Привіт, світ!",
"こんにちは世界!",
];
for (let i = 0z; i < len(greetings); i+= 1) {
fmt::println(greetings[i])!;
};
};`
if (location.hash) {
let code = base64Decode(location.hash.substr(1));
jar.updateCode(code)
} else {
location.hash = base64Encode(defaultCode);
jar.updateCode(defaultCode);
}
document.getElementsByClassName("share")[0].onclick = (e) => {
e.preventDefault();
let code = document.querySelector('.editor').innerText;
location.hash = base64Encode(code);
}
</script>
</body>
</html>