305 lines
20 KiB
HTML
305 lines
20 KiB
HTML
<!DOCTYPE html>
|
||
|
||
<html class="dark" lang="ru"><head>
|
||
<meta charset="utf-8"/>
|
||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;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> |