Skip to content

Instantly share code, notes, and snippets.

@razetime

razetime/index.html

Last active January 9, 2021 09:57
Show Gist options
  • Save razetime/964f34fcd95929faeb3d1895d78da67d to your computer and use it in GitHub Desktop.
Save razetime/964f34fcd95929faeb3d1895d78da67d to your computer and use it in GitHub Desktop.
Download ZIP
vyxal web new
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="{{ url_for('static', filename= 'css/style.css') }}">
<link rel="stylesheet" href="style.css">
<script>
function update_count() {
var byte_box = document.getElementById("code_count");
var code = document.getElementById("code_box").value.length;
byte_box.innerText = `${code} characters/${code} bytes`;
}
function dotheshare() {
var flags = document.getElementById("interpreter_flags").value;
var code = document.getElementById("code_box").value;
var inputs = document.getElementById("inputs").value;
var undone_url = "http://lyxal.pythonanywhere.com?flags=" + flags + "&code=" + code + "&inputs=" + inputs
var output = document.getElementById("output_area");
output.innerText = encodeURI(undone_url);
}
function decode_the_share() {
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
code = urlParams.get("code");
flags = urlParams.get("flags");
inputs = urlParams.get("inputs");
if (code || flags || inputs) {
var flag_box = document.getElementById("interpreter_flags");
var code_box = document.getElementById("code_box");
var inputs_box = document.getElementById("inputs");
flag_box.value = flags;
code_box.value = code;
inputs_box.value = inputs;
}
}
function dothetio() {
var flags = document.getElementById("interpreter_flags").value;
var code = document.getElementById("code_box").value;
var inputs = document.getElementById("inputs").value;
var undone_url = "http://lyxal.pythonanywhere.com?flags=" + flags + "&code=" + code + "&inputs=" + inputs
var output = document.getElementById("output_area");
var out = "# [Vyxal](https://github.com/Lyxal/Vyxal), " + document.getElementById("code_box").value.length + " bytes\n";
out += "```\n";
out += code + "\n";
out += "```" + "\n";
out += "[Try it Online!](" + encodeURI(undone_url) + ")";
output.innerText = out;
}
var charset = "λƛ¬∧⟑∨⟇÷«»°•․⍎Ṛ½∆øÏÔÇæʀʁɾɽÞƈ∞⫙ß⎝⎠⎡⎣⨥⨪∺❝𣥧¦¡∂ÐřŠč√∖ẊȦȮḊĖẸṙ∑ṠİĤ⟨⟩ıĴIJijķĶĵ";
window.addEventListener('DOMContentLoaded', (event) => {
var kb = document.getElementById("keyboard");
for (var i = 0; i < charset.length; i++) {
kb.innerHTML += "<span class=\"key\">" + charset[i] + "</span>";
}
document.querySelectorAll('.key').forEach(item => {
item.addEventListener('click', event => {
document.getElementById("code_box").value += event.target.innerHTML
})
})
});
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css"
integrity="sha512-EZLkOqwILORob+p0BXZc+Vm3RgJBOe1Iq/0fiI7r/wJgzOFZMlsqTa29UEl6v6U6gsV4uIpsNZoV32YZqrCRCQ=="
crossorigin="anonymous" />
</head>
<body onload="update_count(); decode_the_share()">
<div class="container">
<div class="row">
<div class="twelve columns">
<h1> Vyxal Interpreter </h1>
</div>
</div>
<form method="post">
<h5> <label for="">Flags</label></h5>
<input type="text" id="interpreter_flags" name="flags" value={{flags}}></input>
</br>
<div class="row">
<div class="twelve columns">
<div id="keyboard">
</div>
</div>
</div>
<div class="row">
<div class="twelve columns">
<div style="display:flex;justify-content: space-between;">
<h5><label style="display: inline-block;">Code</label></h5>
<p id="code_count">0 characters/0
bytes</p>
</div>
</div>
</div>
<textarea class="u-full-width" id="code_box" name="code" placeholder="Enter code..."
oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'
onkeyup="update_count()">{{code}}</textarea>
<h5><label for="">Input</label></h5>
<textarea class="u-full-width" id="inputs" name="inputs" placeholder="Enter inputs..."
oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'>{{inputs}}</textarea>
<div class="row">
<div class="twelve columns center">
<button id="run_button" type="submit">Execute</button>
<button onclick="dotheshare()">Share</button>
<button onclick="dothetio()">Postify</button>
</div>
</div>
<br>
<h5> <label for="">Output</label></h5>
<div class="row">
<pre id="output_area" name="output">{{output}}</pre>
</div>
</form>
</div>
</body>
</html>
Raw
style.css
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100&display=swap');
h1 {
border: 2px #eee solid;
color: rgb(170, 84, 170);
text-align: center;
padding:10px;
}
#keyboard {
border: 1px solid #eee;
}
.key {
padding:2px;
cursor:crosshair;
font-family: 'DejaVu Sans Mono', monospace;
}
.key:hover {
background-color: rgba(255, 255, 255, 0.596);
color: #000;
}
body {background-color: #111; color: #eee !important;}
h3 {color: #eee;}
button {color:#eee !important;}
input, textarea, pre {color: white;
background-color: #181a1b !important;
font-family: 'DejaVu Sans Mono', monospace;
}
#output_area {
border-radius: 4px;
min-height: 5em;
}
.center {
text-align: center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment