index.html - master - vitol/vv

index.html
124 строки6 KB
vitol
Create: index.html, sub
14 июн 2026, 22:51
14 июн 2026, 22:51c04afc0
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noindex,nofollow">
<title>Мой VPN — подписка</title>
<style>
  :root{
    --bg:#0e1116; --card:#171b22; --card2:#1f242d; --line:#2a313c;
    --text:#e8edf4; --muted:#9aa6b6; --accent:#4f8cff; --accent2:#3bd6a4;
  }
  *{box-sizing:border-box}
  body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    background:radial-gradient(1200px 600px at 50% -10%,#1a2333 0%,var(--bg) 55%);color:var(--text);
    min-height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:32px 16px}
  .wrap{width:100%;max-width:560px}
  .head{text-align:center;margin-bottom:22px}
  .logo{width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,var(--accent),var(--accent2));
    display:inline-flex;align-items:center;justify-content:center;font-size:28px;margin-bottom:12px}
  h1{font-size:22px;margin:0 0 4px}
  .sub{color:var(--muted);font-size:14px;margin:0}
  .card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px;margin-bottom:16px}
  .label{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 8px}
  .urlrow{display:flex;gap:8px}
  input.url{flex:1;background:var(--card2);border:1px solid var(--line);color:var(--text);
    border-radius:10px;padding:11px 12px;font-size:13px;font-family:ui-monospace,Menlo,Consolas,monospace;overflow:hidden}
  button{cursor:pointer;border:none;border-radius:10px;font-size:14px;font-weight:600;padding:11px 16px;transition:.15s}
  .btn-primary{background:var(--accent);color:#fff}
  .btn-primary:hover{filter:brightness(1.08)}
  .btn-ghost{background:var(--card2);color:var(--text);border:1px solid var(--line);width:100%;margin-top:10px}
  .btn-ghost:hover{border-color:var(--accent)}
  #qr{display:none;justify-content:center;padding:18px;background:#fff;border-radius:14px;margin-top:14px}
  .steps{margin:0;padding-left:20px;color:var(--muted);font-size:14px;line-height:1.7}
  .steps b{color:var(--text)}
  .pills{display:flex;flex-wrap:wrap;gap:8px}
  .pill{background:var(--card2);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:13px}
  .pill span{color:var(--muted);margin-left:4px}
  .count{font-weight:700;color:var(--accent2)}
  .foot{text-align:center;color:var(--muted);font-size:12px;margin-top:18px;line-height:1.6}
  .ok{color:var(--accent2)}
</style>
</head>
<body>
<div class="wrap">
  <div class="head">
    <div class="logo">🛡️</div>
    <h1>Мой VPN</h1>
    <p class="sub"><span class="count">41</span> сервер · обновляется автоматически</p>
  </div>

  <div class="card">
    <p class="label">Ссылка-подписка</p>
    <div class="urlrow">
      <input id="url" class="url" readonly value="">
      <button id="copy" class="btn-primary">Копировать</button>
    </div>
    <button id="qrbtn" class="btn-ghost">Показать QR-код</button>
    <div id="qr"></div>
  </div>

  <div class="card">
    <p class="label">Как добавить в Happ</p>
    <ol class="steps">
      <li>Нажми <b>«Копировать»</b> (или открой QR).</li>
      <li>Открой <b>Happ</b> → кнопка <b>«+»</b> сверху.</li>
      <li>Выбери <b>«Из буфера обмена»</b> либо <b>«Сканировать QR»</b>.</li>
      <li>Готово — все сервера появятся списком по группам.</li>
    </ol>
  </div>

  <div class="card">
    <p class="label">Что внутри</p>
    <div class="pills">
      <div class="pill">🇫🇮 Finland<span>×4</span></div>
      <div class="pill">🇸🇪 Sweden<span>×3</span></div>
      <div class="pill">🇳🇱 Netherlands<span>×6</span></div>
      <div class="pill">🇩🇪 Germany<span>×7</span></div>
      <div class="pill">🇵🇱 Poland<span>×1</span></div>
      <div class="pill">🇦🇹 Austria<span>×1</span></div>
      <div class="pill">🇱🇻 Latvia<span>×1</span></div>
      <div class="pill">🇯🇵 Japan<span>×1</span></div>
      <div class="pill">🛡 Белые списки<span>×6</span></div>
      <div class="pill">🧱 Обход<span>×2</span></div>
      <div class="pill">📺 Стриминг<span>×2</span></div>
      <div class="pill">🧲 Torrent<span>×1</span></div>
      <div class="pill">🌍 Прочие<span>×6</span></div>
    </div>
  </div>

  <p class="foot">Личная подписка. Не делись ссылкой публично.<br>Поддерживает Happ, Hiddify, v2rayN, Streisand и др.</p>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script>
  // адрес файла подписки = ./sub рядом с этой страницей
  var subUrl = new URL('sub', location.href).href;
  var input = document.getElementById('url');
  input.value = subUrl;

  document.getElementById('copy').addEventListener('click', function(){
    var btn = this;
    navigator.clipboard.writeText(subUrl).then(function(){
      btn.textContent = 'Скопировано ✓';
      btn.style.background = 'var(--accent2)';
      setTimeout(function(){ btn.textContent='Копировать'; btn.style.background='var(--accent)'; }, 1800);
    }).catch(function(){
      input.select(); document.execCommand('copy');
      btn.textContent = 'Скопировано ✓';
      setTimeout(function(){ btn.textContent='Копировать'; }, 1800);
    });
  });

  var qrBuilt = false;
  document.getElementById('qrbtn').addEventListener('click', function(){
    var box = document.getElementById('qr');
    if(!qrBuilt){ new QRCode(box, {text: subUrl, width:220, height:220, correctLevel: QRCode.CorrectLevel.M}); qrBuilt = true; }
    var shown = box.style.display === 'flex';
    box.style.display = shown ? 'none' : 'flex';
    this.textContent = shown ? 'Показать QR-код' : 'Скрыть QR-код';
  });
</script>
</body>
</html>