cable-82/remote-control.html at main · nothans/cable-82 · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="theme-color" content="#2038C8">
<title>CABLE 82 - Remote Control</title>
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<link rel="icon" type="image/png" sizes="192x192" href="icon-192.png">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="manifest" href="remote-control.webmanifest">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="CABLE 82">
<link rel="stylesheet" href="remote-control.css">
</head>
<body>
<!-- The remote is a page of the board: the header band with the station
     bug, four color pages as keys, and the crawl band carrying the status.
     Four keys, no display, no state: every press is an event on the tuner
     bus (POST /api/tune) and the set does the remembering. -->
<main id="remote" role="group" aria-label="CABLE 82 remote control">
  <header id="band">
    <span id="bug">CABLE 82</span>
    <span id="sub">Remote control</span>
  </header>
  <div id="keys">
    <button type="button" class="key k-up" data-cmd="up" aria-label="Channel up">
      <span class="glyph" aria-hidden="true">&#9650;</span>
      <span class="label">Channel up</span>
    </button>
    <button type="button" class="key k-down" data-cmd="down" aria-label="Channel down">
      <span class="glyph" aria-hidden="true">&#9660;</span>
      <span class="label">Channel down</span>
    </button>
    <button type="button" class="key k-vol" data-cmd="volume" aria-label="Volume: loud, off, soft, medium">
      <span class="bars" aria-hidden="true"><i></i><i></i><i></i><i></i></span>
      <span class="label">Volume</span>
    </button>
    <button type="button" class="key k-power" data-cmd="power" aria-label="Power off and on">
      <span class="glyph" aria-hidden="true">I/O</span>
      <span class="label">Power</span>
    </button>
  </div>
  <footer id="crawl">
    <span id="flag" aria-hidden="true">Latest</span>
    <p id="status" role="status" aria-live="polite">Tap a key.</p>
    <button type="button" id="install" hidden>Install</button>
    <a id="room" href="config">Control room</a>
  </footer>
</main>
<script src="remote-control.js"></script>
</body>
</html>