300 lines
17 KiB
HTML
300 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
|
||
<html class="dark" lang="ru"><head>
|
||
<meta charset="utf-8"/>
|
||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet"/>
|
||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||
<script id="tailwind-config">
|
||
tailwind.config = {
|
||
darkMode: "class",
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
"inverse-on-surface": "#313030",
|
||
"surface-container": "#201f1f",
|
||
"on-secondary": "#2f3033",
|
||
"tertiary-fixed-dim": "#53e16f",
|
||
"error": "#ffb4ab",
|
||
"primary-container": "#3096e5",
|
||
"secondary-container": "#48494c",
|
||
"surface-dim": "#131313",
|
||
"error-container": "#93000a",
|
||
"inverse-primary": "#00629e",
|
||
"inverse-surface": "#e5e2e1",
|
||
"on-tertiary-fixed": "#002107",
|
||
"secondary-fixed": "#e3e2e6",
|
||
"on-tertiary": "#003911",
|
||
"on-secondary-fixed": "#1a1b1e",
|
||
"surface-container-low": "#1c1b1b",
|
||
"on-primary-fixed-variant": "#004a79",
|
||
"on-surface": "#e5e2e1",
|
||
"on-secondary-container": "#b9b8bc",
|
||
"tertiary-fixed": "#72fe88",
|
||
"secondary-fixed-dim": "#c7c6ca",
|
||
"primary-fixed-dim": "#9acbff",
|
||
"on-error": "#690005",
|
||
"surface-container-high": "#2a2a2a",
|
||
"on-primary-fixed": "#001d34",
|
||
"on-primary-container": "#002c4a",
|
||
"on-primary": "#003355",
|
||
"surface-container-lowest": "#0e0e0e",
|
||
"on-surface-variant": "#c1c6d7",
|
||
"surface-variant": "#353534",
|
||
"secondary": "#c7c6ca",
|
||
"background": "#131313",
|
||
"surface-container-highest": "#353534",
|
||
"on-tertiary-fixed-variant": "#00531c",
|
||
"surface": "#131313",
|
||
"tertiary": "#53e16f",
|
||
"on-error-container": "#ffdad6",
|
||
"on-tertiary-container": "#00320e",
|
||
"primary-fixed": "#cfe5ff",
|
||
"outline": "#8b90a0",
|
||
"surface-bright": "#393939",
|
||
"on-background": "#e5e2e1",
|
||
"primary": "#9acbff",
|
||
"outline-variant": "#414755",
|
||
"surface-tint": "#9acbff",
|
||
"tertiary-container": "#00a741",
|
||
"on-secondary-fixed-variant": "#46474a"
|
||
},
|
||
fontFamily: {
|
||
"headline": ["Inter"],
|
||
"body": ["Inter"],
|
||
"label": ["Inter"]
|
||
},
|
||
borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"},
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
<style>
|
||
.material-symbols-outlined {
|
||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||
}
|
||
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
|
||
.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> |