Skip to content

Commit

Permalink
The Iframe Overhaul: Part 3
Browse files Browse the repository at this point in the history 
This is part 3 of the Iframe Overhaul™, a 4-part overhaul that makes WebTV HD act more like real WebTV.

Major additions/changes:
The PiP window!
Flip transition! (sorta)
More music and bgmusic shuffling!
Better header font.
Loading indicator (not perfect - it looks weird on Chrome)
An easter egg that involves the go to box ;)
A proper TV Home (finally!)
SelectionBox "remake" (it's just the original remade in SVG lmao)
Local audioscope script for slightly faster load times.
Anti-inspect-element for dialog boxes (not sure why I did this)
The setup page!
Proper alert dialogs! You can now call showAlert with a message from inside the iframe to trigger a dialog on the main page.
Hanging up! You can finally hang up... although there's no point to doing so :P

Changelog:
Changed a few pages to use semantic alternatives to div, like nav for the sidebars and main for the main content area.
Fixed 404 page (for real this time... I think)
Changed song locations so they're more sorted.
Added view button sound effect.
Changed the way sidebar images work. Now you can simply use a class instead of specifying an image.
Made top bar shadow an ::after element, to clean up the HTML.
Improved alert dialog styles.
Fixed styling for "you!" text on credits page.
Removed unnecessary specivity in community CSS.
Removed HelveticaDisplayBlack since it was replaced by a more accurate font.
Made color code capitalization within CSS more consistent.
Made some CSS rules less messy by using a more consistent order.
Added variables for fonts.
Made arrowed lists work better.
Added loading panel animation, using the regular WebTV globe for now.
Fixed dialog styles.
Added dialog ::before to prevent clicking things behind it.
Added PiP window styles and animation.
Fixed options bar animations (kinda).
Made button box-shadow scale with the user's font size.
Added placeholders for mobile styles.
Optimized JS slightly in several places.
Removed delay from startup animation.
Added slight pulse effect to splash logo glow.
Added search page CSS.
Added setup page and its corresponding CSS.
Adjusted sidebar link separators so they work better on mobile.
Added TV Home CSS.
Added a ton of accessibility-related stuff to the iframe and home pages.
Redesigned Apple homescreen icon.
Resized checkmark SVG to reduce blurring.
Fixed visual bug on cursor by adding padding consistent with the other cursor images.
Fixed radial gradient on Discord logo.
Removed TV Home BG since it no longer serves a purpose (and it didn't really look that good anyway) :P
Added a language to the HTML tag on the index page.
Added backward navigational sound (although it doesn't work).
Added view button sound.
Added hanging up and reconnect panel functionality.
Made audioscope in status bar appear automatically when bgmusic is enabled.
Fixed statusbar audioscope width and height.
Added hover labels to the options bar buttons.
Moved asbestos easter egg directly into 404.html since that page rarely, if ever, pulls assets correctly.
Added window-level variables. I made them window-level because I hate scoping issues and I didn't want to redefine "iframe" for the millionth time.
Added proper alerts.
Removed page name updater reference code since I got the event listener working.
Sped up PowerOn sequence slightly by making delays a bit shorter.
Made usage of var more consistent.
Added proper clock to TV Home.
Updated template pages.
Change splash sound on Music page to the AOL TV theme.
Changed JBIOS to uncompressed variant.
Changed the message at the end of the music page to sound less stupid.
Removed redundant dialog embedded directly into PageStyleGuide.
Optimized Splash SVG.
Updated readme.
Added TV Home text SVG.
Removed old TV Home page

rip in peace old tv home page
2023-2023

69 changed files gaming
  • Loading branch information
@SKCro
SKCro committed Dec 16, 2023
1 parent b74387e commit 9215b0c
Show file tree
Hide file tree
Showing 62 changed files with 2,402 additions and 1,704 deletions.
73 changes: 35 additions & 38 deletions 1999Home.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,57 +19,54 @@
<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>
<div id=selectionbox></div>
<div id=selectionbox aria-hidden=true></div>

<div class=home1999-content>
<div class="top-bar home1999">
<table class=top-bar-items>
<main class=home1999-content>
<nav class="top-bar home1999" aria-label="Top bar.">
<table class=top-bar-items aria-label="Top bar items.">
<tbody><tr>
<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="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>
<table class=top-bar-text>
<td class="top-bar-item clickable" id=logo-1999 title="Credits" onclick="linkHandler('Credits.html');"><img src=images/WebTVJewel.svg alt="WebTV Logo"></td>
<td class="top-bar-item clickable" title="Mail" onclick="linkHandler('wtv-mail/Mail.html');"><img src=images/home/mail.png alt="Mail Icon"></td>
<td class="top-bar-item clickable" title="Favorites"><img src=images/home/favorites.png alt="Favorites Icon"></td>
<td class="top-bar-item clickable" title="Community" onclick="linkHandler('Community.html');"><img src=images/home/explore.png alt="Community Icon"></td>
<td class="top-bar-item clickable" title="Search" onclick="linkHandler('wtv-center/Search.html');"><img src=images/home/search.png alt="Search Icon"></td>
</tr></tbody>
</table>
<table class=top-bar-text aria-hidden=true>
<tbody><tr>
<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>Community</td>
<td class=top-bar-item-text>Search</td>
</tr>
</tbody></table>
</div>
<div class=top-bar-1999>
<div class=top-links>
<div class=top-link><a class=clickable>TV Home</a></div>
<div class=top-link><a class=clickable>Switch User</a></div>
<div class=top-link><a class=clickable>Settings</a></div>
<div class=top-link><a class=clickable>Account</a></div>
<div class=top-link><a class=clickable>Help</a></div>
</div>
</div>
<div class=main-content-container>
</tr></tbody>
</table>
</nav>
<nav class=top-links aria-label="Top links.">
<div class=top-link aria-label="TV Home link. Click to go to the TV Home page." aria-role=link><a class=clickable onclick="linkHandler('TV/TVHome.html');">TV Home</a></div>
<div class=top-link aria-label="Switch user link. Currently non-functional." aria-role=link><a class=clickable>Switch User</a></div>
<div class=top-link aria-label="Setup page link. Click to go to Setup." aria-role=link><a class=clickable onclick="linkHandler('wtv-setup/setup.html');">Setup</a></div>
<div class=top-link aria-label="Account link. Currently non-functional." aria-role=link><a class=clickable>Account</a></div>
<div class=top-link aria-label="Help link. Currently non-functional." aria-role=link><a class=clickable>Help</a></div>
</nav>
<main 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!
<div class=today-sub></div>
<div class=today-findoutmore>find out more in WebTV Today</div>
<div class="clickable-today-overlay clickable" aria-label="WebTV Today container. Click to activate." onclick="linkHandler('wtv-mail/readMail.html');"></div>
<div class=today-content-container aria-label="WebTV Today contents.">
<div class=today-header aria-hidden=true></div>
<div class=today-main aria-label="WebTV Today header.">Welcome to WebTV HD!
<div class=today-sub aria-label="WebTV Today description.">Click here to learn more about the project.</div>
<div class=today-findoutmore aria-hidden=true>find out more in WebTV Today</div>
</div>
</div>
<div class=bottom-links>
<table><tbody>
<nav class=bottom-links>
<table aria-role=navigation><tbody>
<tr><td class=bottom-link><a class=clickable>WebTV Today</a></td><td class=bottom-link><a class=clickable>News</a></td><td class=bottom-link><a class=clickable>Shopping</a></td></tr>
<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>
<div class=right-image-container>
</nav>
</div>
</div>
</div>
<aside class=right-image-container></aside>
</main>
</main>
</body></html>
55 changes: 46 additions & 9 deletions 404.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,46 @@
<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>
<script>
// just for you, halen
function snortAsbestos(){
document.getElementById('submitSound').play();
var smoke = document.querySelector('.smoke');
var currentAnimation = window.getComputedStyle(smoke).getPropertyValue('animation');
smoke.style.animation = currentAnimation ? currentAnimation + ', fadeOut 250ms linear forwards' : 'fadeOut 250ms linear forwards';
setTimeout(function(){linkHandler('https://skcro.github.io/WebTV-HD/Home.html');},150);
/* window.open('https://www.youtube.com/watch?v=THc1X-kEX4E', '_new'); Commented out because the video was privated due to copyright */
}
function asbestos(){
document.body.style.opacity = 0;
document.title = 'asbestos';
setTimeout(function(){
var headerContent = document.head.innerHTML;
while (document.body.firstChild) { document.body.removeChild(document.body.firstChild); }
document.body.style.opacity = 1;
var newContent = document.createElement('div');
newContent.innerHTML = String.raw `
<audio id=1 src=https://skcro.github.io/WebTV-HD/audio/asbestos.mp3 preload=auto></audio>
<audio id=errorSound src=https://skcro.github.io/WebTV-HD/audio/error.mp3 preload=auto></audio>
<audio id=submitSound src=https://skcro.github.io/WebTV-HD/audio/submitClick.mp3 preload=auto></audio>
<div id=selectionbox></div>
<div class=smoke></div>`;
document.body.appendChild(newContent);
document.head.innerHTML = headerContent;
var sound = document.getElementById('1');
sound.play();
var intervalId = setInterval(function(){
if (sound.currentTime >= sound.duration - 2){
clearInterval(intervalId);
showAlert('WebTV ran into a mesotheleoma problem. You may be entitled to financial compensation.');
}
},100);
},500);
}
</script>
<style>
.bottom-right-image {background-image: url('https://skcro.github.io/WebTV-HD/images/404.svg');}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="application-name" content="WebTV HD">
Expand All @@ -20,22 +59,20 @@
<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;>
<nav class=sidebar style=background-color:#3C3C56;>
<div class=sidebar-contents>
<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=https://skcro.github.io/WebTV-HD/images/404.svg>
</div>
<div class="bottom-right-image error" style="max-height: 8vw"></div>
<div class=sidebar-shadow></div>
</div>
</nav>

<div class=main-content>
<main 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=0 onclick="asbestos();">asbestos</button>
<button class="asbestos submit" onclick="asbestos();">asbestos</button>
<div class=border><hr class=print-only></div>
<button class="submit ButtonBorder2" onClick="linkHandler('https://skcro.github.io/WebTV-HD/Home.html');">Home</button>
</div>
</main>
</body></html>
6 changes: 2 additions & 4 deletions Community.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,10 @@

<div class=sidebar style=background-color:#235E56;>
<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=images/WebTVJewel.svg alt="WebTV Logo" onClick="linkHandler('Home.html');">
<div class="sidebar-border bwgrad"></div>
</div>
<div class="bottom-right-image community">
<img alt="Community Text" src=images/Community.svg>
</div>
<div class="bottom-right-image community"></div>
<div class=sidebar-shadow></div>
</div>

Expand Down
31 changes: 15 additions & 16 deletions Credits.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,32 +19,31 @@
<audio id=panelDown src=audio/down.mp3 preload=auto></audio>
<div id=selectionbox></div>

<div class=sidebar style=background-color:#8C6A2E;>
<nav class=sidebar style=background-color:#8C6A2E;>
<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=images/WebTVJewel.svg alt="WebTV Logo" onclick="linkHandler('Home.html');">
<div class=sidebar-border style="background-image: linear-gradient(#5a4521 40%, #C0954A 85%);"></div>
</div>
<div class="bottom-right-image credits">
<img alt="Setup Text" src=images/Credits.svg>
</div>
<div class="bottom-right-image credits"></div>
<div class=sidebar-shadow></div>
</div>
</nav>

<div class=main-content>
<main class=main-content>
<h1>Credits</h1>
<p>This project would not possible without these awesome people:</p>
<ul>
<li>Steve Perlman, Bruce Leak, and Phil Goldman, for creating WebTV</li>
<li>WebTV employees, for making the service last long</li>
<li><a class=clickable onClick="linkHandler('https://github.com/JarHead4');">JarHead</a>, for his <a class=clickable onClick="linkHandler('https://webtv.zone/');">WebTV Redialed</a> project (which was inspiration)</li>
<li><a class=clickable onClick="linkHandler('https://github.com/Nitrate92');">nitrate92</a>, for helping and providing useful advice</li>
<li><a class=clickable onClick="linkHandler('https://github.com/PajamaFrix');">pjfrix</a>, for letting me use his code for the progress bar and light button</li>
<li><a class=clickable onClick="linkHandler('https://www.deviantart.com/blueamnesiac');">BLUEamnesiac</a>, for the sweet HD icons used on the home screen</li>
<li>The <a class=clickable onClick="linkHandler('https://discord.gg/qke279EUa8');">WebTV Discord server</a>, for being a great community</li>
<li style=font-size:1.2rem;>Pink_Sheep, for his ideas</li>
<li><a class=clickable onclick="window.open('https://github.com/JarHead4', '_new');">JarHead</a>, for his <a class=clickable onClick="linkHandler('https://webtv.zone/');">WebTV Redialed</a> project (which was inspiration)</li>
<li><a class=clickable onclick="window.open('https://github.com/Nitrate92', '_new');">nitrate92</a>, for helping and providing useful advice</li>
<li><a class=clickable onclick="window.open('https://github.com/PajamaFrix', '_new');">pjfrix</a>, for letting me use his code for the progress bar and light button</li>
<li>webcd, for the sweet Dialing theme remaster</li>
<li><a class=clickable onclick="window.open('https://www.deviantart.com/blueamnesiac', '_new');">BLUEamnesiac</a>, for the sweet HD icons used on the home screen</li>
<li>The <a class=clickable onclick="window.open('https://discord.gg/qke279EUa8', '_new');">WebTV Discord server</a>, for being a great community</li>
<li class=pink-sheep>Pink_Sheep, for his ideas</li>
</ul>
<p style=margin-bottom:0;>And, of course,</p><h2 style=margin-top:0;>you!</h2><p style=margin-top:0.5rem;><b>Thank you</b> for checking out my code.</p>
<p style=margin-bottom:0;>And, of course,</p><h3 style=margin:0;>you!</h2><p><b>Thank you</b> for checking out my project.</p>
<div class=border><hr class=print-only></div>
<button class="submit ButtonBorder2" onClick="linkHandler('Home.html');">Home</button>
</div>
<button class="submit ButtonBorder2" aria-label="Go home" onclick="linkHandler('Home.html');">Home</button>
</main>
</body></html>
53 changes: 26 additions & 27 deletions Home.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,54 +19,53 @@
<audio id=panelDown src=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('Credits.html');">
<nav class=sidebar aria-label="Sidebar." style=background-color:#3C3C56;>
<div class=sidebar-contents aria-label="Sidebar content." aria-role=navigation>
<img class="sidebar-logo clickable" src=images/WebTVJewel.svg title="WebTV Logo" aria-label="WebTV logo. Click to go to the credits page." role=link onclick="linkHandler('Credits.html');">
<div class="sidebar-border home"></div>
<div class="sidebar-link clickable">Setup</div>
<div class="sidebar-link clickable" title="Setup" aria-label="Setup link. Click to go to the setup page." role=link onclick="linkHandler('wtv-setup/setup.html');">Setup</div>
<div class="sidebar-border home"></div>
<div class="sidebar-link clickable">Using WebTV</div>
<div class="sidebar-link clickable" title="Using WebTV" aria-label="Using WebTV link. Currently non-functional." role=link>Using WebTV</div>
<div class="sidebar-border home"></div>
<div class="sidebar-link clickable" onClick="linkHandler('Community.html');">Community</div>
<div class="sidebar-link clickable" title="Community" aria-label="Community link. Click to go to the Community page." role=link onclick="linkHandler('Community.html');">Community</div>
<div class="sidebar-border home"></div>
</div>
<div class="bottom-right-image home">
<img alt="Home Text" src=images/home/Home.svg>
</div>
<div class=sidebar-shadow></div>
</div>
<div class="bottom-right-image home"></div>
<div class=sidebar-shadow aria-hidden=true></div>
</nav>

<div class="main-content home">
<div class=top-bar>
<main class="main-content home" aria-label="Home page content.">
<nav class=top-bar aria-label="Top navigation bar.">
<table class=top-bar-items>
<tbody><tr>
<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('wtv-center/Search.html');"><img src=images/home/search.png alt="Search Icon"></td>
</tr>
</tbody></table>
<table class=top-bar-text>
<td class="top-bar-item clickable" aria-label="Mail." onclick="linkHandler('wtv-mail/Mail.html');"><img src=images/home/mail.png alt="Mail Icon"></td>
<td class="top-bar-item clickable" aria-label="Favorites. Currently non-functional."><img src=images/home/favorites.png alt="Favorites Icon"></td>
<td class="top-bar-item clickable" aria-label="Explore. Currently non-functional."><img src=images/home/explore.png alt="Explore Icon"></td>
<td class="top-bar-item clickable" aria-label="Search. Currently non-functional." onclick="linkHandler('wtv-center/Search.html');"><img src=images/home/search.png alt="Search Icon"></td>
</tr></tbody>
</table>
<table class=top-bar-text aria-hidden=true>
<tbody><tr>
<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>Search</td>
</tr>
</tbody></table>
<div class=top-bar-shadow></div></div>
<div class=homepage-content-container>
</tr></tbody>
</table>
</nav>
<main class=homepage-content-container aria-label="Main home page content.">
<h3>Welcome to WebTV HD!</h3>
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>
<ul><h4 style=margin:0; aria-label="List of links">Links</h4>
<li><a class=clickable onclick="linkHandler('1999Home.html');">1999 Home page</a> - A later revision of the home page.</li>
<li><a class=clickable onclick="linkHandler('Music.html');">Music</a> - Listen to some WebTV music and check out the audioscope!</li>
<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('TV/TVHome.html');">TV Home</a> - Check out the TV Home page!</li>
<li><a class=clickable onclick="linkHandler('Credits.html');">Credits</a> - See who made this project possible!</li>
</ul>
Additionally, Mail, Search, Community, and the options bar are functional as well - try clicking on the status bar!
</div>
</div>
</main>
</main>
</body></html>
7 changes: 2 additions & 5 deletions MainTemplate.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,7 @@
<meta charset="UTF-8"> <!-- Meta tags. These tell the browser exactly how to handle the page. -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="application-name" content="WebTV HD">
</head>
<body> <!-- Sound effects. These are responsible for the sounds you hear when clicking on stuff. -->
</head><body> <!-- Sound effects. These are responsible for the sounds you hear when clicking on stuff. -->
<audio id=clickSound src=audio/click.mp3 preload=auto></audio> <!-- Generic click sound. Plays when you click most links or icons. -->
<audio id=inputSound src=audio/inputClick.mp3 preload=auto></audio> <!-- Input click sound. Plays when you click on some sort of input (like a checkbox or radio button). -->
<audio id=submitSound src=audio/submitClick.mp3 preload=auto></audio> <!-- Submit click sound. Plays when you click on a button. -->
Expand All @@ -26,9 +25,7 @@
<div class="sidebar-link clickable">Link</div> <!-- Sidebar link. -->
<div class=sidebar-border></div>
</div>
<div class=bottom-right-image> <!-- Bottom-right image. -->
<img alt="Home Text" src=images/Home.svg>
</div>
<div class="bottom-right-image home"></div> <!-- Bottom-right image. Change the sub-class to change the image. -->
<div class=sidebar-shadow></div>
</div>

Expand Down
Loading

0 comments on commit 9215b0c

Please sign in to comment.