259 lines
15 KiB
HTML
259 lines
15 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: {
|
||
"inverse-on-surface": "#313030",
|
||
"surface-container": "#201f1f",
|
||
"on-secondary": "#2f3033",
|
||
"tertiary-fixed-dim": "#53e16f",
|
||
"error": "#ffb4ab",
|
||
"primary-container": "#3096e5",
|
||
"secondary-container": "#48494c",
|
||
"surface-dim": "#131313",
|
||
"error-container": "#93000a",
|
||
"inverse-primary": "#00629e",
|
||
"inverse-surface": "#e5e2e1",
|
||
"on-tertiary-fixed": "#002107",
|
||
"secondary-fixed": "#e3e2e6",
|
||
"on-tertiary": "#003911",
|
||
"on-secondary-fixed": "#1a1b1e",
|
||
"surface-container-low": "#1c1b1b",
|
||
"on-primary-fixed-variant": "#004a79",
|
||
"on-surface": "#e5e2e1",
|
||
"on-secondary-container": "#b9b8bc",
|
||
"tertiary-fixed": "#72fe88",
|
||
"secondary-fixed-dim": "#c7c6ca",
|
||
"primary-fixed-dim": "#9acbff",
|
||
"on-error": "#690005",
|
||
"surface-container-high": "#2a2a2a",
|
||
"on-primary-fixed": "#001d34",
|
||
"on-primary-container": "#002c4a",
|
||
"on-primary": "#003355",
|
||
"surface-container-lowest": "#0e0e0e",
|
||
"on-surface-variant": "#c1c6d7",
|
||
"surface-variant": "#353534",
|
||
"secondary": "#c7c6ca",
|
||
"background": "#131313",
|
||
"surface-container-highest": "#353534",
|
||
"on-tertiary-fixed-variant": "#00531c",
|
||
"surface": "#131313",
|
||
"tertiary": "#53e16f",
|
||
"on-error-container": "#ffdad6",
|
||
"on-tertiary-container": "#00320e",
|
||
"primary-fixed": "#cfe5ff",
|
||
"outline": "#8b90a0",
|
||
"surface-bright": "#393939",
|
||
"on-background": "#e5e2e1",
|
||
"primary": "#9acbff",
|
||
"outline-variant": "#414755",
|
||
"surface-tint": "#9acbff",
|
||
"tertiary-container": "#00a741",
|
||
"on-secondary-fixed-variant": "#46474a"
|
||
},
|
||
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;
|
||
display: inline-block;
|
||
line-height: 1;
|
||
text-transform: none;
|
||
letter-spacing: normal;
|
||
word-wrap: normal;
|
||
white-space: nowrap;
|
||
direction: ltr;
|
||
}
|
||
.cubic-bezier-standard { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
|
||
.no-scrollbar::-webkit-scrollbar { display: none; }
|
||
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
||
.knot-gradient { background: linear-gradient(135deg, #9ACBFF 0%, #3096E5 100%); }
|
||
.glass-header { background: rgba(19, 19, 19, 0.6); backdrop-filter: blur(20px); }
|
||
.mask-gradient { mask-image: linear-gradient(to top, transparent, black 20%); }
|
||
</style>
|
||
</head>
|
||
<body class="bg-background text-on-background font-body selection:bg-primary/30 antialiased overflow-hidden h-screen">
|
||
<!-- Sidebar Shell (Shared Component Mapping) -->
|
||
<aside class="fixed left-0 top-0 h-full z-40 flex flex-col border-none bg-[#201F1F] dark:bg-[#201F1F] w-20 items-center py-6 shadow-none font-['Inter'] text-sm leading-[1.6] antialiased">
|
||
<div class="mb-10">
|
||
<span class="text-2xl font-black text-[#9ACBFF] tracking-tighter">K</span>
|
||
</div>
|
||
<nav class="flex flex-col gap-8 flex-1">
|
||
<a class="flex flex-col items-center justify-center text-[#939090] p-3 hover:bg-[#201F1F] hover:text-[#9ACBFF] transition-colors scale-95 active:scale-90 cubic-bezier-standard" href="#">
|
||
<span class="material-symbols-outlined mb-1" data-icon="chat">chat</span>
|
||
<span class="text-[10px]">Чаты</span>
|
||
</a>
|
||
<a class="flex flex-col items-center justify-center bg-[#3096E5]/20 text-[#9ACBFF] rounded-xl p-3 transition-all duration-300 scale-95 active:scale-90 cubic-bezier-standard" href="#">
|
||
<span class="material-symbols-outlined mb-1" data-icon="call">call</span>
|
||
<span class="text-[10px]">Звонки</span>
|
||
</a>
|
||
<a class="flex flex-col items-center justify-center text-[#939090] p-3 hover:bg-[#201F1F] hover:text-[#9ACBFF] transition-colors scale-95 active:scale-90 cubic-bezier-standard" href="#">
|
||
<span class="material-symbols-outlined mb-1" data-icon="person">person</span>
|
||
<span class="text-[10px]">Контакты</span>
|
||
</a>
|
||
<a class="flex flex-col items-center justify-center text-[#939090] p-3 hover:bg-[#201F1F] hover:text-[#9ACBFF] transition-colors scale-95 active:scale-90 cubic-bezier-standard" href="#">
|
||
<span class="material-symbols-outlined mb-1" data-icon="archive">archive</span>
|
||
<span class="text-[10px]">Архив</span>
|
||
</a>
|
||
</nav>
|
||
<div class="mt-auto">
|
||
<a class="flex flex-col items-center justify-center text-[#939090] p-3 hover:bg-[#201F1F] hover:text-[#9ACBFF] transition-colors scale-95 active:scale-90 cubic-bezier-standard" href="#">
|
||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||
<span class="text-[10px] mt-1">Настройки</span>
|
||
</a>
|
||
</div>
|
||
</aside>
|
||
<!-- Main Content Canvas -->
|
||
<main class="ml-20 h-screen grid grid-cols-1 md:grid-cols-2 gap-4 p-4 overflow-hidden">
|
||
<!-- View 1: Create Story (Camera/Upload Interface) -->
|
||
<section class="relative h-full w-full rounded-3xl overflow-hidden bg-surface-container-lowest group">
|
||
<!-- Camera Feed Mockup -->
|
||
<div class="absolute inset-0 z-0">
|
||
<img alt="Camera preview" class="w-full h-full object-cover" data-alt="First-person view of a high-end camera lens capturing a blurred neon city street at night with colorful bokeh lights" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAvxl9nvoduy-T4Wxx3dcZLk-nmIQoYSyWU_iNZeXoe-TBswOEHGny0Ugilhxu3e6Cv2TWrQYdkpF2ZyJ54MWIXN-HFyFe-8f0m7g5smLOPWhNblNfqmxejVQszcoRDNvAK7jz3hlZ2HJS9NQAtaYLFOVo_HPUCAxTPhlW08KUUwY0SRxO-BfeFyjt9BNvuP7UsgdDmrDVHHp2VR932nhmlSJ30DrIzQE72Z8jUesAhlFyrl5hR3OdX7Ekp1ZzPh9koSAdrPsmOL2o"/>
|
||
</div>
|
||
<!-- Header Tools -->
|
||
<div class="absolute top-0 inset-x-0 p-6 flex justify-between items-start z-10 glass-header">
|
||
<button class="p-2 bg-white/10 rounded-full backdrop-blur-md text-white hover:bg-white/20 transition-all active:scale-90">
|
||
<span class="material-symbols-outlined" data-icon="close">close</span>
|
||
</button>
|
||
<div class="flex gap-4">
|
||
<button class="p-3 bg-white/10 rounded-full backdrop-blur-md text-white hover:bg-white/20 transition-all active:scale-90 flex items-center justify-center">
|
||
<span class="material-symbols-outlined" data-icon="text_fields">text_fields</span>
|
||
</button>
|
||
<button class="p-3 bg-white/10 rounded-full backdrop-blur-md text-white hover:bg-white/20 transition-all active:scale-90 flex items-center justify-center">
|
||
<span class="material-symbols-outlined" data-icon="draw">draw</span>
|
||
</button>
|
||
<button class="p-3 bg-white/10 rounded-full backdrop-blur-md text-white hover:bg-white/20 transition-all active:scale-90 flex items-center justify-center">
|
||
<span class="material-symbols-outlined" data-icon="sticky_note_2">sticky_note_2</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<!-- Stickers/Assets Overlay (Floating Asymmetry) -->
|
||
<div class="absolute top-1/4 left-10 z-20 transform -rotate-12 bg-white/20 backdrop-blur-lg px-4 py-2 rounded-xl shadow-2xl border border-white/30">
|
||
<span class="text-xl font-bold text-white tracking-tight">В ПУТИ 🚀</span>
|
||
</div>
|
||
<!-- Bottom Actions -->
|
||
<div class="absolute bottom-0 inset-x-0 p-8 z-10 bg-gradient-to-t from-black/80 to-transparent flex items-center justify-between">
|
||
<div class="flex gap-4">
|
||
<div class="w-12 h-12 rounded-xl bg-white/10 backdrop-blur-md border border-white/20 flex items-center justify-center cursor-pointer hover:bg-white/20 transition-colors">
|
||
<span class="material-symbols-outlined text-white" data-icon="photo_library">photo_library</span>
|
||
</div>
|
||
</div>
|
||
<!-- Main Shutter/Capture button -->
|
||
<button class="w-20 h-20 rounded-full border-4 border-white flex items-center justify-center group active:scale-95 transition-transform">
|
||
<div class="w-16 h-16 rounded-full bg-white scale-90 group-hover:scale-100 transition-transform"></div>
|
||
</button>
|
||
<button class="knot-gradient text-on-primary-container px-6 py-3 rounded-full font-bold shadow-lg flex items-center gap-2 active:scale-95 transition-all">
|
||
<span>Отправить</span>
|
||
<span class="material-symbols-outlined text-sm" data-icon="send">send</span>
|
||
</button>
|
||
</div>
|
||
</section>
|
||
<!-- View 2: View Story (Fullscreen Viewer) -->
|
||
<section class="relative h-full w-full rounded-3xl overflow-hidden bg-surface-container-lowest">
|
||
<!-- Story Content -->
|
||
<div class="absolute inset-0 z-0">
|
||
<img alt="Story content" class="w-full h-full object-cover" data-alt="Cinematic wide shot of a futuristic minimalist mountain cabin under a starry night sky with warm interior lighting glowing through glass" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAR_CvEyvZtfEW3ZjtA2gVlfr83fVVTecwlZAcdFI_PwTDeZp-35BK4QKLQZzGfudLfKfszY1sP5sqPjwvrKs-gcQdO3wE0Fu1NSn9vTbcTIrCmWaD3aYNbTARvUdCzz10n-jTWsEyA6s5Tn9ghHmQke7pNGsAFLHiTUlJk0WVbLTdSaboyNCo7Iwfgirf-4RXGCAp7ioVq1Zd849Hx6kmUXgexo3DeM3jXlKWWHp4-pXcXYaqnLyf9kjbCTPTgylu0ivuF4a1eYG0"/>
|
||
</div>
|
||
<!-- Top Overlay: Progress and Info -->
|
||
<div class="absolute top-0 inset-x-0 p-4 z-20 space-y-4 glass-header">
|
||
<!-- Progress Bars -->
|
||
<div class="flex gap-1.5 px-2">
|
||
<div class="h-1 flex-1 bg-white/30 rounded-full overflow-hidden">
|
||
<div class="h-full bg-white w-full"></div>
|
||
</div>
|
||
<div class="h-1 flex-1 bg-white/30 rounded-full overflow-hidden">
|
||
<div class="h-full bg-white w-2/3"></div>
|
||
</div>
|
||
<div class="h-1 flex-1 bg-white/30 rounded-full overflow-hidden"></div>
|
||
</div>
|
||
<!-- Author Info -->
|
||
<div class="flex items-center justify-between px-2">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-10 h-10 rounded-full border-2 border-primary p-0.5">
|
||
<img alt="User" class="w-full h-full rounded-full object-cover" data-alt="Professional studio portrait of a stylish man with short beard and friendly expression, neutral gray background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD2gBufEksmGDe5L1msU-XyHaJreehRLPF4tZinwOPG423ORKFwgKgSuSm3VNf0iL74RA8m24qWMNED1Kw27CXYIJwhtnsBBavyNKYTbrhnF9jO3xvD-bkmHAWrNJUrQwTteyrIGmkbZoPsTEm2nfGZ_9JCQWXUB-GgeM-gqVyZRMUxaMxFy5xgCOF-XYdnYEIYWYsvqx5kVuhlWrkydTLvCaGzTs2fszWiwVUWx2CY-pTRBgYbH6fL0Xb4tRtB2cq5Ec3dJrk5V5E"/>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-sm font-bold text-white leading-tight">Артем Волков</h3>
|
||
<p class="text-[10px] text-white/70 uppercase tracking-widest">2 часа назад</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex gap-2">
|
||
<button class="text-white opacity-70 hover:opacity-100 transition-opacity">
|
||
<span class="material-symbols-outlined" data-icon="more_horiz">more_horiz</span>
|
||
</button>
|
||
<button class="text-white opacity-70 hover:opacity-100 transition-opacity">
|
||
<span class="material-symbols-outlined" data-icon="close">close</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Center Gestures Hint (Left/Right) -->
|
||
<div class="absolute inset-0 z-10 flex">
|
||
<div class="w-1/3 h-full cursor-pointer"></div>
|
||
<div class="w-1/3 h-full cursor-pointer"></div>
|
||
<div class="w-1/3 h-full cursor-pointer"></div>
|
||
</div>
|
||
<!-- Bottom Content: Reply and Reactions -->
|
||
<div class="absolute bottom-0 inset-x-0 p-8 z-20 bg-gradient-to-t from-black/90 via-black/40 to-transparent space-y-6">
|
||
<!-- Reaction Floating Emojis -->
|
||
<div class="flex justify-center gap-4 mb-4">
|
||
<button class="w-10 h-10 rounded-full bg-white/10 backdrop-blur-xl border border-white/20 flex items-center justify-center text-xl hover:scale-125 transition-transform active:scale-90">🔥</button>
|
||
<button class="w-10 h-10 rounded-full bg-white/10 backdrop-blur-xl border border-white/20 flex items-center justify-center text-xl hover:scale-125 transition-transform active:scale-90">😍</button>
|
||
<button class="w-10 h-10 rounded-full bg-white/10 backdrop-blur-xl border border-white/20 flex items-center justify-center text-xl hover:scale-125 transition-transform active:scale-90">😂</button>
|
||
<button class="w-10 h-10 rounded-full bg-white/10 backdrop-blur-xl border border-white/20 flex items-center justify-center text-xl hover:scale-125 transition-transform active:scale-90">👏</button>
|
||
<button class="w-10 h-10 rounded-full bg-white/10 backdrop-blur-xl border border-white/20 flex items-center justify-center text-xl hover:scale-125 transition-transform active:scale-90">💯</button>
|
||
</div>
|
||
<!-- Reply Field -->
|
||
<div class="flex items-center gap-4">
|
||
<div class="flex-1 bg-white/10 backdrop-blur-2xl rounded-full border border-white/20 px-6 py-3.5 group focus-within:bg-white/20 transition-all">
|
||
<input class="bg-transparent border-none w-full text-white placeholder-white/50 focus:ring-0 text-sm p-0" placeholder="Ответить на историю..." type="text"/>
|
||
</div>
|
||
<button class="w-12 h-12 flex items-center justify-center text-white opacity-70 hover:opacity-100 hover:scale-110 transition-all">
|
||
<span class="material-symbols-outlined" data-icon="favorite" style="font-variation-settings: 'FILL' 0;">favorite</span>
|
||
</button>
|
||
<button class="w-12 h-12 flex items-center justify-center text-white opacity-70 hover:opacity-100 hover:scale-110 transition-all">
|
||
<span class="material-symbols-outlined" data-icon="share">share</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
<!-- Contextual FAB Suppression (as per manual mandate - not needed for this transactional/stories layout) -->
|
||
<style>
|
||
/* Precision typography for Cyrillic */
|
||
h1, h2, h3, .headline-sm {
|
||
letter-spacing: -0.025em;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
/* Smooth backdrop transitions */
|
||
.glass-header {
|
||
transition: background 0.3s ease, backdrop-filter 0.3s ease;
|
||
}
|
||
|
||
/* Blob corners for Knot aesthetic */
|
||
.chat-bubble-custom {
|
||
border-radius: 1.5rem 1.5rem 1.5rem 0.25rem;
|
||
}
|
||
</style>
|
||
</body></html> |