-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
115 lines (104 loc) · 2.57 KB
/
index.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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/gh/AssemblyScript/[email protected]/index.js"></script>
<script src="z85.js"></script>
<script src="main.js" type="module"></script>
<style>
.cm-editor {
max-height: 100vh;
overflow: scroll;
}
body {
display: flex;
flex-direction: column;
overflow: hidden;
margin: 0;
transition: 0.5s;
}
#top {
flex: 1;
}
#code {
display: flex;
flex: 2;
}
#text {
flex: 1;
height: calc(100vh - 30px);
display: flex;
flex-direction: column;
}
#resize {
cursor: col-resize;
width: 5px;
background: black;
}
#game {
flex: 2;
width: 100%;
}
.dark-mode #top {
background-color: black;
color: white;
}
body * {
transition: 0.5s;
transition-property: background-color, color;
}
.dark-mode #github {
filter: none !important;
}
#top {
padding: 5px;
max-height: 20px;
}
#top div {
line-height: 120%;
text-align: center;
}
.dark-mode a:visited{
color: steelblue;
}
button {
cursor: pointer;
padding: 10px;
transition-duration: 0.5s;
transition-property: background-color;
}
.dark-mode button {
background-color: #333333;
color: white;
border-color: white;
}
.dark-mode button:hover {
background-color: #111111;
}
ul li {
flex: fit-content;
}
</style>
</head>
<body>
<div id="top">
<div style="align-content: center;">
<ul style="columns: 3; padding-left: 0; list-style: none; margin:0; display: flex;">
<li>Dark Mode <input type="checkbox" id="dark-mode"/> </li>
<li><a id="game-download" href="#" download="game.html" onclick="document.getElementById('game-download').href=`data:text/attachment;base64,` + btoa(document.getElementById('game').contentDocument.documentElement.outerHTML);">Download your game</a></li>
<li>Made with <a href="https://github.com/AssemblyScript/wabt.js/">WABT.js</a>, <a href="https://wasm4.org/">WASM-4</a>, and <a href="https://codemirror.net/">CodeMirror</a></li>
<li><a href="https://github.com/ambiguousname/wasm-webtoy">
<span style="margin-right: 5px; position: relative; top: -15%;">Source on</span><img src="../assets/icons/github-mark-white.svg" style="filter:invert(); max-height: 20px;" id="github"/>
</a></li>
</ul>
</div>
</div>
<div id="code">
<div id="text">
<button id="compile">Compile & Run</button>
</div>
<div id="resize"></div>
<iframe id="game" src="player.html">
</iframe>
</div>
</body>
</html>