docs: design handoff, manual events and archive in plan, spec and functional doc
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01BCrwHHnGCB5XH968Nxokqw
This commit is contained in:
61
docs/design/handoff/hado-planet.dc.html
Normal file
61
docs/design/handoff/hado-planet.dc.html
Normal file
@@ -0,0 +1,61 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500;700&family=Space+Mono&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
: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}html,body{margin:0;padding:0;background:var(--bg)}
|
||||
a{color:var(--byakugun)}a:hover{color:var(--washi)}
|
||||
@keyframes skFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
|
||||
@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:.85;transform:scale(1.06)}}
|
||||
@keyframes skEcho{0%{transform:scale(.55);opacity:.7}100%{transform:scale(1.5);opacity:0}}
|
||||
</style>
|
||||
</helmet>
|
||||
<div style="min-height:100vh;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:60px 24px;font-family:'Space Mono',monospace">
|
||||
<div style="border:1px solid var(--hair);border-radius:16px;background:var(--ink-1);padding:48px 32px 32px 32px;display:flex;flex-direction:column;align-items:center;gap:40px;max-width:460px;width:100%">
|
||||
<div style="width:260px;height:260px;position:relative">
|
||||
<div style="position:absolute;inset:-15%;border:1px solid var(--hair);border-radius:50%;transform:rotateX(69deg)"></div>
|
||||
<div style="position:absolute;inset:-27%;border:1px dashed var(--hair);border-radius:50%;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 style="width:100%;height:100%;border-radius:50%;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 style="position:absolute;inset:0;border-radius:50%;pointer-events:none;box-shadow:0 0 46px rgba(53,92,214,.4);animation:skPulse 2.6s ease-in-out infinite"></div>
|
||||
<!-- спутник 1: сигнал -->
|
||||
<div style="position:absolute;inset:-15%;transform:rotateX(69deg);pointer-events:none">
|
||||
<div style="width:100%;height:100%;animation:skSpin 13s linear infinite">
|
||||
<div style="position:absolute;top:0;left:50%;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 style="position:absolute;inset:-27%;transform:rotateX(69deg) rotateZ(-8deg);pointer-events:none">
|
||||
<div style="width:100%;height:100%;animation:skSpinBack 30s linear infinite">
|
||||
<div style="position:absolute;top:0;left:50%;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 style="text-align:center">
|
||||
<div style="font-family:'Shippori Mincho',serif;font-size:34px;color:var(--washi)">波動</div>
|
||||
<div style="font-size:12px;letter-spacing:.4em;color:var(--kasumi);margin-top:6px">HADO · НАПОМИНАНИЯ</div>
|
||||
<div style="font-size:11px;letter-spacing:.2em;color:var(--nibi);margin-top:10px">05 · 波動共鳴 · СПУТНИКИ: СИГНАЛ --byakugun + ЭХО --ruri</div>
|
||||
<div style="display:flex;align-items:center;justify-content:center;gap:10px;margin-top:16px">
|
||||
<span style="width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 32% 28%, var(--ruri), #24337F 55%, var(--ink-0) 92%);box-shadow:0 0 8px rgba(53,92,214,.45)"></span>
|
||||
<span style="font-size:10px;letter-spacing:.25em;color:var(--nibi)">МИНИ-ВЕРСИЯ ДЛЯ НАВИГАЦИИ</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{"$preview":{"width":560,"height":640}}"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user