Загрузка данных
Дизайн камерли 2.0
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<meta name="theme-color" content="#F4F3F1">
<title>AR-студия — Мои работы</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
:root {
/* Спокойная палитра — меньше контраста, больше мягкости */
--bg: #F4F3F1;
--bg-2: #EDECE9;
--card: #FFFFFF;
--text: #14171F;
--text-2: #3A4051;
--text-soft: #8E93A1;
--text-faint: #B7BBC5;
--accent: #FF7A55;
--accent-deep: #E8613A;
--navy: #1F2942;
--green: #3FAE6B;
--r-sm: 10px;
--r-md: 14px;
--r-lg: 18px;
--r-xl: 22px;
--r-2xl: 26px;
--r-full: 999px;
/* Тени — почти невидимые, воздушные */
--sh-1: 0 1px 2px rgba(15, 20, 32, 0.04);
--sh-2: 0 1px 2px rgba(15, 20, 32, 0.03), 0 4px 14px rgba(15, 20, 32, 0.04);
--sh-3: 0 2px 4px rgba(15, 20, 32, 0.03), 0 10px 28px rgba(15, 20, 32, 0.06);
/* Меню — мягкая тень, не давит */
--sh-nav: 0 4px 16px rgba(31, 41, 66, 0.10), 0 16px 44px rgba(31, 41, 66, 0.14);
--sh-fab: 0 4px 12px rgba(232, 97, 58, 0.24), 0 10px 28px rgba(232, 97, 58, 0.16);
--ease: cubic-bezier(0.2, 0.8, 0.2, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}
html, body { height: 100%; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', Roboto, sans-serif;
background: var(--bg);
color: var(--text);
min-height: 100vh;
overflow-x: hidden;
padding-bottom: 140px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.container {
padding: 0 22px;
max-width: 480px;
margin: 0 auto;
}
/* ===== HEADER ===== */
header {
padding: 22px 0 4px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.icon-btn {
width: 42px;
height: 42px;
border-radius: var(--r-full);
background: var(--card);
box-shadow: var(--sh-1);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.18s var(--ease);
position: relative;
flex-shrink: 0;
}
.icon-btn:active { transform: scale(0.94); }
.icon-btn svg {
width: 19px;
height: 19px;
stroke: var(--text-2);
stroke-width: 1.7;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.icon-btn .dot {
position: absolute;
top: 11px;
right: 11px;
width: 6px;
height: 6px;
border-radius: var(--r-full);
background: var(--accent);
box-shadow: 0 0 0 2px var(--card);
}
.header-right {
display: flex;
align-items: center;
gap: 10px;
}
.avatar {
width: 42px;
height: 42px;
border-radius: var(--r-full);
background: linear-gradient(150deg, #FF9C7C 0%, #FF7A55 100%);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 600;
font-size: 13px;
letter-spacing: 0.2px;
flex-shrink: 0;
box-shadow: 0 2px 6px rgba(232, 97, 58, 0.18);
}
/* ===== TITLE ===== */
.title-row {
display: flex;
align-items: center;
justify-content: space-between;
margin: 26px 0 22px;
}
.title-row h1 {
font-size: 25px;
font-weight: 700;
letter-spacing: -0.6px;
color: var(--text);
line-height: 1.15;
}
.title-nav {
display: flex;
gap: 6px;
}
.title-nav button {
width: 32px;
height: 32px;
border-radius: var(--r-full);
background: var(--card);
border: none;
box-shadow: var(--sh-1);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.18s var(--ease);
}
.title-nav button:active { transform: scale(0.92); }
.title-nav svg {
width: 14px;
height: 14px;
stroke: var(--text-2);
stroke-width: 2;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
/* ===== STATS — легче, без трендов ===== */
.stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 34px;
}
.stat-card {
background: var(--card);
border-radius: var(--r-lg);
padding: 18px 18px 16px;
box-shadow: var(--sh-2);
}
.stat-card .num {
font-size: 26px;
font-weight: 700;
letter-spacing: -0.7px;
color: var(--text);
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.stat-card .label {
font-size: 12px;
color: var(--text-soft);
margin-top: 4px;
font-weight: 500;
letter-spacing: 0.1px;
}
/* Тёмная карточка — теперь мягче (не такой чёрный navy) */
.stat-card.accent {
background: var(--navy);
}
.stat-card.accent .num { color: #fff; }
.stat-card.accent .label { color: rgba(255, 255, 255, 0.55); }
/* ===== SECTION ===== */
.section-head {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 16px;
padding: 0 2px;
}
.section-head h2 {
font-size: 16px;
font-weight: 700;
letter-spacing: -0.3px;
color: var(--text);
}
.section-head span {
font-size: 13px;
color: var(--text-soft);
font-weight: 500;
}
/* ===== WORKS — чище ===== */
.works {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.work-card {
background: var(--card);
border-radius: var(--r-xl);
overflow: hidden;
box-shadow: var(--sh-2);
transition: transform 0.24s var(--ease), box-shadow 0.24s var(--ease);
cursor: pointer;
}
.work-card:active {
transform: scale(0.975);
box-shadow: var(--sh-3);
}
.work-thumb {
position: relative;
aspect-ratio: 1 / 1;
background-size: cover;
background-position: center;
overflow: hidden;
background-color: var(--bg-2);
}
/* Одна мягкая градиентная тень только снизу */
.work-thumb::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 60%, rgba(15, 20, 32, 0.18) 100%);
}
/* Бейдж — только маленькая зелёная точка, никаких букв */
.status-dot {
position: absolute;
top: 10px;
left: 10px;
width: 22px;
height: 22px;
border-radius: var(--r-full);
background: rgba(255, 255, 255, 0.95);
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
box-shadow: 0 1px 3px rgba(15, 20, 32, 0.10);
}
.status-dot::before {
content: '';
width: 7px;
height: 7px;
border-radius: var(--r-full);
background: var(--green);
}
.status-dot.off::before {
background: var(--text-faint);
}
/* QR — тоньше, прозрачнее */
.qr-btn {
position: absolute;
top: 10px;
right: 10px;
width: 30px;
height: 30px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.92);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
cursor: pointer;
transition: transform 0.18s var(--ease);
}
.qr-btn:active { transform: scale(0.9); }
.qr-btn svg {
width: 14px;
height: 14px;
stroke: var(--text-2);
stroke-width: 1.8;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.work-info {
padding: 12px 14px 14px;
}
.work-info h3 {
font-size: 14px;
font-weight: 600;
letter-spacing: -0.2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--text);
line-height: 1.3;
}
.work-info p {
font-size: 12px;
color: var(--text-soft);
margin-top: 3px;
font-weight: 500;
}
/* ===== НИЖНЕЕ МЕНЮ ===== */
.bottom-nav-wrap {
position: fixed;
left: 0;
right: 0;
bottom: 20px;
padding: 0 22px;
z-index: 1000;
pointer-events: none;
display: flex;
justify-content: center;
}
.bottom-nav {
pointer-events: auto;
width: 100%;
max-width: 436px;
height: 66px;
background: var(--navy);
border-radius: var(--r-2xl);
box-shadow: var(--sh-nav);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 8px;
position: relative;
}
.nav-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
padding: 10px 4px;
cursor: pointer;
color: rgba(255, 255, 255, 0.42);
transition: color 0.24s var(--ease), transform 0.15s var(--ease);
border-radius: var(--r-md);
position: relative;
height: 100%;
}
.nav-item:active { transform: scale(0.94); }
.nav-item.active { color: #fff; }
.nav-item svg {
width: 21px;
height: 21px;
stroke: currentColor;
stroke-width: 1.75;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.nav-item span {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.1px;
}
/* Индикатор — без свечения, просто точка */
.nav-item.active::after {
content: '';
position: absolute;
bottom: 5px;
width: 4px;
height: 4px;
border-radius: var(--r-full);
background: var(--accent);
}
/* Центр для кнопки + */
.nav-center {
flex: 0 0 auto;
width: 74px;
height: 100%;
position: relative;
}
/* Кнопка + — теперь сплошная, не градиент, меньше */
.fab {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
border: none;
border-radius: var(--r-lg);
background: var(--accent);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--sh-fab);
transition: transform 0.24s var(--ease-spring), box-shadow 0.24s var(--ease), background 0.18s var(--ease);
-webkit-tap-highlight-color: transparent;
}
.fab:active {
transform: translate(-50%, -50%) scale(0.9);
background: var(--accent-deep);
box-shadow: 0 3px 8px rgba(232, 97, 58, 0.22), 0 6px 16px rgba(232, 97, 58, 0.12);
}
.fab svg {
width: 20px;
height: 20px;
stroke: #fff;
stroke-width: 2.4;
fill: none;
stroke-linecap: round;
}
/* ===== ANIMATIONS ===== */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.animate { animation: fadeUp 0.55s var(--ease) backwards; }
header { animation-delay: 0.02s; }
.title-row { animation-delay: 0.06s; }
.stats { animation-delay: 0.10s; }
.section-head { animation-delay: 0.14s; }
.work-card:nth-child(1) { animation-delay: 0.18s; }
.work-card:nth-child(2) { animation-delay: 0.22s; }
.work-card:nth-child(3) { animation-delay: 0.26s; }
.work-card:nth-child(4) { animation-delay: 0.30s; }
.work-card:nth-child(5) { animation-delay: 0.34s; }
.work-card:nth-child(6) { animation-delay: 0.38s; }
.bottom-nav-wrap { animation: fadeUp 0.6s var(--ease) 0.15s backwards; }
</style>
</head>
<body>
<div class="container">
<header class="animate">
<div class="icon-btn" aria-label="Меню">
<svg viewBox="0 0 24 24">
<line x1="12" y1="5" x2="12" y2="19"/>
<line x1="5" y1="12" x2="19" y2="12"/>
</svg>
</div>
<div class="header-right">
<div class="icon-btn" aria-label="Сообщения">
<svg viewBox="0 0 24 24">
<path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>
</svg>
<div class="dot"></div>
</div>
<div class="avatar">АК</div>
</div>
</header>
<div class="title-row animate">
<h1>Мои работы</h1>
<div class="title-nav">
<button aria-label="Назад">
<svg viewBox="0 0 24 24"><polyline points="15 18 9 12 15 6"/></svg>
</button>
<button aria-label="Вперёд">
<svg viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></svg>
</button>
</div>
</div>
<div class="stats animate">
<div class="stat-card">
<div class="num">12</div>
<div class="label">Работ</div>
</div>
<div class="stat-card accent">
<div class="num">3 481</div>
<div class="label">Сканирований</div>
</div>
</div>
<div class="section-head animate">
<h2>Опубликовано</h2>
<span>9 работ</span>
</div>
<div class="works">
<div class="work-card animate">
<div class="work-thumb" style="background-image: url('https://images.unsplash.com/photo-1519741497674-611481863552?w=600&q=80');">
<div class="status-dot"></div>
<div class="qr-btn">
<svg viewBox="0 0 24 24">
<rect x="3" y="3" width="7" height="7" rx="1.5"/>
<rect x="14" y="3" width="7" height="7" rx="1.5"/>
<rect x="3" y="14" width="7" height="7" rx="1.5"/>
<line x1="14" y1="14" x2="14" y2="17"/>
<line x1="14" y1="21" x2="17" y2="21"/>
<line x1="21" y1="14" x2="21" y2="21"/>
</svg>
</div>
</div>
<div class="work-info">
<h3>Свадьба Кати</h3>
<p>Видео</p>
</div>
</div>
<div class="work-card animate">
<div class="work-thumb" style="background-image: url('https://images.unsplash.com/photo-1516035069371-29a1b244cc32?w=600&q=80');">
<div class="status-dot"></div>
<div class="qr-btn">
<svg viewBox="0 0 24 24">
<rect x="3" y="3" width="7" height="7" rx="1.5"/>
<rect x="14" y="3" width="7" height="7" rx="1.5"/>
<rect x="3" y="14" width="7" height="7" rx="1.5"/>
<line x1="14" y1="14" x2="14" y2="17"/>
<line x1="14" y1="21" x2="17" y2="21"/>
<line x1="21" y1="14" x2="21" y2="21"/>
</svg>
</div>
</div>
<div class="work-info">
<h3>Портрет №04</h3>
<p>3D-модель</p>
</div>
</div>
<div class="work-card animate">
<div class="work-thumb" style="background-image: url('https://images.unsplash.com/photo-1502920917128-1aa500764cbd?w=600&q=80');">
<div class="status-dot off"></div>
<div class="qr-btn">
<svg viewBox="0 0 24 24">
<rect x="3" y="3" width="7" height="7" rx="1.5"/>
<rect x="14" y="3" width="7" height="7" rx="1.5"/>
<rect x="3" y="14" width="7" height="7" rx="1.5"/>
<line x1="14" y1="14" x2="14" y2="17"/>
<line x1="14" y1="21" x2="17" y2="21"/>
<line x1="21" y1="14" x2="21" y2="21"/>
</svg>
</div>
</div>
<div class="work-info">
<h3>Визитка студии</h3>
<p>Видео</p>
</div>
</div>
<div class="work-card animate">
<div class="work-thumb" style="background-image: url('https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?w=600&q=80');">
<div class="status-dot"></div>
<div class="qr-btn">
<svg viewBox="0 0 24 24">
<rect x="3" y="3" width="7" height="7" rx="1.5"/>
<rect x="14" y="3" width="7" height="7" rx="1.5"/>
<rect x="3" y="14" width="7" height="7" rx="1.5"/>
<line x1="14" y1="14" x2="14" y2="17"/>
<line x1="14" y1="21" x2="17" y2="21"/>
<line x1="21" y1="14" x2="21" y2="21"/>
</svg>
</div>
</div>
<div class="work-info">
<h3>Love Story</h3>
<p>Видео + аудио</p>
</div>
</div>
<div class="work-card animate">
<div class="work-thumb" style="background-image: url('https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=600&q=80');">
<div class="status-dot"></div>
<div class="qr-btn">
<svg viewBox="0 0 24 24">
<rect x="3" y="3" width="7" height="7" rx="1.5"/>
<rect x="14" y="3" width="7" height="7" rx="1.5"/>
<rect x="3" y="14" width="7" height="7" rx="1.5"/>
<line x1="14" y1="14" x2="14" y2="17"/>
<line x1="14" y1="21" x2="17" y2="21"/>
<line x1="21" y1="14" x2="21" y2="21"/>
</svg>
</div>
</div>
<div class="work-info">
<h3>Портрет №07</h3>
<p>3D-модель</p>
</div>
</div>
<div class="work-card animate">
<div class="work-thumb" style="background-image: url('https://images.unsplash.com/photo-1524504388940-b1c1722653e1?w=600&q=80');">
<div class="status-dot"></div>
<div class="qr-btn">
<svg viewBox="0 0 24 24">
<rect x="3" y="3" width="7" height="7" rx="1.5"/>
<rect x="14" y="3" width="7" height="7" rx="1.5"/>
<rect x="3" y="14" width="7" height="7" rx="1.5"/>
<line x1="14" y1="14" x2="14" y2="17"/>
<line x1="14" y1="21" x2="17" y2="21"/>
<line x1="21" y1="14" x2="21" y2="21"/>
</svg>
</div>
</div>
<div class="work-info">
<h3>Fashion Look</h3>
<p>Видео</p>
</div>
</div>
</div>
</div>
<div class="bottom-nav-wrap">
<nav class="bottom-nav">
<div class="nav-item active">
<svg viewBox="0 0 24 24">
<rect x="3" y="3" width="7" height="7" rx="2"/>
<rect x="14" y="3" width="7" height="7" rx="2"/>
<rect x="3" y="14" width="7" height="7" rx="2"/>
<rect x="14" y="14" width="7" height="7" rx="2"/>
</svg>
<span>Работы</span>
</div>
<div class="nav-center">
<button class="fab" aria-label="Добавить работу">
<svg viewBox="0 0 24 24">
<line x1="12" y1="5.5" x2="12" y2="18.5"/>
<line x1="5.5" y1="12" x2="18.5" y2="12"/>
</svg>
</button>
</div>
<div class="nav-item">
<svg viewBox="0 0 24 24">
<circle cx="12" cy="12" r="3"/>
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
</svg>
<span>Настройки</span>
</div>
</nav>
</div>
</body>
</html>
Дизайн Камерли
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<meta name="theme-color" content="#F2F1EE">
<title>AR-студия — Мои работы</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
:root {
--bg: #F2F1EE;
--bg-2: #EAE8E3;
--card: #FFFFFF;
--border: rgba(15, 20, 32, 0.06);
--text: #0F1420;
--text-2: #2C3346;
--text-soft: #8B92A4;
--text-faint: #B4BAC7;
--accent: #FF6B3D;
--accent-2: #FF8B5F;
--accent-deep: #E85527;
--navy: #171E33;
--navy-2: #222A44;
--green: #3FAE6B;
--green-soft: #E8F6EE;
--r-sm: 12px;
--r-md: 16px;
--r-lg: 20px;
--r-xl: 24px;
--r-2xl: 28px;
--r-full: 999px;
--sh-xs: 0 1px 2px rgba(15, 20, 32, 0.03);
--sh-sm: 0 1px 2px rgba(15, 20, 32, 0.03), 0 2px 6px rgba(15, 20, 32, 0.03);
--sh-md: 0 1px 2px rgba(15, 20, 32, 0.03), 0 6px 16px rgba(15, 20, 32, 0.05);
--sh-lg: 0 2px 4px rgba(15, 20, 32, 0.03), 0 12px 28px rgba(15, 20, 32, 0.07);
--sh-xl: 0 4px 8px rgba(15, 20, 32, 0.04), 0 20px 44px rgba(15, 20, 32, 0.09);
--sh-nav: 0 2px 4px rgba(23, 30, 51, 0.08), 0 12px 28px rgba(23, 30, 51, 0.18), 0 28px 64px rgba(23, 30, 51, 0.16);
--sh-fab: 0 6px 16px rgba(232, 85, 39, 0.28), 0 14px 32px rgba(232, 85, 39, 0.20);
--ease: cubic-bezier(0.2, 0.8, 0.2, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}
html, body { height: 100%; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', Roboto, sans-serif;
background: var(--bg);
color: var(--text);
min-height: 100vh;
overflow-x: hidden;
padding-bottom: 140px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.container {
padding: 0 20px;
max-width: 480px;
margin: 0 auto;
}
/* ===== HEADER ===== */
header {
padding: 20px 0 4px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.icon-btn {
width: 44px;
height: 44px;
border-radius: var(--r-full);
background: var(--card);
border: 1px solid var(--border);
box-shadow: var(--sh-sm);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.18s var(--ease);
position: relative;
flex-shrink: 0;
}
.icon-btn:active { transform: scale(0.92); }
.icon-btn svg {
width: 19px;
height: 19px;
stroke: var(--text);
stroke-width: 1.75;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.icon-btn .dot {
position: absolute;
top: 10px;
right: 10px;
width: 8px;
height: 8px;
border-radius: var(--r-full);
background: var(--accent);
box-shadow: 0 0 0 2.5px var(--card);
}
.header-right {
display: flex;
align-items: center;
gap: 10px;
}
.avatar {
width: 44px;
height: 44px;
border-radius: var(--r-full);
background: linear-gradient(160deg, #FF8B5F 0%, #FF6B3D 55%, #E85527 100%);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 700;
font-size: 14px;
box-shadow: 0 2px 6px rgba(232, 85, 39, 0.22);
flex-shrink: 0;
border: 2px solid var(--card);
}
/* ===== TITLE ===== */
.title-row {
display: flex;
align-items: center;
justify-content: space-between;
margin: 24px 0 18px;
}
.title-row h1 {
font-size: 27px;
font-weight: 800;
letter-spacing: -0.8px;
color: var(--text);
line-height: 1.15;
}
.title-nav {
display: flex;
gap: 6px;
}
.title-nav button {
width: 34px;
height: 34px;
border-radius: var(--r-full);
background: var(--card);
border: 1px solid var(--border);
box-shadow: var(--sh-xs);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.18s var(--ease);
}
.title-nav button:active { transform: scale(0.9); }
.title-nav svg {
width: 15px;
height: 15px;
stroke: var(--text-2);
stroke-width: 2.2;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
/* ===== STATS ===== */
.stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 30px;
}
.stat-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 18px 18px 16px;
box-shadow: var(--sh-md);
position: relative;
overflow: hidden;
}
.stat-card .num {
font-size: 30px;
font-weight: 800;
letter-spacing: -1px;
color: var(--text);
line-height: 1.05;
font-variant-numeric: tabular-nums;
}
.stat-card .label {
font-size: 12px;
color: var(--text-soft);
margin-top: 5px;
font-weight: 600;
}
.stat-card .trend {
display: inline-flex;
align-items: center;
gap: 3px;
margin-top: 8px;
padding: 3px 7px 3px 5px;
border-radius: var(--r-full);
background: var(--green-soft);
color: var(--green);
font-size: 10px;
font-weight: 700;
}
.stat-card .trend svg {
width: 11px;
height: 11px;
stroke: currentColor;
stroke-width: 2.5;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.stat-card.accent {
background: linear-gradient(165deg, var(--navy-2) 0%, var(--navy) 100%);
border-color: transparent;
box-shadow: 0 2px 4px rgba(23, 30, 51, 0.08), 0 12px 28px rgba(23, 30, 51, 0.18);
}
.stat-card.accent .num { color: #fff; }
.stat-card.accent .label { color: rgba(255, 255, 255, 0.5); }
.stat-card.accent .trend {
background: rgba(255, 107, 61, 0.18);
color: #FFB694;
}
/* ===== SECTION ===== */
.section-head {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 14px;
padding: 0 2px;
}
.section-head h2 {
font-size: 17px;
font-weight: 800;
letter-spacing: -0.4px;
color: var(--text);
}
.section-head span {
font-size: 13px;
color: var(--text-soft);
font-weight: 600;
}
/* ===== WORKS ===== */
.works {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.work-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-xl);
overflow: hidden;
box-shadow: var(--sh-md);
transition: transform 0.24s var(--ease), box-shadow 0.24s var(--ease);
cursor: pointer;
}
.work-card:active {
transform: scale(0.972);
box-shadow: var(--sh-xl);
}
.work-thumb {
position: relative;
aspect-ratio: 1 / 1;
background-size: cover;
background-position: center;
overflow: hidden;
background-color: var(--bg-2);
}
.work-thumb::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(15, 20, 32, 0.08) 0%, transparent 30%, transparent 55%, rgba(15, 20, 32, 0.28) 100%);
}
.badge {
position: absolute;
top: 10px;
left: 10px;
padding: 5px 9px 5px 8px;
border-radius: var(--r-sm);
background: rgba(255, 255, 255, 0.92);
-webkit-backdrop-filter: blur(12px) saturate(180%);
backdrop-filter: blur(12px) saturate(180%);
display: flex;
align-items: center;
gap: 5px;
font-size: 10px;
font-weight: 800;
color: var(--green);
letter-spacing: 0.4px;
z-index: 2;
box-shadow: 0 1px 3px rgba(15, 20, 32, 0.12);
}
.badge::before {
content: '';
width: 6px;
height: 6px;
border-radius: var(--r-full);
background: var(--green);
box-shadow: 0 0 0 3px rgba(63, 174, 107, 0.18);
}
.badge.off { color: var(--text-soft); }
.badge.off::before {
background: var(--text-faint);
box-shadow: 0 0 0 3px rgba(180, 186, 199, 0.2);
}
.qr-btn {
position: absolute;
top: 10px;
right: 10px;
width: 34px;
height: 34px;
border-radius: var(--r-sm);
background: rgba(255, 255, 255, 0.92);
-webkit-backdrop-filter: blur(12px) saturate(180%);
backdrop-filter: blur(12px) saturate(180%);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 3px rgba(15, 20, 32, 0.12);
z-index: 2;
cursor: pointer;
transition: transform 0.18s var(--ease);
}
.qr-btn:active { transform: scale(0.88); }
.qr-btn svg {
width: 16px;
height: 16px;
stroke: var(--text);
stroke-width: 1.9;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.work-info {
padding: 12px 14px 14px;
}
.work-info h3 {
font-size: 14px;
font-weight: 700;
letter-spacing: -0.25px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--text);
line-height: 1.3;
}
.work-meta {
display: flex;
align-items: center;
gap: 6px;
margin-top: 5px;
color: var(--text-soft);
font-size: 11.5px;
font-weight: 600;
}
.work-meta .dot-sep {
width: 3px;
height: 3px;
border-radius: var(--r-full);
background: var(--text-faint);
flex-shrink: 0;
}
.work-meta .scans {
display: inline-flex;
align-items: center;
gap: 3px;
}
.work-meta .scans svg {
width: 12px;
height: 12px;
stroke: var(--text-soft);
stroke-width: 2;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
/* ============================================================
НИЖНЕЕ МЕНЮ — простая, надёжная структура
============================================================ */
.bottom-nav-wrap {
position: fixed;
left: 0;
right: 0;
bottom: 20px;
padding: 0 20px;
z-index: 1000;
pointer-events: none;
display: flex;
justify-content: center;
}
.bottom-nav {
pointer-events: auto;
width: 100%;
max-width: 440px;
height: 70px;
background: linear-gradient(170deg, #232B47 0%, #171E33 100%);
border-radius: 26px;
box-shadow: 0 2px 4px rgba(23, 30, 51, 0.10),
0 14px 32px rgba(23, 30, 51, 0.22),
0 30px 68px rgba(23, 30, 51, 0.18);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 8px;
border: 1px solid rgba(255, 255, 255, 0.05);
position: relative;
}
.nav-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
padding: 10px 4px;
cursor: pointer;
color: rgba(255, 255, 255, 0.42);
transition: color 0.24s var(--ease), transform 0.15s var(--ease);
border-radius: var(--r-md);
position: relative;
height: 100%;
}
.nav-item:active { transform: scale(0.94); }
.nav-item.active { color: #fff; }
.nav-item svg {
width: 22px;
height: 22px;
stroke: currentColor;
stroke-width: 1.85;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.nav-item span {
font-size: 10px;
font-weight: 600;
}
.nav-item.active::after {
content: '';
position: absolute;
bottom: 4px;
width: 14px;
height: 2.5px;
border-radius: var(--r-full);
background: var(--accent);
box-shadow: 0 0 8px rgba(255, 107, 61, 0.6);
}
/* Центр — слот для кнопки + */
.nav-center {
flex: 0 0 auto;
width: 76px;
height: 100%;
position: relative;
}
/* Сама кнопка + — чистая, аккуратная, слегка приподнята */
.fab {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 56px;
height: 56px;
border: none;
border-radius: 20px;
background: linear-gradient(160deg, #FF8B5F 0%, #FF6B3D 50%, #E85527 100%);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 16px rgba(232, 85, 39, 0.32),
0 14px 32px rgba(232, 85, 39, 0.20),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
transition: transform 0.24s var(--ease-spring), box-shadow 0.24s var(--ease);
-webkit-tap-highlight-color: transparent;
}
.fab:active {
transform: translate(-50%, -50%) scale(0.9);
box-shadow: 0 3px 8px rgba(232, 85, 39, 0.28),
0 8px 20px rgba(232, 85, 39, 0.16);
}
.fab svg {
width: 22px;
height: 22px;
stroke: #fff;
stroke-width: 2.4;
fill: none;
stroke-linecap: round;
}
/* ===== ANIMATIONS ===== */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
.animate { animation: fadeUp 0.55s var(--ease) backwards; }
header { animation-delay: 0.02s; }
.title-row { animation-delay: 0.06s; }
.stats { animation-delay: 0.10s; }
.section-head { animation-delay: 0.14s; }
.work-card:nth-child(1) { animation-delay: 0.18s; }
.work-card:nth-child(2) { animation-delay: 0.22s; }
.work-card:nth-child(3) { animation-delay: 0.26s; }
.work-card:nth-child(4) { animation-delay: 0.30s; }
.work-card:nth-child(5) { animation-delay: 0.34s; }
.work-card:nth-child(6) { animation-delay: 0.38s; }
.bottom-nav-wrap { animation: fadeUp 0.6s var(--ease) 0.15s backwards; }
</style>
</head>
<body>
<div class="container">
<header class="animate">
<div class="icon-btn" aria-label="Меню">
<svg viewBox="0 0 24 24">
<line x1="12" y1="5" x2="12" y2="19"/>
<line x1="5" y1="12" x2="19" y2="12"/>
</svg>
</div>
<div class="header-right">
<div class="icon-btn" aria-label="Сообщения">
<svg viewBox="0 0 24 24">
<path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>
</svg>
<div class="dot"></div>
</div>
<div class="avatar">АК</div>
</div>
</header>
<div class="title-row animate">
<h1>Мои работы</h1>
<div class="title-nav">
<button aria-label="Назад">
<svg viewBox="0 0 24 24"><polyline points="15 18 9 12 15 6"/></svg>
</button>
<button aria-label="Вперёд">
<svg viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></svg>
</button>
</div>
</div>
<div class="stats animate">
<div class="stat-card">
<div class="num">12</div>
<div class="label">Работ</div>
<div class="trend">
<svg viewBox="0 0 24 24"><polyline points="6 15 12 9 18 15"/></svg>
+2 за месяц
</div>
</div>
<div class="stat-card accent">
<div class="num">3 481</div>
<div class="label">Сканирований</div>
<div class="trend">
<svg viewBox="0 0 24 24"><polyline points="6 15 12 9 18 15"/></svg>
+18%
</div>
</div>
</div>
<div class="section-head animate">
<h2>Опубликовано</h2>
<span>9 работ</span>
</div>
<div class="works">
<div class="work-card animate">
<div class="work-thumb" style="background-image: url('https://images.unsplash.com/photo-1519741497674-611481863552?w=600&q=80');">
<div class="badge">LIVE</div>
<div class="qr-btn">
<svg viewBox="0 0 24 24">
<rect x="3" y="3" width="7" height="7" rx="1.5"/>
<rect x="14" y="3" width="7" height="7" rx="1.5"/>
<rect x="3" y="14" width="7" height="7" rx="1.5"/>
<line x1="14" y1="14" x2="14" y2="17"/>
<line x1="14" y1="21" x2="17" y2="21"/>
<line x1="21" y1="14" x2="21" y2="21"/>
</svg>
</div>
</div>
<div class="work-info">
<h3>Свадьба Кати</h3>
<div class="work-meta">
<span>Видео</span>
<span class="dot-sep"></span>
<span class="scans">
<svg viewBox="0 0 24 24">
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
<circle cx="12" cy="12" r="3"/>
</svg>
842
</span>
</div>
</div>
</div>
<div class="work-card animate">
<div class="work-thumb" style="background-image: url('https://images.unsplash.com/photo-1516035069371-29a1b244cc32?w=600&q=80');">
<div class="badge">LIVE</div>
<div class="qr-btn">
<svg viewBox="0 0 24 24">
<rect x="3" y="3" width="7" height="7" rx="1.5"/>
<rect x="14" y="3" width="7" height="7" rx="1.5"/>
<rect x="3" y="14" width="7" height="7" rx="1.5"/>
<line x1="14" y1="14" x2="14" y2="17"/>
<line x1="14" y1="21" x2="17" y2="21"/>
<line x1="21" y1="14" x2="21" y2="21"/>
</svg>
</div>
</div>
<div class="work-info">
<h3>Портрет №04</h3>
<div class="work-meta">
<span>3D-модель</span>
<span class="dot-sep"></span>
<span class="scans">
<svg viewBox="0 0 24 24">
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
<circle cx="12" cy="12" r="3"/>
</svg>
634
</span>
</div>
</div>
</div>
<div class="work-card animate">
<div class="work-thumb" style="background-image: url('https://images.unsplash.com/photo-1502920917128-1aa500764cbd?w=600&q=80');">
<div class="badge off">СКРЫТО</div>
<div class="qr-btn">
<svg viewBox="0 0 24 24">
<rect x="3" y="3" width="7" height="7" rx="1.5"/>
<rect x="14" y="3" width="7" height="7" rx="1.5"/>
<rect x="3" y="14" width="7" height="7" rx="1.5"/>
<line x1="14" y1="14" x2="14" y2="17"/>
<line x1="14" y1="21" x2="17" y2="21"/>
<line x1="21" y1="14" x2="21" y2="21"/>
</svg>
</div>
</div>
<div class="work-info">
<h3>Визитка студии</h3>
<div class="work-meta">
<span>Видео</span>
<span class="dot-sep"></span>
<span class="scans">
<svg viewBox="0 0 24 24">
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
<circle cx="12" cy="12" r="3"/>
</svg>
0
</span>
</div>
</div>
</div>
<div class="work-card animate">
<div class="work-thumb" style="background-image: url('https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?w=600&q=80');">
<div class="badge">LIVE</div>
<div class="qr-btn">
<svg viewBox="0 0 24 24">
<rect x="3" y="3" width="7" height="7" rx="1.5"/>
<rect x="14" y="3" width="7" height="7" rx="1.5"/>
<rect x="3" y="14" width="7" height="7" rx="1.5"/>
<line x1="14" y1="14" x2="14" y2="17"/>
<line x1="14" y1="21" x2="17" y2="21"/>
<line x1="21" y1="14" x2="21" y2="21"/>
</svg>
</div>
</div>
<div class="work-info">
<h3>Love Story</h3>
<div class="work-meta">
<span>Видео + аудио</span>
<span class="dot-sep"></span>
<span class="scans">
<svg viewBox="0 0 24 24">
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
<circle cx="12" cy="12" r="3"/>
</svg>
1 241
</span>
</div>
</div>
</div>
<div class="work-card animate">
<div class="work-thumb" style="background-image: url('https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=600&q=80');">
<div class="badge">LIVE</div>
<div class="qr-btn">
<svg viewBox="0 0 24 24">
<rect x="3" y="3" width="7" height="7" rx="1.5"/>
<rect x="14" y="3" width="7" height="7" rx="1.5"/>
<rect x="3" y="14" width="7" height="7" rx="1.5"/>
<line x1="14" y1="14" x2="14" y2="17"/>
<line x1="14" y1="21" x2="17" y2="21"/>
<line x1="21" y1="14" x2="21" y2="21"/>
</svg>
</div>
</div>
<div class="work-info">
<h3>Портрет №07</h3>
<div class="work-meta">
<span>3D-модель</span>
<span class="dot-sep"></span>
<span class="scans">
<svg viewBox="0 0 24 24">
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
<circle cx="12" cy="12" r="3"/>
</svg>
412
</span>
</div>
</div>
</div>
<div class="work-card animate">
<div class="work-thumb" style="background-image: url('https://images.unsplash.com/photo-1524504388940-b1c1722653e1?w=600&q=80');">
<div class="badge">LIVE</div>
<div class="qr-btn">
<svg viewBox="0 0 24 24">
<rect x="3" y="3" width="7" height="7" rx="1.5"/>
<rect x="14" y="3" width="7" height="7" rx="1.5"/>
<rect x="3" y="14" width="7" height="7" rx="1.5"/>
<line x1="14" y1="14" x2="14" y2="17"/>
<line x1="14" y1="21" x2="17" y2="21"/>
<line x1="21" y1="14" x2="21" y2="21"/>
</svg>
</div>
</div>
<div class="work-info">
<h3>Fashion Look</h3>
<div class="work-meta">
<span>Видео</span>
<span class="dot-sep"></span>
<span class="scans">
<svg viewBox="0 0 24 24">
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
<circle cx="12" cy="12" r="3"/>
</svg>
352
</span>
</div>
</div>
</div>
</div>
</div>
<!-- НИЖНЕЕ МЕНЮ -->
<div class="bottom-nav-wrap">
<nav class="bottom-nav">
<div class="nav-item active">
<svg viewBox="0 0 24 24">
<rect x="3" y="3" width="7" height="7" rx="2"/>
<rect x="14" y="3" width="7" height="7" rx="2"/>
<rect x="3" y="14" width="7" height="7" rx="2"/>
<rect x="14" y="14" width="7" height="7" rx="2"/>
</svg>
<span>Работы</span>
</div>
<div class="nav-center">
<button class="fab" aria-label="Добавить работу">
<svg viewBox="0 0 24 24">
<line x1="12" y1="5.5" x2="12" y2="18.5"/>
<line x1="5.5" y1="12" x2="18.5" y2="12"/>
</svg>
</button>
</div>
<div class="nav-item">
<svg viewBox="0 0 24 24">
<circle cx="12" cy="12" r="3"/>
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
</svg>
<span>Настройки</span>
</div>
</nav>
</div>
</body>
</html>