Загрузка данных


Дизайн камерли 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>