Переделаны истории
This commit is contained in:
Халимов Рустам
@@ -0,0 +1,205 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="ru"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"surface-bright": "#3a3939",
|
||||
"secondary-fixed-dim": "#adc6ff",
|
||||
"on-surface-variant": "#c1c6d7",
|
||||
"on-surface": "#e5e2e1",
|
||||
"tertiary": "#ffb595",
|
||||
"surface-container": "#201f1f",
|
||||
"tertiary-fixed-dim": "#ffb595",
|
||||
"surface-dim": "#131313",
|
||||
"on-primary-fixed-variant": "#004493",
|
||||
"on-background": "#e5e2e1",
|
||||
"primary-container": "#4b8eff",
|
||||
"surface": "#131313",
|
||||
"on-tertiary-fixed-variant": "#7c2e00",
|
||||
"on-primary-container": "#00285c",
|
||||
"surface-tint": "#adc6ff",
|
||||
"secondary": "#adc6ff",
|
||||
"on-secondary-fixed": "#001a41",
|
||||
"inverse-on-surface": "#313030",
|
||||
"primary-fixed": "#d8e2ff",
|
||||
"on-tertiary": "#571e00",
|
||||
"error-container": "#93000a",
|
||||
"primary-fixed-dim": "#adc6ff",
|
||||
"surface-variant": "#353534",
|
||||
"tertiary-container": "#ef6719",
|
||||
"tertiary-fixed": "#ffdbcc",
|
||||
"on-secondary-fixed-variant": "#26467d",
|
||||
"error": "#ffb4ab",
|
||||
"surface-container-lowest": "#0e0e0e",
|
||||
"surface-container-low": "#1c1b1b",
|
||||
"on-tertiary-container": "#4c1a00",
|
||||
"surface-container-high": "#2a2a2a",
|
||||
"on-error": "#690005",
|
||||
"on-primary-fixed": "#001a41",
|
||||
"background": "#131313",
|
||||
"primary": "#adc6ff",
|
||||
"on-error-container": "#ffdad6",
|
||||
"inverse-surface": "#e5e2e1",
|
||||
"inverse-primary": "#005bc1",
|
||||
"on-primary": "#002e69",
|
||||
"on-tertiary-fixed": "#351000",
|
||||
"outline-variant": "#414755",
|
||||
"on-secondary-container": "#98b5f3",
|
||||
"secondary-container": "#26467d",
|
||||
"on-secondary": "#082f65",
|
||||
"secondary-fixed": "#d8e2ff",
|
||||
"outline": "#8b90a0",
|
||||
"surface-container-highest": "#353534"
|
||||
},
|
||||
fontFamily: {
|
||||
"headline": ["Inter"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
},
|
||||
borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.perspective-1000 { perspective: 1000px; }
|
||||
.glass-panel { background: rgba(14, 14, 14, 0.85); backdrop-filter: blur(24px); }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface-container-lowest text-on-surface font-body selection:bg-primary/30">
|
||||
<!-- Main App Background Shell (SideNavBar included as layout anchor) -->
|
||||
<div class="flex min-h-screen">
|
||||
<!-- Side Navigation (Shared Component Integration) -->
|
||||
<aside class="h-screen w-72 flex flex-col fixed left-0 top-0 bg-[#1C1B1B] border-r border-[#C1C6D7]/15 py-8 px-4 z-0 opacity-40 blur-sm pointer-events-none">
|
||||
<div class="mb-12">
|
||||
<h1 class="text-2xl font-black text-[#ADC6FF] tracking-tighter">Knot</h1>
|
||||
<p class="text-[0.7rem] text-[#C1C6D7] opacity-60">Digital Sovereignty</p>
|
||||
</div>
|
||||
<nav class="flex-1 space-y-2">
|
||||
<div class="flex items-center gap-4 px-4 py-3 rounded-xl text-[#C1C6D7] opacity-70">
|
||||
<span class="material-symbols-outlined" data-icon="chat">chat</span>
|
||||
<span class="font-medium">Messages</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 px-4 py-3 rounded-xl text-[#ADC6FF] font-bold border-r-4 border-[#ADC6FF] bg-[#2A2A2A]">
|
||||
<span class="material-symbols-outlined" data-icon="motion_photos_on">motion_photos_on</span>
|
||||
<span class="font-medium">Stories</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 px-4 py-3 rounded-xl text-[#C1C6D7] opacity-70">
|
||||
<span class="material-symbols-outlined" data-icon="group">group</span>
|
||||
<span class="font-medium">Contacts</span>
|
||||
</div>
|
||||
</nav>
|
||||
</aside>
|
||||
<!-- Fullscreen Story Player Overlay -->
|
||||
<main class="fixed inset-0 z-50 flex items-center justify-center glass-panel">
|
||||
<!-- Close Button (Top Right) -->
|
||||
<button class="absolute top-8 right-12 p-3 rounded-full bg-surface-container-high text-on-surface hover:bg-surface-variant transition-all active:scale-95">
|
||||
<span class="material-symbols-outlined text-3xl" data-icon="close">close</span>
|
||||
</button>
|
||||
<!-- Navigation Controls (Desktop Sides) -->
|
||||
<div class="absolute inset-y-0 left-0 w-1/4 flex items-center justify-start pl-12 group cursor-pointer">
|
||||
<button class="p-5 rounded-2xl bg-surface-container-high/40 text-on-surface opacity-0 group-hover:opacity-100 transition-all hover:bg-surface-container-high active:scale-90">
|
||||
<span class="material-symbols-outlined text-4xl" data-icon="arrow_back_ios">arrow_back_ios</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-y-0 right-0 w-1/4 flex items-center justify-end pr-12 group cursor-pointer">
|
||||
<button class="p-5 rounded-2xl bg-surface-container-high/40 text-on-surface opacity-0 group-hover:opacity-100 transition-all hover:bg-surface-container-high active:scale-90">
|
||||
<span class="material-symbols-outlined text-4xl" data-icon="arrow_forward_ios">arrow_forward_ios</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Content Area: The Knot Square Player -->
|
||||
<div class="relative w-[500px] h-[500px] md:w-[600px] md:h-[600px] bg-surface-container shadow-[0px_40px_80px_rgba(0,0,0,0.6)] overflow-hidden rounded-[20px] ring-1 ring-white/10 flex flex-col group">
|
||||
<!-- Progress Bars (Top Layer) -->
|
||||
<div class="absolute top-4 inset-x-4 flex gap-1.5 z-20">
|
||||
<div class="h-1 flex-1 bg-white/20 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-white w-full rounded-full"></div>
|
||||
</div>
|
||||
<div class="h-1 flex-1 bg-white/20 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-white w-3/4 rounded-full"></div>
|
||||
</div>
|
||||
<div class="h-1 flex-1 bg-white/10 rounded-full overflow-hidden"></div>
|
||||
<div class="h-1 flex-1 bg-white/10 rounded-full overflow-hidden"></div>
|
||||
</div>
|
||||
<!-- Story Header -->
|
||||
<div class="absolute top-8 inset-x-4 flex items-center justify-between z-20">
|
||||
<div class="flex items-center gap-3">
|
||||
<img alt="Profile avatar" class="w-10 h-10 rounded-[20px] object-cover ring-2 ring-primary/30" data-alt="Close-up portrait of a man with short dark hair and a slight smile against a blurred dark studio background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBkanT9_jEOf4CZE2X2_eEqC_GCp6fxbUz1F9qIZ6ieQzdWNBeSj3XCj22GVDUWbv48Ld2e8JVrnaBW4Yz4aV_46fgnC-UEGl9L3f9g46k-TnfY54bmw1BcM1PXXbykyWJiT-I-pScJrA7zIravdSzlI23Sq3DjFoPIHV5DsdNyhoFqfdrAtdlXzHoYYLwihGxW4f1MsXsH94QZbvrUlNaEJoFhJ5nat50tL-6SQXtfsqyRTrlToNi69MoHlfFQ0B2tBe9tKDd79mg"/>
|
||||
<div>
|
||||
<p class="font-bold text-on-surface text-sm tracking-tight">Александр Волков</p>
|
||||
<p class="text-[0.7rem] text-on-surface/60 font-medium uppercase tracking-wider">3 часа назад</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="p-2 text-white/80 hover:text-white">
|
||||
<span class="material-symbols-outlined" data-icon="more_horiz">more_horiz</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Main Story Media (The Visual) -->
|
||||
<div class="relative flex-1 bg-surface-container-low overflow-hidden">
|
||||
<img alt="Story content" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" data-alt="Modern minimalist interior with a futuristic holographic display showing neon blue nodes and connections in a dark room" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDGBGK-rh8MQ9BriB35jlOb5GFNScnDFvB_0urQZVOblRrbvIC0ZKakNtHM37Mj6MNFej-P8fAhVBvh1lz6dAYHRjhAIyZzy2GTQbVAqR9US98IxnBkKfwYFquHmbZdHlb_LzWSjiNTYIzs6KPy7cax60U58D5DBXx1QcSYLBgSM0ecfwUv5Afo-73hoKHdRHUCmWUsHa_zlsq9FHoYGPgPgLF4wq4cTksT3a6NH-cWkMWHcqGb27vW-qK7GGETowz7HfsTePDzPpQ"/>
|
||||
<!-- Decorative Radial Gradient for Legibility -->
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-black/60 pointer-events-none"></div>
|
||||
</div>
|
||||
<!-- Interaction Layer (Bottom) -->
|
||||
<div class="absolute bottom-0 inset-x-0 p-6 space-y-6 z-20 translate-y-4 group-hover:translate-y-0 transition-transform duration-300">
|
||||
<!-- Reactions -->
|
||||
<div class="flex items-center justify-center gap-4">
|
||||
<button class="w-10 h-10 flex items-center justify-center bg-surface-container-high/60 backdrop-blur-md rounded-xl hover:scale-125 transition-transform">🔥</button>
|
||||
<button class="w-10 h-10 flex items-center justify-center bg-surface-container-high/60 backdrop-blur-md rounded-xl hover:scale-125 transition-transform">❤️</button>
|
||||
<button class="w-10 h-10 flex items-center justify-center bg-surface-container-high/60 backdrop-blur-md rounded-xl hover:scale-125 transition-transform">😂</button>
|
||||
<button class="w-10 h-10 flex items-center justify-center bg-surface-container-high/60 backdrop-blur-md rounded-xl hover:scale-125 transition-transform">😮</button>
|
||||
<button class="w-10 h-10 flex items-center justify-center bg-surface-container-high/60 backdrop-blur-md rounded-xl hover:scale-125 transition-transform">🙌</button>
|
||||
</div>
|
||||
<!-- Quick Reply Input -->
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="relative flex-1">
|
||||
<input class="w-full bg-white/10 border-none rounded-xl px-4 py-3.5 text-sm text-white placeholder:text-white/40 focus:ring-1 focus:ring-primary/50 focus:bg-white/15 transition-all" placeholder="Ответить на историю..." type="text"/>
|
||||
</div>
|
||||
<button class="w-12 h-12 flex items-center justify-center bg-primary text-on-primary rounded-xl hover:opacity-90 active:scale-95 transition-all shadow-lg shadow-primary/20">
|
||||
<span class="material-symbols-outlined" data-icon="send">send</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Content Context (Right Side Panel - Web View Only) -->
|
||||
<div class="hidden xl:flex flex-col ml-8 w-80 space-y-4">
|
||||
<div class="p-6 rounded-[20px] bg-surface-container-low border border-white/5 space-y-4">
|
||||
<h3 class="text-sm font-bold text-on-surface uppercase tracking-widest opacity-40">Сейчас смотрят</h3>
|
||||
<div class="flex -space-x-2">
|
||||
<img alt="Viewer" class="w-8 h-8 rounded-[12px] ring-2 ring-surface-container-low object-cover" data-alt="Close-up portrait of a person with a leather jacket in an urban setting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDTekzRVh2HmWzQkGUZFqD7B1bZbRQi1lFexN5HzQGfMBYtAS1ABwcx0kcMAOS3XPQbs3z4zyqvgf_HsNQQTgBKVfqQpQEVBje7nDG0x-2ivLz8C70JH2RRccBkRx7lNocyYifmcX_kqKl9ZCC4xzG8UB5kRMQYMSGrQ_dqCd95scLE0Q2fJUH5o45YgNqtDPGr0ZP_8OKJYVCneimZ6N7XdGskRgzRGGt53Io367reKHBX6VmBXTNzrNdDcg89sxSu9qJJTY4E8Rs"/>
|
||||
<img alt="Viewer" class="w-8 h-8 rounded-[12px] ring-2 ring-surface-container-low object-cover" data-alt="Smiling woman with dark hair in a bright studio lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBQlRr2eU6Xnu1SUNz3TJxqXRHegiZAFT28ihtFKAz_JHcfGEuyz7IcTIHZrre_O-mwcNWF-tuQ8BGSkj5xVE81ZJRCMnh_cvf-EELAT7tNgyOnStLIYvPmsTP6WftQiOVCxlhRcbTmC9H5TvTYJU2EgIOvyQ8gff8CUM9QlwW7moMoDzvxbB-qX4kz7bHuV5BAstO2IENT9CGTGpzaZnovFYdee7BjwmtRkUwFTZCMQg4ppsw7IDccN2F05DEKNqL0StFIxeBsbhQ"/>
|
||||
<img alt="Viewer" class="w-8 h-8 rounded-[12px] ring-2 ring-surface-container-low object-cover" data-alt="Portrait of a young man with a serious expression in natural light" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBRumq5TYF2uSUg0ZiqTdpMZAu9pw9buEyoGaXnYAUYxsMydBeqVFjnap6WO7SSIFH0_q4tCBjLRUphikyiAKQ24Wu1tnT087QUeFw0KAdE9xYN4DvzcnPgOMEBguyPh8HEUhdwHO2J3exIMmwMquTnfEftqfP0_192XSDbPU70UH7uiriTrKvkRdNV9qKRT8wEqDXBLxaHXQANq56L8-z55qaFtcyAMKieYZxOQQfeNZCjd9JcmBVyhgxyOl_MBpak16-Paoi2F6o"/>
|
||||
<div class="w-8 h-8 rounded-[12px] ring-2 ring-surface-container-low bg-surface-container-high flex items-center justify-center text-[10px] font-bold text-primary">+12</div>
|
||||
</div>
|
||||
<div class="pt-4 border-t border-white/5">
|
||||
<p class="text-xs text-on-surface-variant leading-relaxed">В этой истории Александр делится концептами нового децентрализованного интерфейса для Knot.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 rounded-[20px] bg-surface-container-low border border-white/5 flex items-center justify-between group cursor-pointer hover:bg-surface-container transition-colors">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-primary" data-icon="share">share</span>
|
||||
<span class="text-sm font-medium">Поделиться</span>
|
||||
</div>
|
||||
<span class="material-symbols-outlined opacity-0 group-hover:opacity-100 transition-opacity" data-icon="chevron_right">chevron_right</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<!-- Background Decoration Nodes (The Knot Identity) -->
|
||||
<div class="fixed inset-0 pointer-events-none overflow-hidden -z-10">
|
||||
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-primary/10 rounded-full blur-[120px]"></div>
|
||||
<div class="absolute bottom-1/4 right-1/4 w-[500px] h-[500px] bg-primary-container/10 rounded-full blur-[160px]"></div>
|
||||
</div>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 218 KiB |
@@ -0,0 +1,267 @@
|
||||
<!DOCTYPE html><html class="dark" lang="ru"><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
<title>Knot - Создание историй</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"surface-bright": "#3a3939",
|
||||
"secondary-fixed-dim": "#adc6ff",
|
||||
"on-surface-variant": "#c1c6d7",
|
||||
"on-surface": "#e5e2e1",
|
||||
"tertiary": "#ffb595",
|
||||
"surface-container": "#201f1f",
|
||||
"tertiary-fixed-dim": "#ffb595",
|
||||
"surface-dim": "#131313",
|
||||
"on-primary-fixed-variant": "#004493",
|
||||
"on-background": "#e5e2e1",
|
||||
"primary-container": "#4b8eff",
|
||||
"surface": "#131313",
|
||||
"on-tertiary-fixed-variant": "#7c2e00",
|
||||
"on-primary-container": "#00285c",
|
||||
"surface-tint": "#adc6ff",
|
||||
"secondary": "#adc6ff",
|
||||
"on-secondary-fixed": "#001a41",
|
||||
"inverse-on-surface": "#313030",
|
||||
"primary-fixed": "#d8e2ff",
|
||||
"on-tertiary": "#571e00",
|
||||
"error-container": "#93000a",
|
||||
"primary-fixed-dim": "#adc6ff",
|
||||
"surface-variant": "#353534",
|
||||
"tertiary-container": "#ef6719",
|
||||
"tertiary-fixed": "#ffdbcc",
|
||||
"on-secondary-fixed-variant": "#26467d",
|
||||
"error": "#ffb4ab",
|
||||
"surface-container-lowest": "#0e0e0e",
|
||||
"surface-container-low": "#1c1b1b",
|
||||
"on-tertiary-container": "#4c1a00",
|
||||
"surface-container-high": "#2a2a2a",
|
||||
"on-error": "#690005",
|
||||
"on-primary-fixed": "#001a41",
|
||||
"background": "#131313",
|
||||
"primary": "#adc6ff",
|
||||
"on-error-container": "#ffdad6",
|
||||
"inverse-surface": "#e5e2e1",
|
||||
"inverse-primary": "#005bc1",
|
||||
"on-primary": "#002e69",
|
||||
"on-tertiary-fixed": "#351000",
|
||||
"outline-variant": "#414755",
|
||||
"on-secondary-container": "#98b5f3",
|
||||
"secondary-container": "#26467d",
|
||||
"on-secondary": "#082f65",
|
||||
"secondary-fixed": "#d8e2ff",
|
||||
"outline": "#8b90a0",
|
||||
"surface-container-highest": "#353534"
|
||||
},
|
||||
fontFamily: {
|
||||
"headline": ["Inter"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
},
|
||||
borderRadius: { "DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "2xl": "1.25rem", "full": "9999px" },
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.kinetic-gradient {
|
||||
background: linear-gradient(135deg, #ADC6FF 0%, #4B8EFF 100%);
|
||||
}
|
||||
.glass-panel {
|
||||
background: rgba(53, 53, 52, 0.6);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
body {
|
||||
background-color: #131313;
|
||||
color: #E5E2E1;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="overflow-hidden">
|
||||
<!-- SideNavBar Component -->
|
||||
<aside class="h-screen w-72 flex flex-col fixed left-0 top-0 bg-[#1C1B1B] border-r border-[#C1C6D7]/15 py-8 px-4 z-50">
|
||||
<div class="mb-10 px-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-2xl font-black text-[#ADC6FF] tracking-tighter" style="">Knot</span>
|
||||
</div>
|
||||
<p class="text-xs text-[#C1C6D7] opacity-60 mt-1 uppercase tracking-widest font-bold" style="">Digital Sovereignty</p>
|
||||
</div>
|
||||
<nav class="flex-1 space-y-1">
|
||||
<a class="flex items-center gap-4 py-3 px-4 rounded-xl text-[#C1C6D7] opacity-70 hover:bg-[#2A2A2A] hover:text-[#E5E2E1] transition-all duration-300" href="#" style="">
|
||||
<span class="material-symbols-outlined" style="">chat</span>
|
||||
<span class="font-medium" style="">Messages</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-4 py-3 px-4 rounded-xl text-[#ADC6FF] font-bold border-r-4 border-[#ADC6FF] bg-[#2A2A2A] transition-all duration-300" href="#" style="">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: "FILL" 1;">motion_photos_on</span>
|
||||
<span class="font-medium" style="">Stories</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-4 py-3 px-4 rounded-xl text-[#C1C6D7] opacity-70 hover:bg-[#2A2A2A] hover:text-[#E5E2E1] transition-all duration-300" href="#" style="">
|
||||
<span class="material-symbols-outlined" style="">group</span>
|
||||
<span class="font-medium" style="">Contacts</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-4 py-3 px-4 rounded-xl text-[#C1C6D7] opacity-70 hover:bg-[#2A2A2A] hover:text-[#E5E2E1] transition-all duration-300" href="#" style="">
|
||||
<span class="material-symbols-outlined" style="">settings</span>
|
||||
<span class="font-medium" style="">Settings</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-4 py-3 px-4 rounded-xl text-[#C1C6D7] opacity-70 hover:bg-[#2A2A2A] hover:text-[#E5E2E1] transition-all duration-300" href="#" style="">
|
||||
<span class="material-symbols-outlined" style="">inventory_2</span>
|
||||
<span class="font-medium" style="">Archive</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="mt-auto pt-6 border-t border-[#C1C6D7]/10 space-y-1">
|
||||
<a class="flex items-center gap-4 py-3 px-4 rounded-xl text-[#C1C6D7] opacity-70 hover:bg-[#2A2A2A] transition-all duration-300" href="#" style="">
|
||||
<span class="material-symbols-outlined" style="">help_outline</span>
|
||||
<span class="font-medium" style="">Help</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-4 py-3 px-4 rounded-xl text-[#C1C6D7] opacity-70 hover:bg-[#2A2A2A] transition-all duration-300" href="#" style="">
|
||||
<span class="material-symbols-outlined" style="">logout</span>
|
||||
<span class="font-medium" style="">Logout</span>
|
||||
</a>
|
||||
<div class="mt-6 flex items-center gap-3 px-4 py-2">
|
||||
<img alt="User profile avatar" class="w-10 h-10 rounded-2xl object-cover" data-alt="Close-up portrait of a stylish man with a modern haircut in cinematic lighting with deep shadows" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDjMvOAp5dF8TT2a_n3fKgdUqNB2_6aujDigL5K245BxxJenNvlVwpbRe-kef4RtiIaAr0GtNSpOW3VoriWbG7mPbCFjVH9wG18_CGGavXXYPTbSngv9mPNFoJQiqozL12jQEqlpnMYrYnU6bHBiIuC9yAx0j_TuAUvOjjZPuaEG4Q8c6lZGx_NQderFrGnqp7-Hz2-bKe60AV6a947pFP53nKiOpbXUNphj6l6lmiG68Lv8_U1-ImIi68h5o79t6xldiDr-nq_5bw" style="">
|
||||
<div class="overflow-hidden">
|
||||
<p class="text-sm font-bold text-[#E5E2E1] truncate" style="">Alex Kovalev</p>
|
||||
<p class="text-[10px] text-[#C1C6D7] opacity-50 uppercase tracking-tighter" style="">Pro Account</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Workspace -->
|
||||
<main class="ml-72 flex flex-col h-screen bg-[#0E0E0E]">
|
||||
<!-- TopNavBar Component -->
|
||||
<header class="flex justify-between items-center w-full px-12 h-20 bg-[#0E0E0E]/80 backdrop-blur-xl sticky top-0 z-40 shadow-[0px_20px_40px_rgba(0,0,0,0.4)]">
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="material-symbols-outlined text-[#ADC6FF]" style="">auto_fix_high</span>
|
||||
<h1 class="text-xl font-bold text-[#E5E2E1]" style="">Stories Editor</h1>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="flex items-center gap-4 mr-4">
|
||||
<button class="p-2 text-[#C1C6D7] hover:opacity-80 transition-opacity active:scale-95" style="">
|
||||
<span class="material-symbols-outlined" style="">history</span>
|
||||
</button>
|
||||
<button class="p-2 text-[#C1C6D7] hover:opacity-80 transition-opacity active:scale-95" style="">
|
||||
<span class="material-symbols-outlined" style="">visibility</span>
|
||||
</button>
|
||||
<button class="p-2 text-[#C1C6D7] hover:opacity-80 transition-opacity active:scale-95" style="">
|
||||
<span class="material-symbols-outlined" style="">more_vert</span>
|
||||
</button>
|
||||
</div>
|
||||
<button class="kinetic-gradient text-[#00285c] px-8 py-2.5 rounded-2xl font-bold text-sm transition-all duration-300 hover:brightness-110 active:scale-95" style="">
|
||||
Опубликовать
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Canvas Area -->
|
||||
<section class="flex flex-1 overflow-hidden">
|
||||
<!-- Left: Preview Area -->
|
||||
<div class="flex-1 flex flex-col items-center justify-center p-8 relative">
|
||||
<!-- Background Decoration -->
|
||||
<div class="absolute inset-0 overflow-hidden opacity-10 pointer-events-none">
|
||||
<div class="absolute -top-20 -left-20 w-96 h-96 bg-primary-container blur-[120px] rounded-full"></div>
|
||||
<div class="absolute -bottom-20 -right-20 w-96 h-96 bg-tertiary blur-[120px] rounded-full"></div>
|
||||
</div>
|
||||
<!-- Story Preview Card -->
|
||||
<div class="relative w-[380px] h-[680px] bg-[#1C1B1B] rounded-[2.5rem] shadow-2xl p-4 flex flex-col overflow-hidden border border-[#C1C6D7]/5">
|
||||
<div class="relative flex-1 rounded-[2rem] overflow-hidden group">
|
||||
<img alt="Story media preview" class="w-full h-full object-cover" data-alt="Abstract vibrant purple and blue neon city lights at night with beautiful bokeh and cinematic atmosphere" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDqwMSRrc0EWBto1LhYYkXkBPP1oSAfy_DHqpLV0YLSRLQby86fuP3UrkhV1fmHMBFRTJfmk9can64Kd9LD4cMbJsGUzon9eGqN60frIGtVfGOx7mAQvlQVAUHl58fDH_sHwCvA1sp0GmlWYni6ZjCHpOAmoKBgXBEaAaacxW4X7ZlbLpjOGlCEJ3TZXSekBuQocQNZkZX0TlCDceRDOJj5zfrCodDhH8b-KrFOVLUHyb9cCgoFedaVeKsQEIK5q-vf2tQE68HlgYQ" style="">
|
||||
<!-- Overlay UI -->
|
||||
<div class="absolute top-6 left-6 flex items-center gap-3">
|
||||
<img alt="User avatar" class="w-8 h-8 rounded-xl border border-white/20" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAv-A-5Fk8LMDuoJ9jszmLoIUX1JjYYqFUzHyI8O_7N_3wCIPOqbbG9MsHQyzclDdEKOyt7DowtlRQSwPDleUYp504iToHOUNBsDNimYpkygzpc0gMprJWpbatQp24aE5J6Nyeegn9k2RPizb4BfnNmsLhofcRymN0H4gtbm8ttItLm_Xo0vIwENLZshlXkH5RkvEcFYH95a92-BKDqcHFWT_xPNxsUuxSwXyGfUkZIrm0QOZ9XoPxCmaJNc-tR_sDGDhzxt5sEKW0" style="">
|
||||
<span class="text-white text-xs font-bold drop-shadow-md" style="">Ваша история</span>
|
||||
</div>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent pointer-events-none"></div>
|
||||
<!-- Sample Text Element -->
|
||||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center pointer-events-none">
|
||||
<h2 class="text-4xl font-black text-white italic tracking-tighter drop-shadow-2xl" style="">VIBES</h2>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bottom Controls in Card -->
|
||||
<div class="mt-4 flex justify-center pb-2">
|
||||
<div class="h-1 w-12 bg-[#E5E2E1]/20 rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Upload Trigger Overlay -->
|
||||
<div class="mt-8 flex gap-4">
|
||||
<button class="flex items-center gap-2 bg-surface-container-high text-on-surface px-6 py-3 rounded-2xl font-medium hover:bg-surface-variant transition-colors border border-outline-variant/10" style="">
|
||||
<span class="material-symbols-outlined" style="">add_a_photo</span>
|
||||
Загрузить медиа
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right: Toolbar & Panel -->
|
||||
<aside class="w-96 bg-[#1C1B1B] border-l border-[#C1C6D7]/15 flex flex-col p-8 gap-8 overflow-y-auto">
|
||||
<div>
|
||||
<h3 class="text-sm font-black uppercase tracking-widest text-[#ADC6FF] mb-6" style="">Инструменты</h3>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<button class="flex flex-col items-center justify-center p-4 rounded-2xl bg-[#2A2A2A] hover:bg-[#353534] transition-all group" style="">
|
||||
<span class="material-symbols-outlined text-2xl mb-2 text-[#C1C6D7] group-hover:text-[#ADC6FF]" style="">title</span>
|
||||
<span class="text-xs font-medium" style="">Текст</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center justify-center p-4 rounded-2xl bg-[#2A2A2A] hover:bg-[#353534] transition-all group" style="">
|
||||
<span class="material-symbols-outlined text-2xl mb-2 text-[#C1C6D7] group-hover:text-[#ADC6FF]" style="">mood</span>
|
||||
<span class="text-xs font-medium" style="">Стикеры</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center justify-center p-4 rounded-2xl bg-[#2A2A2A] hover:bg-[#353534] transition-all group" style="">
|
||||
<span class="material-symbols-outlined text-2xl mb-2 text-[#C1C6D7] group-hover:text-[#ADC6FF]" style="">brush</span>
|
||||
<span class="text-xs font-medium" style="">Кисти</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center justify-center p-4 rounded-2xl bg-[#2A2A2A] hover:bg-[#353534] transition-all group" style="">
|
||||
<span class="material-symbols-outlined text-2xl mb-2 text-[#C1C6D7] group-hover:text-[#ADC6FF]" style="">filter_vintage</span>
|
||||
<span class="text-xs font-medium" style="">Фильтры</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<h3 class="text-sm font-black uppercase tracking-widest text-[#ADC6FF]" style="">Приватность</h3>
|
||||
<p class="text-xs text-[#C1C6D7] opacity-60" style="">Выберите, кто может просматривать вашу новую историю.</p>
|
||||
<div class="space-y-2">
|
||||
<label class="flex items-center justify-between p-4 rounded-2xl bg-[#2A2A2A] border border-transparent hover:border-[#ADC6FF]/20 cursor-pointer transition-all" style="">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-[#ADC6FF]" style="">public</span>
|
||||
<span class="text-sm font-bold" style="">Все пользователи</span>
|
||||
</div>
|
||||
<input checked="" class="w-5 h-5 border-2 border-outline rounded-full text-[#ADC6FF] focus:ring-offset-0 focus:ring-[#ADC6FF] bg-transparent" name="privacy" type="radio">
|
||||
</label>
|
||||
<label class="flex items-center justify-between p-4 rounded-2xl bg-[#1C1B1B] border border-outline-variant/30 hover:border-[#ADC6FF]/20 cursor-pointer transition-all" style="">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-on-surface-variant" style="">group</span>
|
||||
<span class="text-sm font-bold" style="">Только контакты</span>
|
||||
</div>
|
||||
<input class="w-5 h-5 border-2 border-outline rounded-full text-[#ADC6FF] focus:ring-offset-0 focus:ring-[#ADC6FF] bg-transparent" name="privacy" type="radio">
|
||||
</label>
|
||||
<label class="flex items-center justify-between p-4 rounded-2xl bg-[#1C1B1B] border border-outline-variant/30 hover:border-[#ADC6FF]/20 cursor-pointer transition-all" style="">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-on-surface-variant" style="">lock</span>
|
||||
<span class="text-sm font-bold" style="">Выбранные контакты</span>
|
||||
</div>
|
||||
<input class="w-5 h-5 border-2 border-outline rounded-full text-[#ADC6FF] focus:ring-offset-0 focus:ring-[#ADC6FF] bg-transparent" name="privacy" type="radio">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-auto space-y-4">
|
||||
<div class="p-4 rounded-2xl bg-[#ADC6FF]/5 border border-[#ADC6FF]/10">
|
||||
<div class="flex items-start gap-3">
|
||||
<span class="material-symbols-outlined text-[#ADC6FF] text-sm" style="">info</span>
|
||||
<p class="text-[11px] text-[#C1C6D7] leading-relaxed" style="">
|
||||
Истории Knot зашифрованы и автоматически удаляются через 24 часа. </p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="w-full bg-surface-container-highest text-on-surface py-4 rounded-2xl font-bold text-sm transition-all hover:bg-surface-variant active:scale-98" style="">
|
||||
Отменить
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
</section>
|
||||
</main>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 525 KiB |
@@ -0,0 +1,99 @@
|
||||
# Design System Specification: The Kinetic Nexus
|
||||
|
||||
## 1. Overview & Creative North Star
|
||||
This design system is built for an era of decentralized, secure communication. It moves away from the "standard app" aesthetic toward a philosophy we call **"The Digital Curator."**
|
||||
|
||||
The Creative North Star focuses on **Kinetic Sophistication**. We reject the static, boxy nature of traditional messaging apps in favor of an environment that feels alive and interconnected. By leveraging the concept of "Knots"—points where data, security, and human connection meet—we use intentional asymmetry, overlapping layers, and high-contrast editorial typography to create a high-end, bespoke experience. The interface should feel like a premium tool for modern digital sovereignty: fast, lightweight, and mathematically precise.
|
||||
|
||||
---
|
||||
|
||||
## 2. Colors & Surface Philosophy
|
||||
|
||||
### Color Tokens
|
||||
Our palette is rooted in absolute depth and electric precision.
|
||||
|
||||
* **Dark Mode (Primary):** `surface-container-lowest` (#0E0E0E) as the foundation.
|
||||
* **Light Mode:** `surface-bright` (#FFFFFF) and `surface-container` (#F5F5F7).
|
||||
* **Accent:** `primary` (#ADC6FF) and `primary-container` (#4B8EFF).
|
||||
* **Text:** High contrast `on-surface` (#E5E2E1) for readability, with `on-surface-variant` (#C1C6D7) for secondary metadata.
|
||||
|
||||
### The "No-Line" Rule
|
||||
To achieve a premium editorial feel, **1px solid borders are strictly prohibited** for sectioning or containment. Boundaries must be defined through:
|
||||
1. **Background Shifts:** Placing a `surface-container-low` panel atop a `surface` background.
|
||||
2. **Tonal Transitions:** Using depth to separate the message list from the conversation view.
|
||||
|
||||
### Surface Hierarchy & Nesting
|
||||
Treat the UI as a series of nested physical layers. Use the `surface-container` tiers to indicate importance:
|
||||
* **Level 0 (Base):** `surface` (#131313) - The "desk" everything sits on.
|
||||
* **Level 1 (Sections):** `surface-container-low` (#1C1B1B) - Large sidebars or navigation areas.
|
||||
* **Level 2 (Active Elements):** `surface-container-high` (#2A2A2A) - Active chat bubbles or focused cards.
|
||||
|
||||
### Signature Textures
|
||||
Avoid flat blocks of color. For Primary CTAs and Hero moments, use a **Linear Gradient** transition from `primary` (#ADC6FF) to `primary-container` (#4B8EFF) at a 135-degree angle. This provides "visual soul" and a sense of movement.
|
||||
|
||||
---
|
||||
|
||||
## 3. Typography
|
||||
We utilize **Inter** for its technical precision and flawless Cyrillic support.
|
||||
|
||||
* **Display (lg/md/sm):** Used for onboarding and empty states. Tighten letter-spacing to `-0.02em` for an authoritative, editorial look.
|
||||
* **Headline (lg/md/sm):** Used for top-level navigation headers. These should feel intentional and spacious.
|
||||
* **Title (lg/md):** Used for contact names and group titles. Bold weight.
|
||||
* **Body (lg/md/sm):** The workhorse for messages. `body-lg` (1rem) is the default for chat bubbles to ensure premium legibility.
|
||||
* **Label (md/sm):** Reserved for timestamps and micro-copy. Use `label-md` with `on-surface-variant`.
|
||||
|
||||
**Hierarchy Note:** To move beyond generic UI, contrast the font weights aggressively. Pair a `display-sm` bold header with a `body-sm` light subhead to create a sophisticated "magazine" layout within the app settings.
|
||||
|
||||
---
|
||||
|
||||
## 4. Elevation & Depth
|
||||
|
||||
### The Layering Principle
|
||||
Depth is achieved through **Tonal Stacking**. For example, a chat bubble (`surface-container-highest`) sitting on a message thread (`surface-container-low`) creates a natural, soft lift.
|
||||
|
||||
### Ambient Shadows
|
||||
Shadows are only permitted for floating elements (e.g., Modals, Context Menus).
|
||||
* **Spec:** `0px 20px 40px rgba(0, 0, 0, 0.4)`
|
||||
* Shadows must be extra-diffused. The shadow color should be a tinted version of `surface-container-lowest` to ensure it feels like a natural lighting occlusion rather than a "drop shadow."
|
||||
|
||||
### Glassmorphism & Ghost Borders
|
||||
For floating UI (like a bottom-pinned navigation bar), use **Backdrop Blur (20px)** combined with a 60% opacity `surface-variant`.
|
||||
* **Ghost Border Fallback:** If a container requires definition against a similar tone, use the `outline-variant` token at **15% opacity**. Never 100%.
|
||||
|
||||
---
|
||||
|
||||
## 5. Components
|
||||
|
||||
### Avatars & Media Containers
|
||||
Reflecting the 'Knot' name, we move away from circles.
|
||||
* **Spec:** Square with a **20px border radius** (`xl` / 1.5rem). This creates a distinct, modern silhouette that aligns with the square-ish nature of modern technical interfaces.
|
||||
|
||||
### Buttons
|
||||
* **Primary:** Gradient fill (Primary to Primary-Container), white text, `xl` rounding.
|
||||
* **Secondary:** `surface-container-highest` fill, `primary` text. No border.
|
||||
* **States:** On hover, increase the brightness of the gradient by 10%. On press, scale the component down to `0.98`.
|
||||
|
||||
### Input Fields
|
||||
* **Visual Style:** Ghost-style inputs. No background fill, only a bottom `outline-variant` (20% opacity). Upon focus, the bottom border transitions to a `primary` glow with a subtle backdrop shift to `surface-container-low`.
|
||||
|
||||
### Chat Bubbles & Lists
|
||||
* **NO DIVIDERS.** Use the Spacing Scale (`6` / 1.5rem) to separate message groups.
|
||||
* **Asymmetry:** User messages should have a slightly different corner radius on the "anchor" side to feel like they are "plugged into" the side of the screen.
|
||||
|
||||
### Interconnected Line Motifs
|
||||
Subtle 2px lines (using `outline-variant`) can be used to visually connect threads or "knots" of data in the background, reinforcing the brand identity of a federated network.
|
||||
|
||||
---
|
||||
|
||||
## 6. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
* **DO** use whitespace as a functional element. Give text room to breathe (Spacing `8` or `10`).
|
||||
* **DO** use "Kinetic" transitions. Elements should slide and fade into place using a `cubic-bezier(0.16, 1, 0.3, 1)` easing profile.
|
||||
* **DO** prioritize the Cyrillic rendering of Inter, ensuring line-heights are generous enough to avoid "cramping" tall characters.
|
||||
|
||||
### Don't
|
||||
* **DON'T** use pure #000000 for backgrounds; it kills the perception of depth. Stick to the `surface-container-lowest` (#0E0E0E).
|
||||
* **DON'T** use 1px solid dividers to separate list items. Use tonal shifts or vertical space.
|
||||
* **DON'T** use round avatars. The 20px radius square is our signature signature element.
|
||||
* **DON'T** default to high-opacity borders. They create "visual noise" and make the system feel like a generic template.
|
||||
Reference in New Issue
Block a user