From ede0370b3a8efe1e12bd69b8331ee9faf1376286 Mon Sep 17 00:00:00 2001
From: Dmitriy Petrov <floplopru@gmail.com>
Date: Thu, 15 Jan 2026 01:15:25 +0300
Subject: [PATCH] =?UTF-8?q?feat:=20=D0=A0=D0=B5=D0=B0=D0=BB=D0=B8=D0=B7?=
 =?UTF-8?q?=D0=BE=D0=B2=D0=B0=D0=BD=D0=BE=20=D0=B2=D0=BA=D0=BB=D1=8E=D1=87?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D0=B5/=D0=B2=D1=8B=D0=BA=D0=BB=D1=8E=D1=87?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=BF=D1=80=D0=BE=D0=BA=D1=81=D0=B8?=
 =?UTF-8?q?=20=D1=87=D0=B5=D1=80=D0=B5=D0=B7=20=D0=B2=D0=B5=D0=B1-=D0=B8?=
 =?UTF-8?q?=D0=BD=D1=82=D0=B5=D1=80=D1=84=D0=B5=D0=B9=D1=81=20=D1=81=20?=
 =?UTF-8?q?=D1=81=D0=BE=D1=85=D1=80=D0=B0=D0=BD=D0=B5=D0=BD=D0=B8=D0=B5?=
 =?UTF-8?q?=D0=BC=20=D1=81=D0=BE=D1=81=D1=82=D0=BE=D1=8F=D0=BD=D0=B8=D1=8F?=
 =?UTF-8?q?=20=D0=B8=20=D0=BE=D0=B1=D0=BD=D0=BE=D0=B2=D0=BB=D0=B5=D0=BD?=
 =?UTF-8?q?=D0=B8=D0=B5=D0=BC=20=D0=BA=D0=BE=D0=BD=D1=84=D0=B8=D0=B3=D1=83?=
 =?UTF-8?q?=D1=80=D0=B0=D1=86=D0=B8=D0=B8,=20=D0=B0=20=D1=82=D0=B0=D0=BA?=
 =?UTF-8?q?=D0=B6=D0=B5=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD?=
 =?UTF-8?q?=20=D1=81=D0=BE=D0=BE=D1=82=D0=B2=D0=B5=D1=82=D1=81=D1=82=D0=B2?=
 =?UTF-8?q?=D1=83=D1=8E=D1=89=D0=B8=D0=B9=20UI.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/index.html | 962 ++++++++++++++++++++++++++++---------------------
 web/server.py  | 141 +++++++-
 2 files changed, 693 insertions(+), 410 deletions(-)

diff --git a/web/index.html b/web/index.html
index 65ce8a6..b8d2052 100644
--- a/web/index.html
+++ b/web/index.html
@@ -44,51 +44,71 @@
             background: rgba(0, 255, 65, 0.5);
         }
 
-        /* Animations */
-        @keyframes scanline {
-            0% {
-                transform: translateY(-100%);
-            }
-
-            100% {
-                transform: translateY(100%);
-            }
-        }
-
-        .scanline {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(to bottom, transparent 50%, rgba(0, 255, 65, 0.02) 50%);
-            background-size: 100% 4px;
-            pointer-events: none;
-            z-index: 50;
-        }
-
-        .crt-flicker {
-            animation: flicker 0.15s infinite;
-            opacity: 0.1;
-            position: fixed;
-            inset: 0;
-            pointer-events: none;
-            background: radial-gradient(circle at center, transparent 80%, black 100%);
-            z-index: 40;
-        }
-
         .matrix-bg {
             background-image: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
             background-size: 100% 2px, 3px 100%;
         }
 
-        /* Utilities */
-        .frame-corner {
+        /* Big Toggle Switch */
+        .big-toggle {
+            position: relative;
+            width: 80px;
+            height: 40px;
+        }
+
+        .big-toggle input {
+            opacity: 0;
+            width: 0;
+            height: 0;
+        }
+
+        .big-toggle .slider {
             position: absolute;
-            width: 8px;
-            height: 8px;
-            border-color: var(--color-neon);
-            border-style: solid;
+            cursor: pointer;
+            inset: 0;
+            background-color: #1a1a1a;
+            border: 2px solid rgba(0, 255, 65, 0.3);
+            border-radius: 40px;
+            transition: 0.3s;
+        }
+
+        .big-toggle .slider:before {
+            position: absolute;
+            content: "";
+            height: 28px;
+            width: 28px;
+            left: 4px;
+            bottom: 4px;
+            background-color: rgba(0, 255, 65, 0.4);
+            border-radius: 50%;
+            transition: 0.3s;
+        }
+
+        .big-toggle input:checked+.slider {
+            background-color: rgba(0, 255, 65, 0.2);
+            border-color: #00ff41;
+            box-shadow: 0 0 20px rgba(0, 255, 65, 0.4);
+        }
+
+        .big-toggle input:checked+.slider:before {
+            transform: translateX(40px);
+            background-color: #00ff41;
+            box-shadow: 0 0 10px #00ff41;
+        }
+
+        /* Server Card */
+        .server-card {
+            transition: all 0.2s ease;
+        }
+
+        .server-card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0, 255, 65, 0.15);
+        }
+
+        .server-card.active {
+            border-color: #00ff41 !important;
+            box-shadow: 0 0 15px rgba(0, 255, 65, 0.3);
         }
     </style>
 </head>
@@ -103,27 +123,27 @@
 
     <!-- Header -->
     <header class="z-30 border-b border-[#00ff41]/20 bg-black/90 backdrop-blur-md sticky top-0">
-        <div class="max-w-[1400px] mx-auto px-4 md:px-6 py-4 flex justify-between items-center">
-            <div class="flex items-center gap-4">
-                <div class="relative p-1 border border-[#00ff41]/50 shadow-[0_0_10px_rgba(0,255,65,0.2)] bg-black">
+        <div class="max-w-[1400px] mx-auto px-4 md:px-6 py-3 flex justify-between items-center">
+            <div class="flex items-center gap-3">
+                <div class="relative p-1.5 border border-[#00ff41]/50 shadow-[0_0_10px_rgba(0,255,65,0.2)] bg-black">
                     <i data-lucide="terminal" class="w-5 h-5 animate-pulse text-[#00ff41]"></i>
                 </div>
                 <div>
-                    <h1 class="text-lg font-black tracking-[0.2em] uppercase text-[#00ff41]">
+                    <h1 class="text-base font-black tracking-[0.2em] uppercase text-[#00ff41]">
                         VPN<span class="text-white">_</span>CLIENT
                     </h1>
-                    <p class="text-[9px] opacity-40 uppercase tracking-widest text-[#00ff41]">Secure Shell v4.2</p>
+                    <p class="text-[10px] opacity-40 uppercase tracking-widest text-[#00ff41]">Secure Shell v4.2</p>
                 </div>
             </div>
 
-            <div class="hidden md:flex items-center gap-6 text-[10px] uppercase">
+            <div class="hidden md:flex items-center gap-6 text-[11px] uppercase">
                 <div class="flex flex-col items-end border-r border-[#00ff41]/20 pr-6">
                     <span class="opacity-30 text-[#00ff41]">Status</span>
-                    <span id="headerStatus" class="text-white font-bold">STANDBY</span>
+                    <span id="headerStatus" class="text-white font-bold text-sm">STANDBY</span>
                 </div>
                 <div class="flex flex-col items-end">
                     <span class="opacity-30 text-[#00ff41]">Traffic_Used</span>
-                    <span id="trafficValue" class="text-blue-400 font-bold">-- / --</span>
+                    <span id="trafficValue" class="text-blue-400 font-bold text-sm">-- / --</span>
                 </div>
             </div>
         </div>
@@ -131,303 +151,295 @@
 
     <!-- Main Content -->
     <main
-        class="flex-grow max-w-[1400px] w-full mx-auto px-4 md:px-6 py-6 grid grid-cols-1 lg:grid-cols-12 gap-6 relative z-10">
+        class="flex-grow max-w-[1400px] w-full mx-auto px-4 md:px-6 py-4 grid grid-cols-1 lg:grid-cols-12 gap-4 relative z-10">
 
-        <!-- Left Column -->
-        <div class="lg:col-span-8 flex flex-col gap-6">
+        <!-- Left Column: Main Controls -->
+        <div class="lg:col-span-7 flex flex-col gap-4">
 
-            <!-- Subscription Input -->
-            <div class="flex flex-col gap-2 p-4 bg-[#0a0a0a] border border-[#00ff41]/30 relative group">
-                <!-- Frame Corners -->
-                <div class="absolute top-0 left-0 w-2 h-2 border-t border-l border-[#00ff41]"></div>
-                <div class="absolute top-0 right-0 w-2 h-2 border-t border-r border-[#00ff41]"></div>
-                <div class="absolute bottom-0 left-0 w-2 h-2 border-b border-l border-[#00ff41]"></div>
-                <div class="absolute bottom-0 right-0 w-2 h-2 border-b border-r border-[#00ff41]"></div>
-
-                <label
-                    class="text-[10px] uppercase tracking-widest opacity-50 text-[#00ff41]">Subscription_URL_Input</label>
-                <div class="flex flex-col md:flex-row gap-3">
-                    <div class="relative flex-grow">
-                        <i data-lucide="link"
-                            class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[#00ff41]/40"></i>
-                        <input type="text" id="subUrlInput" placeholder="https://provider.com/api/v1/config?key=..."
-                            class="w-full bg-black border border-[#00ff41]/20 py-2.5 pl-10 pr-4 text-xs tracking-wider focus:outline-none focus:border-[#00ff41] transition-all placeholder:text-[#00ff41]/20 text-[#00ff41]" />
+            <!-- Master Proxy Toggle + Status -->
+            <div class="bg-black border-2 border-[#00ff41]/30 p-5 relative">
+                <div class="flex items-center justify-between gap-6">
+                    <!-- Toggle -->
+                    <div class="flex items-center gap-5">
+                        <label class="big-toggle">
+                            <input type="checkbox" id="masterProxyToggle" checked>
+                            <span class="slider"></span>
+                        </label>
+                        <div>
+                            <div id="proxyModeLabel" class="text-xl font-black tracking-wider text-[#00ff41]">
+                                VPN_MODE
+                            </div>
+                            <div id="proxyModeSubtitle" class="text-[11px] opacity-50 text-[#00ff41] uppercase">
+                                Traffic routed via proxy
+                            </div>
+                        </div>
                     </div>
-                    <button id="fetchServersBtn"
-                        class="flex items-center justify-center gap-2 bg-[#00ff41] text-black px-6 py-2.5 text-xs font-black uppercase tracking-widest hover:bg-white hover:shadow-[0_0_15px_rgba(0,255,65,0.4)] transition-all disabled:opacity-50 disabled:cursor-not-allowed">
-                        <i data-lucide="download" class="w-4 h-4" id="fetchIcon"></i>
-                        <span id="fetchText">Sync</span>
-                    </button>
-                </div>
-            </div>
 
-            <!-- Server List -->
-            <div
-                class="flex-grow bg-[#0a0a0a]/50 border border-[#00ff41]/10 overflow-hidden flex flex-col relative h-[500px] lg:h-auto">
-                <div class="px-5 py-3 border-b border-[#00ff41]/10 bg-black flex justify-between items-center shrink-0">
-                    <span
-                        class="text-[10px] uppercase tracking-[0.2em] font-bold text-[#00ff41]">Available_Endpoints</span>
-                    <span class="text-[9px] opacity-40 italic text-[#00ff41]">Click row to initiate link</span>
-                </div>
-
-                <div class="overflow-y-auto custom-scrollbar flex-grow p-0">
-                    <table class="w-full text-left border-collapse">
-                        <tbody id="serverListBody" class="divide-y divide-[#00ff41]/5">
-                            <!-- Populated by JS -->
-                            <tr class="text-[#00ff41]/30">
-                                <td colspan="4" class="p-8 text-center text-xs uppercase tracking-widest">
-                                    No_Data_Stream // Awaiting_Sync
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </div>
-        </div>
-
-        <!-- Right Column -->
-        <div class="lg:col-span-4 flex flex-col gap-6">
-
-            <!-- Tunnel Intelligence (Status) -->
-            <div id="statusBox"
-                class="border-2 border-[#00ff41]/10 bg-black/40 p-6 relative transition-all duration-500 min-h-[200px]">
-                <div class="absolute top-2 right-2 flex gap-1">
-                    <div class="w-1 h-3 border border-[#00ff41]/30 bg-[#00ff41]/10 blink-1"></div>
-                    <div class="w-1 h-3 border border-[#00ff41]/30 bg-[#00ff41]/10 blink-2"></div>
-                    <div class="w-1 h-3 border border-[#00ff41]/30 bg-[#00ff41]/10 blink-3"></div>
-                </div>
-
-                <p class="text-[9px] uppercase tracking-widest mb-4 text-[#00ff41]">Tunnel_Intelligence</p>
-
-                <div class="flex flex-col gap-4">
-                    <div class="flex items-center gap-4">
-                        <div id="statusIconContainer"
-                            class="w-14 h-14 flex items-center justify-center border border-[#00ff41]/20 rounded-sm">
-                            <i data-lucide="shield-alert" class="w-6 h-6 text-[#00ff41]/50"></i>
+                    <!-- Quick Status -->
+                    <div id="quickStatus" class="text-right hidden md:flex gap-6">
+                        <div>
+                            <div class="text-[11px] opacity-40 uppercase text-[#00ff41]">Uptime</div>
+                            <div id="uptimeDisplay" class="text-lg font-bold text-[#00ff41]">00:00:00</div>
                         </div>
                         <div>
-                            <div id="statusTitle" class="text-2xl font-black italic tracking-tighter text-[#00ff41]/50">
-                                NO_SIGNAL
-                            </div>
-                            <div id="statusSubtitle"
-                                class="text-[10px] opacity-50 uppercase tracking-widest text-[#00ff41]">
-                                Link not initialized
-                            </div>
-                        </div>
-                    </div>
-
-                    <div id="connectionDetails"
-                        class="grid grid-cols-2 gap-2 opacity-0 transition-opacity duration-300">
-                        <div class="p-2 border border-[#00ff41]/20 bg-black">
-                            <div class="text-[8px] opacity-40 uppercase flex items-center gap-1 text-[#00ff41]">
-                                <i data-lucide="zap" class="w-2 h-2"></i> Speed
-                                <button id="testSpeedBtn" class="ml-auto hover:text-white transition-colors"
-                                    title="Run Speed Test">
-                                    <i data-lucide="play" class="w-3 h-3"></i>
-                                </button>
-                            </div>
-                            <div id="speedValue" class="text-xs font-bold tracking-widest text-[#00ff41]">-- Mb/s</div>
-                        </div>
-                        <div class="p-2 border border-[#00ff41]/20 bg-black">
-                            <div class="text-[8px] opacity-40 uppercase flex items-center gap-1 text-[#00ff41]">
-                                <i data-lucide="globe" class="w-2 h-2"></i> IP_ADDR
-                            </div>
-                            <div id="ipValue" class="text-xs font-bold tracking-widest text-[#00ff41]">HIDDEN</div>
+                            <div class="text-[11px] opacity-40 uppercase text-[#00ff41]">Current_IP</div>
+                            <div id="currentIpDisplay" class="text-lg font-bold text-white">---.---.---.---</div>
                         </div>
                     </div>
                 </div>
             </div>
 
-            <!-- Proxy Chain Visualization -->
-            <div id="proxyChainSection" class="bg-black border border-[#00ff41]/20 p-4 font-mono">
+            <!-- Proxy Chain Visualization (Expanded) -->
+            <div id="proxyChainSection" class="bg-black border border-[#00ff41]/30 p-5 font-mono">
                 <div
-                    class="text-[9px] uppercase font-bold tracking-[0.3em] text-[#00ff41] mb-4 flex items-center gap-2">
-                    <i data-lucide="git-branch" class="w-3 h-3"></i> Proxy_Chain
+                    class="text-[11px] uppercase font-bold tracking-[0.3em] text-[#00ff41] mb-5 flex items-center gap-2">
+                    <i data-lucide="git-branch" class="w-4 h-4"></i> Proxy_Chain_Visualization
                 </div>
 
-                <div id="proxyChain" class="flex items-stretch gap-3 text-[10px]">
+                <div id="proxyChain" class="flex items-stretch gap-4 text-sm justify-center py-4">
                     <!-- You -->
-                    <div class="flex flex-col items-center justify-center gap-1">
+                    <div class="flex flex-col items-center justify-center gap-2">
                         <div
-                            class="w-10 h-10 rounded-full border-2 border-[#00ff41] flex items-center justify-center bg-[#00ff41]/10">
-                            <i data-lucide="user" class="w-5 h-5 text-[#00ff41]"></i>
+                            class="w-14 h-14 rounded-full border-2 border-[#00ff41] flex items-center justify-center bg-[#00ff41]/10">
+                            <i data-lucide="user" class="w-6 h-6 text-[#00ff41]"></i>
                         </div>
-                        <span class="uppercase opacity-60 text-[#00ff41] text-[8px]">You</span>
+                        <span class="uppercase opacity-60 text-[#00ff41] text-[10px]">You</span>
                     </div>
 
                     <!-- Arrow to branch -->
                     <div class="flex items-center">
-                        <div class="w-6 h-[2px] bg-[#00ff41]"></div>
-                        <i data-lucide="chevron-right" class="w-3 h-3 text-[#00ff41]"></i>
+                        <div class="w-8 h-[3px] bg-[#00ff41]"></div>
+                        <i data-lucide="chevron-right" class="w-4 h-4 text-[#00ff41]"></i>
                     </div>
 
                     <!-- Branch: Fallback + VPN -->
-                    <div id="chainBranch" class="flex flex-col gap-2 py-1">
+                    <div id="chainBranch" class="flex flex-col gap-3 py-1">
                         <!-- Fallback branch -->
-                        <div id="chainFallbackRow" class="flex items-center gap-2 transition-all duration-300 hidden">
-                            <div class="w-4 h-[2px] bg-[#00ff41]/50 rounded-full"></div>
+                        <div id="chainFallbackRow" class="flex items-center gap-3 transition-all duration-300 hidden">
+                            <div class="w-5 h-[3px] bg-[#00ff41]/50 rounded-full"></div>
                             <div id="chainFallbackBox"
-                                class="relative w-14 h-9 border-2 border-[#00ff41]/30 flex items-center justify-center bg-[#0a0a0a] transition-all">
-                                <i data-lucide="server" class="w-4 h-4 text-[#00ff41]/50"></i>
-                                <!-- X overlay for unavailable -->
+                                class="relative w-16 h-12 border-2 border-[#00ff41]/30 flex items-center justify-center bg-[#0a0a0a] transition-all">
+                                <i data-lucide="server" class="w-5 h-5 text-[#00ff41]/50"></i>
                                 <div id="chainFallbackX"
                                     class="absolute inset-0 hidden items-center justify-center bg-black/60">
-                                    <i data-lucide="x" class="w-5 h-5 text-red-500"></i>
+                                    <i data-lucide="x" class="w-6 h-6 text-red-500"></i>
                                 </div>
                             </div>
-                            <span id="chainFallbackLabel"
-                                class="uppercase text-[7px] opacity-40 text-[#00ff41] max-w-[55px] truncate">Fallback</span>
+                            <div class="flex flex-col">
+                                <span id="chainFallbackLabel"
+                                    class="uppercase text-[10px] opacity-60 text-[#00ff41]">Fallback</span>
+                                <span id="chainFallbackLatency" class="text-xs text-[#00ff41]/50">--ms</span>
+                            </div>
                         </div>
 
                         <!-- VPN branch -->
-                        <div id="chainVPNRow" class="flex items-center gap-2 transition-all duration-300">
-                            <div class="w-4 h-[2px] bg-[#00ff41]/50 rounded-full"></div>
+                        <div id="chainVPNRow" class="flex items-center gap-3 transition-all duration-300">
+                            <div class="w-5 h-[3px] bg-[#00ff41]/50 rounded-full"></div>
                             <div id="chainVPNBox"
-                                class="relative w-14 h-9 border-2 border-[#00ff41]/30 flex items-center justify-center bg-[#0a0a0a] transition-all">
-                                <i data-lucide="shield" class="w-4 h-4 text-[#00ff41]/50"></i>
-                                <!-- X overlay for unavailable -->
+                                class="relative w-16 h-12 border-2 border-[#00ff41]/30 flex items-center justify-center bg-[#0a0a0a] transition-all">
+                                <i data-lucide="shield" class="w-5 h-5 text-[#00ff41]/50"></i>
                                 <div id="chainVPNX"
                                     class="absolute inset-0 hidden items-center justify-center bg-black/60">
-                                    <i data-lucide="x" class="w-5 h-5 text-red-500"></i>
+                                    <i data-lucide="x" class="w-6 h-6 text-red-500"></i>
                                 </div>
                             </div>
-                            <span id="chainVPNLabel"
-                                class="uppercase text-[7px] opacity-40 text-[#00ff41] max-w-[55px] truncate">VPN</span>
+                            <div class="flex flex-col">
+                                <span id="chainVPNLabel"
+                                    class="uppercase text-[10px] opacity-60 text-[#00ff41]">VPN</span>
+                                <span id="chainVPNLatency" class="text-xs text-[#00ff41]/50">--ms</span>
+                            </div>
+                        </div>
+
+                        <!-- Direct branch (when proxy disabled) -->
+                        <div id="chainDirectRow" class="flex items-center gap-3 transition-all duration-300 hidden">
+                            <div class="w-5 h-[3px] bg-yellow-500/50 rounded-full"></div>
+                            <div id="chainDirectBox"
+                                class="relative w-16 h-12 border-2 border-yellow-500/50 flex items-center justify-center bg-yellow-500/5 transition-all">
+                                <i data-lucide="zap" class="w-5 h-5 text-yellow-500/70"></i>
+                            </div>
+                            <span class="uppercase text-[10px] opacity-60 text-yellow-500">DIRECT</span>
                         </div>
                     </div>
 
                     <!-- Arrow from branch -->
                     <div class="flex items-center">
-                        <i data-lucide="chevron-right" class="w-3 h-3 text-[#00ff41]"></i>
-                        <div class="w-6 h-[2px] bg-[#00ff41]"></div>
+                        <i data-lucide="chevron-right" class="w-4 h-4 text-[#00ff41]"></i>
+                        <div class="w-8 h-[3px] bg-[#00ff41]"></div>
                     </div>
 
                     <!-- Internet -->
-                    <div class="flex flex-col items-center justify-center gap-1">
+                    <div class="flex flex-col items-center justify-center gap-2">
                         <div
-                            class="w-10 h-10 rounded-full border-2 border-blue-400 flex items-center justify-center bg-blue-400/10">
-                            <i data-lucide="globe" class="w-5 h-5 text-blue-400"></i>
+                            class="w-14 h-14 rounded-full border-2 border-blue-400 flex items-center justify-center bg-blue-400/10">
+                            <i data-lucide="globe" class="w-6 h-6 text-blue-400"></i>
                         </div>
-                        <span class="uppercase opacity-60 text-blue-400 text-[8px]">Net</span>
+                        <span class="uppercase opacity-60 text-blue-400 text-[10px]">Internet</span>
                     </div>
                 </div>
 
-                <!-- Status message -->
-                <div id="chainStatus" class="mt-3 text-[9px] text-center opacity-50 text-[#00ff41] uppercase">
+                <!-- Chain Status -->
+                <div id="chainStatus"
+                    class="mt-4 text-sm text-center py-2 px-4 bg-[#0a0a0a] border border-[#00ff41]/20 text-[#00ff41] uppercase">
                     No proxy configured
                 </div>
             </div>
 
+            <!-- Fallback Proxy Configuration (Expanded) -->
+            <div id="fallbackSection"
+                class="flex flex-col bg-black border border-[#00ff41]/30 overflow-hidden font-mono">
+                <div
+                    class="bg-[#111] px-5 py-3 border-b border-[#00ff41]/10 flex justify-between items-center shrink-0">
+                    <span
+                        class="text-[11px] uppercase font-bold tracking-[0.3em] flex items-center gap-2 text-[#00ff41]">
+                        <i data-lucide="git-branch" class="w-4 h-4"></i> Fallback_Proxy_Settings
+                    </span>
+                    <div class="flex items-center gap-4">
+                        <!-- Enable/Disable Toggle -->
+                        <label class="flex items-center gap-3 cursor-pointer">
+                            <span id="fallbackToggleLabel"
+                                class="text-[11px] opacity-50 uppercase text-[#00ff41]">OFF</span>
+                            <div class="relative">
+                                <input type="checkbox" id="fallbackToggle" class="sr-only peer">
+                                <div
+                                    class="w-10 h-5 bg-[#1a1a1a] border border-[#00ff41]/20 rounded-full peer-checked:bg-[#00ff41]/20 peer-checked:border-[#00ff41]/50 transition-all">
+                                </div>
+                                <div
+                                    class="absolute left-0.5 top-0.5 w-4 h-4 bg-[#00ff41]/30 rounded-full peer-checked:translate-x-5 peer-checked:bg-[#00ff41] transition-all">
+                                </div>
+                            </div>
+                        </label>
+                        <button id="saveFallbackBtn"
+                            class="text-[11px] opacity-50 hover:opacity-100 hover:text-[#00ff41] transition-opacity uppercase px-3 py-1 border border-[#00ff41]/20 hover:border-[#00ff41]/50">Save</button>
+                    </div>
+                </div>
+
+                <div class="p-4 space-y-4">
+                    <!-- Host/Port inputs -->
+                    <div class="grid grid-cols-3 gap-3">
+                        <div class="col-span-2">
+                            <label class="text-[11px] opacity-50 uppercase text-[#00ff41] block mb-1">Host</label>
+                            <input type="text" id="fallbackHost" placeholder="192.168.50.111"
+                                class="w-full bg-[#0a0a0a] border border-[#00ff41]/20 p-3 text-sm text-[#00ff41] focus:outline-none focus:border-[#00ff41]/50 placeholder:text-[#00ff41]/20" />
+                        </div>
+                        <div>
+                            <label class="text-[11px] opacity-50 uppercase text-[#00ff41] block mb-1">Port</label>
+                            <input type="number" id="fallbackPort" placeholder="8080"
+                                class="w-full bg-[#0a0a0a] border border-[#00ff41]/20 p-3 text-sm text-[#00ff41] focus:outline-none focus:border-[#00ff41]/50 placeholder:text-[#00ff41]/20" />
+                        </div>
+                    </div>
+
+                    <!-- Info -->
+                    <div class="text-[11px] opacity-50 text-[#00ff41] flex items-start gap-2">
+                        <i data-lucide="info" class="w-4 h-4 shrink-0 mt-0.5"></i>
+                        <span>URLTest auto-selects fastest proxy. Re-apply subscription after changes.</span>
+                    </div>
+
+                    <!-- Status -->
+                    <div id="fallbackStatus" class="text-sm text-[#00ff41]/50 uppercase hidden"></div>
+                </div>
+            </div>
+
             <!-- Connection Settings -->
             <div class="bg-black border border-[#00ff41]/20 p-4 font-mono">
                 <div
-                    class="text-[9px] uppercase font-bold tracking-[0.3em] text-[#00ff41] mb-3 flex items-center gap-2">
-                    <i data-lucide="plug" class="w-3 h-3"></i> Connection_Settings
+                    class="text-[11px] uppercase font-bold tracking-[0.3em] text-[#00ff41] mb-3 flex items-center gap-2">
+                    <i data-lucide="plug" class="w-4 h-4"></i> Connection_Settings
                 </div>
 
                 <div class="grid grid-cols-1 gap-2">
                     <!-- HTTP Proxy -->
-                    <div class="flex items-center gap-2 p-2 bg-[#0a0a0a] border border-[#00ff41]/10">
-                        <span class="text-[8px] uppercase opacity-50 text-[#00ff41] w-12">HTTP</span>
+                    <div class="flex items-center gap-3 p-3 bg-[#0a0a0a] border border-[#00ff41]/10">
+                        <span class="text-[11px] uppercase opacity-50 text-[#00ff41] w-16">HTTP</span>
                         <input type="text" id="httpProxyUrl" readonly value="Loading..."
-                            class="flex-grow bg-transparent text-[10px] text-[#00ff41]/70 focus:outline-none cursor-pointer font-mono"
+                            class="flex-grow bg-transparent text-sm text-[#00ff41]/80 focus:outline-none cursor-pointer font-mono"
                             title="Click to copy" />
                         <button onclick="copyToClipboard('httpProxyUrl', this)"
-                            class="text-[8px] text-[#00ff41]/50 hover:text-[#00ff41] transition-colors uppercase">
+                            class="text-[10px] text-[#00ff41]/50 hover:text-[#00ff41] transition-colors uppercase px-2 py-1 border border-[#00ff41]/20">
                             Copy
                         </button>
                     </div>
 
                     <!-- SOCKS5 Proxy -->
-                    <div class="flex items-center gap-2 p-2 bg-[#0a0a0a] border border-[#00ff41]/10">
-                        <span class="text-[8px] uppercase opacity-50 text-[#00ff41] w-12">SOCKS5</span>
+                    <div class="flex items-center gap-3 p-3 bg-[#0a0a0a] border border-[#00ff41]/10">
+                        <span class="text-[11px] uppercase opacity-50 text-[#00ff41] w-16">SOCKS5</span>
                         <input type="text" id="socks5ProxyUrl" readonly value="Loading..."
-                            class="flex-grow bg-transparent text-[10px] text-[#00ff41]/70 focus:outline-none cursor-pointer font-mono"
+                            class="flex-grow bg-transparent text-sm text-[#00ff41]/80 focus:outline-none cursor-pointer font-mono"
                             title="Click to copy" />
                         <button onclick="copyToClipboard('socks5ProxyUrl', this)"
-                            class="text-[8px] text-[#00ff41]/50 hover:text-[#00ff41] transition-colors uppercase">
+                            class="text-[10px] text-[#00ff41]/50 hover:text-[#00ff41] transition-colors uppercase px-2 py-1 border border-[#00ff41]/20">
                             Copy
                         </button>
                     </div>
                 </div>
 
-                <div class="mt-2 text-[8px] opacity-30 text-[#00ff41]">
-                    <i data-lucide="info" class="w-3 h-3 inline"></i>
+                <div class="mt-2 text-[11px] opacity-40 text-[#00ff41] flex items-center gap-2">
+                    <i data-lucide="info" class="w-3 h-3"></i>
                     Use these URLs in browser/app proxy settings
                 </div>
             </div>
+        </div>
 
-            <!-- Fallback Proxy Configuration -->
-            <div id="fallbackSection"
-                class="flex flex-col bg-black border border-[#00ff41]/20 overflow-hidden font-mono transition-opacity">
-                <div
-                    class="bg-[#111] px-4 py-2 border-b border-[#00ff41]/10 flex justify-between items-center shrink-0">
-                    <span
-                        class="text-[9px] uppercase font-bold tracking-[0.3em] flex items-center gap-2 text-[#00ff41]">
-                        <i data-lucide="git-branch" class="w-3 h-3"></i> Fallback_Proxy
-                    </span>
-                    <div class="flex items-center gap-3">
-                        <!-- Enable/Disable Toggle -->
-                        <label class="flex items-center gap-2 cursor-pointer">
-                            <span id="fallbackToggleLabel"
-                                class="text-[8px] opacity-50 uppercase text-[#00ff41]">OFF</span>
-                            <div class="relative">
-                                <input type="checkbox" id="fallbackToggle" class="sr-only peer">
-                                <div
-                                    class="w-8 h-4 bg-[#1a1a1a] border border-[#00ff41]/20 rounded-full peer-checked:bg-[#00ff41]/20 peer-checked:border-[#00ff41]/50 transition-all">
-                                </div>
-                                <div
-                                    class="absolute left-0.5 top-0.5 w-3 h-3 bg-[#00ff41]/30 rounded-full peer-checked:translate-x-4 peer-checked:bg-[#00ff41] transition-all">
-                                </div>
-                            </div>
-                        </label>
-                        <button id="saveFallbackBtn"
-                            class="text-[8px] opacity-30 hover:opacity-100 hover:text-[#00ff41] transition-opacity uppercase">Save</button>
+        <!-- Right Column: Subscription & Servers -->
+        <div class="lg:col-span-5 flex flex-col gap-4">
+
+            <!-- Subscription Input -->
+            <div class="flex flex-col gap-2 p-4 bg-[#0a0a0a] border border-[#00ff41]/30 relative">
+                <label class="text-[11px] uppercase tracking-widest opacity-50 text-[#00ff41]">Subscription_URL</label>
+                <div class="flex gap-2">
+                    <div class="relative flex-grow">
+                        <i data-lucide="link"
+                            class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[#00ff41]/40"></i>
+                        <!-- Hidden full URL input -->
+                        <input type="hidden" id="subUrlFull" />
+                        <!-- Masked display input -->
+                        <input type="text" id="subUrlInput" placeholder="https://provider.com/..."
+                            class="w-full bg-black border border-[#00ff41]/20 py-2.5 pl-10 pr-10 text-sm tracking-wider focus:outline-none focus:border-[#00ff41] transition-all placeholder:text-[#00ff41]/20 text-[#00ff41]" />
+                        <!-- Toggle visibility -->
+                        <button id="toggleUrlVisibility" type="button"
+                            class="absolute right-3 top-1/2 -translate-y-1/2 text-[#00ff41]/40 hover:text-[#00ff41] transition-colors"
+                            title="Show/Hide full URL">
+                            <i data-lucide="eye-off" class="w-4 h-4" id="urlEyeIcon"></i>
+                        </button>
                     </div>
+                    <button id="fetchServersBtn"
+                        class="flex items-center justify-center gap-2 bg-[#00ff41] text-black px-4 py-2.5 text-xs font-black uppercase tracking-widest hover:bg-white hover:shadow-[0_0_15px_rgba(0,255,65,0.4)] transition-all disabled:opacity-50 disabled:cursor-not-allowed">
+                        <i data-lucide="download" class="w-4 h-4" id="fetchIcon"></i>
+                        <span id="fetchText">Sync</span>
+                    </button>
+                </div>
+            </div>
+
+            <!-- Server List as Cards -->
+            <div class="flex flex-col bg-[#0a0a0a]/50 border border-[#00ff41]/10 overflow-hidden">
+                <div class="px-4 py-2 border-b border-[#00ff41]/10 bg-black flex justify-between items-center shrink-0">
+                    <span class="text-[11px] uppercase tracking-[0.2em] font-bold text-[#00ff41]">Servers</span>
+                    <span id="serverCount" class="text-[10px] opacity-40 text-[#00ff41]">0 endpoints</span>
                 </div>
 
-                <div class="p-3 space-y-3">
-                    <!-- Host/Port inputs -->
-                    <div class="grid grid-cols-3 gap-2">
-                        <div class="col-span-2">
-                            <label class="text-[8px] opacity-40 uppercase text-[#00ff41] block mb-1">Host</label>
-                            <input type="text" id="fallbackHost" placeholder="192.168.50.111"
-                                class="w-full bg-[#0a0a0a] border border-[#00ff41]/10 p-2 text-[10px] text-[#00ff41]/80 focus:outline-none focus:border-[#00ff41]/30" />
-                        </div>
-                        <div>
-                            <label class="text-[8px] opacity-40 uppercase text-[#00ff41] block mb-1">Port</label>
-                            <input type="number" id="fallbackPort" placeholder="8080"
-                                class="w-full bg-[#0a0a0a] border border-[#00ff41]/10 p-2 text-[10px] text-[#00ff41]/80 focus:outline-none focus:border-[#00ff41]/30" />
-                        </div>
+                <div id="serverListContainer"
+                    class="overflow-y-auto custom-scrollbar p-3 grid grid-cols-3 gap-2 max-h-[280px]">
+                    <!-- Cards populated by JS -->
+                    <div class="col-span-3 text-center py-6 text-[#00ff41]/30 text-xs uppercase">
+                        No_Data // Awaiting_Sync
                     </div>
-
-                    <!-- Info -->
-                    <div class="text-[8px] opacity-40 text-[#00ff41]">
-                        <i data-lucide="info" class="w-3 h-3 inline"></i>
-                        URLTest auto-selects fastest proxy. Re-apply subscription after changes.
-                    </div>
-
-                    <!-- Status -->
-                    <div id="fallbackStatus" class="text-[9px] text-[#00ff41]/50 uppercase hidden"></div>
                 </div>
             </div>
 
             <!-- Terminal Logs -->
             <div
-                class="flex-grow flex flex-col bg-black border border-[#00ff41]/20 overflow-hidden font-mono h-[200px] lg:h-[250px]">
+                class="flex-grow flex flex-col bg-black border border-[#00ff41]/20 overflow-hidden font-mono min-h-[180px]">
                 <div
                     class="bg-[#111] px-4 py-2 border-b border-[#00ff41]/10 flex justify-between items-center shrink-0">
                     <span
-                        class="text-[9px] uppercase font-bold tracking-[0.3em] flex items-center gap-2 text-[#00ff41]">
-                        <div class="w-1 h-1 bg-[#00ff41] rounded-full animate-ping"></div> Connection_Logs
+                        class="text-[11px] uppercase font-bold tracking-[0.3em] flex items-center gap-2 text-[#00ff41]">
+                        <div class="w-1.5 h-1.5 bg-[#00ff41] rounded-full animate-ping"></div> Logs
                     </span>
                     <button id="clearLogs"
-                        class="text-[8px] opacity-30 hover:opacity-100 hover:text-[#00ff41] transition-opacity uppercase">Clear</button>
+                        class="text-[10px] opacity-30 hover:opacity-100 hover:text-[#00ff41] transition-opacity uppercase">Clear</button>
                 </div>
 
                 <div id="logsContainer"
-                    class="flex-grow p-4 overflow-y-auto custom-scrollbar text-[10px] space-y-1.5 opacity-80 font-mono">
-                    <!-- Logs populated by JS -->
+                    class="flex-grow p-3 overflow-y-auto custom-scrollbar text-[11px] space-y-1 opacity-80 font-mono">
                     <div class="flex gap-2">
                         <span class="opacity-20 text-[#00ff41]">[SYSTEM]</span>
                         <span class="text-[#00ff41] animate-pulse">_</span>
@@ -441,7 +453,7 @@
     <!-- Footer -->
     <footer class="z-30 bg-[#0d0d0d] border-t border-[#00ff41]/10 py-2 mt-auto">
         <div
-            class="max-w-[1400px] mx-auto px-6 flex justify-between items-center text-[9px] uppercase tracking-[0.2em] opacity-40 text-[#00ff41]">
+            class="max-w-[1400px] mx-auto px-6 flex justify-between items-center text-[10px] uppercase tracking-[0.2em] opacity-40 text-[#00ff41]">
             <div class="flex gap-6">
                 <span>Core: 4.1.0-Release</span>
                 <span>Proxy: HTTP/8080</span>
@@ -467,29 +479,34 @@
             isConnecting: false,
             subscriptionUrl: '',
             sessionId: Math.random().toString(16).substr(2, 8).toUpperCase(),
-            userInfo: null
+            userInfo: null,
+            proxyEnabled: true,
+            urlVisible: false,
+            serverStartTime: 0,
+            uptimeInterval: null
         };
 
         // --- DOM Elements ---
         const els = {
             subUrlInput: document.getElementById('subUrlInput'),
+            subUrlFull: document.getElementById('subUrlFull'),
+            toggleUrlVisibility: document.getElementById('toggleUrlVisibility'),
+            urlEyeIcon: document.getElementById('urlEyeIcon'),
             fetchServersBtn: document.getElementById('fetchServersBtn'),
             fetchIcon: document.getElementById('fetchIcon'),
             fetchText: document.getElementById('fetchText'),
-            serverListBody: document.getElementById('serverListBody'),
-            statusBox: document.getElementById('statusBox'),
-            statusIconContainer: document.getElementById('statusIconContainer'),
-            statusTitle: document.getElementById('statusTitle'),
-            statusSubtitle: document.getElementById('statusSubtitle'),
-            connectionDetails: document.getElementById('connectionDetails'),
-            speedValue: document.getElementById('speedValue'),
-            ipValue: document.getElementById('ipValue'),
+            serverListContainer: document.getElementById('serverListContainer'),
+            serverCount: document.getElementById('serverCount'),
             logsContainer: document.getElementById('logsContainer'),
             clearLogs: document.getElementById('clearLogs'),
             headerStatus: document.getElementById('headerStatus'),
             sessionId: document.getElementById('sessionId'),
             trafficValue: document.getElementById('trafficValue'),
-            testSpeedBtn: document.getElementById('testSpeedBtn'),
+            // Master toggle
+            masterProxyToggle: document.getElementById('masterProxyToggle'),
+            proxyModeLabel: document.getElementById('proxyModeLabel'),
+            proxyModeSubtitle: document.getElementById('proxyModeSubtitle'),
+            currentIpDisplay: document.getElementById('currentIpDisplay'),
             // Fallback Proxy elements
             fallbackToggle: document.getElementById('fallbackToggle'),
             fallbackToggleLabel: document.getElementById('fallbackToggleLabel'),
@@ -501,14 +518,20 @@
             chainFallbackRow: document.getElementById('chainFallbackRow'),
             chainFallbackBox: document.getElementById('chainFallbackBox'),
             chainFallbackLabel: document.getElementById('chainFallbackLabel'),
+            chainFallbackLatency: document.getElementById('chainFallbackLatency'),
             chainFallbackX: document.getElementById('chainFallbackX'),
+            chainVPNRow: document.getElementById('chainVPNRow'),
             chainVPNBox: document.getElementById('chainVPNBox'),
             chainVPNLabel: document.getElementById('chainVPNLabel'),
+            chainVPNLatency: document.getElementById('chainVPNLatency'),
             chainVPNX: document.getElementById('chainVPNX'),
+            chainDirectRow: document.getElementById('chainDirectRow'),
             chainStatus: document.getElementById('chainStatus'),
             // Connection settings
             httpProxyUrl: document.getElementById('httpProxyUrl'),
-            socks5ProxyUrl: document.getElementById('socks5ProxyUrl')
+            socks5ProxyUrl: document.getElementById('socks5ProxyUrl'),
+            // Uptime
+            uptimeDisplay: document.getElementById('uptimeDisplay')
         };
 
         els.sessionId.textContent = state.sessionId;
@@ -523,6 +546,89 @@
             return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
         }
 
+        function maskUrl(url) {
+            if (!url) return '';
+            try {
+                const parsed = new URL(url);
+                return `${parsed.hostname}/...`;
+            } catch {
+                return url.length > 30 ? url.substring(0, 30) + '...' : url;
+            }
+        }
+
+        function formatUptime(seconds) {
+            const h = Math.floor(seconds / 3600);
+            const m = Math.floor((seconds % 3600) / 60);
+            const s = seconds % 60;
+            return `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
+        }
+
+        function startUptimeTimer() {
+            if (state.uptimeInterval) clearInterval(state.uptimeInterval);
+            if (!state.serverStartTime || state.serverStartTime <= 0) {
+                els.uptimeDisplay.textContent = '00:00:00';
+                return;
+            }
+
+            // Adjust local offset if needed, but simple diff is usually enough
+            const update = () => {
+                const now = Date.now() / 1000;
+                const elapsed = Math.floor(now - state.serverStartTime);
+                if (elapsed >= 0) {
+                    els.uptimeDisplay.textContent = formatUptime(elapsed);
+                }
+            };
+
+            update();
+            state.uptimeInterval = setInterval(update, 1000);
+        }
+
+        function stopUptimeTimer() {
+            if (state.uptimeInterval) {
+                clearInterval(state.uptimeInterval);
+                state.uptimeInterval = null;
+            }
+            els.uptimeDisplay.textContent = '00:00:00';
+        }
+
+        // --- URL Visibility Toggle ---
+        els.toggleUrlVisibility.addEventListener('click', () => {
+            state.urlVisible = !state.urlVisible;
+            updateUrlDisplay();
+        });
+
+        function updateUrlDisplay() {
+            const fullUrl = els.subUrlFull.value || state.subscriptionUrl;
+            if (state.urlVisible) {
+                els.subUrlInput.value = fullUrl;
+                els.urlEyeIcon.setAttribute('data-lucide', 'eye');
+            } else {
+                els.subUrlInput.value = maskUrl(fullUrl);
+                els.urlEyeIcon.setAttribute('data-lucide', 'eye-off');
+            }
+            lucide.createIcons();
+        }
+
+        els.subUrlInput.addEventListener('input', () => {
+            // When user types, store full URL
+            els.subUrlFull.value = els.subUrlInput.value;
+            state.subscriptionUrl = els.subUrlInput.value;
+        });
+
+        els.subUrlInput.addEventListener('blur', () => {
+            // On blur, mask if not visible
+            if (!state.urlVisible && els.subUrlFull.value) {
+                els.subUrlInput.value = maskUrl(els.subUrlFull.value);
+            }
+        });
+
+        els.subUrlInput.addEventListener('focus', () => {
+            // On focus, show full for editing
+            if (els.subUrlFull.value) {
+                els.subUrlInput.value = els.subUrlFull.value;
+            }
+        });
+
         // --- Logger ---
         function addLog(msg, type = 'info') {
             const time = new Date().toLocaleTimeString('ru-RU', { hour12: false });
@@ -569,101 +675,77 @@
             const lastChild = els.logsContainer.lastElementChild;
             els.logsContainer.innerHTML = '';
             els.logsContainer.appendChild(lastChild);
-            addLog('LOGS_CLEARED_BY_USER', 'info');
+            addLog('LOGS_CLEARED', 'info');
         });
 
-
         // --- UI Rendering ---
         function renderNodes() {
-            els.serverListBody.innerHTML = '';
+            els.serverListContainer.innerHTML = '';
+
             if (state.nodes.length === 0) {
-                els.serverListBody.innerHTML = `
-                    <tr class="text-[#00ff41]/30">
-                        <td colspan="4" class="p-8 text-center text-xs uppercase tracking-widest">
-                            No_Nodes_Found // Sync_Required
-                        </td>
-                    </tr>`;
+                els.serverListContainer.innerHTML = `
+                    <div class="col-span-3 text-center py-6 text-[#00ff41]/30 text-xs uppercase">
+                        No_Data // Awaiting_Sync
+                    </div>`;
+                els.serverCount.textContent = '0 endpoints';
                 return;
             }
 
+            els.serverCount.textContent = `${state.nodes.length} endpoints`;
+
             state.nodes.forEach((node, index) => {
                 const isActive = state.activeNode && state.activeNode.tag === node.tag;
-                const tr = document.createElement('tr');
-                tr.className = `group cursor-pointer transition-all border-b border-[#00ff41]/5 hover:bg-[#00ff41]/5 ${isActive ? 'bg-[#00ff41]/10' : ''}`;
-                tr.onclick = () => handleConnect(node);
+                const card = document.createElement('div');
+                card.className = `server-card cursor-pointer p-2 bg-black border border-[#00ff41]/20 hover:border-[#00ff41]/50 ${isActive ? 'active' : ''}`;
+                card.onclick = () => handleConnect(node);
 
-                tr.innerHTML = `
-                    <td class="p-4 w-12">
-                        <div class="w-2 h-2 rounded-full bg-[#00ff41] ${isActive ? 'animate-ping' : ''}"></div>
-                    </td>
-                    <td class="p-4">
-                        <div class="flex items-center gap-3">
-                            <div class="flex flex-col">
-                                <span class="text-xs font-bold text-white uppercase tracking-wider">${node.tag}</span>
-                                <span class="text-[9px] opacity-40 uppercase text-[#00ff41]">${node.type} // ${node.server}:${node.port}</span>
-                            </div>
-                        </div>
-                    </td>
-                    <td class="p-4">
-                         <div class="flex flex-col items-start">
-                             <span class="text-[9px] opacity-40 uppercase text-[#00ff41]/50">Ping</span>
-                             <span id="ping-${index}" class="text-xs font-mono text-[#00ff41]">--</span>
-                         </div>
-                    </td>
-                    <td class="p-4 text-right">
-                        ${isActive
-                        ? '<span class="text-[10px] font-black animate-pulse text-white">[ CONNECTED ]</span>'
-                        : '<i data-lucide="chevron-right" class="w-4 h-4 text-[#00ff41] opacity-10 group-hover:opacity-100 group-hover:translate-x-1 transition-all inline-block"></i>'
-                    }
-                    </td>
+                card.innerHTML = `
+                    <div class="flex items-center gap-1.5 mb-1">
+                        <div class="w-1.5 h-1.5 rounded-full ${isActive ? 'bg-[#00ff41] animate-pulse' : 'bg-[#00ff41]/30'}"></div>
+                        <span class="text-[10px] font-bold text-white uppercase truncate">${node.tag}</span>
+                    </div>
+                    <div class="text-[9px] opacity-40 text-[#00ff41] truncate">${node.type}</div>
+                    <div id="ping-${index}" class="text-[10px] font-mono text-[#00ff41]/70 mt-1">--</div>
                 `;
-                els.serverListBody.appendChild(tr);
+                els.serverListContainer.appendChild(card);
             });
             lucide.createIcons();
         }
 
-        function updateStatusUI() {
-            if (state.activeNode) {
-                // Active Styling
-                els.statusBox.classList.remove('border-[#00ff41]/10', 'bg-black/40');
-                els.statusBox.classList.add('border-[#00ff41]', 'bg-[#00ff41]/5', 'shadow-[inset_0_0_20px_rgba(0,255,65,0.05)]');
+        function updateMasterToggleUI() {
+            if (state.proxyEnabled) {
+                els.proxyModeLabel.textContent = 'VPN_MODE';
+                els.proxyModeLabel.classList.remove('text-yellow-500');
+                els.proxyModeLabel.classList.add('text-[#00ff41]');
+                els.proxyModeSubtitle.textContent = 'Traffic routed via proxy';
+                els.headerStatus.textContent = state.activeNode ? 'TUNNEL_UP' : 'STANDBY';
 
-                // Icon
-                if (state.isConnecting) {
-                    els.statusIconContainer.innerHTML = '<i data-lucide="refresh-cw" class="w-6 h-6 text-[#00ff41] animate-spin"></i>';
-                    els.statusTitle.textContent = 'HANDSHAKE';
-                    els.statusSubtitle.textContent = 'Negotiating keys...';
-                    els.headerStatus.textContent = 'NEGOTIATING';
-                } else {
-                    els.statusIconContainer.innerHTML = '<i data-lucide="shield-check" class="w-6 h-6 text-[#00ff41]"></i>';
-                    els.statusIconContainer.classList.add('shadow-[0_0_15px_#00ff4166]', 'border-[#00ff41]');
-                    els.statusTitle.textContent = 'ENCRYPTED';
-                    els.statusTitle.classList.remove('text-[#00ff41]/50');
-                    els.statusTitle.classList.add('text-[#00ff41]');
-                    els.statusSubtitle.textContent = `${state.activeNode.tag} // SECURE`;
-                    els.connectionDetails.classList.remove('opacity-0');
-                    els.headerStatus.textContent = 'TUNNEL_UP';
-                    els.headerStatus.classList.add('text-[#00ff41]');
+                // Show VPN row, hide direct
+                els.chainVPNRow.classList.remove('hidden');
+                els.chainDirectRow.classList.add('hidden');
+
+                // Start uptime if connected
+                if (state.activeNode && !state.uptimeInterval) {
+                    startUptimeTimer();
                 }
             } else {
-                // Inactive Styling
-                els.statusBox.classList.add('border-[#00ff41]/10', 'bg-black/40');
-                els.statusBox.classList.remove('border-[#00ff41]', 'bg-[#00ff41]/5', 'shadow-[inset_0_0_20px_rgba(0,255,65,0.05)]');
+                els.proxyModeLabel.textContent = 'DIRECT_MODE';
+                els.proxyModeLabel.classList.remove('text-[#00ff41]');
+                els.proxyModeLabel.classList.add('text-yellow-500');
+                els.proxyModeSubtitle.textContent = 'Bypass proxy — direct connection';
+                els.headerStatus.textContent = 'DIRECT';
 
-                els.statusIconContainer.innerHTML = '<i data-lucide="shield-alert" class="w-6 h-6 text-[#00ff41]/50"></i>';
-                els.statusIconContainer.classList.remove('shadow-[0_0_15px_#00ff4166]', 'border-[#00ff41]');
-                els.statusTitle.textContent = 'NO_SIGNAL';
-                els.statusTitle.classList.add('text-[#00ff41]/50');
-                els.statusTitle.classList.remove('text-[#00ff41]');
-                els.statusSubtitle.textContent = 'Link not initialized';
-                els.connectionDetails.classList.add('opacity-0');
-                els.headerStatus.textContent = 'STANDBY';
-                els.headerStatus.classList.remove('text-[#00ff41]');
+                // Hide VPN/Fallback, show direct
+                els.chainVPNRow.classList.add('hidden');
+                els.chainFallbackRow.classList.add('hidden');
+                els.chainDirectRow.classList.remove('hidden');
 
-                // Reset stats
-                els.speedValue.textContent = '-- Mb/s';
-                els.ipValue.textContent = 'HIDDEN';
+                els.chainStatus.innerHTML = `<span class="text-yellow-400">●</span> Direct connection active`;
+
+                // Stop uptime timer
+                stopUptimeTimer();
             }
+
             lucide.createIcons();
         }
 
@@ -689,9 +771,9 @@
                     if (pingEl) {
                         if (data.latency && data.latency !== -1) {
                             pingEl.textContent = data.latency + 'ms';
-                            if (data.latency > 300) pingEl.style.color = 'rgb(239, 68, 68)'; // red
-                            else if (data.latency < 100) pingEl.style.color = '#00ff41'; // green
-                            else pingEl.style.color = 'rgb(234, 179, 8)'; // yellow
+                            if (data.latency > 300) pingEl.style.color = 'rgb(239, 68, 68)';
+                            else if (data.latency < 100) pingEl.style.color = '#00ff41';
+                            else pingEl.style.color = 'rgb(234, 179, 8)';
                         } else {
                             pingEl.textContent = 'Timeout';
                             pingEl.style.color = 'rgb(239, 68, 68)';
@@ -704,45 +786,72 @@
         }
 
         async function checkConnectionSpeed(fullTest = false) {
-            if (fullTest) els.speedValue.textContent = 'TESTING...';
-            else els.speedValue.textContent = 'PAUSED';
-
-            els.ipValue.textContent = '...';
+            els.currentIpDisplay.textContent = '...';
 
             try {
                 const res = await fetch(`/test-connection?speed=${fullTest}`);
                 const data = await res.json();
 
                 if (data.error) {
-                    els.ipValue.textContent = 'ERROR';
-                    if (fullTest) els.speedValue.textContent = 'ERROR';
+                    els.currentIpDisplay.textContent = 'ERROR';
                 } else {
-                    els.ipValue.textContent = data.ip;
-                    if (data.speed) {
-                        els.speedValue.textContent = data.speed;
-                    }
+                    els.currentIpDisplay.textContent = data.ip || '---.---.---.---';
                 }
             } catch (e) {
-                if (fullTest) els.speedValue.textContent = 'NET_ERR';
+                els.currentIpDisplay.textContent = 'NET_ERR';
             }
         }
 
+        // --- Master Proxy Toggle ---
+        els.masterProxyToggle.addEventListener('change', async () => {
+            state.proxyEnabled = els.masterProxyToggle.checked;
+            updateMasterToggleUI();
+
+            addLog(state.proxyEnabled ? 'PROXY_ENABLED' : 'PROXY_DISABLED_DIRECT_MODE', state.proxyEnabled ? 'success' : 'warning');
+
+            try {
+                const res = await fetch('/proxy-enabled', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ enabled: state.proxyEnabled })
+                });
+                const data = await res.json();
+                if (data.success) {
+                    addLog('CONFIG_APPLIED', 'success');
+
+                    // Force fetch new status to get correct fallback/uptime state
+                    setTimeout(async () => {
+                        await fetchStatus();
+                        checkConnectionSpeed(false);
+                    }, 500);
+                }
+            } catch (e) {
+                addLog('TOGGLE_FAILED: ' + e.message, 'error');
+            }
+
+            updateProxyChain();
+        });
 
         // --- Actions ---
-
         async function handleFetchNodes() {
-            const url = els.subUrlInput.value.trim();
-            if (!url) {
-                addLog('ERROR_MISSING_URL_INPUT', 'error');
+            // Get the actual URL (from hidden field or input)
+            let url = els.subUrlFull.value || els.subUrlInput.value;
+            url = url.trim();
+
+            if (!url || url.endsWith('/...')) {
+                addLog('ERROR_MISSING_URL', 'error');
                 return;
             }
 
+            state.subscriptionUrl = url;
+            els.subUrlFull.value = url;
+
             state.isFetching = true;
             els.fetchIcon.classList.add('hidden');
             els.fetchText.innerHTML = '<i data-lucide="refresh-cw" class="w-4 h-4 animate-spin"></i>';
             lucide.createIcons();
 
-            addLog(`FETCHING_CONFIG: ${url.substring(0, 25)}...`, 'info');
+            addLog(`FETCHING: ${maskUrl(url)}`, 'info');
 
             try {
                 const res = await fetch('/fetch-subscription', {
@@ -755,15 +864,14 @@
                 if (data.success && data.servers) {
                     state.nodes = data.servers;
                     state.config = data.config;
-                    state.subscriptionUrl = url;
                     state.userInfo = data.userInfo;
 
                     renderNodes();
                     updateTrafficUI(state.userInfo);
-                    addLog(`SYNC_COMPLETE: ${state.nodes.length} Endpoints Retrieved`, 'success');
+                    updateUrlDisplay();
+                    addLog(`SYNC_OK: ${state.nodes.length} endpoints`, 'success');
 
-                    // Trigger Ping Check
-                    addLog('INITIATING_LATENCY_CHECK...', 'info');
+                    addLog('CHECKING_LATENCY...', 'info');
                     checkServerLatencies(state.nodes);
 
                 } else {
@@ -780,16 +888,20 @@
         }
 
         async function handleConnect(node) {
+            if (!state.proxyEnabled) {
+                addLog('ENABLE_PROXY_FIRST', 'warning');
+                return;
+            }
+
             if (state.activeNode && state.activeNode.tag === node.tag && !state.isConnecting) {
                 return;
             }
 
             state.activeNode = node;
             state.isConnecting = true;
-            updateStatusUI();
-            renderNodes(); // to update active styling
+            renderNodes();
 
-            addLog(`INITIATING_HANDSHAKE: ${node.tag}`, 'warning');
+            addLog(`CONNECTING: ${node.tag}`, 'warning');
 
             try {
                 const res = await fetch('/apply-subscription', {
@@ -799,31 +911,39 @@
                         config: state.config,
                         selectedServer: node.tag,
                         subUrl: state.subscriptionUrl,
-                        userInfo: state.userInfo // save user info if needed
+                        userInfo: state.userInfo
                     })
                 });
                 const data = await res.json();
 
                 if (data.success) {
-                    setTimeout(() => {
+                    setTimeout(async () => {
                         state.isConnecting = false;
-                        updateStatusUI();
-                        addLog(`ENCRYPTED_SESSION_ESTABLISHED_${node.tag.toUpperCase()}`, 'success');
+                        els.headerStatus.textContent = 'TUNNEL_UP';
+                        renderNodes();
+                        addLog(`CONNECTED: ${node.tag}`, 'success');
+
+                        // Wait for next status update to sync start time properly
+                        await fetchStatus();
+
+                        // Fallback: start timer optimistically if status didn't catch it yet
+                        if (!state.uptimeInterval) {
+                            state.serverStartTime = Date.now() / 1000;
+                            startUptimeTimer();
+                        }
 
-                        // Check IP but skip Speed Test
-                        addLog('VERIFYING_TUNNEL_IP...', 'info');
                         checkConnectionSpeed(false);
+                        updateProxyChain();
 
-                    }, 1000);
+                    }, 800);
                 } else {
                     throw new Error(data.error);
                 }
             } catch (e) {
                 state.isConnecting = false;
                 state.activeNode = null;
-                updateStatusUI();
                 renderNodes();
-                addLog(`HANDSHAKE_FAILED: ${e.message}`, 'error');
+                addLog(`CONNECT_FAILED: ${e.message}`, 'error');
             }
         }
 
@@ -832,17 +952,25 @@
                 const res = await fetch('/status');
                 const data = await res.json();
 
-                // Update proxy URLs with actual port
                 if (data.proxyPort) {
                     els.httpProxyUrl.value = `http://127.0.0.1:${data.proxyPort}`;
                     els.socks5ProxyUrl.value = `socks5://127.0.0.1:${data.proxyPort}`;
                 }
 
-                if (data.active && data.tag) {
+                if (data.proxyEnabled !== undefined) {
+                    state.proxyEnabled = data.proxyEnabled;
+                    els.masterProxyToggle.checked = state.proxyEnabled;
+                    updateMasterToggleUI();
+                }
+
+                if (data.startTime) {
+                    state.serverStartTime = data.startTime;
+                }
+
+                if (data.active && data.tag && state.proxyEnabled) {
                     const currentTag = state.activeNode ? state.activeNode.tag : null;
 
                     if (currentTag !== data.tag) {
-                        // Find full node info if available
                         const fullNode = state.nodes.find(n => n.tag === data.tag);
 
                         if (fullNode) {
@@ -851,14 +979,26 @@
                             state.activeNode = { tag: data.tag, server: data.server, port: '?', type: 'UNKNOWN' };
                         }
 
-                        updateStatusUI();
-                        renderNodes(); // Update list highlighting
+                        renderNodes();
+                        checkConnectionSpeed(false);
 
-                        if (els.speedValue.textContent === '-- Mb/s' || els.ipValue.textContent === 'HIDDEN') {
-                            checkConnectionSpeed(false);
-                        }
+                        // Restart timer with new server start time
+                        startUptimeTimer();
                     }
+
+                    // Ensure timer is running if active
+                    if (!state.uptimeInterval) startUptimeTimer();
+                } else if (!data.active && state.proxyEnabled) {
+                    // Proxy enabled but backend says not active/configured
+                    state.activeNode = null;
+                    renderNodes();
+                    stopUptimeTimer();
                 }
+
+                // Always update chain visualization
+                updateProxyChain();
+
+
             } catch (e) {
                 // ignore
             }
@@ -866,45 +1006,33 @@
 
         async function loadSaved() {
             try {
-                addLog('SYSTEM_BOOT_SEQUENCE_INITIATED...', 'info');
+                addLog('SYSTEM_BOOT...', 'info');
                 const res = await fetch('/subscription');
                 const data = await res.json();
 
                 if (data.saved && data.url) {
-                    els.subUrlInput.value = data.url;
+                    state.subscriptionUrl = data.url;
+                    els.subUrlFull.value = data.url;
+                    els.subUrlInput.value = maskUrl(data.url);
                     state.userInfo = data.userInfo;
                     updateTrafficUI(state.userInfo);
 
-                    // Auto-sync
                     await handleFetchNodes();
-
-                    if (data.selectedServer) {
-                        const savedNode = state.nodes.find(n => n.tag === data.selectedServer);
-                        if (savedNode) {
-                            // Will be handled by fetchStatus
-                        }
-                    }
                 } else {
-                    addLog('NO_SAVED_CONFIG_FOUND', 'warning');
+                    addLog('NO_SAVED_CONFIG', 'warning');
                 }
 
                 await fetchStatus();
 
             } catch (e) {
-                addLog('SYSTEM_BOOT_ERROR', 'error');
+                addLog('BOOT_ERROR', 'error');
             }
         }
 
         // --- Event Listeners ---
         els.fetchServersBtn.addEventListener('click', handleFetchNodes);
 
-        els.testSpeedBtn.addEventListener('click', () => {
-            addLog('MANUAL_SPEED_TEST_INITIATED', 'info');
-            checkConnectionSpeed(true);
-        });
-
         // --- Fallback Proxy Functions ---
-
         async function loadFallbackConfig() {
             try {
                 const res = await fetch('/fallback-config');
@@ -915,9 +1043,8 @@
                 els.fallbackPort.value = data.port || 8080;
 
                 updateFallbackUI(data.enabled || false);
-                addLog('FALLBACK_CONFIG_LOADED', 'info');
             } catch (e) {
-                addLog('FALLBACK_CONFIG_LOAD_FAILED', 'error');
+                addLog('FALLBACK_LOAD_FAILED', 'error');
             }
         }
 
@@ -934,7 +1061,7 @@
 
             if (enabled && !host) {
                 addLog('FALLBACK_HOST_REQUIRED', 'error');
-                showFallbackStatus('Host is required', 'error');
+                showFallbackStatus('Host required', 'error');
                 return;
             }
 
@@ -947,18 +1074,16 @@
                 const data = await res.json();
 
                 if (data.success) {
-                    addLog(enabled ? 'FALLBACK_ENABLED' : 'FALLBACK_DISABLED', 'success');
-                    const msg = data.regenerated ? 'Applied!' : 'Saved!';
-                    showFallbackStatus(msg, 'success');
+                    addLog(enabled ? 'FALLBACK_ON' : 'FALLBACK_OFF', 'success');
+                    showFallbackStatus('Applied!', 'success');
                     updateFallbackUI(enabled);
-                    // Refresh proxy chain visualization
                     updateProxyChain();
                 } else {
                     throw new Error(data.error);
                 }
             } catch (e) {
-                addLog(`FALLBACK_SAVE_FAILED: ${e.message}`, 'error');
-                showFallbackStatus('Save failed', 'error');
+                addLog(`FALLBACK_FAILED: ${e.message}`, 'error');
+                showFallbackStatus('Failed', 'error');
             }
         }
 
@@ -977,10 +1102,32 @@
 
         // --- Proxy Chain Visualization ---
         async function updateProxyChain() {
+            // Always update UI based on current state first for immediate feedback
+            if (!state.proxyEnabled) {
+                // Direct mode is handled by updateMasterToggleUI generally, 
+                // but we ensure clean slate here too if needed
+                return;
+            }
+
             try {
+                // If we are in VPN mode but no node selected (Standby)
+                if (!state.activeNode) {
+                    els.chainVPNLabel.textContent = 'VPN (Standby)';
+                    els.chainVPNLatency.textContent = '--ms';
+                    els.chainVPNBox.classList.remove('border-[#00ff41]', 'bg-[#00ff41]/20');
+                    els.chainVPNBox.classList.add('border-[#00ff41]/30', 'border-dashed');
+                    els.chainStatus.innerHTML = '<span class="text-orange-400">●</span> VPN Standby - Select Server';
+                    // Show X to indicate no connection through VPN yet
+                    els.chainVPNX.classList.remove('hidden');
+                    els.chainVPNX.classList.add('flex');
+                } else {
+                    els.chainVPNBox.classList.remove('border-dashed');
+                }
+
                 const res = await fetch('/active-proxy');
                 const data = await res.json();
 
+
                 // Reset all states
                 els.chainFallbackBox.classList.remove('border-[#00ff41]', 'bg-[#00ff41]/20');
                 els.chainFallbackBox.classList.add('border-[#00ff41]/30');
@@ -992,27 +1139,29 @@
                 els.chainVPNX.classList.remove('flex');
 
                 if (!data.configured) {
-                    els.chainStatus.textContent = 'No proxy configured';
+                    els.chainStatus.innerHTML = '<span class="text-orange-400">●</span> VPN Standby';
                     els.chainFallbackRow.classList.add('hidden');
-                    els.chainVPNLabel.textContent = 'VPN';
+                    els.chainVPNLabel.textContent = 'Select Server';
+                    // Visual cue for disconnected VPN
+                    els.chainVPNX.classList.remove('hidden');
+                    els.chainVPNX.classList.add('flex');
                     return;
                 }
 
                 // Update VPN label
                 els.chainVPNLabel.textContent = data.vpnTag || 'VPN';
+                els.chainVPNLatency.textContent = data.vpnLatency ? `${data.vpnLatency}ms` : '--ms';
 
                 if (data.fallbackEnabled) {
-                    // Show fallback branch
                     els.chainFallbackRow.classList.remove('hidden');
                     els.chainFallbackLabel.textContent = data.fallbackHost || 'Fallback';
+                    els.chainFallbackLatency.textContent = data.fallbackLatency ? `${data.fallbackLatency}ms` : '--ms';
 
                     if (data.fallbackReachable) {
-                        // Fallback is active (green border, no X)
                         els.chainFallbackBox.classList.remove('border-[#00ff41]/30');
                         els.chainFallbackBox.classList.add('border-[#00ff41]', 'bg-[#00ff41]/20');
                         els.chainStatus.innerHTML = `<span class="text-[#00ff41]">●</span> Fallback active (${data.fallbackLatency}ms)`;
                     } else {
-                        // Fallback unreachable - show X, VPN is active
                         els.chainFallbackX.classList.remove('hidden');
                         els.chainFallbackX.classList.add('flex');
                         els.chainVPNBox.classList.remove('border-[#00ff41]/30');
@@ -1020,14 +1169,12 @@
                         els.chainStatus.innerHTML = `<span class="text-yellow-400">●</span> VPN active (fallback down)`;
                     }
                 } else {
-                    // No fallback - hide fallback row, VPN is active
                     els.chainFallbackRow.classList.add('hidden');
                     els.chainVPNBox.classList.remove('border-[#00ff41]/30');
                     els.chainVPNBox.classList.add('border-[#00ff41]', 'bg-[#00ff41]/20');
                     els.chainStatus.innerHTML = `<span class="text-[#00ff41]">●</span> VPN direct`;
                 }
 
-                // Reinitialize lucide icons for new X elements
                 lucide.createIcons();
 
             } catch (e) {
@@ -1037,7 +1184,6 @@
 
         // Fallback Event Listeners
         els.saveFallbackBtn.addEventListener('click', saveFallbackConfig);
-
         els.fallbackToggle.addEventListener('change', saveFallbackConfig);
 
         // --- Init ---
diff --git a/web/server.py b/web/server.py
index 560e3bc..e385991 100644
--- a/web/server.py
+++ b/web/server.py
@@ -14,6 +14,8 @@ import urllib.error
 import uuid
 import socket
 import time
+import time
+from datetime import datetime, timezone
 from urllib.parse import parse_qs, unquote
 from pathlib import Path
 
@@ -27,7 +29,10 @@ DATA_DIR = BASE_DIR / "data"
 CONFIG_FILE = DATA_DIR / "client.json"
 HWID_FILE = DATA_DIR / "hwid"
 SUBSCRIPTION_FILE = DATA_DIR / "subscription.json"
+SUBSCRIPTION_FILE = DATA_DIR / "subscription.json"
 FALLBACK_FILE = DATA_DIR / "fallback.json"
+PROXY_ENABLED_FILE = DATA_DIR / "proxy_enabled.json"
+START_TIME_FILE = DATA_DIR / "start_time.json"
 
 # Default fallback proxy settings
 DEFAULT_FALLBACK = {
@@ -103,6 +108,40 @@ def load_fallback_config() -> dict:
     return DEFAULT_FALLBACK.copy()
 
 
+def save_proxy_enabled(enabled: bool):
+    """Save proxy enabled state to file"""
+    DATA_DIR.mkdir(parents=True, exist_ok=True)
+    PROXY_ENABLED_FILE.write_text(json.dumps({"enabled": enabled}))
+
+
+def load_proxy_enabled() -> bool:
+    """Load proxy enabled state from file"""
+    if PROXY_ENABLED_FILE.exists():
+        try:
+            data = json.loads(PROXY_ENABLED_FILE.read_text())
+            return data.get("enabled", True)
+        except json.JSONDecodeError:
+            pass
+    return True  # Default: proxy enabled
+
+
+def save_start_time(start_time: float):
+    """Save VPN start time to file"""
+    DATA_DIR.mkdir(parents=True, exist_ok=True)
+    START_TIME_FILE.write_text(json.dumps({"startTime": start_time}))
+
+
+def load_start_time() -> float:
+    """Load VPN start time from file"""
+    if START_TIME_FILE.exists():
+        try:
+            data = json.loads(START_TIME_FILE.read_text())
+            return data.get("startTime", 0.0)
+        except json.JSONDecodeError:
+            pass
+    return 0.0
+
+
 def measure_tcp_latency(host: str, port: int, timeout: float = 2.0) -> int:
     """Measure TCP latency to a host:port in milliseconds"""
     start_time = time.time()
@@ -372,6 +411,8 @@ class ProxyControlHandler(http.server.BaseHTTPRequestHandler):
             self.get_fallback_config()
         elif self.path == "/active-proxy":
             self.get_active_proxy()
+        elif self.path == "/proxy-enabled":
+            self.get_proxy_enabled()
         else:
             self.send_error(404)
 
@@ -387,6 +428,8 @@ class ProxyControlHandler(http.server.BaseHTTPRequestHandler):
             self.ping_target()
         elif self.path == "/fallback-config":
             self.save_fallback_config_endpoint()
+        elif self.path == "/proxy-enabled":
+            self.set_proxy_enabled()
         else:
             self.send_error(404)
 
@@ -584,6 +627,7 @@ class ProxyControlHandler(http.server.BaseHTTPRequestHandler):
         config_exists = CONFIG_FILE.exists()
         current_tag = None
         current_server = None
+        proxy_enabled = load_proxy_enabled()
 
         if config_exists:
             try:
@@ -597,12 +641,102 @@ class ProxyControlHandler(http.server.BaseHTTPRequestHandler):
                 pass
 
         self.send_json({
-            "active": config_exists,
+            "active": config_exists and proxy_enabled,
             "tag": current_tag,
             "server": current_server,
-            "proxyPort": PROXY_PORT
+            "proxyPort": PROXY_PORT,
+            "proxyEnabled": proxy_enabled,
+            "startTime": load_start_time() if config_exists and proxy_enabled else 0
         })
 
+    def get_proxy_enabled(self):
+        """Get proxy enabled state"""
+        enabled = load_proxy_enabled()
+        self.send_json({"enabled": enabled})
+
+    def set_proxy_enabled(self):
+        """Set proxy enabled state and regenerate config"""
+        try:
+            content_length = int(self.headers.get("Content-Length", 0))
+            body = self.rfile.read(content_length).decode("utf-8")
+            data = json.loads(body)
+            
+            enabled = data.get("enabled", True)
+            save_proxy_enabled(enabled)
+            
+            # Regenerate config based on state
+            if enabled:
+                # Restore normal VPN config
+                regenerated = self.regenerate_current_config()
+                if regenerated:
+                     # Only update start time if actually enabling VPN
+                     save_start_time(datetime.now(timezone.utc).timestamp())
+            else:
+                # Generate direct config (bypass proxy)
+                regenerated = self.generate_direct_config()
+                save_start_time(0)
+            
+            self.send_json({
+                "success": True,
+                "enabled": enabled,
+                "regenerated": regenerated
+            })
+            
+        except json.JSONDecodeError:
+            self.send_json({"success": False, "error": "Invalid JSON"}, 400)
+        except Exception as e:
+            self.send_json({"success": False, "error": str(e)}, 500)
+
+    def generate_direct_config(self) -> bool:
+        """Generate a direct connection config (bypass all proxies)"""
+        try:
+            config = {
+                "dns": {
+                    "independent_cache": True
+                },
+                "log": {
+                    "level": "debug",
+                    "disabled": True,
+                    "timestamp": True
+                },
+                "route": {
+                    "final": "direct",
+                    "auto_detect_interface": True
+                },
+                "inbounds": [
+                    {
+                        "tag": "mixed-in",
+                        "type": "mixed",
+                        "sniff": True,
+                        "users": [],
+                        "listen": "0.0.0.0",
+                        "listen_port": PROXY_PORT,
+                        "set_system_proxy": False
+                    }
+                ],
+                "outbounds": [
+                    {
+                        "tag": "direct",
+                        "type": "direct"
+                    }
+                ]
+            }
+            
+            DATA_DIR.mkdir(parents=True, exist_ok=True)
+            CONFIG_FILE.write_text(json.dumps(config, indent=2, ensure_ascii=False))
+            
+            # Reload sing-box
+            try:
+                urllib.request.urlopen("http://127.0.0.1:9090/reload", timeout=3)
+            except Exception:
+                pass
+            
+            return True
+            
+        except Exception as e:
+            print(f"[WebUI] Failed to generate direct config: {e}")
+            return False
+
     def get_subscription(self):
         """Get saved subscription info"""
         sub = load_subscription()
@@ -690,6 +824,9 @@ class ProxyControlHandler(http.server.BaseHTTPRequestHandler):
                 "success": True,
                 "message": f"Конфигурация '{vless_params['tag']}' успешно применена!"
             })
+            
+            # Save new start time as connection is reset
+            save_start_time(datetime.now(timezone.utc).timestamp())
 
         except json.JSONDecodeError:
             self.send_json({"success": False, "error": "Неверный JSON"}, 400)