<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Steam</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;font-family:"Motiva Sans",Arial,Helvetica,sans-serif;}
body{
background:#171a21;
color:#c6d4df;
line-height:1.5;
overflow-x:hidden;
}
/* Full-width Layout */
.main-wrapper{
display:flex;
min-height:100vh;
margin-top:104px;
overflow-x:hidden; /* Prevents horizontal scroll overflow */
}
.content-area{
flex:1;
padding:2rem;
padding-right:300px; /* 280px sidebar + 20px buffer */
overflow-y:auto;
min-height:100vh;
}
.library-sidebar{
width:280px;
background:#0e141b;
border-left:1px solid #2a323c;
padding:2rem 1.5rem;
position:fixed;
right:0;
top:104px;
bottom:0;
overflow-y:auto;
z-index:90;
}
/* Main Nav Bar */
.navbar{
background:#1b2838;
height:104px;
position:fixed;
top:0;
left:0;
right:0;
z-index:99;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 1.5rem;
box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.navbar .logo-container{
display:flex;
align-items:center;
gap:1rem;
}
.navbar .logo{
font-size:2rem;
font-weight:900;
color:#66c0f4;
}
.navbar .logo-icon{
height:32px;
width:auto;
object-fit:contain;
}
.navbar ul{
display:flex;
list-style:none;
gap:2rem;
}
.navbar a{
color:#b8c2cc;
text-decoration:none;
font-weight:500;
font-size:1.1rem;
transition:color .2s;
}
.navbar a:hover,.navbar a.active{color:#fff;}
.navbar .partner-logo{
height:70px; /* Your size */
width:auto;
object-fit:contain;
}
/* Section */
.section h2{
font-size:1.8rem;
color:#fff;
margin-bottom:1.5rem;
font-weight:600;
}
/* Grid */
.grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
gap:1.5rem;
}
.card{
background:#1b2838;
border-radius:6px;
overflow:hidden;
transition:all .3s ease;
display:flex;
flex-direction:column;
}
.card:hover{
transform:translateY(-6px);
box-shadow:0 12px 24px rgba(0,0,0,.5);
}
.card img{
width:100%;
height:130px;
object-fit:cover;
}
.card .info{
padding:1rem;
flex:1;
display:flex;
flex-direction:column;
}
.card .title{
font-weight:600;
font-size:1.1rem;
color:#fff;
margin-bottom:.4rem;
}
.card .tags{
font-size:0.8rem;
color:#66c0f4;
margin-bottom:.75rem;
}
.card .actions{
margin-top:auto;
}
.btn-copy{
width:100%;
padding:.75rem;
background:#2d3748;
color:#c6d4df;
border:none;
border-radius:4px;
font-weight:600;
font-size:0.9rem;
cursor:pointer;
transition:background .2s;
}
.btn-copy:hover{
background:#4a5568;
}
/* Library */
.library h3{
color:#fff;
font-size:1.3rem;
margin-bottom:1rem;
font-weight:600;
}
.library ul{
list-style:none;
}
.library li{
margin-bottom:.6rem;
}
.library a{
color:#b8c2cc;
text-decoration:none;
font-size:0.95rem;
display:block;
padding:.4rem .6rem;
border-radius:4px;
transition:all .2s;
}
.library a:hover{
background:#1b2838;
color:#fff;
}
/* Toast */
#toast{
position:fixed;
bottom:20px;
left:50%;
transform:translateX(-50%);
background:#2d3748;
color:#c6d4df;
padding:.75rem 1.5rem;
border-radius:4px;
opacity:0;
z-index:1001;
transition:opacity .3s;
box-shadow:0 4px 12px rgba(0,0,0,.4);
font-size:.9rem;
}
#toast.show{opacity:1;}
/* Responsive */
@media(max-width:1200px){
.library-sidebar{width:240px;padding:1.5rem 1rem;}
.content-area{padding-right:260px;} /* 240px sidebar + buffer */
}
@media(max-width:992px){
.main-wrapper{flex-direction:column;}
.content-area{
padding:2rem;
padding-right:2rem; /* Reset padding when sidebar is full-width */
}
.library-sidebar{
position:static;
width:100%;
border-left:none;
border-top:1px solid #2a323c;
padding-top:2rem;
}
}
@media(max-width:768px){
.navbar{
height:auto;
padding:1rem;
flex-direction:column;
align-items:center;
gap:1rem;
text-align:center;
}
.navbar .logo-container{
flex-direction:column;
gap:0.5rem;
}
.navbar .logo{font-size:1.8rem;}
.navbar .logo-icon{height:28px;}
.navbar ul{gap:1.5rem;}
.navbar .partner-logo{height:60px;}
.grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1.25rem;}
}
</style>
</head>
<body>
<!-- Main Nav Bar -->
<nav class="navbar">
<div class="logo-container">
<img src="https://codehs.com/uploads/91d3dfec9bcbafba9a912a9b1058b5c2" alt="CodeHS" class="logo-icon">
<div class="logo">HTML Steam</div>
</div>
<ul id="nav-list">
<li><a data-page="store" class="active">STORE</a></li>
<li><a data-page="community">COMMUNITY</a></li>
<li><a data-page="about">ABOUT</a></li>
<li><a data-page="support">SUPPORT</a></li>
</ul>
<img src="https://codehs.com/uploads/91d3dfec9bcbafba9a912a9b1058b5c2" alt="CodeHS Logo" class="partner-logo">
</nav>
<!-- Main Layout -->
<div class="main-wrapper">
<main class="content-area" id="main-content">
<!-- Pages injected here -->
</main>
<!-- Library Sidebar (RIGHT EDGE) -->
<aside class="library-sidebar">
<div class="library">
<h3>Your Library</h3>
<ul id="library-list">Loading...</ul>
</div>
</aside>
</div>
<!-- Toast -->
<div id="toast"></div>
<script>
// Config
const ZONES_JSON = "https://cdn.jsdelivr.net/gh/gn-math/assets@main/zones.json";
const COVER_URL = "https://cdn.jsdelivr.net/gh/gn-math/covers@main";
const HTML_URL = "https://cdn.jsdelivr.net/gh/gn-math/html@main";
let zones = [];
// Page Templates
const pages = {
store: () => `
<section class="section">
<h2>All HTML Games</h2>
<div class="grid" id="game-grid"></div>
</section>
`,
community: () => `
<section class="section">
<h2>Community</h2>
<p style="font-size:1.1rem;color:#acb2b8;">Join the <a href="https://discord.gg/NAFw4ykZ7n" target="_blank" style="color:#66c0f4;text-decoration:underline;">GN-Math Discord</a> for updates!</p>
</section>
`,
about: () => `
<section class="section">
<h2>About HTML Steam</h2>
<p style="font-size:1.1rem;color:#acb2b8;">Copy any HTML5 game source instantly. No install. No ads.</p>
</section>
`,
support: () => `
<section class="section">
<h2>Support</h2>
<p style="font-size:1.1rem;color:#acb2b8;">Email: <a href="mailto:gn.math.business@gmail.com" style="color:#66c0f4;text-decoration:underline;">gn.math.business@gmail.com</a></p>
</section>
`
};
// Navigation
document.querySelectorAll('#nav-list a').forEach(link => {
link.addEventListener('click', e => {
e.preventDefault();
const page = link.dataset.page;
document.querySelectorAll('#nav-list a').forEach(l => l.classList.remove('active'));
link.classList.add('active');
document.getElementById('main-content').innerHTML = pages[page]();
if (page === 'store') renderGames();
});
});
// Load Games
async function loadGames() {
try {
const res = await fetch(ZONES_JSON + "?t=" + Date.now());
zones = await res.json();
renderLibrary();
document.querySelector('[data-page="store"]').click();
} catch (err) {
document.getElementById('library-list').innerHTML = "<li>Failed to load games.</li>";
}
}
// Render Games
function renderGames() {
const grid = document.getElementById('game-grid');
if (!grid) return;
grid.innerHTML = '';
zones.forEach(game => {
const card = document.createElement('div');
card.className = 'card';
card.innerHTML = `
<img src="${game.cover.replace("{COVER_URL}", COVER_URL)}" alt="${game.name}" loading="lazy">
<div class="info">
<div class="title">${game.name}</div>
<div class="tags">HTML5 Game</div>
<div class="actions">
<button class="btn-copy" data-id="${game.id}">Copy Code</button>
</div>
</div>
`;
grid.appendChild(card);
});
document.querySelectorAll('.btn-copy').forEach(btn => {
btn.onclick = async (e) => {
e.stopPropagation();
const game = zones.find(g => g.id == btn.dataset.id);
if (!game) return;
const url = game.url.replace("{HTML_URL}", HTML_URL) + "?t=" + Date.now();
try {
const res = await fetch(url);
const code = await res.text();
await navigator.clipboard.writeText(code);
showToast(`Copied: ${game.name}`);
} catch {
showToast("Failed to copy code.");
}
};
});
}
// Render Library
function renderLibrary() {
const list = document.getElementById('library-list');
list.innerHTML = '';
zones.forEach(game => {
const li = document.createElement('li');
const a = document.createElement('a');
a.href = '#';
a.textContent = game.name;
a.onclick = e => {
e.preventDefault();
document.querySelector('[data-page="store"]').click();
setTimeout(() => {
const card = document.querySelector(`.btn-copy[data-id="${game.id}"]`)?.closest('.card');
if (card) {
card.scrollIntoView({behavior:'smooth',block:'center'});
card.style.boxShadow = '0 0 20px #66c0f4';
setTimeout(() => card.style.boxShadow = '', 1500);
}
}, 100);
};
li.appendChild(a);
list.appendChild(li);
});
}
// Toast
function showToast(msg) {
const toast = document.getElementById('toast');
toast.textContent = msg;
toast.classList.add('show');
setTimeout(() => toast.classList.remove('show'), 2000);
}
// Start
loadGames();
</script>
</body>
</html>
/* Add your styles here */
// Add your code here