Skip to content

Instantly share code, notes, and snippets.

@moqmar

moqmar/play.html

Last active May 13, 2019 07:46
Show Gist options
  • Save moqmar/401ff0fbd5b5073dd93bd0c65dac0b69 to your computer and use it in GitHub Desktop.
Save moqmar/401ff0fbd5b5073dd93bd0c65dac0b69 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
play.html
<!doctype html>
<html>
<head>
<style>
* { box-sizing: border-box; }
body { margin: 0; padding: 0; display: flex; background: #2C2C39; min-height: 100vh; }
.input { width: 40%; padding: 25px; display: flex; flex-direction: column; }
textarea { flex-grow: 1; border: none; resize: none; margin-bottom: 25px; padding: 15px; background: rgba(255,255,255,0.1); color: #fff; }
textarea:last-child { margin-bottom: 0; }
.output { flex-grow: 1; padding: 25px 25px 25px 0; }
iframe { width: 100%; height: 100%; border: none; background: rgba(255,255,255,0.1); }
</style>
<script src="https://unpkg.com/codeflask/build/codeflask.min.js"></script>
<body>
<div class="input">
<textarea placeholder=HTML id=h></textarea>
<textarea placeholder=CSS id=c></textarea>
<textarea placeholder=JS id=j></textarea>
<!-- TODO: Share link -->
</div>
<div class="output">
<iframe id=i></iframe>
</div>
<script>
document.body.addEventListener("input", function() {
i.srcdoc = h.value + "<br><style>body{color:#fff;padding:15px}" + c.value + "</style><script>" + j.value + "<" + "/script>";
});
window.hflask = new CodeFlask("#h", { language: "html" });
window.cflask = new CodeFlask("#c", { language: "css" });
window.jflask = new CodeFlask("#j", { language: "js" });
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment