12<html lang="en">3<head>4 <meta charset="utf-8">5 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">6 <title>Airwaves</title>7 <!-- Installable from a browser (manifest.webmanifest, sw.js in web.js). -->8 <link rel="manifest" href="manifest.webmanifest">9 <meta name="theme-color" content="#07080a">10 <link rel="apple-touch-icon" href="icons/apple-touch-icon.png">11 <meta name="apple-mobile-web-app-capable" content="yes">12 <meta name="mobile-web-app-capable" content="yes">13 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">14 <meta name="apple-mobile-web-app-title" content="Airwaves">15 <link rel="stylesheet" href="style.css">16</head>17<body class="mode-tv booting">18 <div id="titlebar" aria-hidden="true"></div>1920 <!-- The TV. It moves into the guide preview and antenna PiP via CSS. -->21 <div id="stage">22 <video id="video" playsinline autoplay></video>23 <div id="captions" aria-hidden="true"></div>24 <div id="pstate" aria-hidden="true"></div>25 <iframe id="wx" title="Local forecast" hidden></iframe>26 <div id="static" aria-hidden="true"></div>27 <div id="nosignal" hidden>28 <div class="ns-bars" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>29 <div class="ns-card">30 <div class="ns-num" data-f="num"></div>31 <div class="ns-call" data-f="call"></div>32 <p class="ns-msg" data-f="msg"></p>33 </div>34 </div>35 </div>3637 <div id="entry" aria-live="assertive"></div>3839 <!-- The channel banner, and with OK the on-screen controls: a timeline40 and a row of buttons below it (js/player.js, on-screen controls). -->41 <div id="banner" aria-live="polite">42 <div class="bn-chan">43 <div class="bn-num" data-f="num"></div>44 <div class="bn-call" data-f="call"></div>45 <div class="bn-net" data-f="net"></div>46 <div class="bn-logo" data-f="logo" hidden></div>47 </div>48 <div class="bn-now">49 <div class="bn-kicker"><span class="bn-label">Now</span><span data-f="time"></span><span class="bn-shift" data-f="shift"></span><span class="chips" data-f="chips"></span></div>50 <h2 class="bn-title" data-f="title"></h2>51 <div class="bn-ep" data-f="ep"></div>52 <div class="bn-cast" data-f="cast"></div>53 <div class="bn-progress"><i data-f="progress"></i></div>54 <p class="bn-desc" data-f="desc"></p>55 <div class="bn-next"><span class="bn-label">Next</span><span data-f="next"></span></div>56 <div class="bn-note" data-f="note"></div>57 </div>58 <div class="bn-signal">59 <div class="meter big" data-f="meter"></div>60 <div class="bn-tier" data-f="tier"></div>61 <div class="bn-tx" data-f="tx"></div>62 <div class="bn-atsc3" data-f="atsc3"></div>63 </div>64 <div class="tl fx" data-f="timeline" tabindex="-1" role="slider" aria-label="Timeline" hidden>65 <span class="tl-t" data-f="tl-lo"></span>66 <div class="tl-bar"><i class="tl-past"></i><i class="tl-buf"></i><i class="tl-edge"></i><i class="tl-head"><b data-f="tl-at"></b></i></div>67 <span class="tl-t" data-f="tl-hi"></span>68 </div>69 <div class="osd-bar" data-f="osd" role="toolbar" aria-label="Controls"></div>70 </div>7172 <!-- Guide -->73 <section id="guide" class="view" aria-label="Program guide">74 <div class="g-top">75 <div class="g-preview" aria-hidden="true"></div>76 <article class="g-detail">77 <div class="gd-kicker" data-f="kicker"></div>78 <h1 class="gd-title" data-f="title"></h1>79 <div class="gd-ep" data-f="ep"></div>80 <div class="gd-meta" data-f="meta"></div>81 <div class="gd-cast" data-f="cast"></div>82 <p class="gd-desc" data-f="desc"></p>83 <div class="gd-actions" data-f="actions"></div>84 <div class="gd-hint" data-f="hint"></div>85 </article>86 <div class="gd-art" data-f="art"></div>87 </div>88 <div class="g-bar">89 <div class="g-filters" role="tablist"></div>90 <div class="g-status" data-f="status"></div>91 </div>92 <div class="g-grid">93 <div class="g-head">94 <div class="g-day" data-f="day"></div>95 <div class="g-ticks"></div>96 </div>97 <div class="g-rows" tabindex="-1"></div>98 <div class="g-now" aria-hidden="true"><span></span></div>99 </div>100 </section>101102 <!-- Weather -->103 <section id="weather" class="view railed" aria-label="Weather">104 <nav class="rail">105 <div class="wx-now" data-f="now"></div>106 <button type="button" class="btn ghost fx wx-watch" data-act="watch" hidden>Watch the weather channel</button>107 </nav>108 <!-- Each part takes the focus in turn, Up and Down (js/weather.js). -->109 <div class="main wx-main">110 <div class="wx-alerts fx" data-f="alerts" tabindex="-1"></div>111 <div class="wx-block fx" tabindex="-1">112 <div class="wx-label">Next 24 hours</div>113 <svg class="wx-chart" data-f="chart" viewBox="0 0 960 200" preserveAspectRatio="none"></svg>114 <div class="wx-hours" data-f="hours"></div>115 </div>116 <div class="wx-days fx" data-f="days" tabindex="-1"></div>117 <div class="wx-maps fx" tabindex="-1">118 <figure><img data-f="radar" alt=""><figcaption>Radar, last hour</figcaption></figure>119 <figure><img data-f="satellite" alt=""><figcaption>Satellite</figcaption></figure>120 </div>121 </div>122 </section>123124 <!-- Recordings -->125 <section id="recordings" class="view railed" aria-label="Recordings">126 <nav class="rail"><div class="rail-menu" data-f="menu"></div></nav>127 <div class="main r-main">128 <div class="r-panel r-lib" data-panel="library">129 <article class="r-detail" data-f="detail"></article>130 <div class="r-grid" data-f="library"></div>131 </div>132 <ol class="r-panel r-list" data-panel="upcoming" data-f="upcoming"></ol>133 <ul class="r-panel r-list" data-panel="series" data-f="rules"></ul>134 </div>135 </section>136137 <!-- Podcasts, an app: video podcasts from YouTube, played on demand, laid138 out as Recordings' library is (js/podcasts.js). -->139 <section id="podcasts" class="view railed" aria-label="Podcasts">140 <nav class="rail">141 <div class="rail-menu p-menu" data-f="menu"></div>142 <div class="p-refresh" hidden>143 <button type="button" class="btn ghost fx" data-f="refresh">Refresh</button>144 <div class="p-rnote" data-f="rnote"></div>145 </div>146 </nav>147 <div class="main p-main">148 <article class="r-detail" data-f="detail"></article>149 <div class="r-grid" data-f="grid"></div>150 </div>151 </section>152153 <!-- More: Settings, a tab for each area, in the rail; most are a list of154 rows for a remote or a controller, Reception is what the tuners155 measured (js/settings.js, js/reception.js). -->156 <section id="settings" class="view railed" aria-label="Settings">157 <nav class="rail"><div class="rail-menu s-tabs" data-f="tabs" role="tablist"></div></nav>158 <div class="main s-main">159 <div class="s-list" data-f="list" role="list"></div>160 <div id="antenna" class="s-pane" aria-label="Reception" hidden>161 <div class="a-head">162 <div class="a-tuner fx" data-f="tuner" data-act="tuner" tabindex="-1"></div>163 <div class="a-measure">164 <button type="button" class="btn fx" data-act="measure" data-f="measure"><span data-f="mlabel">Measure now</span></button>165 <div class="a-mprog" data-f="mprog" hidden><i data-f="mbar"></i></div>166 <div class="a-mnote" data-f="mnote"></div>167 </div>168 <div class="a-measure">169 <button type="button" class="btn fx" data-act="scan" data-f="scan">Scan for channels</button>170 <div class="a-mnote" data-f="snote"></div>171 </div>172 <dl class="rail-stats a-stats" data-f="stats"></dl>173 </div>174 <div class="a-body">175 <div class="a-left">176 <div class="radar-box"><svg class="radar" viewBox="-226 -226 452 452" role="img" aria-label="Transmitter map"></svg></div>177 <div class="a-detail" data-f="detail"></div>178 </div>179 <div class="a-right">180 <div class="a-tablewrap">181 <table class="a-table">182 <thead><tr>183 <th>RF</th><th>Transmitter</th><th>Channels</th><th class="c">Signal</th><th class="r">Quality</th><th class="r">Errors</th><th class="r">Measured</th>184 </tr></thead>185 <tbody></tbody>186 </table>187 </div>188 <div class="a-nextgen" data-f="nextgen"></div>189 </div>190 </div>191 </div>192 <div class="s-hint" data-f="hint"></div>193 </div>194 </section>195196 <nav id="dock" aria-label="Views">197 <button data-view="tv"><kbd data-key="Escape" data-label="Esc">Esc</kbd>TV</button>198 <button data-view="guide"><kbd data-key="g" data-label="G">G</kbd>Guide</button>199 <button data-view="recordings"><kbd data-key="d" data-label="D">D</kbd>Recordings</button>200 <button data-view="podcasts"><kbd data-key="p" data-label="P">P</kbd>Podcasts</button>201 <button data-view="weather"><kbd data-key="w" data-label="W">W</kbd>Weather</button>202 <button data-view="settings"><kbd data-key="," data-label=",">,</kbd>More</button>203 </nav>204205 <div id="boot">206 <div class="boot-inner">207 <div class="boot-mark">Airwaves</div>208 <div class="boot-sub" data-f="sub">Over-the-air television</div>209 <ol class="boot-log"></ol>210 <!-- The arrows move between the fields and Connect; OK on a field211 puts the cursor in it (js/input.js, bootKey). -->212 <form class="boot-connect" hidden autocomplete="off">213 <label class="boot-field fx" tabindex="-1"><input name="server" placeholder="Server address" autocapitalize="off" spellcheck="false"></label>214 <label class="boot-field fx" tabindex="-1"><input name="token" type="password" placeholder="Token, if set"></label>215 <button class="btn fx">Connect</button>216 </form>217 <div class="boot-hint" data-f="hint"></div>218 </div>219 </div>220221 <div id="crawl" aria-live="polite"><span data-f="text"></span></div>222223 <div id="toast" role="status"></div>224225 <!-- A phone held upright, on the touch platform (style.css, Touch). -->226 <div id="rotate" aria-live="polite"><div><div class="rotate-mark" aria-hidden="true"></div>Turn your phone sideways</div></div>227228 <script src="vendor/hls.min.js"></script>229 <!-- The web app's stand-in for Wails, at /tv/ on airwavesd (web.js) -->230 <script src="web.js"></script>231 <!-- The app, by area, in this order: what runs as a file loads uses only232 what the files before it define (init starts once all are in). -->233 <script src="js/core.js"></script>234 <script src="js/player.js"></script>235 <script src="js/input.js"></script>236 <script src="js/touch.js"></script>237 <script src="js/guide.js"></script>238 <script src="js/reception.js"></script>239 <script src="js/settings.js"></script>240 <script src="js/recordings.js"></script>241 <script src="js/podcasts.js"></script>242 <script src="js/captions.js"></script>243 <script src="js/playback.js"></script>244 <script src="js/weather.js"></script>245</body>246</html>