254 lines
11 KiB
HTML
254 lines
11 KiB
HTML
<!doctype html>
|
|
<html lang="en" data-theme="win95">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
<title>Indie Grid — Chunky Win95 / Aero</title>
|
|
|
|
<!-- Tailwind CDN (no build step) -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
fontFamily: { ui: ["Inter", "Tahoma", "ui-sans-serif", "system-ui"] },
|
|
boxShadow: {
|
|
aero: '0 20px 50px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.25) inset',
|
|
glass: '0 1px 0 rgba(255,255,255,.6) inset, 0 8px 24px rgba(0,0,0,.12)'
|
|
},
|
|
borderRadius: {
|
|
win: '6px',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
/* THEME TOKENS (swap via data-theme) */
|
|
:root {
|
|
--bg: #e9eef5;
|
|
--ink: #0f172a;
|
|
--surface: rgba(255,255,255,0.65);
|
|
--border: rgba(0,0,0,.16);
|
|
--accent: #1e90ff;
|
|
--glass: blur(12px);
|
|
--titlebar-grad: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.45));
|
|
--meta: rgba(0,0,0,.6);
|
|
}
|
|
[data-theme="win95"] {
|
|
--bg: #c0c0c0;
|
|
--ink: #000;
|
|
--surface: #dfdfdf;
|
|
--border: #808080;
|
|
--accent: #008080;
|
|
--glass: blur(0px);
|
|
--titlebar-grad: linear-gradient(180deg, #0a246a, #a6caf0);
|
|
--meta: #000;
|
|
}
|
|
|
|
/* Retro paper texture overlay (very subtle) */
|
|
body {
|
|
background:
|
|
repeating-linear-gradient(90deg, rgba(255,255,255,.45) 0 1px, transparent 1px 3px),
|
|
repeating-linear-gradient(0deg, rgba(255,255,255,.35) 0 1px, transparent 1px 3px),
|
|
var(--bg);
|
|
background-blend-mode: overlay;
|
|
}
|
|
|
|
/* Win95 bevel helpers */
|
|
.bevel { border-width: 6px; border-style: solid; border-top-color:#fff; border-left-color:#fff; border-bottom-color:#808080; border-right-color:#808080; }
|
|
.bevel-inset { border-width: 6px; border-style: solid; border-top-color:#808080; border-left-color:#808080; border-bottom-color:#fff; border-right-color:#fff; }
|
|
|
|
/* Press/tactile card */
|
|
.card-press { transition: transform .06s ease, filter .06s ease; }
|
|
.card-press:active { transform: translateY(1px); }
|
|
.card-press:hover { filter: brightness(1.02); }
|
|
|
|
/* Snap-open window animation */
|
|
@keyframes pop95 { 0% { transform: scale(.96) translateY(8px); filter: brightness(.96); opacity:0; } 100% { transform: scale(1) translateY(0); filter:none; opacity:1; } }
|
|
.win-enter { animation: pop95 .14s ease-out both; }
|
|
|
|
/* Pixel dotted focus */
|
|
.focus-95:focus { outline: 1px dotted #000; outline-offset: 2px; }
|
|
|
|
/* CRT overlay toggle */
|
|
.crt .crt-panel { position: relative; overflow: hidden; }
|
|
.crt .crt-panel::before{
|
|
content:""; position:absolute; inset:0; pointer-events:none;
|
|
background:
|
|
linear-gradient(transparent 50%, rgba(0,0,0,.06) 50%),
|
|
radial-gradient(circle at 50% 50%, rgba(255,255,255,.12), transparent 60%);
|
|
background-size: 100% 2px, 100% 100%;
|
|
mix-blend-mode: multiply;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="min-h-screen font-ui text-[color:var(--ink)]">
|
|
<!-- HEADER -->
|
|
<header class="max-w-[1120px] mx-auto px-4 py-3">
|
|
<div class="flex items-center justify-between gap-4">
|
|
<a href="#" class="flex items-center gap-2 focus-95">
|
|
<div class="w-8 h-8 bg-[color:var(--accent)] bevel"></div>
|
|
<span class="font-extrabold tracking-wider uppercase">Indie Grid</span>
|
|
</a>
|
|
<div class="flex items-center gap-2">
|
|
<button id="btnAero" class="focus-95 px-3 py-2 text-sm font-bold rounded-win border-2 border-[color:var(--border)] bg-white/80 hover:bg-white">Aero</button>
|
|
<button id="btn95" class="focus-95 px-3 py-2 text-sm font-bold bevel bg-[color:var(--surface)]">Win95</button>
|
|
<button id="btnCRT" class="focus-95 px-3 py-2 text-sm font-bold rounded-win border-2 border-[color:var(--border)] bg-white/80 hover:bg-white">CRT</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- MAIN -->
|
|
<main class="max-w-[1120px] mx-auto px-4">
|
|
<!-- GRID -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-[2fr_1fr] gap-6">
|
|
<!-- PRIMARY FEED -->
|
|
<section class="space-y-6">
|
|
<!-- Card 1: Aero-ish chrome, becomes 95 via tokens -->
|
|
<article class="relative rounded-win border border-[color:var(--border)] backdrop-blur-[var(--glass)] bg-[color:var(--surface)] shadow-glass card-press win-enter crt-panel">
|
|
<!-- Title bar -->
|
|
<div class="flex items-center justify-between px-3 py-2 border-b border-[color:var(--border)]" style="background: var(--titlebar-grad); color: #0b1220;">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-4 h-4 bg-[color:var(--accent)]"></div>
|
|
<span class="font-bold tracking-wide uppercase text-xs">Gaming</span>
|
|
</div>
|
|
<div class="flex gap-1.5">
|
|
<span class="w-3.5 h-3.5 rounded-full bg-[#ff5f56]"></span>
|
|
<span class="w-3.5 h-3.5 rounded-full bg-[#f6c026]"></span>
|
|
<span class="w-3.5 h-3.5 rounded-full bg-[#2ecc71]"></span>
|
|
</div>
|
|
</div>
|
|
<!-- Meta -->
|
|
<div class="px-4 py-2 text-sm border-b border-[color:var(--border)]" style="color: var(--meta);">
|
|
<time datetime="2020-09-01">9.1.2020</time>
|
|
<span class="mx-2">•</span>
|
|
<a href="#" class="underline">chess</a>
|
|
</div>
|
|
<!-- Content -->
|
|
<div class="p-4">
|
|
<h2 class="text-2xl font-extrabold leading-tight mb-3 tracking-tight">A chunky Aero/95 take on the Indie card.</h2>
|
|
<div class="overflow-hidden rounded-[4px] bevel-inset">
|
|
<img src="https://picsum.photos/seed/chunky/960/520" class="w-full block" alt="Chunky card image">
|
|
</div>
|
|
<p class="mt-3">Big borders, beveled edges, and frosted panels bring that throwback desktop feel.</p>
|
|
<a href="#" class="mt-2 inline-block font-bold underline focus-95">READ MORE »</a>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Card 2: Strong Win95 chrome -->
|
|
<article class="relative bevel bg-[color:var(--surface)] card-press win-enter crt-panel">
|
|
<div class="px-3 py-2 flex items-center justify-between border-b-4 border-b-[#808080]" style="background: var(--titlebar-grad); color:#fff;">
|
|
<span class="font-bold tracking-wide uppercase text-xs">Code</span>
|
|
<div class="flex gap-1.5">
|
|
<span class="w-3.5 h-3.5 bg-white"></span>
|
|
<span class="w-3.5 h-3.5 bg-white"></span>
|
|
<span class="w-3.5 h-3.5 bg-white"></span>
|
|
</div>
|
|
</div>
|
|
<div class="px-4 py-2 text-sm text-black border-b-4 border-b-[#808080]">
|
|
<time datetime="2020-08-31">8.31.2020</time>
|
|
<span class="mx-2">•</span>
|
|
<a href="#" class="underline">resource</a>
|
|
</div>
|
|
<div class="p-4">
|
|
<h2 class="text-2xl font-extrabold mb-3">Tower defense… but Flexbox.</h2>
|
|
<div class="bevel-inset overflow-hidden">
|
|
<img src="https://picsum.photos/seed/flex/960/520" alt="Flexbox" class="w-full block">
|
|
</div>
|
|
<p class="mt-3">Train display order, growth, and basis—rendered like a 1995 dialog box.</p>
|
|
<a href="#" class="mt-2 inline-block font-bold underline focus-95">START WAVE 1 »</a>
|
|
</div>
|
|
</article>
|
|
</section>
|
|
|
|
<!-- SECONDARY STACK -->
|
|
<aside class="space-y-6">
|
|
<article class="rounded-win border border-[color:var(--border)] backdrop-blur-[var(--glass)] bg-[color:var(--surface)] shadow-glass card-press win-enter crt-panel">
|
|
<div class="px-3 py-2 border-b border-[color:var(--border)] flex items-center justify-between" style="background: var(--titlebar-grad); color: #0b1220;">
|
|
<span class="font-bold uppercase text-xs">Resource</span>
|
|
</div>
|
|
<div class="px-4 py-2 text-sm border-b border-[color:var(--border)]" style="color: var(--meta);">
|
|
<time datetime="2020-07-10">7.10.2020</time> • <a href="#" class="underline">icons</a>
|
|
</div>
|
|
<div class="p-4">
|
|
<h3 class="text-xl font-extrabold mb-2">Icon pack in MS-era chrome</h3>
|
|
<div class="bevel-inset overflow-hidden">
|
|
<img src="https://picsum.photos/seed/icons/800/480" alt="Icons" class="w-full block">
|
|
</div>
|
|
<a href="#" class="mt-2 inline-block font-bold underline focus-95">WHO, WHAT, WHERE…</a>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="bevel bg-[color:var(--surface)] card-press win-enter crt-panel">
|
|
<div class="px-3 py-2 flex items-center justify-between border-b-4 border-b-[#808080]" style="background: var(--titlebar-grad); color:#fff;">
|
|
<span class="font-bold uppercase text-xs">Audio</span>
|
|
</div>
|
|
<div class="px-4 py-2 text-sm text-black border-b-4 border-b-[#808080]">
|
|
<time datetime="2020-06-14">6.14.2020</time> • <a href="#" class="underline">git</a>
|
|
</div>
|
|
<div class="p-4">
|
|
<h3 class="text-xl font-extrabold mb-2">Scales around the world</h3>
|
|
<div class="bevel-inset overflow-hidden">
|
|
<img src="https://picsum.photos/seed/omni/800/480" alt="A Digital Harp" class="w-full block">
|
|
</div>
|
|
<a href="#" class="mt-2 inline-block font-bold underline focus-95">TELL ME MORE…</a>
|
|
</div>
|
|
</article>
|
|
</aside>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<nav class="py-8 flex justify-end">
|
|
<a href="#" class="focus-95 px-4 py-2 font-bold border-2 rounded-win border-[color:var(--border)] bg-white/80 hover:bg-white">MORE >>></a>
|
|
</nav>
|
|
</main>
|
|
|
|
<!-- TASKBAR FOOTER -->
|
|
<footer class="fixed bottom-0 left-0 right-0 z-50 bevel bg-[color:var(--surface)]">
|
|
<div class="max-w-[1120px] mx-auto px-2 py-1 flex items-center justify-between">
|
|
<div class="flex items-center gap-2">
|
|
<button class="bevel px-3 py-1 font-bold text-sm focus-95">Start</button>
|
|
<nav class="hidden sm:flex gap-2 text-sm">
|
|
<a class="bevel px-2 py-1 focus-95" href="#">Posts</a>
|
|
<a class="bevel px-2 py-1 focus-95" href="#">Tags</a>
|
|
<a class="bevel px-2 py-1 focus-95" href="#">About</a>
|
|
</nav>
|
|
</div>
|
|
<span id="clock" class="bevel px-2 py-1 font-mono text-sm">00:00</span>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// Theme toggles
|
|
const html = document.documentElement;
|
|
document.getElementById('btnAero').onclick = () => html.setAttribute('data-theme','aero');
|
|
document.getElementById('btn95').onclick = () => html.setAttribute('data-theme','win95');
|
|
|
|
// CRT toggle
|
|
document.getElementById('btnCRT').onclick = () => html.classList.toggle('crt');
|
|
|
|
// Clock
|
|
const clk = () => document.getElementById('clock').textContent =
|
|
new Date().toLocaleTimeString([], {hour:'2-digit', minute:'2-digit'});
|
|
clk(); setInterval(clk, 1000);
|
|
|
|
// Konami code to flip theme
|
|
(() => {
|
|
const seq = ['ArrowUp','ArrowUp','ArrowDown','ArrowDown','ArrowLeft','ArrowRight','ArrowLeft','ArrowRight','b','a'];
|
|
let i = 0;
|
|
window.addEventListener('keydown', e => {
|
|
i = (e.key === seq[i]) ? i+1 : 0;
|
|
if (i === seq.length) {
|
|
html.setAttribute('data-theme', html.getAttribute('data-theme') === 'win95' ? 'aero' : 'win95');
|
|
i = 0;
|
|
}
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|