strongswan-ext/src/frontends/android/docs/design/final-2026/D_Recent.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: 1160px; 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>
    <span style="flex: 1; display: flex; flex-direction: column">
      <h1 style="margin: 0; font-size: 22px; font-weight: 800">Недавние приложения</h1>
      <span style="display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #A9A3BF"><span style="width: 7px; height: 7px; border-radius: 4px; background: #148A45"></span>за последний час · обновляется вживую</span>
    </span>
  </header>

  <div style="padding: 4px 16px 0; display: flex; flex-direction: column; gap: 12px">
    <div style="display: flex; gap: 8px; flex-wrap: wrap">
      <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">Все · 9</button>
      <button style="height: 36px; padding: 0 12px; border-radius: 12px; border: 1px solid #48454E; background: transparent; color: #E5E1E9; font: 600 13px 'Manrope', sans-serif">Через VPN</button>
      <button style="height: 36px; padding: 0 12px; border-radius: 12px; border: 1px solid #48454E; background: transparent; color: #E5E1E9; font: 600 13px 'Manrope', sans-serif">Напрямую</button>
      <button style="height: 36px; padding: 0 12px; border-radius: 12px; border: 0; background: #4A3416; color: #FFD8A8; font: 700 13px 'Manrope', sans-serif">С ошибками · 2</button>
    </div>

    <section role="status" style="padding: 14px; border-radius: 24px; background: #3A2A12; border: 1px solid #5A4220; display: flex; flex-direction: column; gap: 10px">
      <div style="display: flex; align-items: center; gap: 12px">
        <span style="flex: none; width: 40px; height: 40px; border-radius: 12px; background: #1F5FBF; color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800">Г</span>
        <span style="flex: 1; display: flex; flex-direction: column; gap: 2px">
          <span style="font-size: 15px; font-weight: 800; color: #FFD8A8">Госуслуги не открываются</span>
          <span style="font-size: 12px; line-height: 1.35; color: #F5C892">7 неудачных соединений через VPN за 5 мин. Скорее всего, сервис не пускает зарубежные адреса.</span>
        </span>
      </div>
      <div style="display: flex; gap: 8px">
        <button style="flex: 1; height: 42px; border: 0; border-radius: 12px; background: #B45309; color: #FFFFFF; font: 800 13px 'Manrope', sans-serif">Пустить напрямую</button>
        <a href="D_Check.dc.html" style="flex: none; height: 42px; padding: 0 14px; border-radius: 12px; border: 1px solid #7A5A30; color: #FFD8A8; text-decoration: none; display: flex; align-items: center; font-size: 13px; font-weight: 700">Подробнее</a>
      </div>
    </section>

    <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; 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.apps}}" as="a" hint-placeholder-count="4">
            <div style="display: flex; align-items: center; gap: 12px; padding: 0 14px; height: 70px; border-bottom: {{a.divider}}">
              <span style="flex: none; width: 40px; height: 40px; border-radius: 12px; background: {{a.color}}; color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800">{{a.letter}}</span>
              <span style="flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0">
                <span style="display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700">{{a.name}}<sc-if value="{{a.isNew}}" hint-placeholder-val="{{ false }}"><span style="padding: 1px 6px; border-radius: 6px; background: #6D4AFF; color: #FFFFFF; font-size: 10px; font-weight: 800">НОВОЕ</span></sc-if></span>
                <span style="display: flex; align-items: center; gap: 6px; font-size: 12px; color: #A9A3BF"><span style="padding: 1px 7px; border-radius: 999px; background: {{a.routeBg}}; color: {{a.routeFg}}; font-weight: 800">{{a.route}}</span>{{a.meta}}</span>
              </span>
              <button aria-pressed="{{a.on}}" aria-label="{{a.name}}: напрямую" style="flex: none; width: 52px; height: 32px; border: 0; border-radius: 16px; background: {{a.track}}; padding: 4px; display: flex; justify-content: {{a.align}}"><span style="width: 24px; height: 24px; border-radius: 12px; background: #1F1D24"></span></button>
            </div>
          </sc-for>
        </div>
      </section>
    </sc-for>

    <p style="margin: 0 6px; font-size: 12px; line-height: 1.45; color: #A9A3BF">Переключатель — «напрямую, без VPN». Трафик приложений считается по системной статистике: нужен доступ «Статистика использования».</p>
  </div>
</div>
</x-dc>
<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":390,"height":1160}}'>
class Component extends DCLogic {
  renderVals() {
    var a = function (name, letter, color, direct, meta, isNew) {
      return { name: name, letter: letter, color: color, meta: meta, isNew: !!isNew,
        route: direct ? 'напрямую' : 'VPN', routeBg: direct ? '#12321F' : '#3B2C88', routeFg: direct ? '#7CE3B0' : '#D0C2FF',
        on: direct ? 'true' : 'false', track: direct ? '#6D4AFF' : '#48454E', align: direct ? 'flex-end' : 'flex-start' };
    };
    var grp = function (title, apps) {
      apps.forEach(function (x, i) { x.divider = i < apps.length - 1 ? '1px solid #2B2930' : '0'; });
      return { title: title, apps: apps };
    };
    return {
      groups: [
        grp('СЕЙЧАС АКТИВНЫ', [
          a('YouTube', 'Y', '#C62828', false, '312 МБ · сейчас'),
          a('Telegram', 'T', '#1E88C8', false, '18 МБ · сейчас'),
          a('СберБанк', 'С', '#21A038', true, '2 МБ · 1 мин назад')
        ]),
        grp('НЕДАВНО', [
          a('ВкусВилл', 'В', '#2E7D32', false, '4 МБ · 12 мин · установлено сегодня', true),
          a('Wildberries', 'W', '#7B2CBF', true, '36 МБ · 20 мин'),
          a('Chrome', 'C', '#2E7D32', false, '88 МБ · 34 мин'),
          a('Яндекс Карты', 'Я', '#D84315', true, '9 МБ · 51 мин')
        ])
      ]
    };
  }
}
</script>
</body>
</html>