205 lines
13 KiB
HTML
205 lines
13 KiB
HTML
<!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> |