feat: Реализован новый веб-интерфейс и бэкенд для управления VPN-клиентом, включая списки серверов, элементы управления прокси и опции конфигурации.

web/components/fallback_config.html

@@ -0,0 +1,50 @@
+<!-- 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>