JL Kruger
2f5c06fee8
Fonts (display/heading only — body untouched): - Cringe Pit: Bebas Neue → Protest Revolution - Renegade: Bebas Neue → Ribeye Marrow, Barlow Condensed → Faculty Glyphic (headings), Rambla (body) - Nomad Soul: Bebas Neue → Trade Winds, Rye → Babylonica - Hub: Bebas Neue → Workbench Lightbox fixes (3 collection pages): - window.onload → DOMContentLoaded (fires before iframes load, fixes slow mobile) - lightbox-content: max-height 90vh + overflow-y auto (fixes off-screen on small viewports) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
236 lines
15 KiB
HTML
236 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html class="dark" lang="en"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700;900&family=Manrope:wght@200;300;400;500;600;700;800&family=Newsreader:ital,wght@0,200..800;1,200..800&family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
"background": "#130827",
|
|
"error": "#ff6e84",
|
|
"tertiary": "#e9ffba",
|
|
"primary-fixed-dim": "#ff1cfe",
|
|
"on-surface": "#ede0ff",
|
|
"secondary-container": "#00696f",
|
|
"outline": "#7d6f94",
|
|
"inverse-on-surface": "#5c4f72",
|
|
"surface-container-high": "#261740",
|
|
"on-primary-fixed-variant": "#540054",
|
|
"on-secondary-fixed": "#004145",
|
|
"surface-tint": "#ff7cf5",
|
|
"error-dim": "#d73357",
|
|
"secondary": "#00f1fd",
|
|
"on-secondary-container": "#e1fdff",
|
|
"primary-dim": "#ff51fa",
|
|
"on-error-container": "#ffb2b9",
|
|
"surface-container-low": "#180c2f",
|
|
"tertiary-dim": "#afee00",
|
|
"inverse-surface": "#fef7ff",
|
|
"on-secondary": "#00565a",
|
|
"secondary-fixed-dim": "#00e2ed",
|
|
"on-background": "#ede0ff",
|
|
"tertiary-fixed-dim": "#afee00",
|
|
"primary-fixed": "#ff5af9",
|
|
"primary": "#ff7cf5",
|
|
"error-container": "#a70138",
|
|
"surface-bright": "#342353",
|
|
"surface-container-lowest": "#000000",
|
|
"on-error": "#490013",
|
|
"on-primary": "#580058",
|
|
"on-tertiary": "#4a6600",
|
|
"on-tertiary-container": "#435d00",
|
|
"primary-container": "#ff5af9",
|
|
"on-tertiary-fixed": "#344a00",
|
|
"on-secondary-fixed-variant": "#006065",
|
|
"on-primary-fixed": "#000000",
|
|
"on-surface-variant": "#b4a4cc",
|
|
"on-tertiary-fixed-variant": "#4b6800",
|
|
"surface-container": "#1f1238",
|
|
"tertiary-fixed": "#bafd00",
|
|
"surface": "#130827",
|
|
"surface-variant": "#2d1d49",
|
|
"outline-variant": "#4e4264",
|
|
"secondary-dim": "#00e2ed",
|
|
"tertiary-container": "#bafd00",
|
|
"secondary-fixed": "#00f1fd",
|
|
"on-primary-container": "#440044",
|
|
"surface-dim": "#130827",
|
|
"surface-container-highest": "#2d1d49",
|
|
"inverse-primary": "#aa00aa"
|
|
},
|
|
fontFamily: {
|
|
"headline": ["Space Grotesk"],
|
|
"body": ["Manrope"],
|
|
"label": ["Newsreader"]
|
|
},
|
|
borderRadius: {"DEFAULT": "0px", "lg": "0px", "xl": "0px", "full": "9999px"},
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
display: inline-block;
|
|
line-height: 1;
|
|
text-transform: none;
|
|
letter-spacing: normal;
|
|
word-wrap: normal;
|
|
white-space: nowrap;
|
|
direction: ltr;
|
|
}
|
|
.glitch-overlay {
|
|
background: repeating-linear-gradient(0deg, rgba(0,0,0,0.15) 0px, rgba(0,0,0,0.15) 1px, transparent 1px, transparent 2px);
|
|
pointer-events: none;
|
|
}
|
|
</style>
|
|
<style>
|
|
body {
|
|
min-height: max(884px, 100dvh);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background text-on-background font-body selection:bg-primary selection:text-on-primary min-h-screen pb-24">
|
|
<!-- TopAppBar -->
|
|
<header class="fixed top-0 z-50 w-full bg-[#130827] flex justify-between items-center px-6 py-4 rounded-none border-b-2 border-[#00f1fd]/30">
|
|
<div class="flex items-center gap-4">
|
|
<button class="text-[#ff7cf5] hover:bg-[#261740] hover:text-[#00f1fd] transition-all duration-100 p-1">
|
|
<span class="material-symbols-outlined" data-icon="menu">menu</span>
|
|
</button>
|
|
<h1 class="text-2xl font-black italic text-[#ff7cf5] drop-shadow-[0_0_10px_rgba(255,124,245,0.5)] font-['Space_Grotesk'] uppercase tracking-tighter">NEON SOLAR</h1>
|
|
</div>
|
|
<button class="text-[#ff7cf5] hover:bg-[#261740] hover:text-[#00f1fd] transition-all duration-100 p-1">
|
|
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
|
</button>
|
|
</header>
|
|
<!-- Main Canvas -->
|
|
<main class="pt-24 px-4 space-y-8 relative overflow-hidden">
|
|
<!-- Aesthetic Solar Flare Background -->
|
|
<div class="absolute top-0 right-0 w-96 h-96 bg-primary/10 blur-[100px] -z-10 translate-x-1/2 -translate-y-1/2"></div>
|
|
<div class="absolute bottom-1/4 left-0 w-80 h-80 bg-secondary/10 blur-[80px] -z-10 -translate-x-1/2"></div>
|
|
<!-- Featured Section -->
|
|
<section class="relative">
|
|
<div class="flex items-baseline justify-between mb-4">
|
|
<h2 class="font-headline font-bold text-3xl uppercase tracking-tighter text-secondary">LIVE_NOW</h2>
|
|
<span class="font-label italic text-tertiary text-lg">Solar Cycle 042</span>
|
|
</div>
|
|
<div class="relative bg-surface-container aspect-video overflow-hidden border-l-4 border-primary">
|
|
<img alt="Cyberpunk sunset" class="w-full h-full object-cover mix-blend-screen opacity-80" data-alt="Hyper-saturated vaporwave sunset with digital scanlines, silhouetted palm trees against a neon pink and cyan sky" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDhcdJEpHv0or4scsO5clCDViEnq9k8gyhINhbczm3UpHHF0ZD44nrINE2dCpKPCvF8ch00p5iS7-zBua_yTdg0Kh6MPzlt6MCwa-kQILOkQZhfJW2NxmdMeW2W2Qr7LgkP9OEg8ahobg6rxsIRq1IkkD_oLJIuptKSRJ7QCyXNpAWwKh12Xzw5rgW0L-dGiO6jlhaA30T2EO_wgpaT6zdrKj0vO2tCWtWZfMnhWuSzcC5pBDgVa30nC5JVbBqDa9wJgoAlYv1zRIc"/>
|
|
<div class="absolute inset-0 bg-gradient-to-t from-background via-transparent to-transparent"></div>
|
|
<div class="glitch-overlay absolute inset-0"></div>
|
|
<!-- Play Button -->
|
|
<button class="absolute inset-0 m-auto w-20 h-20 bg-primary flex items-center justify-center hover:scale-110 active:scale-95 transition-all duration-100 shadow-[0_0_30px_rgba(255,124,245,0.6)]">
|
|
<span class="material-symbols-outlined text-on-primary text-5xl" style="font-variation-settings: 'FILL' 1;">play_arrow</span>
|
|
</button>
|
|
<div class="absolute bottom-4 left-4 right-4">
|
|
<div class="bg-surface-container-highest/80 backdrop-blur-md p-4 border-t-2 border-secondary/50">
|
|
<p class="font-headline font-bold text-xl text-on-surface uppercase tracking-tight">SOLAR_PUNK_INITIATIVE: VOL 01</p>
|
|
<p class="font-label text-tertiary text-sm italic">24,892 VIEWERS TUNED IN</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Video Grid -->
|
|
<section class="space-y-6">
|
|
<div class="flex items-center gap-4">
|
|
<div class="h-[2px] flex-grow bg-gradient-to-r from-transparent via-outline-variant/30 to-transparent"></div>
|
|
<h3 class="font-headline font-medium text-xs tracking-[0.3em] uppercase text-on-surface-variant">ARCHIVE_DEEP_DIVE</h3>
|
|
<div class="h-[2px] flex-grow bg-gradient-to-r from-transparent via-outline-variant/30 to-transparent"></div>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
<!-- Video Card 1 -->
|
|
<div class="group relative space-y-3">
|
|
<div class="relative aspect-video bg-surface-container-high overflow-hidden border-b-4 border-tertiary">
|
|
<img alt="Digital flora" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-300" data-alt="Macro shot of bioluminescent tropical leaves with glowing cyan veins in a dark jungle setting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA4fD2fhqpwAV-Galw5QYrqZl9x-OlV_2JV7Nt87bqiOYIfexNMdfhfkFgESGbYyLE9v8HkLfS3c8N07W4aEqZz9VRAZj3EAwbYi_zFjA8yb_y9wdDSc_6iY-uzeTg_Gtmz7WMWhixSFBb_qiHgvBmaeM2G9LsGnX5KDl7ZJU4cZ36tKaVkmIwSD5CDv6re2QxMgP6hTzf1b349Q7ZSjqaXgqEtDzEAcVNGC8zJikBc1nIS5gj6JBb8pCodU9OVL4fL69n_scV7d1A"/>
|
|
<div class="absolute inset-0 bg-secondary/10 mix-blend-overlay"></div>
|
|
<button class="absolute inset-0 m-auto w-12 h-12 bg-secondary text-on-secondary flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-100">
|
|
<span class="material-symbols-outlined text-3xl" style="font-variation-settings: 'FILL' 1;">play_arrow</span>
|
|
</button>
|
|
<div class="absolute top-2 right-2 bg-background/80 px-2 py-1 text-[10px] font-headline font-bold text-secondary border border-secondary/30">
|
|
04:20
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-headline font-bold text-lg uppercase leading-tight group-hover:text-primary transition-colors">GLITCH_JUNGLE_WALKTHROUGH</h4>
|
|
<p class="font-label italic text-sm text-on-surface-variant">Data Segment: #00FF1D</p>
|
|
</div>
|
|
</div>
|
|
<!-- Video Card 2 -->
|
|
<div class="group relative space-y-3">
|
|
<div class="relative aspect-video bg-surface-container-high overflow-hidden border-b-4 border-primary">
|
|
<img alt="Neon rave" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-300" data-alt="Atmospheric low angle shot of neon lights reflecting on wet pavement with palm tree shadows" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA_GeleYh_RHYJA5fioJh4UtqqzFtWo4oZlOtmNTOIDix29-_K-iYPd7xWnW7-4fPkqEZmkdTlGTbjqDXB4vmOUFrOc8_QEFTQXilW5PJt8SacD_nGYrwO3xANClkG-fv2CdTtg9o1iVSKeklkdjRMY290Rs9INH3n5nKvU1NUMB7isKpKHLPumdO-gGSpSIyd91m_8kYt3akx5cdQJlh_x7gmRKjqGs6Qk3VZfbsEkVrT_6BfsQKLWPDRZ2Qzm2grTGUPs8BdQ9Pg"/>
|
|
<div class="absolute inset-0 bg-primary/10 mix-blend-overlay"></div>
|
|
<button class="absolute inset-0 m-auto w-12 h-12 bg-primary text-on-primary flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-100">
|
|
<span class="material-symbols-outlined text-3xl" style="font-variation-settings: 'FILL' 1;">play_arrow</span>
|
|
</button>
|
|
<div class="absolute top-2 right-2 bg-background/80 px-2 py-1 text-[10px] font-headline font-bold text-primary border border-primary/30">
|
|
12:55
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-headline font-bold text-lg uppercase leading-tight group-hover:text-secondary transition-colors">NEON_BEACH_MEMORIES</h4>
|
|
<p class="font-label italic text-sm text-on-surface-variant">Data Segment: #FF00F5</p>
|
|
</div>
|
|
</div>
|
|
<!-- Video Card 3 -->
|
|
<div class="group relative space-y-3">
|
|
<div class="relative aspect-video bg-surface-container-high overflow-hidden border-b-4 border-secondary">
|
|
<img alt="Crystal flora" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-300" data-alt="Digital rendering of crystalline tropical plants reflecting pink and purple laser light" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAAbkXx1Q1B3j_0mZTiWl77No3wfmL2E7MWWfizSwQUTgBrZLITB1UhwAO1qeShFFECNksh6_T9fKrzCBGBKWk-kzUGRRc-Owu_Rlubuy_Kbazrz3uhXa6m_0TTPey9-3d8OSVVuhxwMCfJG1vjbLOssjRPEVv7rrS5SbP5SpPT8RzxZcS3uu4kxFSR6LPLqPJZWKkwviR6V7KiVY20LOuT0tuaoSXZe63uPO1hzK0Ru_q5c8_JEdnDk3gr856VUbQynEOGIJzCPUc"/>
|
|
<div class="absolute inset-0 bg-tertiary/10 mix-blend-overlay"></div>
|
|
<button class="absolute inset-0 m-auto w-12 h-12 bg-tertiary text-on-tertiary flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-100">
|
|
<span class="material-symbols-outlined text-3xl" style="font-variation-settings: 'FILL' 1;">play_arrow</span>
|
|
</button>
|
|
<div class="absolute top-2 right-2 bg-background/80 px-2 py-1 text-[10px] font-headline font-bold text-tertiary border border-tertiary/30">
|
|
08:12
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-headline font-bold text-lg uppercase leading-tight group-hover:text-primary transition-colors">BOTANICAL_UPGRADE_V3</h4>
|
|
<p class="font-label italic text-sm text-on-surface-variant">Data Segment: #E9FFBA</p>
|
|
</div>
|
|
</div>
|
|
<!-- Video Card 4 -->
|
|
<div class="group relative space-y-3">
|
|
<div class="relative aspect-video bg-surface-container-high overflow-hidden border-b-4 border-primary">
|
|
<img alt="Digital sky" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-300" data-alt="Fast-moving clouds in a hyper-real sky with digital distortion and pixelated artifacts" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCEe9Ag_nfP4pjNboSq_yVC-9SXgCRyH0py8lbeb62gsw7yTBO6FGxYnNccVs1ikADIt13vPKf1T11wZ3rISr2xluE7I86TGWRf6wkOe9uHEJZ4ImJE7yTty8U08tELmigbpPkez15yy6Bnsqqix64waUNxkSRtX2O1MUdK6ve2p9D05mk4e071gaMUxzR9F_prGemprPofGnEqcO7FcAfRjcpZcoPYIinAueC9WIyKbctl9xGvBdp1c-VUaV5DtVY4Gbif87WBDss"/>
|
|
<button class="absolute inset-0 m-auto w-12 h-12 bg-primary text-on-primary flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-100">
|
|
<span class="material-symbols-outlined text-3xl" style="font-variation-settings: 'FILL' 1;">play_arrow</span>
|
|
</button>
|
|
<div class="absolute top-2 right-2 bg-background/80 px-2 py-1 text-[10px] font-headline font-bold text-primary border border-primary/30">
|
|
01:30
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-headline font-bold text-lg uppercase leading-tight group-hover:text-secondary transition-colors">ATMOSPHERIC_DATA_STREAM</h4>
|
|
<p class="font-label italic text-sm text-on-surface-variant">Data Segment: #AABBCC</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Decorative Palm Leaf Overlay (Floating) -->
|
|
<div class="fixed bottom-24 -right-12 w-64 h-64 pointer-events-none opacity-20 rotate-12 mix-blend-color-dodge">
|
|
<img alt="Palm leaf" class="w-full h-full object-contain filter invert hue-rotate-180" data-alt="Detailed silhouette of a monstera leaf with high contrast highlights" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAhwE0zBVGUBSNIgT84a75aq3GGc7HNrI_PK77D5u7CHlzd2fIjK-Ma-VaRNww9cREL4tadifqF4zi2dDMdYtxz1oqwpRi4OjvMqFYEZH5Qo8oaEKdjtBbYRNH0z_y9ZHoSa-pQbMvr-FEOUN-O1axfkZSRpTx1Imo8QNBhCSpV3quOg7JpUL2mcf_MMcvE_Iutkg9vW5JoBC0VBb9xa8I-CwQ00XMUhO5Dzca4Tvgh0POcj4AyJZ60d6cfOEJvzAnlDAAKGt_TuCw"/>
|
|
</div>
|
|
</main>
|
|
<!-- BottomNavBar -->
|
|
<nav class="fixed bottom-0 left-0 w-full flex justify-around items-center h-20 px-4 bg-[#1f1238]/90 backdrop-blur-xl z-50 rounded-none border-t-2 border-[#ff7cf5]/20 shadow-[0_-4px_20px_rgba(255,124,245,0.15)]">
|
|
<a class="flex flex-col items-center justify-center bg-[#ff7cf5] text-[#130827] rounded-none px-6 py-2 scale-105 transition-all duration-100" href="#">
|
|
<span class="material-symbols-outlined" data-icon="grid_view" style="font-variation-settings: 'FILL' 1;">grid_view</span>
|
|
<span class="font-['Space_Grotesk'] font-medium text-[10px] uppercase tracking-widest mt-1">Gallery</span>
|
|
</a>
|
|
<a class="flex flex-col items-center justify-center text-[#7d6f94] px-6 py-2 hover:text-[#ff7cf5] hover:bg-[#2d1d49] transition-all duration-100" href="#">
|
|
<span class="material-symbols-outlined" data-icon="search">search</span>
|
|
<span class="font-['Space_Grotesk'] font-medium text-[10px] uppercase tracking-widest mt-1">Search</span>
|
|
</a>
|
|
<a class="flex flex-col items-center justify-center text-[#7d6f94] px-6 py-2 hover:text-[#ff7cf5] hover:bg-[#2d1d49] transition-all duration-100" href="#">
|
|
<span class="material-symbols-outlined" data-icon="person">person</span>
|
|
<span class="font-['Space_Grotesk'] font-medium text-[10px] uppercase tracking-widest mt-1">Profile</span>
|
|
</a>
|
|
</nav>
|
|
</body></html> |