212 lines
13 KiB
HTML
212 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@100..900&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;
|
||
}
|
||
.slide-on-ice { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
|
||
.tonal-transition-no-border { background: linear-gradient(to bottom, rgba(19, 19, 19, 0.8), rgba(19, 19, 19, 0)); }
|
||
.contrast-bg-shift-no-border { position: relative; }
|
||
.pip-glow { box-shadow: 0 0 40px rgba(154, 203, 255, 0.1); }
|
||
</style>
|
||
</head>
|
||
<body class="bg-background text-on-surface font-body overflow-hidden">
|
||
<!-- SideNavBar Anchor -->
|
||
<nav 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 font-['Inter'] text-sm leading-[1.6] antialiased">
|
||
<div class="mb-10">
|
||
<span class="text-2xl font-black text-[#9ACBFF] tracking-tighter">Knot</span>
|
||
</div>
|
||
<div class="flex flex-col gap-6 w-full px-2">
|
||
<!-- Active: Чаты -->
|
||
<button 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(0.4,0,0.2,1)">
|
||
<span class="material-symbols-outlined mb-1" data-icon="chat" style="font-variation-settings: 'FILL' 1;">chat</span>
|
||
<span class="text-[10px]">Чаты</span>
|
||
</button>
|
||
<button 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">
|
||
<span class="material-symbols-outlined mb-1" data-icon="call">call</span>
|
||
<span class="text-[10px]">Звонки</span>
|
||
</button>
|
||
<button 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">
|
||
<span class="material-symbols-outlined mb-1" data-icon="person">person</span>
|
||
<span class="text-[10px]">Контакты</span>
|
||
</button>
|
||
<button 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">
|
||
<span class="material-symbols-outlined mb-1" data-icon="archive">archive</span>
|
||
<span class="text-[10px]">Архив</span>
|
||
</button>
|
||
<button class="flex flex-col items-center justify-center text-[#939090] p-3 mt-auto hover:bg-[#201F1F] hover:text-[#9ACBFF] transition-colors scale-95 active:scale-90">
|
||
<span class="material-symbols-outlined mb-1" data-icon="settings">settings</span>
|
||
<span class="text-[10px]">Настройки</span>
|
||
</button>
|
||
</div>
|
||
</nav>
|
||
<!-- TopAppBar Anchor -->
|
||
<header class="fixed top-0 right-0 left-20 z-30 flex items-center justify-between px-8 bg-[#131313]/60 backdrop-blur-xl h-16 shadow-[0_40px_40px_rgba(255,255,255,0.05)]">
|
||
<h1 class="headline-sm font-bold text-[#FFFFFF] tracking-tight">Чаты</h1>
|
||
<div class="flex items-center gap-6">
|
||
<div class="relative flex items-center bg-surface-container-highest/40 px-4 py-2 rounded-full border border-outline-variant/15">
|
||
<span class="material-symbols-outlined text-on-surface-variant text-xl mr-2" data-icon="search">search</span>
|
||
<input class="bg-transparent border-none focus:ring-0 p-0 text-sm w-48 text-on-surface" placeholder="Поиск" type="text"/>
|
||
</div>
|
||
<div class="flex items-center gap-4 text-[#939090]">
|
||
<button class="hover:opacity-80 transition-opacity"><span class="material-symbols-outlined" data-icon="videocam">videocam</span></button>
|
||
<button class="hover:opacity-80 transition-opacity"><span class="material-symbols-outlined" data-icon="call">call</span></button>
|
||
<button class="hover:opacity-80 transition-opacity"><span class="material-symbols-outlined" data-icon="more_vert">more_vert</span></button>
|
||
</div>
|
||
<div class="w-10 h-10 rounded-full overflow-hidden border border-outline-variant/20">
|
||
<img alt="User profile" class="w-full h-full object-cover" data-alt="Close up portrait of a professional man in a dark turtleneck against a minimalist grey background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBkI_gl3mtmp5RGKD8tn3gHGGXNKFOCU-lLShbMjykwUuZFTaNXrLII7SwxG8EOZ-DCXCT41D4UiafLOr9nsQi-_0uVYKuM6pxO3myXo3PE7nb_QzepTeSTFKMWpXLCyErYNMNnCNxk4BGuZ2DiKrv_6tJVWUPZ03vFmdgdySNqfWfHGuThts63m8SFLNh8n6kSNG9z3t_pVCw2rEF47w0uykhBORi2Gww6AT3rFxWC57bJbrabQXiYzRE92scR6Q99eCv59uo5nCE"/>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<!-- Main Content (Blurred Canvas) -->
|
||
<main class="ml-20 pt-20 p-8 h-screen overflow-hidden filter blur-md opacity-40">
|
||
<div class="max-w-4xl mx-auto space-y-6">
|
||
<!-- Simulated Chat List Items -->
|
||
<div class="flex items-center gap-5 p-4 bg-surface-container rounded-3xl">
|
||
<div class="w-14 h-14 rounded-full bg-surface-bright flex-shrink-0"></div>
|
||
<div class="flex-1 space-y-2">
|
||
<div class="h-4 w-1/4 bg-surface-variant rounded"></div>
|
||
<div class="h-3 w-3/4 bg-surface-variant/50 rounded"></div>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center gap-5 p-4 bg-surface-container rounded-3xl">
|
||
<div class="w-14 h-14 rounded-full bg-surface-bright flex-shrink-0"></div>
|
||
<div class="flex-1 space-y-2">
|
||
<div class="h-4 w-1/3 bg-surface-variant rounded"></div>
|
||
<div class="h-3 w-2/3 bg-surface-variant/50 rounded"></div>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center gap-5 p-4 bg-surface-container-low rounded-3xl">
|
||
<div class="w-14 h-14 rounded-full bg-surface-bright flex-shrink-0"></div>
|
||
<div class="flex-1 space-y-2">
|
||
<div class="h-4 w-1/5 bg-surface-variant rounded"></div>
|
||
<div class="h-3 w-1/2 bg-surface-variant/50 rounded"></div>
|
||
</div>
|
||
</div>
|
||
<!-- Editorial Moment -->
|
||
<div class="py-12">
|
||
<h2 class="text-6xl font-black text-surface-variant tracking-tighter opacity-20">KINETIC</h2>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
<!-- PIP CALL VIEW (The Request) -->
|
||
<div class="fixed top-24 right-8 z-50 w-72 h-44 group">
|
||
<!-- Floating Window Container -->
|
||
<div class="relative w-full h-full rounded-[2rem] bg-surface-container/80 backdrop-blur-2xl border border-white/5 overflow-hidden pip-glow flex flex-col p-1 slide-on-ice cursor-grab active:cursor-grabbing">
|
||
<!-- Video/Avatar Feed -->
|
||
<div class="relative flex-1 rounded-[1.75rem] overflow-hidden bg-surface-container-lowest">
|
||
<img alt="Current speaker" class="w-full h-full object-cover" data-alt="A focused young woman in a high-tech studio environment with soft blue ambient lighting and cinematic bokeh" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDjAjGAHxf2xZFdY2W4WG4l3g2R-UjETfxF8m5r17NLLA8iz7VPKzy2A89zntJkgQIkb7rMQHD0PiXedl6W3-pAYR3P6J0cC5p0rY4IQzRdJ_3190kV2Ohsqi6zW3rJLo62NIgV91d2pUUo7UsIeqp_1HZfynj2dur3Ekhk4JrT-Yesm-7UBo8lAtfMUEJ2df4OY0pOZox69mIdUGAAvKmoyQN7e-EVmGPIssDDcm1BXUEEj14uV3a42CaNQ3zn4dfH7CJrKK74EtQ"/>
|
||
<!-- Participant Overlay -->
|
||
<div class="absolute top-3 left-3 bg-black/40 backdrop-blur-md px-2 py-1 rounded-full flex items-center gap-1.5 border border-white/10">
|
||
<div class="w-1.5 h-1.5 rounded-full bg-tertiary animate-pulse"></div>
|
||
<span class="text-[10px] font-bold tracking-wider text-white">4 УЧАСТНИКА</span>
|
||
</div>
|
||
<!-- Speaker Identity -->
|
||
<div class="absolute bottom-3 left-3 flex flex-col">
|
||
<span class="text-[11px] font-bold text-white drop-shadow-md">Александра В.</span>
|
||
<span class="text-[9px] text-white/70">Говорит сейчас...</span>
|
||
</div>
|
||
<!-- Drag Handle Hint (Visual Only) -->
|
||
<div class="absolute top-2 right-1/2 translate-x-1/2 w-8 h-1 bg-white/20 rounded-full opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||
</div>
|
||
<!-- Controls (Revealed on hover) -->
|
||
<div class="flex items-center justify-center gap-4 py-2 opacity-0 group-hover:opacity-100 slide-on-ice h-0 group-hover:h-12 overflow-hidden">
|
||
<button class="w-10 h-10 rounded-full bg-surface-container-highest/60 flex items-center justify-center hover:bg-surface-bright transition-colors">
|
||
<span class="material-symbols-outlined text-on-surface text-xl" data-icon="mic">mic</span>
|
||
</button>
|
||
<button class="w-12 h-10 rounded-full bg-error flex items-center justify-center hover:opacity-90 transition-opacity">
|
||
<span class="material-symbols-outlined text-on-error text-xl" data-icon="call_end" style="font-variation-settings: 'FILL' 1;">call_end</span>
|
||
</button>
|
||
<button class="w-10 h-10 rounded-full bg-surface-container-highest/60 flex items-center justify-center hover:bg-surface-bright transition-colors">
|
||
<span class="material-symbols-outlined text-on-surface text-xl" data-icon="open_in_full">open_in_full</span>
|
||
</button>
|
||
</div>
|
||
<!-- Collapsed Minimal Label (Visible when not hovering) -->
|
||
<div class="absolute bottom-3 right-3 flex items-center gap-2 group-hover:opacity-0 transition-opacity pointer-events-none">
|
||
<div class="flex -space-x-2">
|
||
<div class="w-5 h-5 rounded-full border border-black/20 bg-primary-fixed-dim overflow-hidden">
|
||
<img alt="Participant" data-alt="Portrait of a person" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCuMYyl7CwiG9WwcZCzLhs8bL7AF2buJmiwcJh4jczj5-UWxBM8jOwLBfoFriUDkC3vjnFnIkAflDQ781ZbkZl1jgpXp3PPabkAxqYcXARr_ZtjDsbpZVUPTbuEz5d9RYl9RfIZe0xKZXWtRhqU9iOfOkZkkXShLEGyNNhmTT5BoigDw4DcJDw6HkaKWo6W5ikjrcLIBInHXmYn4GNjvODgIPmpVTU6U5kqfOvQz2zmYVlA2Zf6KLnIwV8SrV0mfo4PIkZuwedHLIU"/>
|
||
</div>
|
||
<div class="w-5 h-5 rounded-full border border-black/20 bg-secondary-fixed-dim overflow-hidden">
|
||
<img alt="Participant" data-alt="Portrait of a person" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDuH-FI6o13qn5xMnHfbxpPd5YrBEm2fjOA0PcHZ4vMZCb2LJgtubIHaQUpiYBJkCnRZjlyIVI3a_VBlF3heyqVmROSO6d4VhJvpYIsYaLgvY5BH12pS2-Ed_Jd-XX2lrPZ58LvS2-TMxGXs0VzDm9minzmamM8uOHNFsEmsxsHq5nISf5lmEgAVqpo5pVl3LGGsYx9IliwWTmfy_7ciJ4WImG6tB1GUveS5esw1HNuXQNWGyCbb9OiQEIf-Z5RKSnot_hTEua64_E"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Background Decoration -->
|
||
<div class="fixed top-0 left-0 w-full h-full pointer-events-none -z-10 opacity-10">
|
||
<div class="absolute top-[10%] left-[30%] w-[40rem] h-[40rem] bg-primary/20 blur-[120px] rounded-full"></div>
|
||
<div class="absolute bottom-[20%] right-[10%] w-[30rem] h-[30rem] bg-tertiary-container/10 blur-[100px] rounded-full"></div>
|
||
</div>
|
||
</body></html> |