The Iframe Overhaul: Part 2

This is part 2 of the Iframe Overhaul™, a 4-part overhaul that makes WebTV HD act more like real WebTV.
Things added:
Tab navigation! The selection box FINALLY moves a bit more like real WebTV.
Loading indicator (sorta - the scripting isn't done)
Statusbar audioscope (still have to fix toggling and stuff)

Changelog:
Finally fixed 404 page by using direct links.
Separated main and service styles into two different stylesheets.
Changed external links so they open in a new window (since iframe-embedding them doesn't work).
Fixed top bar shadow on the chat page.
Added loading panel styles and HTML (JS isn't done yet).
Separated mail styles into their own style sheet, decreasing the size of style.css.
Made progressbar and its animation global. (Why were they PowerOn-exclusive to begin with?)
Added variables for cursors and fonts.
Removed "What's on TV" link from home page for accuracy (since WebTV HD acts mostly like a Plus box).
Fixed Mail and Search links for localhost (only noticeable if self-hosting).
Changed wording on home page.
Removed Main.html since the index page works fine for that purpose.
Added loading globe images for the loading panel.
Fixed sidebar toggle button.
Fixed options bar on mobile.
Updated Weezer jewel logo.
Fixed asbestos easter egg (again).
Made resetSelectionBox work better for iframe pages.
Made PowerOn js slightly more IE-compatible. (Why am I even bothering?)
Updated template pages.
Removed duplicate statusbar on Music page.
Removed unnecessary closing tags on some pages.
Added redirect to non-iframe pages because some people don't get that you need to use the iframe page to have the statusbar (looking at you, Fumo kid)
Made the "How do I try this?" section more prominent so new users know where to go.

1999Home.html

@@ -3,6 +3,7 @@
   <title>Home for SKCro</title>
   <link rel=stylesheet type=text/css href=css/style.css>
   <link rel=stylesheet type=text/css href=css/home.css>
+  <link rel=stylesheet type=text/css href=css/service.css>
   <link rel="shortcut icon" href=Icon.png>
   <link rel=apple-touch-icon href=images/AppleTouchIcon.png>
   <script src=js/main.js></script>
@@ -27,7 +28,7 @@
         <td class="top-bar-item clickable" id=logo-1999 onClick="linkHandler('Credits.html');"><img src=images/WebTVJewel.svg alt="WebTV Logo"></td>
         <td class="top-bar-item clickable" onClick="linkHandler('/WebTV-HD/wtv-mail/Mail.html');"><img src=images/home/mail.png alt="Mail Icon"></td>
         <td class="top-bar-item clickable"><img src=images/home/favorites.png alt="Favorites Icon"></td>
-        <td class="top-bar-item clickable"><img src=images/home/explore.png alt="Explore Icon"></td>
+        <td class="top-bar-item clickable"><img src=images/home/explore.png alt="Community Icon"></td>
         <td class="top-bar-item clickable" onClick="linkHandler('/WebTV-HD/wtv-center/Search.html');"><img src=images/home/search.png alt="Search Icon"></td>
       </tr>
     </tbody></table>
@@ -36,7 +37,7 @@
         <td class=top-bar-item-text style=width:22%;></td>
         <td class=top-bar-item-text>Mail</td>
         <td class=top-bar-item-text>Favorites</td>
-        <td class=top-bar-item-text>Explore</td>
+        <td class=top-bar-item-text>Community</td>
         <td class=top-bar-item-text>Search</td>
       </tr>
     </tbody></table>
@@ -52,6 +53,7 @@
   </div>
   <div class=main-content-container>
     <div class=webtv-today-container>
+      <div class="clickable-today-overlay clickable" onClick="linkHandler('/WebTV-HD/wtv-mail/readMail.html');"></div>
       <div class=today-content-container>
         <div class=today-header></div>
         <div class=today-main>Welcome to WebTV HD!
@@ -65,7 +67,6 @@
           <tr><td class=bottom-link><a class=clickable>Entertainment</a></td><td class=bottom-link><a class=clickable>Sports</a></td><td class=bottom-link><a class=clickable>Money</a></td></tr>
         </tbody></table>
       </div>
-      <div class="clickable-today-overlay clickable" onClick="linkHandler('/WebTV-HD/wtv-mail/readMail.html');"></div>
     </div>
     <div class=right-image-container>
     </div>

404.html

@@ -1,41 +1,41 @@
 <!DOCTYPE HTML>
 <html><head>
   <title>Page Not Found</title>
-  <link rel=stylesheet type=text/css href=../../css/style.css>
-  <link rel=stylesheet type=text/css href=../../css/home.css>
-  <link rel="shortcut icon" href=../../Icon.png>
-  <link rel=apple-touch-icon href=../../images/AppleTouchIcon.png>
-  <script src=../../js/main.js></script>
-  <script src=../../js/home.js></script>
+  <link rel=stylesheet type=text/css href=https://skcro.github.io/WebTV-HD/css/style.css>
+  <link rel=stylesheet type=text/css href=https://skcro.github.io/WebTV-HD/css/home.css>
+  <link rel=stylesheet type=text/css href=https://skcro.github.io/WebTV-HD/css/service.css>
+  <link rel="shortcut icon" href=https://skcro.github.io/WebTV-HD/Icon.png>
+  <link rel=apple-touch-icon href=https://skcro.github.io/WebTV-HD/images/AppleTouchIcon.png>
+  <script src=https://skcro.github.io/WebTV-HD/js/main.js></script>
+  <script src=https://skcro.github.io/WebTV-HD/js/home.js></script>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="application-name" content="WebTV HD">
-</head>
-<body>
-<audio id=clickSound src=../../audio/click.mp3 preload=auto></audio>
-<audio id=inputSound src=../../audio/inputClick.mp3 preload=auto></audio>
-<audio id=submitSound src=../../audio/submitClick.mp3 preload=auto></audio>
-<audio id=errorSound src=../../audio/error.mp3 preload=auto></audio>
-<audio id=panelUp src=../../audio/up.mp3 preload=auto></audio>
-<audio id=panelDown src=../../audio/down.mp3 preload=auto></audio>
+</head><body>
+<audio id=clickSound src=https://skcro.github.io/WebTV-HD/audio/click.mp3 preload=auto></audio>
+<audio id=inputSound src=https://skcro.github.io/WebTV-HD/audio/inputClick.mp3 preload=auto></audio>
+<audio id=submitSound src=https://skcro.github.io/WebTV-HD/audio/submitClick.mp3 preload=auto></audio>
+<audio id=errorSound src=https://skcro.github.io/WebTV-HD/audio/error.mp3 preload=auto></audio>
+<audio id=panelUp src=https://skcro.github.io/WebTV-HD/audio/up.mp3 preload=auto></audio>
+<audio id=panelDown src=https://skcro.github.io/WebTV-HD/audio/down.mp3 preload=auto></audio>
 <div id=selectionbox></div>
 
 <div class=sidebar style=background-color:#3C3C56;>
   <div class=sidebar-contents>
-    <img class="sidebar-logo clickable" src=../../images/WebTVJewel.svg alt="WebTV Logo." onClick="linkHandler('../../Home.html');">
+    <img class="sidebar-logo clickable" src=https://skcro.github.io/WebTV-HD/images/WebTVJewel.svg alt="WebTV Logo." onClick="linkHandler('https://skcro.github.io/WebTV-HD/Home.html');">
     <div class="sidebar-border home"></div>
   </div>
   <div class=bottom-right-image style="max-height: 8vw">
-    <img alt="Warning Triangle" src=../../images/404.svg>
+    <img alt="Warning Triangle" src=https://skcro.github.io/WebTV-HD/images/404.svg>
   </div>
   <div class=sidebar-shadow></div>
 </div>
 
 <div class=main-content>
   <h1>Page Not Found</h1>
   <p>WebTV could not find the requested page. If you followed a link or used a bookmark to get here, the content you're looking for may have been moved or deleted.</p>
-  <button class="asbestos submit" tabindex=1 onclick="asbestos();">asbestos</button>
+  <button class="asbestos submit" tabindex=0 onclick="asbestos();">asbestos</button>
   <div class=border><hr class=print-only></div>
-  <button class="submit ButtonBorder2" onClick="linkHandler('../../Home.html');">Home</button>
+  <button class="submit ButtonBorder2" onClick="linkHandler('https://skcro.github.io/WebTV-HD/Home.html');">Home</button>
 </div>
 </body></html>

CONTRIBUTING.md

@@ -10,4 +10,4 @@ If you need a screen recorder, use [OBS](https://obsproject.com/) - it's a littl
 Want to see a feature added to WebTV HD? Fill in our [feature request template](https://github.com/SKCro/WebTV-HD/issues/new?assignees=SKCro&labels=enhancement&projects=&template=feature-request.md&title=%5BRequest%5D+). Make sure to clearly describe what you want added - low-effort posts like "plz add x feature" without a clear explanation may not be considered. If your suggestion is unclear, we will ask you to clarify.
 
 ### Contributing code
-You want to contribute code? Great! Create a fork of the project and make changes to that. When you're done coding, [make a pull request](https://github.com/SKCro/WebTV-HD/compare). The only rule is to make sure that your code doesn't clash with mine - I'll need to be able to merge it without too many issues.
+You want to contribute code? That's awesome! Create a fork of the project and make changes to that. When you're done coding, [make a pull request](https://github.com/SKCro/WebTV-HD/compare). The only rule is to make sure that your code doesn't clash with mine - I'll need to be able to merge it without too many issues.

Community.html

@@ -3,6 +3,7 @@
   <title>Community</title>
   <link rel=stylesheet type=text/css href=css/style.css>
   <link rel=stylesheet type=text/css href=css/community.css>
+  <link rel=stylesheet type=text/css href=css/service.css>
   <link rel="shortcut icon" href=Icon.png>
   <script src=js/main.js></script>
   <meta charset="UTF-8">
@@ -32,7 +33,7 @@
 <div class=main-content>
   <div class=community-box-container>
     <div class=community-box>
-      <div class="pagebuilder icon"><button class="box-outline clickable" onclick="linkHandler('https://discord.gg/qke279EUa8');">WebTV Discord</button></div> <!-- Hacky way to create an outline -->
+      <div class="pagebuilder icon"><button class="box-outline clickable" onclick="window.open('https://discord.gg/qke279EUa8', '_blank');">WebTV Discord</button></div> <!-- Hacky way to create an outline -->
       <div class=text>
           <div class=title>WebTV Discord</div>
           <div class=description>Chat with the WebTV community on their Discord server.</div>

ContactMe.html

@@ -2,6 +2,7 @@
 <html><head>
   <title>Contact Me</title>
   <link rel=stylesheet type=text/css href=css/style.css>
+  <link rel=stylesheet type=text/css href=css/service.css>
   <link rel="shortcut icon" href=Icon.png>
   <link rel=apple-touch-icon href=images/AppleTouchIcon.png>
   <script src=js/main.js></script>

Credits.html

@@ -2,6 +2,7 @@
 <html><head>
   <title>Credits</title>
   <link rel=stylesheet type=text/css href=css/style.css>
+  <link rel=stylesheet type=text/css href=css/service.css>
   <link rel="shortcut icon" href=Icon.png>
   <link rel=apple-touch-icon href=images/AppleTouchIcon.png>
   <script src=js/main.js></script>

Home.html

@@ -2,6 +2,7 @@
 <html><head>
   <title>Home for SKCro</title>
   <link rel=stylesheet type=text/css href=css/style.css>
+  <link rel=stylesheet type=text/css href=css/service.css>
   <link rel=stylesheet type=text/css href=css/home.css>
   <link rel="shortcut icon" href=Icon.png>
   <link rel=apple-touch-icon href=images/AppleTouchIcon.png>
@@ -28,8 +29,6 @@
     <div class="sidebar-border home"></div>
     <div class="sidebar-link clickable" onClick="linkHandler('Community.html');">Community</div>
     <div class="sidebar-border home"></div>
-    <div class="sidebar-link clickable">What's on TV</div>
-    <div class="sidebar-border home"></div>
   </div>
   <div class="bottom-right-image home">
     <img alt="Home Text" src=images/home/Home.svg>
@@ -41,10 +40,10 @@
   <div class=top-bar>
     <table class=top-bar-items>
       <tbody><tr>
-        <td class="top-bar-item clickable" onClick="linkHandler('/WebTV-HD/wtv-mail/Mail.html');"><img src=images/home/mail.png alt="Mail Icon"></td>
+        <td class="top-bar-item clickable" onclick="linkHandler('wtv-mail/Mail.html');"><img src=images/home/mail.png alt="Mail Icon"></td>
         <td class="top-bar-item clickable"><img src=images/home/favorites.png alt="Favorites Icon"></td>
         <td class="top-bar-item clickable"><img src=images/home/explore.png alt="Explore Icon"></td>
-        <td class="top-bar-item clickable" onClick="linkHandler('/WebTV-HD/wtv-center/Search.html');"><img src=images/home/search.png alt="Search Icon"></td>
+        <td class="top-bar-item clickable" onclick="linkHandler('wtv-center/Search.html');"><img src=images/home/search.png alt="Search Icon"></td>
       </tr>
     </tbody></table>
     <table class=top-bar-text>
@@ -58,7 +57,7 @@
   <div class=top-bar-shadow></div></div>
   <div class=homepage-content-container>
     <h3>Welcome to WebTV HD!</h3>
-    This project is rather incomplete as of now, with only a couple of things working. Feel free to click around and explore!<br>
+    This is an incomplete browser-based recreation of Microsoft's WebTV service. Feel free to click around and explore!<br>
     To see more of what this theme has to offer, check out the <a class="clickable" onclick="linkHandler('PageStyleGuide.html');">style reference page</a>.
     <br>It has examples of other WebTV stuff I've implemented, like checkboxes, radio buttons, text styles, and alert dialogs.
     <ul><h4 style=margin:0;>Links</h4>
@@ -67,7 +66,7 @@ <h3>Welcome to WebTV HD!</h3>
       <li><a class=clickable onclick="linkHandler('PowerOn.html');">PowerOn page</a> - This is where you started. It simulates the power-on, dialing, and splash screen sequences of a box.</li>
       <li><a class=clickable onclick="linkHandler('Credits.html');">Credits</a> - See who made this project possible!</li>
     </ul>
-    Additionally, Mail, Search, and Community are functional as well.
+    Additionally, Mail, Search, Community, and the options bar are functional as well - try clicking on the status bar!
   </div>
 </div>
 </body></html>

MainTemplate.html

@@ -2,6 +2,7 @@
 <html><head>
   <title>Main Template Page</title> <!-- Page title. This appears in the browser tab and status bar. -->
   <link rel=stylesheet type=text/css href=css/style.css> <!-- Stylesheet. Don't change this. -->
+  <link rel=stylesheet type=text/css href=css/service.css> <!-- Service page stylesheet. Remove to revert to default WebTV page theme. -->
   <link rel="shortcut icon" href=Icon.png> <!-- Page icon. Used as the tab bar icon. -->
   <link rel=apple-touch-icon href=images/AppleTouchIcon.png> <!-- Apple touch icon. Used when adding the page to the home screen on iOS. -->
   <script src=js/main.js></script> <!-- Main functionality script. Don't change this. -->
@@ -31,6 +32,9 @@
   <div class=sidebar-shadow></div>
 </div>
 
+<!-- Note: if you want to add a link, please don't use href - that causes the browser to navigate away before the click sound can be played. -->
+<!-- Instead, use this code snippet: <a class=clickable onClick="linkHandler('https://example.com/page');"> -->
+
 <div class=main-content> <!-- Main content. Put stuff here! -->
   <h1>Template</h1>
   <p>Template page for stuff outside of a <code>wtv-service</code> folder.</p>

Music.html

@@ -2,6 +2,7 @@
 <html><head>
   <title>WebTV Music</title>
   <link rel=stylesheet type=text/css href=css/style.css>
+  <link rel=stylesheet type=text/css href=css/service.css>
   <link rel=stylesheet type=text/css href=css/music.css>
   <link rel="shortcut icon" href=Icon.png>
   <link rel=apple-touch-icon href=images/AppleTouchIcon.png>
@@ -42,35 +43,35 @@ <h3 id=songs>Songs</h3><h4>Built In</h4>
       <div class=song-container>
         <div class=song-title>Dialing.MID Remaster<br></div>
         <div class=song-artist>Brian Salter/webcd</div>
-        <audio src=audio/dialing.mp3 controls></audio>
+        <audio tabindex=0 src=audio/dialing.mp3 controls></audio>
       </div>
       <div class=song-container>
         <div class=song-title>The Modem Song<br>(Prealpha Dialing)</div>
         <div class=song-artist>Peter Drescher</div>
-        <audio src=audio/music/prealphaDialing.mp3 controls></audio>
+        <audio tabindex=0 src=audio/music/prealphaDialing.mp3 controls></audio>
       </div>
       <div class=song-container>
         <div class=song-title>Splash (Uncompressed)</div>
         <div class=song-artist>Thomas Dolby</div>
-        <audio src=audio/splash.mp3 controls></audio>
+        <audio tabindex=0 src=audio/splash.mp3 controls></audio>
       </div>
     </div>
     <h4>Extras</h4>
     <div class=song-row>
       <div class=song-container>
         <div class=song-title>Buddy Holly</div>
         <div class=song-artist>Weezer</div>
-        <audio src=audio/music/weezer.mp3 id=weezer controls></audio>
+        <audio tabindex=0 src=audio/music/weezer.mp3 id=weezer controls></audio>
       </div>
       <div class=song-container>
-        <div class=song-title>SMS JP BIOS (WebTV Classic soundfont)</div>
+        <div class=song-title>SMS JP BIOS</div>
         <div class=song-artist>Hiroshi Kawaguchi</div>
-        <audio src=audio/music/jbiosClassic.mp3 controls></audio>
+        <audio tabindex=0 src=audio/music/jbiosClassic.mp3 controls></audio>
       </div>
       <div class=song-container>
         <div class=song-title>Let's Go Away</div>
         <div class=song-artist>Daytona USA</div>
-        <audio src=audio/music/letsGoAway.mp3 controls></audio>
+        <audio tabindex=0 src=audio/music/letsGoAway.mp3 controls></audio>
       </div>
     </div>
   </div>
@@ -81,17 +82,6 @@ <h4>Extras</h4>
     <div class=bottom-padding></div>
   </div>
 </div>
-
-<div class=status-bar>
-  <div class=status-bar-content>
-    <div class="ButtonBorder2 show-sidebar-button" onclick=toggleSidebar()></div>
-    <div class=page-name></div>
-    <div class=status-container>
-      <div class=status-indicator><webtv-audioscope leftoffset=-2.5% rightoffset=2.5% width=100% height=2.6vw bgcolor=#16162A gain=2></webtv-audioscope></div>
-    </div>
-  </div>
-</div>
-
 <script>
   document.addEventListener('play', function(e){
     var audios = document.getElementsByTagName('audio');
@@ -124,12 +114,5 @@ <h4>Extras</h4>
 	document.getElementById('bottom-message').textContent = 'uh sorry we ran out of songs';
     document.getElementById('button').textContent = 'Home';
   });
-  var statusContainerAudioscope = document.querySelector('.status-indicator webtv-audioscope');
-  if (statusContainerAudioscope && statusContainerAudioscope.shadowRoot) {
-    var canvas = statusContainerAudioscope.shadowRoot.querySelector('canvas');
-    if (canvas) {
-      canvas.style.borderRadius = '0.4vw';
-    }
-  }
 </script>
 </body></html>