<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://www.youtube.com/iframe_api"></script>
<body>
<div class="crt-curve">
<div class="grain"></div>
<div class="vhs"></div>
<div class='tvguide'>
<div class="announcements-outer">
<div class="announcementsBG desaturate">
</div>
<div class="announcements-inner">
<p class="white">Welcome back to 1999</p>
<p>TV GUIDE</p>
<p class="white">Select any show to watch a snippet, or just vibe out with a forgotten view.</p>
<div id ="tick">
<ul id="ticker-list">
<li>Latest News: Maude Flanders killed-off on 'The Simpsons' due to pay dispute with voice actress Maggie Roswell</li>
<li>Latest News: 'Who Wants to Be a Millionaire' premieres and becomes America's most watched show</li>
<li>Latest News: Premiere of HBO's The Sopranos' marks new age of television</li>
<li>Latest News: Jon Stewart takes over 'The Daily Show'</li>
<li>Latest News: FOX looks to invest in animation with the premieres of 'Family Guy' & 'Futurama'</li>
<li>Latest News: Heavy favorite 'Saving Private Ryan' loses Best Picture at the Oscars to 'Sharespeare in Love'</li>
<li>Latest News: 'Star Wars: The Phantom Menace' becomes the highest grossing film of the year, beating out 'The Sixth Sense' and 'Toy Story 2'</li>
<li>Latest News: 'The Matrix' secures sci-fi legacy with pioneering visual effects and philosophical narrative.</li>
</ul>
</div>
</div>
</div>
<div class="tv">
<iframe
id="youtube-video"
width="560"
height="315"
src="https://www.youtube.com/embed/Q5Wb5G5fedI?autoplay=1&mute=1&controls=0&start=757"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
<div id="timeNow" class="cell">
<div id="MyClockDisplay" onload="showTime()"></div>
</div>
<div class="guide">
<div class='currentProgramming'>
<div class="track timeSlots">
<div class='cell'></div>
<div class='cell'>
<div class="nextTime" id="NextHR"></div>
</div>
<div class='cell'>
<div class="nextTime" id="NextHR2"></div>
</div>
<div class='cell'>
<div class="nextTime" id="NextHR3"></div>
</div>
<div class='cell'>
<div class="nextTime" id="NextHR4"></div>
</div>
</div>
<div class="track channel">
<div class='cell'>
03
<br> PBS
</div>
<div class='cell'>
<a href="#" data-video-id="tCMddVHburI">Arthur</a>
</div>
<div class='cell'>
<a href="#" data-video-id="Z9gkcJleQxM">Zoboomafoo</a>
</div>
<div class='cell'>
<a href="#" data-video-id="c-bQ5PUMZxE">Dragon Tales</a>
</div>
<div class='cell'>
<a href="#" data-video-id="dNt6C1rrtzs">Sesame Street</a>
</div>
</div>
<div class="track channel">
<div class='cell'>
05
<br> NBC
</div>
<div class='cell'>
<a href="#" data-video-id="Z7pm_T-t7dY">Friends</a>
</div>
<div class='cell'>
<a href="#" data-video-id="Jw44z8AhP9s">Will & Grace</a>
</div>
<div class='cell'>
<a href="#" data-video-id="Eb4Yjd0uINE">Frasier</a>
</div>
<div class='cell'>
<a href="#" data-video-id="xx18XDUUp3E">3rd Rock from the Sun</a>
</div>
</div>
<div class="track channel">
<div class='cell'>
07
<br> ABC
</div>
<div class='cell'>
<a href="#" data-video-id="h-V04Q-Ymhk">Home Improvement</a>
</div>
<div class='cell2'>
<a href="#" data-video-id="GpWfnxeaLjs">Who Wants to be a Millionaire?</a>
</div>
<div class='cell3'></div>
<div class='cell'>
<a href="#" data-video-id="g-oTE0p60Ws">NYPD Blue</a>
</div>
</div>
<div class="track channel">
<div class='cell'>
08
<br> CBS
</div>
<div class='cell'>
<a href="#" data-video-id="Gxx9NjYE3WU">Everybody Loves Raymond</a>
</div>
<div class='cell'>
<a href="#" data-video-id="6rDjB3o1vkM">King of Queens</a>
</div>
<div class='cell'>
<a href="#" data-video-id="UbJN0eXW5zg">The Nanny</a>
</div>
<div class='cell'>
<a href="#" data-video-id="GRRiKBCukC4">60 Minutes</a>
</div>
</div>
<div class="track channel">
<div class='cell'>
09
<br> UPN
</div>
<div class='cell'>
<a href="#" data-video-id="Zyt2GKb6qWw">Pokemon</a>
</div>
<div class='cell'>
<a href="#" data-video-id="-UtUuT8AJjQ">Recess</a>
</div>
<div class='cell'>
<a href="#" data-video-id="G-4hBxOMl34">Pepper Ann</a>
</div>
<div class='cell'>
<a href="#" data-video-id="Mnpnh1kN6do">Doug</a>
</div>
</div>
<div class="track channel">
<div class='cell'>
10
<br> FOX
</div>
<div class='cell2'>
<a href="#" data-video-id="R1KCjCo2JJw">America's Most Wanted</a>
</div>
<div class='cell3'>
</div>
<div class='cell'>
<a href="#" data-video-id="mwyBW9-we5A">King of the Hill</a>
</div>
<div class='cell'>
<a href="#" data-video-id="jjYLyucWwn4">Futurama</a>
</div>
</div>
<div class="track channel">
<div class='cell'>
13
<br> WB
</div>
<div class='cell2'>
<a href="#" data-video-id="dzoOTltr4M4">7th Heaven</a>
</div>
<div class='cell3'>
</div>
<div class='cell2'>
<a href="#" data-video-id="y85KeLdnBNc">Dawson's Creek</a>
</div>
<div class='cell3'>
</div>
</div>
<div class="track channel">
<div class='cell'>
15
<br> WEATHER
</div>
<div class='cell2'>
<a href="#" data-video-id="CboPBn8d8VY">Weather Center</a>
</div>
<div class='cell3'>
</div>
<div class='cell'>
<a href="#" data-video-id="5trxBZIl270">Storm Center</a>
</div>
<div class='cell'>
<a href="#" data-video-id="evr019jipPk">Your Local Weather</a>
</div>
</div>
<div class="track channel">
<div class='cell'>
21
<br> MTV
</div>
<div class='cell'>
<a href="#" data-video-id="szZQLMytpMo">Spankin' New Music: Fiona Apple</a>
</div>
<div class='cell2'>
<a href="#" data-video-id="E1fzJ_AYajA">Music Videos</a>
</div>
<div class='cell3'>
</div>
<div class='cell'>
<a href="#" data-video-id="zbXJ5eAgLSg">TRL</a>
</div>
</div>
<div class="track channel">
<div class='cell'>
22
<br> MTV2
</div>
<div class='cell'>
<a href="#" data-video-id="LoAlKKmqeKQ">MTV Jams Countdown</a>
</div>
<div class='cell'>
<a href="#" data-video-id="OQUaguZawJQ">Beavis & Butt-Head</a>
</div>
<div class='cell'>
<a href="#" data-video-id="cXER3SZLAXo">The Real World</a>
</div>
<div class='cell'>
<a href="#" data-video-id="t2AcB3yXS8">Road Rules</a>
</div>
</div>
<div class="track channel">
<div class='cell'>
23
<br> CC
</div>
<div class='cell'>
<a href="#" data-video-id="pAYoGopVZTc">South Park</a>
</div>
<div class='cell'>
<a href="#" data-video-id="90AITvzAyEQ">Strangers with Candy</a>
</div>
<div class='cell'>
<a href="#" data-video-id="WZwgrcZVa74">Comedy Central Presents</a>
</div>
<div class='cell'>
<a href="#" data-video-id="hOIwat94a-A">Premium Blend</a>
</div>
</div>
<div class="track channel">
<div class='cell'>
26
<br> NICK
</div>
<div class='cell'>
<a href="#" data-video-id="CW_B4KB0wYs">The Angry Beavers</a>
</div>
<div class='cell'>
<a href="#" data-video-id="oWqAf4eex14">Spongebob Squarepants</a>
</div>
<div class='cell'>
<a href="#" data-video-id="QT_eQEuPscE">Rocket Power</a>
</div>
<div class='cell'>
<a href="#" data-video-id="iX04b9OampU">All That</a>
</div>
</div>
<div class="track channel">
<div class='cell'>
28
<br> NICK-W
</div>
<div class='cell'>
<a href="#" data-video-id="LAxchGHx13s">Spongebob Squarepants</a>
</div>
<div class='cell'>
<a href="#" data-video-id="54Afdxd6sUQ">CatDog</a>
</div>
<div class='cell'>
<a href="#" data-video-id="LVL2LDf1bcU">Rocko's Modern Life</a>
</div>
<div class='cell'>
<a href="#" data-video-id="nLFjuVyP_n0">Figure It Out</a>
</div>
</div>
<div class="track channel">
<div class='cell'>
32
<br> CARTOON
</div>
<div class='cell'>
<a href="#" data-video-id="LYNyJgd3348">Cow and Chicken</a>
</div>
<div class='cell'>
<a href="#" data-video-id="1BPLXepRC8E">Ed, Edd n Eddy</a>
</div>
<div class='cell'>
<a href="#" data-video-id="c0KlvkCKpE4">The Powerpuff Girls</a>
</div>
<div class='cell'>
<a href="#" data-video-id="eexDkxvaZb8">Classic Cartoons</a>
</div>
</div>
<div class="track channel">
<div class='cell'>
66
<br> HBO
</div>
<div class='cell2'>
<a href="#" data-video-id="JMiFsFQcFLE">Rush Hour</a>
</div>
<div class='cell3'>
</div>
<div class='cell2'>
<a href="#" data-video-id="ujMxXOHJloI">Armageddon</a>
</div>
<div class='cell3'>
</div>
</div>
<div class="track channel">
<div class='cell'>
67
<br> HBO2
</div>
<div class='cell'>
<a href="#" data-video-id="YwIt5wagRsg">Small Soldiers</a>
</div>
<div class='cell2'>
<a href="#" data-video-id="pt6bMHUoE6I">Godzilla</a>
</div>
<div class='cell3'>
</div>
<div class='cell'>
<a href="#" data-video-id="1YGfrGKK9Mo">Titanic</a>
</div>
</div>
<div class="track channel">
<div class='cell'>
66
<br> STARZ
</div>
<div class='cell2'>
<a href="#" data-video-id="Gg9nzOFVwtQ">The Fifth Element</a>
</div>
<div class='cell3'>
</div>
<div class='cell2'>
<a href="#" data-video-id="ezAsS01cDIs">The Truman Show</a>
</div>
<div class='cell3'>
</div>
</div>
</div>
</div>
</div>
</div>
* {
box-sizing: border-box;
}
html {
font-size: 21px;
line-height: 1.2;
text-shadow: 1px 2px 1px black;
height: 100%;
overflow: hidden;
width: 100%;
background-color: darkblue;
margin: auto;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
font-variant: normal;
}
a {
color: #fff;
text-decoration: none;
}
.crt-curve {
position: fixed;
width: 92%;
height: 94%;
border-radius: 40% / 2%;
padding: 0;
margin: 2% 4%;
z-index: 999999;
pointer-events: none;
filter: blur(0.75px);
}
.crt-curve:after {
content: "";
z-index: 99999999;
position: absolute;
top: -1%;
left: -2%;
right: -2%;
bottom: -1%;
background-image: radial-gradient(transparent 95%, #000);
opacity: 1;
box-shadow: inset 0 0 55px 6px #000, 0 0 0 150px #000;
border-radius: 4.5% / 10%;
pointer-events: none;
}
.white {
color: white;
font-size:0.8em;
}
.tvguide {
width: 106%;
height: 104%;
margin: -2%;
background-color: darkblue;
display: grid;
grid-template-columns: [first] auto [line2] 560px [end];
grid-template-rows: [row1-start] 460px [row1-end] 66% [third-line] auto [last-line];
transform: scale(1.01);
overflow-x: auto;
z-index: 999;
filter: contrast(1.4) brightness(1.1);
}
.announcements-outer {
grid-column: 1;
grid-row: 1;
background-color: #0f00ac;
position: relative;
width: 100%;
}
.announcements-inner {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: yellow;
position: absolute;
padding:50px;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.announcementsBG {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Dish_Network_logo_2012.svg/2560px-Dish_Network_logo_2012.svg.png");
opacity: 0.5;
background-position: center center;
background-repeat: no-repeat;
background-size: 50%;
}
.tv {
background-color: black;
grid-column: 2;
grid-row: 1;
overflow: hidden;
position: relative;
margin: 0;
}
iframe {
transform: scale(1.35, 1.45) translate(0%, 0%);
height: 100%;
width: 560px;
margin-top: 0;
}
.guide {
background-color: #151837;
grid-column: 1 / -1;
grid-row: 2;
position: relative;
overflow: hidden;
height: 100vh;
pointer-events: auto;
}
.cell {
border-top: 3px solid white;
border-left: 3px solid white;
border-right: 3px solid black;
border-bottom: 3px solid black;
background-color: #151837;
color: yellow;
padding-left: 20px;
padding-top: 10px;
}
.cell2 {
border-top: 3px solid white;
border-left: 3px solid white;
border-right: none;
border-bottom: 3px solid black;
background-color: #151837;
color: white;
padding-left: 10px;
padding-top: 10px;
white-space: nowrap;
}
.cell3 {
border-top: 3px solid white;
border-left: none;
border-right: 3px solid black;
border-bottom: 3px solid black;
background-color: transparent;
padding-left: 10px;
padding-top: 10px;
}
#timeNow {
position: fixed;
top: 460px;
left: 0;
width: 200px;
padding-left: 20px;
background-color: #2b4973;
z-index: 1;
color: white;
line-height: 2;
}
.track {
grid-template-columns: 200px repeat(4, minmax(0px, 1fr));
}
.currentProgramming {
display: grid;
}
.timeSlots {
display: grid;
position: sticky;
top: 0;
.cell {
padding-left: 10px;
background-color: #2b4973;
line-height: 2;
}
}
.channel {
display: grid;
> .cell:not(:first-of-type) {
color: white;
padding-left: 10px;
}
height: 8vh;
overflow: hidden;
}
.desaturate {
width: 100%;
height: 100%;
position: relative;
}
.desaturate:before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: inherit;
/*grayscale for background image*/
-webkit-filter: grayscale(1);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: gray;
filter: grayscale(100%);
filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");
}
/* VHS BG */
.vhs {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 1;
pointer-events: none;
transform: translateZ(0);
opacity: 1;
}
.vhs:before {
content: "";
top: -10rem;
left: -10rem;
width: calc(100% + 20rem);
height: calc(100% + 20rem);
z-index: 9999;
position: fixed;
background-image: url("https://68.media.tumblr.com/595a5fa01fe53ca0e4ca8f37bacc849d/tumblr_nve67mJtue1tanofjo1_500.gif");
background-size: repeat;
opacity: 0.07;
pointer-events: none;
-webkit-animation: noise 0.5s steps(3) infinite;
animation: noise 0.5s steps(3) infinite;
}
/* GRAIN BG */
.grain {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 1;
pointer-events: none;
transform: translateZ(0);
opacity: 1;
}
.grain:before {
content: "";
top: -10rem;
left: -10rem;
width: calc(100% + 20rem);
height: calc(100% + 20rem);
z-index: 9999;
position: fixed;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/5/5c/Image_gaussian_noise_example.png);
opacity: 0.25;
pointer-events: none;
-webkit-animation: noise 0.5s steps(4) infinite;
animation: noise 0.5s steps(4) infinite;
}
@-webkit-keyframes noise {
to {
transform: translate3d(-7rem, 0, 0);
}
}
@keyframes noise {
0% {
transform: translate3d(0, 9rem, 0);
}
10% {
transform: translate3d(-1rem, -4rem, 0);
}
20% {
transform: translate3d(-8rem, 2rem, 0);
}
30% {
transform: translate3d(9rem, -9rem, 0);
}
40% {
transform: translate3d(-2rem, 7rem, 0);
}
50% {
transform: translate3d(-9rem, -4rem, 0);
}
60% {
transform: translate3d(2rem, 6rem, 0);
}
70% {
transform: translate3d(7rem, -8rem, 0);
}
80% {
transform: translate3d(-9rem, 1rem, 0);
}
90% {
transform: translate3d(6rem, -5rem, 0);
}
to {
transform: translate3d(-7rem, 0, 0);
}
}
/* ticker */
#tick {
white-space: nowrap;
overflow: hidden;
width: 120%;
top: 410px;
position: fixed;
color: white;
letter-spacing: 1px;
font-size: 17px;
background-color: darkblue;
left: 0;
}
#tick ul {
display: inline-block;
animation: ticker 30s linear infinite;
width: 65%;
}
#tick li {
display: inline;
padding-left: 40px;
margin-right: 20px;
}
@keyframes ticker {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
/* small-screens */
@media only screen and (max-width: 800px) {
html {
font-size: 14px;
}
.crt-curve {
margin: 4%;
}
.crt-curve:after {
box-shadow: inset 0 0 30px 3px #000, 0 0 0 100px #000;
border-radius: 8.5% / 10%;
}
.announcements-outer {
display: none;
}
.tvguide {
grid-template-columns: [first] auto [line2] 800px [end] 25%;
grid-template-rows: [row1-start] 315px [row1-end] 33% [third-line] auto [last-line];
overflow-x: hidden;
}
#timeNow {
top: 315px;
width: 85px;
padding-left: 5px;
font-size: 0.75em;
line-height: 2.75;
}
.track {
grid-template-columns: 85px repeat(10, minmax(0px, 1fr));
}
.cell,
.cell2,
.cell3 {
padding-left: 8px;
}
.tv {
width: 100vw;
grid-column: 1;
}
iframe {
height: 100%;
max-width: 800px !important;
position: absolute;
left: 48%;
top: 50%;
transform: translate(-50%, -50%) scale(1);
}
}
}
const ScrollRate = 100;
let DivElmnt = document.querySelector(".guide");
let ScrollInterval;
function scrollDiv_init() {
DivElmnt.innerHTML += DivElmnt.innerHTML; // Duplicate the content for looping
DivElmnt.scrollTop = 0;
ScrollInterval = setInterval(scrollDiv, ScrollRate);
}
function scrollDiv() {
DivElmnt.scrollTop++;
if (DivElmnt.scrollTop >= DivElmnt.scrollHeight / 2) {
DivElmnt.scrollTop = 0;
}
}
function pauseDiv() {
clearInterval(ScrollInterval);
}
function resumeDiv() {
ScrollInterval = setInterval(scrollDiv, ScrollRate);
}
scrollDiv_init();
// clock code //
function showTime() {
var date = new Date();
var h = date.getHours(); // 0 - 23
var m = date.getMinutes(); // 0 - 59
var s = date.getSeconds(); // 0 - 59
var session = h >= 12 ? "PM" : "AM"; // Adjust AM/PM based on the hour
if (h == 0) {
h = 12;
} else if (h > 12) {
h = h - 12;
}
h = h < 10 ? "0" + h : h;
m = m < 10 ? "0" + m : m;
s = s < 10 ? "0" + s : s;
var time = h + ":" + m + ":" + s + " " + session;
document.getElementById("MyClockDisplay").innerText = time;
document.getElementById("MyClockDisplay").textContent = time;
// Calculate the next times in 30, 60, 90, and 120-minute increments //
var next30Min = new Date(date.getTime() + -30 * 60 * 1000);
var next60Min = new Date(date.getTime() + 0 * 60 * 1000);
var next90Min = new Date(date.getTime() + 30 * 60 * 1000);
var next120Min = new Date(date.getTime() + 60 * 60 * 1000);
var roundUpToNearestHalfHour = function (time) {
var minutes = time.getMinutes();
if (minutes <= 30) {
time.setMinutes(30);
} else {
time.setHours(time.getHours() + 1);
time.setMinutes(0);
}
return time;
};
next30Min = roundUpToNearestHalfHour(next30Min);
next60Min = roundUpToNearestHalfHour(next60Min);
next90Min = roundUpToNearestHalfHour(next90Min);
next120Min = roundUpToNearestHalfHour(next120Min);
var formatTime = function (time) {
var hours = time.getHours();
var minutes = time.getMinutes();
var session = hours >= 12 ? "PM" : "AM";
hours = hours % 12;
hours = hours || 12;
hours = hours < 10 ? "0" + hours : hours;
minutes = minutes < 10 ? "0" + minutes : minutes;
return hours + ":" + minutes + " " + session;
};
// Update all elements with class "nextTime"
var nextTimes = document.getElementsByClassName("nextTime");
for (var i = 0; i < nextTimes.length; i++) {
switch (i) {
case 0:
nextTimes[i].textContent = formatTime(next30Min);
break;
case 1:
nextTimes[i].textContent = formatTime(next60Min);
break;
case 2:
nextTimes[i].textContent = formatTime(next90Min);
break;
case 3:
nextTimes[i].textContent = formatTime(next120Min);
break;
default:
break;
}
}
setTimeout(showTime, 1000);
}
showTime();
// ticker
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
const tickerList = document.getElementById("ticker-list");
const lis = tickerList.querySelectorAll("li");
const randomIndex = getRandomInt(0, lis.length - 1);
const selectedLi = lis[randomIndex].cloneNode(true);
tickerList.innerHTML = ""; // Clear the list
tickerList.appendChild(selectedLi);
// Set animation delay based on li index
selectedLi.style.animationDelay = `-${randomIndex * 2}s`; // Adjust animation speed as needed
// change channel
document.addEventListener("DOMContentLoaded", function () {
const video = document.getElementById("youtube-video");
const links = document.querySelectorAll("a[data-video-id]");
links.forEach((link) => {
link.addEventListener("click", (event) => {
event.preventDefault();
const videoId = link.getAttribute("data-video-id");
const newSrc = `https://www.youtube.com/embed/${videoId}?autoplay=1&controls=0`;
video.setAttribute("src", newSrc);
});
});
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.