strongswan-ext/src/frontends/android/docs/design/final-2026/D_StatsEmpty.dc.html

<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Тёмная · Статистика — первый день</title>
<script src="./support.js"></script>
</head>
<body>
<x-dc>
<helmet>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&amp;display=swap">
<style>
body{margin:0}
a{color:#B69DFF}a:hover{color:#D0C2FF}
</style>
</helmet>
<div style="position: relative; width: 390px; height: 844px; box-sizing: border-box; background: #141318; font-family: 'Manrope', system-ui, sans-serif; color: #E5E1E9; overflow: hidden; font-variant-numeric: tabular-nums">
  <header style="display: flex; align-items: center; gap: 8px; padding: 16px 12px 8px">
    <a href="D_Home.dc.html" aria-label="Назад" style="width: 44px; height: 44px; border-radius: 22px; display: flex; align-items: center; justify-content: center; color: #E5E1E9">
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 6l-6 6 6 6"/></svg>
    </a>
    <h1 style="margin: 0; flex: 1; font-size: 22px; font-weight: 800">Статистика</h1>
  </header>

  <div style="padding: 4px 16px 0; display: flex; flex-direction: column; gap: 14px">
    <div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 4px; border-radius: 16px; background: #2B2930">
      <button aria-pressed="true" style="height: 40px; border: 0; border-radius: 12px; background: #1F1D24; color: #E5E1E9; font: 800 14px 'Manrope', sans-serif; box-shadow: 0 1px 3px rgba(28,27,32,0.12)">День</button>
      <button aria-pressed="false" style="height: 40px; border: 0; border-radius: 12px; background: transparent; color: #938F99; font: 600 14px 'Manrope', sans-serif">Неделя</button>
      <button aria-pressed="false" style="height: 40px; border: 0; border-radius: 12px; background: transparent; color: #938F99; font: 600 14px 'Manrope', sans-serif">Месяц</button>
    </div>

    <section style="padding: 18px; border-radius: 24px; background: #1F1D24; border: 1px solid #2E2B35; display: flex; flex-direction: column; gap: 14px">
      <span style="display: flex; flex-direction: column; gap: 2px">
        <span style="font-size: 13px; font-weight: 600; color: #A9A3BF">Сегодня</span>
        <span style="font-size: 32px; font-weight: 800; letter-spacing: -0.02em">86 МБ</span>
      </span>
      <div aria-hidden="true" style="display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; align-items: end; height: 140px">
        <sc-for list="{{bars}}" as="b" hint-placeholder-count="7">
          <div style="display: flex; flex-direction: column; align-items: center; gap: 6px">
            <div style="width: 100%; height: {{b.h}}; border-radius: 6px; background: {{b.c}}; border: {{b.border}}; box-sizing: border-box"></div>
            <span style="font-size: 12px; font-weight: 600; color: #938F99">{{b.d}}</span>
          </div>
        </sc-for>
      </div>
    </section>

    <div style="display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 22px; background: #2A2343">
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#6D4AFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: none"><path d="M12 7v5l3 2M12 3a9 9 0 1 0 0 18a9 9 0 1 0 0-18"/></svg>
      <span style="display: flex; flex-direction: column; gap: 4px">
        <span style="font-size: 15px; font-weight: 800; color: #EADDFF">История копится с сегодняшнего дня</span>
        <span style="font-size: 13px; line-height: 1.45; color: #D0C2FF">Через неделю здесь будет видно, сколько трафика идёт через VPN и сколько напрямую, и какие приложения тратят больше всего.</span>
      </span>
    </div>
  </div>
</div>
</x-dc>
<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":390,"height":844}}'>
class Component extends DCLogic {
  renderVals() {
    var d = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];
    return { bars: d.map(function (x, i) { var today = i === 5; return { d: x, h: today ? '34px' : '100%', c: today ? '#B69DFF' : 'transparent', border: today ? '0' : '1.5px dashed #3A3740' }; }) };
  }
}
</script>
</body>
</html>