Skip to content

Commit 802f8f5

Browse files
committed
feat(website): Add cross-platform installation guide and redesign Win8 theme into Metro UI architecture
1 parent 4e5b444 commit 802f8f5

3 files changed

Lines changed: 243 additions & 11 deletions

File tree

Lines changed: 177 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
---
2+
---
3+
4+
<section id="installation" class="installation section">
5+
<div class="container">
6+
<div class="section-header">
7+
<span class="section-tag">Инструкция</span>
8+
<h2 class="section-title">Как запустить Unbound</h2>
9+
<p class="section-desc">Выберите платформу, чтобы увидеть шаги для запуска DPI-обходчика.</p>
10+
</div>
11+
12+
<div class="install-grid">
13+
<!-- Windows -->
14+
<div class="install-card">
15+
<h3><span class="os-icon">🪟</span> Windows</h3>
16+
<p>Не требует установки драйвера (WinDivert встроен в бинарник).</p>
17+
<ol>
18+
<li>Распакуйте архив <code>unbound-windows-amd64.zip</code></li>
19+
<li>Запустите <code>unbound.exe</code> от имени Администратора.</li>
20+
<li>Никаких дополнительных настроек не требуется.</li>
21+
</ol>
22+
</div>
23+
24+
<!-- macOS -->
25+
<div class="install-card">
26+
<h3><span class="os-icon">🍎</span> macOS</h3>
27+
<p>Работает через pf (Packet Filter) и сырые сокеты.</p>
28+
<ol>
29+
<li>Распакуйте: <code>tar -xvf unbound-darwin-amd64.tar.gz</code></li>
30+
<li>Запустите в терминале: <br><code>sudo ./unbound</code></li>
31+
<li>(Опционально) добавьте в демоны launchd для автозапуска.</li>
32+
</ol>
33+
</div>
34+
35+
<!-- Linux -->
36+
<div class="install-card">
37+
<h3><span class="os-icon">🐧</span> Linux</h3>
38+
<p>Использует NFQUEUE/nftables для перехвата пакетов.</p>
39+
<ol>
40+
<li>Распакуйте бинарник: <code>tar -xvf unbound-linux-amd64.tar.gz</code></li>
41+
<li>Запустите от рута: <br><code>sudo ./unbound</code></li>
42+
<li>Правила iptables/nftables интегрируются на лету.</li>
43+
</ol>
44+
</div>
45+
46+
<!-- Android -->
47+
<div class="install-card">
48+
<h3><span class="os-icon">🤖</span> Android</h3>
49+
<p>Работает через локальный VpnService без root-прав.</p>
50+
<ol>
51+
<li>Скачайте и установите <code>app-release.apk</code>.</li>
52+
<li>Создайте профиль и разрешите VPN-соединение.</li>
53+
<li>Нажмите кнопку <b>Connect</b> для туннелирования.</li>
54+
</ol>
55+
</div>
56+
57+
<!-- OpenWRT -->
58+
<div class="install-card">
59+
<h3><span class="os-icon">🌐</span> OpenWRT</h3>
60+
<p>Разворачивается прямо на роутере для всей домашней сети.</p>
61+
<ol>
62+
<li>Загрузите пакет на роутер через SCP/SFTP.</li>
63+
<li>Установите пакет: <code>opkg install unbound_2...ipk</code></li>
64+
<li>Активируйте в веб-интерфейсе LuCI → Services.</li>
65+
</ol>
66+
</div>
67+
68+
<!-- iOS -->
69+
<div class="install-card">
70+
<h3><span class="os-icon">📱</span> iOS</h3>
71+
<p>Доступно в виде нативного демона только для Jailbreak.</p>
72+
<ol>
73+
<li>Откройте пакетный менеджер (Sileo / Zebra).</li>
74+
<li>Установите <code>.deb</code> пакет из архива.</li>
75+
<li>Unbound автоматически запустится как фоновая служба.</li>
76+
</ol>
77+
</div>
78+
</div>
79+
</div>
80+
</section>
81+
82+
<style>
83+
.installation {
84+
padding: var(--s-8) 0;
85+
}
86+
87+
.section-header {
88+
text-align: center;
89+
margin-bottom: var(--s-6);
90+
}
91+
92+
.section-tag {
93+
display: inline-block;
94+
padding: var(--s-1) var(--s-2);
95+
border-radius: 100px;
96+
font-size: 0.75rem;
97+
font-weight: 500;
98+
text-transform: uppercase;
99+
letter-spacing: 0.09375em;
100+
margin-bottom: var(--s-2);
101+
background: var(--bg-card);
102+
border: 1px solid var(--border-color);
103+
color: var(--text-secondary);
104+
}
105+
106+
.section-title {
107+
font-size: clamp(2rem, 5vw, 2.5rem);
108+
font-weight: 700;
109+
margin: 0 0 var(--s-1);
110+
letter-spacing: -0.03em;
111+
color: var(--text-primary);
112+
}
113+
114+
.section-desc {
115+
font-size: 0.9375rem;
116+
line-height: 1.6;
117+
max-width: 560px;
118+
margin: 0 auto;
119+
color: var(--text-secondary);
120+
}
121+
122+
.install-grid {
123+
display: grid;
124+
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
125+
gap: var(--s-4);
126+
}
127+
128+
.install-card {
129+
background: var(--bg-card);
130+
border: 1px solid var(--border-color);
131+
border-radius: var(--ui-radius);
132+
padding: var(--s-4);
133+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
134+
transition: transform 0.2s ease, border-color 0.2s ease;
135+
}
136+
137+
.install-card:hover {
138+
border-color: var(--accent);
139+
transform: translateY(-2px);
140+
}
141+
142+
.install-card h3 {
143+
margin-top: 0;
144+
margin-bottom: var(--s-2);
145+
color: var(--text-primary);
146+
font-size: 1.25rem;
147+
display: flex;
148+
align-items: center;
149+
gap: 8px;
150+
}
151+
152+
.install-card p {
153+
color: var(--text-secondary);
154+
font-size: 0.9rem;
155+
margin-bottom: var(--s-3);
156+
}
157+
158+
.install-card ol {
159+
margin: 0;
160+
padding-left: 1.25rem;
161+
color: var(--text-primary);
162+
font-size: 0.95rem;
163+
}
164+
165+
.install-card li {
166+
margin-bottom: var(--s-1);
167+
}
168+
169+
.install-card code {
170+
background: var(--bg-secondary);
171+
padding: 0.1rem 0.3rem;
172+
border-radius: 4px;
173+
font-family: monospace;
174+
font-size: 0.85em;
175+
color: var(--accent);
176+
}
177+
</style>

website/src/pages/index.astro

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import Navbar from "../components/Navbar.astro";
44
import Hero from "../components/Hero.astro";
55
import Features from "../components/Features.astro";
66
import Download from "../components/Download.astro";
7+
import Installation from "../components/Installation.astro";
78
import HowItWorks from "../components/HowItWorks.astro";
89
import FAQ from "../components/FAQ.astro";
910
import Footer from "../components/Footer.astro";
@@ -22,6 +23,7 @@ import "../styles/themes.css";
2223
<Hero />
2324
<Features />
2425
<Download />
26+
<Installation />
2527
<HowItWorks />
2628
<FAQ />
2729
<Footer />

website/src/styles/themes.css

Lines changed: 64 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,6 @@ body.theme-doodle .btn:hover {
123123

124124
body.theme-doodle .hero-title, body.theme-doodle .section-title {
125125
color: #2e3b82;
126-
text-decoration: underline dashed #ab4848;
127126
}
128127

129128
/* 4. LIQUID GLASS — Ultra Modern Translucence */
@@ -238,19 +237,73 @@ body.theme-macos26::before {
238237
backdrop-filter: blur(var(--ui-blur));
239238
}
240239

241-
/* 8. WINDOWS 8 — Metro Tiles */
240+
/* 8. WINDOWS 8 — True Metro UI */
242241
body.theme-win8 {
243-
--bg-primary: #0078d7;
244-
--bg-secondary: #005a9e;
245-
--bg-card: rgba(0, 0, 0, 0.15);
246-
--bg-navbar: rgba(0, 120, 215, 0.9);
247-
--border-color: rgba(255, 255, 255, 0.2);
242+
--bg-primary: #111111;
243+
--bg-secondary: #1d1d1d;
244+
--bg-card: #2d89ef; /* Metro Blue */
245+
--bg-navbar: #000000;
246+
--border-color: transparent;
248247
--text-primary: #ffffff;
249-
--text-secondary: rgba(255, 255, 255, 0.8);
250-
--accent: #ffffff;
251-
--accent-secondary: #e2e8f0;
248+
--text-secondary: rgba(255, 255, 255, 0.85);
249+
--accent: #2b5797;
250+
--accent-secondary: #00a300; /* Metro Green */
252251
--ui-radius: 0px;
253-
--font-main: 'Segoe UI', system-ui, sans-serif;
252+
--font-main: 'Segoe UI', 'Segoe WP', sans-serif;
253+
--shadow-card: none;
254+
}
255+
256+
body.theme-win8 {
257+
background-color: #111111;
258+
background-image:
259+
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px),
260+
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px);
261+
background-size: 80px 80px;
262+
background-attachment: fixed;
263+
}
264+
265+
/* Base flat tiles */
266+
body.theme-win8 .card-glass,
267+
body.theme-win8 .feature-card,
268+
body.theme-win8 .faq-item {
269+
background: var(--bg-card);
270+
box-shadow: none;
271+
border: none;
272+
padding: 32px;
273+
transition: transform 0.15s ease, background 0.15s ease;
274+
}
275+
276+
/* Coloring specific tiles */
277+
body.theme-win8 .download-card .card-glass {
278+
background: #00a300; /* Green for download */
279+
}
280+
body.theme-win8 .feature-card {
281+
background: #9f00a7; /* Purple for features */
282+
}
283+
body.theme-win8 .faq-item {
284+
background: #ff0097; /* Magenta for FAQ */
285+
}
286+
287+
/* 3D Pivot click effect */
288+
body.theme-win8 .card-glass:active,
289+
body.theme-win8 .feature-card:active,
290+
body.theme-win8 .faq-item:active,
291+
body.theme-win8 .btn:active {
292+
transform: perspective(600px) rotateX(2deg) rotateY(-2deg) scale(0.97);
293+
}
294+
295+
body.theme-win8 .btn {
296+
background: transparent;
297+
border: 2px solid #ffffff;
298+
color: #ffffff;
299+
border-radius: 0px;
300+
font-weight: 600;
301+
text-transform: lowercase;
302+
}
303+
304+
body.theme-win8 .btn:hover {
305+
background: #ffffff;
306+
color: #111111;
254307
}
255308

256309
body.theme-win8 .card-aura {

0 commit comments

Comments
 (0)