71 lines
6.0 KiB
HTML
71 lines
6.0 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Imagen — Fleet Demo</title>
|
||
<style>
|
||
:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
|
||
* { box-sizing: border-box; }
|
||
body { margin: 0; min-width: 320px; background: #040816; color: #dbeeff; overflow: hidden; }
|
||
.scene {
|
||
isolation: isolate; position: relative; min-height: 100vh; overflow: hidden;
|
||
background: #07122a url("assets/space-nebula.png") center / cover no-repeat;
|
||
}
|
||
.scene::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 45% 54%, transparent 0 23%, rgba(3,8,23,.54) 72%); }
|
||
.grain { position: absolute; inset: 0; pointer-events: none; opacity: .22; background-image: radial-gradient(#fff 0.65px, transparent .75px); background-size: 31px 31px; mix-blend-mode: screen; }
|
||
header { position: absolute; inset: 0 0 auto; display: flex; align-items: flex-start; justify-content: space-between; padding: clamp(20px,4vw,54px); text-shadow: 0 2px 16px #01030b; }
|
||
.eyebrow { margin: 0 0 8px; color: #76eaff; font-size: 11px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
|
||
h1 { margin: 0; font-size: clamp(28px,5vw,70px); font-weight: 750; letter-spacing: -.055em; line-height: .92; }
|
||
.legend { padding: 11px 14px; border: 1px solid rgba(159,219,255,.28); border-radius: 999px; backdrop-filter: blur(10px); background: rgba(3,12,31,.4); color: #a9c7dd; font: 600 11px/1.2 ui-monospace, monospace; letter-spacing: .08em; }
|
||
.hud { position: absolute; left: clamp(20px,4vw,54px); bottom: clamp(20px,4vw,44px); max-width: 330px; padding: 18px; border-left: 2px solid #57dfff; background: linear-gradient(90deg,rgba(5,16,43,.78),transparent); }
|
||
.hud strong { display: block; margin-bottom: 6px; font-size: 13px; letter-spacing: .11em; text-transform: uppercase; }
|
||
.hud span { color: #aac4d9; font-size: 12px; line-height: 1.55; }
|
||
.fleet { position: absolute; inset: 13% 7% 8%; }
|
||
.ship { position: absolute; width: clamp(72px,12vw,180px); filter: drop-shadow(0 0 13px rgba(40,223,255,.55)); image-rendering: pixelated; transform-origin: center; animation: drift var(--duration, 9s) ease-in-out infinite alternate; }
|
||
.ship:hover { z-index: 4; filter: drop-shadow(0 0 24px #7cfcff); transform: scale(1.14); transition: transform .2s, filter .2s; }
|
||
.ship::after { content: ""; position: absolute; left: 43%; top: 78%; width: 14%; height: 45%; z-index: -1; opacity: .6; filter: blur(7px); background: linear-gradient(#7dffff,transparent); }
|
||
.flagship { --duration: 11s; left: 40%; top: 29%; width: clamp(135px,20vw,270px); animation-delay: -3s; }
|
||
.one { --duration: 8s; left: 9%; top: 35%; animation-delay: -5s; }
|
||
.two { --duration: 10s; right: 9%; top: 30%; animation-delay: -1s; }
|
||
.three { --duration: 9s; left: 22%; bottom: 7%; animation-delay: -7s; }
|
||
.four { --duration: 12s; right: 24%; bottom: 5%; animation-delay: -4s; }
|
||
.five { --duration: 7s; right: 3%; bottom: 31%; width: clamp(55px,8vw,112px); animation-delay: -2s; opacity: .82; }
|
||
.micro { width: 128px; image-rendering: pixelated; filter: drop-shadow(0 0 8px rgba(52,229,255,.58)); }
|
||
.micro-a { left: 7%; top: 12%; animation-delay: -1s; }
|
||
.micro-b { left: 27%; top: 14%; animation-delay: -6s; }
|
||
.micro-c { right: 21%; top: 12%; animation-delay: -3s; }
|
||
.micro-d { right: 2%; top: 51%; animation-delay: -8s; }
|
||
.callout { position: absolute; left: 54%; top: 25%; width: 175px; padding: 10px 12px; border: 1px solid rgba(99,231,255,.35); border-radius: 7px; background: rgba(4,16,39,.48); color: #d6f7ff; font: 700 10px/1.45 ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
|
||
.callout::before { content: ""; position: absolute; right: 100%; top: 50%; width: 13vw; border-top: 1px solid rgba(99,231,255,.45); }
|
||
.callout b { color: #68eaff; }
|
||
@keyframes drift { from { translate: 0 0; } to { translate: 0 -16px; } }
|
||
@media (max-width: 650px) { .fleet { inset: 18% 2% 10%; } .legend { display: none; } .callout { left: 48%; top: 42%; transform: scale(.72); transform-origin: left; } .hud { max-width: 230px; } }
|
||
@media (prefers-reduced-motion: reduce) { .ship { animation: none; } }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<main class="scene">
|
||
<div class="grain"></div>
|
||
<header>
|
||
<div><p class="eyebrow">Imagen · fleet catalogue</p><h1>Asterion Patrol</h1></div>
|
||
<div class="legend">SECTOR 04 · 12:00 FORMATION</div>
|
||
</header>
|
||
<section class="fleet" aria-label="Spacecraft formation">
|
||
<img class="ship flagship" src="output/spaceships/fleet_catalog_01.png" alt="Asterion vanguard">
|
||
<img class="ship one" src="output/spaceships/fleet_catalog_05.png" alt="Asterion escort">
|
||
<img class="ship two" src="output/spaceships/fleet_catalog_09.png" alt="Asterion corvette">
|
||
<img class="ship three" src="output/spaceships/fleet_catalog_13.png" alt="Asterion scout">
|
||
<img class="ship four" src="output/spaceships/fleet_catalog_17.png" alt="Asterion support ship">
|
||
<img class="ship five" src="output/spaceships/fleet_catalog_21.png" alt="Asterion tender">
|
||
<img class="ship micro micro-a" src="output/spaceships/fleet_catalog_25.png" alt="Asterion micro scout">
|
||
<img class="ship micro micro-b" src="output/spaceships/fleet_catalog_27.png" alt="Asterion micro interceptor">
|
||
<img class="ship micro micro-c" src="output/spaceships/fleet_catalog_29.png" alt="Asterion micro patrol ship">
|
||
<img class="ship micro micro-d" src="output/spaceships/fleet_catalog_31.png" alt="Asterion micro support ship">
|
||
<div class="callout"><b>Asterion-01</b><br>pixel-perfect vanguard<br><a href="fleet-glossary.html">open glossary →</a></div>
|
||
</section>
|
||
<aside class="hud"><strong>Fleet telemetry</strong><span>New 64×64 fleet catalogue. Every visible ship is from the latest pixel-perfect generation. Hover to inspect a silhouette.</span></aside>
|
||
</main>
|
||
</body>
|
||
</html>
|