141 lines
12 KiB
HTML
141 lines
12 KiB
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&display=swap">
|
||
<style>
|
||
body{margin:0}
|
||
a{color:#6D4AFF}a:hover{color:#4B2FD1}
|
||
</style>
|
||
</helmet>
|
||
<div style="position: relative; width: 390px; height: 1340px; box-sizing: border-box; background: #FCF8FF; font-family: 'Manrope', system-ui, sans-serif; color: #1C1B20; overflow: hidden; font-variant-numeric: tabular-nums">
|
||
<header style="padding: 18px 20px 8px">
|
||
<h1 style="margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.02em">Маршруты</h1>
|
||
</header>
|
||
|
||
<div style="padding: 4px 16px 0; display: flex; flex-direction: column; gap: 12px">
|
||
<section style="border-radius: 26px; background: #E7DFFF; color: #21005D; padding: 16px; display: flex; flex-direction: column; gap: 12px">
|
||
<div style="display: flex; align-items: center; gap: 14px">
|
||
<span style="flex: 1; display: flex; flex-direction: column; gap: 2px">
|
||
<span style="font-size: 17px; font-weight: 800">Раздельный туннель</span>
|
||
<span style="font-size: 13px; color: #3B2C88">Мимо VPN: сайты РФ · 24 приложения · 2 правила</span>
|
||
</span>
|
||
<button aria-pressed="true" aria-label="Раздельный туннель" style="flex: none; width: 52px; height: 32px; border: 0; border-radius: 16px; background: #6D4AFF; padding: 4px; display: flex; justify-content: flex-end"><span style="width: 24px; height: 24px; border-radius: 12px; background: #FFFFFF"></span></button>
|
||
</div>
|
||
<div style="display: flex; height: 8px; border-radius: 4px; overflow: hidden; gap: 2px"><span style="width: 72%; background: #6D4AFF; border-radius: 4px"></span><span style="flex: 1; background: #3FBF7F; border-radius: 4px"></span></div>
|
||
<div style="display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; color: #3B2C88"><span>Через VPN 72%</span><span>Напрямую 28%</span></div>
|
||
</section>
|
||
|
||
<h2 style="margin: 6px 6px 0; font-size: 13px; font-weight: 800; color: #6D4AFF; letter-spacing: 0.04em">САЙТЫ И СЕРВИСЫ РФ</h2>
|
||
<section style="padding: 16px; border-radius: 24px; background: #FFFFFF; border: 1px solid #EDE8F2; display: flex; flex-direction: column; gap: 12px">
|
||
<div style="display: flex; align-items: center; gap: 12px">
|
||
<span style="flex: 1; display: flex; flex-direction: column; gap: 2px">
|
||
<span style="font-size: 16px; font-weight: 700">Сайты РФ напрямую</span>
|
||
<span style="font-size: 12px; color: #5E5A7D">База: 12 480 сетей · сегодня</span>
|
||
</span>
|
||
<button aria-label="Обновить базу адресов" style="flex: none; width: 40px; height: 40px; border: 0; border-radius: 20px; background: #F0ECF4; color: #3B2C88; display: flex; align-items: center; justify-content: center">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 12a8 8 0 1 1-2.3-5.7"/><path d="M20 4v5h-5"/></svg>
|
||
</button>
|
||
<button aria-pressed="true" aria-label="Сайты РФ напрямую" style="flex: none; width: 52px; height: 32px; border: 0; border-radius: 16px; background: #6D4AFF; padding: 4px; display: flex; justify-content: flex-end"><span style="width: 24px; height: 24px; border-radius: 12px; background: #FFFFFF"></span></button>
|
||
</div>
|
||
<div role="radiogroup" aria-label="Способ" style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px">
|
||
<button aria-pressed="true" style="padding: 12px; border-radius: 18px; border: 2px solid #6D4AFF; background: #F3EEFF; text-align: left; font-family: 'Manrope', sans-serif; color: #1C1B20; display: flex; flex-direction: column; gap: 4px">
|
||
<span style="font-size: 14px; font-weight: 800">Стабильный</span>
|
||
<span style="font-size: 12px; line-height: 1.35; color: #49454F">Новые адреса — после переподключения</span>
|
||
</button>
|
||
<button style="padding: 12px; border-radius: 18px; border: 1px solid #C9C5D0; background: #FFFFFF; text-align: left; font-family: 'Manrope', sans-serif; color: #1C1B20; display: flex; flex-direction: column; gap: 4px">
|
||
<span style="display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 800; white-space: nowrap">Гибкий<span style="padding: 1px 6px; border-radius: 6px; background: #FFE2B8; color: #7A3A06; font-size: 10px; font-weight: 800">БЕТА</span></span>
|
||
<span style="font-size: 12px; line-height: 1.35; color: #49454F">На лету, без переподключения</span>
|
||
</button>
|
||
</div>
|
||
</section>
|
||
|
||
<h2 style="margin: 6px 6px 0; font-size: 13px; font-weight: 800; color: #6D4AFF; letter-spacing: 0.04em">ИСКЛЮЧЕНИЯ</h2>
|
||
<section style="border-radius: 24px; background: #FFFFFF; border: 1px solid #EDE8F2; overflow: hidden">
|
||
<a href="F_Apps.dc.html" style="display: flex; align-items: center; gap: 14px; padding: 0 14px 0 16px; height: 76px; border-bottom: 1px solid #F0ECF4; text-decoration: none; color: #1C1B20">
|
||
<span style="width: 40px; height: 40px; border-radius: 14px; background: #E7DFFF; color: #3B2C88; display: flex; align-items: center; justify-content: center">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="4" y="4" width="6" height="6" rx="2"/><rect x="14" y="4" width="6" height="6" rx="2"/><rect x="4" y="14" width="6" height="6" rx="2"/><rect x="14" y="14" width="6" height="6" rx="2"/></svg>
|
||
</span>
|
||
<span style="flex: 1; display: flex; flex-direction: column; gap: 2px">
|
||
<span style="font-size: 16px; font-weight: 700">Приложения напрямую</span>
|
||
<span style="font-size: 13px; color: #5E5A7D">24 работают без VPN</span>
|
||
</span>
|
||
<span style="display: flex; align-items: center">
|
||
<span style="width: 26px; height: 26px; border-radius: 13px; border: 2px solid #FFFFFF; background: #21A038; box-sizing: border-box"></span>
|
||
<span style="margin-left: -8px; width: 26px; height: 26px; border-radius: 13px; border: 2px solid #FFFFFF; background: #1F5FBF; box-sizing: border-box"></span>
|
||
<span style="margin-left: -8px; height: 26px; padding: 0 6px; border-radius: 13px; border: 2px solid #FFFFFF; background: #E5E1E9; color: #49454F; font-size: 11px; font-weight: 800; display: flex; align-items: center; box-sizing: border-box">+22</span>
|
||
</span>
|
||
</a>
|
||
<a href="F_Rules.dc.html" style="display: flex; align-items: center; gap: 14px; padding: 0 14px 0 16px; height: 76px; text-decoration: none; color: #1C1B20">
|
||
<span style="width: 40px; height: 40px; border-radius: 14px; background: #F0ECF4; color: #3B2C88; display: flex; align-items: center; justify-content: center">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true"><path d="M5 7h14M5 12h14M5 17h9"/></svg>
|
||
</span>
|
||
<span style="flex: 1; display: flex; flex-direction: column; gap: 2px">
|
||
<span style="font-size: 16px; font-weight: 700">Правила</span>
|
||
<span style="font-size: 13px; color: #5E5A7D">2 через VPN · 3 напрямую · 1 выключено</span>
|
||
</span>
|
||
<span style="font-size: 14px; font-weight: 700; color: #5E5A7D">6</span>
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#5E5A7D" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg>
|
||
</a>
|
||
</section>
|
||
|
||
<h2 style="margin: 6px 6px 0; font-size: 13px; font-weight: 800; color: #6D4AFF; letter-spacing: 0.04em">ПРОВЕРКА</h2>
|
||
<a href="F_Check.dc.html" style="display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; border-radius: 18px; background: #F0ECF4; color: #5E5A7D; text-decoration: none">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/></svg>
|
||
<span style="flex: 1; font-size: 15px; font-weight: 600">Как ходит сайт, IP или приложение</span>
|
||
</a>
|
||
<a href="F_Recent.dc.html" style="display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border-radius: 24px; background: #FFFFFF; border: 1px solid #EDE8F2; text-decoration: none; color: #1C1B20">
|
||
<span style="display: flex; align-items: center; gap: 8px">
|
||
<span style="flex: 1; font-size: 16px; font-weight: 700">Недавние приложения</span>
|
||
<span style="padding: 2px 8px; border-radius: 999px; background: #FFE2B8; color: #7A3A06; font-size: 11px; font-weight: 800">2 с ошибками</span>
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#5E5A7D" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg>
|
||
</span>
|
||
<span style="display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px">
|
||
<sc-for list="{{recent}}" as="r" hint-placeholder-count="4">
|
||
<span style="display: flex; flex-direction: column; align-items: center; gap: 5px">
|
||
<span style="position: relative; width: 44px; height: 44px; border-radius: 14px; background: {{r.c}}; color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800">{{r.l}}<span style="position: absolute; right: -3px; bottom: -3px; width: 14px; height: 14px; border-radius: 7px; border: 2px solid #FFFFFF; background: {{r.dot}}"></span></span>
|
||
<span style="font-size: 11px; font-weight: 600; color: #49454F; max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">{{r.n}}</span>
|
||
</span>
|
||
</sc-for>
|
||
</span>
|
||
</a>
|
||
</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":1340}}'>
|
||
class Component extends DCLogic {
|
||
renderVals() {
|
||
var tabs = [
|
||
['Главная', 'F_Home.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']
|
||
];
|
||
var r = function (n, l, c, dot) { return { n: n, l: l, c: c, dot: dot }; };
|
||
return {
|
||
recent: [r('YouTube', 'Y', '#C62828', '#6D4AFF'), r('Госуслуги', 'Г', '#1F5FBF', '#B45309'), r('СберБанк', 'С', '#21A038', '#3FBF7F'), r('ВкусВилл', 'В', '#2E7D32', '#6D4AFF')],
|
||
tabs: tabs.map(function (t, i) {
|
||
var on = i === 2;
|
||
return { label: t[0], href: t[1], icon: t[2], fg: on ? '#1C1B20' : '#49454F', weight: on ? '800' : '600', pill: on ? '#E7DFFF' : 'transparent' };
|
||
})
|
||
};
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|