Skip to content

Instantly share code, notes, and snippets.

@lyxal

lyxal/rawhtml.html Secret

Last active January 20, 2021 03:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lyxal/c2f3e79aa4e65fc36eb0134f309776f2 to your computer and use it in GitHub Desktop.
Save lyxal/c2f3e79aa4e65fc36eb0134f309776f2 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
rawhtml.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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="shortcut icon" type="image/jpg" href="https://www.pythonanywhere.com/user/Lyxal/files/home/Lyxal/mysite/favicon.png" />
<script>
function update_count() {
var byte_box = document.getElementById("code_count");
var code = document.getElementById("code_box").value.length;
byte_box.innerText = `${code} character` + "s".repeat(code != 1) + `/${code} byte` + "s".repeat(code != 1);
}
function generate_query() {
var flags = document.getElementById("interpreter_flags").value;
var code = document.getElementById("code_box").value;
var inputs = document.getElementById("inputs").value;
var header = document.getElementById("header").value;
var footer = document.getElementById("footer").value;
var undone_url = "?flags=" + flags + "&code=" + encodeURIComponent(code) + "&inputs=" + encodeURIComponent(inputs);
undone_url += "&header=" + encodeURIComponent(header) + "&footer=" + encodeURIComponent(footer)
var url = "http://lyxal.pythonanywhere.com" + undone_url
url = url.replace(/\(/g, "%28")
url = url.replace(/\[/g, "%5B")
url = url.replace(/\]/g, "%5D")
url = url.replace(/\)/g, "%29")
return url
}
function dotheshare() {
var output = document.getElementById("output_area");
output.innerText = generate_query()
navigator.clipboard.writeText(generate_query());
}
function dothecmc() {
var output = document.getElementById("output_area");
var code = document.getElementById("code_box").value
output.innerText = "[Vyxal, " + code.length + " byte" + "s".repeat(code.length != 1) + "](" + generate_query() + ")\n";
output.innerText += "[Vyxal, `" + code.replace("`", "\\`") + "`](" + generate_query() + ")\n"
output.innerText += "[Try it Online!](" + generate_query() + ")"
}
function decode_the_share() {
const queryString = window.location.search;
console.log(queryString);
const urlParams = new URLSearchParams(queryString)
code = urlParams.get("code");
flags = urlParams.get("flags");
inputs = urlParams.get("inputs");
footer = urlParams.get("footer");
header = urlParams.get("header");
var flag_box = document.getElementById("interpreter_flags");
var code_box = document.getElementById("code_box");
var inputs_box = document.getElementById("inputs");
var header_box = document.getElementById("header");
var footer_box = document.getElementById("footer");
if ((code || flags || inputs || header || footer) && !(flag_box.value || code_box.value || inputs_box.value || header_box.value || footer_box.value)) {
flag_box.value = flags;
code_box.value = code;
inputs_box.value = inputs;
header_box.value = header;
footer_box.value = footer;
}
}
function dothetio() {
var output = document.getElementById("output_area");
var code = document.getElementById("code_box").value
var flags = document.getElementById("interpreter_flags").value
var flag_appendage = ""
if (flags) {
flag_appendage = "`" + flags + "`, "
}
var len = document.getElementById("code_box").value.length
var out = "# [Vyxal](https://github.com/Lyxal/Vyxal), " + flag_appendage + len + " byte" + "s".repeat(len != 1) + "\n";
out += "```\n";
out += code + "\n";
out += "```" + "\n";
out += "[Try it Online!](" + generate_query() + ")";
output.innerText = out;
navigator.clipboard.writeText(out)
}
var charset = "λƛ¬∧⟑∨⟇÷«\n»°•․⍎Ṛ½∆øÏÔÇæʀʁɾɽÞƈ∞⫙ !\"$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]`abcdefghijklmnopqrstuvwxyz{|}~ß⎝⎠⎡⎣⨥⨪∺❝ð→←ÐřŠč√⳹ẊȦȮḊĖẸṙ∑ṠİĤ⟨⟩ı⁌\tΤĴ²‿⁂ĸ¶⁋⁑Ńń‼⨊≈ðʗ◁⊐∫⍋⍒ℕ∈ₛ£Œœ≕≠¥ⁱ‹›⍲⍱‸¡⊑≀℅≤≥↜≗⋯⧢ũ⁰¹ªₑϊ≎⇿⊛ׯ±⊂⍞፣₴⍉Ϊ₁⊘ᶢ₌↭ſƀƁ⁚⌈⌊⊓⊣Ḟḟ∪∩⊍⁜⌑Ḇ₂⁾₦¼ƒɖꝒ′₥α″βγΠ"
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 => {
var the_box = document.getElementById("code_box");
var start = the_box.selectionStart;
var end = the_box.selectionEnd;
var char = event.target.innerHTML;
var str = the_box.value.slice(0, start) + char + the_box.value.slice(end);
console.log(str)
the_box.value = str
the_box.focus()
// document.getElementById("code_box").value += event.target.innerHTML;
update_count();
the_box.selectionStart = end + 1;
the_box.selectionEnd = end + 1;
})
})
});
function style_that_button_dad() {
var the_button = document.getElementById("run_button");
the_button.innerHTML = '<i class="fa fa-spinner fa-spin"></i>Executing';
the_button.disabled = true;
the_button.style.cursor = "progress";
document.getElementById('main-content').submit()
}
</script>
<title>Vyxal Interpreter</title>
<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="decode_the_share(); update_count()">
<div class="container">
<div class="row">
<div class="twelve columns">
<h1><a href="https://github.com/Lyxal/Vyxal" style="text-decoration: none; color: rgb(170, 84, 170);">Vyxal Interpreter</a></h1>
</div>
</div>
<button onclick="dotheshare()">Share</button>
<button onclick="dothetio()">Postify</button>
<button onclick="dothecmc()">CMCify</button>
<form method="post" id="main-content">
<h5> <label for="">Flags</label></h5>
<input type="text" id="interpreter_flags" name="flags" value={{flags}}></input>
</br>
<div class="row" style="width:100%">
<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;">Header</label></h5>
</div>
</div>
</div>
<textarea class="u-full-width" id="header" name="header" placeholder="Enter code..." oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'>{{header}}</textarea>
<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"; update_count()' onkeyup="update_count()">{{code}}</textarea>
<div class="row">
<div class="twelve columns">
<div style="display:flex;justify-content: space-between;">
<h5><label style="display: inline-block;">Footer</label></h5>
</div>
</div>
</div>
<textarea class="u-full-width" id="footer" name="footer" placeholder="Enter code..." oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'>{{footer}}</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" onclick="style_that_button_dad()">Execute</button>
</div>
</div>
<br>
<h5> <label for="">Output</label></h5>
<div class="row">
<pre id="output_area" name="output" style="white-space: pre-wrap; width: 100%">{{output}}</pre>
</div>
</form>
<pre id="error_box">{{errors}}</pre>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment