strongswan-ext/src/frontends/android/docs/design/final-2026/D_Diag.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: 1240px; 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_Home.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>
    <a href="D_Log.dc.html" style="flex: none; height: 40px; padding: 0 14px;  border-radius: 20px; background: #2B2930; color: #D0C2FF; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; text-decoration: none; box-sizing: border-box">Журнал</a>
  </header>

  <div style="padding: 4px 16px 0; display: flex; flex-direction: column; gap: 14px">
    <section style="padding: 16px; border-radius: 24px; background: #0F3D24; display: flex; gap: 12px; align-items: center">
      <span style="flex: none; width: 40px; height: 40px; border-radius: 20px; background: #148A45; color: #FFFFFF; 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.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12l5 5 9-10"/></svg>
      </span>
      <span style="display: flex; flex-direction: column; gap: 2px">
        <span style="font-size: 17px; font-weight: 800; color: #A8F0C8">VPN работает нормально</span>
        <span style="font-size: 13px; color: #7CE3B0">Проверено 10 с назад</span>
      </span>
    </section>

    <section style="border-radius: 24px; background: #1F1D24; border: 1px solid #2E2B35; padding: 4px 16px">
      <sc-for list="{{steps}}" as="s" hint-placeholder-count="5">
        <div style="display: flex; align-items: center; gap: 12px; height: 50px; border-bottom: {{s.divider}}">
          <span style="width: 22px; height: 22px; border-radius: 11px; background: {{s.bg}}; color: {{s.fg}}; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800">{{s.mark}}</span>
          <span style="flex: 1; font-size: 15px; font-weight: 600">{{s.title}}</span>
          <span style="font-size: 13px; color: #A9A3BF">{{s.value}}</span>
        </div>
      </sc-for>
    </section>

    <h2 style="margin: 6px 6px 0; font-size: 13px; font-weight: 800; color: #B69DFF; letter-spacing: 0.04em">ЧТО-ТО НЕ ОТКРЫВАЕТСЯ?</h2>
    <section style="border-radius: 24px; background: #1F1D24; border: 1px solid #2E2B35; padding: 14px; display: flex; flex-direction: column; gap: 14px">
      <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px">
        <sc-for list="{{apps}}" as="a" hint-placeholder-count="5">
          <button style="display: flex; flex-direction: column; align-items: center; gap: 5px; border: 0; background: transparent; padding: 0; font-family: 'Manrope', sans-serif; color: #E5E1E9">
            <span style="width: 48px; height: 48px; border-radius: 15px; background: {{a.c}}; color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 800; box-shadow: {{a.ring}}">{{a.l}}</span>
            <span style="font-size: 11px; font-weight: 600; max-width: 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">{{a.n}}</span>
          </button>
        </sc-for>
      </div>
      <div style="display: flex; gap: 8px">
        <label style="flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 12px; border-radius: 16px; background: #2B2930; color: #A9A3BF">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="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: 600 15px 'Manrope', sans-serif; color: #E5E1E9; outline: none">
        </label>
        <a href="D_Check.dc.html" style="flex: none; white-space: nowrap; height: 48px; padding: 0 16px;  border-radius: 16px; background: #6D4AFF; color: #FFFFFF; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; text-decoration: none; box-sizing: border-box">Проверить</a>
      </div>
      <div role="status" style="padding: 12px; border-radius: 18px; background: #2A2343; display: flex; align-items: center; gap: 10px">
        <span style="flex: 1; display: flex; flex-direction: column; gap: 2px">
          <span style="font-size: 14px; font-weight: 800">СберБанк пущен напрямую</span>
          <span style="font-size: 12px; color: #CAC4D0">Банк не пускал через VPN</span>
        </span>
        <button style="flex: none; height: 36px; padding: 0 12px; border: 0; border-radius: 12px; background: #1F1D24; color: #D0C2FF; font: 700 13px 'Manrope', sans-serif">Отменить</button>
      </div>
    </section>

    <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="padding: 1px 7px; border-radius: 6px; background: #4A3416; color: #FFD8A8; font-size: 11px; letter-spacing: 0">3</span></h2>
    <section style="border-radius: 24px; background: #1F1D24; border: 1px solid #2E2B35; overflow: hidden">
      <sc-for list="{{hosts}}" as="h" hint-placeholder-count="3">
        <div style="display: flex; align-items: center; gap: 10px; padding: 0 12px 0 16px; height: 60px; border-bottom: {{h.divider}}">
          <span style="flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0">
            <span style="font-size: 14px; font-weight: 700; font-family: ui-monospace, 'Cascadia Mono', Menlo, monospace">{{h.host}}</span>
            <span style="font-size: 12px; color: #A9A3BF">{{h.meta}}</span>
          </span>
          <button style="flex: none; height: 36px; padding: 0 12px; border: 0; border-radius: 12px; background: #4A3416; color: #FFD8A8; font: 700 13px 'Manrope', sans-serif">Через VPN</button>
        </div>
      </sc-for>
    </section>

    <a href="D_Log.dc.html" style="height: 52px; border-radius: 18px; border: 1px solid #48454E; background: transparent; color: #E5E1E9; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; text-decoration: none; box-sizing: border-box">Отправить отчёт</a>
  </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 ok = { bg: '#0F3D24', fg: '#7CE3B0', mark: '✓' };
    var steps = [['Интернет', 'Wi-Fi'], ['Российские сайты', '21 мс'], ['Зарубежные сайты', 'через VPN'], ['Сервер VPN', '38 мс · порт 4500'], ['DNS', 'туннель']];
    var a = function (n, l, c, sel) { return { n: n, l: l, c: c, ring: sel ? '0 0 0 2px #1F1D24, 0 0 0 4px #6D4AFF' : 'none' }; };
    var hs = [['95.163.•••.12:443', 'отказов 14 · пауза 4 мин'], ['178.248.•••.70:443', 'отказов 9 · пауза 2 мин'], ['212.193.•••.5:5222', 'отказов 6 · пауза 40 с']];
    return {
      steps: steps.map(function (s, i) { return { bg: ok.bg, fg: ok.fg, mark: ok.mark, title: s[0], value: s[1], divider: i < steps.length - 1 ? '1px solid #2B2930' : '0' }; }),
      apps: [a('СберБанк', 'С', '#21A038', true), a('Госуслуги', 'Г', '#1F5FBF'), a('YouTube', 'Y', '#C62828'), a('Telegram', 'T', '#1E88C8'), a('Ещё', '+', '#938F99')],
      hosts: hs.map(function (h, i) { return { host: h[0], meta: h[1], divider: i < hs.length - 1 ? '1px solid #2B2930' : '0' }; })
    };
  }
}
</script>
</body>
</html>