strongswan-ext/src/frontends/android/docs/design/final-2026/AdvProfile.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: 1240px; 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="AdvHub.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 aria-label="Поделиться по QR" style="width: 44px; height: 44px; border: 0; 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: #6D4AFF">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="4" y="4" width="6" height="6" rx="1"/><rect x="14" y="4" width="6" height="6" rx="1"/><rect x="4" y="14" width="6" height="6" rx="1"/><path d="M14 14h2v2M20 14v6h-6"/></svg>
    </button>
  </div>
  <header style="padding: 44px 24px 18px; display: flex; align-items: flex-end; gap: 14px">
    <span style="width: 56px; height: 56px; border-radius: 18px; background: #6D4AFF; color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800">NL</span>
    <span style="display: flex; flex-direction: column; gap: 4px">
      <h1 style="margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -0.03em">Амстердам</h1>
      <span style="display: flex; align-items: center; gap: 6px; font-size: 14px; color: #0E6B35; font-weight: 700"><span style="width: 8px; height: 8px; border-radius: 4px; background: #148A45"></span>Подключён · 38 мс</span>
    </span>
  </header>

  <div style="padding: 0 16px; display: flex; flex-direction: column; gap: 22px">
    <sc-for list="{{groups}}" as="g" hint-placeholder-count="4">
      <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">{{g.title}}<sc-if value="{{g.isNew}}" hint-placeholder-val="{{ false }}"><span style="padding: 1px 7px; border-radius: 6px; background: #6D4AFF; color: #FFFFFF; font-size: 10px; font-weight: 800">НОВОЕ</span></sc-if></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: 10px; margin-left: 16px; padding-right: 14px; min-height: 56px; border-bottom: {{r.divider}}">
              <span style="flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 8px 0">
                <span style="font-size: 16px; font-weight: 600">{{r.title}}</span>
                <sc-if value="{{r.hasSub}}" hint-placeholder-val="{{ false }}"><span style="font-size: 12px; line-height: 1.35; color: #6E6A78">{{r.sub}}</span></sc-if>
              </span>
              <sc-if value="{{r.isToggle}}" hint-placeholder-val="{{ false }}">
                <button aria-pressed="{{r.on}}" aria-label="{{r.title}}" 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>
              </sc-if>
              <sc-if value="{{r.isValue}}" hint-placeholder-val="{{ true }}">
                <span style="font-size: 15px; color: #6E6A78; text-align: right; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">{{r.value}}</span>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#B3AFBC" stroke-width="2.4" stroke-linecap="round" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg>
              </sc-if>
            </div>
          </sc-for>
        </div>
      </section>
    </sc-for>

    <div style="border-radius: 24px; background: #FFFFFF; overflow: hidden">
      <button style="width: 100%; height: 56px; border: 0; border-bottom: 1px solid #EEEAF2; background: transparent; color: #6D4AFF; font: 700 16px 'Manrope', sans-serif">Экспорт .sswan</button>
      <button style="width: 100%; height: 56px; border: 0; background: transparent; color: #C62828; font: 700 16px 'Manrope', sans-serif">Удалить профиль</button>
    </div>
  </div>
</div>
</x-dc>
<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":390,"height":1240}}'>
class Component extends DCLogic {
  renderVals() {
    var v = function (title, value, sub) { return { title: title, value: value, sub: sub || '', hasSub: !!sub, isValue: true, isToggle: false }; };
    var t = function (title, on, sub) {
      return { title: title, sub: sub || '', hasSub: !!sub, isValue: false, isToggle: true,
        on: on ? 'true' : 'false', track: on ? '#6D4AFF' : '#D6D2DD', align: on ? 'flex-end' : 'flex-start' };
    };
    var grp = function (title, rows, isNew) {
      rows.forEach(function (r, i) { r.divider = i < rows.length - 1 ? '1px solid #EEEAF2' : '0'; });
      return { title: title, rows: rows, isNew: !!isNew };
    };
    return {
      groups: [
        grp('Сервер', [v('Адрес', 'nl1.[ваш-домен]'), v('Порт', '4500'), v('Вход', 'Сертификат')]),
        grp('Устойчивость', [
          v('Запасные порты', '443, 53', 'Пробуем по очереди, если основной не отвечает'),
          v('Резервный профиль', 'Хельсинки'),
          t('Мост при белых списках', true, 'Переключаться на сервер с российским IP')
        ], true),
        grp('Сеть', [v('DNS', 'Из профиля'), v('MTU', 'Авто · 1400'), t('Фрагментация IKE', true)]),
        grp('Маршруты профиля', [t('Использовать общие правила', true, 'Иначе — свои подсети для этого профиля')])
      ]
    };
  }
}
</script>
</body>
</html>