strongswan-ext/src/frontends/android/docs/design/final-2026/D_Widgets.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: 1000px; box-sizing: border-box; background: #141318; font-family: 'Manrope', system-ui, sans-serif; color: #E5E1E9; overflow: hidden; font-variant-numeric: tabular-nums">
  <div style="position: absolute; inset: 0; background: linear-gradient(160deg, #B9A6F2 0%, #D9C9F5 45%, #F4D9C4 100%)"></div>
  <div style="position: relative; padding: 48px 16px 0; display: flex; flex-direction: column; gap: 22px">
    <div style="display: flex; flex-direction: column; gap: 8px"><span style="font-size: 12px; font-weight: 700; color: #FFFFFF; text-shadow: 0 1px 2px rgba(0,0,0,.35)">4×2 · подробный</span><div style="width: 358px; height: 176px; border-radius: 28px; background: #141318; box-sizing: border-box; padding: 14px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 2px 8px rgba(40,20,90,.12)"><span style="display: flex; align-items: center; gap: 10px"><span style="width: 32px; height: 32px; border-radius: 10px; background: #6D4AFF; display: flex; align-items: center; justify-content: center"><svg width="22" height="22" 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="flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px"><span style="font-size: 15px; font-weight: 800; color: #E5E1E9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">Защищено · 01:24</span><span style="font-size: 12px; font-weight: 600; color: #A9A3BF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">Амстердам · 1,24 ГБ сегодня</span></span><span style="flex: none; width: 44px; height: 44px; border-radius: 22px; background: #6D4AFF; 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.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v9M6.3 6.3a8 8 0 1 0 11.4 0"/></svg></span></span><span style="display: flex; height: 6px; border-radius: 3px; overflow: hidden; gap: 2px"><span style="width: 72%; background: #6D4AFF; border-radius: 3px"></span><span style="flex: 1; background: #3FBF7F; border-radius: 3px"></span></span><span style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px"><span style="height: 44px; border-radius: 14px; background: #2B2930; color: #E0DAF5; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 700"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 5v14M15 5v14"/></svg>Пауза</span><span style="height: 44px; border-radius: 14px; background: #2B2930; color: #E0DAF5; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 700"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13 2L4 14h7l-1 8 9-12h-7z"/></svg>Быстрейший</span><span style="height: 44px; border-radius: 14px; background: #2B2930; color: #E0DAF5; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 700"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 7h13l-3-3M17 17H4l3 3"/></svg>Сменить</span></span></div></div>
    <div style="display: flex; flex-direction: column; gap: 8px"><span style="font-size: 12px; font-weight: 700; color: #FFFFFF; text-shadow: 0 1px 2px rgba(0,0,0,.35)">2×1 · защищено и выключен</span><div style="display: flex; gap: 16px"><div style="width: 171px; height: 80px; border-radius: 28px; background: #141318; box-sizing: border-box; padding: 14px; display: flex; align-items: center; gap: 8px; box-shadow: 0 2px 8px rgba(40,20,90,.12)"><span style="flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px"><span style="font-size: 15px; font-weight: 800; color: #E5E1E9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">Защищено</span><span style="font-size: 12px; font-weight: 600; color: #A9A3BF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">NL · 01:24</span></span><span style="flex: none; width: 44px; height: 44px; border-radius: 22px; background: #6D4AFF; 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.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v9M6.3 6.3a8 8 0 1 0 11.4 0"/></svg></span></div><div style="width: 171px; height: 80px; border-radius: 28px; background: #141318; box-sizing: border-box; padding: 14px; display: flex; align-items: center; gap: 8px; box-shadow: 0 2px 8px rgba(40,20,90,.12)"><span style="flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px"><span style="font-size: 15px; font-weight: 800; color: #E5E1E9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">Выключен</span><span style="font-size: 12px; font-weight: 600; color: #A9A3BF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">тап — Амстердам</span></span><span style="flex: none; width: 44px; height: 44px; border-radius: 22px; background: #2B2930; color: #CAC4D0; 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.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v9M6.3 6.3a8 8 0 1 0 11.4 0"/></svg></span></div></div></div>
    <div style="display: flex; flex-direction: column; gap: 8px"><span style="font-size: 12px; font-weight: 700; color: #FFFFFF; text-shadow: 0 1px 2px rgba(0,0,0,.35)">2×1 · подключаемся и проблема</span><div style="display: flex; gap: 16px"><div style="width: 171px; height: 80px; border-radius: 28px; background: #141318; box-sizing: border-box; padding: 14px; display: flex; align-items: center; gap: 8px; box-shadow: 0 2px 8px rgba(40,20,90,.12)"><span style="flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px"><span style="font-size: 15px; font-weight: 800; color: #E5E1E9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">Подключаемся</span><span style="font-size: 12px; font-weight: 600; color: #A9A3BF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">Амстердам</span></span><span style="flex: none; width: 44px; height: 44px; border-radius: 22px; background: #3B2C88; color: #B69DFF; 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.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v9M6.3 6.3a8 8 0 1 0 11.4 0"/></svg></span></div><div style="width: 171px; height: 80px; border-radius: 28px; background: #3A2A12; box-sizing: border-box; padding: 14px; display: flex; align-items: center; gap: 8px; box-shadow: 0 2px 8px rgba(40,20,90,.12)"><span style="flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px"><span style="font-size: 15px; font-weight: 800; color: #F5C892; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">Нет ответа</span><span style="font-size: 12px; font-weight: 600; color: #FFD8A8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">Амстердам</span></span><span style="flex: none; width: 44px; height: 44px; border-radius: 16px; background: #4A3416; color: #FFD8A8; 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.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 8v5M12 16.5v.5M10.3 3.9L2.4 18a2 2 0 0 0 1.7 3h15.8a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"/></svg></span></div></div></div>
    <div style="display: flex; flex-direction: column; gap: 8px"><span style="font-size: 12px; font-weight: 700; color: #FFFFFF; text-shadow: 0 1px 2px rgba(0,0,0,.35)">1×1 · значок со статусом</span><div style="display: flex; gap: 24px"><div style="position: relative; width: 64px; height: 64px; border-radius: 32px; background: #6D4AFF; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(40,20,90,.12)"><svg width="34" height="34" 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 style="position: absolute; right: 2px; bottom: 2px; width: 16px; height: 16px; border-radius: 8px; background: #148A45; border: 3px solid #141318"></span></div><div style="position: relative; width: 64px; height: 64px; border-radius: 32px; background: #79767F; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(40,20,90,.12)"><svg width="34" height="34" 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="#938F99" stroke-width="2.4" stroke-linecap="round"/></svg><span style="position: absolute; right: 2px; bottom: 2px; width: 16px; height: 16px; border-radius: 8px; background: #5A5663; border: 3px solid #141318"></span></div><div style="position: relative; width: 64px; height: 64px; border-radius: 32px; background: #B45309; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(40,20,90,.12)"><svg width="34" height="34" 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="#FFB869" stroke-width="2.4" stroke-linecap="round"/></svg><span style="position: absolute; right: 2px; bottom: 2px; width: 16px; height: 16px; border-radius: 8px; background: #B45309; border: 3px solid #141318"></span></div></div></div>
    <section style="padding: 16px 16px 10px; border-radius: 24px; background: #141318; box-shadow: 0 2px 8px rgba(40,20,90,.12)"><span style="font-size: 15px; font-weight: 800">Как работает</span><ul style="margin: 10px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.45; color: #A9A3BF"><li style="margin: 0 0 6px">Тап по кнопке — вкл/выкл, по тексту — открыть приложение.</li><li style="margin: 0 0 6px">Цвета берутся из Material You, как у приложения; в тёмной теме — тёмный фон.</li><li style="margin: 0 0 6px">Состояния те же, что на главной: защищено, выключен, подключаемся, проблема.</li><li style="margin: 0 0 6px">Размеры 1×1, 2×1 и 4×2; растягиваются по сетке лаунчера.</li></ul></section>
  </div>
</div>
</x-dc>
<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":390,"height":1000}}'>
class Component extends DCLogic {
  renderVals() {
    var tabs = [
      ['Главная', 'D_Home.dc.html', 'M12 3v9M6.3 6.3a8 8 0 1 0 11.4 0'],
      ['Серверы', 'D_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'],
      ['Маршруты', 'D_Routing.dc.html', 'M4 12h6l4-6h6M10 12l4 6h6'],
      ['Настройки', 'D_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 ? '#E5E1E9' : '#CAC4D0', weight: on ? '800' : '600', pill: on ? '#3B2C88' : 'transparent' };
      })
    };
  }
}
</script>
</body>
</html>