369 lines
23 KiB
HTML
369 lines
23 KiB
HTML
<!DOCTYPE html>
|
||
|
||
<html class="dark" lang="ru"><head>
|
||
<meta charset="utf-8"/>
|
||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||
<title>Knot - Групповой чат</title>
|
||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;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> |