Metehan

Open In Editor Video Publish Your Code

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>SecureVPN - Premium</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }

:root {
            --bg-primary: #0f0f0f;
            --bg-secondary: #1a1a1a;
            --bg-card: rgba(255, 255, 255, 0.03);
            --orange-primary: #ff5f2e;
            --orange-secondary: #ff2e63;
            --orange-glow: rgba(255, 95, 46, 0.4);
            --text-primary: #ffffff;
            --text-secondary: rgba(255, 255, 255, 0.6);
            --text-muted: rgba(255, 255, 255, 0.4);
            --success: #00d26a;
            --glass-bg: rgba(255, 255, 255, 0.05);
            --glass-border: rgba(255, 255, 255, 0.1);
        }

body {
            font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
            background: radial-gradient(ellipse at center, #1a1512 0%, #0f0f0f 100%);
            color: var(--text-primary);
            height: 100vh;
            overflow: hidden;
            position: relative;
        }

#app {
            width: 100%;
            max-width: 430px;
            height: 100vh;
            margin: 0 auto;
            position: relative;
            display: flex;
            flex-direction: column;
            padding: 0 24px;
        }

#meshCanvas {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 400px;
            height: 400px;
            pointer-events: none;
            z-index: 1;
            opacity: 0.8;
        }

.header {
            margin-top: 60px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 10;
        }

.status-container {
            display: flex;
            align-items: center;
            gap: 8px;
        }

.status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--text-muted);
            box-shadow: 0 0 8px currentColor;
            transition: all 0.3s ease;
        }

.status-dot.connected {
            background: var(--success);
            box-shadow: 0 0 12px var(--success);
        }

.status-text {
            font-size: 13px;
            color: var(--text-secondary);
            font-weight: 500;
            letter-spacing: 0.3px;
        }

.header-actions {
            display: flex;
            gap: 12px;
            align-items: center;
        }

.pro-badge {
            background: linear-gradient(135deg, var(--orange-primary), var(--orange-secondary));
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.5px;
            box-shadow: 0 4px 20px var(--orange-glow);
            cursor: pointer;
            transition: transform 0.2s ease;
        }

.pro-badge:active {
            transform: scale(0.95);
        }

.crown-btn {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: var(--glass-bg);
            border: 1px solid var(--glass-border);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

.crown-btn:hover {
            background: rgba(255, 255, 255, 0.1);
        }

.crown-btn svg {
            width: 18px;
            height: 18px;
            fill: #ffd700;
            filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.5));
        }

.speed-container {
            margin-top: 24px;
            display: flex;
            justify-content: center;
            gap: 40px;
            z-index: 10;
        }

.speed-box {
            text-align: center;
            padding: 16px 24px;
            background: var(--glass-bg);
            backdrop-filter: blur(20px);
            border: 1px solid var(--glass-border);
            border-radius: 20px;
            min-width: 120px;
            transition: all 0.3s ease;
        }

.speed-box.active {
            border-color: rgba(255, 95, 46, 0.3);
            box-shadow: 0 0 30px rgba(255, 95, 46, 0.1);
        }

.speed-label {
            font-size: 11px;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }

.speed-value {
            font-size: 24px;
            font-weight: 700;
            background: linear-gradient(to bottom, #fff, rgba(255,255,255,0.7));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-variant-numeric: tabular-nums;
        }

.speed-unit {
            font-size: 12px;
            color: var(--text-muted);
            margin-left: 2px;
        }

.timer-display {
            text-align: center;
            margin-top: 16px;
            z-index: 10;
            height: 32px;
        }

.timer {
            font-size: 28px;
            font-weight: 300;
            letter-spacing: 2px;
            color: var(--orange-primary);
            opacity: 0;
            transform: translateY(-10px);
            transition: all 0.5s ease;
            font-variant-numeric: tabular-nums;
            text-shadow: 0 0 20px var(--orange-glow);
        }

.timer.show {
            opacity: 1;
            transform: translateY(0);
        }

.power-section {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            z-index: 10;
        }

.power-button-wrapper {
            position: relative;
            width: 200px;
            height: 200px;
        }

.power-button {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: none;
            cursor: pointer;
            position: relative;
            background: linear-gradient(145deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
            backdrop-filter: blur(20px);
            box-shadow: 
                inset 0 2px 4px rgba(255,255,255,0.1),
                inset 0 -2px 4px rgba(0,0,0,0.3),
                0 20px 60px rgba(0,0,0,0.5),
                0 0 0 1px rgba(255,255,255,0.1);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

.power-button::before {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: 50%;
            padding: 2px;
            background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            opacity: 0.5;
        }

.power-button.connecting {
            animation: pulse-ring 2s ease-out infinite;
        }

.power-button.connected {
            background: linear-gradient(135deg, var(--orange-primary), var(--orange-secondary));
            box-shadow: 
                0 0 60px var(--orange-glow),
                0 20px 60px rgba(255, 95, 46, 0.3),
                inset 0 2px 4px rgba(255,255,255,0.3);
        }

.power-button:active {
            transform: scale(0.95);
        }

@keyframes pulse-ring {
            0% { box-shadow: 0 0 0 0 rgba(255, 95, 46, 0.4); }
            70% { box-shadow: 0 0 0 30px rgba(255, 95, 46, 0); }
            100% { box-shadow: 0 0 0 0 rgba(255, 95, 46, 0); }
        }

.power-icon {
            width: 48px;
            height: 48px;
            transition: all 0.3s ease;
        }

.power-button.connecting .power-icon {
            animation: rotate 2s linear infinite;
        }

@keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

.power-text {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-secondary);
            letter-spacing: 0.5px;
            transition: color 0.3s ease;
        }

.power-button.connected .power-text {
            color: white;
        }

.particle-ring {
            position: absolute;
            inset: -40px;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.5s ease;
        }

.particle-ring.active {
            opacity: 1;
        }

.particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: var(--orange-primary);
            border-radius: 50%;
            box-shadow: 0 0 10px var(--orange-primary);
        }

.server-card {
            margin: 0 0 24px 0;
            padding: 16px 20px;
            background: var(--glass-bg);
            backdrop-filter: blur(20px);
            border: 1px solid var(--glass-border);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 10;
        }

.server-card:hover {
            background: rgba(255, 255, 255, 0.08);
            transform: translateY(-2px);
        }

.server-card:active {
            transform: scale(0.98);
        }

.server-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }

.server-icon {
            width: 40px;
            height: 40px;
            border-radius: 12px;
            background: linear-gradient(135deg, var(--orange-primary), var(--orange-secondary));
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 15px var(--orange-glow);
        }

.server-icon svg {
            width: 20px;
            height: 20px;
            fill: white;
        }

.server-details h3 {
            font-size: 15px;
            font-weight: 600;
            margin-bottom: 2px;
        }

.server-details p {
            font-size: 12px;
            color: var(--text-muted);
        }

.server-stats {
            display: flex;
            align-items: center;
            gap: 12px;
        }

.signal-bars {
            display: flex;
            align-items: flex-end;
            gap: 3px;
            height: 20px;
        }

.bar {
            width: 4px;
            background: var(--orange-primary);
            border-radius: 2px;
            animation: signal-pulse 1.5s ease-in-out infinite;
        }

.bar:nth-child(1) { height: 6px; animation-delay: 0s; }
        .bar:nth-child(2) { height: 10px; animation-delay: 0.1s; }
        .bar:nth-child(3) { height: 14px; animation-delay: 0.2s; }
        .bar:nth-child(4) { height: 18px; animation-delay: 0.3s; }

@keyframes signal-pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.4; }
        }

.ping {
            font-size: 14px;
            font-weight: 600;
            color: var(--success);
            min-width: 50px;
            text-align: right;
        }

.info-icon {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 1.5px solid var(--text-muted);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: var(--text-muted);
            cursor: pointer;
            transition: all 0.2s ease;
        }

.info-icon:hover {
            border-color: var(--text-primary);
            color: var(--text-primary);
        }

.navigation {
            padding: 20px 0 40px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            z-index: 10;
        }

.nav-item {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: transparent;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
        }

.nav-item::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--orange-primary), var(--orange-secondary));
            opacity: 0;
            transform: scale(0.8);
            transition: all 0.3s ease;
        }

.nav-item.active::before {
            opacity: 1;
            transform: scale(1);
        }

.nav-item.active {
            box-shadow: 0 4px 20px var(--orange-glow);
        }

.nav-item svg {
            width: 24px;
            height: 24px;
            fill: var(--text-muted);
            transition: all 0.3s ease;
            position: relative;
            z-index: 1;
        }

.nav-item.active svg {
            fill: white;
        }

.server-panel {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to top, #0f0f0f, #1a1512);
            border-radius: 32px 32px 0 0;
            padding: 24px;
            transform: translateY(100%);
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 100;
            max-height: 70vh;
            overflow-y: auto;
            box-shadow: 0 -10px 40px rgba(0,0,0,0.5);
        }

.server-panel.open {
            transform: translateY(0);
        }

.panel-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
        }

.panel-title {
            font-size: 20px;
            font-weight: 700;
        }

.close-btn {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: var(--glass-bg);
            border: 1px solid var(--glass-border);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: var(--text-secondary);
            font-size: 18px;
            transition: all 0.2s ease;
        }

.close-btn:hover {
            background: rgba(255, 255, 255, 0.1);
            color: white;
        }

.country-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

.country-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px;
            background: var(--glass-bg);
            border: 1px solid var(--glass-border);
            border-radius: 16px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

.country-item:hover {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(255, 95, 46, 0.3);
        }

.country-item.selected {
            background: rgba(255, 95, 46, 0.1);
            border-color: var(--orange-primary);
        }

.country-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }

.flag {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            font-weight: 700;
            background: rgba(255,255,255,0.05);
            color: var(--text-primary);
            border: 1px solid var(--glass-border);
        }

.country-name {
            font-size: 16px;
            font-weight: 600;
        }

.country-meta {
            font-size: 13px;
            color: var(--text-muted);
            margin-top: 2px;
        }

.check-icon {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: var(--orange-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transform: scale(0);
            transition: all 0.3s ease;
        }

.country-item.selected .check-icon {
            opacity: 1;
            transform: scale(1);
        }

.check-icon svg {
            width: 14px;
            height: 14px;
            fill: white;
        }

.overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.7);
            backdrop-filter: blur(4px);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
            z-index: 99;
        }

.overlay.show {
            opacity: 1;
            pointer-events: auto;
        }

::-webkit-scrollbar {
            width: 6px;
        }

::-webkit-scrollbar-track {
            background: transparent;
        }

::-webkit-scrollbar-thumb {
            background: rgba(255,255,255,0.1);
            border-radius: 3px;
        }

@media (max-height: 800px) {
            .header { margin-top: 40px; }
            .speed-container { margin-top: 20px; }
            .power-button-wrapper { width: 180px; height: 180px; }
            .navigation { padding-bottom: 30px; }
        }
    </style>
</head>
<body>
    <canvas id="meshCanvas"></canvas>
    
    <div id="app">
        <header class="header">
            <div class="status-container">
                <div class="status-dot" id="statusDot"></div>
                <span class="status-text" id="statusText">Not Connected</span>
            </div>
            <div class="header-actions">
                <div class="pro-badge">PRO</div>
                <button class="crown-btn" aria-label="Premium">
                    <svg viewBox="0 0 24 24"><path d="M5 16L3 5L8.5 10L12 4L15.5 10L21 5L19 16H5M19 19C19 19.6 18.6 20 18 20H6C5.4 20 5 19.6 5 19V18H19V19Z"/></svg>
                </button>
            </div>
        </header>

<div class="speed-container">
            <div class="speed-box" id="uploadBox">
                <div class="speed-label">
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" style="opacity: 0.6;">
                        <path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/>
                    </svg>
                    Upload
                </div>
                <div>
                    <span class="speed-value" id="uploadSpeed">0</span>
                    <span class="speed-unit">MB/s</span>
                </div>
            </div>
            <div class="speed-box" id="downloadBox">
                <div class="speed-label">
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" style="opacity: 0.6;">
                        <path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"/>
                    </svg>
                    Download
                </div>
                <div>
                    <span class="speed-value" id="downloadSpeed">0</span>
                    <span class="speed-unit">MB/s</span>
                </div>
            </div>
        </div>

<section class="power-section">
            <div class="power-button-wrapper">
                <div class="particle-ring" id="particleRing"></div>
                <button class="power-button" id="powerBtn" aria-label="Toggle Connection">
                    <svg class="power-icon" id="powerIcon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M18.36 6.64a9 9 0 1 1-12.73 0"></path>
                        <line x1="12" y1="2" x2="12" y2="12"></line>
                    </svg>
                    <span class="power-text" id="powerText">Tap to Connect</span>
                </button>
            </div>
        </section>

<div class="server-card" id="serverCard">
            <div class="server-info">
                <div class="server-icon">
                    <svg viewBox="0 0 24 24"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
                </div>
                <div class="server-details">
                    <h3 id="serverName">Fastest free server</h3>
                    <p>Auto-selected from</p>
                </div>
            </div>
            <div class="server-stats">
                <div class="signal-bars">
                    <div class="bar"></div>
                    <div class="bar"></div>
                    <div class="bar"></div>
                    <div class="bar"></div>
                </div>
                <span class="ping" id="pingValue">96ms</span>
                <div class="info-icon">i</div>
            </div>
        </div>

<div class="server-panel" id="serverPanel">
        <div class="panel-header">
            <h2 class="panel-title">Select Server</h2>
            <button class="close-btn" id="closePanel">×</button>
        </div>
        <div class="country-list" id="countryList">
            <div class="country-item selected" data-country="USA" data-server="United States - New York">
                <div class="country-info">
                    <div class="flag">US</div>
                    <div>
                        <div class="country-name">United States</div>
                        <div class="country-meta">New York • 45ms</div>
                    </div>
                </div>
                <div class="check-icon">
                    <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
                </div>
            </div>
            <div class="country-item" data-country="Germany" data-server="Germany - Frankfurt">
                <div class="country-info">
                    <div class="flag">DE</div>
                    <div>
                        <div class="country-name">Germany</div>
                        <div class="country-meta">Frankfurt • 62ms</div>
                    </div>
                </div>
                <div class="check-icon">
                    <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
                </div>
            </div>
            <div class="country-item" data-country="Turkey" data-server="Turkey - Istanbul">
                <div class="country-info">
                    <div class="flag">TR</div>
                    <div>
                        <div class="country-name">Turkey</div>
                        <div class="country-meta">Istanbul • 38ms</div>
                    </div>
                </div>
                <div class="check-icon">
                    <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
                </div>
            </div>
            <div class="country-item" data-country="UK" data-server="United Kingdom - London">
                <div class="country-info">
                    <div class="flag">UK</div>
                    <div>
                        <div class="country-name">United Kingdom</div>
                        <div class="country-meta">London • 78ms</div>
                    </div>
                </div>
                <div class="check-icon">
                    <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
                </div>
            </div>
            <div class="country-item" data-country="Japan" data-server="Japan - Tokyo">
                <div class="country-info">
                    <div class="flag">JP</div>
                    <div>
                        <div class="country-name">Japan</div>
                        <div class="country-meta">Tokyo • 124ms</div>
                    </div>
                </div>
                <div class="check-icon">
                    <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
                </div>
            </div>
        </div>
    </div>

const powerBtn = document.getElementById('powerBtn');
        const powerText = document.getElementById('powerText');
        const statusDot = document.getElementById('statusDot');
        const statusText = document.getElementById('statusText');
        const timer = document.getElementById('timer');
        const uploadSpeed = document.getElementById('uploadSpeed');
        const downloadSpeed = document.getElementById('downloadSpeed');
        const uploadBox = document.getElementById('uploadBox');
        const downloadBox = document.getElementById('downloadBox');
        const particleRing = document.getElementById('particleRing');
        const serverPanel = document.getElementById('serverPanel');
        const overlay = document.getElementById('overlay');
        const closePanel = document.getElementById('closePanel');
        const serversBtn = document.getElementById('serversBtn');
        const serverCard = document.getElementById('serverCard');
        const countryList = document.getElementById('countryList');
        const serverName = document.getElementById('serverName');
        const pingValue = document.getElementById('pingValue');

const canvas = document.getElementById('meshCanvas');
        const ctx = canvas.getContext('2d');
        let animationId;
        let time = 0;

function resizeCanvas() {
            const dpr = window.devicePixelRatio || 1;
            canvas.width = 400 * dpr;
            canvas.height = 400 * dpr;
            ctx.scale(dpr, dpr);
        }
        resizeCanvas();

class Particle {
            constructor() {
                this.reset();
            }

reset() {
                this.angle = Math.random() * Math.PI * 2;
                this.radius = 80 + Math.random() * 60;
                this.speed = 0.002 + Math.random() * 0.003;
                this.size = 1 + Math.random() * 2;
                this.opacity = 0.3 + Math.random() * 0.5;
            }

update() {
                this.angle += this.speed;
                if (state.connected) {
                    this.radius = 100 + Math.sin(time * 0.001 + this.angle) * 40;
                    this.speed = 0.005 + Math.random() * 0.002;
                } else {
                    this.radius = 80 + Math.sin(time * 0.0005 + this.angle) * 20;
                }
            }

draw() {
                const x = 200 + Math.cos(this.angle) * this.radius;
                const y = 200 + Math.sin(this.angle) * this.radius;
                
                ctx.beginPath();
                ctx.arc(x, y, this.size, 0, Math.PI * 2);
                ctx.fillStyle = `rgba(255, 95, 46, ${this.opacity})`;
                ctx.fill();

if (state.connected) {
                    ctx.beginPath();
                    ctx.moveTo(200, 200);
                    ctx.lineTo(x, y);
                    ctx.strokeStyle = `rgba(255, 95, 46, ${this.opacity * 0.2})`;
                    ctx.lineWidth = 0.5;
                    ctx.stroke();
                }
            }
        }

const particles = Array.from({ length: 40 }, () => new Particle());

function animateMesh() {
            ctx.clearRect(0, 0, 400, 400);
            time++;

const gradient = ctx.createRadialGradient(200, 200, 0, 200, 200, 150);
            if (state.connected) {
                gradient.addColorStop(0, 'rgba(255, 95, 46, 0.3)');
                gradient.addColorStop(0.5, 'rgba(255, 46, 99, 0.1)');
                gradient.addColorStop(1, 'transparent');
            } else {
                gradient.addColorStop(0, 'rgba(255, 95, 46, 0.1)');
                gradient.addColorStop(1, 'transparent');
            }
            
            ctx.fillStyle = gradient;
            ctx.fillRect(0, 0, 400, 400);

particles.forEach(p => {
                p.update();
                p.draw();
            });

for (let i = 0; i < 3; i++) {
                const ringRadius = 100 + i * 30 + Math.sin(time * 0.02 + i) * 10;
                ctx.beginPath();
                ctx.arc(200, 200, ringRadius, 0, Math.PI * 2);
                ctx.strokeStyle = `rgba(255, 95, 46, ${0.1 - i * 0.03})`;
                ctx.lineWidth = 1;
                ctx.stroke();
            }

animationId = requestAnimationFrame(animateMesh);
        }
        animateMesh();

function createParticleRing() {
            particleRing.innerHTML = '';
            for (let i = 0; i < 12; i++) {
                const particle = document.createElement('div');
                particle.className = 'particle';
                const angle = (i / 12) * Math.PI * 2;
                const x = 50 + Math.cos(angle) * 50;
                const y = 50 + Math.sin(angle) * 50;
                particle.style.left = x + '%';
                particle.style.top = y + '%';
                particle.style.animationDelay = (i * 0.1) + 's';
                particleRing.appendChild(particle);
            }
        }
        createParticleRing();

function startTimer() {
            state.startTime = Date.now();
            state.timerInterval = setInterval(() => {
                const elapsed = Date.now() - state.startTime;
                timer.textContent = formatTime(elapsed);
            }, 1000);
            timer.classList.add('show');
        }

function stopTimer() {
            clearInterval(state.timerInterval);
            timer.classList.remove('show');
            setTimeout(() => {
                timer.textContent = '00:00:00';
            }, 500);
        }

function simulateSpeed() {
            if (!state.connected) {
                state.currentSpeed = { up: 0, down: 0 };
                uploadSpeed.textContent = '0';
                downloadSpeed.textContent = '0';
                uploadBox.classList.remove('active');
                downloadBox.classList.remove('active');
                return;
            }

const baseUp = 45 + Math.random() * 25;
            const baseDown = 350 + Math.random() * 300;
            
            state.currentSpeed.up = Math.floor(baseUp + (Math.random() - 0.5) * 20);
            state.currentSpeed.down = Math.floor(baseDown + (Math.random() - 0.5) * 100);
            
            uploadSpeed.textContent = state.currentSpeed.up;
            downloadSpeed.textContent = state.currentSpeed.down;
            
            uploadBox.classList.add('active');
            downloadBox.classList.add('active');
        }

function startSpeedSimulation() {
            simulateSpeed();
            state.speedInterval = setInterval(simulateSpeed, 2000);
        }

function stopSpeedSimulation() {
            clearInterval(state.speedInterval);
            state.currentSpeed = { up: 0, down: 0 };
            uploadSpeed.textContent = '0';
            downloadSpeed.textContent = '0';
            uploadBox.classList.remove('active');
            downloadBox.classList.remove('active');
        }

function toggleConnection() {
            if (state.connecting) return;

if (!state.connected) {
                state.connecting = true;
                powerBtn.classList.add('connecting');
                powerText.textContent = 'Connecting...';
                particleRing.classList.add('active');
                
                setTimeout(() => {
                    state.connecting = false;
                    state.connected = true;
                    powerBtn.classList.remove('connecting');
                    powerBtn.classList.add('connected');
                    powerText.textContent = 'Disconnect';
                    statusDot.classList.add('connected');
                    statusText.textContent = 'Connected';
                    startTimer();
                    startSpeedSimulation();
                }, 2000);
            } else {
                state.connected = false;
                powerBtn.classList.remove('connected');
                powerText.textContent = 'Tap to Connect';
                statusDot.classList.remove('connected');
                statusText.textContent = 'Not Connected';
                particleRing.classList.remove('active');
                stopTimer();
                stopSpeedSimulation();
            }
        }

function openPanel() {
            serverPanel.classList.add('open');
            overlay.classList.add('show');
        }

function closePanelFunc() {
            serverPanel.classList.remove('open');
            overlay.classList.remove('show');
        }

powerBtn.addEventListener('click', toggleConnection);
        serversBtn.addEventListener('click', openPanel);
        closePanel.addEventListener('click', closePanelFunc);
        overlay.addEventListener('click', closePanelFunc);
        serverCard.addEventListener('click', openPanel);

countryList.addEventListener('click', (e) => {
            const item = e.target.closest('.country-item');
            if (item) selectCountry(item);
        });

document.addEventListener('touchstart', function() {}, {passive: true});

Metehan

Recommended

A Code by Metehan

HTML

CSS

JS

Recommended

A Code by Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS