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:
188
docs/design/handoff/sekai-template.html
Normal file
188
docs/design/handoff/sekai-template.html
Normal file
@@ -0,0 +1,188 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Sekai — service page template</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500;700&family=Space+Grotesk:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
/* ═══ Sekai — шаблон страницы сервиса ═══
|
||||
Заглушки для дизайнеров помечены классом .sk-ph (пунктир).
|
||||
Заменить: кандзи + имя сервиса в шапке, номер сервиса справа,
|
||||
кандзи + имя в футере. Контент кладётся в <main>. */
|
||||
*{box-sizing:border-box;margin:0;padding:0}
|
||||
html,body{background:#070912}
|
||||
::selection{background:rgba(143,214,220,.25)}
|
||||
|
||||
.sk-page{min-height:100vh;background:#070912;color:#F2ECE0;font-family:'Space Grotesk',sans-serif;
|
||||
position:relative;overflow:hidden;display:flex;flex-direction:column}
|
||||
.sk-layer{position:absolute;pointer-events:none;z-index:0}
|
||||
|
||||
/* — туманность — */
|
||||
.sk-mist{top:26%;left:-22%;width:150%;height:52%;filter:blur(34px);opacity:.72;
|
||||
animation:skNebula 46s ease-in-out infinite;
|
||||
background:
|
||||
radial-gradient(ellipse 42% 58% at 20% 60%, rgba(234,143,174,.20), transparent 70%),
|
||||
radial-gradient(ellipse 58% 46% at 48% 44%, rgba(232,78,138,.14), transparent 72%),
|
||||
radial-gradient(ellipse 38% 54% at 70% 57%, rgba(159,143,203,.17), transparent 70%),
|
||||
radial-gradient(ellipse 28% 40% at 88% 51%, rgba(143,214,220,.11), transparent 70%),
|
||||
radial-gradient(ellipse 52% 34% at 36% 62%, rgba(53,92,214,.11), transparent 72%)}
|
||||
.sk-core{top:44%;left:-15%;width:135%;height:14%;filter:blur(14px);opacity:.7;
|
||||
animation:skNebulaCore 58s ease-in-out infinite;
|
||||
background:
|
||||
radial-gradient(ellipse 20% 70% at 8% 71%, rgba(247,206,220,.22), transparent 70%),
|
||||
radial-gradient(ellipse 14% 90% at 22% 52%, rgba(242,236,224,.18), transparent 70%),
|
||||
radial-gradient(ellipse 18% 80% at 36% 48%, rgba(234,143,174,.22), transparent 72%),
|
||||
radial-gradient(ellipse 12% 100% at 48% 38%, rgba(247,206,220,.24), transparent 70%),
|
||||
radial-gradient(ellipse 16% 85% at 60% 43%, rgba(242,236,224,.17), transparent 72%),
|
||||
radial-gradient(ellipse 13% 75% at 72% 43%, rgba(234,143,174,.20), transparent 70%),
|
||||
radial-gradient(ellipse 18% 90% at 86% 55%, rgba(247,206,220,.18), transparent 72%),
|
||||
radial-gradient(ellipse 10% 60% at 94% 61%, rgba(143,214,220,.12), transparent 70%)}
|
||||
.sk-dust{top:44%;left:-15%;width:135%;height:14%;filter:blur(10px);opacity:.8;
|
||||
animation:skNebula 46s ease-in-out infinite;
|
||||
background:
|
||||
radial-gradient(ellipse 20% 38% at 16% 72%, rgba(7,9,18,.6), transparent 75%),
|
||||
radial-gradient(ellipse 28% 34% at 44% 55%, rgba(9,11,22,.55), transparent 75%),
|
||||
radial-gradient(ellipse 18% 38% at 70% 50%, rgba(7,9,18,.55), transparent 75%),
|
||||
radial-gradient(ellipse 14% 30% at 90% 68%, rgba(9,11,22,.5), transparent 75%)}
|
||||
.sk-stars{inset:0;overflow:hidden}
|
||||
.sk-band{top:44%;left:-15%;width:135%;height:14%;transform:rotate(-14deg)}
|
||||
|
||||
/* — сестринские планеты (другие сервисы) — */
|
||||
.sk-planets{inset:0}
|
||||
.sk-planet{position:absolute}
|
||||
.sk-planet .orb-x,.sk-planet .orb-y{display:flex;flex-direction:column;align-items:center;gap:9px}
|
||||
.sk-planet .dot{pointer-events:auto;border-radius:50%}
|
||||
.sk-planet .lbl{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.3em;color:#6B7099;
|
||||
white-space:nowrap;opacity:0;transition:opacity .4s}
|
||||
.sk-planet .dot:hover + .lbl{opacity:1}
|
||||
|
||||
.sk-planet--a{top:17%;left:7%}
|
||||
.sk-planet--a .orb-x{animation:skOrbXa 19s ease-in-out infinite}
|
||||
.sk-planet--a .orb-y{animation:skOrbYa 19s ease-in-out -4.75s infinite}
|
||||
.sk-planet--a .dot{width:15px;height:15px;background:radial-gradient(circle at 32% 28%,#F7CEDC,#EA8FAE 50%,#090B16 92%);box-shadow:0 0 10px rgba(234,143,174,.4)}
|
||||
|
||||
.sk-planet--b{top:26%;right:8%}
|
||||
.sk-planet--b .orb-x{animation:skOrbXb 27s ease-in-out infinite}
|
||||
.sk-planet--b .orb-y{animation:skOrbYb 27s ease-in-out -20.25s infinite}
|
||||
.sk-planet--b .dot{width:12px;height:12px;background:radial-gradient(circle at 32% 28%,#E84E8A,#C13E6A 52%,#090B16 92%);box-shadow:0 0 9px rgba(232,78,138,.4)}
|
||||
|
||||
.sk-planet--c{top:60%;left:4.5%}
|
||||
.sk-planet--c .orb-x{animation:skOrbXc 14s ease-in-out infinite}
|
||||
.sk-planet--c .orb-y{animation:skOrbYc 14s ease-in-out -3.5s infinite;gap:8px}
|
||||
.sk-planet--c .dot{width:9px;height:9px;background:radial-gradient(circle at 34% 30%,#9F8FCB,#4A4177 55%,#090B16 92%);box-shadow:0 0 8px rgba(159,143,203,.4)}
|
||||
|
||||
/* — каркас страницы — */
|
||||
.sk-header{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-start;padding:30px 44px 0 44px}
|
||||
.sk-logo{display:flex;align-items:baseline;gap:14px}
|
||||
.sk-main{position:relative;z-index:1;max-width:880px;width:100%;margin:0 auto;padding:72px 32px 100px 32px;flex:1}
|
||||
.sk-footer{position:relative;z-index:1;max-width:880px;width:100%;margin:0 auto;padding:22px 32px 36px 32px;
|
||||
border-top:1px solid rgba(174,180,214,.16);display:flex;justify-content:center;gap:8px;
|
||||
font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.3em;color:#6B7099}
|
||||
|
||||
/* — заглушки: заменить содержимым сервиса —
|
||||
Кандзи в шапке: Shippori Mincho 54px #F2ECE0, имя: Space Mono 13px .5em #6B7099 */
|
||||
.sk-ph{border-bottom:1px dashed rgba(174,180,214,.3);padding-bottom:2px}
|
||||
.sk-ph--kanji{display:flex;align-items:center;justify-content:center;width:54px;height:54px;
|
||||
border:1px dashed rgba(174,180,214,.3);border-radius:8px;
|
||||
font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.2em;color:#6B7099}
|
||||
.sk-ph--name{font-family:'Space Mono',monospace;font-size:13px;letter-spacing:.5em;color:#6B7099}
|
||||
.sk-ph--no{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.3em;color:#6B7099;margin-top:14px}
|
||||
|
||||
@keyframes skTwinkle{0%,100%{opacity:.15}50%{opacity:.75}}
|
||||
@keyframes skNebula{0%,100%{transform:rotate(-14deg) translateX(-2.5%)}50%{transform:rotate(-14deg) translateX(2.5%)}}
|
||||
@keyframes skNebulaCore{0%,100%{transform:rotate(-14deg) translateX(3%)}50%{transform:rotate(-14deg) translateX(-3%)}}
|
||||
@keyframes skOrbXa{0%,100%{transform:translateX(36px)}50%{transform:translateX(-36px)}}
|
||||
@keyframes skOrbYa{0%,100%{transform:translateY(13px)}50%{transform:translateY(-13px)}}
|
||||
@keyframes skOrbXb{0%,100%{transform:translateX(24px)}50%{transform:translateX(-24px)}}
|
||||
@keyframes skOrbYb{0%,100%{transform:translateY(22px)}50%{transform:translateY(-22px)}}
|
||||
@keyframes skOrbXc{0%,100%{transform:translateX(14px)}50%{transform:translateX(-14px)}}
|
||||
@keyframes skOrbYc{0%,100%{transform:translateY(28px)}50%{transform:translateY(-28px)}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="sk-page">
|
||||
<!-- атмосфера -->
|
||||
<div class="sk-layer sk-stars" data-sk-stars></div>
|
||||
<div class="sk-layer sk-mist"></div>
|
||||
<div class="sk-layer sk-core"></div>
|
||||
<div class="sk-layer sk-dust"></div>
|
||||
<div class="sk-layer sk-band" data-sk-band></div>
|
||||
|
||||
<!-- сестринские планеты: подписи видны при hover -->
|
||||
<div class="sk-layer sk-planets">
|
||||
<div class="sk-planet sk-planet--a"><div class="orb-x"><div class="orb-y"><div class="dot"></div><span class="lbl">YUME</span></div></div></div>
|
||||
<div class="sk-planet sk-planet--b"><div class="orb-x"><div class="orb-y"><div class="dot"></div><span class="lbl">MYAKU</span></div></div></div>
|
||||
<div class="sk-planet sk-planet--c"><div class="orb-x"><div class="orb-y"><div class="dot"></div><span class="lbl">KIOKU</span></div></div></div>
|
||||
</div>
|
||||
|
||||
<header class="sk-header">
|
||||
<div class="sk-logo">
|
||||
<!-- ЗАГЛУШКА: кандзи сервиса (Shippori Mincho 54px #F2ECE0) -->
|
||||
<span class="sk-ph--kanji">漢字</span>
|
||||
<!-- ЗАГЛУШКА: латинское имя сервиса -->
|
||||
<span class="sk-ph sk-ph--name">SERVICE NAME</span>
|
||||
</div>
|
||||
<!-- ЗАГЛУШКА: номер сервиса, напр. 04 -->
|
||||
<div class="sk-ph sk-ph--no">NO</div>
|
||||
</header>
|
||||
|
||||
<!-- контент сервиса сюда -->
|
||||
<main class="sk-main"></main>
|
||||
|
||||
<footer class="sk-footer">
|
||||
<!-- ЗАГЛУШКА: кандзи + имя сервиса -->
|
||||
<span class="sk-ph">漢字 SERVICE</span>
|
||||
<span>· 世界 SEKAI</span>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
function star(color, size, bright, x, y, dur, delay) {
|
||||
var s = document.createElement('div');
|
||||
s.style.cssText = 'position:absolute;border-radius:50%;' +
|
||||
'left:' + x + '%;top:' + y + '%;width:' + size + 'px;height:' + size + 'px;' +
|
||||
'background:' + color + ';' +
|
||||
(bright ? 'box-shadow:0 0 6px ' + color + ';' : '') +
|
||||
'animation:skTwinkle ' + dur + 's ease-in-out ' + delay + 's infinite';
|
||||
return s;
|
||||
}
|
||||
|
||||
// фоновые звёзды
|
||||
var sky = document.querySelector('[data-sk-stars]');
|
||||
for (var i = 0; i < 90; i++) {
|
||||
sky.appendChild(star(
|
||||
Math.random() < 0.2 ? '#8FD6DC' : '#F2ECE0',
|
||||
Math.random() < 0.85 ? 1.5 : 2.5, false,
|
||||
(Math.random() * 100).toFixed(2), (Math.random() * 100).toFixed(2),
|
||||
(3 + Math.random() * 5).toFixed(1), (-Math.random() * 8).toFixed(1)
|
||||
));
|
||||
}
|
||||
|
||||
// звёзды млечной полосы: гаусс вокруг дуги, левый край уходит ниже
|
||||
var band = document.querySelector('[data-sk-band]');
|
||||
for (var j = 0; j < 170; j++) {
|
||||
var bright = Math.random() < 0.08;
|
||||
var r = Math.random();
|
||||
var color = r < 0.68 ? '#F2ECE0' : (r < 0.88 ? '#F7CEDC' : '#8FD6DC');
|
||||
var g = (Math.random() + Math.random() + Math.random()) / 3;
|
||||
var x = Math.random() * 100;
|
||||
var arc = 28 * Math.pow((x - 50) / 50, 2) + Math.max(0, 35 - x) * 0.35;
|
||||
band.appendChild(star(
|
||||
color,
|
||||
bright ? 2.2 : (0.8 + Math.random() * 1.1).toFixed(1), bright,
|
||||
x.toFixed(2), (6 + g * 55 + arc).toFixed(2),
|
||||
(2.5 + Math.random() * 5).toFixed(1), (-Math.random() * 8).toFixed(1)
|
||||
));
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
<template id="__bundler_thumbnail">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect width="100" height="100" fill="#070912"/><ellipse cx="50" cy="55" rx="34" ry="9" fill="#EA8FAE" opacity=".3" transform="rotate(-14 50 55)"/><rect x="30" y="32" width="16" height="16" rx="3" fill="none" stroke="#6B7099" stroke-dasharray="3 3"/><rect x="52" y="38" width="20" height="4" rx="2" fill="none" stroke="#6B7099" stroke-dasharray="3 3"/><circle cx="72" cy="28" r="2" fill="#8FD6DC"/></svg>
|
||||
</template>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user