Metehan

32 Metehan

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>NovVPN</title>
<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=DM+Sans:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#07090c;--bg2:#0d1015;--bg3:#13171e;
  --orange:#FF4D00;--orange2:#FF6B35;
  --orange-glow:rgba(255,77,0,0.35);--orange-dim:rgba(255,77,0,0.12);
  --text:#f0f2f5;--muted:#6b7280;--muted2:#9ca3af;
  --glass:rgba(255,255,255,0.04);--glass-border:rgba(255,255,255,0.08);
  --radius:18px;--radius-sm:12px;
}
html,body{height:100%;background:#000;display:flex;align-items:center;justify-content:center;
  font-family:'DM Sans',sans-serif;-webkit-tap-highlight-color:transparent;user-select:none;overflow:hidden;}

.phone{width:390px;height:844px;background:var(--bg);border-radius:48px;overflow:hidden;position:relative;
  box-shadow:0 0 0 1px rgba(255,255,255,0.06),0 40px 120px rgba(0,0,0,0.9),0 0 80px rgba(255,77,0,0.08);}

.screen{position:absolute;inset:0;display:flex;flex-direction:column;transition:opacity 0.5s,transform 0.5s;}
.screen.hidden{opacity:0;pointer-events:none;transform:scale(0.96);}

.statusbar{display:flex;justify-content:space-between;align-items:center;padding:14px 28px 8px;flex-shrink:0;}
.statusbar .time{font-family:'DM Sans',sans-serif;font-weight:600;font-size:15px;color:var(--text);letter-spacing:0.3px;}
.battery-body{width:24px;height:12px;border:1.5px solid var(--text);border-radius:3px;padding:1.5px;position:relative;}
.battery-body::after{content:'';position:absolute;right:-4px;top:50%;transform:translateY(-50%);width:3px;height:5px;background:var(--text);border-radius:0 1px 1px 0;}
.battery-fill{height:100%;width:80%;background:#4ade80;border-radius:1px;}

/* SPLASH */
#splash{background:var(--bg);overflow:hidden;}
.splash-bg{position:absolute;inset:0;background:
  radial-gradient(ellipse 120% 60% at 50% 100%,rgba(255,77,0,0.28) 0%,transparent 70%),
  radial-gradient(ellipse 80% 50% at 50% 95%,rgba(255,100,0,0.15) 0%,transparent 60%);}
.splash-globe{position:absolute;bottom:160px;left:50%;transform:translateX(-50%);
  width:300px;height:160px;background:radial-gradient(ellipse at 50% 80%,rgba(255,77,0,0.3) 0%,transparent 70%);
  border-radius:50%;filter:blur(20px);}
.splash-content{position:relative;z-index:2;display:flex;flex-direction:column;height:100%;padding:0 32px;}
.splash-logo{margin-top:60px;display:flex;align-items:center;gap:8px;}
.splash-logo-icon{width:36px;height:36px;background:var(--orange);border-radius:10px;display:flex;align-items:center;justify-content:center;}
.splash-logo-text{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:22px;color:var(--text);letter-spacing:1px;}
.splash-logo-text span{color:var(--orange);}
.splash-hero{flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:20px;}
.splash-tag{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--orange);letter-spacing:3px;text-transform:uppercase;margin-bottom:16px;opacity:0.8;}
.splash-title{font-family:'Rajdhani',sans-serif;font-size:48px;font-weight:700;line-height:1.05;color:var(--text);}
.splash-title .accent{color:var(--orange);font-style:italic;}
.splash-sub{margin-top:16px;font-size:13.5px;color:var(--muted2);line-height:1.65;max-width:260px;}
.splash-stats{display:flex;gap:24px;margin-top:28px;margin-bottom:40px;}
.splash-stat{display:flex;flex-direction:column;gap:2px;}
.splash-stat-num{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:22px;color:var(--text);}
.splash-stat-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;}
.splash-actions{display:flex;flex-direction:column;gap:12px;padding-bottom:50px;}
.btn-primary{width:100%;height:56px;background:var(--orange);border:none;border-radius:var(--radius);
  font-family:'DM Sans',sans-serif;font-weight:600;font-size:16px;color:#fff;cursor:pointer;
  box-shadow:0 8px 32px rgba(255,77,0,0.4);transition:transform 0.15s;position:relative;overflow:hidden;}
.btn-primary::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,0.1) 0%,transparent 50%);}
.btn-primary:active{transform:scale(0.97);}
.btn-secondary{width:100%;height:52px;background:transparent;border:1.5px solid var(--glass-border);
  border-radius:var(--radius);font-family:'DM Sans',sans-serif;font-weight:500;font-size:15px;color:var(--muted2);cursor:pointer;}
.btn-secondary:active{border-color:var(--orange);color:var(--orange);}

/* MAIN */
#main{background:var(--bg);overflow:hidden;}
.topnav{display:flex;align-items:center;justify-content:space-between;padding:4px 24px 12px;flex-shrink:0;}
.conn-status{display:flex;align-items:center;gap:8px;}
.conn-dot{width:8px;height:8px;border-radius:50%;background:var(--muted);transition:background 0.4s,box-shadow 0.4s;}
.conn-dot.active{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,0.2);animation:pulse-green 2s infinite;}
@keyframes pulse-green{0%,100%{box-shadow:0 0 0 3px rgba(34,197,94,0.2);}50%{box-shadow:0 0 0 6px rgba(34,197,94,0.06);}}
.conn-label{font-size:12px;font-weight:500;color:var(--muted2);transition:color 0.4s;}
.conn-label.active{color:#22c55e;}
.pro-badge{background:var(--orange);border-radius:8px;padding:4px 10px;
  font-family:'Rajdhani',sans-serif;font-weight:700;font-size:13px;color:#fff;letter-spacing:1px;display:flex;align-items:center;gap:5px;}
.pro-badge svg{width:12px;height:12px;fill:#fff;}
.notif-btn{width:38px;height:38px;background:var(--glass);border:1px solid var(--glass-border);
  border-radius:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.notif-btn svg{width:18px;height:18px;stroke:var(--muted2);fill:none;}

.timer-section{display:flex;justify-content:center;margin-bottom:2px;flex-shrink:0;}
.timer-display{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:38px;color:var(--orange);
  letter-spacing:3px;opacity:0;transform:translateY(-8px);transition:opacity 0.5s,transform 0.5s,color 0.4s;}
.timer-display.visible{opacity:1;transform:translateY(0);}
.timer-display.idle{color:var(--muted);font-size:28px;}

.speed-stats{display:flex;justify-content:center;gap:20px;margin-bottom:4px;flex-shrink:0;opacity:0;transition:opacity 0.6s;}
.speed-stats.visible{opacity:1;}
.speed-card{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius-sm);
  padding:10px 18px;display:flex;align-items:center;gap:10px;min-width:130px;}
.speed-icon{width:28px;height:28px;border-radius:8px;background:var(--orange-dim);display:flex;align-items:center;justify-content:center;}
.speed-icon svg{width:14px;height:14px;}
.speed-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;font-weight:500;}
.speed-value{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:14px;color:var(--text);margin-top:1px;}
.speed-unit{font-size:10px;color:var(--muted);font-weight:400;margin-left:2px;font-family:'DM Sans',sans-serif;}

.canvas-wrap{flex:1;display:flex;align-items:center;justify-content:center;position:relative;min-height:0;}
#vpn-canvas{position:absolute;inset:0;width:100%;height:100%;}
.canvas-glow{position:absolute;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,77,0,0.12) 0%,transparent 70%);pointer-events:none;transition:background 0.6s;}
.canvas-glow.active{background:radial-gradient(circle,rgba(255,77,0,0.3) 0%,transparent 70%);animation:glow-pulse 3s ease-in-out infinite;}
@keyframes glow-pulse{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.15);opacity:0.7;}}

.power-btn-wrap{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;}
.power-btn{width:100px;height:100px;border-radius:50%;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;position:relative;
  background:radial-gradient(circle at 40% 35%,#2a2e38,#1a1d24);
  box-shadow:0 0 0 2px rgba(255,255,255,0.06),0 8px 32px rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,255,255,0.08);
  transition:transform 0.2s,box-shadow 0.4s;overflow:hidden;}
.power-btn::after{content:'';position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg,rgba(255,255,255,0.06) 0%,transparent 60%);}
.power-btn.connected{background:radial-gradient(circle at 40% 35%,#ff6030,#cc3000);
  box-shadow:0 0 0 2px rgba(255,77,0,0.3),0 8px 40px rgba(255,77,0,0.4),0 0 60px rgba(255,77,0,0.15),inset 0 1px 0 rgba(255,200,100,0.2);}
.power-btn:active{transform:scale(0.93);}
.power-icon{width:36px;height:36px;transition:filter 0.4s;}
.power-icon circle,.power-icon path{transition:stroke 0.4s;stroke:rgba(255,255,255,0.5);fill:none;stroke-width:2.5;stroke-linecap:round;}
.power-btn.connected .power-icon circle,.power-btn.connected .power-icon path{stroke:rgba(255,255,255,0.95);}
.power-btn.connected .power-icon{filter:drop-shadow(0 0 6px rgba(255,255,255,0.5));}
.power-label{font-family:'DM Sans',sans-serif;font-size:10px;font-weight:500;color:rgba(255,255,255,0.4);
  letter-spacing:0.5px;position:relative;z-index:1;transition:color 0.4s;}
.power-btn.connected .power-label{color:rgba(255,255,255,0.85);}

.server-bar{margin:0 20px;background:var(--bg3);border:1px solid var(--glass-border);border-radius:16px;
  padding:14px 18px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
  margin-bottom:12px;cursor:pointer;transition:border-color 0.2s;}
.server-bar:active{border-color:var(--orange);}
.server-left{display:flex;align-items:center;gap:12px;}
.server-icon{width:36px;height:36px;background:linear-gradient(135deg,var(--orange),#ff8c00);
  border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(255,77,0,0.3);}
.server-icon svg{width:18px;height:18px;fill:#fff;}
.server-name{font-size:13px;font-weight:600;color:var(--text);}
.server-sub{font-size:11px;color:var(--muted);margin-top:1px;}
.server-right{display:flex;align-items:center;gap:10px;}
.ping-badge{background:rgba(34,197,94,0.12);border:1px solid rgba(34,197,94,0.2);border-radius:8px;
  padding:3px 8px;font-family:'JetBrains Mono',monospace;font-size:11px;color:#22c55e;font-weight:600;}
.signal-bars{display:flex;align-items:flex-end;gap:2px;}
.signal-bar{width:4px;background:var(--orange);border-radius:2px;}
.signal-bar:nth-child(1){height:6px;opacity:0.4;}
.signal-bar:nth-child(2){height:9px;opacity:0.7;}
.signal-bar:nth-child(3){height:12px;opacity:1;}
.chevron-right{width:16px;height:16px;stroke:var(--muted);fill:none;}

.bottom-nav{display:flex;justify-content:space-around;align-items:center;padding:16px 20px 30px;
  background:var(--bg2);border-top:1px solid var(--glass-border);flex-shrink:0;}
.nav-item{display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;
  padding:6px 16px;border-radius:12px;transition:background 0.2s;}
.nav-item.active{background:var(--orange-dim);}
.nav-item svg{width:22px;height:22px;stroke:var(--muted);fill:none;stroke-width:1.8;transition:stroke 0.2s;}
.nav-item.active svg{stroke:var(--orange);}
.nav-dot{width:4px;height:4px;border-radius:50%;background:var(--orange);opacity:0;transition:opacity 0.2s;}
.nav-item.active .nav-dot{opacity:1;}

/* SHEET */
.sheet-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.6);opacity:0;pointer-events:none;
  transition:opacity 0.3s;z-index:10;backdrop-filter:blur(4px);}
.sheet-overlay.open{opacity:1;pointer-events:all;}
.sheet{position:absolute;bottom:-100%;left:0;right:0;background:var(--bg2);border-radius:28px 28px 0 0;
  border-top:1px solid var(--glass-border);z-index:11;transition:bottom 0.4s cubic-bezier(0.34,1.56,0.64,1);
  max-height:70%;display:flex;flex-direction:column;}
.sheet.open{bottom:0;}
.sheet-handle{width:40px;height:4px;background:var(--glass-border);border-radius:2px;margin:12px auto 0;flex-shrink:0;}
.sheet-header{padding:16px 24px 12px;font-family:'Rajdhani',sans-serif;font-size:20px;font-weight:700;color:var(--text);letter-spacing:0.5px;flex-shrink:0;}
.sheet-search{margin:0 20px 12px;display:flex;align-items:center;gap:10px;background:var(--bg3);
  border:1px solid var(--glass-border);border-radius:var(--radius-sm);padding:10px 14px;flex-shrink:0;}
.sheet-search svg{width:16px;height:16px;stroke:var(--muted);fill:none;flex-shrink:0;}
.sheet-search input{background:none;border:none;outline:none;color:var(--text);font-family:'DM Sans',sans-serif;font-size:14px;width:100%;}
.sheet-search input::placeholder{color:var(--muted);}
.sheet-list{overflow-y:auto;flex:1;padding:0 16px 20px;-webkit-overflow-scrolling:touch;}
.sheet-list::-webkit-scrollbar{display:none;}

/* COUNTRY ITEMS - no emoji, flag badge instead */
.country-item{display:flex;align-items:center;gap:12px;padding:13px 8px;
  border-bottom:1px solid rgba(255,255,255,0.04);cursor:pointer;border-radius:10px;transition:background 0.15s;}
.country-item:active{background:var(--glass);}
.flag-badge{width:36px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:0.5px;flex-shrink:0;}
.country-name{flex:1;font-size:14px;font-weight:500;color:var(--text);}
.country-ping{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted2);}
.country-ping.fast{color:#22c55e;}
.country-ping.mid{color:#f59e0b;}
.country-item.selected .country-name{color:var(--orange);}
.country-check{color:var(--orange);font-size:16px;font-weight:700;}
</style>
</head>
<body>
<div class="phone">

<div class="screen" id="splash">
  <div class="splash-bg"></div>
  <div class="splash-globe"></div>
  <div class="splash-content">
    <div class="statusbar">
      <span class="time" id="splash-time">15:12</span>
      <div class="battery-body"><div class="battery-fill"></div></div>
    </div>
    <div class="splash-logo">
      <div class="splash-logo-icon">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
          <path d="M12 2v5M9 4l3-2 3 2" stroke="#fff" stroke-width="2" stroke-linecap="round"/>
          <circle cx="12" cy="13" r="8" stroke="#fff" stroke-width="1.5"/>
          <path d="M8 13h8M12 9v8" stroke="#fff" stroke-width="1.5" stroke-linecap="round" opacity="0.5"/>
        </svg>
      </div>
      <span class="splash-logo-text">Nov<span>VPN</span></span>
    </div>
    <div class="splash-hero">
      <div class="splash-tag">// Secure - Private - Fast</div>
      <div class="splash-title">TRUSTED BY<br><span class="accent">MILLIONS</span><br>USERS</div>
      <p class="splash-sub">Access 100+ countries and 4,000+ cities with a single tap. Change your location anytime, from anywhere.</p>
      <div class="splash-stats">
        <div class="splash-stat"><div class="splash-stat-num">100+</div><div class="splash-stat-label">Countries</div></div>
        <div class="splash-stat"><div class="splash-stat-num">4K+</div><div class="splash-stat-label">Cities</div></div>
        <div class="splash-stat"><div class="splash-stat-num">10M+</div><div class="splash-stat-label">Users</div></div>
      </div>
    </div>
    <div class="splash-actions">
      <button class="btn-primary" onclick="goToMain()">Get Started - It's Free</button>
      <button class="btn-secondary" onclick="goToMain()">Sign In</button>
    </div>
  </div>
</div>

<div class="screen hidden" id="main">
  <div class="statusbar">
    <span class="time" id="main-time">15:12</span>
    <div class="battery-body"><div class="battery-fill"></div></div>
  </div>
  <div class="topnav">
    <div class="conn-status">
      <div class="conn-dot" id="conn-dot"></div>
      <span class="conn-label" id="conn-label">Not Connected</span>
    </div>
    <div class="pro-badge">
      <svg viewBox="0 0 16 16"><path d="M8 1l1.8 3.6L14 5.7l-3 2.9.7 4.1L8 10.6l-3.7 2.1.7-4.1-3-2.9 4.2-.6z"/></svg>
      PRO
    </div>
    <div class="notif-btn">
      <svg viewBox="0 0 24 24" stroke-width="1.8">
        <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
        <path d="M13.73 21a2 2 0 0 1-3.46 0"/>
      </svg>
    </div>
  </div>
  <div class="timer-section">
    <div class="timer-display idle visible" id="timer">TAP TO CONNECT</div>
  </div>
  <div class="speed-stats" id="speed-stats">
    <div class="speed-card">
      <div class="speed-icon">
        <svg viewBox="0 0 24 24" fill="none">
          <path d="M12 19V5M5 12l7-7 7 7" stroke="var(--orange)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>
      <div>
        <div class="speed-label">Upload</div>
        <div class="speed-value"><span id="upload-val">0</span><span class="speed-unit">MB/s</span></div>
      </div>
    </div>
    <div class="speed-card">
      <div class="speed-icon">
        <svg viewBox="0 0 24 24" fill="none">
          <path d="M12 5v14M19 12l-7 7-7-7" stroke="var(--orange)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>
      <div>
        <div class="speed-label">Download</div>
        <div class="speed-value"><span id="download-val">0</span><span class="speed-unit">MB/s</span></div>
      </div>
    </div>
  </div>
  <div class="canvas-wrap">
    <canvas id="vpn-canvas"></canvas>
    <div class="canvas-glow" id="canvas-glow"></div>
    <div class="power-btn-wrap">
      <button class="power-btn" id="power-btn" onclick="toggleVPN()">
        <svg class="power-icon" viewBox="0 0 40 40">
          <path d="M20 6v14"/>
          <circle cx="20" cy="22" r="12"/>
        </svg>
        <span class="power-label" id="power-label">Tap to connect</span>
      </button>
    </div>
  </div>
  <div class="server-bar" onclick="openSheet()">
    <div class="server-left">
      <div class="server-icon">
        <svg viewBox="0 0 24 24"><path d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
      </div>
      <div>
        <div class="server-name" id="server-name">Fastest Free Server</div>
        <div class="server-sub" id="server-sub">Auto-selected - United States</div>
      </div>
    </div>
    <div class="server-right">
      <div class="ping-badge" id="ping-badge">96ms</div>
      <div class="signal-bars">
        <div class="signal-bar"></div>
        <div class="signal-bar"></div>
        <div class="signal-bar"></div>
      </div>
      <svg class="chevron-right" viewBox="0 0 24 24" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
    </div>
  </div>
  <div class="bottom-nav">
    <div class="nav-item active">
      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20"/><path d="M2 12h20"/></svg>
      <div class="nav-dot"></div>
    </div>
    <div class="nav-item" onclick="setActiveNav(this)">
      <svg viewBox="0 0 24 24"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>
      <div class="nav-dot"></div>
    </div>
    <div class="nav-item" onclick="setActiveNav(this)">
      <svg viewBox="0 0 24 24"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
      <div class="nav-dot"></div>
    </div>
    <div class="nav-item" onclick="setActiveNav(this)">
      <svg viewBox="0 0 24 24"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
      <div class="nav-dot"></div>
    </div>
  </div>
</div>

<div class="sheet-overlay" id="sheet-overlay" onclick="closeSheet()"></div>
<div class="sheet" id="sheet">
  <div class="sheet-handle"></div>
  <div class="sheet-header">Select Server</div>
  <div class="sheet-search">
    <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
    <input type="text" placeholder="Search country..." oninput="filterCountries(this.value)">
  </div>
  <div class="sheet-list" id="sheet-list"></div>
</div>

</div>

function flagBadge(code){
  var c = flagColors[code]||['#333','#666'];
  return '<div class="flag-badge" style="background:linear-gradient(135deg,'+c[0]+','+c[1]+');color:#fff;">'+code+'</div>';
}

// Clock
function updateClock(){
  var n=new Date();
  var t=n.getHours().toString().padStart(2,'0')+':'+n.getMinutes().toString().padStart(2,'0');
  document.getElementById('splash-time').textContent=t;
  document.getElementById('main-time').textContent=t;
}
updateClock();
setInterval(updateClock,10000);

// Screen nav
function goToMain(){
  document.getElementById('splash').classList.add('hidden');
  document.getElementById('main').classList.remove('hidden');
  initCanvas();
}

// VPN state
var connected=false;
var timerInterval=null;
var elapsed=0;
var speedInterval=null;
window._vpnConnected=false;

// Canvas
function initCanvas(){
  var canvas=document.getElementById('vpn-canvas');
  var p=canvas.parentElement;
  canvas.width=p.clientWidth;canvas.height=p.clientHeight;
  var ctx=canvas.getContext('2d');
  var W=canvas.width,H=canvas.height;
  var cx=W/2,cy=H/2;
  var RADIUS=140,TOTAL=800;
  var golden=Math.PI*(3-Math.sqrt(5));
  var pts=[];
  for(var i=0;i<TOTAL;i++){
    var y=1-(i/(TOTAL-1))*2;
    var r=Math.sqrt(1-y*y);
    var th=golden*i;
    pts.push({ox:Math.cos(th)*r,oy:y,oz:Math.sin(th)*r,size:Math.random()*1.2+0.3});
  }
  var frame=0;
  function project(x,y,z,rot){
    var cY=Math.cos(rot),sY=Math.sin(rot);
    var x2=x*cY-z*sY,z2=x*sY+z*cY;
    var cX=Math.cos(0.3),sX=Math.sin(0.3);
    var y2=y*cX-z2*sX,z3=y*sX+z2*cX;
    return{x:x2,y:y2,z:z3};
  }
  function draw(){
    ctx.clearRect(0,0,W,H);
    frame++;
    var t=frame*0.004;
    var isConn=window._vpnConnected;
    var clr=isConn?'255,77,0':'180,90,40';
    var rendered=pts.map(function(p){
      var pr=project(p.ox,p.oy,p.oz,t);
      return{px:cx+pr.x*RADIUS,py:cy+pr.y*RADIUS,z:pr.z,size:p.size};
    }).sort(function(a,b){return a.z-b.z;});
    var front=rendered.filter(function(p){return p.z>0.3;});
    ctx.lineWidth=0.3;
    for(var i=0;i<front.length;i++){
      for(var j=i+1;j<front.length;j++){
        var dx=front[i].px-front[j].px,dy=front[i].py-front[j].py;
        var dist=Math.sqrt(dx*dx+dy*dy);
        if(dist<28){
          var alpha=(1-dist/28)*front[i].z*0.35;
          ctx.beginPath();ctx.strokeStyle='rgba('+clr+','+alpha+')';
          ctx.moveTo(front[i].px,front[i].py);ctx.lineTo(front[j].px,front[j].py);ctx.stroke();
        }
      }
    }
    for(var k=0;k<rendered.length;k++){
      var pt=rendered[k];
      var depth=(pt.z+1)/2;
      var alpha2=depth*(isConn?0.85:0.45);
      var sz=pt.size*(0.4+depth*0.9);
      ctx.beginPath();ctx.arc(pt.px,pt.py,sz,0,Math.PI*2);
      ctx.fillStyle='rgba('+clr+','+alpha2+')';ctx.fill();
    }
    requestAnimationFrame(draw);
  }
  draw();
}

// Nav
function setActiveNav(el){
  document.querySelectorAll('.nav-item').forEach(function(n){n.classList.remove('active');});
  el.classList.add('active');
}

// Countries - no emoji
var countries=[
  {code:'US',name:'United States',ping:'42ms',speed:'fast'},
  {code:'GB',name:'United Kingdom',ping:'68ms',speed:'fast'},
  {code:'DE',name:'Germany',ping:'76ms',speed:'fast'},
  {code:'FR',name:'France',ping:'88ms',speed:'fast'},
  {code:'NL',name:'Netherlands',ping:'64ms',speed:'fast'},
  {code:'JP',name:'Japan',ping:'124ms',speed:'mid'},
  {code:'CA',name:'Canada',ping:'58ms',speed:'fast'},
  {code:'SG',name:'Singapore',ping:'138ms',speed:'mid'},
  {code:'AU',name:'Australia',ping:'180ms',speed:'mid'},
  {code:'BR',name:'Brazil',ping:'210ms',speed:'mid'},
  {code:'IN',name:'India',ping:'195ms',speed:'mid'},
  {code:'KR',name:'South Korea',ping:'145ms',speed:'mid'},
  {code:'SE',name:'Sweden',ping:'72ms',speed:'fast'},
  {code:'CH',name:'Switzerland',ping:'80ms',speed:'fast'},
  {code:'ZA',name:'South Africa',ping:'230ms',speed:'slow'},
];
var selectedCountry=0;

function selectCountry(idx,c){
  selectedCountry=idx;
  document.getElementById('server-name').textContent=c.code+' '+c.name;
  document.getElementById('server-sub').textContent='Premium Server - '+c.ping;
  document.getElementById('ping-badge').textContent=c.ping;
  closeSheet();
}

function filterCountries(q){
  renderCountries(countries.filter(function(c){return c.name.toLowerCase().indexOf(q.toLowerCase())>=0;}));
}

function openSheet(){renderCountries(countries);
  document.getElementById('sheet-overlay').classList.add('open');
  document.getElementById('sheet').classList.add('open');}
function closeSheet(){
  document.getElementById('sheet-overlay').classList.remove('open');
  document.getElementById('sheet').classList.remove('open');}

setTimeout(function(){document.getElementById('timer').classList.add('visible');},100);
</script>
</body>
</html>

CSS