-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
139 lines (110 loc) · 4.05 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
130
131
132
133
134
135
136
137
138
139
<html lang="en">
<head>
<title>uARM</title>
<meta name="viewport" content="width=670,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta charset="UTF-8" />
<style>
html {
background: #eee;
}
.container {
display: flex;
flex-direction: row;
align-items: flex-start;
}
.controls {
margin-left: 1em;
}
@media screen and (max-width: 1200px) {
.container {
flex-direction: column;
}
canvas {
margin-bottom: 1em;
}
.controls {
margin-left: 0;
}
}
.control:not(:first-child) {
margin-top: 2em;
}
.control-audio-button {
margin-top: 0.5em;
}
.controls label {
min-width: 8em;
display: inline-block;
}
#log {
margin-top: 0.5em;
max-height: 30em;
overflow-y: scroll;
font-family: monospace;
}
button {
margin-right: 0.5em;
}
#log div {
max-width: 60em;
overflow: hidden;
}
canvas {
max-height: calc(100vh - 15px);
object-fit: contain;
}
input[type='range'] {
width: 15em;
}
#snapshot-status {
display: inline-block;
min-width: 10em;
text-align: center;
}
.snapshot-ok {
background: lightgreen;
}
.snapshot-saving {
background: orange;
}
.snapshot-failed {
background: red;
color: white;
}
</style>
</head>
<body>
<div class="container">
<canvas tabindex="-1" width="640" height="880"></canvas>
<div class="controls">
<div class="control">
<label>Snapshot status:</label>
<span id="snapshot-status"></span>
</div>
<div class="control"><label>Emulation speed:</label><span id="speed">-</span></div>
<div class="control-audio-button"><button id="audio-button" disabled>Start audio</button></div>
<div class="control"><label>NOR image:</label><span id="nor-image"></span></div>
<button id="upload-nor">Upload NOR</button>
<div class="control"><label>NAND image:</label><span id="nand-image"></span></div>
<button id="upload-nand">Upload NAND</button>
<button id="download-nand">Download NAND</button>
<div class="control"><label>SD image:</label><span id="sd-image"></span></div>
<button id="upload-sd">Upload SD</button>
<button id="download-sd">Download SD</button>
<div class="control"><label>Session</label></div>
<button id="export-image">Export session</button>
<button id="import-image">Import session</button>
<div class="control"><label>Max. host load:</label> <span id="max-load"></span></div>
<input id="max-load-slider" type="range" min="50" max="100" step="5" />
<div class="control"><label>MIPS limit:</label> <span id="mips-limit"></span></div>
<input id="mips-limit-slider" type="range" min="50" max="300" step="5" />
<h2>Log:</h2>
<button id="clear-log">Clear</button>
<div id="log"></div>
</div>
</div>
<script src="web/crc.js"></script>
<script src="web/index.js" type="module"></script>
</body>
</html>