217 lines
15 KiB
HTML
217 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"/>
|
|
<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;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar { width: 4px; height: 4px; }
|
|
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
|
|
.custom-scrollbar::-webkit-scrollbar-thumb { background: #414755; border-radius: 10px; }
|
|
.glass-effect { backdrop-filter: blur(20px); background: rgba(19, 19, 19, 0.6); }
|
|
.slide-on-ice { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
|
|
.knot-shadow { shadow-[0_40px_40px_rgba(255,255,255,0.05)]; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-background text-on-surface font-body selection:bg-primary/30 overflow-hidden">
|
|
<!-- Top Navigation Anchor (Suppressing SideNav for focused task) -->
|
|
<header class="fixed top-0 right-0 left-0 z-50 h-16 flex items-center justify-between px-8 glass-effect tonal-transition-no-border">
|
|
<div class="flex items-center gap-4">
|
|
<span class="text-2xl font-black text-primary tracking-tighter">Knot</span>
|
|
<div class="h-6 w-px bg-outline-variant/30"></div>
|
|
<div class="flex items-center gap-2 bg-primary/10 px-3 py-1 rounded-full border border-primary/20">
|
|
<span class="material-symbols-outlined text-primary text-sm" style="font-variation-settings: 'FILL' 1;">screen_share</span>
|
|
<span class="text-xs font-bold text-primary tracking-wide">Демонстрация экрана</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<div class="flex -space-x-2">
|
|
<img class="w-8 h-8 rounded-full border-2 border-surface shadow-lg" data-alt="close-up portrait of a woman with curly hair in a professional studio setting with soft lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCQOYXDTe873WFSTuBViod2N2vyMKu0a8LywarkXzYhwBYLksc3-vOMZ0Qu3tenOZLlFVmee9sZ5zxMBB2LAgPcFBy7VKrJaAC1MlClaICn_6udnRhV4igPWZrY2r2ajd9cViqSE5xakaD1VWdRpzvcG6SNrDdS7ol6GZDVsurtHzG3_dfUHSCZfrony_bb79Hlr_mKZVvw2hOYznufZVYtCJeWPYEo4EssjffjNI2eU9_G_JNkQ6yefEYV6UVK5OKHBl6uQq6qpmI"/>
|
|
<img class="w-8 h-8 rounded-full border-2 border-surface shadow-lg" data-alt="headshot of a man with a beard smiling against a neutral gray background in high resolution" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD3nyMH20a9qYWETGg6HM0rCl2oXq157Bq770FFfIhYvJV7bK7lCOA6FS19bKuxey7Sij6zUndXAvb059VwJ8fPSJoNwTAZmBXS_TcNSQ59bWHyYA9U-UZ6Y7Yp2GE787b2_GpOSslXChM9I7RNzKB646rp4YD6Qs7TgYX-yAsljMvEODUGLXGhLbC_cq0CUCQPX0-QcxPn52wzcw3Gsk4vZPBL-VCWesLxp0SWO7UHwHlh9HQrwk95luPEFXFez__19BObhgGJp9c"/>
|
|
<div class="w-8 h-8 rounded-full bg-surface-container-highest border-2 border-surface flex items-center justify-center text-[10px] font-bold">+12</div>
|
|
</div>
|
|
<button class="material-symbols-outlined text-on-surface-variant hover:text-white slide-on-ice">more_vert</button>
|
|
</div>
|
|
</header>
|
|
<main class="relative h-screen w-screen flex flex-row pt-16 pb-24">
|
|
<!-- Main Area: Shared Screen -->
|
|
<section class="flex-grow relative overflow-hidden bg-surface-container-lowest m-4 rounded-3xl group">
|
|
<img class="w-full h-full object-cover" data-alt="ultra high definition screenshot of a complex data analytics dashboard with colorful charts and graphs on a dark background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD3IK-bAccF3ye36q_HNXWwuM5iEPEQnqZAP63xVytYVdgxEda-KpaHqKlznDK1Rsk3Uv-ORG89Wi9kSaI9quqMHR7Vvpiuoi-3AclxiKhBlPAGmeIuk6NMcIVWHVW2xz25DxZufv2qhANmwTITjs6nDcpMWqpUd5rdo5UMJGuYiL-WzKLKGDOAmLbxUv1J87mTniG3RVqz-5w_9BK5p531xdWXlM6kyC0j2NnKK04dV1u2LbyfGRqQZ7O0NQLAjfwikvJhet0BnUc"/>
|
|
<!-- Speaker Overlay (PIP) -->
|
|
<div class="absolute top-6 right-6 w-48 h-64 rounded-2xl overflow-hidden shadow-2xl border border-white/10 glass-effect">
|
|
<img class="w-full h-full object-cover" data-alt="close-up of a young man with glasses working on a computer in a modern home office with warm ambient lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAnnjs23HXR1h9kfp47pIQSkRHqBdoEmcHi5SAZhrEvxGz-BNQCP23QW3xklSw_OTGSTesEQmd_N2ag7-NlebVieB0p1q5mS9SKcSBDjLqvDW9Trc7WBT9zlyOekMm5wN2jbqRzwmXMqgshr1JylRtVWq8lstaCW5Z__92Z87OYXh-YBaIQrxHr1-0ik5oLjRKYWK7LlX7E6cnAKR8cpWymURSFhakJKbFt0c6bx8aYWAz9rEAXxG74XJNLbj84VzhSpmsKoE6IBSU"/>
|
|
<div class="absolute bottom-2 left-2 bg-black/40 px-2 py-0.5 rounded-lg text-[10px] backdrop-blur-md">Алексей (Вы)</div>
|
|
</div>
|
|
<!-- Bottom Participant Carousel -->
|
|
<div class="absolute bottom-6 left-1/2 -translate-x-1/2 w-[90%] flex gap-4 overflow-x-auto custom-scrollbar py-2">
|
|
<div class="flex-shrink-0 w-40 h-28 rounded-xl overflow-hidden border-2 border-transparent hover:border-primary/50 slide-on-ice relative">
|
|
<img class="w-full h-full object-cover" data-alt="portrait of a woman laughing during a video call in a bright airy living room" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCJeI0aiu0U6y55kNUPb0tZckdLqwz_QHL2_7KgjW_PJioO3i4aYq7_seK5drya6JXL3-Z-51Cc-Cy7TCberW1u03lcdj4cnycJ-nxQBcdMpUOV7fFS6yoMJyC6G40blkW7SbzwbufoB0LYTUPtRH7PB1u_Sa58D3_XfLcfxJ0QgYBeeh8sGbhdzB5fI65TyIhDaYPkq0kQVAvnSdOH-oi46mjBc8gqBVqftO46r455P1WRp3jHUBJXwFwnsRfq3hcIH2dO9nv7z28"/>
|
|
<div class="absolute bottom-2 left-2 text-[10px] font-medium bg-black/40 px-2 py-0.5 rounded backdrop-blur-md text-white">Мария</div>
|
|
</div>
|
|
<div class="flex-shrink-0 w-40 h-28 rounded-xl overflow-hidden border-2 border-primary slide-on-ice relative">
|
|
<img class="w-full h-full object-cover" data-alt="professional man in a dark suit speaking during a conference call in a corporate boardroom" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA2WOavNmTknvL8z4wCh9WOSUKm6wgstUrPksi9C0gu5HuEJya4YOHbyYNGl9_1zkZICCLUs6xrTsxEAtAyODT_ubsV1g9gqSFZwHMxEaUlFErsyihLozMPD2rR9ukuKSN8n3XNAZMtICi-VKwosine_V-hkiNftKIgAABDnCtzVCJ62BbuCS40oxNAWQJ4yDLMTnWgIMPqL3IfDWOOzRj45pFzIfAFMVzN8tXS5xUNizJELBJV8-QeZAid8cU1LO98o3d6ESnr9NY"/>
|
|
<div class="absolute top-2 right-2 flex gap-1">
|
|
<span class="material-symbols-outlined text-primary text-xs" style="font-variation-settings: 'FILL' 1;">mic</span>
|
|
</div>
|
|
<div class="absolute bottom-2 left-2 text-[10px] font-medium bg-black/40 px-2 py-0.5 rounded backdrop-blur-md text-white">Дмитрий • Говорит</div>
|
|
</div>
|
|
<div class="flex-shrink-0 w-40 h-28 rounded-xl overflow-hidden border-2 border-transparent relative">
|
|
<div class="w-full h-full bg-surface-container-high flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-on-surface-variant text-4xl">person</span>
|
|
</div>
|
|
<div class="absolute bottom-2 left-2 text-[10px] font-medium bg-black/40 px-2 py-0.5 rounded backdrop-blur-md text-white">Елена (камера выкл.)</div>
|
|
</div>
|
|
<div class="flex-shrink-0 w-40 h-28 rounded-xl overflow-hidden border-2 border-transparent relative">
|
|
<img class="w-full h-full object-cover" data-alt="middle aged man with glasses listening intently during a remote meeting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAzchHleDnFE6W2f1wDeb-0VonPovw_7pPqj_0xcps0qvuH6AsCaGTcCVBs8tmM2-VCk-rOJvlvSprmX4cHXo-pxNTbwIYrumDCZgKiA9TQVrpZ3MRUWRhQkNwcOnzB7JdFwAiUwMvYAg23XT2AMPhcVphsFp5hshZMqurB3ibeS5SD4AZdGBQrY2iSwuap3fwdIt4Yijlv3S521W-CQrw-CvWhDfdK68l33ezycotFOsnUihuMvq2VRs6QgGWHUT4vPBZgD2oeeeM"/>
|
|
<div class="absolute bottom-2 left-2 text-[10px] font-medium bg-black/40 px-2 py-0.5 rounded backdrop-blur-md text-white">Виктор</div>
|
|
</div>
|
|
<div class="flex-shrink-0 w-40 h-28 rounded-xl overflow-hidden border-2 border-transparent relative">
|
|
<img class="w-full h-full object-cover" data-alt="young businesswoman smiling during a video presentation" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCtseBhAbV_1DAS-i2THnsV9lK8TT23CFeIt2E8pdFvNWPgd2RbGERr7LOYcHL_Wk97lW9Xn-ROM1VPXZ_rkvpig8zEJ1QQUFlzWlhSZ1rIA2tq0f2-foxB55ZbkcjvMzYVrhqJS6TtL6oUrW7DkLjLFdJoNz5km6caP9h613A9BbS7187zOX9kC8SY9YMcw2NqAsIYbyd-TlbeaJIJ4xRNaekW56CRYhgcoYOoqPjWYiM4gQCjYgmz7Qatoek_AMy50ki80Yk4Ing"/>
|
|
<div class="absolute bottom-2 left-2 text-[10px] font-medium bg-black/40 px-2 py-0.5 rounded backdrop-blur-md text-white">Ольга</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Side Panel: Chat -->
|
|
<aside class="w-96 flex flex-col bg-surface-container-low mr-4 my-4 rounded-3xl overflow-hidden border-none">
|
|
<div class="p-6 flex items-center justify-between border-b border-outline-variant/10">
|
|
<h2 class="headline-sm font-bold text-white tracking-tight">Чат встречи</h2>
|
|
<button class="material-symbols-outlined text-on-surface-variant hover:text-white slide-on-ice">close</button>
|
|
</div>
|
|
<div class="flex-grow overflow-y-auto p-6 space-y-6 custom-scrollbar">
|
|
<!-- Chat Message Incoming -->
|
|
<div class="flex flex-col gap-1 items-start max-w-[85%]">
|
|
<div class="flex items-center gap-2 mb-1">
|
|
<span class="text-[10px] font-bold text-primary">Дмитрий</span>
|
|
<span class="text-[9px] text-on-surface-variant">14:20</span>
|
|
</div>
|
|
<div class="bg-secondary-container text-on-secondary-container p-3 rounded-2xl rounded-tl-sm text-sm leading-relaxed">
|
|
Коллеги, я вывел текущие показатели на экран. Видно всем?
|
|
</div>
|
|
</div>
|
|
<!-- Chat Message Outgoing (Me) -->
|
|
<div class="flex flex-col gap-1 items-end ml-auto max-w-[85%]">
|
|
<div class="flex items-center gap-2 mb-1">
|
|
<span class="text-[9px] text-on-surface-variant">14:21</span>
|
|
<span class="text-[10px] font-bold text-tertiary">Вы</span>
|
|
</div>
|
|
<div class="bg-primary-container text-on-primary-container p-3 rounded-2xl rounded-tr-sm text-sm leading-relaxed">
|
|
Да, все отлично видно. Цифры по второму кварталу впечатляют.
|
|
</div>
|
|
</div>
|
|
<!-- Chat Message Incoming -->
|
|
<div class="flex flex-col gap-1 items-start max-w-[85%]">
|
|
<div class="flex items-center gap-2 mb-1">
|
|
<span class="text-[10px] font-bold text-primary">Ольга</span>
|
|
<span class="text-[9px] text-on-surface-variant">14:22</span>
|
|
</div>
|
|
<div class="bg-secondary-container text-on-secondary-container p-3 rounded-2xl rounded-tl-sm text-sm leading-relaxed">
|
|
Можем ли мы подробнее разобрать сегмент B2B?
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Chat Input -->
|
|
<div class="p-6 pt-0">
|
|
<div class="relative bg-surface-container-highest rounded-full px-4 py-3 flex items-center gap-2 group transition-all duration-300 focus-within:bg-surface-bright">
|
|
<input class="bg-transparent border-none focus:ring-0 text-sm flex-grow placeholder:text-on-surface-variant/50" placeholder="Напишите сообщение..." type="text"/>
|
|
<button class="material-symbols-outlined text-primary slide-on-ice hover:scale-110">send</button>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</main>
|
|
<!-- Control Bar (Floating Bottom) -->
|
|
<div class="fixed bottom-8 left-1/2 -translate-x-1/2 z-50 flex items-center gap-4 bg-surface-container-high/80 backdrop-blur-2xl px-6 py-4 rounded-full shadow-2xl border border-white/5 slide-on-ice">
|
|
<!-- Mic -->
|
|
<button class="w-12 h-12 rounded-full flex items-center justify-center bg-surface-container-highest text-white hover:bg-surface-bright slide-on-ice group">
|
|
<span class="material-symbols-outlined group-active:scale-90 transition-transform">mic</span>
|
|
</button>
|
|
<!-- Camera -->
|
|
<button class="w-12 h-12 rounded-full flex items-center justify-center bg-surface-container-highest text-white hover:bg-surface-bright slide-on-ice group">
|
|
<span class="material-symbols-outlined group-active:scale-90 transition-transform">videocam</span>
|
|
</button>
|
|
<!-- Screen Share (Active State) -->
|
|
<button class="w-12 h-12 rounded-full flex items-center justify-center bg-primary text-on-primary-container shadow-lg shadow-primary/20 slide-on-ice group">
|
|
<span class="material-symbols-outlined group-active:scale-90 transition-transform" style="font-variation-settings: 'FILL' 1;">screen_share</span>
|
|
</button>
|
|
<!-- Divider -->
|
|
<div class="w-px h-8 bg-outline-variant/20 mx-2"></div>
|
|
<!-- Minimize -->
|
|
<button class="w-12 h-12 rounded-full flex items-center justify-center bg-surface-container-highest text-white hover:bg-surface-bright slide-on-ice group">
|
|
<span class="material-symbols-outlined group-active:scale-90 transition-transform">picture_in_picture_alt</span>
|
|
</button>
|
|
<!-- End Call (Red) -->
|
|
<button class="px-6 h-12 rounded-full flex items-center justify-center bg-error text-on-error hover:opacity-90 slide-on-ice group gap-2">
|
|
<span class="material-symbols-outlined group-active:scale-90 transition-transform" style="font-variation-settings: 'FILL' 1;">call_end</span>
|
|
<span class="text-sm font-bold uppercase tracking-widest">Завершить</span>
|
|
</button>
|
|
</div>
|
|
</body></html> |