strongswan-ext/src/frontends/android/docs/design/final-2026/D_Rules.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: 900px; 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_Routing.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: 0 16px; display: flex; flex-direction: column; gap: 12px">
    <p style="margin: 0 4px; font-size: 14px; line-height: 1.45; color: #CAC4D0">Куда идут сайты, адреса и приложения. Правило важнее базы РФ.</p>

    <div style="display: flex; gap: 8px">
      <button aria-pressed="true" style="height: 36px; padding: 0 14px; border-radius: 12px; border: 0; background: #3B2C88; color: #FFFFFF; font: 700 13px 'Manrope', sans-serif">Все · 6</button>
      <button style="height: 36px; padding: 0 14px; border-radius: 12px; border: 1px solid #48454E; background: transparent; color: #E5E1E9; font: 600 13px 'Manrope', sans-serif">Сайты</button>
      <button style="height: 36px; padding: 0 14px; border-radius: 12px; border: 1px solid #48454E; background: transparent; color: #E5E1E9; font: 600 13px 'Manrope', sans-serif">Адреса</button>
      <button style="height: 36px; padding: 0 14px; border-radius: 12px; border: 1px solid #48454E; background: transparent; color: #E5E1E9; 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: 6px">
        <h2 style="margin: 6px 6px 0; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; color: #B69DFF; letter-spacing: 0.04em"><span style="width: 8px; height: 8px; border-radius: 4px; background: {{g.dot}}"></span>{{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="3">
            <div style="display: flex; align-items: center; gap: 12px; padding: 0 14px; height: 64px; border-bottom: {{r.divider}}">
              <span style="flex: none; padding: 3px 7px; border-radius: 8px; background: {{r.tagBg}}; color: {{r.tagFg}}; font-size: 10px; font-weight: 800">{{r.kind}}</span>
              <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: #A9A3BF">{{r.sub}}</span>
              </span>
              <button aria-pressed="{{r.on}}" aria-label="Включить правило" style="flex: none; width: 52px; height: 32px; border: 0; border-radius: 16px; background: {{r.track}}; padding: 4px; display: flex; justify-content: {{r.align}}"><span style="width: 24px; height: 24px; border-radius: 12px; background: #1F1D24"></span></button>
            </div>
          </sc-for>
        </div>
      </section>
    </sc-for>
  </div>

  <a href="D_RuleAdd.dc.html" style="position: absolute; right: 16px; bottom: 24px; height: 60px; padding: 0 22px; border: 0; border-radius: 20px; background: #6D4AFF; color: #FFFFFF; font-size: 16px; font-weight: 800; text-decoration: none; display: flex; align-items: center; gap: 10px; box-shadow: 0 6px 18px rgba(109,74,255,0.35)">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>Правило
  </a>
</div>
</x-dc>
<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":390,"height":900}}'>
class Component extends DCLogic {
  renderVals() {
    var tag = { 'САЙТ': ['#1E2A44', '#A8C7FF'], 'АДРЕС': ['#2B2930', '#CAC4D0'], 'ПАКЕТ': ['#12321F', '#7CE3B0'] };
    var grp = function (title, dot, rows) {
      return { title: title, dot: dot, rows: rows.map(function (r, i) {
        return { kind: r[0], tagBg: tag[r[0]][0], tagFg: tag[r[0]][1], value: r[1], sub: r[2],
          on: r[3] ? 'true' : 'false', track: r[3] ? '#6D4AFF' : '#48454E', align: r[3] ? 'flex-end' : 'flex-start',
          divider: i < rows.length - 1 ? '1px solid #2B2930' : '0' };
      }) };
    };
    return {
      groups: [
        grp('ВСЕГДА ЧЕРЕЗ VPN', '#6D4AFF', [
          ['САЙТ', 'chatgpt.com', 'и поддомены', true],
          ['АДРЕС', '130.49.213.176', 'один адрес', true],
          ['АДРЕС', '10.8.0.0/24', 'подсеть', false]
        ]),
        grp('ВСЕГДА НАПРЯМУЮ', '#3FBF7F', [
          ['ПАКЕТ', 'ru.*', '14 приложений', true],
          ['ПАКЕТ', '*yandex*', '6 приложений · 1 исключение', true],
          ['САЙТ', '*.mos.ru', 'и поддомены', true]
        ])
      ]
    };
  }
}
</script>
</body>
</html>