267 lines
16 KiB
HTML
267 lines
16 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">
|
||
<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> |