strongswan-ext/src/frontends/android/docs/design/final-2026/D_Settings.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: 1200px; box-sizing: border-box; background: #141318; font-family: 'Manrope', system-ui, sans-serif; color: #E5E1E9; overflow: hidden">
  <header style="padding: 18px 20px 8px">
    <h1 style="margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.02em">Настройки</h1>
  </header>

  <div style="padding: 4px 16px 0; display: flex; flex-direction: column; gap: 12px">
    <label style="display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px; border-radius: 24px; background: #2B2930; color: #A9A3BF">
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/></svg>
      <input type="text" placeholder="Поиск по настройкам" aria-label="Поиск по настройкам" style="flex: 1; min-width: 0; width: 100%; border: 0; background: transparent; font: 500 15px 'Manrope', sans-serif; color: #E5E1E9; outline: none">
    </label>

    <sc-for list="{{groups}}" as="g" hint-placeholder-count="3">
      <section style="display: flex; flex-direction: column; gap: 6px">
        <h2 style="margin: 6px 6px 0; font-size: 13px; font-weight: 800; color: #B69DFF; letter-spacing: 0.04em">{{g.title}}</h2>
        <div style="border-radius: 24px; background: #1F1D24; border: 1px solid #2E2B35; overflow: hidden">
          <sc-for list="{{g.rows}}" as="r" hint-placeholder-count="2">
            <a href="{{r.href}}" style="display: flex; align-items: center; gap: 12px; padding: 0 14px; height: 62px; border-bottom: {{r.divider}}; text-decoration: none; color: #E5E1E9">
              <span style="flex: none; width: 36px; height: 36px; border-radius: 12px; background: #2B2930; color: #D0C2FF; display: flex; align-items: center; justify-content: center"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="{{r.icon}}"/></svg></span>
              <span style="flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0">
                <span style="font-size: 15px; font-weight: 700">{{r.title}}</span>
                <span style="font-size: 12px; color: {{r.subColor}}; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">{{r.sub}}</span>
              </span>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#938F99" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg>
            </a>
          </sc-for>
        </div>
      </section>
    </sc-for>
  </div>

  <nav aria-label="Основная навигация" style="position: absolute; left: 0; right: 0; bottom: 0; height: 80px; background: #2B2930; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center">
    <sc-for list="{{tabs}}" as="t" hint-placeholder-count="4">
      <a href="{{t.href}}" style="display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; color: {{t.fg}}; font-size: 12px; font-weight: {{t.weight}}">
        <span style="width: 60px; height: 32px; border-radius: 16px; background: {{t.pill}}; display: flex; align-items: center; justify-content: center"><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="{{t.icon}}"/></svg></span>{{t.label}}
      </a>
    </sc-for>
  </nav>
</div>
</x-dc>
<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":390,"height":1200}}'>
class Component extends DCLogic {
  renderVals() {
    var tabs = [
      ['Главная', 'D_Home.dc.html', 'M12 3v9M6.3 6.3a8 8 0 1 0 11.4 0'],
      ['Серверы', 'D_Servers.dc.html', 'M12 3a9 9 0 1 0 0 18a9 9 0 1 0 0-18M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18'],
      ['Маршруты', 'D_Routing.dc.html', 'M4 12h6l4-6h6M10 12l4 6h6'],
      ['Настройки', 'D_Settings.dc.html', 'M4 7h10M18 7h2M4 17h4M12 17h8M14 5v4M8 15v4']
    ];
    var grp = function (title, rows) {
      return { title: title, rows: rows.map(function (r, i) {
        return { title: r[0], sub: r[1], href: r[2], icon: r[3], subColor: r[4] ? '#FFB869' : '#A9A3BF', divider: i < rows.length - 1 ? '1px solid #2B2930' : '0' };
      }) };
    };
    return {
      tabs: tabs.map(function (t, i) {
        var on = i === 3;
        return { label: t[0], href: t[1], icon: t[2], fg: on ? '#E5E1E9' : '#CAC4D0', weight: on ? '800' : '600', pill: on ? '#3B2C88' : 'transparent' };
      }),
      groups: [
        grp('АВТОМАТИЗАЦИЯ', [
          ['Сценарии', '3 активных · сеть, приложения, время', 'D_Automation.dc.html', 'M5 4l14 8-14 8z'],
          ['Доверенные сети', 'Дом, Офис', 'D_Automation.dc.html', 'M2 9a15 15 0 0 1 20 0M5 13a10 10 0 0 1 14 0M9 17a4 4 0 0 1 6 0'],
          ['Проверка связи', 'Каждые 30 с · переподключать', 'D_Diag.dc.html', 'M3 12h4l3-8 4 16 3-8h4']
        ]),
        grp('ЗАЩИТА', [
          ['DNS и реклама', 'Cloudflare DoH · блокировка включена', 'D_Protection.dc.html', 'M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'],
          ['Без VPN — без сети', 'Выключено — нажмите, чтобы включить', 'D_KillSwitch.dc.html', 'M6 11V8a6 6 0 0 1 12 0v3M5 11h14v10H5z', true]
        ]),
        grp('ПРИЛОЖЕНИЕ', [
          ['Стабильная работа', 'Батарея, уведомления, разрешения', 'D_Permissions.dc.html', 'M7 4h10v17H7zM10 2h4M10 9h4M10 13h4'],
          ['Уведомления', 'Проблемы — важные, подсказки — тихо', 'D_NotifSettings.dc.html', 'M6 16V11a6 6 0 0 1 12 0v5l1.5 2h-15zM10 20a2 2 0 0 0 4 0'],
          ['Обновления', 'Версия 2.17.0 · ставятся сами', 'D_Update.dc.html', 'M20 12a8 8 0 1 1-2.3-5.7M20 4v5h-5'],
          ['Оформление', 'Как в системе', 'D_Appearance.dc.html', 'M12 3a9 9 0 1 0 9 9a7 7 0 0 1-9-9']
        ]),
        grp('ПОДДЕРЖКА', [
          ['Помощь', 'Частые вопросы, о приложении', 'D_Help.dc.html', 'M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.6.3-1 .9-1 1.6M12 17v.5M12 3a9 9 0 1 0 0 18a9 9 0 1 0 0-18'],
          ['Журнал', 'Для поддержки', 'D_Log.dc.html', 'M6 3h9l4 4v14H6zM9 12h6M9 16h6'],
          ['Сертификаты', '2 из профилей · 1 скоро истекает', 'D_Certs.dc.html', 'M4 5h16v10H4zM8 19l4-2 4 2v-4H8z']
        ])
      ]
    };
  }
}
</script>
</body>
</html>