www/pages/playground.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

---
layout: layout.vto
url: /playground/
---

<main><div class="fullbleed pad">

    <h1>missing.css Playground</h1>

    <div class="grid">
        <textarea id="code" class="monospace" cols="80" rows="20">
&lt;main>
    &lt;h1>Hello, World!&lt;/h1>

    &lt;!-- Enter your own code... -->
&lt;/main>
        </textarea>
    
        <iframe id="result" srcdoc="<!doctype html> :)"></iframe>
    </div>

    <script type="text/hyperscript">
        on load or input from #code
            get "<!DOCTYPE html>"
            append "<html lang=en>"
            append "<head>"
            append "<meta charset=UTF-8>"
            append "<meta name=viewport content=width=device-width>"
            append "<link rel=stylesheet href=/dist/missing.css>"
            append "</head>"
            append "<body>"
            append #code's value
            append "</body>"
            append "</html>"
            set #result's srcdoc to the result
        end
    </script>

    <script src="https://unpkg.com/hyperscript.org"></script>
</div></main>