strongswan-ext/src/frontends/android/docs/design/final-2026/F_HomeAlert.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: 844px; box-sizing: border-box; background: #FCF8FF; font-family: 'Manrope', system-ui, sans-serif; color: #1C1B20; overflow: hidden; font-variant-numeric: tabular-nums">
  <header style="display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 4px">
    <span style="display: flex; align-items: center; gap: 10px"><span style="width: 34px; height: 34px; border-radius: 10px; background: #6D4AFF; display: flex; align-items: center; justify-content: center"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 2.6l7.6 2.8v6c0 5-3.3 8.4-7.6 10-4.3-1.6-7.6-5-7.6-10v-6z" fill="#FFFFFF"/><path d="M14.6 8.8c-.6-.95-1.6-1.45-2.7-1.45-1.5 0-2.6.85-2.6 2.05 0 2.8 5.5 1.6 5.5 4.5 0 1.3-1.2 2.25-2.8 2.25-1.2 0-2.2-.55-2.8-1.5" stroke="#6D4AFF" stroke-width="2.4" stroke-linecap="round"/></svg></span><span style="font-size: 22px; font-weight: 800; letter-spacing: -0.04em">shx<span style="font-weight: 500; color: #6D4AFF">vpn</span></span></span>
    <a href="F_Diag.dc.html" aria-label="Диагностика: есть проблема" style="position: relative; width: 44px; height: 44px; border-radius: 22px; background: #F0ECF4; display: flex; align-items: center; justify-content: center; color: #1C1B20">
      <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="M3 12h4l3-8 4 16 3-8h4"/></svg>
      <span style="position: absolute; top: 8px; right: 8px; width: 10px; height: 10px; border-radius: 5px; background: #B45309; border: 2px solid #F0ECF4"></span>
    </a>
  </header>

  <section style="display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 8px">
    <button aria-label="Подключить сейчас" style="width: 188px; height: 188px; border: 0; border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%; background: #FFE2B8; color: #B45309; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 14px #FFEFD6, 0 0 0 28px #FFF7EC; margin: 28px 0 22px; cursor: pointer">
      <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>
    </button>
    <span style="font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: #5C2A04">Оператор включил белые списки</span>
    <span style="max-width: 320px; text-align: center; font-size: 14px; line-height: 1.45; color: #6B3A10">Работают только российские сайты — банки и Госуслуги открываются. VPN подключится сам.</span>
  </section>

  <div style="padding: 20px 16px 0; display: flex; flex-direction: column; gap: 10px">
    <div role="status" style="display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 24px; background: #FFFFFF; border: 1px solid #F3D3A6">
      <span style="width: 10px; height: 10px; border-radius: 5px; background: #B45309"></span>
      <span style="flex: 1; display: flex; flex-direction: column; gap: 2px">
        <span style="font-size: 15px; font-weight: 700; color: #5C2A04">Пробуем резервный сервер</span>
        <span style="font-size: 12px; color: #6B3A10">Хельсинки · попытка 2 из 3</span>
      </span>
      <button style="flex: none; height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid #C7A27A; background: transparent; color: #5C2A04; font: 700 13px 'Manrope', sans-serif">Стоп</button>
    </div>
    <div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px">
      <a href="F_Diag.dc.html" style="height: 52px; border-radius: 18px; background: #B45309; color: #FFFFFF; text-decoration: none; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800">Что делать</a>
      <button style="height: 52px; border: 0; border-radius: 18px; background: #F0ECF4; color: #2A2640; font: 700 14px 'Manrope', sans-serif">Через Wi-Fi</button>
    </div>
    <div role="status" style="display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 14px; border-radius: 18px; background: #F6F2FA">
      <span style="flex: 1; font-size: 13px; font-weight: 600; color: #2A2640">Постоянный VPN выключен</span>
      <a href="F_KillSwitch.dc.html" style="flex: none; height: 36px; padding: 0 12px;  border-radius: 12px; background: #E7DFFF; color: #3B2C88; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; text-decoration: none; box-sizing: border-box">Включить</a>
    </div>
  </div>

  <nav aria-label="Основная навигация" style="position: absolute; left: 0; right: 0; bottom: 0; height: 80px; background: #F0ECF4; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center">
    <sc-for list="{{tabs}}" as="t" hint-placeholder-count="4">
      <a href="{{t.href}}" style="display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; color: {{t.fg}}; font-size: 12px; font-weight: {{t.weight}}">
        <span style="width: 60px; height: 32px; border-radius: 16px; background: {{t.pill}}; display: flex; align-items: center; justify-content: center"><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="{{t.icon}}"/></svg></span>{{t.label}}
      </a>
    </sc-for>
  </nav>
</div>
</x-dc>
<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":390,"height":844}}'>
class Component extends DCLogic {
  renderVals() {
    var tabs = [
      ['Главная', 'F_HomeAlert.dc.html', 'M12 3v9M6.3 6.3a8 8 0 1 0 11.4 0'],
      ['Серверы', 'F_Servers.dc.html', 'M12 3a9 9 0 1 0 0 18a9 9 0 1 0 0-18M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18'],
      ['Маршруты', 'F_Routing.dc.html', 'M4 12h6l4-6h6M10 12l4 6h6'],
      ['Настройки', 'F_Settings.dc.html', 'M4 7h10M18 7h2M4 17h4M12 17h8M14 5v4M8 15v4']
    ];
    return {
      tabs: tabs.map(function (t, i) {
        var on = i === 0;
        return { label: t[0], href: t[1], icon: t[2], fg: on ? '#1C1B20' : '#49454F', weight: on ? '800' : '600', pill: on ? '#FFE2B8' : 'transparent' };
      })
    };
  }
}
</script>
</body>
</html>