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

<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Приложения без VPN</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: 1200px; 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>
    <button style="flex: none; white-space: nowrap; height: 44px; padding: 0 16px; border: 0; border-radius: 22px; background: rgba(255,255,255,0.8); box-shadow: 0 1px 2px rgba(28,27,32,0.08); color: #6D4AFF; font: 700 14px 'Manrope', sans-serif">Системные</button>
  </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; color: #6E6A78">24 из 111 работают без VPN</p>
  </header>

  <div style="padding: 0 16px; display: flex; flex-direction: column; gap: 18px">
    <label style="display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 14px; background: #E8E4EE; color: #6E6A78">
      <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 16px 'Manrope', sans-serif; color: #1C1B20; outline: none">
    </label>

    <div role="tablist" aria-label="Фильтр" style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 3px; border-radius: 14px; background: #E8E4EE">
      <button role="tab" aria-selected="true" 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">Через VPN</button>
      <button role="tab" style="height: 36px; border: 0; border-radius: 11px; background: transparent; color: #49454F; font: 600 13px 'Manrope', sans-serif">Все</button>
    </div>

    <section style="display: flex; flex-direction: column; gap: 8px">
      <h2 style="margin: 0 12px; font-size: 13px; font-weight: 700; color: #6E6A78">Наборы</h2>
      <div style="display: flex; gap: 8px; overflow: hidden">
        <sc-for list="{{sets}}" as="s" hint-placeholder-count="4">
          <button style="flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 104px; padding: 12px; border-radius: 20px; border: 0; background: {{s.bg}}; color: {{s.fg}}; font-family: 'Manrope', sans-serif; text-align: left">
            <span style="font-size: 13px; font-weight: 800">{{s.name}}</span>
            <span style="font-size: 12px; font-weight: 600; opacity: 0.85">{{s.state}}</span>
          </button>
        </sc-for>
      </div>
    </section>

    <sc-for list="{{groups}}" as="g" hint-placeholder-count="3">
      <section style="display: flex; flex-direction: column; gap: 8px">
        <h2 style="margin: 0 12px; font-size: 13px; font-weight: 700; color: #6E6A78">{{g.title}}</h2>
        <div style="border-radius: 24px; background: #FFFFFF; overflow: hidden">
          <sc-for list="{{g.apps}}" as="a" hint-placeholder-count="3">
            <div style="display: flex; align-items: center; gap: 14px; padding-left: 16px; height: 64px">
              <span style="flex: none; width: 36px; height: 36px; border-radius: 10px; background: {{a.color}}; color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800">{{a.letter}}</span>
              <span style="flex: 1; height: 64px; display: flex; align-items: center; gap: 10px; padding-right: 14px; border-bottom: {{a.divider}}; min-width: 0">
                <span style="flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0">
                  <span style="font-size: 16px; font-weight: 600">{{a.name}}</span>
                  <span style="font-size: 12px; color: {{a.reasonColor}}; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">{{a.reason}}</span>
                </span>
                <button aria-pressed="{{a.on}}" aria-label="{{a.name}}: напрямую" style="flex: none; width: 50px; height: 30px; border: 0; border-radius: 15px; background: {{a.track}}; padding: 3px; display: flex; justify-content: {{a.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>
</x-dc>
<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":390,"height":1200}}'>
class Component extends DCLogic {
  renderVals() {
    var set = function (name, state, done) {
      return { name: name, state: state, bg: done ? '#6D4AFF' : '#FFFFFF', fg: done ? '#FFFFFF' : '#1C1B20' };
    };
    var reasons = { me: ['добавлено вами', '#6E6A78'], tpl: ['по правилу ', '#6E6A78'], over: ['исключение из ', '#B45309'] };
    var grp = function (title, apps) {
      return { title: title, apps: apps.map(function (a, i) {
        var on = a[3] !== 'over';
        return { name: a[0], letter: a[1], color: a[2],
          reason: reasons[a[3]][0] + (a[4] ? '«' + a[4] + '»' : ''), reasonColor: reasons[a[3]][1],
          on: on ? 'true' : 'false', track: on ? '#6D4AFF' : '#D6D2DD', align: on ? 'flex-end' : 'flex-start',
          divider: i < apps.length - 1 ? '1px solid #EEEAF2' : '0' };
      }) };
    };
    return {
      sets: [set('Банки', '8 из 8', true), set('Госуслуги', '3 из 3', true), set('Магазины', '2 из 5', false), set('Связь', '0 из 4', false)],
      groups: [
        grp('Банки', [
          ['СберБанк Онлайн', 'С', '#21A038', 'tpl', 'ru.*'],
          ['Т-Банк', 'Т', '#3A3A3A', 'me'],
          ['Альфа-Банк', 'А', '#C62828', 'tpl', 'ru.*']
        ]),
        grp('Госуслуги и сервисы', [
          ['Госуслуги', 'Г', '#1F5FBF', 'tpl', 'ru.*'],
          ['Яндекс Карты', 'Я', '#D84315', 'tpl', '*yandex*'],
          ['Яндекс Браузер', 'Я', '#5E35B1', 'over', '*yandex*']
        ]),
        grp('Магазины', [
          ['Wildberries', 'W', '#7B2CBF', 'me'],
          ['Ozon', 'O', '#1565C0', 'me']
        ])
      ]
    };
  }
}
</script>
</body>
</html>