90 lines
4.7 KiB
HTML
90 lines
4.7 KiB
HTML
<!-- Proxy Chain Visualization (Expanded) -->
|
|
<div id="proxyChainSection" class="bg-black border border-[#00ff41]/30 p-5 font-mono">
|
|
<div 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-4 text-sm justify-center py-4">
|
|
<!-- You -->
|
|
<div class="flex flex-col items-center justify-center gap-2">
|
|
<div
|
|
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-[10px]">You</span>
|
|
</div>
|
|
|
|
<!-- Arrow to branch -->
|
|
<div class="flex items-center">
|
|
<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-3 py-1">
|
|
<!-- Fallback branch -->
|
|
<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-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-6 h-6 text-red-500"></i>
|
|
</div>
|
|
</div>
|
|
<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-3 transition-all duration-300">
|
|
<div class="w-5 h-[3px] bg-[#00ff41]/50 rounded-full"></div>
|
|
<div id="chainVPNBox"
|
|
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-6 h-6 text-red-500"></i>
|
|
</div>
|
|
</div>
|
|
<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-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-2">
|
|
<div
|
|
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-[10px]">Internet</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 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> |