309 lines
19 KiB
HTML
309 lines
19 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..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> |