Add files via upload
This commit is contained in:
MattTheTekie
GitHub
commit
32dcbbf639
7 changed files with 972 additions and 0 deletions
BIN
BCO.745bf54b-0906-4d9f-9104-ac2b026ea57c.png
Normal file
BIN
BCO.745bf54b-0906-4d9f-9104-ac2b026ea57c.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 MiB |
BIN
PHOTO-LUXURY-TRAVEL-930x544.jpeg
Normal file
BIN
PHOTO-LUXURY-TRAVEL-930x544.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
BIN
background.png
Normal file
BIN
background.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
241
index.html
Normal file
241
index.html
Normal file
|
|
@ -0,0 +1,241 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>On Demand Simulator</title>
|
||||
|
||||
<style>
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: black;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 4:3 frame */
|
||||
.screen {
|
||||
width: min(100vw, calc(100vh * 4 / 3));
|
||||
height: min(100vh, calc(100vw * 3 / 4));
|
||||
aspect-ratio: 4 / 3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: linear-gradient(to bottom, #00458f, #003574);
|
||||
box-shadow: 0 0 40px rgba(0,0,0,0.8);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.top {
|
||||
display: grid;
|
||||
grid-template-columns: 1.0fr 0.6fr;
|
||||
flex: 0 0 40%;
|
||||
border-bottom: 4px solid #001a44;
|
||||
}
|
||||
|
||||
.brand-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #003b82;
|
||||
}
|
||||
|
||||
.brand {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: flex-start; /* keep top alignment */
|
||||
justify-content: flex-start;
|
||||
padding-left: 30px;
|
||||
padding-top: 12px; /* 👈 small downward push */
|
||||
}
|
||||
.brand img {
|
||||
max-height: 70%;
|
||||
max-width: 80%;
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.6));
|
||||
}
|
||||
|
||||
.hero-under {
|
||||
background: linear-gradient(to bottom, #2f6fbc, #4d89cf);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 14px 20px;
|
||||
gap: 10px;
|
||||
text-shadow: 3px 3px 2px rgba(0,0,0,0.6);
|
||||
border-top: 3px solid rgba(255,255,255,0.15);
|
||||
}
|
||||
|
||||
|
||||
.hero-under .on {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 900;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-under .sub {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 700;
|
||||
color: #ffe88a;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.visual {
|
||||
background: radial-gradient(circle at center, #7fc8ff, #4477aa, #2d3e52);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.visual iframe {
|
||||
width: 105%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* CLOCK OVERLAY */
|
||||
#clock {
|
||||
position: absolute;
|
||||
top: 180px;
|
||||
right: 930px;
|
||||
|
||||
font-size: 1.4rem;
|
||||
font-weight: 900;
|
||||
color: #ffe88a;
|
||||
|
||||
padding: 6px 10px;
|
||||
border-radius: 10px;
|
||||
|
||||
|
||||
text-shadow: 2px 2px 2px rgba(0,0,0,0.6);
|
||||
z-index: 5;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
.clock-img {
|
||||
width: 350px;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
top: 130px;
|
||||
right: 700px;}
|
||||
|
||||
.menu {
|
||||
flex: 1;
|
||||
padding: 18px 90px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 14px 18px;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.btn {
|
||||
border-radius: 100px;
|
||||
padding: 18px 22px;
|
||||
text-align: center;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 800;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
background: linear-gradient(to bottom, #2e67b6, #1e4f99);
|
||||
border: 3px solid rgba(255,255,255,0.45);
|
||||
box-shadow: inset 0 2px 4px rgba(255,255,255,0.25),
|
||||
0 4px 8px rgba(0,0,0,0.35);
|
||||
text-shadow: 2px 2px 2px rgba(0,0,0,0.65);
|
||||
transition: transform 0.15s, filter 0.15s;
|
||||
}
|
||||
|
||||
.btn.selected {
|
||||
background: linear-gradient(to bottom, #f7efb0, #e5d76f);
|
||||
color: black;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.btn:hover { filter: brightness(1.08); }
|
||||
.btn:active { transform: scale(0.98); }
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="screen">
|
||||
|
||||
<div class="top">
|
||||
<div class="brand-wrap">
|
||||
<div class="brand"><img src="https://www.veltron.net/images/site-banner.png"/></div>
|
||||
|
||||
<div class="hero-under">
|
||||
<div class="on">▶︎N DEMAND MENU</div>
|
||||
<div class="sub">Plan your perfect day, indoors or outdoors. View the local forecasts, radar maps, and regional outlooks to keep you and the family comfortable, rain or shine.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="visual">
|
||||
<div id="clock">--:-- </div>
|
||||
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.fandom.com%2Fbrand%2Fimages%2FTV-Guide_Logo_Family-Brands_1-p-3200.png&f=1&nofb=1&ipt=10d7c206e9bd996071105821925c3c6f77b22999e5585350b27728e73509dcc9" alt="icon" class="clock-img">
|
||||
<iframe src="https://v2.weatherscan.net/" title="WeatherScan"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="menu">
|
||||
<a class="btn selected">Weather</a>
|
||||
<div class="btn">null</div>
|
||||
<a class="btn" href="v1.html">Version 1</a>
|
||||
<a class="btn" href="v2.html">Version 2</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const buttons = [...document.querySelectorAll('.btn')];
|
||||
let selected = 0;
|
||||
|
||||
function updateSelection(index) {
|
||||
buttons[selected].classList.remove('selected');
|
||||
selected = (index + buttons.length) % buttons.length;
|
||||
buttons[selected].classList.add('selected');
|
||||
buttons[selected].focus();
|
||||
}
|
||||
|
||||
buttons.forEach((btn, i) => {
|
||||
btn.tabIndex = 0;
|
||||
btn.addEventListener('click', () => updateSelection(i));
|
||||
});
|
||||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
const cols = 2;
|
||||
|
||||
if (e.key === 'ArrowRight') updateSelection(selected + 1);
|
||||
if (e.key === 'ArrowLeft') updateSelection(selected - 1);
|
||||
if (e.key === 'ArrowDown') updateSelection(selected + cols);
|
||||
if (e.key === 'ArrowUp') updateSelection(selected - cols);
|
||||
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
alert('Opening: ' + buttons[selected].innerText);
|
||||
}
|
||||
});
|
||||
|
||||
function updateClock() {
|
||||
const now = new Date();
|
||||
let h = now.getHours();
|
||||
let m = now.getMinutes().toString().padStart(2, '0');
|
||||
|
||||
const ampm = h >= 12 ? 'PM' : 'AM';
|
||||
h = h % 12 || 12;
|
||||
|
||||
document.getElementById('clock').textContent = `${h}:${m} ${ampm}`;
|
||||
}
|
||||
|
||||
setInterval(updateClock, 1000);
|
||||
updateClock();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
234
test.html
Normal file
234
test.html
Normal file
|
|
@ -0,0 +1,234 @@
|
|||
<style>
|
||||
/* styles.css */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.tv-ui {
|
||||
width: 1100px;
|
||||
padding: 20px 30px;
|
||||
background: radial-gradient(circle at top, #1b3a6a 0, #020617 60%);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 40px rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.tv-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #00ff7f, #00b36b);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
color: #003322;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
color: #e5ffe5;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 0.95rem;
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
.tv-guide {
|
||||
background: #b91c1c;
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 8px 18px;
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.05em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Main layout */
|
||||
.tv-main {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1.4fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
/* Left info panel */
|
||||
.info-panel {
|
||||
background: rgba(15, 23, 42, 0.85);
|
||||
border-radius: 8px;
|
||||
padding: 16px 18px 18px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.4);
|
||||
}
|
||||
|
||||
.info-title {
|
||||
font-size: 0.85rem;
|
||||
letter-spacing: 0.18em;
|
||||
color: #9ca3af;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.info-section-title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: #facc15;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.info-description {
|
||||
font-size: 0.9rem;
|
||||
color: #e5e7eb;
|
||||
line-height: 1.4;
|
||||
max-width: 95%;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* Menu grid */
|
||||
.menu-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 10px 18px;
|
||||
}
|
||||
|
||||
.menu-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.menu-btn {
|
||||
background: linear-gradient(135deg, #0f172a, #1e293b);
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.6);
|
||||
color: #e5e7eb;
|
||||
padding: 8px 14px;
|
||||
text-align: left;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menu-btn-highlight
|
||||
</style>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>ArpWire TV UI</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="tv-ui">
|
||||
<header class="tv-header">
|
||||
<div class="logo">
|
||||
<span class="logo-icon">A</span>
|
||||
<span class="logo-text">ARPWIRE TV</span>
|
||||
</div>
|
||||
<div class="time">11:47am</div>
|
||||
<button class="tv-guide">TV GUIDE</button>
|
||||
</header>
|
||||
|
||||
<main class="tv-main">
|
||||
<section class="info-panel">
|
||||
<div class="info-title">ON DEMAND MENU</div>
|
||||
<div class="info-section">
|
||||
<div class="info-section-title">☁ Weather</div>
|
||||
<p class="info-description">
|
||||
Plan your perfect day, indoors or outdoors. View the local forecasts, radar maps, and regional outlooks to keep you and the family comfortable, rain or shine.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="menu-grid">
|
||||
<div class="menu-column">
|
||||
<button class="menu-btn menu-btn-highlight">Weather</button>
|
||||
<button class="menu-btn">Premium Channels</button>
|
||||
<button class="menu-btn">Cable Favorites</button>
|
||||
<button class="menu-btn">Local News</button>
|
||||
</div>
|
||||
<div class="menu-column">
|
||||
<button class="menu-btn">Movies</button>
|
||||
<button class="menu-btn">Celebrity Entertainment</button>
|
||||
<button class="menu-btn">ArpWire TV Choice</button>
|
||||
<button class="menu-btn">HD On Demand</button>
|
||||
<button class="menu-btn">Saved Searches</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<aside class="weather-panel">
|
||||
<div class="weather-header">weatherscan</div>
|
||||
|
||||
<div class="weather-now">
|
||||
<div class="weather-city">Miami</div>
|
||||
<div class="weather-temp">NOW 78°</div>
|
||||
<div class="weather-uv">UV Index <span>Very High</span></div>
|
||||
</div>
|
||||
|
||||
<div class="weather-map">
|
||||
<div class="map-placeholder">[Radar Map]</div>
|
||||
</div>
|
||||
|
||||
<div class="weather-international">
|
||||
<div class="section-title">INTERNATIONAL FORECASTS</div>
|
||||
<ul>
|
||||
<li><span>Madrid</span> <span>73 / 57 → 75 / 51</span></li>
|
||||
<li><span>Tokyo</span> <span>68 / 55 → 77 / 51</span></li>
|
||||
<li><span>Mexico City</span> <span>65 / 48 → 58 / 55</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="weather-today">
|
||||
<div class="section-title">TODAY'S FORECAST</div>
|
||||
<div class="forecast-row">
|
||||
<div class="forecast-time">3 pm</div>
|
||||
<div class="forecast-temp">83°</div>
|
||||
</div>
|
||||
<div class="forecast-row">
|
||||
<div class="forecast-time">5 pm</div>
|
||||
<div class="forecast-temp">82°</div>
|
||||
</div>
|
||||
<div class="forecast-row">
|
||||
<div class="forecast-time">8 pm</div>
|
||||
<div class="forecast-temp">79°</div>
|
||||
</div>
|
||||
<div class="forecast-row">
|
||||
<div class="forecast-time">Midnight</div>
|
||||
<div class="forecast-temp">76°</div>
|
||||
</div>
|
||||
|
||||
<div class="weather-notes">
|
||||
Jacksonville: 82 fair<br />
|
||||
Miami: 78 partly cloudy
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
247
v1.html
Normal file
247
v1.html
Normal file
|
|
@ -0,0 +1,247 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>On Demand Simulator</title>
|
||||
|
||||
<style>
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: black;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 4:3 frame */
|
||||
.screen {
|
||||
width: min(100vw, calc(100vh * 4 / 3));
|
||||
height: min(100vh, calc(100vw * 3 / 4));
|
||||
aspect-ratio: 4 / 3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: linear-gradient(to bottom, #00458f, #003574);
|
||||
box-shadow: 0 0 40px rgba(0,0,0,0.8);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.top {
|
||||
display: grid;
|
||||
grid-template-columns: 1.0fr 0.6fr;
|
||||
flex: 0 0 40%;
|
||||
border-bottom: 4px solid #001a44;
|
||||
}
|
||||
|
||||
.brand-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #003b82;
|
||||
}
|
||||
|
||||
.brand {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: flex-start; /* keep top alignment */
|
||||
justify-content: flex-start;
|
||||
padding-left: 30px;
|
||||
padding-top: 12px; /* 👈 small downward push */
|
||||
}
|
||||
.brand img {
|
||||
max-height: 70%;
|
||||
max-width: 80%;
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.6));
|
||||
}
|
||||
|
||||
.hero-under {
|
||||
background: linear-gradient(to bottom, #2f6fbc, #4d89cf);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 14px 20px;
|
||||
gap: 10px;
|
||||
text-shadow: 3px 3px 2px rgba(0,0,0,0.6);
|
||||
border-top: 3px solid rgba(255,255,255,0.15);
|
||||
}
|
||||
|
||||
|
||||
.hero-under .on {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 900;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-under .sub {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 700;
|
||||
color: #ffe88a;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.visual {
|
||||
background: radial-gradient(circle at center, #7fc8ff, #4477aa, #2d3e52);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.visual iframe {
|
||||
width: 105%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* CLOCK OVERLAY */
|
||||
#clock {
|
||||
position: absolute;
|
||||
top: 180px;
|
||||
right: 930px;
|
||||
|
||||
font-size: 1.4rem;
|
||||
font-weight: 900;
|
||||
color: #ffe88a;
|
||||
|
||||
padding: 6px 10px;
|
||||
border-radius: 10px;
|
||||
|
||||
|
||||
text-shadow: 2px 2px 2px rgba(0,0,0,0.6);
|
||||
z-index: 5;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
.clock-img {
|
||||
width: 350px;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
top: 130px;
|
||||
right: 700px;}
|
||||
|
||||
.menu {
|
||||
flex: 1;
|
||||
padding: 18px 90px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 14px 18px;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.btn {
|
||||
border-radius: 100px;
|
||||
padding: 18px 22px;
|
||||
text-align: center;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 800;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
background: linear-gradient(to bottom, #2e67b6, #1e4f99);
|
||||
border: 3px solid rgba(255,255,255,0.45);
|
||||
box-shadow: inset 0 2px 4px rgba(255,255,255,0.25),
|
||||
0 4px 8px rgba(0,0,0,0.35);
|
||||
text-shadow: 2px 2px 2px rgba(0,0,0,0.65);
|
||||
transition: transform 0.15s, filter 0.15s;
|
||||
}
|
||||
|
||||
.btn.selected {
|
||||
background: linear-gradient(to bottom, #f7efb0, #e5d76f);
|
||||
color: black;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.btn:hover { filter: brightness(1.08); }
|
||||
.btn:active { transform: scale(0.98); }
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="screen">
|
||||
|
||||
<div class="top">
|
||||
<div class="brand-wrap">
|
||||
<div class="brand"><img src="https://www.veltron.net/images/site-banner.png"/></div>
|
||||
|
||||
<div class="hero-under">
|
||||
<div class="on">▶︎N DEMAND MENU</div>
|
||||
<div class="sub">Plan your perfect day, indoors or outdoors. View the local forecasts, radar maps, and regional outlooks to keep you and the family comfortable, rain or shine.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="visual">
|
||||
<div id="clock">--:-- </div>
|
||||
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.fandom.com%2Fbrand%2Fimages%2FTV-Guide_Logo_Family-Brands_1-p-3200.png&f=1&nofb=1&ipt=10d7c206e9bd996071105821925c3c6f77b22999e5585350b27728e73509dcc9" alt="icon" class="clock-img">
|
||||
<iframe src="https://v2.weatherscan.net/" title="WeatherScan"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="menu">
|
||||
<div class="btn selected">Weather</div>
|
||||
<div class="btn">Movies</div>
|
||||
<div class="btn">Premium Channels</div>
|
||||
<div class="btn">Celebrity Entertainment</div>
|
||||
<div class="btn">Cable Favourites</div>
|
||||
<div class="btn">Veltron TV Choice</div>
|
||||
<div class="btn">Local News</div>
|
||||
<div class="btn">HD On Demand</div>
|
||||
<div class="btn">Primetime</div>
|
||||
<div class="btn">Saved Searches</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const buttons = [...document.querySelectorAll('.btn')];
|
||||
let selected = 0;
|
||||
|
||||
function updateSelection(index) {
|
||||
buttons[selected].classList.remove('selected');
|
||||
selected = (index + buttons.length) % buttons.length;
|
||||
buttons[selected].classList.add('selected');
|
||||
buttons[selected].focus();
|
||||
}
|
||||
|
||||
buttons.forEach((btn, i) => {
|
||||
btn.tabIndex = 0;
|
||||
btn.addEventListener('click', () => updateSelection(i));
|
||||
});
|
||||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
const cols = 2;
|
||||
|
||||
if (e.key === 'ArrowRight') updateSelection(selected + 1);
|
||||
if (e.key === 'ArrowLeft') updateSelection(selected - 1);
|
||||
if (e.key === 'ArrowDown') updateSelection(selected + cols);
|
||||
if (e.key === 'ArrowUp') updateSelection(selected - cols);
|
||||
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
alert('Opening: ' + buttons[selected].innerText);
|
||||
}
|
||||
});
|
||||
|
||||
function updateClock() {
|
||||
const now = new Date();
|
||||
let h = now.getHours();
|
||||
let m = now.getMinutes().toString().padStart(2, '0');
|
||||
|
||||
const ampm = h >= 12 ? 'PM' : 'AM';
|
||||
h = h % 12 || 12;
|
||||
|
||||
document.getElementById('clock').textContent = `${h}:${m} ${ampm}`;
|
||||
}
|
||||
|
||||
setInterval(updateClock, 1000);
|
||||
updateClock();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
250
v2.html
Normal file
250
v2.html
Normal file
|
|
@ -0,0 +1,250 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>On Demand Simulator</title>
|
||||
|
||||
<style>
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: black;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 4:3 frame */
|
||||
.screen {
|
||||
width: min(100vw, calc(100vh * 4 / 3));
|
||||
height: min(100vh, calc(100vw * 3 / 4));
|
||||
aspect-ratio: 4 / 3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: url('background.png') center/cover no-repeat;
|
||||
box-shadow: 0 0 40px rgba(0,0,0,0.8);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.top {
|
||||
display: grid;
|
||||
grid-template-columns: 1.2fr 0.8fr;
|
||||
flex: 0 0 40%;
|
||||
border-bottom: 4px solid #001a44;
|
||||
}
|
||||
|
||||
.brand-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: url('background.png') center/cover no-repeat;
|
||||
}
|
||||
|
||||
.brand {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: flex-start; /* keep top alignment */
|
||||
justify-content: flex-start;
|
||||
padding-left: 30px;
|
||||
padding-top: 12px; /* 👈 small downward push */
|
||||
}
|
||||
.brand img {
|
||||
max-height: 70%;
|
||||
max-width: 80%;
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.6));
|
||||
}
|
||||
|
||||
.hero-under {
|
||||
background: url('background.png') center/cover no-repeat;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 14px 20px;
|
||||
gap: 10px;
|
||||
text-shadow: 3px 3px 2px rgba(0,0,0,0.6);
|
||||
border-top: 3px solid rgba(255,255,255,0.15);
|
||||
}
|
||||
|
||||
|
||||
.hero-under .on {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 900;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-under .sub {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 700;
|
||||
color: #ffe88a;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.visual {
|
||||
background: url('background.png') center/cover no-repeat;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.visual iframe {
|
||||
background: url('background.png') center/cover no-repeat;
|
||||
|
||||
width: 105%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* CLOCK OVERLAY */
|
||||
#clock {
|
||||
position: absolute;
|
||||
top: 125px;
|
||||
right: 930px;
|
||||
|
||||
font-size: 1.4rem;
|
||||
#font-weight: 900;
|
||||
#color: #ffe88a;
|
||||
|
||||
padding: 6px 10px;
|
||||
border-radius: 10px;
|
||||
|
||||
|
||||
text-shadow: 2px 2px 2px rgba(0,0,0,0.6);
|
||||
z-index: 5;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
.clock-img {
|
||||
width: 350px;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
right: 700px;}
|
||||
|
||||
.menu {
|
||||
flex: 1;
|
||||
padding: 18px 90px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 14px 18px;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.btn {
|
||||
border-radius: 100px;
|
||||
padding: 18px 22px;
|
||||
text-align: center;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 800;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
background: linear-gradient(to bottom, #2e67b6, #1e4f99);
|
||||
border: 3px solid rgba(255,255,255,0.45);
|
||||
box-shadow: inset 0 2px 4px rgba(255,255,255,0.25),
|
||||
0 4px 8px rgba(0,0,0,0.35);
|
||||
text-shadow: 2px 2px 2px rgba(0,0,0,0.65);
|
||||
transition: transform 0.15s, filter 0.15s;
|
||||
}
|
||||
|
||||
.btn.selected {
|
||||
background: linear-gradient(to bottom, #f7efb0, #e5d76f);
|
||||
color: black;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.btn:hover { filter: brightness(1.08); }
|
||||
.btn:active { transform: scale(0.98); }
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="screen">
|
||||
|
||||
<div class="top">
|
||||
<div class="brand-wrap">
|
||||
<div class="brand"><img src="https://www.veltron.net/images/site-banner.png"/></div>
|
||||
|
||||
<div class="hero-under">
|
||||
<div class="on">▶︎N DEMAND MENU</div>
|
||||
<div class="sub">⛅ Weather<br><p style="color: white;">Plan your perfect day, indoors or outdoors. View the local forecasts, radar maps, and regional outlooks to keep you and the family comfortable, rain or shine.</div></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="visual">
|
||||
<div id="clock">--:-- </div>
|
||||
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.fandom.com%2Fbrand%2Fimages%2FTV-Guide_Logo_Family-Brands_1-p-3200.png&f=1&nofb=1&ipt=10d7c206e9bd996071105821925c3c6f77b22999e5585350b27728e73509dcc9" alt="icon" class="clock-img">
|
||||
<iframe src="https://v2.weatherscan.net/" title="WeatherScan"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="menu">
|
||||
<div class="btn selected">Weather</div>
|
||||
<div class="btn">Movies</div>
|
||||
<div class="btn">Premium Channels</div>
|
||||
<div class="btn">Celebrity Entertainment</div>
|
||||
<div class="btn">Cable Favourites</div>
|
||||
<div class="btn">Veltron TV Choice</div>
|
||||
<div class="btn">Local News</div>
|
||||
<div class="btn">HD On Demand</div>
|
||||
<div class="btn">Primetime</div>
|
||||
<div class="btn">Saved Searches</div>
|
||||
</div>
|
||||
<center> <a>V2 IS IN HEAVY BETA. BASED on https://www.youtube.com/watch?v=AoDA9YYTg4s</a></center>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const buttons = [...document.querySelectorAll('.btn')];
|
||||
let selected = 0;
|
||||
|
||||
function updateSelection(index) {
|
||||
buttons[selected].classList.remove('selected');
|
||||
selected = (index + buttons.length) % buttons.length;
|
||||
buttons[selected].classList.add('selected');
|
||||
buttons[selected].focus();
|
||||
}
|
||||
|
||||
buttons.forEach((btn, i) => {
|
||||
btn.tabIndex = 0;
|
||||
btn.addEventListener('click', () => updateSelection(i));
|
||||
});
|
||||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
const cols = 2;
|
||||
|
||||
if (e.key === 'ArrowRight') updateSelection(selected + 1);
|
||||
if (e.key === 'ArrowLeft') updateSelection(selected - 1);
|
||||
if (e.key === 'ArrowDown') updateSelection(selected + cols);
|
||||
if (e.key === 'ArrowUp') updateSelection(selected - cols);
|
||||
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
alert('Opening: ' + buttons[selected].innerText);
|
||||
}
|
||||
});
|
||||
|
||||
function updateClock() {
|
||||
const now = new Date();
|
||||
let h = now.getHours();
|
||||
let m = now.getMinutes().toString().padStart(2, '0');
|
||||
|
||||
const ampm = h >= 12 ? 'PM' : 'AM';
|
||||
h = h % 12 || 12;
|
||||
|
||||
document.getElementById('clock').textContent = `${h}:${m} ${ampm}`;
|
||||
}
|
||||
|
||||
setInterval(updateClock, 1000);
|
||||
updateClock();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue