100 lines
4.6 KiB
HTML
100 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
|
<script src="app/main.mjs" type="module"></script>
|
|
<title>Remote Touchpad</title>
|
|
<link href="main.css" media="screen" rel="stylesheet">
|
|
<link href="icon.png" type="image/png" rel="icon">
|
|
|
|
<div id="opening" class="scene">
|
|
<noscript><p>JavaScript is required!</p></noscript>
|
|
<p>Connecting…</p>
|
|
</div>
|
|
|
|
<div id="closed" class="scene">
|
|
<p>Disconnected</p>
|
|
<button class="large" onclick="location.reload()">↻</button>
|
|
</div>
|
|
|
|
<div id="pad" class="scene touch-input mouse-input keyboard-input allow-fullscreen">
|
|
<p class="background">Touchpad</p>
|
|
<button class="top left" onclick="app.showKeys()">≡</button>
|
|
<button class="bottom left visible-if-fullscreen-enabled" onclick="app.toggleFullscreen()">⤢</button>
|
|
<button class="bottom right" onclick="app.showTextInput()">⌨</button>
|
|
</div>
|
|
|
|
<div id="text-input" class="scene">
|
|
<textarea class="grow" cols=1 rows=1></textarea>
|
|
<div class="buttons">
|
|
<button onclick="app.showKeys('text-input', 1)">≡</button>
|
|
<button class="grow" id="send-text">➣</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="keys" class="scene touch-input mouse-input keyboard-input allow-fullscreen">
|
|
<div class="page">
|
|
<div class="buttons" style="grid-column: 1 / 4">
|
|
<button onclick="app.key(app.KEY_BROWSER_BACK)">⭠</button>
|
|
<button onclick="app.key(app.KEY_SUPER)">🪟</button>
|
|
<button onclick="app.key(app.KEY_BROWSER_FORWARD)">⭢</button>
|
|
</div>
|
|
<div class="buttons" style="grid-column: 1 / 4">
|
|
<button onclick="app.key(app.KEY_MEDIA_PREV_TRACK)">⏮</button>
|
|
<button onclick="app.key(app.KEY_MEDIA_PLAY_PAUSE)">⏯</button>
|
|
<button onclick="app.key(app.KEY_MEDIA_NEXT_TRACK)">⏭</button>
|
|
</div>
|
|
<div class="buttons" style="grid-column: 1 / 4">
|
|
<button onclick="app.key(app.KEY_VOLUME_DOWN)">🔉</button>
|
|
<button onclick="app.key(app.KEY_VOLUME_MUTE)">🔇</button>
|
|
<button onclick="app.key(app.KEY_VOLUME_UP)">🔊</button>
|
|
</div>
|
|
</div>
|
|
<div class="page">
|
|
<div class="buttons" style="grid-column: 1 / 4">
|
|
<button onclick="app.key(app.KEY_BACK_SPACE)">⌫</button>
|
|
<button onclick="app.key(app.KEY_RETURN)">⮠</button>
|
|
<button onclick="app.key(app.KEY_DELETE)">⌦</button>
|
|
</div>
|
|
<div class="buttons" style="grid-column: 1 / 4">
|
|
<button onclick="app.key(app.KEY_HOME)">⭰</button>
|
|
<button onclick="app.key(app.KEY_UP)">↑</button>
|
|
<button onclick="app.key(app.KEY_END)">⭲</button>
|
|
</div>
|
|
<div class="buttons" style="grid-column: 1 / 4">
|
|
<button onclick="app.key(app.KEY_LEFT)">←</button>
|
|
<button onclick="app.key(app.KEY_DOWN)">↓</button>
|
|
<button onclick="app.key(app.KEY_RIGHT)">→</button>
|
|
</div>
|
|
</div>
|
|
<div class="page">
|
|
<button onclick="app.key(app.KEY_BACK_SPACE)">⌫</button>
|
|
<button onclick="app.text(this.textContent)">/</button>
|
|
<button onclick="app.text(this.textContent)">*</button>
|
|
<button onclick="app.text(this.textContent)">-</button>
|
|
|
|
<button style="grid-row: 2" onclick="app.text(this.textContent)">7</button>
|
|
<button onclick="app.text(this.textContent)">8</button>
|
|
<button onclick="app.text(this.textContent)">9</button>
|
|
<button onclick="app.text(this.textContent)">+</button>
|
|
|
|
<button style="grid-row: 3" onclick="app.text(this.textContent)">4</button>
|
|
<button onclick="app.text(this.textContent)">5</button>
|
|
<button onclick="app.text(this.textContent)">6</button>
|
|
<button onclick="app.text(this.textContent)">=</button>
|
|
|
|
<button style="grid-row: 4" onclick="app.text(this.textContent)">1</button>
|
|
<button onclick="app.text(this.textContent)">2</button>
|
|
<button onclick="app.text(this.textContent)">3</button>
|
|
<button style="grid-row: 4 / 6; grid-column: 4" onclick="app.key(app.KEY_RETURN)">⮠</button>
|
|
|
|
<button style="grid-row: 5; grid-column: 1 / 3" onclick="app.text(this.textContent)">0</button>
|
|
<button onclick="app.text(this.textContent)"><script>document.write(Intl.NumberFormat().formatToParts(1.1).find(x => x.type === "decimal").value)</script></button>
|
|
</div>
|
|
<button class="top right" onclick="app.setKeysPage(1, true)">⮂</button>
|
|
<button class="top left" onclick="history.back()">⯇</button>
|
|
</div>
|
|
|
|
<div id="mouse" class="scene keyboard-input allow-fullscreen">
|
|
<p class="background">Mouse</p>
|
|
</div>
|