german/Heritage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Heritage: лендинг, единый дизайн приложения и фронтенда, обновлённый README

Browse Source
This commit is contained in:
german
2026-06-28 04:26:18 +03:00
parent 638778e807
commit aca0a5c905
18 changed files with 3034 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
preview/index.html
+43 -37
View File
@@ -4,41 +4,47 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Родословное дерево семьи — превью</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600&family=Spectral:wght@300;400;500;600&family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--bg: #f5f6f8;
--panel: #ffffff;
--panel-2: #f0f2f5;
--text: #1c2230;
--muted: #687087;
--border: #dfe3ea;
--accent: #4f6df5;
--male: #4f8ff5;
--male-bg: #e8f1ff;
--female: #e06aa3;
--female-bg: #ffe9f3;
--shadow: 0 4px 20px rgba(20,30,60,.08);
--node-shadow: 0 2px 6px rgba(20,30,60,.10);
--bg: #F3ECDD;
--panel: #FBF7EC;
--panel-2: #EFE6D2;
--text: #231B12;
--muted: #6B5E4C;
--border: #DCCFB4;
--accent: #7E3B2D;
--male: #3F6F6F;
--male-bg: #E5EAE7;
--female: #9C5A6F;
--female-bg: #F0E2E5;
--shadow: 0 10px 34px -18px rgba(35,27,18,.40);
--node-shadow: 0 2px 10px -3px rgba(35,27,18,.28);
--serif: 'Playfair Display', Georgia, serif;
--body: 'Spectral', Georgia, serif;
--sans: 'Manrope', system-ui, sans-serif;
}
html[data-theme="dark"] {
--bg: #0f1320;
--panel: #171c2b;
--panel-2: #1f2536;
--text: #e6e9f2;
--muted: #97a0b8;
--border: #2a3145;
--accent: #6d86ff;
--male: #5a93ff;
--male-bg: #16263f;
--female: #ff85bd;
--female-bg: #361927;
--shadow: 0 6px 28px rgba(0,0,0,.45);
--node-shadow: 0 2px 8px rgba(0,0,0,.45);
--bg: #1C160E;
--panel: #2B2216;
--panel-2: #33291A;
--text: #EDE4D2;
--muted: #A99E88;
--border: #473A26;
--accent: #C9A05E;
--male: #6FA3A0;
--male-bg: #21302E;
--female: #C98AA0;
--female-bg: #321F27;
--shadow: 0 14px 40px -18px rgba(0,0,0,.6);
--node-shadow: 0 3px 12px -3px rgba(0,0,0,.55);
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-family: var(--sans);
background: var(--bg); color: var(--text);
display: flex; flex-direction: column; overflow: hidden;
transition: background .25s, color .25s;
@@ -48,11 +54,11 @@
background: var(--panel); border-bottom: 1px solid var(--border);
box-shadow: var(--shadow); z-index: 20; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-weight: 500; font-size: 19px; letter-spacing: .01em; }
.brand .logo {
width: 30px; height: 30px; border-radius: 9px;
background: linear-gradient(135deg, var(--accent), #9d7bff);
display: grid; place-items: center; color: #fff; font-size: 16px;
width: 30px; height: 30px; border-radius: 8px;
background: linear-gradient(135deg, var(--accent), var(--gold, #A9854C));
display: grid; place-items: center; color: #F3ECDD; font-size: 15px;
}
.spacer { flex: 1; }
.search { position: relative; }
@@ -154,7 +160,7 @@
width: 92px; height: 92px; border-radius: 18px; flex: none; display: grid; place-items: center;
font-size: 32px; font-weight: 700; color: #fff;
}
.modal h2 { margin: 0 0 4px; font-size: 22px; }
.modal h2 { margin: 0 0 4px; font-size: 24px; font-family: var(--serif); font-weight: 500; }
.modal .sub { color: var(--muted); font-size: 14px; }
.modal .close { position: absolute; right: 16px; top: 16px; border: none; background: var(--panel-2); width: 34px; height: 34px; border-radius: 9px; cursor: pointer; color: var(--text); font-size: 18px; }
.modal .body { padding: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@@ -198,7 +204,7 @@
</head>
<body>
<header>
<div class="brand"><div class="logo">🌳</div><span class="t">Родословное дерево</span></div>
<a class="brand" href="../landing/index.html" style="text-decoration:none;color:inherit" title="На главную"><div class="logo">H</div><span class="t">Heritage · Древо</span></a>
<div class="search">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
<input id="searchInput" placeholder="Поиск по имени или фамилии…" autocomplete="off" />
@@ -238,9 +244,9 @@
</div>
<div class="label">Цвета лучей</div>
<div style="padding:4px 14px 8px;display:grid;grid-template-columns:1fr auto;gap:8px 6px;align-items:center;font-size:13px">
<span>Родители — дети</span><input type="color" data-color="parent" value="#7c8aa5">
<span>Супруги</span><input type="color" data-color="spouse" value="#c9a14a">
<span>Усыновление</span><input type="color" data-color="adopt" value="#e06aa3">
<span>Родители — дети</span><input type="color" data-color="parent" value="#8A7B63">
<span>Супруги</span><input type="color" data-color="spouse" value="#A9854C">
<span>Усыновление</span><input type="color" data-color="adopt" value="#9C5A6F">
</div>
<div class="sep"></div>
<button data-act-viz="expand">▽ Развернуть все ветки</button>
@@ -308,7 +314,7 @@ let collapsed = new Set();
const settings = {
orientation: "vertical", // vertical | horizontal
edgeStyle: "ortho", // straight | ortho (примагниченные) | curve
colors: { parent:"#7c8aa5", spouse:"#c9a14a", adopt:"#e06aa3" }
colors: { parent:"#8A7B63", spouse:"#A9854C", adopt:"#9C5A6F" }
};
function fullName(p){ return [p.lastName, p.firstName, p.middleName].filter(Boolean).join(" "); }