Lampa Guide Redesign — Implementation Plan
For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (
- [ ]) syntax for tracking.
Goal: Redesign Lampa Guide from dark AI-slop theme to light Editorial Paper aesthetic while preserving all content, URLs, and link structure. Simplify CSS from 2200 to ~500 lines.
Architecture: Jekyll static site. Two layouts (default.html, plugin.html), one CSS file (styles.css), one JS file (navigation.js). Seven content pages + ~90 plugin pages. All pages use layout: default or layout: plugin (which wraps default). Redesign touches layouts, CSS, JS, and HTML class names in content pages.
Tech Stack: Jekyll, HTML, CSS (custom properties), vanilla JS, Google Fonts (Literata + DM Sans)
Spec: docs/superpowers/specs/2026-03-29-redesign-design.md
Task 1: Rewrite styles.css
The foundation — new design system as CSS. Everything else depends on this.
Files:
-
Rewrite:
styles.css(currently 2207 lines → target ~500) -
Step 1: Write the complete new styles.css
Replace the entire file with the new design system. Structure:
/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
/* === VARIABLES === */
:root {
--bg: #f5f0e8;
--bg-surface: #fffbf5;
--bg-elevated: #ffffff;
--text: #1a1a1a;
--text-secondary: #555555;
--text-muted: #999999;
--accent: #b45309;
--accent-hover: #92400e;
--accent-light: #fef3c7;
--border: #e8e0d0;
--border-light: #f0ebe3;
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 10px;
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-12: 3rem;
--space-16: 4rem;
--font-heading: 'Literata', Georgia, serif;
--font-body: 'DM Sans', system-ui, sans-serif;
}
/* === BASE === */
html { scroll-behavior: smooth; }
body {
font-family: var(--font-body);
background: var(--bg);
color: var(--text);
line-height: 1.6;
font-size: 16px;
min-height: 100vh;
}
h1, h2, h3, h4 {
font-family: var(--font-heading);
font-weight: 700;
line-height: 1.3;
color: var(--text);
margin-bottom: var(--space-4);
}
h1 { font-size: 2.25rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; }
p {
color: var(--text-secondary);
margin-bottom: var(--space-4);
max-width: 70ch;
line-height: 1.7;
}
a {
color: var(--accent);
text-decoration: underline;
text-underline-offset: 2px;
transition: color 0.2s;
}
a:hover { color: var(--accent-hover); }
a:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
ul, ol {
padding-left: var(--space-6);
margin-bottom: var(--space-4);
color: var(--text-secondary);
}
li { margin-bottom: var(--space-2); }
code {
background: var(--accent-light);
padding: 0.15em 0.4em;
border-radius: var(--radius-sm);
font-size: 0.9em;
color: var(--accent-hover);
}
strong { color: var(--text); }
small { color: var(--text-muted); font-size: 0.875rem; }
/* === LAYOUT === */
.container {
max-width: 960px;
margin: 0 auto;
padding: 0 var(--space-6);
}
main.container {
padding-top: var(--space-12);
padding-bottom: var(--space-12);
}
/* === HEADER === */
.header {
background: var(--bg-surface);
border-bottom: 1px solid var(--border);
position: sticky;
top: 0;
z-index: 100;
}
.nav {
max-width: 960px;
margin: 0 auto;
padding: var(--space-4) var(--space-6);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
}
.nav-brand a {
font-family: var(--font-heading);
font-size: 1.25rem;
font-weight: 700;
color: var(--text);
text-decoration: none;
}
.nav-brand a:hover { color: var(--accent); }
.nav-list {
list-style: none;
display: flex;
align-items: center;
gap: var(--space-1);
margin: 0;
padding: 0;
}
.nav-list a {
display: block;
padding: var(--space-2) var(--space-3);
color: var(--text-secondary);
text-decoration: none;
font-size: 0.9375rem;
font-weight: 500;
border-radius: var(--radius-md);
transition: color 0.2s, background 0.2s;
}
.nav-list a:hover {
color: var(--text);
background: var(--border-light);
}
.nav-list a.active {
color: var(--accent);
font-weight: 600;
}
.nav-list a.telegram-link {
background: var(--accent);
color: white;
font-weight: 600;
padding: var(--space-2) var(--space-4);
}
.nav-list a.telegram-link:hover {
background: var(--accent-hover);
color: white;
}
/* Burger */
.nav-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
padding: var(--space-2);
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
display: block;
width: 22px;
height: 2px;
background: var(--text);
transition: transform 0.3s;
}
.nav-toggle span { position: relative; }
.nav-toggle span::before,
.nav-toggle span::after {
content: '';
position: absolute;
left: 0;
}
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
/* === FOOTER === */
footer {
border-top: 1px solid var(--border);
padding: var(--space-8) 0;
text-align: center;
}
footer p {
color: var(--text-muted);
font-size: 0.875rem;
max-width: none;
margin: 0 auto var(--space-2);
}
footer a {
color: var(--text-muted);
font-size: 0.875rem;
}
footer a:hover { color: var(--accent); }
/* === HERO === */
.hero-section {
text-align: center;
padding: var(--space-12) 0 var(--space-8);
border-bottom: 1px solid var(--border-light);
margin-bottom: var(--space-8);
}
.hero-section h2 {
font-size: 2rem;
margin-bottom: var(--space-4);
}
.hero-description {
font-size: 1.125rem;
max-width: 600px;
margin: 0 auto var(--space-6);
}
.hero-features {
display: flex;
justify-content: center;
gap: var(--space-6);
flex-wrap: wrap;
}
.feature-item {
display: flex;
align-items: center;
gap: var(--space-2);
color: var(--text-muted);
font-size: 0.9375rem;
}
.feature-icon { font-size: 1.25rem; }
/* === CARDS === */
.card, .content-card, .faq-item, .guide-item, .info-card, .support-item, .support-card {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-6);
margin-bottom: var(--space-6);
}
/* === STEPS === */
.steps-container { margin: var(--space-6) 0; }
.step-card {
display: flex;
gap: var(--space-6);
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-6);
margin-bottom: var(--space-4);
}
.step-number {
flex-shrink: 0;
width: 40px;
height: 40px;
background: var(--accent);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-heading);
font-weight: 700;
font-size: 1.125rem;
}
.step-content { flex: 1; min-width: 0; }
.step-content h3 { margin-bottom: var(--space-3); }
.step-description { margin-bottom: var(--space-4); }
.step-result {
background: var(--accent-light);
border-left: 3px solid var(--accent);
padding: var(--space-3) var(--space-4);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
margin-top: var(--space-4);
font-weight: 500;
color: var(--accent-hover);
}
/* === INSTRUCTION LIST === */
.instruction-list {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.instruction-item {
display: flex;
gap: var(--space-3);
align-items: flex-start;
}
.instruction-icon {
flex-shrink: 0;
font-size: 1.125rem;
line-height: 1.5;
}
/* === CTA BLOCKS === */
.vpn-cta, .telegram-cta, .proxy-cta {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-6);
margin-bottom: var(--space-6);
}
.vpn-cta-content, .telegram-cta-content, .proxy-cta-content {
display: flex;
align-items: center;
gap: var(--space-6);
}
.vpn-cta-icon, .proxy-cta-icon { font-size: 2rem; flex-shrink: 0; }
.vpn-cta-text h3, .telegram-cta-text h3, .proxy-cta-text h3 { margin-bottom: var(--space-2); }
.vpn-cta-text p, .telegram-cta-text p, .proxy-cta-text p { margin-bottom: 0; }
.vpn-cta-button, .telegram-cta-button, .proxy-cta-button { flex-shrink: 0; }
/* === BUTTONS === */
.btn, .btn-vpn, .btn-telegram, .btn-proxy, .btn-secondary {
display: inline-block;
padding: var(--space-3) var(--space-6);
border-radius: var(--radius-md);
font-weight: 600;
font-size: 0.9375rem;
text-decoration: none;
transition: background 0.2s, color 0.2s;
cursor: pointer;
border: none;
font-family: var(--font-body);
}
.btn, .btn-vpn, .btn-telegram, .btn-proxy {
background: var(--accent);
color: white;
}
.btn:hover, .btn-vpn:hover, .btn-telegram:hover, .btn-proxy:hover {
background: var(--accent-hover);
color: white;
}
.btn-secondary {
background: transparent;
color: var(--accent);
border: 1.5px solid var(--accent);
}
.btn-secondary:hover {
background: var(--accent-light);
color: var(--accent-hover);
}
/* === PAGE NAV === */
.page-nav {
background: var(--bg-surface);
border: 1px solid var(--border);
border-left: 3px solid var(--accent);
border-radius: var(--radius-md);
padding: var(--space-6);
margin-bottom: var(--space-8);
}
.page-nav h3 {
color: var(--accent);
font-size: 1.1rem;
margin-bottom: var(--space-4);
}
.page-nav ul {
list-style: none;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.page-nav a {
display: block;
padding: var(--space-2) var(--space-4);
background: var(--bg);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
text-decoration: none;
font-size: 0.9375rem;
font-weight: 500;
}
.page-nav a:hover {
border-color: var(--accent);
color: var(--accent);
}
/* === FAQ === */
.faq-item h3 {
color: var(--text);
cursor: default;
}
.faq-item h4 { margin-top: var(--space-4); }
/* === GRIDS === */
.benefits-grid, .support-grid, .links-grid, .contact-methods {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: var(--space-4);
margin: var(--space-4) 0;
}
.benefit-item, .quick-link {
background: var(--bg);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
padding: var(--space-4);
}
.benefit-item h4 { margin-bottom: var(--space-2); }
.benefit-item p { margin-bottom: 0; font-size: 0.9375rem; }
.quick-link {
display: flex;
align-items: center;
gap: var(--space-3);
text-decoration: none;
color: var(--text-secondary);
transition: border-color 0.2s;
}
.quick-link:hover { border-color: var(--accent); color: var(--accent); }
.link-icon { font-size: 1.25rem; }
/* === NOTICES === */
.security-notice, .warning-notice, .important-note, .geo-warning {
background: var(--accent-light);
border-left: 3px solid var(--accent);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
padding: var(--space-6);
margin: var(--space-6) 0;
}
.security-notice h3, .warning-notice h3, .important-note h4, .geo-warning h3 {
margin-bottom: var(--space-3);
}
.security-benefits, .vpn-features {
display: flex;
gap: var(--space-4);
flex-wrap: wrap;
margin-top: var(--space-4);
}
.security-item, .vpn-feature {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: 0.875rem;
font-weight: 500;
color: var(--text-secondary);
}
.security-icon { font-size: 1.125rem; }
/* === SERVERS === */
.server-info { margin-top: var(--space-6); }
.server-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: var(--space-3);
margin-top: var(--space-4);
}
.server-item {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
background: var(--bg);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
}
.server-icon { font-size: 1.25rem; }
.server-item strong { display: block; color: var(--text); }
.server-item small { color: var(--text-muted); font-size: 0.8125rem; }
/* === PLUGINS === */
.plugin-category { margin-bottom: var(--space-8); }
.plugin-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--space-4);
margin-top: var(--space-4);
}
.plugin-card {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-4);
}
.plugin-card.featured { border-color: var(--accent); }
.plugin-card h3 { font-size: 1rem; margin-bottom: var(--space-2); }
.plugin-card p { font-size: 0.9375rem; margin-bottom: var(--space-3); }
.plugin-card code {
display: block;
margin-bottom: var(--space-3);
word-break: break-all;
font-size: 0.8125rem;
}
.plugin-link {
color: var(--text);
text-decoration: none;
}
.plugin-link:hover { color: var(--accent); }
.plugin-status {
display: inline-block;
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-sm);
font-size: 0.75rem;
font-weight: 600;
}
.plugin-status.active { background: #d1fae5; color: #065f46; }
.plugin-status.warning { background: var(--accent-light); color: var(--accent-hover); }
.plugin-status.required { background: #dbeafe; color: #1e40af; }
/* === CATEGORY NAV === */
.category-nav {
margin-bottom: var(--space-8);
}
.category-nav h3 { margin-bottom: var(--space-4); }
.category-grid {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.category-link {
padding: var(--space-2) var(--space-4);
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
text-decoration: none;
font-size: 0.9375rem;
font-weight: 500;
color: var(--text-secondary);
transition: border-color 0.2s, color 0.2s;
}
.category-link:hover { border-color: var(--accent); color: var(--accent); }
/* === PLUGINS PAGE INLINE OVERRIDES === */
.info-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: var(--space-4);
margin: var(--space-4) 0;
}
.support-section { margin-top: var(--space-8); }
.support-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: var(--space-4);
margin-top: var(--space-4);
}
/* === CODE HIGHLIGHT (plugin pages) === */
.code-highlight {
display: flex;
align-items: center;
gap: var(--space-3);
flex-wrap: wrap;
}
.code-highlight code {
display: inline;
word-break: break-all;
}
/* === PLUGIN LIST (guides page) === */
.plugin-list { margin: var(--space-4) 0; }
.plugin-list h4 { margin-top: var(--space-4); margin-bottom: var(--space-2); }
/* === GEO WARNING (amber variant for redesign) === */
.geo-warning-content {
display: flex;
align-items: center;
gap: var(--space-6);
}
.geo-warning-icon { font-size: 2rem; flex-shrink: 0; }
.geo-warning-text h3 { margin-bottom: var(--space-3); }
.geo-warning-text p { margin-bottom: var(--space-3); }
.vpn-link, .vpn-link-highlighted { color: var(--accent); font-weight: 600; }
.vpn-link:hover, .vpn-link-highlighted:hover { color: var(--accent-hover); }
/* === CONTACT === */
.contact-item {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-6);
}
.contact-link {
font-size: 1.125rem;
font-weight: 600;
}
/* === RESPONSIVE === */
@media (max-width: 768px) {
.nav-toggle { display: block; }
.nav-list {
display: none;
flex-direction: column;
width: 100%;
padding: var(--space-4) 0;
gap: var(--space-1);
}
.nav.open .nav-list { display: flex; }
.nav {
flex-wrap: wrap;
}
.hero-section { padding: var(--space-8) 0 var(--space-6); }
.hero-section h2 { font-size: 1.5rem; }
.hero-features { gap: var(--space-4); }
.step-card { flex-direction: column; gap: var(--space-4); }
.vpn-cta-content, .telegram-cta-content, .proxy-cta-content,
.geo-warning-content {
flex-direction: column;
text-align: center;
}
.plugin-grid, .benefits-grid, .support-grid, .server-list,
.info-cards, .support-cards, .links-grid {
grid-template-columns: 1fr;
}
.page-nav ul { flex-direction: column; }
main.container { padding-top: var(--space-8); padding-bottom: var(--space-8); }
}
- Step 2: Verify the file saved correctly
Run: wc -l styles.css
Expected: ~450-550 lines
- Step 3: Commit
git add styles.css
git commit -m "style: rewrite CSS to Editorial Paper design system
Literata + DM Sans typography, amber accent on paper background.
From 2207 lines to ~500, no frameworks."
Task 2: Rewrite default layout
Strip ads and third-party dependencies, update fonts, update navigation to 6 items.
Files:
-
Modify:
_layouts/default.html -
Step 1: Rewrite _layouts/default.html
Full replacement. Key changes:
- Google Fonts: replace Roboto with Literata + DM Sans (
display=swap, only needed weights) - Remove: Milligram CSS link, Normalize.css link, VK OpenAPI script, Yandex RTB ad script + 3 ad blocks in main
- Navigation: 6 items (Главная, FAQ, Плагины, Руководства, Контакты, Telegram button) — remove Стабильность and Дымка VPN links
- Keep: GTM noscript + script, `
, favicons, navigation.js`
New _layouts/default.html:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Begin Jekyll SEO tag v2.8.0 -->
<title>Lampa Guide Redesign — Implementation Plan | Lampa — настройка на всех устройствах</title>
<meta name="generator" content="Jekyll v3.10.0" />
<meta property="og:title" content="Lampa Guide Redesign — Implementation Plan" />
<meta name="author" content="Lampa Guide" />
<meta property="og:locale" content="ru_RU" />
<meta name="description" content="Актуальные плагины для Lampa 2026 — рабочие в России. Пошаговая настройка на Smart TV, Android, iOS. 77 проверенных плагинов с описаниями." />
<meta property="og:description" content="Актуальные плагины для Lampa 2026 — рабочие в России. Пошаговая настройка на Smart TV, Android, iOS. 77 проверенных плагинов с описаниями." />
<link rel="canonical" href="https://lampa.nnslvp.io/docs/superpowers/plans/2026-03-29-redesign-plan" />
<meta property="og:url" content="https://lampa.nnslvp.io/docs/superpowers/plans/2026-03-29-redesign-plan" />
<meta property="og:site_name" content="Lampa — настройка на всех устройствах" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="Lampa Guide Redesign — Implementation Plan" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"WebPage","author":{"@type":"Person","name":"Lampa Guide"},"description":"Актуальные плагины для Lampa 2026 — рабочие в России. Пошаговая настройка на Smart TV, Android, iOS. 77 проверенных плагинов с описаниями.","headline":"Lampa Guide Redesign — Implementation Plan","url":"https://lampa.nnslvp.io/docs/superpowers/plans/2026-03-29-redesign-plan"}</script>
<!-- End Jekyll SEO tag -->
<meta name="msapplication-TileColor" content="#b45309" />
<link rel="sitemap" type="application/xml" href="/sitemap.xml" />
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png" />
<link rel="manifest" href="/icons/site.webmanifest" />
<link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#b45309" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Literata:opsz,[email protected],700&family=DM+Sans:wght@400;500;600&display=swap" />
<link rel="stylesheet" href="/styles.css" />
</head>
<!-- Google Tag Manager -->
<script>
(function (w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s),
dl = l != "dataLayer" ? "&l=" + l : "";
j.async = true;
j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, "script", "dataLayer", "GTM-5VKMRGJ9");
</script>
<!-- End Google Tag Manager -->
<body>
<!-- Google Tag Manager (noscript) -->
<noscript>
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5VKMRGJ9"
height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<header class="header">
<nav class="nav">
<div class="nav-brand">
<a href="/">Lampa Guide</a>
</div>
<button class="nav-toggle" aria-label="Toggle navigation">
<span></span>
</button>
<ul class="nav-list">
<li><a href="/" >Главная</a></li>
<li><a href="/faq" >FAQ</a></li>
<li><a href="/plugins" >Плагины</a></li>
<li><a href="/guides" >Руководства</a></li>
<li><a href="/contacts" >Контакты</a></li>
<li><a href="https://t.me/+0iNJ8wLZretiOThi" target="_blank" rel="noopener noreferrer" class="telegram-link">Telegram</a></li>
</ul>
</nav>
</header>
<main class="container">
<h1 id="replace-blancvpn-with-дымка-vpn--implementation-plan">Replace BlancVPN with Дымка VPN — Implementation Plan</h1>
<blockquote>
<p><strong>For agentic workers:</strong> REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (<code class="language-plaintext highlighter-rouge">- [ ]</code>) syntax for tracking.</p>
</blockquote>
<p><strong>Goal:</strong> Replace all BlancVPN promotional content with Дымка VPN across the lampa_instruction Jekyll site.</p>
<p><strong>Architecture:</strong> Pure HTML text/link replacements across 7 files. No backend, no JS, no CSS changes. Largest rewrites are in <code class="language-plaintext highlighter-rouge">stability.html</code> (FAQ blocks and final CTA).</p>
<p><strong>Tech Stack:</strong> Static HTML (Jekyll site)</p>
<p><strong>Spec:</strong> <code class="language-plaintext highlighter-rouge">docs/superpowers/specs/2026-03-23-replace-blancvpn-with-dymka-design.md</code></p>
<hr />
<h3 id="task-1-navigation-link--_layoutsdefaulthtml">Task 1: Navigation link — <code class="language-plaintext highlighter-rouge">_layouts/default.html</code></h3>
<p><strong>Files:</strong></p>
<ul class="task-list">
<li>
<p>Modify: <code class="language-plaintext highlighter-rouge">_layouts/default.html:100</code></p>
</li>
<li class="task-list-item">
<p><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 1: Replace navigation link</strong></p>
</li>
</ul>
<p>Find:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"https://getblancvpn.deals/?ref=yahor"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener noreferrer"</span> <span class="na">class=</span><span class="s">"vpn-link-nav"</span><span class="nt">></span>🔒 VPN<span class="nt"></a></li></span>
</code></pre></div></div>
<p>Replace with:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"https://t.me/dymkavpn_bot"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener noreferrer"</span> <span class="na">class=</span><span class="s">"vpn-link-nav"</span><span class="nt">></span>🌫 Дымка VPN<span class="nt"></a></li></span>
</code></pre></div></div>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 2: Commit</strong></li>
</ul>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git add _layouts/default.html
git commit <span class="nt">-m</span> <span class="s2">"replace BlancVPN with Дымка in navigation"</span>
</code></pre></div></div>
<hr />
<h3 id="task-2-vpn-promo-block--indexhtml">Task 2: VPN promo block — <code class="language-plaintext highlighter-rouge">index.html</code></h3>
<p><strong>Files:</strong></p>
<ul class="task-list">
<li>
<p>Modify: <code class="language-plaintext highlighter-rouge">index.html:103-105</code></p>
</li>
<li class="task-list-item">
<p><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 1: Replace VPN link and text</strong></p>
</li>
</ul>
<p>Find:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://getblancvpn.deals/?ref=yahor"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener noreferrer"</span> <span class="na">class=</span><span class="s">"vpn-link"</span><span class="nt">></span>
проверенный VPN-сервис
<span class="nt"></a></span>
</code></pre></div></div>
<p>Replace with:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://t.me/dymkavpn_bot"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener noreferrer"</span> <span class="na">class=</span><span class="s">"vpn-link"</span><span class="nt">></span>
VPN-сервис Дымка
<span class="nt"></a></span>
</code></pre></div></div>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 2: Commit</strong></li>
</ul>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git add index.html
git commit <span class="nt">-m</span> <span class="s2">"replace BlancVPN with Дымка in index.html"</span>
</code></pre></div></div>
<hr />
<h3 id="task-3-stability-page--simple-link-replacements--stabilityhtml">Task 3: Stability page — simple link replacements — <code class="language-plaintext highlighter-rouge">stability.html</code></h3>
<p><strong>Files:</strong></p>
<ul class="task-list">
<li>
<p>Modify: <code class="language-plaintext highlighter-rouge">stability.html:324-327</code>, <code class="language-plaintext highlighter-rouge">stability.html:374-376</code></p>
</li>
<li class="task-list-item">
<p><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 1: Replace “Мгновенное решение” link (line ~324)</strong></p>
</li>
</ul>
<p>Find:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://getblancvpn.deals/?ref=yahor"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener noreferrer"</span> <span class="na">class=</span><span class="s">"inline-vpn-link"</span><span class="nt">></span>
Подключите VPN за 2 минуты
<span class="nt"></a></span> и все заработает<span class="nt"></p></span>
</code></pre></div></div>
<p>Replace with:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://t.me/dymkavpn_bot"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener noreferrer"</span> <span class="na">class=</span><span class="s">"inline-vpn-link"</span><span class="nt">></span>
Подключите Дымку — бесплатно, пока есть места
<span class="nt"></a></span> и все заработает<span class="nt"></p></span>
</code></pre></div></div>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 2: Replace emergency CTA button (line ~374)</strong></li>
</ul>
<p>Find:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://getblancvpn.deals/?ref=yahor"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener noreferrer"</span> <span class="na">class=</span><span class="s">"emergency-button"</span><span class="nt">></span>
Включить VPN сейчас - работает за 60 секунд
<span class="nt"></a></span>
</code></pre></div></div>
<p>Replace with:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://t.me/dymkavpn_bot"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener noreferrer"</span> <span class="na">class=</span><span class="s">"emergency-button"</span><span class="nt">></span>
Подключить Дымку — бесплатно
<span class="nt"></a></span>
</code></pre></div></div>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 3: Commit</strong></li>
</ul>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git add stability.html
git commit <span class="nt">-m</span> <span class="s2">"replace BlancVPN links in stability.html simple blocks"</span>
</code></pre></div></div>
<hr />
<h3 id="task-4-stability-page--faq-block-rewrites--stabilityhtml">Task 4: Stability page — FAQ block rewrites — <code class="language-plaintext highlighter-rouge">stability.html</code></h3>
<p><strong>Files:</strong></p>
<ul class="task-list">
<li>
<p>Modify: <code class="language-plaintext highlighter-rouge">stability.html:397-433</code></p>
</li>
<li class="task-list-item">
<p><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 1: Replace “Почему бесплатные VPN не подходят?” FAQ block (lines ~397-408)</strong></p>
</li>
</ul>
<p>Find:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"faq-block"</span><span class="nt">></span>
<span class="nt"><h3></span>🤔 Почему бесплатные VPN не подходят?<span class="nt"></h3></span>
<span class="nt"><p></span>Бесплатные VPN имеют критические недостатки для стриминга:<span class="nt"></p></span>
<span class="nt"><ul></span>
<span class="nt"><li></span>Ограничение скорости (1-5 Мбит/с)<span class="nt"></li></span>
<span class="nt"><li></span>Ограничение трафика (500МБ-2ГБ в месяц)<span class="nt"></li></span>
<span class="nt"><li></span>Нестабильное соединение<span class="nt"></li></span>
<span class="nt"><li></span>Логирование и продажа данных<span class="nt"></li></span>
<span class="nt"><li></span>Блокировка P2P трафика<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"><p><strong></span>Итог:<span class="nt"></strong></span> для Lampa нужен платный VPN с высокой скоростью.<span class="nt"></p></span>
<span class="nt"></div></span>
</code></pre></div></div>
<p>Replace with:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"faq-block"</span><span class="nt">></span>
<span class="nt"><h3></span>🤔 Чем Дымка лучше обычных VPN?<span class="nt"></h3></span>
<span class="nt"><p></span>Дымка использует умный роутинг — сама определяет, какой трафик направить через VPN, а какой нет:<span class="nt"></p></span>
<span class="nt"><ul></span>
<span class="nt"><li></span>Госуслуги, Авито, Wildberries работают без отключения VPN<span class="nt"></li></span>
<span class="nt"><li></span>Не нужно постоянно включать и выключать<span class="nt"></li></span>
<span class="nt"><li></span>Подключил и забыл<span class="nt"></li></span>
<span class="nt"><li></span>Никаких ограничений скорости и трафика<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"><p><strong></span>Итог:<span class="nt"></strong></span> Дымка — VPN, который не мешает повседневным сервисам.<span class="nt"></p></span>
<span class="nt"></div></span>
</code></pre></div></div>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 2: Replace “Сколько стоит” FAQ block (lines ~422-433)</strong></li>
</ul>
<p>Find:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"faq-block"</span><span class="nt">></span>
<span class="nt"><h3></span>💰 Сколько реально стоит стабильная работа?<span class="nt"></h3></span>
<span class="nt"><p></span>Сравнение затрат на разные решения:<span class="nt"></p></span>
<span class="nt"><ul></span>
<span class="nt"><li><strong></span>Качественный VPN:<span class="nt"></strong></span> 200-500₽/месяц<span class="nt"></li></span>
<span class="nt"><li><strong></span>Платные прокси:<span class="nt"></strong></span> 300-800₽/месяц<span class="nt"></li></span>
<span class="nt"><li><strong></span>Смена провайдера:<span class="nt"></strong></span> +500-1000₽/месяц<span class="nt"></li></span>
<span class="nt"><li><strong></span>Мобильный интернет:<span class="nt"></strong></span> 1000-3000₽/месяц<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"><p><strong></span>Специально для читателей:<span class="nt"></strong></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://getblancvpn.deals/?ref=yahor"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener noreferrer"</span><span class="nt">></span>BlancVPN всего 59₽ первый месяц<span class="nt"></a></p></span>
<span class="nt"></div></span>
</code></pre></div></div>
<p>Replace with:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"faq-block"</span><span class="nt">></span>
<span class="nt"><h3></span>💰 Сколько стоит стабильная работа?<span class="nt"></h3></span>
<span class="nt"><p></span>С Дымкой — бесплатно, пока есть места. Подключение занимает 2 минуты через Telegram-бот.<span class="nt"></p></span>
<span class="nt"><p><strong></span>Попробуйте:<span class="nt"></strong></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://t.me/dymkavpn_bot"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener noreferrer"</span><span class="nt">></span>Дымка — бесплатно, пока есть места<span class="nt"></a></p></span>
<span class="nt"></div></span>
</code></pre></div></div>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 3: Commit</strong></li>
</ul>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git add stability.html
git commit <span class="nt">-m</span> <span class="s2">"rewrite FAQ blocks for Дымка in stability.html"</span>
</code></pre></div></div>
<hr />
<h3 id="task-5-stability-page--final-cta-block-rewrite--stabilityhtml">Task 5: Stability page — final CTA block rewrite — <code class="language-plaintext highlighter-rouge">stability.html</code></h3>
<p><strong>Files:</strong></p>
<ul class="task-list">
<li>
<p>Modify: <code class="language-plaintext highlighter-rouge">stability.html:463-490</code></p>
</li>
<li class="task-list-item">
<p><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 1: Replace final CTA block</strong></p>
</li>
</ul>
<p>Find (lines ~464-490):</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"cta-content"</span><span class="nt">></span>
<span class="nt"><h3></span>🚀 Обеспечьте стабильную работу Lampa прямо сейчас<span class="nt"></h3></span>
<span class="nt"><p></span>Не ждите, пока заблокируют именно вас. Более 15,000 пользователей Lampa уже защитили свой доступ.<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"cta-offers"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"cta-main-offer"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"offer-badge"</span><span class="nt">></span>Рекомендуем<span class="nt"></div></span>
<span class="nt"><h4></span>BlancVPN - Проверено пользователями Lampa<span class="nt"></h4></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"offer-features"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"offer-feature"</span><span class="nt">></span>✅ Работает со всеми источниками<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"offer-feature"</span><span class="nt">></span>✅ Высокая скорость стриминга<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"offer-feature"</span><span class="nt">></span>✅ Поддержка 24/7 на русском<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"offer-feature"</span><span class="nt">></span>✅ Настройка за 2 минуты<span class="nt"></span></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"offer-pricing"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"price-old"</span><span class="nt">></span>199₽<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"price-new"</span><span class="nt">></span>59₽<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"price-period"</span><span class="nt">></span>первый месяц<span class="nt"></span></span>
<span class="nt"></div></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://getblancvpn.deals/?ref=yahor"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener noreferrer"</span> <span class="na">class=</span><span class="s">"cta-button-main"</span><span class="nt">></span>
Получить доступ за 59₽ →
<span class="nt"></a></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
</code></pre></div></div>
<p>Replace with:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"cta-content"</span><span class="nt">></span>
<span class="nt"><h3></span>🚀 Обеспечьте стабильную работу Lampa прямо сейчас<span class="nt"></h3></span>
<span class="nt"><p></span>Не ждите, пока заблокируют именно вас.<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"cta-offers"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"cta-main-offer"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"offer-badge"</span><span class="nt">></span>Рекомендуем<span class="nt"></div></span>
<span class="nt"><h4></span>Дымка — VPN для России без боли<span class="nt"></h4></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"offer-features"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"offer-feature"</span><span class="nt">></span>✅ Госуслуги, Авито, Wildberries работают<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"offer-feature"</span><span class="nt">></span>✅ Умный роутинг — подключил и забыл<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"offer-feature"</span><span class="nt">></span>✅ Бесплатно, пока есть места<span class="nt"></span></span>
<span class="nt"></div></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://t.me/dymkavpn_bot"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener noreferrer"</span> <span class="na">class=</span><span class="s">"cta-button-main"</span><span class="nt">></span>
Подключить Дымку →
<span class="nt"></a></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
</code></pre></div></div>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 2: Commit</strong></li>
</ul>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git add stability.html
git commit <span class="nt">-m</span> <span class="s2">"rewrite final CTA block for Дымка in stability.html"</span>
</code></pre></div></div>
<hr />
<h3 id="task-6-plugins-pages--pluginshtml-and-_layoutspluginhtml">Task 6: Plugins pages — <code class="language-plaintext highlighter-rouge">plugins.html</code> and <code class="language-plaintext highlighter-rouge">_layouts/plugin.html</code></h3>
<p><strong>Files:</strong></p>
<ul class="task-list">
<li>Modify: <code class="language-plaintext highlighter-rouge">plugins.html:67-73</code>, <code class="language-plaintext highlighter-rouge">plugins.html:94</code></li>
<li>
<p>Modify: <code class="language-plaintext highlighter-rouge">_layouts/plugin.html:49-55</code></p>
</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 1: Replace geo-warning block in <code class="language-plaintext highlighter-rouge">plugins.html</code> (lines ~67-73)</strong></li>
</ul>
<p>Find:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code>использовать <span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://getblancvpn.deals/?ref=yahor"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener noreferrer"</span> <span class="na">class=</span><span class="s">"vpn-link-highlighted"</span><span class="nt">></span>надёжный VPN-сервис<span class="nt"></a></span>.
<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"vpn-features"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"vpn-feature"</span><span class="nt">></span>✓ Обход блокировок<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"vpn-feature"</span><span class="nt">></span>✓ Быстрое подключение<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"vpn-feature"</span><span class="nt">></span>✓ Безопасность<span class="nt"></span></span>
<span class="nt"></div></span>
</code></pre></div></div>
<p>Replace with:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code>использовать <span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://t.me/dymkavpn_bot"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener noreferrer"</span> <span class="na">class=</span><span class="s">"vpn-link-highlighted"</span><span class="nt">></span>VPN-сервис Дымка<span class="nt"></a></span>.
<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"vpn-features"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"vpn-feature"</span><span class="nt">></span>✓ Обход блокировок<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"vpn-feature"</span><span class="nt">></span>✓ Госуслуги и Авито работают<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"vpn-feature"</span><span class="nt">></span>✓ Бесплатно<span class="nt"></span></span>
<span class="nt"></div></span>
</code></pre></div></div>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 2: Replace security info card link in <code class="language-plaintext highlighter-rouge">plugins.html</code> (line ~94)</strong></li>
</ul>
<p>Find:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://getblancvpn.deals/?ref=yahor"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener noreferrer"</span> <span class="na">class=</span><span class="s">"vpn-link"</span><span class="nt">></span>надёжный VPN-сервис<span class="nt"></a></span>
</code></pre></div></div>
<p>Replace with:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://t.me/dymkavpn_bot"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener noreferrer"</span> <span class="na">class=</span><span class="s">"vpn-link"</span><span class="nt">></span>VPN-сервис Дымка<span class="nt"></a></span>
</code></pre></div></div>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 3: Replace geo-warning block in <code class="language-plaintext highlighter-rouge">_layouts/plugin.html</code> (lines ~49-55)</strong></li>
</ul>
<p>Find:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code>использовать <span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://getblancvpn.deals/?ref=yahor"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener noreferrer"</span> <span class="na">class=</span><span class="s">"vpn-link-highlighted"</span><span class="nt">></span>надёжный VPN-сервис<span class="nt"></a></span>.
<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"vpn-features"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"vpn-feature"</span><span class="nt">></span>✓ Обход блокировок<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"vpn-feature"</span><span class="nt">></span>✓ Быстрое подключение<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"vpn-feature"</span><span class="nt">></span>✓ Безопасность<span class="nt"></span></span>
<span class="nt"></div></span>
</code></pre></div></div>
<p>Replace with:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code>использовать <span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://t.me/dymkavpn_bot"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener noreferrer"</span> <span class="na">class=</span><span class="s">"vpn-link-highlighted"</span><span class="nt">></span>VPN-сервис Дымка<span class="nt"></a></span>.
<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"vpn-features"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"vpn-feature"</span><span class="nt">></span>✓ Обход блокировок<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"vpn-feature"</span><span class="nt">></span>✓ Госуслуги и Авито работают<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"vpn-feature"</span><span class="nt">></span>✓ Бесплатно<span class="nt"></span></span>
<span class="nt"></div></span>
</code></pre></div></div>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 4: Commit</strong></li>
</ul>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git add plugins.html _layouts/plugin.html
git commit <span class="nt">-m</span> <span class="s2">"replace BlancVPN with Дымка in plugins pages"</span>
</code></pre></div></div>
<hr />
<h3 id="task-7-guides-page--guideshtml">Task 7: Guides page — <code class="language-plaintext highlighter-rouge">guides.html</code></h3>
<p><strong>Files:</strong></p>
<ul class="task-list">
<li>
<p>Modify: <code class="language-plaintext highlighter-rouge">guides.html:428</code>, <code class="language-plaintext highlighter-rouge">guides.html:467</code>, <code class="language-plaintext highlighter-rouge">guides.html:481</code></p>
</li>
<li class="task-list-item">
<p><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 1: Replace VPN link at line ~428</strong></p>
</li>
</ul>
<p>Find:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://getblancvpn.deals/?ref=yahor"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener noreferrer"</span> <span class="na">class=</span><span class="s">"vpn-link"</span><span class="nt">></span>VPN для обхода ограничений<span class="nt"></a></span>
</code></pre></div></div>
<p>Replace with:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://t.me/dymkavpn_bot"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener noreferrer"</span> <span class="na">class=</span><span class="s">"vpn-link"</span><span class="nt">></span>VPN-сервис Дымка для обхода ограничений<span class="nt"></a></span>
</code></pre></div></div>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 2: Replace VPN link at line ~467</strong></li>
</ul>
<p>Find:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://getblancvpn.deals/?ref=yahor"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener noreferrer"</span> <span class="na">class=</span><span class="s">"vpn-link"</span><span class="nt">></span>надёжный VPN с политикой "no-logs"<span class="nt"></a></span>
</code></pre></div></div>
<p>Replace with:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://t.me/dymkavpn_bot"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener noreferrer"</span> <span class="na">class=</span><span class="s">"vpn-link"</span><span class="nt">></span>VPN-сервис Дымка<span class="nt"></a></span>
</code></pre></div></div>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 3: Replace VPN link at line ~481</strong></li>
</ul>
<p>Find:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://getblancvpn.deals/?ref=yahor"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener noreferrer"</span> <span class="na">class=</span><span class="s">"vpn-link"</span><span class="nt">></span>проверенный VPN-сервис<span class="nt"></a></span>
</code></pre></div></div>
<p>Replace with:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://t.me/dymkavpn_bot"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener noreferrer"</span> <span class="na">class=</span><span class="s">"vpn-link"</span><span class="nt">></span>VPN-сервис Дымка<span class="nt"></a></span>
</code></pre></div></div>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 4: Commit</strong></li>
</ul>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git add guides.html
git commit <span class="nt">-m</span> <span class="s2">"replace BlancVPN with Дымка in guides.html"</span>
</code></pre></div></div>
<hr />
<h3 id="task-8-faq-page--faqhtml">Task 8: FAQ page — <code class="language-plaintext highlighter-rouge">faq.html</code></h3>
<p><strong>Files:</strong></p>
<ul class="task-list">
<li>
<p>Modify: <code class="language-plaintext highlighter-rouge">faq.html:636</code></p>
</li>
<li class="task-list-item">
<p><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 1: Replace VPN link</strong></p>
</li>
</ul>
<p>Find:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://getblancvpn.deals/?ref=yahor"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener noreferrer"</span> <span class="na">class=</span><span class="s">"vpn-link"</span><span class="nt">></span>VPN-сервисами<span class="nt"></a></span>
</code></pre></div></div>
<p>Replace with:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://t.me/dymkavpn_bot"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener noreferrer"</span> <span class="na">class=</span><span class="s">"vpn-link"</span><span class="nt">></span>VPN-сервисом Дымка<span class="nt"></a></span>
</code></pre></div></div>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 2: Commit</strong></li>
</ul>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git add faq.html
git commit <span class="nt">-m</span> <span class="s2">"replace BlancVPN with Дымка in faq.html"</span>
</code></pre></div></div>
<hr />
<h3 id="task-9-final-verification">Task 9: Final verification</h3>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 1: Verify no BlancVPN references remain</strong></li>
</ul>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">grep</span> <span class="nt">-ri</span> <span class="s2">"blanc"</span> <span class="nt">--include</span><span class="o">=</span><span class="s2">"*.html"</span> <span class="nt">--include</span><span class="o">=</span><span class="s2">"*.css"</span> <span class="nt">--include</span><span class="o">=</span><span class="s2">"*.js"</span> <span class="nb">.</span>
<span class="nb">grep</span> <span class="nt">-ri</span> <span class="s2">"getblancvpn"</span> <span class="nt">--include</span><span class="o">=</span><span class="s2">"*.html"</span> <span class="nt">--include</span><span class="o">=</span><span class="s2">"*.css"</span> <span class="nt">--include</span><span class="o">=</span><span class="s2">"*.js"</span> <span class="nb">.</span>
</code></pre></div></div>
<p>Expected: no output (zero matches).</p>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 2: Verify all Дымка links point to correct URL</strong></li>
</ul>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">grep</span> <span class="nt">-r</span> <span class="s2">"dymkavpn_bot"</span> <span class="nt">--include</span><span class="o">=</span><span class="s2">"*.html"</span> <span class="nb">.</span>
</code></pre></div></div>
<p>Expected: matches in <code class="language-plaintext highlighter-rouge">_layouts/default.html</code>, <code class="language-plaintext highlighter-rouge">index.html</code>, <code class="language-plaintext highlighter-rouge">stability.html</code>, <code class="language-plaintext highlighter-rouge">plugins.html</code>, <code class="language-plaintext highlighter-rouge">_layouts/plugin.html</code>, <code class="language-plaintext highlighter-rouge">guides.html</code>, <code class="language-plaintext highlighter-rouge">faq.html</code>.</p>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 3: Verify site builds</strong></li>
</ul>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>bundle <span class="nb">exec </span>jekyll build 2>&1 | <span class="nb">tail</span> <span class="nt">-5</span>
</code></pre></div></div>
<p>Expected: successful build with no errors.</p>
</main>
<footer>
<div class="container">
<p>© 2026 Инструкция по настройке Lampa. Все права защищены.</p>
<p>
<a href="/privacy">Политика конфиденциальности</a> |
<a href="/terms">Пользовательское соглашение</a> |
<a href="/contacts">Контакты</a>
</p>
</div>
</footer>
<script src="/navigation.js"></script>
</body>
</html>
- Step 2: Commit
git add _layouts/default.html
git commit -m "layout: strip ads and dependencies, update nav to 6 items
Remove Yandex RTB, VK OpenAPI, Milligram, Normalize.
Switch to Literata + DM Sans. Remove Stability and VPN from nav."
Task 3: Simplify navigation.js
Current: 60 lines of JS with complex burger animation. Target: ~15 lines, simple toggle.
Files:
-
Rewrite:
navigation.js -
Step 1: Rewrite navigation.js
document.addEventListener('DOMContentLoaded', function () {
var toggle = document.querySelector('.nav-toggle');
var nav = document.querySelector('.nav');
if (!toggle || !nav) return;
toggle.addEventListener('click', function () {
nav.classList.toggle('open');
});
document.addEventListener('click', function (e) {
if (!nav.contains(e.target) && nav.classList.contains('open')) {
nav.classList.remove('open');
}
});
});
- Step 2: Commit
git add navigation.js
git commit -m "refactor: simplify burger menu to 15 lines"
Task 4: Update index.html
Remove inline styles, update CSS class usage to match new system. Content stays identical.
Files:
-
Modify:
index.html -
Step 1: Clean up index.html
Changes needed:
- Line 11: keep
<div itemscope...>— schema.org stays - Lines 18-41:
.hero-section/.hero-content— class names unchanged, works with new CSS - Lines 44-88: CTA blocks — class names unchanged (
.vpn-cta,.telegram-cta,.proxy-cta), work with new CSS - Lines 153-157: Remove inline
style=""from the stability guide link. Replace with:<div style="text-align: center; margin-top: 1.5rem;"> <a href="/stability" class="btn"> Подробное руководство по стабильности → </a> </div>Change only the
<a>tag — remove inline styles, addclass="btn".
All other content, URLs, anchors, schema.org — untouched.
- Step 2: Verify no broken links
Run: grep -n 'href=' index.html | head -30
Verify all hrefs are present and unchanged.
- Step 3: Commit
git add index.html
git commit -m "refactor: remove inline styles from index.html"
Task 5: Update plugin layout and remove inline styles from plugin pages
The _layouts/plugin.html has inline <style> blocks for geo-warning. Those styles are now in styles.css. Remove the inline block.
Files:
-
Modify:
_layouts/plugin.html(remove<style>block at lines 205-306) -
Step 1: Remove inline style block from plugin.html
Delete the entire <style>...</style> block at the end of the file (lines 205-306). The geo-warning styles and vpn-features styles are now in styles.css. Keep everything else (HTML structure, Liquid templates, <script> for clipboard).
- Step 2: Commit
git add _layouts/plugin.html
git commit -m "refactor: remove inline styles from plugin layout"
Task 6: Update plugins.html — remove inline styles
The plugins.html has an inline <style> block (lines 344-460) for geo-warning and plugin-link styles. Remove it — all styles are now in styles.css.
Files:
-
Modify:
plugins.html(remove<style>block at lines 344-460) -
Step 1: Remove inline style block from plugins.html
Delete the entire <style>...</style> block at the end of the file (lines 344 to end). These styles are now covered by styles.css.
- Step 2: Commit
git add plugins.html
git commit -m "refactor: remove inline styles from plugins page"
Task 7: Verify with Jekyll serve
Build and visually verify the site works correctly.
Files: None (verification only)
- Step 1: Build Jekyll site
Run: cd /Users/yahor.bukhta/work/lampa_instruction && bundle exec jekyll build 2>&1 | tail -5
Expected: no errors, _site/ directory updated
- Step 2: Serve and check
Run: bundle exec jekyll serve --port 4001 &
Open http://localhost:4001 and verify:
- Light paper background
- Literata headings, DM Sans body text
- Amber accent color on buttons and links
- 6 nav items with Telegram as amber button
- No Yandex ads, no VK scripts
- All pages load:
/,/faq,/plugins,/guides,/contacts,/stability - Burger menu works on mobile viewport
-
Plugin pages render correctly (e.g.,
/plugins/online-mod) - Step 3: Kill server
Run: kill %1 or pkill -f "jekyll serve"