Skip to content

Instantly share code, notes, and snippets.

@ZakomakotheZBH

ZakomakotheZBH/ZOS.html

Created April 24, 2026 12:06
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ZakomakotheZBH/855470dfaa1953a01a0a071c667f8fe5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ZakomakotheZBH/855470dfaa1953a01a0a071c667f8fe5 to your computer and use it in GitHub Desktop.
Download ZIP
A TV OS you can use by screen mirroring the page to tv
Raw
ZOS.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ZOS TV - Sidebar Edition</title>
<style>
:root {
--primary-glow: #00ff88;
--bg-dark: #0a0a0a;
--side-bar-bg: #111;
--card-bg: #1e1e1e;
--accent-red: #ff4444;
}
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: 'Segoe UI', sans-serif;
background-color: var(--bg-dark);
color: white;
overflow: hidden;
display: flex;
}
/* --- Sidebar Navigation --- */
.sidebar {
width: 80px;
height: 100vh;
background: var(--side-bar-bg);
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 0;
border-right: 1px solid #333;
z-index: 10;
}
.side-icon {
font-size: 1.8rem;
margin-bottom: 30px;
cursor: pointer;
opacity: 0.5;
transition: 0.3s;
}
.side-icon:hover, .side-icon.active {
opacity: 1;
color: var(--primary-glow);
transform: scale(1.1);
}
/* --- Main Content Area --- */
.main-content {
flex-grow: 1;
padding: 30px;
display: flex;
flex-direction: column;
}
/* Top Bar & Search */
.top-shelf {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
}
.search-container {
background: #222;
padding: 10px 20px;
border-radius: 30px;
width: 400px;
display: flex;
align-items: center;
border: 1px solid #444;
}
.search-container input {
background: transparent;
border: none;
color: white;
margin-left: 10px;
width: 100%;
outline: none;
font-size: 1rem;
}
/* App Grid */
.app-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 20px;
}
.app-card {
background: var(--card-bg);
padding: 20px;
border-radius: 15px;
text-align: center;
cursor: pointer;
border: 3px solid transparent;
transition: 0.3s;
}
.app-card.focused, .app-card:hover {
border-color: var(--primary-glow);
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 255, 136, 0.2);
}
.app-card[style*="display: none"] { display: none; }
/* --- App Runner Overlay --- */
#app-viewport {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: black;
z-index: 100;
}
.app-nav {
height: 50px;
background: #111;
display: flex;
align-items: center;
padding: 0 20px;
justify-content: space-between;
}
iframe { width: 100%; height: calc(100% - 50px); border: none; }
.close-btn { background: var(--accent-red); border: none; color: white; padding: 5px 15px; border-radius: 5px; cursor: pointer; }
/* --- Settings Panel --- */
#settings-view {
display: none;
flex-direction: column;
gap: 20px;
}
.setting-box {
background: #1a1a1a;
padding: 20px;
border-radius: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
</style>
</head>
<body id="zos-body">
<nav class="sidebar">
<div class="side-icon active" onclick="showSection('home')">🏠</div>
<div class="side-icon" onclick="openApp('https://zewpol.neocities.org/zaccounts', 'Z-Accounts')">👤</div>
<div class="side-icon" onclick="showSection('settings')">⚙️</div>
<div class="side-icon" onclick="window.location.reload()">🔄</div>
</nav>
<main class="main-content" id="main-view">
<div class="top-shelf">
<div class="search-container">
<span>🔍</span>
<input type="text" id="appSearch" placeholder="Search ZOS Apps..." onkeyup="searchApps()">
</div>
<div id="clock" style="font-weight: bold; font-size: 1.2rem;">00:00</div>
</div>
<div id="home-view">
<h2 id="welcome-text">Zako Technology Labs - ZOS</h2>
<div class="app-grid" id="master-grid">
<div class="app-card" onclick="openApp('https://www.youtube.com', 'YouTube')">
<div style="font-size: 3rem;">📺</div><p>YouTube</p>
</div>
<div class="app-card" onclick="openApp('https://zewpol.neocities.org', 'Z-Browser')">
<div style="font-size: 3rem;">🌐</div><p>Z-Browser</p>
</div>
<div class="app-card" onclick="openApp('https://play.google.com/store', 'Z-Store')">
<div style="font-size: 3rem;">🛍️</div><p>App Store</p>
</div>
<div class="app-card" onclick="openApp('https://www.fifa.com', 'FIFA')">
<div style="font-size: 3rem;">⚽</div><p>FIFA</p>
</div>
<div class="app-card" onclick="openApp('https://zewpol.neocities.org/streamtv', 'Z-Stream')">
<div style="font-size: 3rem;">🛰️</div><p>Stream TV</p>
</div>
</div>
</div>
<div id="settings-view">
<h2>System Settings</h2>
<div class="setting-box">
<span>Display Theme</span>
<select id="themePicker" onchange="applyTheme()">
<option value="#0a0a0a">Emerald Dark</option>
<option value="#2c003e">Deep Purple</option>
<option value="#002b36">Solarized Blue</option>
</select>
</div>
<div class="setting-box">
<span>Custom Welcome Message</span>
<input type="text" id="welcomeInput" placeholder="Enter name..." oninput="updateWelcome()">
</div>
<div class="setting-box">
<span>Account Sync</span>
<button onclick="openApp('https://zewpol.neocities.org/zaccounts', 'Accounts')">Manage Z-Accounts</button>
</div>
</div>
</main>
<div id="app-viewport">
<div class="app-nav">
<span id="active-app-title">ZOS App</span>
<button class="close-btn" onclick="closeApp()">Back to ZOS</button>
</div>
<iframe id="app-frame" src=""></iframe>
</div>
<script>
// 1. Clock
function clock() {
const now = new Date();
document.getElementById('clock').innerText = now.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
}
setInterval(clock, 1000); clock();
// 2. App Management
function openApp(url, name) {
document.getElementById('app-frame').src = url;
document.getElementById('active-app-title').innerText = name;
document.getElementById('app-viewport').style.display = 'block';
}
function closeApp() {
document.getElementById('app-viewport').style.display = 'none';
document.getElementById('app-frame').src = "";
}
// 3. Navigation
function showSection(section) {
document.getElementById('home-view').style.display = section === 'home' ? 'block' : 'none';
document.getElementById('settings-view').style.display = section === 'settings' ? 'flex' : 'none';
// UI Feedback
const icons = document.querySelectorAll('.side-icon');
icons.forEach(i => i.classList.remove('active'));
if(section === 'home') icons[0].classList.add('active');
if(section === 'settings') icons[2].classList.add('active');
}
// 4. Search Functionality
function searchApps() {
const input = document.getElementById('appSearch').value.toLowerCase();
const cards = document.querySelectorAll('.app-card');
cards.forEach(card => {
const name = card.innerText.toLowerCase();
card.style.display = name.includes(input) ? "block" : "none";
});
}
// 5. Functional Settings
function applyTheme() {
const color = document.getElementById('themePicker').value;
document.getElementById('zos-body').style.backgroundColor = color;
}
function updateWelcome() {
const name = document.getElementById('welcomeInput').value;
document.getElementById('welcomeText').innerText = name ? `Welcome, ${name}` : "Zako Technology Labs - ZOS";
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment