76 lines
5.5 KiB
HTML
76 lines
5.5 KiB
HTML
<!doctype html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>DNS и реклама</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: 1000px; 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_Settings.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">DNS и реклама</h1>
|
|
</header>
|
|
|
|
<div style="padding: 4px 16px 0; display: flex; flex-direction: column; gap: 12px">
|
|
<section style="padding: 18px; border-radius: 24px; background: #DDF3E6; display: flex; flex-direction: column; gap: 4px">
|
|
<span style="font-size: 13px; font-weight: 700; color: #0E6B35">Блокировка включена</span>
|
|
<span style="font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: #08381C">AdGuard DNS</span>
|
|
<span style="font-size: 13px; font-weight: 600; color: #0E6B35">Блокируются: реклама · трекеры · фишинг</span>
|
|
</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">
|
|
<sc-for list="{{toggles}}" as="t" hint-placeholder-count="3">
|
|
<div style="display: flex; align-items: center; gap: 12px; padding: 0 14px 0 16px; height: 64px; border-bottom: {{t.divider}}">
|
|
<span style="flex: 1; display: flex; flex-direction: column; gap: 2px">
|
|
<span style="font-size: 15px; font-weight: 700">{{t.title}}</span>
|
|
<span style="font-size: 12px; color: #5E5A7D">{{t.sub}}</span>
|
|
</span>
|
|
<button aria-pressed="{{t.on}}" aria-label="{{t.title}}" style="flex: none; width: 52px; height: 32px; border: 0; border-radius: 16px; background: {{t.track}}; padding: 4px; display: flex; justify-content: {{t.align}}"><span style="width: 24px; height: 24px; border-radius: 12px; background: #FFFFFF"></span></button>
|
|
</div>
|
|
</sc-for>
|
|
</section>
|
|
<p style="margin: 0 6px; font-size: 12px; line-height: 1.45; color: #5E5A7D">Реклама и трекеры блокируются вместе — через AdGuard DNS; только фишинг — через Cloudflare 1.1.1.2.</p>
|
|
|
|
<h2 style="margin: 6px 6px 0; font-size: 13px; font-weight: 800; color: #6D4AFF; letter-spacing: 0.04em">DNS-СЕРВЕР</h2>
|
|
<section role="radiogroup" aria-label="DNS-сервер" style="border-radius: 24px; background: #FFFFFF; border: 1px solid #EDE8F2; overflow: hidden">
|
|
<sc-for list="{{dns}}" as="d" hint-placeholder-count="4">
|
|
<label style="display: flex; align-items: center; gap: 12px; padding: 0 16px; height: 62px; border-bottom: {{d.divider}}; cursor: pointer">
|
|
<input type="radio" name="fdns" checked="{{d.checked}}" style="width: 20px; height: 20px; accent-color: #6D4AFF; margin: 0">
|
|
<span style="flex: 1; display: flex; flex-direction: column; gap: 1px">
|
|
<span style="font-size: 15px; font-weight: 700">{{d.title}}</span>
|
|
<span style="font-size: 12px; color: #5E5A7D">{{d.sub}}</span>
|
|
</span>
|
|
</label>
|
|
</sc-for>
|
|
</section>
|
|
<p style="margin: 0 6px; font-size: 12px; line-height: 1.45; color: #5E5A7D">Запросы к этому DNS идут через туннель — провайдер не сможет подменить ответ. Приложения, которые идут мимо VPN, используют DNS сети.</p>
|
|
</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 t = [['Рекламу', 'Баннеры в браузере и приложениях', true], ['Трекеры', 'Аналитика и сбор данных', true], ['Фишинг', 'Поддельные сайты банков и сервисов', true]];
|
|
var d = [['Из профиля сервера', 'Как настроил администратор', false], ['Cloudflare', '1.1.1.1 · через туннель', false], ['AdGuard DNS', 'Со встроенной фильтрацией', true], ['Свой адрес', 'IP, DoH (https://) или DoT (tls://)', false]];
|
|
return {
|
|
toggles: t.map(function (x, i) { return { title: x[0], sub: x[1], on: x[2] ? 'true' : 'false', track: x[2] ? '#6D4AFF' : '#C9C5D0', align: x[2] ? 'flex-end' : 'flex-start', divider: i < t.length - 1 ? '1px solid #F0ECF4' : '0' }; }),
|
|
dns: d.map(function (x, i) { return { title: x[0], sub: x[1], checked: x[2], divider: i < d.length - 1 ? '1px solid #F0ECF4' : '0' }; })
|
|
};
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|