-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
108 lines (105 loc) · 11.1 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
<!DOCTYPE html>
<html>
<head>
<title>R.A.Z.E. A Spectrum Emulator</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="raze.css" >
<link rel="icon" href="favicon.png">
</head>
<body>
<style>#forkongithub a{background:#000;color:#fff;text-decoration:none;font-family:arial,sans-serif;text-align:center;font-weight:bold;padding:5px 40px;font-size:1rem;line-height:2rem;position:relative;transition:0.5s;}#forkongithub a:hover{background:#c11;color:#fff;}#forkongithub a::before,#forkongithub a::after{content:"";width:100%;display:block;position:absolute;top:1px;left:0;height:1px;background:#fff;}#forkongithub a::after{bottom:1px;top:auto;}@media screen and (min-width:800px){#forkongithub{position:absolute;display:block;top:0;right:0;width:200px;overflow:hidden;height:200px;z-index:9999;}#forkongithub a{width:200px;position:absolute;top:60px;right:-60px;transform:rotate(45deg);-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);box-shadow:4px 4px 10px rgba(0,0,0,0.8);}}</style><span id="forkongithub"><a href="https://github.com/rodrigorc/raze">Fork me on GitHub</a></span>
<h1>R.A.Z.E. A ZX Spectrum Emulator <span class="version">v1.12</span></h1>
<div id="stage">
<canvas id="game-layer-3d" width="798" height="600"></canvas>
<canvas id="game-layer" width="266" height="200" style="display:none" class="pixelated"></canvas>
</div>
<p>
<div id="controls">
<div id="keyboard">
<div id="keys">
<div id="row1">
<div><div class="color" style="color:blue">BLUE</div><div class="ktop">EDIT</div><div class="key" data-code="0x30"><div class="n">1</div><div class="ss big">!</div><div class="g">▝</div></div><div class="kbottom">DEF FN</div></div>
<div><div class="color" style="color:red">RED</div><div class="ktop">CAPS LOCK</div><div class="key" data-code="0x31"><div class="n">2</div><div class="ss big">@</div><div class="g">▘</div></div><div class="kbottom">FN</div></div>
<div><div class="color" style="color:magenta">MAGENTA</div><div class="ktop">TRUE VIDEO</div><div class="key" data-code="0x32"><div class="n">3</div><div class="ss big">#</div><div class="g">▀</div></div><div class="kbottom">LINE</div></div>
<div><div class="color" style="color:green">GREEN</div><div class="ktop">INV. VIDEO</div><div class="key" data-code="0x33"><div class="n">4</div><div class="ss big">$</div><div class="g">▗</div></div><div class="kbottom">OPEN#</div></div>
<div><div class="color" style="color:cyan">CYAN</div><div class="ktop">◀</div><div class="key" data-code="0x34"><div class="n">5</div><div class="ss big">%</div><div class="g">▐</div></div><div class="kbottom">CLOSE#</div></div>
<div><div class="color" style="color:yellow">YELLOW</div><div class="ktop">▼</div><div class="key" data-code="0x44"><div class="n">6</div><div class="ss big">&</div><div class="g">▚</div></div><div class="kbottom">MOVE</div></div>
<div><div class="color" style="color:white">WHITE</div><div class="ktop">▲</div><div class="key" data-code="0x43"><div class="n">7</div><div class="ss big">'</div><div class="g">▜</div></div><div class="kbottom">ERASE</div></div>
<div><div> </div><div class="ktop">▶</div><div class="key" data-code="0x42"><div class="n">8</div><div class="ss big">(</div><div class="g">█</div></div><div class="kbottom">POINT</div></div>
<div><div> </div><div class="ktop">GRAPHICS</div><div class="key" data-code="0x41"><div class="n">9</div><div class="ss big">)</div><div class="g"> </div></div><div class="kbottom">CAT</div></div>
<div><div class="color" style="color:black; background:white; margin-right:25%">BLACK</div><div class="ktop">DELETE</div><div class="key" data-code="0x40"><div class="n">0</div><div class="ss big">_</div><div class="g"> </div></div><div class="kbottom">FORMAT</div></div>
</div>
<div id="row2">
<div><div class="ktop">SIN</div><div class="key" data-code="0x20"><div>Q</div><div class="ss big"><=</div><div class="k">PLOT</div></div><div class="kbottom">ASN</div></div>
<div><div class="ktop">COS</div><div class="key" data-code="0x21"><div>W</div><div class="ss big"><></div><div class="k">DRAW</div></div><div class="kbottom">ACS</div></div>
<div><div class="ktop">TAN</div><div class="key" data-code="0x22"><div>E</div><div class="ss big">>=</div><div class="k">REM</div></div><div class="kbottom">ATN</div></div>
<div><div class="ktop">INT</div><div class="key" data-code="0x23"><div>R</div><div class="ss big"><</div><div class="k">RUN</div></div><div class="kbottom">VERIFY</div></div>
<div><div class="ktop">RND</div><div class="key" data-code="0x24"><div>T</div><div class="ss big">></div><div class="k">RAND</div></div><div class="kbottom">MERGE</div></div>
<div><div class="ktop">STR$</div><div class="key" data-code="0x54"><div>Y</div><div class="ss">AND</div><div class="k">RETURN</div></div><div class="kbottom">[</div></div>
<div><div class="ktop">CHR$</div><div class="key" data-code="0x53"><div>U</div><div class="ss">OR</div><div class="k">IF</div></div><div class="kbottom">]</div></div>
<div><div class="ktop">CODE</div><div class="key" data-code="0x52"><div>I</div><div class="ss">AT</div><div class="k">INPUT</div></div><div class="kbottom">IN</div></div>
<div><div class="ktop">PEEK</div><div class="key" data-code="0x51"><div>O</div><div class="ss big">;</div><div class="k">POKE</div></div><div class="kbottom">OUT</div></div>
<div><div class="ktop">TAB</div><div class="key" data-code="0x50"><div>P</div><div class="ss big">"</div><div class="k">PRINT</div></div><div class="kbottom">©</div></div>
</div>
<div id="row3">
<div><div class="ktop">READ</div><div class="key" data-code="0x10"><div>A</div><div class="ss">STOP</div><div class="k">NEW</div></div><div class="kbottom">~</div></div>
<div><div class="ktop">RESTORE</div><div class="key" data-code="0x11"><div>S</div><div class="ss">NOT</div><div class="k">SAVE</div></div><div class="kbottom">|</div></div>
<div><div class="ktop">DATA</div><div class="key" data-code="0x12"><div>D</div><div class="ss">STEP</div><div class="k">DIM</div></div><div class="kbottom">\</div></div>
<div><div class="ktop">SGN</div><div class="key" data-code="0x13"><div>F</div><div class="ss">TO</div><div class="k">FOR</div></div><div class="kbottom">{</div></div>
<div><div class="ktop">ABS</div><div class="key" data-code="0x14"><div>G</div><div class="ss">THEN</div><div class="k">GOTO</div></div><div class="kbottom">}</div></div>
<div><div class="ktop">SQR</div><div class="key" data-code="0x64"><div>H</div><div class="ss big">↑</div><div class="k">GOSUB</div></div><div class="kbottom">CIRCLE</div></div>
<div><div class="ktop">VAL</div><div class="key" data-code="0x63"><div>J</div><div class="ss big">-</div><div class="k">LOAD</div></div><div class="kbottom">VAL$</div></div>
<div><div class="ktop">LEN</div><div class="key" data-code="0x62"><div>K</div><div class="ss big">+</div><div class="k">LIST</div></div><div class="kbottom">SCREEN$</div></div>
<div><div class="ktop">USR</div><div class="key" data-code="0x61"><div>L</div><div class="ss big">=</div><div class="k">LET</div></div><div class="kbottom">ATTR</div></div>
<div><div class="ktop"> </div><div class="key enter" data-code="0x60"><div>ENTER</div></div><div class="kbottom"> </div></div>
</div>
<div id="row4">
<div><div class="ktop"> </div><div id="caps" class="key caps sticky" data-code="0x08"><div class="s1">CAPS</div><div class="s2">SHIFT</div></div><div class="kbottom"> </div></div>
<div><div class="ktop">LN</div><div class="key" data-code="0x01"><div>Z</div><div class="ss big">:</div><div class="k">COPY</div></div><div class="kbottom">BEEP</div></div>
<div><div class="ktop">EXP</div><div class="key" data-code="0x02"><div>X</div><div class="ss big">£</div><div class="k">CLEAR</div></div><div class="kbottom">INK</div></div>
<div><div class="ktop">L PRINT</div><div class="key" data-code="0x03"><div>C</div><div class="ss big">?</div><div class="k">CONT</div></div><div class="kbottom">PAPER</div></div>
<div><div class="ktop">L LIST</div><div class="key" data-code="0x04"><div>V</div><div class="ss big">/</div><div class="k">CLS</div></div><div class="kbottom">FLASH</div></div>
<div><div class="ktop">BIN</div><div class="key" data-code="0x74"><div>B</div><div class="ss big">*</div><div class="k">BORDER</div></div><div class="kbottom">BRIGHT</div></div>
<div><div class="ktop">IN KEY$</div><div class="key" data-code="0x73"><div>N</div><div class="ss big">,</div><div class="k">NEXT</div></div><div class="kbottom">OVER</div></div>
<div><div class="ktop">PI</div><div class="key" data-code="0x72"><div>M</div><div class="ss big">.</div><div class="k">PAUSE</div></div><div class="kbottom">INVERSE</div></div>
<div><div class="ktop"> </div><div id="ss" class="key symbolshift sticky" data-code="0x71"><div class="s1">SYMBOL</div><div class="s2">SHIFT</div></div><div class="kbottom"> </div></div>
<div><div class="ktop"> </div><div class="key space" data-code="0x70"><div class="s1">BREAK</div><div class="s2">SPACE</div></div><div class="kbottom"> </div></div>
</div>
</div>
</div>
<div id="buttons">
<button id="reset_128k">Reset 128k</button>
<button id="reset_48k">Reset 48k</button>
<button id="turbo">Turbo (F10)</button>
<button id="dither">Dither (F8)</button>
<button id="snapshot">Save Snapshot (F6)</button>
<button id="load_last_snapshot">Reload Last (F9)</button>
<button id="load_snapshot">Load Snapshot</button>
<button id="toggle_kbd">Keyboard (F7)</button>
<button id="fullscreen">Fullscreen (F11)</button>
<button id="rzx_replay">Stop RZX replay</button>
<span id="cursor_keys_p">
<label for="cursor_keys">Cursor keys & LCtrl: </label>
<select id="cursor_keys" name="cursor_keys">
<option value="cursorkeys">Cursor keys</option>
<option value="kempston">Kempston</option>
<option value="sinclair">Sinclair</option>
<option value="protek">Protek/Cursor</option>
</select>
</span>
<button id="load_tape">Load Tape</button>
<button id="stop_tape">Pause</button>
<span id="peek_poke">
<input id="addr" type="text" style="width:100px" /><input id="byte" type="text" style="width:50px" />
<button id="poke">Poke</button>
<button id="peek">Peek</button>
</span>
</div>
<div id="tape"></div>
<div id="joystick">
<canvas id="joy-btns" width="400" height="400" style="left: 50px; top: 50px;"></canvas>
<canvas id="joy-fire" width="300" height="300" style="left: 500px; top: 100px"></div>
</div>
</div>
<script type="module" src="./raze.js"></script>
</body>