strongswan-ext/src/frontends/android/docs/design/final-2026/AdvRules.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:#6D4AFF}a:hover{color:#4B2FD1}
</style>
</helmet>
<div style="position: relative; width: 390px; height: 940px; box-sizing: border-box; background: #F3F0F7; font-family: 'Manrope', system-ui, sans-serif; color: #1C1B20; overflow: hidden; font-variant-numeric: tabular-nums">
  <div style="display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 0">
    <a href="AdvRouting.dc.html" aria-label="Назад" style="width: 44px; height: 44px; border-radius: 22px; background: rgba(255,255,255,0.8); box-shadow: 0 1px 2px rgba(28,27,32,0.08); display: flex; align-items: center; justify-content: center; color: #1C1B20">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 6l-6 6 6 6"/></svg>
    </a>
  </div>
  <header style="padding: 44px 24px 18px">
    <h1 style="margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -0.03em">Правила</h1>
    <p style="margin: 6px 0 0; font-size: 14px; line-height: 1.4; color: #6E6A78">Сайты, сети и приложения — куда им идти. Правило важнее базы РФ.</p>
  </header>

  <div style="padding: 0 16px; display: flex; flex-direction: column; gap: 20px">
    <div role="tablist" aria-label="Тип" style="display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 3px; border-radius: 14px; background: #E8E4EE">
      <button aria-selected="true" role="tab" style="height: 36px; border: 0; border-radius: 11px; background: #FFFFFF; color: #1C1B20; font: 800 13px 'Manrope', sans-serif; box-shadow: 0 1px 3px rgba(28,27,32,0.14)">Все</button>
      <button role="tab" style="height: 36px; border: 0; border-radius: 11px; background: transparent; color: #49454F; font: 600 13px 'Manrope', sans-serif">Сайты</button>
      <button role="tab" style="height: 36px; border: 0; border-radius: 11px; background: transparent; color: #49454F; font: 600 13px 'Manrope', sans-serif">Сети</button>
      <button role="tab" style="height: 36px; border: 0; border-radius: 11px; background: transparent; color: #49454F; font: 600 13px 'Manrope', sans-serif">Пакеты</button>
    </div>

    <sc-for list="{{groups}}" as="g" hint-placeholder-count="2">
      <section style="display: flex; flex-direction: column; gap: 8px">
        <h2 style="margin: 0 12px; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #6E6A78"><span style="width: 8px; height: 8px; border-radius: 4px; background: {{g.dot}}"></span>{{g.title}}</h2>
        <div style="border-radius: 24px; background: #FFFFFF; overflow: hidden">
          <sc-for list="{{g.rows}}" as="r" hint-placeholder-count="3">
            <div style="display: flex; align-items: center; gap: 14px; padding-left: 16px; height: 64px">
              <span style="flex: none; width: 30px; height: 30px; border-radius: 9px; background: {{r.tile}}; color: {{r.tileFg}}; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800">{{r.kind}}</span>
              <span style="flex: 1; height: 64px; display: flex; align-items: center; gap: 10px; padding-right: 14px; border-bottom: {{r.divider}}; min-width: 0">
                <span style="flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0">
                  <span style="font-size: 15px; font-weight: 700; font-family: ui-monospace, 'Cascadia Mono', Menlo, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">{{r.value}}</span>
                  <span style="font-size: 12px; color: #6E6A78">{{r.sub}}</span>
                </span>
                <button aria-pressed="{{r.on}}" aria-label="Включить правило" style="flex: none; width: 50px; height: 30px; border: 0; border-radius: 15px; background: {{r.track}}; padding: 3px; display: flex; justify-content: {{r.align}}"><span style="width: 24px; height: 24px; border-radius: 12px; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0,0,0,0.2)"></span></button>
              </span>
            </div>
          </sc-for>
        </div>
      </section>
    </sc-for>
  </div>

  <div style="position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 30px; background: rgba(255,255,255,0.78); box-shadow: 0 8px 28px rgba(59,44,136,0.18), inset 0 0 0 1px rgba(255,255,255,0.9)">
    <button style="height: 48px; padding: 0 22px; border: 0; border-radius: 24px; background: #6D4AFF; color: #FFFFFF; font: 800 15px 'Manrope', sans-serif; display: flex; align-items: center; gap: 8px">
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>Правило
    </button>
    <a href="AdvDiag.dc.html" aria-label="Проверить сайт" style="width: 48px; height: 48px; border-radius: 24px; display: flex; align-items: center; justify-content: center; color: #3B2C88">
      <svg width="20" height="20" 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>
    </a>
  </div>
</div>
</x-dc>
<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":390,"height":940}}'>
class Component extends DCLogic {
  renderVals() {
    var tiles = { WEB: ['#E3ECFF', '#2F6FDB'], NET: ['#EEEAF2', '#49454F'], PKG: ['#E2F5EA', '#148A45'] };
    var grp = function (title, dot, rows) {
      return { title: title, dot: dot, rows: rows.map(function (r, i) {
        return { kind: r[0], tile: tiles[r[0]][0], tileFg: tiles[r[0]][1], value: r[1], sub: r[2],
          on: r[3] ? 'true' : 'false', track: r[3] ? '#6D4AFF' : '#D6D2DD', align: r[3] ? 'flex-end' : 'flex-start',
          divider: i < rows.length - 1 ? '1px solid #EEEAF2' : '0' };
      }) };
    };
    return {
      groups: [
        grp('Всегда через VPN', '#6D4AFF', [
          ['WEB', 'chatgpt.com', 'домен и поддомены', true],
          ['NET', '130.49.213.176', 'адрес', true],
          ['NET', '10.8.0.0/24', 'подсеть', false]
        ]),
        grp('Всегда напрямую', '#3FBF7F', [
          ['PKG', 'ru.*', 'пакеты · 14 приложений', true],
          ['PKG', '*yandex*', 'пакеты · 6 приложений, 1 исключение', true],
          ['WEB', '*.mos.ru', 'домен и поддомены', true]
        ])
      ]
    };
  }
}
</script>
</body>
</html>