98 lines
7.4 KiB
HTML
98 lines
7.4 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: 900px; 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; gap: 8px; padding: 16px 12px 8px">
|
|
<a href="F_Routing.dc.html" aria-label="Назад" style="width: 44px; height: 44px; border-radius: 22px; 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="M15 6l-6 6 6 6"/></svg>
|
|
</a>
|
|
<h1 style="margin: 0; flex: 1; font-size: 22px; font-weight: 800">Правила</h1>
|
|
</header>
|
|
|
|
<div style="padding: 0 16px; display: flex; flex-direction: column; gap: 12px">
|
|
<p style="margin: 0 4px; font-size: 14px; line-height: 1.45; color: #49454F">Куда идут сайты, адреса и приложения. Правило важнее базы РФ. Нажмите на правило, чтобы изменить его.</p>
|
|
|
|
<div style="display: flex; gap: 8px">
|
|
<button aria-pressed="true" style="height: 36px; padding: 0 14px; border-radius: 12px; border: 0; background: #3B2C88; color: #FFFFFF; font: 700 13px 'Manrope', sans-serif">Все · 5</button>
|
|
<button style="height: 36px; padding: 0 14px; border-radius: 12px; border: 1px solid #C9C5D0; background: transparent; color: #1C1B20; font: 600 13px 'Manrope', sans-serif">Сайты · 1</button>
|
|
<button style="height: 36px; padding: 0 14px; border-radius: 12px; border: 1px solid #C9C5D0; background: transparent; color: #1C1B20; font: 600 13px 'Manrope', sans-serif">Адреса · 2</button>
|
|
<button style="height: 36px; padding: 0 14px; border-radius: 12px; border: 1px solid #C9C5D0; background: transparent; color: #1C1B20; font: 600 13px 'Manrope', sans-serif">Пакеты · 2</button>
|
|
</div>
|
|
|
|
<sc-for list="{{groups}}" as="g" hint-placeholder-count="2">
|
|
<section style="display: flex; flex-direction: column; gap: 6px">
|
|
<h2 style="margin: 6px 6px 0; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; color: #6D4AFF; letter-spacing: 0.04em"><span style="width: 8px; height: 8px; border-radius: 4px; background: {{g.dot}}"></span>{{g.title}}</h2>
|
|
<div style="border-radius: 24px; background: #FFFFFF; border: 1px solid #EDE8F2; overflow: hidden">
|
|
<sc-for list="{{g.rows}}" as="r" hint-placeholder-count="3">
|
|
<div style="display: flex; align-items: center; gap: 12px; padding: 0 6px 0 14px; height: 64px; border-bottom: {{r.divider}}">
|
|
<a href="F_RuleEdit.dc.html" style="flex: 1; min-width: 0; height: 64px; display: flex; align-items: center; gap: 12px; text-decoration: none; color: {{r.fg}}">
|
|
<span style="flex: none; padding: 3px 7px; border-radius: 8px; background: {{r.tagBg}}; color: {{r.tagFg}}; font-size: 10px; font-weight: 800">{{r.kind}}</span>
|
|
<span style="flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0">
|
|
<span style="font-size: 15px; font-weight: 700; font-family: ui-monospace, 'Cascadia Mono', Menlo, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">{{r.value}}</span>
|
|
<span style="font-size: 12px; color: #5E5A7D; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">{{r.sub}}</span>
|
|
</span>
|
|
</a>
|
|
<button aria-pressed="{{r.on}}" aria-label="Включить правило" style="flex: none; width: 52px; height: 32px; border: 0; border-radius: 16px; background: {{r.track}}; padding: 4px; display: flex; justify-content: {{r.align}}"><span style="width: 24px; height: 24px; border-radius: 12px; background: #FFFFFF"></span></button>
|
|
<a href="F_RuleDeleted.dc.html" aria-label="Удалить правило" style="flex: none; margin-left: -8px; width: 44px; height: 44px; border-radius: 22px; display: flex; align-items: center; justify-content: center; color: #5E5A7D">
|
|
<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"><path d="M5 7h14M10 11v6M14 11v6M7 7l1 13h8l1-13M9 7V4h6v3"/></svg>
|
|
</a>
|
|
</div>
|
|
</sc-for>
|
|
</div>
|
|
</section>
|
|
</sc-for>
|
|
</div>
|
|
|
|
<a href="F_RuleAdd.dc.html" style="position: absolute; right: 16px; bottom: 96px; height: 60px; padding: 0 22px; border: 0; border-radius: 20px; background: #6D4AFF; color: #FFFFFF; font-size: 16px; font-weight: 800; text-decoration: none; display: flex; align-items: center; gap: 10px; box-shadow: 0 6px 18px rgba(109,74,255,0.35)">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>Правило
|
|
</a>
|
|
<div role="status" style="position: absolute; left: 16px; right: 16px; bottom: 24px; min-height: 56px; box-sizing: border-box; padding: 0 6px 0 16px; border-radius: 16px; background: #313036; color: #F3EFF7; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; box-shadow: 0 6px 18px rgba(28,27,32,0.25)">
|
|
<span style="flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">Правило chatgpt.com удалено</span>
|
|
<a href="F_Rules.dc.html" style="flex: none; height: 44px; padding: 0 12px; border-radius: 22px; display: flex; align-items: center; text-decoration: none; font-size: 14px; font-weight: 800; color: #B69DFF">Отменить</a>
|
|
</div>
|
|
</div>
|
|
</x-dc>
|
|
<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":390,"height":900}}'>
|
|
class Component extends DCLogic {
|
|
renderVals() {
|
|
var tag = { 'САЙТ': ['#E3ECFF', '#1F4FA8'], 'АДРЕС': ['#F0ECF4', '#49454F'], 'ПАКЕТ': ['#DDF3E6', '#0E6B35'] };
|
|
var grp = function (title, dot, rows) {
|
|
return { title: title, dot: dot, rows: rows.map(function (r, i) {
|
|
return { kind: r[0], tagBg: tag[r[0]][0], tagFg: tag[r[0]][1], value: r[1], sub: r[2],
|
|
on: r[3] ? 'true' : 'false', track: r[3] ? '#6D4AFF' : '#C9C5D0', align: r[3] ? 'flex-end' : 'flex-start',
|
|
fg: r[3] ? '#1C1B20' : '#5E5A7D',
|
|
divider: i < rows.length - 1 ? '1px solid #F0ECF4' : '0' };
|
|
}) };
|
|
};
|
|
return {
|
|
groups: [
|
|
grp('ВСЕГДА ЧЕРЕЗ VPN', '#6D4AFF', [
|
|
['АДРЕС', '130.49.213.176', 'один адрес', true],
|
|
['АДРЕС', '10.8.0.0/24', 'сеть · выключено', false]
|
|
]),
|
|
grp('ВСЕГДА НАПРЯМУЮ', '#3FBF7F', [
|
|
['ПАКЕТ', 'ru.*', '14 приложений', true],
|
|
['ПАКЕТ', '*yandex*', '6 приложений', true],
|
|
['САЙТ', 'mos.ru', '2 адреса', true]
|
|
])
|
|
]
|
|
};
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|