448 lines
28 KiB
HTML
448 lines
28 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"/>
|
|
<title>The Digital Atelier - Home</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&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"/>
|
|
<style>
|
|
.no-scrollbar::-webkit-scrollbar { display: none; }
|
|
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
.geist-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
|
|
.thumbnail-active {
|
|
opacity: 1 !important;
|
|
border: 2px solid #2563eb !important;
|
|
border-radius: 6px !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-[#10131f] text-[#c3c6d7] font-geist selection:bg-[#2563eb]/30 overflow-hidden">
|
|
<!-- SideNavBar Anchor -->
|
|
<aside class="w-64 h-screen fixed left-0 top-0 bg-[#181b28] shadow-[20px_0_50px_rgba(0,0,0,0.3)] flex flex-col py-8 z-[60]">
|
|
<div class="px-6 mb-10">
|
|
<h1 class="text-xl font-black text-white tracking-tighter uppercase geist-mono">The Digital Atelier</h1>
|
|
<p class="text-[10px] geist-mono uppercase tracking-[0.05em] text-[#c3c6d7] opacity-60">Curated Vault</p>
|
|
</div>
|
|
<nav class="flex-1 flex flex-col gap-1">
|
|
<a class="bg-[#2563eb]/10 text-[#2563eb] backdrop-blur-md rounded-full mx-2 py-3 px-4 flex items-center gap-3 active:scale-95 transition-all" href="#">
|
|
<span class="material-symbols-outlined" data-icon="home">home</span>
|
|
<span class="geist-mono tracking-tight text-sm uppercase">Home</span>
|
|
</a>
|
|
<a class="text-[#c3c6d7] hover:text-white hover:bg-white/5 mx-2 py-3 px-4 flex items-center gap-3 transition-all active:scale-95" href="#">
|
|
<span class="material-symbols-outlined" data-icon="bookmarks">bookmarks</span>
|
|
<span class="geist-mono tracking-tight text-sm uppercase">Platforms</span>
|
|
</a>
|
|
<a class="text-[#c3c6d7] hover:text-white hover:bg-white/5 mx-2 py-3 px-4 flex items-center gap-3 transition-all active:scale-95" href="#">
|
|
<span class="material-symbols-outlined" data-icon="library_books">library_books</span>
|
|
<span class="geist-mono tracking-tight text-sm uppercase">Collections</span>
|
|
</a>
|
|
<a class="text-[#c3c6d7] hover:text-white hover:bg-white/5 mx-2 py-3 px-4 flex items-center gap-3 transition-all active:scale-95" href="#">
|
|
<span class="material-symbols-outlined" data-icon="videogame_asset">videogame_asset</span>
|
|
<span class="geist-mono tracking-tight text-sm uppercase">Console</span>
|
|
</a>
|
|
</nav>
|
|
<div class="mt-auto flex flex-col gap-1 pt-6">
|
|
<a class="text-[#c3c6d7] hover:text-white hover:bg-white/5 mx-2 py-3 px-4 flex items-center gap-3 transition-all active:scale-95" href="#">
|
|
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
|
<span class="geist-mono tracking-tight text-sm uppercase">Settings</span>
|
|
</a>
|
|
<a class="text-[#c3c6d7] hover:text-white hover:bg-white/5 mx-2 py-3 px-4 flex items-center gap-3 transition-all active:scale-95" href="#">
|
|
<span class="material-symbols-outlined" data-icon="help_outline">help_outline</span>
|
|
<span class="geist-mono tracking-tight text-sm uppercase">Support</span>
|
|
</a>
|
|
<div class="px-6 mt-4 flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded-full bg-white/10 overflow-hidden">
|
|
<img alt="User profile avatar" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD6-iqa8Rg2GOiRcezo2bHGcW-qSPDPSuPHswQITO1jjFzfy8Tz4emYZ01W2LDBP96TpLRx8Q_3RzztdNWc9lQYuWLgEQ9VlatIK_FiOAmJlhsVTC4eAVYo2H25CwF8aIOwq2lqI5wnmGVo_rmlgp9vIAHvdCg9eO77fG5uhaSJZZ156M7RYEhg4PTNPhKIVp3XkX4u-tD56XaMiytgjMTK7VJfl4642t-JYltjZ2r6XhgnyOCG1BqOh1F_Wo5-e96NHMTu4X1iLRw"/>
|
|
</div>
|
|
<div class="flex flex-col leading-none">
|
|
<span class="text-xs font-bold text-white geist-mono">Archivist</span>
|
|
<span class="text-[10px] text-[#c3c6d7] font-medium uppercase tracking-tighter geist-mono">Admin</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
<!-- TopNavBar -->
|
|
<header class="fixed top-0 right-0 left-64 h-16 z-50 bg-[#10131f]/80 backdrop-blur-2xl flex items-center justify-between px-12 w-auto border-b border-white/5">
|
|
<div class="flex items-center gap-6 w-full">
|
|
<div class="relative w-full max-w-md focus-within:ring-1 focus-within:ring-[#2563eb]/50 rounded-md overflow-hidden bg-white/5">
|
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-[#c3c6d7] text-sm">search</span>
|
|
<input class="w-full bg-transparent border-none pl-10 pr-4 py-2 text-sm text-white placeholder-[#c3c6d7]/50 focus:ring-0 geist-mono" placeholder="Search the vault..." type="text"/>
|
|
</div>
|
|
<!-- One-liner stats -->
|
|
<div class="hidden xl:flex items-center gap-6 ml-4 geist-mono flex-1 justify-center">
|
|
<div class="flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-[#2563eb] text-sm" data-icon="account_tree">account_tree</span>
|
|
<span class="text-[11px] uppercase text-[#c3c6d7] font-bold"><span class="text-white">12</span> Platforms</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-[#2563eb] text-sm" data-icon="sports_esports">sports_esports</span>
|
|
<span class="text-[11px] uppercase text-[#c3c6d7] font-bold"><span class="text-white">1,402</span> Games</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-[#2563eb] text-sm" data-icon="hard_drive">hard_drive</span>
|
|
<span class="text-[11px] uppercase text-[#c3c6d7] font-bold"><span class="text-white">2.4 TB</span></span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-[#2563eb] text-sm" data-icon="save">save</span>
|
|
<span class="text-[11px] uppercase text-[#c3c6d7] font-bold"><span class="text-white">842</span> Saves</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-[#2563eb] text-sm" data-icon="history">history</span>
|
|
<span class="text-[11px] uppercase text-[#c3c6d7] font-bold"><span class="text-white">142</span> States</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-[#2563eb] text-sm" data-icon="photo_library">photo_library</span>
|
|
<span class="text-[11px] uppercase text-[#c3c6d7] font-bold"><span class="text-white">5,103</span> Screens</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- Main Content -->
|
|
<main class="ml-64 pt-16 h-screen overflow-y-auto no-scrollbar">
|
|
<!-- Featured Galleria Section -->
|
|
<section class="bg-[#10131f] border-b border-white/5" id="featured-section">
|
|
<div class="px-12 py-12">
|
|
<div class="flex gap-12 items-stretch max-w-full">
|
|
<!-- Large Hero Poster on the left -->
|
|
<div class="w-[400px] aspect-[3/4] shrink-0 bg-white/5 overflow-hidden rounded-md shadow-2xl">
|
|
<img alt="Hero Poster" class="w-full h-full object-cover" id="hero-poster" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBUhUkSXQHbjcUk0giuzo4xLtdCITpVPtDFEdrvea97_1irhgudxYgcyJQ3LOdTW1noAKV8wsN-ezHOrz9rerGXMsc8d-6lNiwf7ls7rihej6nuVloixoBODwfXdC9YnTeFuhoHmXnPySvjIZl9fR7B2dmUqWQS9HGWOiCzynYCDsh5MwikbBsg8GUSpcQLaEGigeJmABNTqjGEUTLSUzaJ_VArKU1pYQkTpc6gXSiMkC_AVb5ccr6YJp40LS7svN0PQ9G5vpkSHJw"/>
|
|
</div>
|
|
<!-- Content Area on the right -->
|
|
<div class="flex-1 flex flex-col justify-between">
|
|
<!-- Top portion -->
|
|
<div class="flex flex-col">
|
|
<div class="inline-flex items-center gap-2 px-3 py-1 bg-[#2563eb]/20 text-[#b4c5ff] mb-4 w-fit border border-[#2563eb]/30 rounded-md">
|
|
<span class="material-symbols-outlined text-[10px]" style="font-variation-settings: 'FILL' 1;">star</span>
|
|
<span class="text-[10px] font-black uppercase tracking-widest geist-mono" id="hero-tag">Action Gold</span>
|
|
</div>
|
|
<h2 class="text-[72px] font-black text-white tracking-tighter mb-4 leading-[0.9] uppercase geist-mono" id="hero-title">SUNSET OVERDRIVE</h2>
|
|
<!-- Metadata Grid -->
|
|
<div class="flex gap-10 mb-8 geist-mono">
|
|
<div class="flex flex-col">
|
|
<span class="text-[10px] text-[#c3c6d7] uppercase tracking-[0.2em] font-bold mb-1 opacity-60">Platform</span>
|
|
<span class="text-xs font-black text-white" id="hero-platform">XBOX ONE / PC</span>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<span class="text-[10px] text-[#c3c6d7] uppercase tracking-[0.2em] font-bold mb-1 opacity-60">Developer</span>
|
|
<span class="text-xs font-black text-white" id="hero-dev">Fizz Co</span>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<span class="text-[10px] text-[#c3c6d7] uppercase tracking-[0.2em] font-bold mb-1 opacity-60">Year</span>
|
|
<span class="text-xs font-black text-white" id="hero-year">2014</span>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<span class="text-[10px] text-[#c3c6d7] uppercase tracking-[0.2em] font-bold mb-1 opacity-60">Rating</span>
|
|
<span class="text-xs font-black text-white flex items-center gap-1" id="hero-rating">
|
|
<span class="material-symbols-outlined text-[10px] text-yellow-500" style="font-variation-settings: 'FILL' 1;">star</span> 8.8
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<p class="text-sm text-white/90 leading-relaxed max-w-2xl mb-8 geist-mono" id="hero-desc">
|
|
Style over everything. Grind, jump, and wall-run through a colorful post-apocalyptic city in the most energetic shooter ever made.
|
|
</p>
|
|
<!-- Action Row -->
|
|
<div class="flex items-center gap-3 mb-8">
|
|
<button class="bg-[#2563eb] hover:bg-[#2563eb]/90 text-white h-11 px-8 font-black flex items-center gap-2 active:scale-95 transition-all text-[11px] uppercase geist-mono rounded-md">
|
|
<span class="material-symbols-outlined text-base" style="font-variation-settings: 'FILL' 1;">play_arrow</span>
|
|
Play Now
|
|
</button>
|
|
<button class="bg-white/5 hover:bg-white/10 border border-white/10 text-white h-11 px-8 font-black flex items-center gap-2 transition-all text-[11px] uppercase geist-mono rounded-md">
|
|
<span class="material-symbols-outlined text-base">download</span>
|
|
Download
|
|
</button>
|
|
<button class="bg-white/5 hover:bg-white/10 border border-white/10 text-white h-11 w-11 flex items-center justify-center transition-all rounded-md">
|
|
<span class="material-symbols-outlined text-base">library_add</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Bottom portion: Thumbnail row -->
|
|
<div class="relative w-full overflow-hidden">
|
|
<div class="flex gap-3 overflow-x-auto no-scrollbar scroll-smooth" id="carousel-container">
|
|
<!-- Items generated via script -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Other Sections -->
|
|
<div class="px-12 py-16 space-y-20 pb-24">
|
|
<!-- Recently Added -->
|
|
<section>
|
|
<div class="flex items-center justify-between mb-8 border-l-4 border-[#2563eb] pl-4">
|
|
<h3 class="text-xl font-black text-white uppercase tracking-tighter geist-mono">Recently Added</h3>
|
|
<a class="text-[10px] font-black text-[#2563eb] hover:underline uppercase geist-mono tracking-[0.3em]" href="#">View All</a>
|
|
</div>
|
|
<div class="flex gap-6 overflow-x-auto no-scrollbar pb-4">
|
|
<div class="w-56 shrink-0 cursor-pointer group">
|
|
<div class="aspect-[2/3] bg-white/5 overflow-hidden mb-4 ring-1 ring-white/10 rounded-[6px]">
|
|
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBE_Bwp3p2xwGRJbX0mMY130beG6FoRAeWcKQjFJQ1TemSkfm9oUpgoWokReYnkA8xlGeEKLPfSe6IS3KAMwk7uOIZ-W7lNFxuVRguT5HQsKMeIFNBwNAdzX6Dv-zB0UcR9MrZGeh-P937ZVdZlacyWKhd9UlrYYXKWs0WrlfzCwyih9iuOdBghRwGUPCSMZYl4GbaktvJvYaR4umqCssOOgxo4MJK2qMu_9MNT6TBPyxQAGAnMih8bz3c37weOAsALioyqUH_bjiY"/>
|
|
</div>
|
|
<h4 class="text-sm font-black text-white truncate geist-mono uppercase">Lunar Colony</h4>
|
|
<p class="text-[10px] text-[#c3c6d7] uppercase geist-mono tracking-widest">Strategy</p>
|
|
</div>
|
|
<div class="w-56 shrink-0 cursor-pointer group">
|
|
<div class="aspect-[2/3] bg-white/5 overflow-hidden mb-4 ring-1 ring-white/10 rounded-[6px]">
|
|
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCdZ6xp9ZMjTyJAWKmRuJFddxg7y2QXMYoQ9LeHyylQzDzJrnhJ9AtMH09t2IagtwxKIlyOIEHjYKsXZ-oxOr0HIGPSQhfbqi18wFk_4GBQWixpT6DxIA49JS-Nc2Aaka7-duczcRYIisv650f40n_HxzapPIgrdgWYKY03ykvHBYF4LIvfA6IyJgSyesR90E8vb-LUcNjcoExS5QD3IHV-pmbMeIikXzUN9FsUnkNUK66mCjRb7YuZ69g1UpU4JDfpv6r-drxrJ-0"/>
|
|
</div>
|
|
<h4 class="text-sm font-black text-white truncate geist-mono uppercase">The Golem Project</h4>
|
|
<p class="text-[10px] text-[#c3c6d7] uppercase geist-mono tracking-widest">Action</p>
|
|
</div>
|
|
<div class="w-56 shrink-0 cursor-pointer group">
|
|
<div class="aspect-[2/3] bg-white/5 overflow-hidden mb-4 ring-1 ring-white/10 rounded-[6px]">
|
|
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBX4MjWOaUI2OT7G-1EH4iX8fwmchgRIyNRL7agFG5GxTi-RWqKUM2cD8qL_8kZS17opkEzmt0Z5pb7U90EzpaHtbYZxHsxP05NPSXm1qsDamkV4vtb-wovTv4W5CuQqINNI2TtUAbSKcjnlANabj_NfmrfjRjcjEjxsBVzt_25lrsJKa-PEgVhvF_stJeAlL-DVVw0uOO87ZyQ0ZLlQcVRx4St4BfA8WIRyY6UnL5Jtj03fa8hO-mqEsyARLPQ0wGBX_nZOfPao4Y"/>
|
|
</div>
|
|
<h4 class="text-sm font-black text-white truncate geist-mono uppercase">Vector Prime</h4>
|
|
<p class="text-[10px] text-[#c3c6d7] uppercase geist-mono tracking-widest">Arcade</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Continue Playing -->
|
|
<section>
|
|
<div class="flex items-center justify-between mb-8 border-l-4 border-[#2563eb] pl-4">
|
|
<h3 class="text-xl font-black text-white uppercase tracking-tighter geist-mono">Continue Playing</h3>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
<div class="bg-white/5 p-6 flex gap-6 hover:bg-white/10 transition-all cursor-pointer group rounded-md ring-1 ring-white/10">
|
|
<div class="w-28 aspect-square bg-white/10 overflow-hidden shrink-0 rounded-md">
|
|
<img class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCg7VYbc9iGTxKmei73JUyk9phRdk_vhe8hLzpky0tU8YefgFG_WwZE21o-gGr2IWPZ58fE5a4sYVL2mdzcmyqQdDemL_erw6Ql0KB4jthOnvSAUCO5VTfmB11yD-sbjSFHOKKEqI4eiBileSBNLjdEewVvpvUNpx2zUvFhRtJl2Y5T7q06eMDtNh3phArXk8CFWDPymoa5H5YwKyhtwknjFQsxNIxQfdLALzyDCuAn4I5HeafBZiMhcuOVYM8egHBbW2raYd7xyqU"/>
|
|
</div>
|
|
<div class="flex-1 flex flex-col justify-center">
|
|
<h4 class="text-sm font-black text-white mb-3 geist-mono uppercase">Cyberpunk Reclamation</h4>
|
|
<div class="flex items-center justify-between text-[10px] text-[#c3c6d7] uppercase geist-mono mb-2 font-bold">
|
|
<span>84% Complete</span>
|
|
<span class="text-[#2563eb]">Active</span>
|
|
</div>
|
|
<div class="h-1 bg-white/5 overflow-hidden rounded-full">
|
|
<div class="h-full bg-[#2563eb] w-[84%]"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Favorites -->
|
|
<section>
|
|
<div class="flex items-center justify-between mb-8 border-l-4 border-[#2563eb] pl-4">
|
|
<h3 class="text-xl font-black text-white uppercase tracking-tighter geist-mono">Favorites</h3>
|
|
<a class="text-[10px] font-black text-[#2563eb] hover:underline uppercase geist-mono tracking-[0.3em]" href="#">View All</a>
|
|
</div>
|
|
<div class="flex gap-6 overflow-x-auto no-scrollbar pb-4">
|
|
<div class="w-56 shrink-0 cursor-pointer group">
|
|
<div class="aspect-[2/3] bg-white/5 overflow-hidden mb-4 ring-1 ring-white/10 rounded-[6px]">
|
|
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCg7VYbc9iGTxKmei73JUyk9phRdk_vhe8hLzpky0tU8YefgFG_WwZE21o-gGr2IWPZ58fE5a4sYVL2mdzcmyqQdDemL_erw6Ql0KB4jthOnvSAUCO5VTfmB11yD-sbjSFHOKKEqI4eiBileSBNLjdEewVvpvUNpx2zUvFhRtJl2Y5T7q06eMDtNh3phArXk8CFWDPymoa5H5YwKyhtwknjFQsxNIxQfdLALzyDCuAn4I5HeafBZiMhcuOVYM8egHBbW2raYd7xyqU"/>
|
|
</div>
|
|
<h4 class="text-sm font-black text-white truncate geist-mono uppercase">Cyberpunk Reclamation</h4>
|
|
<p class="text-[10px] text-[#c3c6d7] uppercase geist-mono tracking-widest">RPG</p>
|
|
</div>
|
|
<div class="w-56 shrink-0 cursor-pointer group">
|
|
<div class="aspect-[2/3] bg-white/5 overflow-hidden mb-4 ring-1 ring-white/10 rounded-[6px]">
|
|
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCdZ6xp9ZMjTyJAWKmRuJFddxg7y2QXMYoQ9LeHyylQzDzJrnhJ9AtMH09t2IagtwxKIlyOIEHjYKsXZ-oxOr0HIGPSQhfbqi18wFk_4GBQWixpT6DxIA49JS-Nc2Aaka7-duczcRYIisv650f40n_HxzapPIgrdgWYKY03ykvHBYF4LIvfA6IyJgSyesR90E8vb-LUcNjcoExS5QD3IHV-pmbMeIikXzUN9FsUnkNUK66mCjRb7YuZ69g1UpU4JDfpv6r-drxrJ-0"/>
|
|
</div>
|
|
<h4 class="text-sm font-black text-white truncate geist-mono uppercase">The Golem Project</h4>
|
|
<p class="text-[10px] text-[#c3c6d7] uppercase geist-mono tracking-widest">Action</p>
|
|
</div>
|
|
<div class="w-56 shrink-0 cursor-pointer group">
|
|
<div class="aspect-[2/3] bg-white/5 overflow-hidden mb-4 ring-1 ring-white/10 rounded-[6px]">
|
|
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBUhUkSXQHbjcUk0giuzo4xLtdCITpVPtDFEdrvea97_1irhgudxYgcyJQ3LOdTW1noAKV8wsN-ezHOrz9rerGXMsc8d-6lNiwf7ls7rihej6nuVloixoBODwfXdC9YnTeFuhoHmXnPySvjIZl9fR7B2dmUqWQS9HGWOiCzynYCDsh5MwikbBsg8GUSpcQLaEGigeJmABNTqjGEUTLSUzaJ_VArKU1pYQkTpc6gXSiMkC_AVb5ccr6YJp40LS7svN0PQ9G5vpkSHJw"/>
|
|
</div>
|
|
<h4 class="text-sm font-black text-white truncate geist-mono uppercase">Sunset Overdrive</h4>
|
|
<p class="text-[10px] text-[#c3c6d7] uppercase geist-mono tracking-widest">Action</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Collections -->
|
|
<section>
|
|
<div class="flex items-center justify-between mb-8 border-l-4 border-[#2563eb] pl-4">
|
|
<h3 class="text-xl font-black text-white uppercase tracking-tighter geist-mono">Collections</h3>
|
|
<a class="text-[10px] font-black text-[#2563eb] hover:underline uppercase geist-mono tracking-[0.3em]" href="#">View All</a>
|
|
</div>
|
|
<div class="flex gap-6 overflow-x-auto no-scrollbar pb-4">
|
|
<div class="w-56 shrink-0 cursor-pointer group">
|
|
<div class="aspect-[2/3] bg-white/5 overflow-hidden mb-4 ring-1 ring-white/10 rounded-[6px]">
|
|
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBUhUkSXQHbjcUk0giuzo4xLtdCITpVPtDFEdrvea97_1irhgudxYgcyJQ3LOdTW1noAKV8wsN-ezHOrz9rerGXMsc8d-6lNiwf7ls7rihej6nuVloixoBODwfXdC9YnTeFuhoHmXnPySvjIZl9fR7B2dmUqWQS9HGWOiCzynYCDsh5MwikbBsg8GUSpcQLaEGigeJmABNTqjGEUTLSUzaJ_VArKU1pYQkTpc6gXSiMkC_AVb5ccr6YJp40LS7svN0PQ9G5vpkSHJw"/>
|
|
</div>
|
|
<h4 class="text-sm font-black text-white truncate geist-mono uppercase">Neon Noir</h4>
|
|
</div>
|
|
<div class="w-56 shrink-0 cursor-pointer group">
|
|
<div class="aspect-[2/3] bg-white/5 overflow-hidden mb-4 ring-1 ring-white/10 rounded-[6px]">
|
|
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCg7VYbc9iGTxKmei73JUyk9phRdk_vhe8hLzpky0tU8YefgFG_WwZE21o-gGr2IWPZ58fE5a4sYVL2mdzcmyqQdDemL_erw6Ql0KB4jthOnvSAUCO5VTfmB11yD-sbjSFHOKKEqI4eiBileSBNLjdEewVvpvUNpx2zUvFhRtJl2Y5T7q06eMDtNh3phArXk8CFWDPymoa5H5YwKyhtwknjFQsxNIxQfdLALzyDCuAn4I5HeafBZiMhcuOVYM8egHBbW2raYd7xyqU"/>
|
|
</div>
|
|
<h4 class="text-sm font-black text-white truncate geist-mono uppercase">Cyberpunk Classics</h4>
|
|
</div>
|
|
<div class="w-56 shrink-0 cursor-pointer group">
|
|
<div class="aspect-[2/3] bg-white/5 overflow-hidden mb-4 ring-1 ring-white/10 rounded-[6px]">
|
|
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBE_Bwp3p2xwGRJbX0mMY130beG6FoRAeWcKQjFJQ1TemSkfm9oUpgoWokReYnkA8xlGeEKLPfSe6IS3KAMwk7uOIZ-W7lNFxuVRguT5HQsKMeIFNBwNAdzX6Dv-zB0UcR9MrZGeh-P937ZVdZlacyWKhd9UlrYYXKWs0WrlfzCwyih9iuOdBghRwGUPCSMZYl4GbaktvJvYaR4umqCssOOgxo4MJK2qMu_9MNT6TBPyxQAGAnMih8bz3c37weOAsALioyqUH_bjiY"/>
|
|
</div>
|
|
<h4 class="text-sm font-black text-white truncate geist-mono uppercase">Atmospheric Sims</h4>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Autogenerated Collections -->
|
|
<section>
|
|
<div class="flex items-center justify-between mb-8 border-l-4 border-[#2563eb] pl-4">
|
|
<h3 class="text-xl font-black text-white uppercase tracking-tighter geist-mono">Autogenerated Collections</h3>
|
|
</div>
|
|
<div class="flex gap-6 overflow-x-auto no-scrollbar pb-4">
|
|
<div class="w-56 shrink-0 cursor-pointer group">
|
|
<div class="aspect-[2/3] bg-white/5 overflow-hidden mb-4 ring-1 ring-white/10 rounded-[6px]">
|
|
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBX4MjWOaUI2OT7G-1EH4iX8fwmchgRIyNRL7agFG5GxTi-RWqKUM2cD8qL_8kZS17opkEzmt0Z5pb7U90EzpaHtbYZxHsxP05NPSXm1qsDamkV4vtb-wovTv4W5CuQqINNI2TtUAbSKcjnlANabj_NfmrfjRjcjEjxsBVzt_25lrsJKa-PEgVhvF_stJeAlL-DVVw0uOO87ZyQ0ZLlQcVRx4St4BfA8WIRyY6UnL5Jtj03fa8hO-mqEsyARLPQ0wGBX_nZOfPao4Y"/>
|
|
</div>
|
|
<h4 class="text-sm font-black text-white truncate geist-mono uppercase">Arcade Revival</h4>
|
|
</div>
|
|
<div class="w-56 shrink-0 cursor-pointer group">
|
|
<div class="aspect-[2/3] bg-white/5 overflow-hidden mb-4 ring-1 ring-white/10 rounded-[6px]">
|
|
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBE_Bwp3p2xwGRJbX0mMY130beG6FoRAeWcKQjFJQ1TemSkfm9oUpgoWokReYnkA8xlGeEKLPfSe6IS3KAMwk7uOIZ-W7lNFxuVRguT5HQsKMeIFNBwNAdzX6Dv-zB0UcR9MrZGeh-P937ZVdZlacyWKhd9UlrYYXKWs0WrlfzCwyih9iuOdBghRwGUPCSMZYl4GbaktvJvYaR4umqCssOOgxo4MJK2qMu_9MNT6TBPyxQAGAnMih8bz3c37weOAsALioyqUH_bjiY"/>
|
|
</div>
|
|
<h4 class="text-sm font-black text-white truncate geist-mono uppercase">Deep Space Strategy</h4>
|
|
</div>
|
|
<div class="w-56 shrink-0 cursor-pointer group">
|
|
<div class="aspect-[2/3] bg-white/5 overflow-hidden mb-4 ring-1 ring-white/10 rounded-[6px]">
|
|
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCdZ6xp9ZMjTyJAWKmRuJFddxg7y2QXMYoQ9LeHyylQzDzJrnhJ9AtMH09t2IagtwxKIlyOIEHjYKsXZ-oxOr0HIGPSQhfbqi18wFk_4GBQWixpT6DxIA49JS-Nc2Aaka7-duczcRYIisv650f40n_HxzapPIgrdgWYKY03ykvHBYF4LIvfA6IyJgSyesR90E8vb-LUcNjcoExS5QD3IHV-pmbMeIikXzUN9FsUnkNUK66mCjRb7YuZ69g1UpU4JDfpv6r-drxrJ-0"/>
|
|
</div>
|
|
<h4 class="text-sm font-black text-white truncate geist-mono uppercase">Kinetic Combat</h4>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
<script>
|
|
const gamesData = [
|
|
{
|
|
title: "SUNSET OVERDRIVE",
|
|
platform: "XBOX ONE / PC",
|
|
dev: "Fizz Co",
|
|
year: "2014",
|
|
rating: "8.8",
|
|
desc: "Style over everything. Grind, jump, and wall-run through a colorful post-apocalyptic city in the most energetic shooter ever made.",
|
|
tag: "Action Gold",
|
|
img: "https://lh3.googleusercontent.com/aida-public/AB6AXuBUhUkSXQHbjcUk0giuzo4xLtdCITpVPtDFEdrvea97_1irhgudxYgcyJQ3LOdTW1noAKV8wsN-ezHOrz9rerGXMsc8d-6lNiwf7ls7rihej6nuVloixoBODwfXdC9YnTeFuhoHmXnPySvjIZl9fR7B2dmUqWQS9HGWOiCzynYCDsh5MwikbBsg8GUSpcQLaEGigeJmABNTqjGEUTLSUzaJ_VArKU1pYQkTpc6gXSiMkC_AVb5ccr6YJp40LS7svN0PQ9G5vpkSHJw"
|
|
},
|
|
{
|
|
title: "Cyberpunk Reclamation",
|
|
platform: "PC / ARCHIVE",
|
|
dev: "Project Orion",
|
|
year: "2077",
|
|
rating: "9.8",
|
|
desc: "Experience the definitive edition of the neon-noir classic. Fully restored assets and curated archival content from the deepest vaults of the Digital Atelier.",
|
|
tag: "Masterpiece Collection",
|
|
img: "https://lh3.googleusercontent.com/aida-public/AB6AXuCg7VYbc9iGTxKmei73JUyk9phRdk_vhe8hLzpky0tU8YefgFG_WwZE21o-gGr2IWPZ58fE5a4sYVL2mdzcmyqQdDemL_erw6Ql0KB4jthOnvSAUCO5VTfmB11yD-sbjSFHOKKEqI4eiBileSBNLjdEewVvpvUNpx2zUvFhRtJl2Y5T7q06eMDtNh3phArXk8CFWDPymoa5H5YwKyhtwknjFQsxNIxQfdLALzyDCuAn4I5HeafBZiMhcuOVYM8egHBbW2raYd7xyqU"
|
|
},
|
|
{
|
|
title: "Lunar Colony",
|
|
platform: "PC / VR",
|
|
dev: "Stellar Ops",
|
|
year: "2042",
|
|
rating: "8.5",
|
|
desc: "Command the first permanent lunar settlement in this intricate survival strategy simulation. Manage oxygen, power, and human fragile spirits.",
|
|
tag: "Editor's Choice",
|
|
img: "https://lh3.googleusercontent.com/aida-public/AB6AXuBE_Bwp3p2xwGRJbX0mMY130beG6FoRAeWcKQjFJQ1TemSkfm9oUpgoWokReYnkA8xlGeEKLPfSe6IS3KAMwk7uOIZ-W7lNFxuVRguT5HQsKMeIFNBwNAdzX6Dv-zB0UcR9MrZGeh-P937ZVdZlacyWKhd9UlrYYXKWs0WrlfzCwyih9iuOdBghRwGUPCSMZYl4GbaktvJvYaR4umqCssOOgxo4MJK2qMu_9MNT6TBPyxQAGAnMih8bz3c37weOAsALioyqUH_bjiY"
|
|
},
|
|
{
|
|
title: "The Golem Project",
|
|
platform: "CONSOLE / NEXT-GEN",
|
|
dev: "Anima Works",
|
|
year: "2024",
|
|
rating: "9.2",
|
|
desc: "A fast-paced kinetic action RPG where you craft your own mechanical guardian from the scrap of a fallen civilization.",
|
|
tag: "Must Play",
|
|
img: "https://lh3.googleusercontent.com/aida-public/AB6AXuCdZ6xp9ZMjTyJAWKmRuJFddxg7y2QXMYoQ9LeHyylQzDzJrnhJ9AtMH09t2IagtwxKIlyOIEHjYKsXZ-oxOr0HIGPSQhfbqi18wFk_4GBQWixpT6DxIA49JS-Nc2Aaka7-duczcRYIisv650f40n_HxzapPIgrdgWYKY03ykvHBYF4LIvfA6IyJgSyesR90E8vb-LUcNjcoExS5QD3IHV-pmbMeIikXzUN9FsUnkNUK66mCjRb7YuZ69g1UpU4JDfpv6r-drxrJ-0"
|
|
},
|
|
{
|
|
title: "Vector Prime",
|
|
platform: "RETRO ARCADE",
|
|
dev: "Neo Geo",
|
|
year: "1998",
|
|
rating: "7.9",
|
|
desc: "The definitive retro arcade shooter experience. Battle through 32 levels of vector-based chaos with a pulsing synthwave soundtrack.",
|
|
tag: "Retro Vault",
|
|
img: "https://lh3.googleusercontent.com/aida-public/AB6AXuBX4MjWOaUI2OT7G-1EH4iX8fwmchgRIyNRL7agFG5GxTi-RWqKUM2cD8qL_8kZS17opkEzmt0Z5pb7U90EzpaHtbYZxHsxP05NPSXm1qsDamkV4vtb-wovTv4W5CuQqINNI2TtUAbSKcjnlANabj_NfmrfjRjcjEjxsBVzt_25lrsJKa-PEgVhvF_stJeAlL-DVVw0uOO87ZyQ0ZLlQcVRx4St4BfA8WIRyY6UnL5Jtj03fa8hO-mqEsyARLPQ0wGBX_nZOfPao4Y"
|
|
}
|
|
];
|
|
|
|
const carouselItems = [];
|
|
for(let i=0; i<25; i++) {
|
|
carouselItems.push(gamesData[i % gamesData.length]);
|
|
}
|
|
|
|
const container = document.getElementById('carousel-container');
|
|
const heroPoster = document.getElementById('hero-poster');
|
|
const heroTitle = document.getElementById('hero-title');
|
|
const heroPlatform = document.getElementById('hero-platform');
|
|
const heroDev = document.getElementById('hero-dev');
|
|
const heroYear = document.getElementById('hero-year');
|
|
const heroRating = document.getElementById('hero-rating');
|
|
const heroDesc = document.getElementById('hero-desc');
|
|
const heroTag = document.getElementById('hero-tag');
|
|
|
|
let currentIndex = 0;
|
|
let autoScrollInterval;
|
|
let isPaused = false;
|
|
|
|
function updateFeatured(index) {
|
|
currentIndex = index;
|
|
const game = carouselItems[index];
|
|
|
|
heroPoster.src = game.img;
|
|
heroTitle.textContent = game.title.toUpperCase();
|
|
heroPlatform.textContent = game.platform;
|
|
heroDev.textContent = game.dev;
|
|
heroYear.textContent = game.year;
|
|
heroRating.innerHTML = `<span class="material-symbols-outlined text-[10px] text-yellow-500" style="font-variation-settings: 'FILL' 1;">star</span> ${game.rating}`;
|
|
heroDesc.textContent = game.desc;
|
|
heroTag.textContent = game.tag.toUpperCase();
|
|
|
|
document.querySelectorAll('.carousel-thumb').forEach((thumb, i) => {
|
|
if(i === index) {
|
|
thumb.classList.add('thumbnail-active');
|
|
} else {
|
|
thumb.classList.remove('thumbnail-active');
|
|
}
|
|
});
|
|
|
|
const targetThumb = container.children[index];
|
|
if (targetThumb) {
|
|
container.scrollTo({
|
|
left: targetThumb.offsetLeft - (container.clientWidth / 2) + (targetThumb.clientWidth / 2),
|
|
behavior: 'smooth'
|
|
});
|
|
}
|
|
}
|
|
|
|
carouselItems.forEach((game, i) => {
|
|
const thumb = document.createElement('div');
|
|
thumb.className = `carousel-thumb w-[90px] shrink-0 aspect-[2/3] overflow-hidden cursor-pointer transition-all duration-300 ring-1 ring-white/10 opacity-60 hover:opacity-100 bg-white/5 rounded-[6px]`;
|
|
thumb.innerHTML = `<img class="w-full h-full object-cover" src="${game.img}"/>`;
|
|
thumb.onclick = () => {
|
|
updateFeatured(i);
|
|
stopAutoScroll();
|
|
startAutoScroll();
|
|
};
|
|
container.appendChild(thumb);
|
|
});
|
|
|
|
function startAutoScroll() {
|
|
autoScrollInterval = setInterval(() => {
|
|
if (!isPaused) {
|
|
currentIndex = (currentIndex + 1) % carouselItems.length;
|
|
updateFeatured(currentIndex);
|
|
}
|
|
}, 5000);
|
|
}
|
|
|
|
function stopAutoScroll() {
|
|
clearInterval(autoScrollInterval);
|
|
}
|
|
|
|
const featuredSection = document.getElementById('featured-section');
|
|
featuredSection.onmouseenter = () => isPaused = true;
|
|
featuredSection.onmouseleave = () => isPaused = false;
|
|
|
|
updateFeatured(0);
|
|
startAutoScroll();
|
|
</script>
|
|
</body></html> |