Nikita
c26a2cd7e4
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01BCrwHHnGCB5XH968Nxokqw
182 lines
12 KiB
HTML
182 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Sekai — планеты (компоненты)</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500;700&family=Space+Mono&display=swap" rel="stylesheet">
|
||
<style>
|
||
/* Sekai tokens (standalone) */
|
||
:root{
|
||
--bg:#070912; --ink-0:#090B16; --ink-1:#11152E; --ink-2:#1B2148; --ink-3:#2B3566;
|
||
--sakura:#F7CEDC; --nadeshiko:#EA8FAE; --tsutsuji:#E84E8A; --kobai:#C13E6A; --yamabuki:#F2B233;
|
||
--hanada:#1F7FC4; --ruri:#355CD6; --byakugun:#8FD6DC; --fuji:#9F8FCB;
|
||
--washi:#F2ECE0; --kasumi:#AEB4D6; --nibi:#6B7099;
|
||
--hair:rgba(174,180,214,0.16); --hair-2:rgba(174,180,214,0.30);
|
||
}
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
body{background:var(--bg);color:var(--washi);font-family:'Space Mono',monospace;min-height:100vh;padding:60px 40px}
|
||
@keyframes skFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
|
||
@keyframes skFloatSlow{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
|
||
@keyframes skSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
|
||
@keyframes skSpinBack{from{transform:rotate(360deg)}to{transform:rotate(0deg)}}
|
||
@keyframes skPulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.8;transform:scale(1.06)}}
|
||
@keyframes skEcho{0%{transform:scale(.55);opacity:.7}100%{transform:scale(1.5);opacity:0}}
|
||
|
||
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:40px;max-width:1240px;margin:0 auto}
|
||
.cell{border:1px solid var(--hair);border-radius:16px;background:var(--ink-1);padding:48px 24px 32px;display:flex;flex-direction:column;align-items:center;gap:40px}
|
||
.stage{width:260px;height:260px;position:relative}
|
||
.label{text-align:center}
|
||
.label .jp{font-family:'Shippori Mincho',serif;font-size:34px;color:var(--washi)}
|
||
.label .en{font-size:12px;letter-spacing:.4em;color:var(--kasumi);margin-top:6px}
|
||
.label .meta{font-size:11px;letter-spacing:.2em;color:var(--nibi);margin-top:10px}
|
||
|
||
/* общие части планеты */
|
||
.planet{width:100%;height:100%;border-radius:50%}
|
||
.ring{position:absolute;border:1px solid var(--hair);border-radius:50%}
|
||
.sat-orbit{position:absolute;pointer-events:none}
|
||
.sat-spin{width:100%;height:100%}
|
||
.sat{position:absolute;top:0;left:50%}
|
||
.glow{position:absolute;inset:0;border-radius:50%;pointer-events:none}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div style="max-width:1240px;margin:0 auto 40px">
|
||
<div style="font-family:'Shippori Mincho',serif;font-size:28px">世界 · Планеты</div>
|
||
<div style="font-size:12px;letter-spacing:.2em;color:var(--nibi);margin-top:8px">5 ПЛАНЕТ ЭКОСИСТЕМЫ · КАЖДЫЙ БЛОК — АВТОНОМНЫЙ, КОПИРУЕТСЯ ЦЕЛИКОМ</div>
|
||
</div>
|
||
|
||
<div class="grid">
|
||
|
||
<!-- ═══════ 01 · MYAKU 脈 — финансы (tsutsuji/kobai + золотая монета) ═══════ -->
|
||
<div class="cell">
|
||
<div class="stage">
|
||
<div class="ring" style="inset:-14%;transform:rotateX(68deg)"></div>
|
||
<div class="ring" style="inset:-26%;border-style:dashed;transform:rotateX(68deg);animation:skSpinBack 44s linear infinite"></div>
|
||
<div class="planet" style="background:radial-gradient(circle at 32% 28%, var(--tsutsuji), var(--kobai) 52%, var(--ink-0) 92%);box-shadow:0 0 70px rgba(232,78,138,.30), inset -22px -26px 60px rgba(9,11,22,.85);animation:skFloat 7s ease-in-out infinite"></div>
|
||
<div class="glow" style="box-shadow:0 0 46px rgba(232,78,138,.35);animation:skPulse 3.2s ease-in-out infinite"></div>
|
||
<!-- спутник: золотая монета -->
|
||
<div class="sat-orbit" style="inset:-14%;transform:rotateX(68deg)">
|
||
<div class="sat-spin" style="animation:skSpin 12s linear infinite">
|
||
<div class="sat" style="width:12px;height:12px;border-radius:50%;background:var(--yamabuki);box-shadow:0 0 14px rgba(242,178,51,.7);transform:translate(-50%,-50%) rotateX(-68deg)"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="label">
|
||
<div class="jp">脈</div>
|
||
<div class="en">MYAKU · ФИНАНСЫ</div>
|
||
<div class="meta">01 · 脈拍安定 · СПУТНИК: МОНЕТА --yamabuki</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══════ 02 · KIOKU 記憶 — документы (fuji + кристалл) ═══════ -->
|
||
<div class="cell">
|
||
<div class="stage">
|
||
<div class="ring" style="inset:-18%;transform:rotateX(72deg) rotateZ(-12deg)"></div>
|
||
<div class="planet" style="background:radial-gradient(circle at 34% 30%, var(--fuji), #4A4177 55%, var(--ink-0) 92%);box-shadow:0 0 60px rgba(159,143,203,.25), inset -22px -26px 60px rgba(9,11,22,.85);animation:skFloatSlow 9s ease-in-out infinite"></div>
|
||
<!-- осколки памяти -->
|
||
<div style="position:absolute;top:6%;right:-6%;width:14px;height:14px;background:var(--fuji);opacity:.7;transform:rotate(45deg);animation:skFloat 6s ease-in-out infinite"></div>
|
||
<div style="position:absolute;bottom:14%;left:-9%;width:9px;height:9px;background:var(--fuji);opacity:.45;transform:rotate(45deg);animation:skFloatSlow 8s ease-in-out infinite"></div>
|
||
<!-- спутник: кристалл памяти -->
|
||
<div class="sat-orbit" style="inset:-18%;transform:rotateX(72deg) rotateZ(-12deg)">
|
||
<div class="sat-spin" style="animation:skSpinBack 20s linear infinite">
|
||
<div class="sat" style="width:9px;height:9px;background:var(--fuji);box-shadow:0 0 12px rgba(159,143,203,.7);transform:translate(-50%,-50%) rotateX(-72deg) rotate(45deg)"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="label">
|
||
<div class="jp">記憶</div>
|
||
<div class="en">KIOKU · ПАМЯТЬ</div>
|
||
<div class="meta">02 · 記憶保存 · СПУТНИК: КРИСТАЛЛ --fuji</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══════ 03 · YUME 夢 — манга (sakura/nadeshiko + лепесток) ═══════ -->
|
||
<div class="cell">
|
||
<div class="stage">
|
||
<div class="ring" style="inset:-16%;transform:rotateX(66deg) rotateZ(10deg)"></div>
|
||
<div class="planet" style="background:radial-gradient(circle at 30% 26%, var(--sakura), var(--nadeshiko) 48%, var(--ink-0) 94%);box-shadow:0 0 60px rgba(234,143,174,.28), inset -22px -26px 60px rgba(9,11,22,.8);animation:skFloat 8s ease-in-out infinite"></div>
|
||
<!-- лепестки -->
|
||
<div style="position:absolute;top:-4%;left:12%;width:10px;height:10px;border-radius:50% 0 50% 50%;background:var(--sakura);opacity:.8;animation:skFloatSlow 5s ease-in-out infinite"></div>
|
||
<div style="position:absolute;bottom:4%;right:-4%;width:8px;height:8px;border-radius:50% 0 50% 50%;background:var(--nadeshiko);opacity:.6;animation:skFloat 7s ease-in-out infinite"></div>
|
||
<!-- спутник: лепесток -->
|
||
<div class="sat-orbit" style="inset:-16%;transform:rotateX(66deg) rotateZ(10deg)">
|
||
<div class="sat-spin" style="animation:skSpin 16s linear infinite">
|
||
<div class="sat" style="width:11px;height:11px;border-radius:50% 0 50% 50%;background:var(--sakura);box-shadow:0 0 12px rgba(247,206,220,.6);transform:translate(-50%,-50%) rotateX(-66deg)"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="label">
|
||
<div class="jp">夢</div>
|
||
<div class="en">YUME · СОН</div>
|
||
<div class="meta">03 · 夢降下中 · СПУТНИК: ЛЕПЕСТОК --sakura</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══════ 04 · FUMI 文 — транскрибация (byakugun/hanada + лёд и капля) ═══════ -->
|
||
<div class="cell">
|
||
<div class="stage">
|
||
<div class="ring" style="inset:-15%;transform:rotateX(70deg)"></div>
|
||
<div class="ring" style="inset:-28%;border-style:dashed;transform:rotateX(70deg) rotateZ(16deg);animation:skSpinBack 52s linear infinite"></div>
|
||
<div class="planet" style="background:radial-gradient(circle at 32% 28%, var(--byakugun), var(--hanada) 50%, var(--ink-0) 93%);box-shadow:0 0 60px rgba(31,127,196,.30), inset -22px -26px 60px rgba(9,11,22,.85);animation:skFloatSlow 8.5s ease-in-out infinite"></div>
|
||
<div class="glow" style="box-shadow:0 0 40px rgba(143,214,220,.28);animation:skPulse 4.4s ease-in-out infinite"></div>
|
||
<!-- спутник 1: льдинка -->
|
||
<div class="sat-orbit" style="inset:-15%;transform:rotateX(70deg)">
|
||
<div class="sat-spin" style="animation:skSpin 14s linear infinite">
|
||
<div class="sat" style="width:10px;height:10px;border-radius:50%;background:var(--byakugun);box-shadow:0 0 14px rgba(143,214,220,.75);transform:translate(-50%,-50%) rotateX(-70deg)"></div>
|
||
</div>
|
||
</div>
|
||
<!-- спутник 2: капля на внешней орбите -->
|
||
<div class="sat-orbit" style="inset:-28%;transform:rotateX(70deg) rotateZ(16deg)">
|
||
<div class="sat-spin" style="animation:skSpinBack 26s linear infinite">
|
||
<div class="sat" style="width:7px;height:7px;border-radius:50%;background:var(--hanada);box-shadow:0 0 10px rgba(31,127,196,.7);transform:translate(-50%,-50%) rotateX(-70deg)"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="label">
|
||
<div class="jp">文</div>
|
||
<div class="en">FUMI · ПИСЬМО</div>
|
||
<div class="meta">04 · 文字変換 · СПУТНИКИ: ЛЁД --byakugun + КАПЛЯ --hanada</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- ═══════ 05 · HADO 波動 — напоминания (hanada/ruri + сигнал и эхо) ═══════ -->
|
||
<div class="cell">
|
||
<div class="stage">
|
||
<div class="ring" style="inset:-15%;transform:rotateX(69deg)"></div>
|
||
<div class="ring" style="inset:-27%;border-style:dashed;transform:rotateX(69deg) rotateZ(-8deg);animation:skSpinBack 48s linear infinite"></div>
|
||
<!-- эхо: волна напоминания расходится и возвращается -->
|
||
<div style="position:absolute;inset:-6%;border:1px solid rgba(143,214,220,.45);border-radius:50%;animation:skEcho 4.2s ease-out infinite"></div>
|
||
<div style="position:absolute;inset:-6%;border:1px solid rgba(53,92,214,.5);border-radius:50%;animation:skEcho 4.2s ease-out 2.1s infinite"></div>
|
||
<div class="planet" style="background:radial-gradient(circle at 32% 28%, var(--ruri), #24337F 55%, var(--ink-0) 92%);box-shadow:0 0 70px rgba(53,92,214,.35), inset -22px -26px 60px rgba(9,11,22,.85);animation:skFloat 7.5s ease-in-out infinite"></div>
|
||
<div class="glow" style="box-shadow:0 0 46px rgba(53,92,214,.4);animation:skPulse 2.6s ease-in-out infinite"></div>
|
||
<!-- спутник 1: сигнал -->
|
||
<div class="sat-orbit" style="inset:-15%;transform:rotateX(69deg)">
|
||
<div class="sat-spin" style="animation:skSpin 13s linear infinite">
|
||
<div class="sat" style="width:10px;height:10px;border-radius:50%;background:var(--byakugun);box-shadow:0 0 14px rgba(143,214,220,.75);transform:translate(-50%,-50%) rotateX(-69deg)"></div>
|
||
</div>
|
||
</div>
|
||
<!-- спутник 2: эхо возвращается по внешней орбите -->
|
||
<div class="sat-orbit" style="inset:-27%;transform:rotateX(69deg) rotateZ(-8deg)">
|
||
<div class="sat-spin" style="animation:skSpinBack 30s linear infinite">
|
||
<div class="sat" style="width:7px;height:7px;border-radius:50%;background:var(--ruri);box-shadow:0 0 10px rgba(53,92,214,.8);transform:translate(-50%,-50%) rotateX(-69deg)"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="label">
|
||
<div class="jp">波動</div>
|
||
<div class="en">HADO · НАПОМИНАНИЯ</div>
|
||
<div class="meta">05 · 波動共鳴 · СПУТНИКИ: СИГНАЛ --byakugun + ЭХО --ruri</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div style="max-width:1240px;margin:48px auto 0;font-size:11px;letter-spacing:.15em;color:var(--nibi);line-height:2">
|
||
МИНИ-ВЕРСИЯ (ДЛЯ НАВИГАЦИИ): КРУГ 11PX С ТЕМ ЖЕ RADIAL-GRADIENT + BOX-SHADOW 0 0 8PX АКЦЕНТА .45<br>
|
||
НОВАЯ ПЛАНЕТА = СВОЙ АКЦЕНТ ИЗ ПАЛИТРЫ → ГРАДИЕНТ «АКЦЕНТ → ТЁМНЫЙ АКЦЕНТ → --ink-0 НА ~92%» + КОЛЬЦО rotateX(66–72°) + 1–2 СПУТНИКА-МЕТАФОРЫ
|
||
</div>
|
||
</body>
|
||
</html>
|