-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
129 lines (115 loc) · 5.06 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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<style>
@media (pointer:fine) {
.mobile {
display: none;
}
}
@media not (pointer:fine) {
.desktop {
display: none;
}
}
.mobile {
font-size: xx-large;
}
body {
background-color: #0d0c0c;
overflow: hidden;
}
#container {
display: flex;
flex-direction: column;
height: 100%;
}
#canvas {
object-fit: contain;
image-rendering: pixelated;
overflow: auto;
}
p {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
color: #ffffff;
text-align: center;
}
a {
color: #dd2020
}
.key {
color: #e5e5e5
}
.button-text {
color: #a5a2a2
}
#controller {
object-fit: contian;
overflow: auto;
user-select: none;
}
</style>
</head>
<body>
<div id="container">
<canvas id="canvas" width="256" height="240">
</canvas>
<svg viewBox="5 0 90 46" id="controller" class="mobile">
<rect width="100" height="46" fill="#e5e5e5" rx="2" />
<rect x="3" y="5" width="94" height="38" fill="#0d0c0c" rx="1" />
<!-- Left -->
<rect x="7" y="20" width="24" height="10" fill="#e5e5e5" rx="1" />
<rect x="14" y="13" width="10" height="24" fill="#e5e5e5" rx="1" />
<rect x="8" y="21" width="22" height="8" fill="#0d0c0c" rx="1" />
<rect x="15" y="14" width="8" height="22" fill="#0d0c0c" rx="1" />
<rect x="7" y="20" width="10" height="10" visibility="hidden" pointer-events="all" id="left" />
<rect x="21" y="20" width="10" height="10" visibility="hidden" pointer-events="all" id="right" />
<rect x="14" y="13" width="10" height="10" visibility="hidden" pointer-events="all" id="up" />
<rect x="14" y="27" width="10" height="10" visibility="hidden" pointer-events="all" id="down" />
<!-- Middle -->
<rect x="36" y="5" width="28" height="1" fill="#a5a2a2" rx="0" />
<rect x="36" y="5" width="28" height="5" fill="#a5a2a2" rx="1" />
<rect x="36" y="12" width="28" height="5" fill="#a5a2a2" rx="1" />
<rect x="36" y="19" width="28" height="5" fill="#a5a2a2" rx="1" />
<text x="44.5" y="22.4" fill="#dd2020" text-anchor="middle" font-size="2.5"
font-family="monospace">SELECT</text>
<text x="55.5" y="22.4" fill="#dd2020" text-anchor="middle" font-size="2.5"
font-family="monospace">START</text>
<rect x="36" y="26" width="28" height="10" fill="#e5e5e5" rx="1" />
<rect x="40" y="30" width="9" height="3" fill="#0d0c0c" rx="2" id="select" />
<rect x="51" y="30" width="9" height="3" fill="#0d0c0c" rx="2" id="start" />
<rect x="36" y="38" width="28" height="5" fill="#a5a2a2" rx="1" />
<rect x="36" y="39" width="28" height="4" fill="#a5a2a2" rx="0" />
<!-- Right -->
<rect x="68" y="27" width="10" height="10" fill="#e5e5e5" rx="1" />
<circle cx="73" cy="32" r="4" fill="#dd2020" id="b" />
<text x="77" y="40" fill="#dd2020" text-anchor="middle" font-size="2.5" font-family="monospace">B</text>
<rect x="81" y="27" width="10" height="10" fill="#e5e5e5" rx="1" />
<circle cx="86" cy="32" r="4" fill="#dd2020" id="a" />
<text x="90" y="40" fill="#dd2020" text-anchor="middle" font-size="2.5" font-family="monospace">A</text>
</svg>
<p>
<input type="file" id="upload-rom" accept=".nes, .zip" />
</p>
<p>
This is a <a
href="https://www.nintendo.com/en-gb/Hardware/Nintendo-History/Nintendo-Entertainment-System/Nintendo-Entertainment-System-627024.html">NES</a>
emulator. Select or drag-and-drop a .nes or .zip file to play it, e.g. the <a
href="https://eldenpixels.itch.io/alwas-awakening-the-8-bit-edition#:~:text=944%20kB-,Download%20demo,-Download">Alwa's
Awakening demo</a>!
</p>
<p class="desktop">
Controls:
<span class=key>Z</span> = <span class=button>A</span>,
<span class=key>X</span> = <span class=button>B</span>,
<span class=key>Arrows</span> = <span class=button>D-Pad</span>,
<span class=key>Enter</span> = <span class=button> Start</span>,
<span class=key>Shift</span> = <span class=button>Select</span>
</p>
<p>
<a href="https://github.com/aelred/nes-rust">GitHub</a>
</p>
</div>
</body>
</html>