-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.html
94 lines (78 loc) · 4.78 KB
/
main.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>◢.Wire=world.◣</title>
<link rel="icon" href="res/ww.ico">
<script src="lib/phaser.min.js"></script>
<script src="lib/coffeescript.js"></script>
<script src="lib/FileSaver.min.js"></script>
<script type="text/coffeescript" src="src/wireworld.coffee"></script>
<style>
@font-face {font-family: Roboto; src: url(res/3966.ttf)}
a {text-decoration: none; color: #e28964; text-shadow: -1px -1px 2px black; font-style: italic; font-weight: bold;}
a:hover {color: coral; text-shadow: 0px 0px 2px orange, 0 0 1em red; transition: .5s}
div {text-shadow: 1px 1px 2px darkgrey; font-weight: bold}
.centerer {position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);}
.winbar {background: slategray; padding-bottom: 3px; font-family: Roboto; font-size: 14px; height: 17px; box-shadow: 0px 0px 2px slategray}
.reminder {position:absolute; margin-left: 3px; border-width: 0px 2px 0px 0px; border-style: solid; border-color: black; height: 20px}
.rreminder {border-width: 0px 0px 0px 2px; right: 3px}
.mrem, .ctrl {display: inline-block}
.reminder:hover, .mrem:hover {color: linen; transition: .5s}
.extrusion {background: #902010; display:inline-block; border: 1px solid #900030; padding: 2px;}
.ctrlpad {position:absolute; background: #677787; height: 43px; border-radius: 5px 5px 0px 0px; border: 2px solid #000022; padding: 0px 2px; font-family: Roboto; font-size: 15px}
.padup {margin-top: 4px}
.paddown {margin-top: -4px}
.counter {font-size: 14px}
.ctrl {cursor: pointer; text-shadow: 0px 0px 2px coral}
.ctrl:hover {color: khaki; text-shadow: 0px 0px 2px crimson, 0 0 1em red; transition: .5s}
.counter:hover {color: lemonchiffon; text-shadow: 0px 0px 2px black, 0 0 1em gold; transition: .5s}
@-moz-document url-prefix() {
.extrusion {padding: 2.3px}
.reminder_fix {margin-top: -1px;}
.paddown {margin-top: -3px}
}
@supports (-ms-ime-align: auto) {
b {font-family: "Segoe UI Symbol"}
.padup {margin-top: 5px}
.paddown {margin-top: -3px}
}
</style>
</head>
<body style='margin:0; background: #0f0f0f -webkit-repeating-linear-gradient(top, transparent 0px, transparent 1px, rgba(0, 0, 0, 0.25) 1px, rgba(0, 0, 0, 0.25) 2px); -webkit-background-size: 100% 2px; overflow: hidden; user-select: none; -moz-user-select: none; -ms-user-select: none;'>
<input id="loader" type="file" accept=".w=w,text/plain" style='position: absolute; top: -1000px'/>
<center class="centerer" style="color: coral; font-size: 65px; text-shadow: 0px 0px 7px lightsalmon">..:Now loading:..</center>
<center id="ui" class="centerer" style="visibility: hidden;">
<div class='ctrlpad padup' style = "left: 22.8%; border-bottom: 0px">
<div id="width_dec" class="ctrl"><b>◀</b></div>
<div class="mrem">width</div>
<div id="width_inc" class="ctrl"><b>▶</b></div>
<div id="width" class="counter" style="border-top: 1px solid #000022; padding-top: 2px; padding-bottom: 3px"></div>
</div>
<div class ="extrusion" style='border-bottom: 3px dashed slategray; border-radius: 5px 5px 0px 0px;'>
<b>🞇</b> <a href='http://github.com/Guevara-chan/Wire-world' target="_blank">Wire=world</a> cellular automata v0.03 <b>🞇</b></div>
</div>
<div class="winbar" style='border-radius: 5px 5px 0px 0px;'>
<div class='reminder reminder_fix'><b>🞇</b> LMB & RMB to modify </div>
<div class='reminder reminder_fix rreminder'> ESC to exit <b>🞇</b></div>
<div class='mrem'>Drop file inside matrix to import</div>
</div>
<div oncontextmenu='return false;' id='vp' style='border-width: 0px 1px 0px 1px; border-style: dashed; border-color: slategray; box-shadow: 0px 0px 2px slategray'></div>
<div class='ctrlpad paddown' style="left: 68%; border-radius: 0px 0px 5px 5px; border-top: 0px">
<div id="height" class="counter" style="border-bottom: 1px solid #000022; padding-top: 3px; padding-bottom: 2px"></div>
<div id="height_dec" class="ctrl"><b>▼</b></div>
<div class="mrem">height</div>
<div id="height_inc" class="ctrl"><b>▲</b></div>
</div>
<div class="winbar" style="border-radius: 0px 0px 5px 5px; margin-top: -4px">
<div class='reminder'><b>🞇 🡑🡐🡒🡓</b> to scroll </div>
<div class='reminder rreminder'> Wheel to zoom & drag <b>🞇</b></div>
<div class='mrem'>Crtl+S to export / Ctrl+L to import</div>
</div>
<div class ="extrusion" style='border-top: 3px dashed slategray; border-radius: 0px 0px 5px 5px'>
<b>🞇</b> Developed in 2018 by <a href='http://vk.com/guevara_chan' target="_blank">V.A. Guevara</a> <b>🞇</b></div>
</div>
</center>
<script type="text/coffeescript" src="src/ui.coffee"></script>
</body>
</html>