Новый стиль
This commit is contained in:
Халимов Рустам
@@ -0,0 +1,217 @@
|
||||
<!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>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1008 KiB |
@@ -0,0 +1,305 @@
|
||||
<!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;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;
|
||||
}
|
||||
.contrast-bg-shift-no-border {
|
||||
border: none !important;
|
||||
}
|
||||
.tonal-transition-no-border {
|
||||
border: none !important;
|
||||
}
|
||||
.slide-on-ice {
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background font-body antialiased selection:bg-primary-container/30">
|
||||
<!-- SideNavBar Shell -->
|
||||
<aside class="fixed left-0 top-0 h-full z-40 flex flex-col border-none bg-[#201F1F] dark:bg-[#201F1F] h-screen w-20 items-center py-6 font-['Inter'] text-sm leading-[1.6] antialiased">
|
||||
<div class="mb-10 text-2xl font-black text-[#9ACBFF] tracking-tighter">Knot</div>
|
||||
<nav class="flex flex-col gap-6 w-full px-2">
|
||||
<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 transition-transform cubic-bezier(0.4,0,0.2,1)">
|
||||
<span class="material-symbols-outlined mb-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 transition-transform cubic-bezier(0.4,0,0.2,1)">
|
||||
<span class="material-symbols-outlined mb-1">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 transition-transform cubic-bezier(0.4,0,0.2,1)">
|
||||
<span class="material-symbols-outlined mb-1">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 transition-transform cubic-bezier(0.4,0,0.2,1)">
|
||||
<span class="material-symbols-outlined mb-1">archive</span>
|
||||
<span class="text-[10px]">Архив</span>
|
||||
</button>
|
||||
<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 transition-transform cubic-bezier(0.4,0,0.2,1)">
|
||||
<span class="material-symbols-outlined mb-1">settings</span>
|
||||
<span class="text-[10px]">Настройки</span>
|
||||
</button>
|
||||
</nav>
|
||||
<div class="mt-auto flex flex-col items-center gap-6">
|
||||
<button class="text-on-surface-variant hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined">dark_mode</span>
|
||||
</button>
|
||||
<img alt="User profile knot anchor" class="w-10 h-10 rounded-full outline outline-2 outline-variant/10" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAlJaSKuQXbwDLkELRY0G419NbhzCCWvoWX0rli-EoWYgxdrmYV4xcIC0pGKvhvFg_QNd2xJBMI_scy59vAAOpGF7RZ6ZP2cwOmGSs-zbL6x4YoT5Fq2ml1iuI0Td83fTJSZp2p0AYSjGwbdDE0OaxAIGhbXbQcFJkYsq8P3sdNaEBdysjA39BRGEaMS7kKzfL-1K9q21BbahowAXmRQcbvwNAbkV2QKy4HAYJa5U1rUBpjzS8SJWge6EfXA9ENkAqSeEkJwQQxiig"/>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="ml-20 min-h-screen bg-surface-container-lowest">
|
||||
<!-- Header -->
|
||||
<header class="fixed top-0 right-0 left-20 z-30 flex items-center justify-between px-8 bg-[#131313]/60 backdrop-blur-xl docked full-width h-16 tonal-transition-no-border shadow-[0_40px_40px_rgba(255,255,255,0.05)]">
|
||||
<div class="flex items-center gap-4">
|
||||
<h1 class="headline-sm font-bold text-[#FFFFFF] tracking-tight">Настройки профиля</h1>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="p-2 text-[#939090] hover:opacity-80 transition-opacity">
|
||||
<span class="material-symbols-outlined">search</span>
|
||||
</button>
|
||||
<button class="p-2 text-[#939090] hover:opacity-80 transition-opacity">
|
||||
<span class="material-symbols-outlined">more_vert</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<div class="pt-24 pb-12 px-8 max-w-6xl mx-auto space-y-8">
|
||||
<!-- Hero Profile Section: Bento Style -->
|
||||
<section class="grid grid-cols-1 lg:grid-cols-12 gap-6">
|
||||
<div class="lg:col-span-8 bg-surface-container rounded-[2rem] p-8 flex flex-col md:flex-row items-center md:items-start gap-8 relative overflow-hidden">
|
||||
<!-- Background Accent -->
|
||||
<div class="absolute -top-24 -right-24 w-64 h-64 bg-primary/10 blur-[80px] rounded-full"></div>
|
||||
<div class="relative group">
|
||||
<img class="w-32 h-32 md:w-40 md:h-40 rounded-full object-cover border-4 border-surface-container-high shadow-xl transition-transform duration-500 group-hover:scale-105" data-alt="Modern cinematic portrait of a creative professional with short dark hair and stylish glasses, soft studio lighting on dark background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDGZ8-0i3dYZfuHmJsgDu1hQKDtBu_SH6Q7FKmWop9nAc1iplh4qQCUadWuFGPIv1xGEUjEtWt8Tt0bs-2JwFU4ptCuAgGPZibOmomHjXlBWX-35d31KwHeEOrcffLHqtPkXapcFWT_ILpQNVRnkm0IuanRk9ja0J7uRATmfOp6iColHAw-MRc7j9CnHGzWx0Gp-5Xshsf9jREBPERoXaJrZWuG_BWv5fqD3CSucUypP5-UlV3WbtK01adCo90g52xgLOG5sNrtFLQ"/>
|
||||
<button class="absolute bottom-1 right-1 bg-primary text-on-primary p-2 rounded-full shadow-lg hover:scale-110 transition-transform">
|
||||
<span class="material-symbols-outlined text-sm">edit</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex-1 text-center md:text-left space-y-2">
|
||||
<div class="flex flex-col md:flex-row md:items-center gap-3">
|
||||
<h2 class="text-3xl font-extrabold tracking-tight">Александр Волков</h2>
|
||||
<span class="px-3 py-1 bg-tertiary-container/20 text-tertiary text-xs font-bold rounded-full w-fit mx-auto md:mx-0">В СЕТИ</span>
|
||||
</div>
|
||||
<p class="text-on-surface-variant text-lg">Product Designer • Кофе и интерфейсы</p>
|
||||
<div class="pt-4 flex flex-wrap justify-center md:justify-start gap-3">
|
||||
<button class="px-6 py-2.5 bg-gradient-to-br from-primary to-primary-container text-on-primary font-bold rounded-xl shadow-lg hover:brightness-110 active:scale-95 transition-all">
|
||||
Редактировать профиль
|
||||
</button>
|
||||
<button class="px-6 py-2.5 bg-surface-container-high text-on-surface font-semibold rounded-xl hover:bg-surface-bright transition-colors">
|
||||
Поделиться
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Info Card -->
|
||||
<div class="lg:col-span-4 bg-surface-container rounded-[2rem] p-8 space-y-6">
|
||||
<h3 class="text-on-surface-variant font-bold text-xs uppercase tracking-widest">Информация</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-4 group">
|
||||
<div class="w-10 h-10 rounded-xl bg-surface-container-high flex items-center justify-center text-primary group-hover:bg-primary group-hover:text-on-primary transition-colors">
|
||||
<span class="material-symbols-outlined">call</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-bold text-on-surface">+7 900 123-45-67</p>
|
||||
<p class="text-[10px] text-on-surface-variant">Мобильный</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 group">
|
||||
<div class="w-10 h-10 rounded-xl bg-surface-container-high flex items-center justify-center text-primary group-hover:bg-primary group-hover:text-on-primary transition-colors">
|
||||
<span class="material-symbols-outlined">alternate_email</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-bold text-on-surface">@volkov_design</p>
|
||||
<p class="text-[10px] text-on-surface-variant">Имя пользователя</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 group">
|
||||
<div class="w-10 h-10 rounded-xl bg-surface-container-high flex items-center justify-center text-primary group-hover:bg-primary group-hover:text-on-primary transition-colors">
|
||||
<span class="material-symbols-outlined">info</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-bold text-on-surface">Создаю будущее в Knot</p>
|
||||
<p class="text-[10px] text-on-surface-variant">О себе</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Grid Layout for Settings and Content -->
|
||||
<section class="grid grid-cols-1 lg:grid-cols-12 gap-8">
|
||||
<!-- Settings Column -->
|
||||
<div class="lg:col-span-4 space-y-6">
|
||||
<div class="bg-surface-container rounded-[2rem] p-6 space-y-2">
|
||||
<h3 class="px-2 pb-4 text-on-surface-variant font-bold text-xs uppercase tracking-widest">Настройки</h3>
|
||||
<button class="w-full flex items-center justify-between p-3 rounded-2xl hover:bg-surface-container-high transition-colors group">
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary transition-colors">lock</span>
|
||||
<span class="font-medium">Конфиденциальность</span>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-on-surface-variant">chevron_right</span>
|
||||
</button>
|
||||
<button class="w-full flex items-center justify-between p-3 rounded-2xl hover:bg-surface-container-high transition-colors group">
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary transition-colors">notifications</span>
|
||||
<span class="font-medium">Уведомления</span>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-on-surface-variant">chevron_right</span>
|
||||
</button>
|
||||
<button class="w-full flex items-center justify-between p-3 rounded-2xl hover:bg-surface-container-high transition-colors group">
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary transition-colors">database</span>
|
||||
<span class="font-medium">Данные и память</span>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-on-surface-variant">chevron_right</span>
|
||||
</button>
|
||||
<button class="w-full flex items-center justify-between p-3 rounded-2xl hover:bg-surface-container-high transition-colors group">
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary transition-colors">language</span>
|
||||
<span class="font-medium">Язык</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs text-on-surface-variant">Русский</span>
|
||||
<span class="material-symbols-outlined text-on-surface-variant">chevron_right</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Shared Groups -->
|
||||
<div class="bg-surface-container rounded-[2rem] p-6 space-y-6">
|
||||
<h3 class="text-on-surface-variant font-bold text-xs uppercase tracking-widest">Общие группы</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-4 p-2 rounded-2xl hover:bg-surface-container-high transition-colors cursor-pointer group">
|
||||
<img class="w-10 h-10 rounded-full" data-alt="vibrant abstract startup team logo with neon highlights and geometric shapes" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBRX7TJtpA_07qcPYrm4PEEQBxcaZ2-S3XH68m9xHAo55Npm3TfJMLN_cOVawrj032r85PgFovGE5oijDukO10xYWP3e_Unuvv1f4pdnSpgpckzcY3I2KVNOK2ImhxkaNoP89863eOfELlazHMWfHQPIVD6BvK2ANmWNpN4Iin5mX9zcVwSDH1nkuskjl6W4UvkUnCZ-Bs7kIW2J1FqB-DNf9QvFBDfky560X69mPYi2BDkJHpGhLvemE2n6w-GZupGxrViwzuhYok"/>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-bold">Knot Design Team</p>
|
||||
<p class="text-[10px] text-on-surface-variant">42 участника</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 p-2 rounded-2xl hover:bg-surface-container-high transition-colors cursor-pointer group">
|
||||
<img class="w-10 h-10 rounded-full" data-alt="minimalist aesthetic coffee shop branding with earthy tones and elegant typography" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDovZ3Y5-57xWYNlYPsBsklIlfHdzKsRxlJq7DpcrhlVaqSoB4XILLNKpE7lo4OHMilxSbNR_rw5Wq3_6Mc_Nq2Jv8sfIkEDzI023N2iN4NxJjA4S3NMRqvxdHU5tAIBzIjG3a7QUyVR7WNe2BxqyikaPTQg-av0Wc6fREkoj-CQ4_x7j_BzcxI04eA1htXB2ySKP7y4xtC-V1cLzG-burfNDCQo0IqBTEAwMaRbKvGCZT-Odf-kFWHr_hVvNWp0hJLoDN_pco0q7A"/>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-bold">Coffee & Pixels</p>
|
||||
<p class="text-[10px] text-on-surface-variant">128 участников</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="w-full py-3 text-primary text-sm font-bold hover:underline">Показать все (8)</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Media/Files Tabs Column -->
|
||||
<div class="lg:col-span-8 space-y-6">
|
||||
<div class="bg-surface-container rounded-[2rem] p-8 min-h-[500px] flex flex-col">
|
||||
<nav class="flex gap-8 border-b border-outline-variant/10 mb-8 overflow-x-auto no-scrollbar">
|
||||
<button class="pb-4 border-b-2 border-primary text-primary font-bold text-sm whitespace-nowrap">Медиа</button>
|
||||
<button class="pb-4 text-on-surface-variant hover:text-on-surface font-medium text-sm whitespace-nowrap transition-colors">Файлы</button>
|
||||
<button class="pb-4 text-on-surface-variant hover:text-on-surface font-medium text-sm whitespace-nowrap transition-colors">Ссылки</button>
|
||||
<button class="pb-4 text-on-surface-variant hover:text-on-surface font-medium text-sm whitespace-nowrap transition-colors">Голосовые</button>
|
||||
</nav>
|
||||
<!-- Media Grid (Asymmetric) -->
|
||||
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 flex-1">
|
||||
<div class="aspect-square bg-surface-container-high rounded-2xl overflow-hidden group cursor-pointer">
|
||||
<img class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" data-alt="high contrast architectural photo of modern skyscraper geometry against deep blue sky" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDdOxqzyl8aW7sWpufyMn78TvwBDolP6M2ehGCkj5qdHJERP4NHccOLqMVWMOVeDDHVaCiPzpjPa4PHRsRg11223anpvAnXs3Aj4n_AdsYBqAlFJk1v-B5oCEOWfjkl_Zws0evvCmLKp2lQj7CSnxiAH8Q8O0sRccSdSf7Fhr3zAeKry3ZdmL-6fi3dtE4ZZ-tnTao8rGCYKhmHNaDFyRkluyhwrU0G7aMyqml9ZN2bPBUqfKjNVv-l7UQGivZPgUU61pjUZzToxpA"/>
|
||||
</div>
|
||||
<div class="aspect-square bg-surface-container-high rounded-2xl overflow-hidden group cursor-pointer">
|
||||
<img class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" data-alt="soft focus close up of pink cherry blossom petals with morning dew in gentle natural light" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDrgHA0CO99sFYILC8um0PPygbkY81us1wSIJDtSbVlgHu6WPFXJxyDPHEDWFvNomMlwXUAmwjfOFKp5RhKpn1GAhch_D0ytQD3NzLSCXYAdsFeboQ1EuQu9lKUqGMePvMF5JwTKN8qui5GGps1SWQ_bT08fj-nfb2ef9BFxBpjxtzt4tOR8NG1gLXbLE6cw3yzxkwbcaSpZMVwTl02Dn_R6HzxXQ7Rgitzr34Nef7LDmTrjDn6UguJv4yZ6hGAj338BKZFvHPKkYc"/>
|
||||
</div>
|
||||
<div class="aspect-square bg-surface-container-high rounded-2xl overflow-hidden group cursor-pointer relative">
|
||||
<img class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" data-alt="futuristic dark interior with glowing blue neon lines and polished concrete floors" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBfWWylzZ8tD-3t9HMIe12SdJi0bZUHUGwFLJRGTNBbUcPRw8iR44PqAjtAJUzvC39-NTeqoje4-v5tsVjv6ZjOSvYBYsOpkO463D6MNnNdvsUNukSVjV3MJkxtpw3DsPREOAGaxJFqBzqrYQFhR_f37xVlvzmsFwXVO24rOJPMx2PKQm1BM-hJwEEfDPGxLDBSWCCPXHSdsoOFpSzTQX1AKQNLxBn6EYQxgIatxm5WZ0oZzD92b0wSi4TbIR_Pui9vPqy0uTba0ZE"/>
|
||||
<div class="absolute inset-0 bg-black/40 flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-white text-3xl">play_circle</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aspect-square bg-surface-container-high rounded-2xl overflow-hidden group cursor-pointer">
|
||||
<img class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" data-alt="abstract flowing liquid metal texture with holographic iridescent colors and deep shadows" src="https://lh3.googleusercontent.com/aida-public/AB6AXuARjdQ2uhAK5itrlQLsf_tmx-QzJ-VjJNGhzNMWKeqxFpENULfntf2Dg_H3zQ7QXUQ95Y8IJGO0IlkzT1GMK6393He26dxkYwS-s_zse4zp3TpDgsc20g7qrUWCefsebWRZlsZLkRGu7g8IEA0WHq1Jh4Z7fl5hXO80P1ggU0ruGeYPs5CcWIDmehjZ-TIcwEeSvpMnJSV_M-iVXsDJmSyK40gcKc1P3epdHnnQR73oHv9IX2x-ZMWK3xdcQ2jscfelBy7VMxjBBo8"/>
|
||||
</div>
|
||||
<div class="aspect-square bg-surface-container-high rounded-2xl overflow-hidden group cursor-pointer">
|
||||
<img class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" data-alt="moody urban street photography at night with rain reflections and yellow city lights" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAi68xAqDFsknkJZ3ajeDyA9mN_ElfhpXWwIn1NZkXBcFBq66W83BPaGvacHQO280JtF-p4BkAlsv-OZjreVYE7qEQgqomgHhcQ9xoeKJk0dyWYwh2_Pc1EW6EF7sCJIIgc1PPPdH_Z-omtBZkF7qsnDBnJaRuaGoe-is-meZX7N21nWvAuMeXDLrw_agQ0f7WFRf6crayzYl3cqkcWLV4bf0QhtSXoSTPT8J3hSX9S1XmJuDayOEGN7ljrH0WGqPRmgAh7GA-T0ls"/>
|
||||
</div>
|
||||
<div class="aspect-square bg-surface-container-high rounded-2xl flex items-center justify-center group cursor-pointer hover:bg-surface-bright transition-colors">
|
||||
<span class="material-symbols-outlined text-primary text-4xl">add</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Empty State Example (Hidden by default but ready) -->
|
||||
<div class="hidden flex-col items-center justify-center py-20 text-center space-y-4">
|
||||
<span class="material-symbols-outlined text-6xl text-on-surface-variant/20">photo_library</span>
|
||||
<h4 class="text-xl font-bold text-on-surface-variant">Нет медиафайлов</h4>
|
||||
<p class="text-on-surface-variant max-w-xs">Здесь появятся фотографии и видео, которыми вы обменивались.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Contextual FAB (Suppressed on settings/profile as per instructions, but placeholder logic if needed elsewhere) -->
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 556 KiB |
@@ -0,0 +1,369 @@
|
||||
<!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;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;
|
||||
}
|
||||
.contrast-bg-shift-no-border {
|
||||
background-color: #201F1F;
|
||||
}
|
||||
.tonal-transition-no-border {
|
||||
background-color: rgba(19, 19, 19, 0.6);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
.slide-on-ice {
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
body {
|
||||
background-color: #131313;
|
||||
color: #e5e2e1;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: #353534;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="flex h-screen overflow-hidden">
|
||||
<!-- SideNavBar (Authority: JSON & Design System) -->
|
||||
<nav class="fixed left-0 top-0 h-full z-40 flex flex-col border-none bg-[#201F1F] dark:bg-[#201F1F] h-screen w-20 flex flex-col 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) -->
|
||||
<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 transition-transform cubic-bezier(0.4,0,0.2,1)" 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 text-[#939090] p-3 hover:bg-[#201F1F] hover:text-[#9ACBFF] transition-colors scale-95 active:scale-90 transition-transform cubic-bezier(0.4,0,0.2,1)" 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 transition-transform cubic-bezier(0.4,0,0.2,1)" 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 transition-transform cubic-bezier(0.4,0,0.2,1)" href="#">
|
||||
<span class="material-symbols-outlined mb-1" data-icon="archive">archive</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 transition-transform cubic-bezier(0.4,0,0.2,1)" href="#">
|
||||
<span class="material-symbols-outlined mb-1" data-icon="settings">settings</span>
|
||||
<span class="text-[10px]">Настройки</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-auto">
|
||||
<img alt="User profile knot anchor" class="w-10 h-10 rounded-full border-2 border-outline-variant/10" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAMItyxSRMCM8e1vaJvyyqzYsVBaAoyqSkEhSN0kmn3W7A7Rc_oCJSSmHVzT7IAgrsDQmkUwu2AiEyamkLCx7HVLCZImvyM62Xa3INKhRDAkqK8aV8W63ZuTDOLEI_MkQlpjxXq3CeHwUw1ZWQeFsANuie8SIaZnQPxI_E51PRjYziwvB1B6rknQ0gEt2-oK5EU9ewmHXLr00JtA4isMgFN4_lZQxY8akg2FG7h-RbFir-uNN72AYnA68OGoS0XwFdAPLx3iEn4U2A"/>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="ml-20 flex-1 flex flex-col relative bg-surface-dim">
|
||||
<!-- TopAppBar -->
|
||||
<header class="fixed top-0 right-0 left-20 z-30 flex items-center justify-between px-8 bg-[#131313]/60 backdrop-blur-xl docked full-width top-0 h-16 tonal-transition-no-border shadow-[0_40px_40px_rgba(255,255,255,0.05)]">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="relative">
|
||||
<img alt="Group Icon" class="w-10 h-10 rounded-full border-2 border-outline-variant/10" data-alt="vibrant abstract spaceship icon on a dark circular background with professional lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAbWHWaMw9RAPyagQDKKctb1D0Vj0TUftqzZi7x9CBKq1ddTAz8xND0esDaQZt7-shmmJAObzGoETmq_kFN_fomI7_o6OXIE82N3KImQYZaiclcL2U20YOjGLHyIvFya2G2_vxWxcrCxbB_Ue3Tafsz1YWuG9ro7ZwLqrLiolDuzBOI8HUqg9rMtaye_xh6MtSyOHn9u8d-gZX4MXDs2PTdza2Mn-Jl5VaYuDstx4g_WzP5skvFpVfdow5DTamm8qoQnyen5dWJvnQ"/>
|
||||
<div class="absolute bottom-0 right-0 w-3 h-3 bg-tertiary rounded-full border-2 border-surface"></div>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="headline-sm font-bold text-[#FFFFFF] tracking-tight">Дизайн-команда Knot</h1>
|
||||
<p class="text-[10px] text-on-surface-variant uppercase tracking-widest">128 участников • 42 онлайн</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<button class="text-[#9ACBFF] hover:opacity-80 transition-opacity slide-on-ice">
|
||||
<span class="material-symbols-outlined" data-icon="videocam">videocam</span>
|
||||
</button>
|
||||
<button class="text-[#9ACBFF] hover:opacity-80 transition-opacity slide-on-ice">
|
||||
<span class="material-symbols-outlined" data-icon="call">call</span>
|
||||
</button>
|
||||
<button class="text-[#9ACBFF] hover:opacity-80 transition-opacity slide-on-ice">
|
||||
<span class="material-symbols-outlined" data-icon="more_vert">more_vert</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Pinned Message Banner -->
|
||||
<div class="mt-16 bg-surface-container-low px-8 py-2 flex items-center gap-3 border-l-4 border-primary shadow-sm z-20">
|
||||
<span class="material-symbols-outlined text-primary text-sm" data-icon="push_pin">push_pin</span>
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<p class="text-xs text-on-surface-variant font-medium truncate">Закреплённое сообщение: Дедлайн по редизайну — пятница, 18:00. Просьба всех обновить статусы.</p>
|
||||
</div>
|
||||
<button class="text-on-surface-variant hover:text-on-surface transition-colors">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="close">close</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Chat Area -->
|
||||
<div class="flex-1 overflow-y-auto px-8 py-6 flex flex-col gap-6 custom-scrollbar">
|
||||
<!-- System Message -->
|
||||
<div class="flex justify-center">
|
||||
<span class="bg-surface-container-highest/30 px-4 py-1 rounded-full text-[11px] text-on-surface-variant font-medium">Алексей Смирнов присоединился к группе по ссылке</span>
|
||||
</div>
|
||||
<!-- Incoming Message (User 1) -->
|
||||
<div class="flex items-end gap-3 max-w-[80%] group">
|
||||
<img alt="Avatar" class="w-8 h-8 rounded-full mb-1 border-2 border-outline-variant/10" data-alt="portrait of a creative man with glasses in a soft studio lighting with dark background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDV0m2KbS4UYoia-ARAro07qfE2D2rga-mp752lKxrvxvEzSl_cmmvNJq1iPK0jeTn12fqO33I3COTkpksNXidC5dZT7Bno2JhmVvaZNdrTvLa48FJ-RGLLVRdI2lTx9cbBAxk9Xr_lRRh9gCKeFUB_ul-XNS26mtHizIcDFb1VkJsYTE-kcGoHhDAYC9i4Tx7YTWBfSpkhx1p3Vs1LHA_0wEtKCt1rONuuANJJhYc7tWv730vMTRVoXpKt1JOyd6PcujkjFGFTr-s"/>
|
||||
<div class="flex flex-col gap-1">
|
||||
<span class="text-[11px] font-bold text-tertiary-fixed-dim ml-2">Анна Морозова</span>
|
||||
<div class="bg-secondary-container text-on-secondary-container rounded-xl rounded-bl-sm p-4 relative">
|
||||
<p class="body-lg leading-[1.6]">Коллеги, я подготовила наброски для нового BottomNavBar. Посмотрите, пожалуйста, в Figma. Основной упор сделала на "Kinetic Connection".</p>
|
||||
<div class="flex gap-1 absolute -bottom-3 left-2">
|
||||
<span class="bg-surface-container-high px-1.5 py-0.5 rounded-full text-[10px] flex items-center gap-1 border border-outline-variant/10">🔥 4</span>
|
||||
<span class="bg-surface-container-high px-1.5 py-0.5 rounded-full text-[10px] flex items-center gap-1 border border-outline-variant/10">🚀 2</span>
|
||||
</div>
|
||||
<span class="text-[9px] text-on-surface-variant/60 absolute bottom-1 right-2">14:20</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Outgoing Message -->
|
||||
<div class="flex flex-col items-end gap-1 self-end max-w-[80%]">
|
||||
<div class="bg-gradient-to-br from-primary to-primary-container text-on-primary-container rounded-xl rounded-br-sm p-4 shadow-lg relative">
|
||||
<p class="body-lg leading-[1.6]">Отлично, Анна! Сейчас гляну. Особенно интересует реализация "No-Line" правила в переходах между секциями.</p>
|
||||
<div class="flex items-center gap-1 absolute bottom-1 right-2">
|
||||
<span class="text-[9px] text-on-primary-container/70">14:22</span>
|
||||
<span class="material-symbols-outlined text-[12px]" data-icon="done_all" style="font-variation-settings: 'FILL' 1;">done_all</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- System Message -->
|
||||
<div class="flex justify-center my-2">
|
||||
<span class="text-[11px] text-on-surface-variant/50 font-bold tracking-widest uppercase">Сегодня</span>
|
||||
</div>
|
||||
<!-- Incoming Message (User 2) -->
|
||||
<div class="flex items-end gap-3 max-w-[80%] group">
|
||||
<img alt="Avatar" class="w-8 h-8 rounded-full mb-1 border-2 border-outline-variant/10" data-alt="portrait of a focused developer with headphones in a moody blue neon lit environment" src="https://lh3.googleusercontent.com/aida-public/AB6AXuABOZJ2A8AZo9boOGjR8wt68Q8DVm1KmbapEBTl8H3pOnP3UNeXYuoCCNUr3KsmwfUdTIK0jXlJvCXcCvoa7p9xqXzzAG3UCz9y9Q4p9tpysaKbMb5i5wIto05D7lmdRSVcPGLxTO0iMXUbgAbFysYrI1e0-8BMGaQIPCT_gFM9SnBlxKm3qn6lOITtDw7486y1kNbDntQZNIvmbxpG-lN1blepP29TWOuFJKj2lN1nvsGNyFYrP7-BNV8kpTn7ck0vF38PFD0B6fY"/>
|
||||
<div class="flex flex-col gap-1">
|
||||
<span class="text-[11px] font-bold text-[#FF9ACD] ml-2">Дмитрий Петров</span>
|
||||
<div class="bg-secondary-container text-on-secondary-container rounded-xl rounded-bl-sm p-4 relative">
|
||||
<p class="body-lg leading-[1.6]">Я уже начал настраивать Tailwind-конфиг для этих переходов. Использовал Cubic Bezier (0.4, 0, 0.2, 1) как в спецификации.</p>
|
||||
<div class="flex gap-1 absolute -bottom-3 left-2">
|
||||
<span class="bg-tertiary-container/20 text-tertiary-fixed px-1.5 py-0.5 rounded-full text-[10px] flex items-center gap-1 border border-tertiary-container/30">💻 1</span>
|
||||
</div>
|
||||
<span class="text-[9px] text-on-surface-variant/60 absolute bottom-1 right-2">14:45</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Message with Image -->
|
||||
<div class="flex items-end gap-3 max-w-[80%] group">
|
||||
<img alt="Avatar" class="w-8 h-8 rounded-full mb-1 border-2 border-outline-variant/10" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAG28WgEZDmjaq4dWwnC2ZUmKXFtMI7572hmFSQaj_gKZBXDL6H-drJ5sNt-Q3xNakd7Pp0oMdD7xvjR2x3ANWbSsEjeTgKlfSw2KFmLrjP13khaSZi-RWOA_o8Vgomzgf_VUCgGCokXIPV-VdXRBV75-EtzgYwljetlQuB34RODjCt5s0lZUBjidnqkzatZOr7f_L-ZlovdLEh3amwRlmdBm_kkxsRJlf557sndXxAB6qLTHxBWvmUR687VhCLh4v5qrvNnmKaX_I"/>
|
||||
<div class="flex flex-col gap-1">
|
||||
<span class="text-[11px] font-bold text-tertiary-fixed-dim ml-2">Анна Морозова</span>
|
||||
<div class="bg-secondary-container rounded-xl rounded-bl-sm p-2 overflow-hidden max-w-sm">
|
||||
<img alt="UI Draft" class="rounded-lg w-full h-48 object-cover mb-2" data-alt="abstract modern ui dashboard layout with glassmorphism elements and glowing blue accents on a dark background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCgrXkZcMizGeuhDREidveGalc_mGeYdIHxnH-MeuP3jj3t-4cl_rgI5OnKWwAe82fij4lRuHOfZpkxHy7M97l8Z21Nn9j1CtAwxHeHSfEbkeE4IefBvAjmSo5jnWnPMRofccty5GPJPop7qYflZ9s2KRn56FN9oBhP8pxLjWRdzjUtG4wivvSnYCzxVqvrmlWEB7PhGGeJln0dGk6GnvwQH-SuSLyLTyV9HOatcfnb3uTJr2UJ7x8JP6fP59lYICXl2yUzAvbZ-hU"/>
|
||||
<p class="body-lg px-2 pb-2">Вот превью главного экрана. Что думаете?</p>
|
||||
<div class="flex justify-between items-center px-2 pb-1">
|
||||
<div class="flex gap-1">
|
||||
<span class="bg-surface-container-high px-1.5 py-0.5 rounded-full text-[10px]">❤️ 8</span>
|
||||
</div>
|
||||
<span class="text-[9px] text-on-surface-variant/60">15:02</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Message Input -->
|
||||
<footer class="p-6 bg-surface-dim">
|
||||
<div class="flex items-center gap-4 bg-surface-container-highest px-4 py-2 rounded-full focus-within:bg-surface-bright transition-all duration-300">
|
||||
<button class="text-on-surface-variant hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="add_circle">add_circle</span>
|
||||
</button>
|
||||
<input class="flex-1 bg-transparent border-none focus:ring-0 text-on-surface body-lg placeholder:text-on-surface-variant/50" placeholder="Написать сообщение..." type="text"/>
|
||||
<div class="flex items-center gap-3">
|
||||
<button class="text-on-surface-variant hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="sentiment_satisfied">sentiment_satisfied</span>
|
||||
</button>
|
||||
<button class="text-on-surface-variant hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="mic">mic</span>
|
||||
</button>
|
||||
<button class="bg-primary text-on-primary-container p-2 rounded-full flex items-center justify-center hover:scale-105 active:scale-95 transition-transform">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="send" style="font-variation-settings: 'FILL' 1;">send</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</main>
|
||||
<!-- Right Side Panel (Group Info) -->
|
||||
<aside class="w-80 bg-surface-container border-l border-outline-variant/10 h-full flex flex-col hidden lg:flex">
|
||||
<div class="p-6 flex flex-col items-center text-center">
|
||||
<div class="relative mb-4 group cursor-pointer">
|
||||
<img alt="Group Icon Big" class="w-24 h-24 rounded-full border-4 border-surface shadow-xl" data-alt="vibrant abstract spaceship icon on a dark circular background with professional lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC94nMayqkCc9lYgOS-eh0R2oG0gLZ-ENGSXbZ5dUqt3Y5Qj0VZfn5ZNqIa4_yXfy6RocbBrp-aIgfFKD2CsBI9rmZ2BafaJSMKW0eTlq0OXds_xkCQ_zLgKg3Krt2kT8_4HHkpjJdf9qECNJVk7eEeV2Mnj1Iusm8AqwY5Nl2TomITIGwXWptUbACidBfqDgoaJ4DkL2DgwqeJjdS17pgSeCrJyNMjkIYR8_TxuQmLLp6TFuuf_95Qc_uimow5TgOjnrh0TqWXIZk"/>
|
||||
<div class="absolute inset-0 bg-black/40 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<span class="material-symbols-outlined text-white" data-icon="edit">edit</span>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="headline-sm font-bold text-on-surface mb-1">Дизайн-команда Knot</h2>
|
||||
<p class="text-sm text-on-surface-variant">Группа для обсуждения интерфейсов и визуальной стратегии.</p>
|
||||
</div>
|
||||
<div class="flex-1 overflow-y-auto custom-scrollbar">
|
||||
<!-- Media/Docs Bento Preview -->
|
||||
<div class="px-6 py-4">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h3 class="label-sm font-bold uppercase tracking-widest text-on-surface-variant">Медиа и файлы</h3>
|
||||
<button class="text-xs text-primary font-bold">Все</button>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-2">
|
||||
<div class="aspect-square rounded-lg bg-surface-variant overflow-hidden">
|
||||
<img alt="media preview" class="w-full h-full object-cover" data-alt="vibrant neon geometric patterns with dark contrast and glowing lines" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCNKzWSpIaMejvpImO6GiUfro-l9gIxoeYAOG_r0j5ETdfguZWTBIoNm6wiruo4PDb6SJK24054IDNZwcUoNBwo-gbH_d59xpcgB7C-L6aMAtXkhZ9UkpbjJoHut3lnQpMdoBDH8RbvPzunas4Z2gbVixgNS2OCSN1D8pIgz7cwGYQq6f-aYHRhRNC1tSySurmjeI1WlSe6az3wqXvT7UI5geY_ad1DUggZ0kRGU_YKqaw31npC5lCc-w-ZshLZkJbsdvauiRwhUZ0"/>
|
||||
</div>
|
||||
<div class="aspect-square rounded-lg bg-surface-variant overflow-hidden">
|
||||
<img alt="media preview" class="w-full h-full object-cover" data-alt="minimalist architectural photo of a sleek modern building facade at night" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDQrihfyBqfTnUFRDCHjr40uHG9xkAEyWLOoIV4g-H8EpMkrbMaA5owaCqA494ejg6eq-02h-NP4X4Sa1vcowtUa5Bd-GIMi_DU6WPCdsUQh266L3VmwbAXikhIurS-ljHjz4csi26-4lbNJwXU6nc_05cE87dc1JwgLspmHkopsU-Eaftnj5XJ-A2tmRNmPBkT9wajuM04aW1wzKxNxlSAP0TpY7NCcYtpu-9bb0DYt8S5RA0h-N8rOjt__RpDKJCDd4Nqku41oFs"/>
|
||||
</div>
|
||||
<div class="aspect-square rounded-lg bg-surface-variant flex items-center justify-center">
|
||||
<span class="text-xs font-bold text-on-surface-variant">+24</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Members List -->
|
||||
<div class="px-6 py-4">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h3 class="label-sm font-bold uppercase tracking-widest text-on-surface-variant">Участники (128)</h3>
|
||||
<button class="text-on-surface-variant">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="search">search</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex flex-col gap-4">
|
||||
<!-- Member 1 (Admin) -->
|
||||
<div class="flex items-center justify-between group">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="relative">
|
||||
<img alt="Member" class="w-9 h-9 rounded-full" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCfEkb5y79iisA9Yy7QO-ZD8UpLjPqu7FxNRORuk5fYtwdv7SSRfXWeSpx6CqtXHr02uLQUnGr7EhxPmOExctgMTA5GDYByRoT4TTo69mBpu5_PUO-EBuCgE-eVXe0MGbHFHj3nCkThraB4lHKT7d9Bw4ENjk_NZPqrYx9emGKI_0kTpA9iYxH48f_QNkBfF24kKGflQG0rJZHhiCwMMsovVVdGIKC2Yruu8e2AjQbs9-cgIyMwhJeE3A6hjDP5fpzBrMe0zh5tQ1I"/>
|
||||
<div class="absolute bottom-0 right-0 w-2.5 h-2.5 bg-tertiary rounded-full border-2 border-surface-container"></div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-on-surface">Анна Морозова</p>
|
||||
<p class="text-[10px] text-tertiary font-bold uppercase">Владелец</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Member 2 (Admin) -->
|
||||
<div class="flex items-center justify-between group">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="relative">
|
||||
<img alt="Member" class="w-9 h-9 rounded-full" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD30XfOGEh-5_D-hQYR0OH9QIl1NQ0QHreZB25v7llJbWv3m4lIEdfZzUOhMH7PNDrvX6edccKp9E6dThgx-Ynw-WEpgbyCf2DETKXIVMJMOuLAOIIlf2IUDP_Gi1BnCJ4Y8kjIvxd5h5sJn-6oPZRIhYpdSkJpgVFd4YX-X6ajFe1pQRxVMvkyc-QaDURNhzwTcEB8PtSETqFYIy2F195DX8B-0y2lyYNtTqTyuT3w0hJjgHYjaqo2zwUkB0C_LtgZHhgtRyC-AsM"/>
|
||||
<div class="absolute bottom-0 right-0 w-2.5 h-2.5 bg-tertiary rounded-full border-2 border-surface-container"></div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-on-surface">Дмитрий Петров</p>
|
||||
<p class="text-[10px] text-primary font-bold uppercase">Админ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Member 3 (Regular) -->
|
||||
<div class="flex items-center justify-between group">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="relative">
|
||||
<img alt="Member" class="w-9 h-9 rounded-full" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD179Zxdu7W03DzO0ubizZw7AByl-tHn9ZzMFuhDXrgJ8wZGHosJCmV-871Ht6jXX7OsJk5-5VZG5Y0TVbxxSI_O1ADrU53ZWODU_U4poG7TUe4aVAc7UTri4OjEIW0gS1008cijqB4SMwjrIQpvz5RsV04epENeDeoKtD1q5jtK2TZKX21_8aA-Ng5stBfum8Hn9QiFDWzjNQfFbVhk8NgSjYRFhTzH3qmRqy_d0-SSz20kz5e-kUo_qdshC9pFwHlz1nDAOETAz4"/>
|
||||
<div class="absolute bottom-0 right-0 w-2.5 h-2.5 bg-on-surface-variant/30 rounded-full border-2 border-surface-container"></div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-on-surface">Игорь Коваль</p>
|
||||
<p class="text-[10px] text-on-surface-variant">был(а) 10 мин. назад</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Member 4 (Regular) -->
|
||||
<div class="flex items-center justify-between group">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="relative">
|
||||
<img alt="Member" class="w-9 h-9 rounded-full" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCMfEDl8p2mo_5YENauKmT3qKEPGRKcnBY5Jssz3--DLWDSN3Av_6oxNfhLL1j4RGfaUqWZZy__a4A7m3INHMQfZ26lHuS9bHuPDuLW_RzeUCNJM5jlIBlKXbaMtdTcIPG2aSdVxMaEeTHGsuxFFBmQnzrqo68MjeCHYcGBL7lUJnZ6Gpo2rzbj04Fj354Of-DEdxG597GARHuDfg2I08ecHQUhFb0odDZ6uZN3hehFNcJEdBQcWTZV0VawoTbCRYPUO-svuQUmsKY"/>
|
||||
<div class="absolute bottom-0 right-0 w-2.5 h-2.5 bg-tertiary rounded-full border-2 border-surface-container"></div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-on-surface">Ольга Лебедева</p>
|
||||
<p class="text-[10px] text-on-surface-variant">онлайн</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6 mt-auto">
|
||||
<button class="w-full flex items-center justify-center gap-2 py-3 rounded-xl bg-error/10 text-error hover:bg-error/20 transition-colors font-bold text-sm">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="logout">logout</span>
|
||||
Покинуть группу
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 450 KiB |
@@ -0,0 +1,185 @@
|
||||
<!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-variant": "#353534",
|
||||
"primary-container": "#3096e5",
|
||||
"on-surface-variant": "#c1c6d7",
|
||||
"error-container": "#93000a",
|
||||
"surface-container-low": "#1c1b1b",
|
||||
"tertiary": "#53e16f",
|
||||
"tertiary-fixed-dim": "#53e16f",
|
||||
"on-tertiary-fixed": "#002107",
|
||||
"secondary-fixed-dim": "#c7c6ca",
|
||||
"outline-variant": "#414755",
|
||||
"on-tertiary-fixed-variant": "#00531c",
|
||||
"surface-container": "#201f1f",
|
||||
"on-primary": "#003355",
|
||||
"on-error-container": "#ffdad6",
|
||||
"background": "#131313",
|
||||
"error": "#ffb4ab",
|
||||
"outline": "#8b90a0",
|
||||
"surface-container-lowest": "#0e0e0e",
|
||||
"surface-container-highest": "#353534",
|
||||
"on-secondary-fixed-variant": "#46474a",
|
||||
"secondary-container": "#48494c",
|
||||
"on-surface": "#e5e2e1",
|
||||
"surface-dim": "#131313",
|
||||
"on-background": "#e5e2e1",
|
||||
"surface": "#131313",
|
||||
"secondary": "#c7c6ca",
|
||||
"on-primary-fixed": "#001d34",
|
||||
"surface-tint": "#9acbff",
|
||||
"surface-bright": "#393939",
|
||||
"secondary-fixed": "#e3e2e6",
|
||||
"primary-fixed-dim": "#9acbff",
|
||||
"on-secondary-container": "#b9b8bc",
|
||||
"on-primary-container": "#002c4a",
|
||||
"primary": "#9acbff",
|
||||
"on-secondary": "#2f3033",
|
||||
"tertiary-fixed": "#72fe88",
|
||||
"inverse-primary": "#00629e",
|
||||
"tertiary-container": "#00a741",
|
||||
"on-primary-fixed-variant": "#004a79",
|
||||
"on-error": "#690005",
|
||||
"inverse-surface": "#e5e2e1",
|
||||
"on-tertiary-container": "#00320e",
|
||||
"on-tertiary": "#003911",
|
||||
"surface-container-high": "#2a2a2a",
|
||||
"primary-fixed": "#cfe5ff",
|
||||
"on-secondary-fixed": "#1a1b1e",
|
||||
"inverse-on-surface": "#313030"
|
||||
},
|
||||
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;
|
||||
}
|
||||
body {
|
||||
background-color: #131313;
|
||||
color: #e5e2e1;
|
||||
font-family: 'Inter', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
.knot-gradient {
|
||||
background: linear-gradient(135deg, #9acbff 0%, #3096e5 100%);
|
||||
}
|
||||
.glass-header {
|
||||
background: rgba(57, 57, 57, 0.6);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
input:focus ~ .input-glow {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="min-h-screen flex flex-col items-center selection:bg-primary/30">
|
||||
<!-- TopAppBar Fragmented Logic -->
|
||||
<header class="fixed top-0 w-full flex justify-between items-center px-6 py-4 z-50 bg-transparent">
|
||||
<div class="text-2xl font-black tracking-tighter text-[#9ACBFF] dark:text-[#9ACBFF] italic">Knot</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="text-gray-400 hover:opacity-80 transition-opacity">
|
||||
<span class="material-symbols-outlined" data-icon="more_vert">more_vert</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<main class="flex-1 w-full max-w-[420px] px-6 flex flex-col justify-center py-20 relative">
|
||||
<!-- Abstract Decoration (The Thread) -->
|
||||
<div class="absolute -top-20 -right-20 w-64 h-64 rounded-full border-[1px] border-primary/10 pointer-events-none"></div>
|
||||
<div class="absolute top-40 -left-40 w-80 h-80 rounded-full border-[1px] border-primary/5 pointer-events-none"></div>
|
||||
<!-- Identity Section -->
|
||||
<div class="mb-12">
|
||||
<h1 class="text-[3.5rem] font-black leading-[1.1] tracking-tighter mb-4 text-on-background">
|
||||
Регистрация<br/><span class="text-primary italic">в Knot</span>
|
||||
</h1>
|
||||
<p class="text-on-surface-variant body-lg max-w-[300px] leading-relaxed">
|
||||
Начните общение в новом формате. Простая регистрация без лишних данных.
|
||||
</p>
|
||||
</div>
|
||||
<!-- Registration Form -->
|
||||
<form class="space-y-6">
|
||||
<div class="space-y-5">
|
||||
<!-- Username Field -->
|
||||
<div class="group relative">
|
||||
<label class="block text-xs font-semibold tracking-widest text-on-surface-variant uppercase mb-2 ml-1" for="username">
|
||||
Имя пользователя
|
||||
</label>
|
||||
<div class="relative">
|
||||
<input class="w-full bg-surface-container-highest border-none rounded-xl px-5 py-4 text-on-surface placeholder:text-outline/50 focus:ring-2 focus:ring-primary/20 transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]" id="username" placeholder="@username" type="text"/>
|
||||
<div class="input-glow absolute inset-0 rounded-xl bg-primary/5 opacity-0 pointer-events-none transition-opacity duration-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Password Field -->
|
||||
<div class="group relative">
|
||||
<label class="block text-xs font-semibold tracking-widest text-on-surface-variant uppercase mb-2 ml-1" for="password">
|
||||
Пароль
|
||||
</label>
|
||||
<div class="relative">
|
||||
<input class="w-full bg-surface-container-highest border-none rounded-xl px-5 py-4 text-on-surface placeholder:text-outline/50 focus:ring-2 focus:ring-primary/20 transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]" id="password" placeholder="••••••••" type="password"/>
|
||||
<div class="input-glow absolute inset-0 rounded-xl bg-primary/5 opacity-0 pointer-events-none transition-opacity duration-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Repeat Password Field -->
|
||||
<div class="group relative">
|
||||
<label class="block text-xs font-semibold tracking-widest text-on-surface-variant uppercase mb-2 ml-1" for="repeat-password">
|
||||
Повторите пароль
|
||||
</label>
|
||||
<div class="relative">
|
||||
<input class="w-full bg-surface-container-highest border-none rounded-xl px-5 py-4 text-on-surface placeholder:text-outline/50 focus:ring-2 focus:ring-primary/20 transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]" id="repeat-password" placeholder="••••••••" type="password"/>
|
||||
<div class="input-glow absolute inset-0 rounded-xl bg-primary/5 opacity-0 pointer-events-none transition-opacity duration-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Primary Action -->
|
||||
<button class="w-full knot-gradient text-on-primary-container font-bold text-lg py-4 rounded-xl shadow-[0_8px_30px_rgb(48,150,229,0.3)] hover:scale-[0.98] active:scale-95 transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] mt-4" type="submit">
|
||||
Создать аккаунт
|
||||
</button>
|
||||
</form>
|
||||
<!-- Footer Link -->
|
||||
<div class="mt-8 text-center">
|
||||
<a class="text-on-surface-variant hover:text-primary transition-colors text-sm font-medium" href="#">
|
||||
Уже есть аккаунт? <span class="text-primary underline decoration-primary/30 underline-offset-4">Войти</span>
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
<!-- BottomNavBar Suppression Check: Only render if not transactional.
|
||||
But wait, the prompt asks for specific components and a minimalist screen.
|
||||
Following the "Semantic Shell" mandate: Registration is a transactional flow.
|
||||
However, for the sake of following the provided JSON as an anchor for the platform,
|
||||
we include the BottomNavBar as a visual reference of the "Registration" active state. -->
|
||||
<nav class="fixed bottom-0 left-0 w-full z-50 flex justify-around items-center px-4 pb-8 pt-4 bg-[#131313]/60 backdrop-blur-xl bg-gradient-to-t from-[#201F1F] to-transparent shadow-[0_-4px_40px_rgba(0,0,0,0.5)] rounded-t-[24px]">
|
||||
<a class="flex flex-col items-center justify-center text-gray-500 px-6 py-2 hover:text-white transition-colors" href="#">
|
||||
<span class="material-symbols-outlined mb-1" data-icon="login">login</span>
|
||||
<span class="font-['Inter'] text-[11px] font-medium tracking-wide">Вход</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center justify-center bg-[#3096E5]/20 text-[#9ACBFF] rounded-xl px-6 py-2 scale-98 transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]" href="#">
|
||||
<span class="material-symbols-outlined mb-1" data-icon="person_add">person_add</span>
|
||||
<span class="font-['Inter'] text-[11px] font-medium tracking-wide">Регистрация</span>
|
||||
</a>
|
||||
</nav>
|
||||
<!-- Decorative Canvas Elements -->
|
||||
<div class="fixed bottom-32 right-8 pointer-events-none opacity-20">
|
||||
<div class="w-24 h-24 rounded-full border-[10px] border-tertiary-container blur-2xl"></div>
|
||||
</div>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
@@ -0,0 +1,300 @@
|
||||
<!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; }
|
||||
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb { background: #353534; border-radius: 10px; }
|
||||
.glass-header { backdrop-filter: blur(20px); background: rgba(19, 19, 19, 0.6); }
|
||||
.knot-shadow { box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5); }
|
||||
.message-gradient-out { background: linear-gradient(135deg, #9ACBFF 0%, #3096E5 100%); }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-surface font-body overflow-hidden">
|
||||
<!-- Sidebar Navigation (Rail) -->
|
||||
<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 items-center">
|
||||
<!-- 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">chat</span>
|
||||
<span class="text-[10px] font-medium">Чаты</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 cubic-bezier(0.4,0,0.2,1)">
|
||||
<span class="material-symbols-outlined mb-1" data-icon="call">call</span>
|
||||
<span class="text-[10px] font-medium">Звонки</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 cubic-bezier(0.4,0,0.2,1)">
|
||||
<span class="material-symbols-outlined mb-1" data-icon="person">person</span>
|
||||
<span class="text-[10px] font-medium">Контакты</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 cubic-bezier(0.4,0,0.2,1)">
|
||||
<span class="material-symbols-outlined mb-1" data-icon="archive">archive</span>
|
||||
<span class="text-[10px] font-medium">Архив</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="mt-auto">
|
||||
<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 cubic-bezier(0.4,0,0.2,1)">
|
||||
<span class="material-symbols-outlined mb-1" data-icon="settings">settings</span>
|
||||
<span class="text-[10px] font-medium">Настройки</span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- Main Content Container -->
|
||||
<main class="ml-20 h-screen flex overflow-hidden">
|
||||
<!-- Left: Miniature Chat List (Modern Bento approach) -->
|
||||
<aside class="w-80 bg-surface-container-low flex flex-col border-none">
|
||||
<div class="p-6">
|
||||
<h1 class="headline-sm font-bold text-white tracking-tight mb-6">Чаты</h1>
|
||||
<div class="relative group">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant text-sm" data-icon="search">search</span>
|
||||
<input class="w-full bg-surface-container-highest border-none rounded-xl py-2.5 pl-10 pr-4 text-sm focus:ring-1 focus:ring-primary outline-none transition-all placeholder:text-on-surface-variant/50" placeholder="Поиск..." type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 overflow-y-auto custom-scrollbar px-3 space-y-1">
|
||||
<!-- Chat Item 1: Active -->
|
||||
<div class="p-3 bg-surface-container rounded-2xl flex items-center gap-4 cursor-pointer transition-all duration-300">
|
||||
<div class="relative">
|
||||
<img class="w-12 h-12 rounded-full ring-2 ring-primary/20" data-alt="close-up portrait of a woman with short dark hair in a professional studio setting with soft cyan ambient light" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD06H-S0vEdSKVHBzneSmjFzNkpekSWz9FvqBfav1Rv0J7Xl9ZhmCddfbY5wtoLHu3aL84akTOYgBvqyEFsLlsdBugXDEolqv2dRJ2zyenpjdyOluOKwM-uNCp4KrIXLvmZQp5MSvYjIooTyfUqrKus5ktUT8fjfe_4yCDZULrtF5SelBIr7ZbAHPmeNo0NW2kiK1WNMc0z35KCFWc3TMjGDm21n7GQgRmaa6q9rBLvTRMfLQBJPI4LFquMMJeVTTjPhJULdy0W92s"/>
|
||||
<div class="absolute bottom-0 right-0 w-3 h-3 bg-tertiary rounded-full border-2 border-surface-container-low"></div>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex justify-between items-baseline">
|
||||
<h3 class="font-bold text-sm truncate">Анна Волкова</h3>
|
||||
<span class="label-sm text-on-surface-variant">14:20</span>
|
||||
</div>
|
||||
<p class="text-xs text-primary truncate">Печатает...</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Chat Item 2 -->
|
||||
<div class="p-3 hover:bg-surface-container/50 rounded-2xl flex items-center gap-4 cursor-pointer transition-all duration-300">
|
||||
<img class="w-12 h-12 rounded-full" data-alt="profile photo of a young man with glasses and a stylish haircut against a minimalist grey background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDyHGAUNzg1HfR-AEi0jlLPBFJNqowGoHrFWnCo2GWn1HaHPzj2gT-zEnd8S9tdr405Q0n1Mq5JgdWVoDlPAsLliRXcTISfHllscmZ_dNXcNNHMGNwqB-Dn2h86Z1Gfy-zefNuwWXWwYjIxnStyt4ozxnWtV4Lc-YGXPnj1IyZosFTKuzLkkWhMqZLkkrADsOrYfGHyiVmRlPiuwtZQoU_I8zR9hScmfJhfHqAC_V91MvOdZNORI2XHabpndvu0pqmLDBuPjsxA-0Y"/>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex justify-between items-baseline">
|
||||
<h3 class="font-bold text-sm truncate">Дмитрий Соколов</h3>
|
||||
<span class="label-sm text-on-surface-variant">12:05</span>
|
||||
</div>
|
||||
<p class="text-xs text-on-surface-variant truncate">Ок, договорились!</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Chat Item 3 -->
|
||||
<div class="p-3 hover:bg-surface-container/50 rounded-2xl flex items-center gap-4 cursor-pointer transition-all duration-300">
|
||||
<div class="w-12 h-12 rounded-full bg-tertiary-container/20 flex items-center justify-center text-tertiary-fixed">
|
||||
<span class="material-symbols-outlined" data-icon="groups">groups</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex justify-between items-baseline">
|
||||
<h3 class="font-bold text-sm truncate">Дизайн Ревью</h3>
|
||||
<span class="label-sm text-on-surface-variant">Пн</span>
|
||||
</div>
|
||||
<p class="text-xs text-on-surface-variant truncate"><span class="text-white">Макс:</span> Посмотрите новый вариант логотипа...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Right: Chat Area -->
|
||||
<section class="flex-1 flex flex-col bg-surface-container-lowest relative">
|
||||
<!-- TopAppBar -->
|
||||
<header class="glass-header h-16 flex items-center justify-between px-8 z-30 tonal-transition-no-border shadow-[0_40px_40px_rgba(255,255,255,0.05)]">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="relative">
|
||||
<img class="w-10 h-10 rounded-full" data-alt="close-up portrait of a woman with short dark hair in a professional studio setting with soft cyan ambient light" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDPTKGW-8CwkyPdFY3AQ-MaYvPSpOjFFRi9zSLG6E6bB3B5QWPfnVdY4vVBBJpIbcC4z57YPSm4serdfOj0WMhGhmlqchdSusWB8zmg9DmFCwjLwh4FMunBsB7WWUYtAAQ_TVRg6xmtS40ZUI8pFfNopODIbpMwbiPoPhcYsLbjL3a7Q-sNpQIbn4xzPeWfVekD3YXkrhFuwIkCffHTbOfq-bb8tiPqDbjMMWpyqtc-LSrfCtg9YVqfdB5aFa5r98e2kFKsY3JuAt8"/>
|
||||
<div class="absolute bottom-0 right-0 w-2.5 h-2.5 bg-tertiary rounded-full border-2 border-[#131313]"></div>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="headline-sm font-bold text-[#FFFFFF] tracking-tight leading-tight">Анна Волкова</h2>
|
||||
<p class="text-[10px] text-tertiary font-medium">в сети</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button class="w-10 h-10 flex items-center justify-center rounded-xl hover:bg-surface-bright transition-all text-[#9ACBFF]">
|
||||
<span class="material-symbols-outlined" data-icon="videocam">videocam</span>
|
||||
</button>
|
||||
<button class="w-10 h-10 flex items-center justify-center rounded-xl hover:bg-surface-bright transition-all text-[#9ACBFF]">
|
||||
<span class="material-symbols-outlined" data-icon="call">call</span>
|
||||
</button>
|
||||
<button class="w-10 h-10 flex items-center justify-center rounded-xl hover:bg-surface-bright transition-all text-[#9ACBFF]">
|
||||
<span class="material-symbols-outlined" data-icon="more_vert">more_vert</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Message Thread -->
|
||||
<div class="flex-1 overflow-y-auto custom-scrollbar p-8 space-y-6">
|
||||
<!-- Date Divider -->
|
||||
<div class="flex justify-center">
|
||||
<span class="bg-surface-container px-4 py-1 rounded-full text-[10px] font-bold text-on-surface-variant tracking-widest uppercase">Сегодня</span>
|
||||
</div>
|
||||
<!-- Incoming Message with Reply -->
|
||||
<div class="flex flex-col gap-1 items-start max-w-[70%]">
|
||||
<div class="bg-surface-container text-on-surface p-4 rounded-xl rounded-bl-sm knot-shadow">
|
||||
<div class="bg-surface-variant/30 border-l-2 border-primary p-2 mb-2 rounded-lg text-xs">
|
||||
<p class="font-bold text-primary mb-0.5">Вы</p>
|
||||
<p class="truncate opacity-70 italic">Привет! Скинь пожалуйста макеты для Knot.</p>
|
||||
</div>
|
||||
<p class="body-lg leading-relaxed">Лови! Это пока черновик, но основная идея с "узлами" уже видна в навигации. Давай обсудим через 10 минут?</p>
|
||||
<div class="flex justify-end mt-1">
|
||||
<span class="label-sm text-on-surface-variant/60">14:15</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Reactions -->
|
||||
<div class="flex gap-1 -mt-2 ml-2">
|
||||
<div class="bg-surface-container-high border border-outline-variant/20 rounded-full px-2 py-0.5 flex items-center gap-1 cursor-pointer hover:bg-surface-bright transition-colors">
|
||||
<span class="text-xs">🔥</span>
|
||||
<span class="text-[10px] font-bold text-on-surface-variant">3</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Outgoing Message -->
|
||||
<div class="flex flex-col gap-1 items-end ml-auto max-w-[70%]">
|
||||
<div class="message-gradient-out text-on-primary-container p-4 rounded-xl rounded-br-sm knot-shadow">
|
||||
<p class="body-lg leading-relaxed font-medium">Круто! Особенно нравятся закругления у бабблов. Да, я сейчас как раз освобожусь.</p>
|
||||
<div class="flex justify-end items-center gap-1 mt-1">
|
||||
<span class="label-sm text-on-primary-container/70">14:18</span>
|
||||
<span class="material-symbols-outlined text-xs" data-icon="done_all">done_all</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- GIF Message (Incoming) -->
|
||||
<div class="flex flex-col gap-1 items-start max-w-[70%]">
|
||||
<div class="bg-surface-container p-1 rounded-xl rounded-bl-sm overflow-hidden knot-shadow">
|
||||
<img class="w-full h-48 object-cover rounded-lg" data-alt="expressive cinematic motion gif of abstract flowing liquid metal and digital knots in blue and white neon colors" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAje_de0kl_Z3LNBrQIe6PLgPxUlCCOOx9jJGSW3G9EsoERz4U-BsaM4HFWvh2VJSO1Z8UnRumq6AkDp3sxBxzCW15FvDhTTA_PLx9FRWWviVEvyzxXCM44cMpXO9zvhx3JBbqIjmG3azciT97gO4_eRBIwjJatLUrR_wmf_k8AZfO2L_KNVTByqevhnOghfndER-fkIiSBGDjPMQFrjk1hSWhxPqi7yIMgk-zehqAMITsmMW_jvTKsNvNRJGYwssERyJyHqWhnyHQ"/>
|
||||
<div class="px-3 py-1.5 flex justify-between items-center">
|
||||
<span class="text-[10px] font-bold text-on-surface-variant/60">GIPHY</span>
|
||||
<span class="label-sm text-on-surface-variant/60">14:20</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Audio Message (Outgoing) -->
|
||||
<div class="flex flex-col gap-1 items-end ml-auto max-w-[70%]">
|
||||
<div class="message-gradient-out text-on-primary-container p-4 rounded-xl rounded-br-sm knot-shadow min-w-[280px]">
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="w-10 h-10 flex items-center justify-center bg-white/20 rounded-full hover:bg-white/30 transition-all">
|
||||
<span class="material-symbols-outlined" data-icon="play_arrow" style="font-variation-settings: 'FILL' 1;">play_arrow</span>
|
||||
</button>
|
||||
<div class="flex-1 h-8 flex items-center gap-[2px]">
|
||||
<!-- Waveform simulation -->
|
||||
<div class="h-2 w-[3px] bg-on-primary-container/30 rounded-full"></div>
|
||||
<div class="h-4 w-[3px] bg-on-primary-container/30 rounded-full"></div>
|
||||
<div class="h-6 w-[3px] bg-white rounded-full"></div>
|
||||
<div class="h-3 w-[3px] bg-white rounded-full"></div>
|
||||
<div class="h-5 w-[3px] bg-white rounded-full"></div>
|
||||
<div class="h-7 w-[3px] bg-white rounded-full"></div>
|
||||
<div class="h-4 w-[3px] bg-white rounded-full"></div>
|
||||
<div class="h-6 w-[3px] bg-white rounded-full"></div>
|
||||
<div class="h-2 w-[3px] bg-on-primary-container/30 rounded-full"></div>
|
||||
<div class="h-5 w-[3px] bg-on-primary-container/30 rounded-full"></div>
|
||||
<div class="h-3 w-[3px] bg-on-primary-container/30 rounded-full"></div>
|
||||
<div class="h-6 w-[3px] bg-on-primary-container/30 rounded-full"></div>
|
||||
<div class="h-4 w-[3px] bg-on-primary-container/30 rounded-full"></div>
|
||||
<div class="h-2 w-[3px] bg-on-primary-container/30 rounded-full"></div>
|
||||
</div>
|
||||
<span class="text-xs font-bold whitespace-nowrap">0:42</span>
|
||||
</div>
|
||||
<div class="flex justify-end items-center gap-1 mt-2">
|
||||
<span class="label-sm text-on-primary-container/70">14:22</span>
|
||||
<span class="material-symbols-outlined text-xs" data-icon="done_all">done_all</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Input Area -->
|
||||
<footer class="p-6 bg-surface-container-lowest relative z-10">
|
||||
<div class="flex items-end gap-3 max-w-5xl mx-auto">
|
||||
<!-- Attachment -->
|
||||
<button class="w-12 h-12 flex items-center justify-center text-on-surface-variant hover:text-primary transition-colors mb-0.5">
|
||||
<span class="material-symbols-outlined" data-icon="attach_file">attach_file</span>
|
||||
</button>
|
||||
<!-- Main Input Pill -->
|
||||
<div class="flex-1 relative bg-surface-container-highest rounded-2xl flex items-center px-4 group transition-all duration-300">
|
||||
<button class="text-on-surface-variant hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="sentiment_satisfied">sentiment_satisfied</span>
|
||||
</button>
|
||||
<textarea class="w-full bg-transparent border-none focus:ring-0 py-4 px-4 text-on-surface placeholder:text-on-surface-variant/40 resize-none max-h-32 custom-scrollbar" placeholder="Сообщение..." rows="1"></textarea>
|
||||
</div>
|
||||
<!-- Action Button: Mic (Voice) -->
|
||||
<button class="w-12 h-12 flex items-center justify-center bg-primary-container rounded-2xl text-on-primary-container hover:opacity-90 transition-all active:scale-90 cubic-bezier(0.4, 0, 0.2, 1) mb-0.5 shadow-lg shadow-primary-container/20">
|
||||
<span class="material-symbols-outlined" data-icon="mic" style="font-variation-settings: 'FILL' 1;">mic</span>
|
||||
</button>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- Floating Decoration Element (Subtle brand touch) -->
|
||||
<div class="absolute top-24 right-12 w-64 h-64 bg-primary/5 rounded-full blur-[100px] pointer-events-none"></div>
|
||||
<div class="absolute bottom-24 left-12 w-48 h-48 bg-tertiary/5 rounded-full blur-[80px] pointer-events-none"></div>
|
||||
</section>
|
||||
</main>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 360 KiB |
@@ -0,0 +1,466 @@
|
||||
<!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 Admin Panel - Статистика</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&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: {
|
||||
"on-primary": "#003355",
|
||||
"surface-variant": "#353534",
|
||||
"surface-tint": "#9acbff",
|
||||
"secondary-fixed-dim": "#c7c6ca",
|
||||
"on-secondary": "#2f3033",
|
||||
"surface-bright": "#393939",
|
||||
"background": "#131313",
|
||||
"secondary-container": "#48494c",
|
||||
"primary": "#9acbff",
|
||||
"on-secondary-fixed-variant": "#46474a",
|
||||
"secondary-fixed": "#e3e2e6",
|
||||
"on-surface-variant": "#c1c6d7",
|
||||
"on-primary-container": "#002c4a",
|
||||
"on-primary-fixed": "#001d34",
|
||||
"inverse-surface": "#e5e2e1",
|
||||
"surface-dim": "#131313",
|
||||
"on-background": "#e5e2e1",
|
||||
"inverse-on-surface": "#313030",
|
||||
"outline-variant": "#414755",
|
||||
"surface-container-highest": "#353534",
|
||||
"on-tertiary": "#003911",
|
||||
"tertiary": "#53e16f",
|
||||
"secondary": "#c7c6ca",
|
||||
"primary-fixed": "#cfe5ff",
|
||||
"primary-fixed-dim": "#9acbff",
|
||||
"on-primary-fixed-variant": "#004a79",
|
||||
"surface-container-low": "#1c1b1b",
|
||||
"on-surface": "#e5e2e1",
|
||||
"on-secondary-container": "#b9b8bc",
|
||||
"primary-container": "#3096e5",
|
||||
"surface-container": "#201f1f",
|
||||
"tertiary-container": "#00a741",
|
||||
"tertiary-fixed-dim": "#53e16f",
|
||||
"on-secondary-fixed": "#1a1b1e",
|
||||
"error-container": "#93000a",
|
||||
"surface": "#131313",
|
||||
"on-tertiary-container": "#00320e",
|
||||
"on-error-container": "#ffdad6",
|
||||
"on-error": "#690005",
|
||||
"on-tertiary-fixed": "#002107",
|
||||
"inverse-primary": "#00629e",
|
||||
"tertiary-fixed": "#72fe88",
|
||||
"on-tertiary-fixed-variant": "#00531c",
|
||||
"error": "#ffb4ab",
|
||||
"outline": "#8b90a0",
|
||||
"surface-container-lowest": "#0e0e0e",
|
||||
"surface-container-high": "#2a2a2a"
|
||||
},
|
||||
fontFamily: {
|
||||
"headline": ["Inter"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
},
|
||||
borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body { font-family: 'Inter', sans-serif; background-color: #131313; color: #e5e2e1; }
|
||||
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
|
||||
.glass-card { background: rgba(32, 31, 31, 0.6); backdrop-filter: blur(12px); }
|
||||
.no-scrollbar::-webkit-scrollbar { display: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="antialiased selection:bg-primary/30">
|
||||
<!-- SideNavBar (Shared Component) -->
|
||||
<aside class="h-screen w-64 fixed left-0 top-0 flex flex-col bg-[#131313] dark:bg-[#131313] shadow-2xl shadow-black/50 z-50">
|
||||
<div class="flex flex-col h-full py-6 px-4">
|
||||
<!-- Header Section -->
|
||||
<div class="flex items-center gap-3 mb-8 px-2">
|
||||
<div class="w-10 h-10 rounded-full bg-primary-container flex items-center justify-center overflow-hidden">
|
||||
<img alt="Администратор" data-alt="Close up of a professional futuristic digital avatar profile picture with neon blue highlights and dark background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBlXqRIuWbYVUsvDBny3t4xpE51L2IA3ab6RUk2So4URi5UwU3gS_AgXSfEtoaGTnBnJZPC5psA4b44OkTfQckuorvbjnlUGxqJBJwSKkhAk0tX85nS9wL4iL7DhZTzpKHPvieKpFmJv89ZE2d-aL8OcGG7xBxZBX19Sy0rsYWTWDco6hoeegGQkQr7_i0jubpGqMpJlE4gfBwpzHmp1gDnfcc1ZuktZH5EM5BiExGri7Qc5AFu1EGBYIP-iGM_qJoUl3ysXgaPYx8"/>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-lg font-bold tracking-tighter text-[#9ACBFF]">Knot Admin</h1>
|
||||
<p class="text-[10px] uppercase tracking-widest text-white/40">Управление узлом</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Navigation Tabs -->
|
||||
<nav class="flex-1 space-y-1">
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-white/60 hover:text-white hover:bg-white/5 transition-colors transform active:scale-95 transition-transform" href="#">
|
||||
<span class="material-symbols-outlined text-xl" data-icon="group">group</span>
|
||||
<span class="font-medium text-sm">Пользователи</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-white/60 hover:text-white hover:bg-white/5 transition-colors transform active:scale-95 transition-transform" href="#">
|
||||
<span class="material-symbols-outlined text-xl" data-icon="chat_bubble">chat_bubble</span>
|
||||
<span class="font-medium text-sm">Группы</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-white/60 hover:text-white hover:bg-white/5 transition-colors transform active:scale-95 transition-transform" href="#">
|
||||
<span class="material-symbols-outlined text-xl" data-icon="hub">hub</span>
|
||||
<span class="font-medium text-sm">Федерация</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-white/60 hover:text-white hover:bg-white/5 transition-colors transform active:scale-95 transition-transform" href="#">
|
||||
<span class="material-symbols-outlined text-xl" data-icon="dns">dns</span>
|
||||
<span class="font-medium text-sm">Серверы</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-white/60 hover:text-white hover:bg-white/5 transition-colors transform active:scale-95 transition-transform" href="#">
|
||||
<span class="material-symbols-outlined text-xl" data-icon="settings">settings</span>
|
||||
<span class="font-medium text-sm">Настройки</span>
|
||||
</a>
|
||||
<!-- Active Tab: Статистика -->
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-[#9ACBFF] font-bold border-r-2 border-[#9ACBFF] bg-gradient-to-r from-[#3096E5]/10 to-transparent transform active:scale-95 transition-transform" href="#">
|
||||
<span class="material-symbols-outlined text-xl" data-icon="analytics" style="font-variation-settings: 'FILL' 1;">analytics</span>
|
||||
<span class="font-medium text-sm">Статистика</span>
|
||||
</a>
|
||||
</nav>
|
||||
<!-- Footer Section -->
|
||||
<div class="mt-auto pt-6 border-t border-white/5">
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-white/60 hover:text-error transition-colors" href="#">
|
||||
<span class="material-symbols-outlined text-xl" data-icon="logout">logout</span>
|
||||
<span class="font-medium text-sm">Выход</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Canvas -->
|
||||
<main class="ml-64 min-h-screen bg-surface flex flex-col">
|
||||
<!-- TopAppBar (Shared Component) -->
|
||||
<header class="sticky top-0 w-full z-40 bg-[#131313]/60 backdrop-blur-xl flex justify-between items-center h-16 px-8">
|
||||
<div class="flex items-center gap-4">
|
||||
<h2 class="text-[#9ACBFF] font-['Inter'] text-lg font-semibold">Панель администратора</h2>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<!-- Search -->
|
||||
<div class="relative group hidden md:block">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-white/40 group-focus-within:text-primary transition-colors" data-icon="search">search</span>
|
||||
<input class="bg-surface-container border-none rounded-full py-1.5 pl-10 pr-4 text-sm w-64 focus:ring-1 focus:ring-primary/50 transition-all outline-none" placeholder="Поиск по системе..." type="text"/>
|
||||
</div>
|
||||
<!-- Actions -->
|
||||
<div class="flex items-center gap-2">
|
||||
<button class="hover:bg-white/10 rounded-full p-2 transition-opacity hover:opacity-80">
|
||||
<span class="material-symbols-outlined text-white/70" data-icon="notifications">notifications</span>
|
||||
</button>
|
||||
<button class="hover:bg-white/10 rounded-full p-2 transition-opacity hover:opacity-80">
|
||||
<span class="material-symbols-outlined text-white/70" data-icon="dark_mode">dark_mode</span>
|
||||
</button>
|
||||
<div class="w-8 h-8 rounded-full bg-surface-container-highest overflow-hidden border border-white/10 ml-2">
|
||||
<img alt="Профиль админа" data-alt="Portrait of a modern software engineer in a dark studio, minimalist aesthetic, low key lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCQFskpv3vWWtWgQ0DuyTtExLXj-Jt_ihnMDS_vBTb0yQP4MFdktX9T4tCQBhADSrhfKJ1leSKVTmNyoa5CbC94Q-YZRECE9rr6SzSM-gnTLOJX8m1UW5XovVaCze9-t_LvuqgCbPddKIcvqfAuskzD5Hydc4RQpQz-P7ZB9sGDvoTgkRfzpsZRGH3djJKEFpoFfhQDZm4hwgJjX9jtC8QC0OSCLxzQnvELD4Ii8nafdHgeslMnROcTFyK5EJXZP1jn77RyxN531XE"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Content Area -->
|
||||
<div class="p-8 space-y-8 max-w-7xl mx-auto w-full">
|
||||
<!-- Metric Cards: Bento Grid Style -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<!-- Users Metric -->
|
||||
<div class="glass-card p-6 rounded-xl border border-white/5 hover:border-primary/20 transition-all group">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div class="p-2 bg-primary/10 rounded-lg text-primary">
|
||||
<span class="material-symbols-outlined" data-icon="group">group</span>
|
||||
</div>
|
||||
<span class="text-tertiary text-xs font-bold flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-[14px]" data-icon="trending_up">trending_up</span> +12%
|
||||
</span>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<p class="text-white/40 text-xs font-medium uppercase tracking-wider">Пользователи</p>
|
||||
<h3 class="text-3xl font-bold text-white tracking-tight">12,482</h3>
|
||||
<p class="text-primary text-sm font-medium">842 онлайн сейчас</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Groups Metric -->
|
||||
<div class="glass-card p-6 rounded-xl border border-white/5 hover:border-primary/20 transition-all group">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div class="p-2 bg-secondary-container/30 rounded-lg text-secondary">
|
||||
<span class="material-symbols-outlined" data-icon="chat_bubble">chat_bubble</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<p class="text-white/40 text-xs font-medium uppercase tracking-wider">Группы</p>
|
||||
<h3 class="text-3xl font-bold text-white tracking-tight">3,105</h3>
|
||||
<p class="text-white/60 text-sm font-medium">156 создано сегодня</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Federation Metric -->
|
||||
<div class="glass-card p-6 rounded-xl border border-white/5 hover:border-primary/20 transition-all group">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div class="p-2 bg-tertiary/10 rounded-lg text-tertiary">
|
||||
<span class="material-symbols-outlined" data-icon="hub">hub</span>
|
||||
</div>
|
||||
<span class="bg-tertiary/20 text-tertiary px-2 py-0.5 rounded-full text-[10px] font-bold">ACTIVE</span>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<p class="text-white/40 text-xs font-medium uppercase tracking-wider">Фед. узлы</p>
|
||||
<h3 class="text-3xl font-bold text-white tracking-tight">84</h3>
|
||||
<p class="text-white/60 text-sm font-medium">Синхронизировано 100%</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Server Load Metric -->
|
||||
<div class="glass-card p-6 rounded-xl border border-white/5 hover:border-primary/20 transition-all group">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div class="p-2 bg-error/10 rounded-lg text-error">
|
||||
<span class="material-symbols-outlined" data-icon="memory">memory</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div class="space-y-1">
|
||||
<div class="flex justify-between text-[10px] font-bold text-white/40 uppercase">
|
||||
<span>CPU Load</span>
|
||||
<span class="text-white">42%</span>
|
||||
</div>
|
||||
<div class="h-1.5 w-full bg-surface-container rounded-full overflow-hidden">
|
||||
<div class="h-full bg-primary rounded-full w-[42%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<div class="flex justify-between text-[10px] font-bold text-white/40 uppercase">
|
||||
<span>RAM Usage</span>
|
||||
<span class="text-white">68%</span>
|
||||
</div>
|
||||
<div class="h-1.5 w-full bg-surface-container rounded-full overflow-hidden">
|
||||
<div class="h-full bg-tertiary rounded-full w-[68%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Activity Chart (Placeholder) & Recent Activity -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<!-- Main Activity Chart -->
|
||||
<div class="lg:col-span-2 glass-card rounded-2xl p-8 border border-white/5">
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
<h4 class="text-xl font-bold text-white">Активность системы</h4>
|
||||
<p class="text-white/40 text-sm">Трафик и сообщения за последние 24 часа</p>
|
||||
</div>
|
||||
<div class="flex bg-surface-container p-1 rounded-lg">
|
||||
<button class="px-3 py-1 text-xs font-bold bg-surface-container-highest rounded text-white shadow-sm">24ч</button>
|
||||
<button class="px-3 py-1 text-xs font-bold text-white/40 hover:text-white transition-colors">7д</button>
|
||||
<button class="px-3 py-1 text-xs font-bold text-white/40 hover:text-white transition-colors">30д</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- SVG Chart Visualization -->
|
||||
<div class="relative h-64 w-full flex items-end justify-between gap-1 overflow-hidden">
|
||||
<div class="absolute inset-0 flex flex-col justify-between pointer-events-none">
|
||||
<div class="border-b border-white/5 w-full h-0"></div>
|
||||
<div class="border-b border-white/5 w-full h-0"></div>
|
||||
<div class="border-b border-white/5 w-full h-0"></div>
|
||||
<div class="border-b border-white/5 w-full h-0"></div>
|
||||
<div class="border-b border-white/5 w-full h-0"></div>
|
||||
</div>
|
||||
<!-- Mock bars -->
|
||||
<div class="bg-primary/20 hover:bg-primary/40 transition-colors w-full rounded-t-sm" style="height: 40%"></div>
|
||||
<div class="bg-primary/20 hover:bg-primary/40 transition-colors w-full rounded-t-sm" style="height: 55%"></div>
|
||||
<div class="bg-primary/20 hover:bg-primary/40 transition-colors w-full rounded-t-sm" style="height: 35%"></div>
|
||||
<div class="bg-primary/20 hover:bg-primary/40 transition-colors w-full rounded-t-sm" style="height: 60%"></div>
|
||||
<div class="bg-primary/20 hover:bg-primary/40 transition-colors w-full rounded-t-sm" style="height: 80%"></div>
|
||||
<div class="bg-primary/20 hover:bg-primary/40 transition-colors w-full rounded-t-sm" style="height: 95%"></div>
|
||||
<div class="bg-primary/20 hover:bg-primary/40 transition-colors w-full rounded-t-sm" style="height: 70%"></div>
|
||||
<div class="bg-primary/20 hover:bg-primary/40 transition-colors w-full rounded-t-sm" style="height: 45%"></div>
|
||||
<div class="bg-primary/20 hover:bg-primary/40 transition-colors w-full rounded-t-sm" style="height: 50%"></div>
|
||||
<div class="bg-primary/20 hover:bg-primary/40 transition-colors w-full rounded-t-sm" style="height: 65%"></div>
|
||||
<div class="bg-primary-container hover:bg-primary transition-colors w-full rounded-t-sm" style="height: 85%"></div>
|
||||
<div class="bg-primary-container hover:bg-primary transition-colors w-full rounded-t-sm" style="height: 90%"></div>
|
||||
<div class="bg-primary/20 hover:bg-primary/40 transition-colors w-full rounded-t-sm" style="height: 60%"></div>
|
||||
<div class="bg-primary/20 hover:bg-primary/40 transition-colors w-full rounded-t-sm" style="height: 40%"></div>
|
||||
<div class="bg-primary/20 hover:bg-primary/40 transition-colors w-full rounded-t-sm" style="height: 30%"></div>
|
||||
<div class="bg-primary/20 hover:bg-primary/40 transition-colors w-full rounded-t-sm" style="height: 50%"></div>
|
||||
<div class="bg-primary/20 hover:bg-primary/40 transition-colors w-full rounded-t-sm" style="height: 75%"></div>
|
||||
<div class="bg-primary/20 hover:bg-primary/40 transition-colors w-full rounded-t-sm" style="height: 60%"></div>
|
||||
<div class="bg-primary/20 hover:bg-primary/40 transition-colors w-full rounded-t-sm" style="height: 45%"></div>
|
||||
<div class="bg-primary/20 hover:bg-primary/40 transition-colors w-full rounded-t-sm" style="height: 40%"></div>
|
||||
</div>
|
||||
<div class="mt-4 flex justify-between text-[10px] text-white/30 font-bold uppercase tracking-widest">
|
||||
<span>00:00</span>
|
||||
<span>06:00</span>
|
||||
<span>12:00</span>
|
||||
<span>18:00</span>
|
||||
<span>Текущее</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Activity Feed -->
|
||||
<div class="glass-card rounded-2xl border border-white/5 flex flex-col">
|
||||
<div class="p-6 border-b border-white/5">
|
||||
<h4 class="text-lg font-bold text-white">Узлы федерации</h4>
|
||||
<p class="text-white/40 text-xs">Статус подключенных инстансов</p>
|
||||
</div>
|
||||
<div class="flex-1 overflow-y-auto no-scrollbar p-2 space-y-1">
|
||||
<div class="flex items-center gap-3 p-3 rounded-xl hover:bg-white/5 transition-colors group">
|
||||
<div class="w-10 h-10 rounded-lg bg-surface-container flex items-center justify-center text-primary">
|
||||
<span class="material-symbols-outlined text-lg" data-icon="dns">dns</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-sm font-semibold text-white truncate">Main-Frankfurt-01</p>
|
||||
<p class="text-xs text-white/40">latency: 24ms</p>
|
||||
</div>
|
||||
<div class="w-2 h-2 rounded-full bg-tertiary"></div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-3 rounded-xl hover:bg-white/5 transition-colors group">
|
||||
<div class="w-10 h-10 rounded-lg bg-surface-container flex items-center justify-center text-primary">
|
||||
<span class="material-symbols-outlined text-lg" data-icon="dns">dns</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-sm font-semibold text-white truncate">Relay-Moscow-Node</p>
|
||||
<p class="text-xs text-white/40">latency: 12ms</p>
|
||||
</div>
|
||||
<div class="w-2 h-2 rounded-full bg-tertiary"></div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-3 rounded-xl hover:bg-white/5 transition-colors group">
|
||||
<div class="w-10 h-10 rounded-lg bg-surface-container flex items-center justify-center text-primary">
|
||||
<span class="material-symbols-outlined text-lg" data-icon="dns">dns</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-sm font-semibold text-white truncate">Tokyo-Edge-04</p>
|
||||
<p class="text-xs text-white/40">latency: 180ms</p>
|
||||
</div>
|
||||
<div class="w-2 h-2 rounded-full bg-error"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 bg-white/5 rounded-b-2xl">
|
||||
<button class="w-full py-2 text-xs font-bold text-primary hover:bg-primary/10 transition-colors rounded-lg">Посмотреть все узлы</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Users Table -->
|
||||
<div class="glass-card rounded-2xl border border-white/5 overflow-hidden">
|
||||
<div class="p-6 flex items-center justify-between">
|
||||
<div>
|
||||
<h4 class="text-xl font-bold text-white">Последние регистрации</h4>
|
||||
<p class="text-white/40 text-sm">Новые пользователи в сети Knot за последние 24 часа</p>
|
||||
</div>
|
||||
<button class="bg-surface-container-highest hover:bg-surface-bright text-white px-4 py-2 rounded-lg text-sm font-semibold transition-colors flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="filter_list">filter_list</span> Фильтр
|
||||
</button>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-left">
|
||||
<thead class="bg-white/5 text-[10px] font-bold text-white/40 uppercase tracking-widest">
|
||||
<tr>
|
||||
<th class="px-8 py-4">Пользователь</th>
|
||||
<th class="px-8 py-4">Статус</th>
|
||||
<th class="px-8 py-4">ID</th>
|
||||
<th class="px-8 py-4">Последняя сессия</th>
|
||||
<th class="px-8 py-4 text-right">Действия</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-white/5">
|
||||
<tr class="hover:bg-white/5 transition-colors group">
|
||||
<td class="px-8 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full border-2 border-primary/20 p-0.5">
|
||||
<img alt="Алексей Медведев" class="w-full h-full rounded-full" data-alt="Cyberpunk style digital portrait of a young man with glowing neon accessories and dark background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBTbaM2vWj1NXg6mZ0oW48sCt35e7qb3hiKqIyQ8p0MP0e4ROwoKsL_6o_aS6Ui4IAV5az8qJtB-Tw-8LIRimY5HT3hjfMvxRqPCY5G5a8N_l9hJ-4MU2Baof2p6ioOI8qduV1shYVbaawQ12F4BIpf-WbKklcxd6gMtLyGD4nigLy6d3iwjVerYosxDO4_VcXJ74e8iz_bSz9UQggIq-dNzDmpMlFxHQpn5JnuygGpwd4MdwoH3ufUFjuyP6pEv1carCW61jEgNNE"/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-bold text-white">Алексей Медведев</p>
|
||||
<p class="text-xs text-white/40">@medved_alex</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-8 py-4">
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10px] font-bold bg-tertiary/10 text-tertiary uppercase">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-tertiary"></span> Онлайн
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-8 py-4">
|
||||
<code class="text-xs text-white/40 bg-white/5 px-2 py-1 rounded">#kt-8422-92</code>
|
||||
</td>
|
||||
<td class="px-8 py-4">
|
||||
<p class="text-sm text-white/60">Сейчас</p>
|
||||
</td>
|
||||
<td class="px-8 py-4 text-right">
|
||||
<button class="p-2 text-white/40 hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="more_vert">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-white/5 transition-colors group">
|
||||
<td class="px-8 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full border-2 border-white/5 p-0.5">
|
||||
<img alt="Елена Котова" class="w-full h-full rounded-full" data-alt="High quality photography of a woman with short hair in futuristic clothing, soft blue lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA0flGissKLQJb0Bp4pe7hVXX816-5eQjW_AipNJLR_gEF82kzmEXP1iQD0FubVB5VeKxW_2PPQiG9Mrvn4YjfCbd_IF0Pd7iF3c1Dot1-MwlqmxZNSKlZtyRrcyaKQsI8rhqVAT31Wp8EtyVEMpTWTlPujaPhBQIUdmtn0I3tNzB0hiFfPxZRNvJG3Uid2jLXLq5hmUR6LoqE9RfDOuoebyOpDBonkwASVf3Pd_Jc2WqnHYYscLW1Z6F9n1gV90weExNei3wtG_dA"/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-bold text-white">Елена Котова</p>
|
||||
<p class="text-xs text-white/40">@kot_elena</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-8 py-4">
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10px] font-bold bg-white/5 text-white/40 uppercase">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-white/20"></span> Оффлайн
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-8 py-4">
|
||||
<code class="text-xs text-white/40 bg-white/5 px-2 py-1 rounded">#kt-3310-15</code>
|
||||
</td>
|
||||
<td class="px-8 py-4">
|
||||
<p class="text-sm text-white/60">2 часа назад</p>
|
||||
</td>
|
||||
<td class="px-8 py-4 text-right">
|
||||
<button class="p-2 text-white/40 hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="more_vert">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-white/5 transition-colors group">
|
||||
<td class="px-8 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full border-2 border-white/5 p-0.5">
|
||||
<img alt="Иван Иванов" class="w-full h-full rounded-full" data-alt="Stylized modern character portrait, dark studio lighting with blue accents, sharp focus" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDHzO0GFYeh0U2rBi_kkSwVSFZbjIx0PBubwsWnZfD4VAByJ4IIEUMUEHK1SsIkUfshc7dSYxm9xk2ID5C8wMYJow-D_5EcjhHko7Pe6y7rwUZkDRi-NjmpzDfAtRiSg-DgbDV9VXT4Rxr0L1ZnijCSpk8QvNzbVDDv9V7QOJpJiqyzlv_1hTZnQJqNY3nuPBZerxcrKJv1DHTfYZ3xOlEljklJhGT3LFA9I0k6C_mSW4OEWWdieKTfagX_09WHl1CEwRDOnWTcuPo"/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-bold text-white">Иван Иванов</p>
|
||||
<p class="text-xs text-white/40">@ivanov_dev</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-8 py-4">
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10px] font-bold bg-tertiary/10 text-tertiary uppercase">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-tertiary"></span> Онлайн
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-8 py-4">
|
||||
<code class="text-xs text-white/40 bg-white/5 px-2 py-1 rounded">#kt-1029-44</code>
|
||||
</td>
|
||||
<td class="px-8 py-4">
|
||||
<p class="text-sm text-white/60">Сейчас</p>
|
||||
</td>
|
||||
<td class="px-8 py-4 text-right">
|
||||
<button class="p-2 text-white/40 hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="more_vert">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="p-6 border-t border-white/5 bg-white/2 space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<p class="text-xs text-white/40 font-medium">Показано 3 из 1,240 новых пользователей</p>
|
||||
<div class="flex gap-2">
|
||||
<button class="p-2 bg-surface-container rounded-lg text-white/40 hover:text-white transition-colors">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="chevron_left">chevron_left</span>
|
||||
</button>
|
||||
<button class="p-2 bg-surface-container rounded-lg text-white hover:bg-primary/20 transition-colors">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="chevron_right">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Footer spacing -->
|
||||
<footer class="mt-auto py-8 text-center border-t border-white/5">
|
||||
<p class="text-[10px] text-white/20 font-bold uppercase tracking-[0.2em]">Knot Messenger Admin Engine v2.4.0-stable</p>
|
||||
</footer>
|
||||
</main>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 273 KiB |
@@ -0,0 +1,309 @@
|
||||
<!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&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;
|
||||
}
|
||||
.contrast-bg-shift-no-border {
|
||||
border: none !important;
|
||||
}
|
||||
.tonal-transition-no-border {
|
||||
border: none !important;
|
||||
}
|
||||
.slide-on-ice {
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background font-body selection:bg-primary-container selection:text-on-primary-container">
|
||||
<!-- SideNavBar Shell -->
|
||||
<aside class="fixed left-0 top-0 h-full z-40 flex flex-col border-none bg-[#201F1F] dark:bg-[#201F1F] h-screen 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">Knot</span>
|
||||
</div>
|
||||
<nav class="flex flex-col gap-6 w-full items-center">
|
||||
<!-- Active State: Чаты -->
|
||||
<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) hover:bg-[#201F1F] hover:text-[#9ACBFF] transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="chat" style="font-variation-settings: 'FILL' 1;">chat</span>
|
||||
<span class="text-[10px] mt-1 font-medium">Чаты</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center justify-center text-[#939090] p-3 scale-95 active:scale-90 transition-transform cubic-bezier(0.4,0,0.2,1) hover:bg-[#201F1F] hover:text-[#9ACBFF] transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="call">call</span>
|
||||
<span class="text-[10px] mt-1 font-medium">Звонки</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center justify-center text-[#939090] p-3 scale-95 active:scale-90 transition-transform cubic-bezier(0.4,0,0.2,1) hover:bg-[#201F1F] hover:text-[#9ACBFF] transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="person">person</span>
|
||||
<span class="text-[10px] mt-1 font-medium">Контакты</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center justify-center text-[#939090] p-3 scale-95 active:scale-90 transition-transform cubic-bezier(0.4,0,0.2,1) hover:bg-[#201F1F] hover:text-[#9ACBFF] transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="archive">archive</span>
|
||||
<span class="text-[10px] mt-1 font-medium">Архив</span>
|
||||
</button>
|
||||
<div class="mt-auto">
|
||||
<button class="flex flex-col items-center justify-center text-[#939090] p-3 scale-95 active:scale-90 transition-transform cubic-bezier(0.4,0,0.2,1) hover:bg-[#201F1F] hover:text-[#9ACBFF] transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||
<span class="text-[10px] mt-1 font-medium">Настройки</span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
</aside>
|
||||
<!-- TopAppBar Shell -->
|
||||
<header class="fixed top-0 right-0 left-20 z-30 flex items-center justify-between px-8 bg-[#131313]/60 backdrop-blur-xl docked full-width h-16 tonal-transition-no-border shadow-[0_40px_40px_rgba(255,255,255,0.05)] slide-on-ice">
|
||||
<div class="flex items-center gap-4">
|
||||
<h1 class="headline-sm font-bold text-[#FFFFFF] tracking-tight">Чаты</h1>
|
||||
</div>
|
||||
<div class="flex-1 max-w-xl mx-8">
|
||||
<div class="relative group">
|
||||
<div class="absolute inset-y-0 left-4 flex items-center pointer-events-none">
|
||||
<span class="material-symbols-outlined text-on-surface-variant text-sm">search</span>
|
||||
</div>
|
||||
<input class="w-full bg-surface-container-highest border-none rounded-full py-2 pl-12 pr-4 text-sm text-on-surface focus:ring-1 focus:ring-primary focus:bg-surface-bright transition-all placeholder:text-on-surface-variant/50" placeholder="Поиск сообщений..." type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="p-2 text-on-surface-variant hover:opacity-80 transition-opacity">
|
||||
<span class="material-symbols-outlined" data-icon="videocam">videocam</span>
|
||||
</button>
|
||||
<button class="p-2 text-on-surface-variant hover:opacity-80 transition-opacity">
|
||||
<span class="material-symbols-outlined" data-icon="call">call</span>
|
||||
</button>
|
||||
<button class="p-2 text-on-surface-variant hover:opacity-80 transition-opacity">
|
||||
<span class="material-symbols-outlined" data-icon="more_vert">more_vert</span>
|
||||
</button>
|
||||
<div class="w-10 h-10 rounded-full overflow-hidden border-2 border-outline-variant/10 ml-2">
|
||||
<img class="w-full h-full object-cover" data-alt="Close-up portrait of a professional man with a friendly smile, soft studio lighting on dark background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD16pFrjyeqVKVL8ZmH1Dv1reVH6ExPbMkbZEOoaPKL7EdR_KO9X0kANtxqyfVLd89UGfIM9wIKfmVLxwCQEsrYxqGvHNwqsf0ZEvwwxAAD9zikG6ujV3BwvXGHeIF62mwM10Ec3hgLNMAJekVVgi0i429oIRIfhlAgwF9ztkgqu9UWuAp-RguSMVXwYnR2tJtAr53vR548lhn2xB1FJF0ubLQKSC6J9RJOsnsEHYc1qHnbAvxyiz25HrJqmFtRQv7t4YVmqqaXxn4"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Workspace -->
|
||||
<main class="ml-20 pt-16 h-screen flex overflow-hidden">
|
||||
<!-- Folders & Chat List Column -->
|
||||
<section class="w-[400px] flex flex-col bg-surface-container-low border-none h-full overflow-hidden">
|
||||
<!-- Story Bubbles Bar -->
|
||||
<div class="px-6 py-4 flex gap-4 overflow-x-auto no-scrollbar items-center bg-surface-container-low">
|
||||
<div class="flex flex-col items-center gap-1 shrink-0">
|
||||
<div class="relative w-14 h-14 rounded-full p-[2px] bg-surface-container-highest flex items-center justify-center cursor-pointer group">
|
||||
<span class="material-symbols-outlined text-primary group-hover:scale-110 transition-transform">add</span>
|
||||
</div>
|
||||
<span class="text-[10px] text-on-surface-variant font-medium">История</span>
|
||||
</div>
|
||||
<!-- Active Story -->
|
||||
<div class="flex flex-col items-center gap-1 shrink-0">
|
||||
<div class="w-14 h-14 rounded-full p-[2px] bg-gradient-to-tr from-primary to-tertiary">
|
||||
<div class="w-full h-full rounded-full border-2 border-surface-container-low overflow-hidden">
|
||||
<img class="w-full h-full object-cover" data-alt="Young smiling woman with vibrant expression in urban setting, warm sunset glow lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCBMKQbynd1VSBypxXb8l-cz8WXvVlb9WhAWcLv9No-p6P1xmisAwo1pQrECECI5leXMr12HOm7q-idnZB7kFJ7wmvipMfene1gt-8SnwGEWs3A9iLcGvtcz-ZPzSyNIJqQPftqPHT8FzA-GEZhhKuCIY8RePcFe2L3mGbhiXi9EhcFm7_F1AbRTQQyZTeDwjhTvwasDY_hHO8zoflggT1Zqq6gUQ5wbxWe0O_GbkLfTTEMxVqcxSP_UWdDbkVbVbixfTAapqxO05M"/>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-[10px] text-on-surface font-medium">Анна</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-1 shrink-0">
|
||||
<div class="w-14 h-14 rounded-full p-[2px] bg-gradient-to-tr from-primary to-tertiary">
|
||||
<div class="w-full h-full rounded-full border-2 border-surface-container-low overflow-hidden">
|
||||
<img class="w-full h-full object-cover" data-alt="Young man with short hair looking confidently at camera, natural daylight, blurred park background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAB7fbCSbkHnjwyobZ3YTHSXjtCSUHnKO0eSDKzEg8vaSvnfTdeSiEtapM6ZPFSKRpBHMrLJTgsKCC1Mh-O8H0JQI7tUmI1S6S45_Lkg1PmKqOz43lnbDcxacKOuIFdoe1VNGbzCN442z_cjkBtQ_qKkAYIT_QrVA72-tRExhsjgwayAYaC9dEM2Mh0GwoyJVsk4r-PJ-eoOejrKXcjLD2UplnrYMzX-UZgkXBg4eYk_CuQiJG3etFhvezHfhPdftqSjLn9vAHVU2E"/>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-[10px] text-on-surface font-medium">Максим</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-1 shrink-0">
|
||||
<div class="w-14 h-14 rounded-full p-[2px] bg-gradient-to-tr from-primary/30 to-tertiary/30">
|
||||
<div class="w-full h-full rounded-full border-2 border-surface-container-low overflow-hidden">
|
||||
<img class="w-full h-full object-cover" data-alt="Calm woman with soft lighting, minimalist aesthetic, neutral grey background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCFhPu14QrLlnTtPvgvNGUfeNYu2DbJD-HuHGaBJjiFRB2B74h9BqVeQ1RdiW4fH_IezMfgBB-VxZves9MkKz0gYuCLbQW0VeTPYo9Fed1HduDYxHFW9v1abQbXmI9Rx3-xj37Sv_ReyEolAFSR1F76FrJ0wyj1yMr5Rjn8lEYpA2nMhBK79l8t0noN1wVf3-sED59gtQFXinmxZTlqgBb4gcNCGfW7XfdhGcuQeQiJqnW6sLDlohv1CKV8r9eGXNKeQRiYM62k7Tw"/>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-[10px] text-on-surface-variant font-medium">Лена</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Folder Tabs -->
|
||||
<div class="px-6 py-2 flex gap-4 overflow-x-auto no-scrollbar">
|
||||
<button class="shrink-0 text-sm font-bold text-primary border-b-2 border-primary pb-2 px-1">Все чаты</button>
|
||||
<button class="shrink-0 text-sm font-medium text-on-surface-variant hover:text-on-surface transition-colors pb-2 px-1">Группы</button>
|
||||
<button class="shrink-0 text-sm font-medium text-on-surface-variant hover:text-on-surface transition-colors pb-2 px-1">Каналы</button>
|
||||
<button class="shrink-0 text-sm font-medium text-on-surface-variant hover:text-on-surface transition-colors pb-2 px-1">Личные</button>
|
||||
</div>
|
||||
<!-- Chat List Content -->
|
||||
<div class="flex-1 overflow-y-auto no-scrollbar py-2">
|
||||
<!-- Chat Item (Active) -->
|
||||
<div class="px-4 py-3 mx-2 bg-surface-container rounded-2xl flex items-center gap-4 cursor-pointer hover:bg-surface-container transition-all group">
|
||||
<div class="relative">
|
||||
<div class="w-12 h-12 rounded-full overflow-hidden border-2 border-outline-variant/10">
|
||||
<img class="w-full h-full object-cover" data-alt="Modern woman with stylish glasses, intense focused look, soft shadows, warm interior lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDYAgAjlE5jr9VwCJZfJ_2dYDw1EFvBJPaTOzDUZwVA1VdSAd9DOFkJOXg1h_bqMcW56qw2S_1qmgP8IM_TA3KfvhFJ8lvEw4r8Pcl3IBmBxcgCSCJi9kS1QrEFFpUzyYqmk2KuCiiiYb4C9CEp738aTk4-FpOLiauVRX5Ucdc8_QJbbG_X7l1uXzikb95cHaQ_J9Kj9-_zYoAj-vjW1Q3QC-szb65B7aCaF_UWxSZcWelvxUT0opgg5Kizm48TFyzwL6SuhxhPVwQ"/>
|
||||
</div>
|
||||
<div class="absolute bottom-0 right-0 w-3.5 h-3.5 bg-tertiary border-2 border-surface-container rounded-full"></div>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex justify-between items-baseline mb-0.5">
|
||||
<h3 class="text-sm font-bold text-on-surface truncate">Ольга Смирнова</h3>
|
||||
<span class="label-sm text-on-surface-variant">14:20</span>
|
||||
</div>
|
||||
<p class="text-xs text-on-surface-variant truncate">Слушай, а когда мы сможем обсудить проект? Кажется...</p>
|
||||
</div>
|
||||
<div class="flex flex-col items-end gap-1">
|
||||
<div class="bg-primary-container text-on-primary-container text-[10px] font-bold px-1.5 py-0.5 rounded-full min-w-[1.25rem] text-center">3</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Chat Item (Read) -->
|
||||
<div class="px-4 py-3 mx-2 flex items-center gap-4 cursor-pointer hover:bg-surface-container-high rounded-2xl transition-all group">
|
||||
<div class="relative">
|
||||
<div class="w-12 h-12 rounded-full overflow-hidden border-2 border-outline-variant/10">
|
||||
<img class="w-full h-full object-cover" data-alt="Young man with beard, outdoor lifestyle shot, golden hour natural light, forest background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBm_2HxjQmg39Xp4TPylrZd_FOKFASpJ0AT0_6OqXv88eru15cuLrI4jiSZjlEcYK0n6BqmIpeuyXyC5kGPCWJhFX2qmV-CzmD84SBXr_bigNYaKDo82g8sZfzcOo4iMaQ69OkAq93bxXPFaIKzJTB-Y9ZUTaJaM1d5m5EjVvLr9jBi6LX_ODkDbeOsJzYI4Xx-SGOaAmpg0Kri9iWdcpuaPR1faxXI6j4kZnYEuXb8vn8MPsa5UK4FZUmjXSQlT2aiuwSKv0lDDl0"/>
|
||||
</div>
|
||||
<div class="absolute bottom-0 right-0 w-3.5 h-3.5 bg-secondary-container border-2 border-surface-container rounded-full"></div>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex justify-between items-baseline mb-0.5">
|
||||
<h3 class="text-sm font-bold text-on-surface truncate">Дизайн Отдел</h3>
|
||||
<span class="label-sm text-on-surface-variant">Вчера</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-[14px] text-primary" style="font-variation-settings: 'FILL' 1;">done_all</span>
|
||||
<p class="text-xs text-on-surface-variant truncate">Файлы приняты в работу, спасибо!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Chat Item (Channel) -->
|
||||
<div class="px-4 py-3 mx-2 flex items-center gap-4 cursor-pointer hover:bg-surface-container-high rounded-2xl transition-all group">
|
||||
<div class="relative">
|
||||
<div class="w-12 h-12 rounded-full bg-tertiary-container flex items-center justify-center border-2 border-outline-variant/10">
|
||||
<span class="material-symbols-outlined text-white" data-icon="rocket_launch">rocket_launch</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex justify-between items-baseline mb-0.5">
|
||||
<h3 class="text-sm font-bold text-on-surface truncate">Knot Updates</h3>
|
||||
<span class="label-sm text-on-surface-variant">11:05</span>
|
||||
</div>
|
||||
<p class="text-xs text-on-surface-variant truncate">🎉 Встречайте новую версию мессенджера!</p>
|
||||
</div>
|
||||
<div class="flex flex-col items-end gap-1">
|
||||
<div class="bg-surface-container-highest text-on-surface-variant text-[10px] font-bold px-1.5 py-0.5 rounded-full">PIN</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- More Chat items for scrolling demonstration -->
|
||||
<div class="px-4 py-3 mx-2 flex items-center gap-4 cursor-pointer hover:bg-surface-container-high rounded-2xl transition-all group">
|
||||
<div class="relative">
|
||||
<div class="w-12 h-12 rounded-full overflow-hidden border-2 border-outline-variant/10">
|
||||
<img class="w-full h-full object-cover" data-alt="Elegant woman in city clothes, overcast daylight, cinematic urban aesthetic" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBx8tTw6oOh7f5DwKce67jJ7fHDtXxSA5AW7yCQDqmJtxFJ7PaADpwnUPwd2r6eNboHvipqiWpiXm9kdXHXi_CEIZiaXC0t6nZcV7VIfqyUaJWqmXa7A4MoTEdAWQk6ewGHvymc-Hm-VJkdjYR3-BhCp3FzFkH1I19lPaZnyqIoTF3G0Yb-76MfgfsvVZm_Tm1SPab5l0mlslzJD29-6Ln994l20P8JCnUytks2WA8woZnfMqq-JnPeLLObMF994Ac_KqWgnfqrhe8"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex justify-between items-baseline mb-0.5">
|
||||
<h3 class="text-sm font-bold text-on-surface truncate">Мария (HR)</h3>
|
||||
<span class="label-sm text-on-surface-variant">09:12</span>
|
||||
</div>
|
||||
<p class="text-xs text-on-surface-variant truncate">Ждем вас на собеседование завтра.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Content Canvas (Conversation Placeholder) -->
|
||||
<section class="flex-1 flex flex-col bg-surface-container-lowest relative">
|
||||
<!-- Background Knot Texture -->
|
||||
<div class="absolute inset-0 opacity-[0.03] pointer-events-none flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-[40rem]" data-icon="all_inclusive">all_inclusive</span>
|
||||
</div>
|
||||
<!-- Chat Empty State View -->
|
||||
<div class="flex-1 flex flex-col items-center justify-center z-10 p-12 text-center">
|
||||
<div class="w-24 h-24 mb-6 rounded-full bg-surface-container flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-primary text-5xl" data-icon="forum">forum</span>
|
||||
</div>
|
||||
<h2 class="display-lg font-black text-on-surface tracking-tighter mb-4">Выберите чат</h2>
|
||||
<p class="body-lg text-on-surface-variant max-w-sm">
|
||||
Начните общение прямо сейчас. Все ваши сообщения защищены сквозным шифрованием.
|
||||
</p>
|
||||
<button class="mt-8 px-8 py-3 bg-gradient-to-tr from-primary to-primary-container text-on-primary-container font-bold rounded-full shadow-lg hover:opacity-90 transition-opacity flex items-center gap-2">
|
||||
<span class="material-symbols-outlined" data-icon="edit">edit</span>
|
||||
Новое сообщение
|
||||
</button>
|
||||
</div>
|
||||
<!-- Floating Action Button for mobile/context -->
|
||||
<button class="absolute bottom-8 right-8 w-14 h-14 bg-primary text-on-primary rounded-full flex items-center justify-center shadow-2xl hover:scale-105 active:scale-95 transition-transform z-20">
|
||||
<span class="material-symbols-outlined text-3xl" data-icon="add">add</span>
|
||||
</button>
|
||||
</section>
|
||||
</main>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 221 KiB |
@@ -0,0 +1,162 @@
|
||||
<!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 Panel - Вход</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&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: {
|
||||
"on-primary": "#003355",
|
||||
"surface-variant": "#353534",
|
||||
"surface-tint": "#9acbff",
|
||||
"secondary-fixed-dim": "#c7c6ca",
|
||||
"on-secondary": "#2f3033",
|
||||
"surface-bright": "#393939",
|
||||
"background": "#131313",
|
||||
"secondary-container": "#48494c",
|
||||
"primary": "#9acbff",
|
||||
"on-secondary-fixed-variant": "#46474a",
|
||||
"secondary-fixed": "#e3e2e6",
|
||||
"on-surface-variant": "#c1c6d7",
|
||||
"on-primary-container": "#002c4a",
|
||||
"on-primary-fixed": "#001d34",
|
||||
"inverse-surface": "#e5e2e1",
|
||||
"surface-dim": "#131313",
|
||||
"on-background": "#e5e2e1",
|
||||
"inverse-on-surface": "#313030",
|
||||
"outline-variant": "#414755",
|
||||
"surface-container-highest": "#353534",
|
||||
"on-tertiary": "#003911",
|
||||
"tertiary": "#53e16f",
|
||||
"secondary": "#c7c6ca",
|
||||
"primary-fixed": "#cfe5ff",
|
||||
"primary-fixed-dim": "#9acbff",
|
||||
"on-primary-fixed-variant": "#004a79",
|
||||
"surface-container-low": "#1c1b1b",
|
||||
"on-surface": "#e5e2e1",
|
||||
"on-secondary-container": "#b9b8bc",
|
||||
"primary-container": "#3096e5",
|
||||
"surface-container": "#201f1f",
|
||||
"tertiary-container": "#00a741",
|
||||
"tertiary-fixed-dim": "#53e16f",
|
||||
"on-secondary-fixed": "#1a1b1e",
|
||||
"error-container": "#93000a",
|
||||
"surface": "#131313",
|
||||
"on-tertiary-container": "#00320e",
|
||||
"on-error-container": "#ffdad6",
|
||||
"on-error": "#690005",
|
||||
"on-tertiary-fixed": "#002107",
|
||||
"inverse-primary": "#00629e",
|
||||
"tertiary-fixed": "#72fe88",
|
||||
"on-tertiary-fixed-variant": "#00531c",
|
||||
"error": "#ffb4ab",
|
||||
"outline": "#8b90a0",
|
||||
"surface-container-lowest": "#0e0e0e",
|
||||
"surface-container-high": "#2a2a2a"
|
||||
},
|
||||
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;
|
||||
}
|
||||
.knot-gradient-bg {
|
||||
background: radial-gradient(circle at 20% 30%, rgba(48, 150, 229, 0.15) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 70%, rgba(154, 203, 255, 0.1) 0%, transparent 50%);
|
||||
}
|
||||
.glass-card {
|
||||
background: rgba(32, 31, 31, 0.7);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-surface font-body antialiased min-h-screen flex items-center justify-center knot-gradient-bg selection:bg-primary/30">
|
||||
<!-- Theme Switcher (Corner) -->
|
||||
<div class="fixed top-8 right-8 z-50">
|
||||
<button class="w-12 h-12 flex items-center justify-center rounded-full bg-surface-container hover:bg-surface-bright transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] active:scale-95 group">
|
||||
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary">dark_mode</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Main Auth Container -->
|
||||
<main class="relative w-full max-w-[440px] px-6 py-12">
|
||||
<!-- Logo Section -->
|
||||
<div class="flex flex-col items-center mb-12">
|
||||
<div class="relative mb-6">
|
||||
<!-- Abstract "Knot" visual element -->
|
||||
<div class="absolute -inset-4 bg-primary/20 blur-2xl rounded-full opacity-50"></div>
|
||||
<div class="relative w-16 h-16 flex items-center justify-center bg-gradient-to-br from-primary to-primary-container rounded-xl rotate-12 shadow-xl shadow-primary/20">
|
||||
<span class="material-symbols-outlined text-on-primary-container text-4xl" style="font-variation-settings: 'FILL' 1;">hub</span>
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="text-4xl font-extrabold tracking-tighter text-on-surface mb-2">Knot Admin</h1>
|
||||
<p class="text-on-surface-variant text-sm font-medium opacity-70">Управление вашей инфраструктурой</p>
|
||||
</div>
|
||||
<!-- Auth Card -->
|
||||
<div class="glass-card rounded-3xl p-8 md:p-10 shadow-2xl border border-outline-variant/10">
|
||||
<form class="space-y-6">
|
||||
<!-- Login/Email Field -->
|
||||
<div class="space-y-2">
|
||||
<label class="block text-xs font-bold uppercase tracking-widest text-on-surface-variant ml-1">Логин или Email</label>
|
||||
<div class="relative group">
|
||||
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
|
||||
<span class="material-symbols-outlined text-on-surface-variant group-focus-within:text-primary transition-colors">person</span>
|
||||
</div>
|
||||
<input class="w-full bg-surface-container-highest/50 border-none rounded-2xl py-4 pl-12 pr-4 text-on-surface placeholder:text-on-surface-variant/40 focus:ring-2 focus:ring-primary/30 focus:bg-surface-bright transition-all duration-300" placeholder="Введите ваш логин" type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Password Field -->
|
||||
<div class="space-y-2">
|
||||
<div class="flex justify-between items-end px-1">
|
||||
<label class="block text-xs font-bold uppercase tracking-widest text-on-surface-variant">Пароль</label>
|
||||
<a class="text-xs font-semibold text-primary hover:text-primary-fixed transition-colors" href="#">Забыли пароль?</a>
|
||||
</div>
|
||||
<div class="relative group">
|
||||
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
|
||||
<span class="material-symbols-outlined text-on-surface-variant group-focus-within:text-primary transition-colors">lock</span>
|
||||
</div>
|
||||
<input class="w-full bg-surface-container-highest/50 border-none rounded-2xl py-4 pl-12 pr-12 text-on-surface placeholder:text-on-surface-variant/40 focus:ring-2 focus:ring-primary/30 focus:bg-surface-bright transition-all duration-300" placeholder="••••••••" type="password"/>
|
||||
<button class="absolute inset-y-0 right-0 pr-4 flex items-center text-on-surface-variant hover:text-on-surface transition-colors" type="button">
|
||||
<span class="material-symbols-outlined">visibility</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Action Button -->
|
||||
<button class="w-full bg-gradient-to-br from-primary to-primary-container text-on-primary-container font-bold py-4 rounded-2xl shadow-lg shadow-primary/10 hover:shadow-primary/20 hover:opacity-90 active:scale-[0.98] transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] mt-4" type="submit">
|
||||
Войти в систему
|
||||
</button>
|
||||
</form>
|
||||
<!-- Footer Links -->
|
||||
<div class="mt-10 pt-8 border-t border-outline-variant/10 text-center">
|
||||
<p class="text-on-surface-variant text-sm font-medium">
|
||||
Нет аккаунта?
|
||||
<a class="text-primary font-bold ml-1 hover:underline underline-offset-4 decoration-2" href="#">Зарегистрироваться</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bottom Metadata -->
|
||||
<div class="mt-8 flex justify-center gap-6 opacity-40">
|
||||
<span class="text-[10px] font-bold uppercase tracking-widest cursor-default">v4.2.0 Stable</span>
|
||||
<span class="text-[10px] font-bold uppercase tracking-widest cursor-default">© 2024 Knot Ecosystem</span>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Decorative Elements (Blobs/Knots) -->
|
||||
<div class="fixed top-[-10%] left-[-10%] w-[40%] h-[40%] bg-primary/5 rounded-full blur-[120px] pointer-events-none"></div>
|
||||
<div class="fixed bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-tertiary/5 rounded-full blur-[120px] pointer-events-none"></div>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 665 KiB |
@@ -0,0 +1,259 @@
|
||||
<!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>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
@@ -0,0 +1,159 @@
|
||||
<!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 Messenger - Вход</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-variant": "#353534",
|
||||
"primary-container": "#3096e5",
|
||||
"on-surface-variant": "#c1c6d7",
|
||||
"error-container": "#93000a",
|
||||
"surface-container-low": "#1c1b1b",
|
||||
"tertiary": "#53e16f",
|
||||
"tertiary-fixed-dim": "#53e16f",
|
||||
"on-tertiary-fixed": "#002107",
|
||||
"secondary-fixed-dim": "#c7c6ca",
|
||||
"outline-variant": "#414755",
|
||||
"on-tertiary-fixed-variant": "#00531c",
|
||||
"surface-container": "#201f1f",
|
||||
"on-primary": "#003355",
|
||||
"on-error-container": "#ffdad6",
|
||||
"background": "#131313",
|
||||
"error": "#ffb4ab",
|
||||
"outline": "#8b90a0",
|
||||
"surface-container-lowest": "#0e0e0e",
|
||||
"surface-container-highest": "#353534",
|
||||
"on-secondary-fixed-variant": "#46474a",
|
||||
"secondary-container": "#48494c",
|
||||
"on-surface": "#e5e2e1",
|
||||
"surface-dim": "#131313",
|
||||
"on-background": "#e5e2e1",
|
||||
"surface": "#131313",
|
||||
"secondary": "#c7c6ca",
|
||||
"on-primary-fixed": "#001d34",
|
||||
"surface-tint": "#9acbff",
|
||||
"surface-bright": "#393939",
|
||||
"secondary-fixed": "#e3e2e6",
|
||||
"primary-fixed-dim": "#9acbff",
|
||||
"on-secondary-container": "#b9b8bc",
|
||||
"on-primary-container": "#002c4a",
|
||||
"primary": "#9acbff",
|
||||
"on-secondary": "#2f3033",
|
||||
"tertiary-fixed": "#72fe88",
|
||||
"inverse-primary": "#00629e",
|
||||
"tertiary-container": "#00a741",
|
||||
"on-primary-fixed-variant": "#004a79",
|
||||
"on-error": "#690005",
|
||||
"inverse-surface": "#e5e2e1",
|
||||
"on-tertiary-container": "#00320e",
|
||||
"on-tertiary": "#003911",
|
||||
"surface-container-high": "#2a2a2a",
|
||||
"primary-fixed": "#cfe5ff",
|
||||
"on-secondary-fixed": "#1a1b1e",
|
||||
"inverse-on-surface": "#313030"
|
||||
},
|
||||
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;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.knot-gradient-bg {
|
||||
background: radial-gradient(circle at 0% 0%, rgba(48, 150, 229, 0.08) 0%, transparent 50%),
|
||||
radial-gradient(circle at 100% 100%, rgba(154, 203, 255, 0.05) 0%, transparent 50%);
|
||||
}
|
||||
.btn-knot {
|
||||
background: linear-gradient(135deg, #9ACBFF 0%, #3096E5 100%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background font-body knot-gradient-bg min-h-screen flex flex-col">
|
||||
<!-- Top Navigation (Shell suppressed for transactional screen as per protocol) -->
|
||||
<header class="fixed top-0 w-full flex justify-between items-center px-6 py-8 z-50">
|
||||
<div class="text-2xl font-black tracking-tighter text-primary italic">Knot</div>
|
||||
<div>
|
||||
<button class="text-on-surface-variant hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="language">language</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<main class="flex-grow flex items-center justify-center px-4 relative overflow-hidden">
|
||||
<!-- Abstract Decoration (The Kinetic Thread) -->
|
||||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] opacity-20 pointer-events-none">
|
||||
<svg class="w-full h-full" viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M40,100 C40,20 160,180 160,100 C160,20 40,180 40,100 Z" fill="none" stroke="#9ACBFF" stroke-width="0.5"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="w-full max-w-md z-10">
|
||||
<div class="mb-12 text-center md:text-left">
|
||||
<h1 class="text-5xl font-extrabold tracking-tight mb-4 text-on-surface leading-tight">Вход в Knot</h1>
|
||||
<p class="text-on-surface-variant text-lg">Добро пожаловать в единственную нить общения.</p>
|
||||
</div>
|
||||
<form class="space-y-6">
|
||||
<!-- Username Field -->
|
||||
<div class="space-y-2">
|
||||
<label class="block text-sm font-medium text-on-surface-variant ml-4">Имя пользователя</label>
|
||||
<div class="relative group">
|
||||
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-on-surface-variant group-focus-within:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="person">person</span>
|
||||
</div>
|
||||
<input class="w-full bg-surface-container-highest/30 border-none rounded-xl py-4 pl-12 pr-4 text-on-surface placeholder:text-outline/50 focus:ring-2 focus:ring-primary/20 focus:bg-surface-bright/40 transition-all outline-none" placeholder="username" type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Password Field -->
|
||||
<div class="space-y-2">
|
||||
<div class="flex justify-between items-center px-4">
|
||||
<label class="block text-sm font-medium text-on-surface-variant">Пароль</label>
|
||||
<a class="text-xs font-semibold text-primary hover:opacity-80 transition-opacity" href="#">Забыли пароль?</a>
|
||||
</div>
|
||||
<div class="relative group">
|
||||
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-on-surface-variant group-focus-within:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="lock">lock</span>
|
||||
</div>
|
||||
<input class="w-full bg-surface-container-highest/30 border-none rounded-xl py-4 pl-12 pr-12 text-on-surface placeholder:text-outline/50 focus:ring-2 focus:ring-primary/20 focus:bg-surface-bright/40 transition-all outline-none" placeholder="••••••••" type="password"/>
|
||||
<button class="absolute inset-y-0 right-0 pr-4 flex items-center text-on-surface-variant hover:text-on-surface transition-colors" type="button">
|
||||
<span class="material-symbols-outlined" data-icon="visibility">visibility</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Login Button -->
|
||||
<div class="pt-4">
|
||||
<button class="btn-knot w-full py-4 rounded-xl text-on-primary-container font-bold text-lg shadow-[0_10px_20px_-5px_rgba(48,150,229,0.3)] hover:scale-[0.98] active:scale-[0.96] transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]" type="submit">
|
||||
Войти
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="mt-12 text-center">
|
||||
<p class="text-on-surface-variant">
|
||||
Нет аккаунта?
|
||||
<a class="text-primary font-bold ml-1 hover:underline decoration-primary/30 underline-offset-4" href="#">Зарегистрироваться</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="p-8 flex justify-center items-center space-x-6">
|
||||
<div class="h-[1px] w-12 bg-outline-variant/20"></div>
|
||||
<div class="text-[10px] uppercase tracking-[0.2em] text-outline/40 font-bold">Encrypted & Secure</div>
|
||||
<div class="h-[1px] w-12 bg-outline-variant/20"></div>
|
||||
</footer>
|
||||
<!-- Bottom Nav (Suppressed for Login Page as per Contextual Rules) -->
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 448 KiB |
@@ -0,0 +1,83 @@
|
||||
```markdown
|
||||
# Design System Strategy: The Interconnected Thread
|
||||
|
||||
## 1. Overview & Creative North Star: "Kinetic Connection"
|
||||
This design system moves away from the static, boxy nature of traditional messengers. Our North Star is **Kinetic Connection**—a philosophy where the UI is not a collection of separate screens, but a single, fluid thread that loops and weaves as the user navigates.
|
||||
|
||||
Inspired by the concept of a "Knot," the interface favors **organic flow over rigid containment**. We break the "template" look by using intentional asymmetry in message grouping, generous breathing room (white space) that suggests a premium editorial layout, and high-contrast typography scales that make the Cyrillic alphabet look authoritative and modern.
|
||||
|
||||
---
|
||||
|
||||
## 2. Colors & The "No-Line" Rule
|
||||
The palette is rooted in deep obsidian tones and technical blues, designed to recede and let the conversation take center stage.
|
||||
|
||||
### The "No-Line" Rule
|
||||
**Explicit Instruction:** You are prohibited from using 1px solid borders (`#outline`) to define sections. Traditional dividers are a sign of lazy design. Boundaries must be defined through:
|
||||
1. **Background Shifts:** Place a `surface-container-low` list item against a `surface` background.
|
||||
2. **Tonal Transitions:** Use `surface-container-lowest` for the main chat thread and `surface-container` for the side navigation to create natural separation.
|
||||
|
||||
### Surface Hierarchy & Nesting
|
||||
Treat the UI as a series of stacked sheets of fine, semi-translucent paper.
|
||||
* **Base Layer:** `surface` (#131313) - The absolute floor.
|
||||
* **Active Interaction Layer:** `surface-container` (#201F1F) - The main workspace.
|
||||
* **Floating Elements:** Use `surface-bright` with a 60% opacity and a 20px backdrop-blur to create a "Glassmorphism" effect for headers and context menus.
|
||||
|
||||
### Signature Textures
|
||||
Main Action Buttons (CTAs) should never be a flat hex code. Apply a subtle linear gradient from `primary` (#9ACBFF) to `primary_container` (#3096E5) at a 135-degree angle. This adds "soul" and a tactile, liquid quality to the "Knot" identity.
|
||||
|
||||
---
|
||||
|
||||
## 3. Typography: The Editorial Voice
|
||||
We use **Inter** as our foundational typeface. For the Russian language interface, Inter’s tall x-height and neutral terminals provide the clarity needed for long-form messaging.
|
||||
|
||||
* **Display (The Brand Moment):** `display-lg` (3.5rem). Use this for empty states or welcome screens. It should feel like a magazine cover.
|
||||
* **Headlines (Navigation):** `headline-sm` (1.5rem). Used for "Чаты" (Chats) or "Настройки" (Settings). Bold, confident, and high-contrast.
|
||||
* **Body (The Conversation):** `body-lg` (1.0rem). The primary reading size. We use a generous line-height (1.6) to prevent Cyrillic characters from feeling cluttered.
|
||||
* **Labels (The Metadata):** `label-sm` (0.68rem). Used for timestamps and "Seen" indicators. These should be rendered in `on-surface-variant` to recede visually.
|
||||
|
||||
---
|
||||
|
||||
## 4. Elevation & Depth: Tonal Layering
|
||||
We abandon traditional drop shadows in favor of **Ambient Depth**.
|
||||
|
||||
* **The Layering Principle:** To lift a chat bubble, do not add a shadow. Instead, place a `primary_container` bubble on a `surface_container_low` background. The color contrast provides the elevation.
|
||||
* **Ghost Borders:** If an element (like a search bar) disappears into the background, use a "Ghost Border": the `outline-variant` token at **15% opacity**. Never 100%.
|
||||
* **Ambient Shadows:** For floating modals (e.g., User Profile), use a massive blur (40px) with the color `on_primary_fixed` at 5% opacity. It should feel like a soft glow rather than a shadow.
|
||||
|
||||
---
|
||||
|
||||
## 5. Components
|
||||
|
||||
### Chat Bubbles (The Core Component)
|
||||
* **Style:** No sharp corners. Use `xl` (1.5rem) for the outer corners and `sm` (0.25rem) for the "tail" corner to create a "blob" or "knot" feel.
|
||||
* **Outgoing:** `primary_container` text with `on_primary_container`.
|
||||
* **Incoming:** `secondary_container` text with `on_secondary_container`.
|
||||
* **Spacing:** Use `spacing-2` between messages in a cluster; `spacing-4` between different users.
|
||||
|
||||
### Input Fields
|
||||
* **Structure:** A "borderless" pill shape using `surface_container_highest`.
|
||||
* **Interaction:** Upon focus, the background shifts to `surface_bright` and the `primary` accent color glows subtly at the cursor point.
|
||||
|
||||
### Lists & Navigation
|
||||
* **No Dividers:** Separate chat threads using `spacing-3.5` vertical padding. The user's eye will follow the alignment of the Avatars (the "Knot" anchors) rather than a line.
|
||||
* **Avatars:** Always circular (`full` roundedness) with a 2px `outline-variant` at 10% opacity to ensure they pop against dark backgrounds.
|
||||
|
||||
### Action Chips
|
||||
* **Style:** For reactions or filters, use `tertiary_container` for a vibrant, interactive "pop" that breaks the monochromatic gray scale.
|
||||
|
||||
---
|
||||
|
||||
## 6. Do's and Don'ts
|
||||
|
||||
### Do:
|
||||
* **Embrace Asymmetry:** Align timestamps to the far right and message text to the left to create a dynamic, zig-zag visual path.
|
||||
* **Use Micro-interactions:** When a user scrolls, the "Knot" logo should subtly rotate or tighten, reinforcing the brand identity.
|
||||
* **Prioritize Russian Typography:** Ensure "ё" and "й" have enough leading (vertical space) so diacritics don't touch the line above.
|
||||
|
||||
### Don't:
|
||||
* **Don't use pure black (#000):** It kills the depth. Always use the `surface` tokens.
|
||||
* **Don't use 1px dividers:** If you feel the need for a line, use a background color change instead.
|
||||
* **Don't use standard easing:** Use "Cubic Bezier (0.4, 0, 0.2, 1)" for all transitions. It should feel like the UI is "sliding on ice," not snapping into place.
|
||||
|
||||
### Accessibility Note:
|
||||
While we favor minimalism, ensure that text in `on-surface-variant` still meets a 4.5:1 contrast ratio against `surface-container` for readability. Minimalist does not mean invisible.```
|
||||
@@ -0,0 +1,212 @@
|
||||
<!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>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 190 KiB |
Reference in New Issue
Block a user