Files
vpn-proxy/web/components/fallback_config.html

50 lines
2.9 KiB
HTML

<!-- 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>