Spaces:
Running
Running
| <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Psiphon Pilot - VPN Controller</title> | |
| <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='cyan' stroke-width='2'><path d='M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5'/></svg>"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#eef2ff', | |
| 100: '#e0e7ff', | |
| 200: '#c7d2fe', | |
| 300: '#a5b4fc', | |
| 400: '#818cf8', | |
| 500: '#6366f1', | |
| 600: '#4f46e5', | |
| 700: '#4338ca', | |
| 800: '#3730a3', | |
| 900: '#312e81', | |
| }, | |
| secondary: { | |
| 50: '#ecfeff', | |
| 100: '#cffafe', | |
| 200: '#a5f3fc', | |
| 300: '#67e8f9', | |
| 400: '#22d3ee', | |
| 500: '#06b6d4', | |
| 600: '#0891b2', | |
| 700: '#0e7490', | |
| 800: '#155e75', | |
| 900: '#164e63', | |
| } | |
| }, | |
| fontFamily: { | |
| mono: ['JetBrains Mono', 'Fira Code', 'monospace'], | |
| sans: ['Inter', 'system-ui', 'sans-serif'], | |
| }, | |
| animation: { | |
| 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| 'spin-slow': 'spin 3s linear infinite', | |
| 'bounce-slight': 'bounce 2s infinite', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100 font-sans antialiased overflow-hidden h-screen w-screen"> | |
| <div class="flex h-full"> | |
| <!-- Sidebar --> | |
| <vpn-sidebar></vpn-sidebar> | |
| <!-- Main Content --> | |
| <main class="flex-1 flex flex-col h-full overflow-hidden relative"> | |
| <!-- Top Bar --> | |
| <header class="h-16 border-b border-gray-800 bg-gray-900/50 backdrop-blur-xl flex items-center justify-between px-6 z-20"> | |
| <div class="flex items-center gap-4"> | |
| <h1 class="text-xl font-semibold text-white tracking-tight">Dashboard</h1> | |
| <span class="px-2 py-1 rounded-full bg-gray-800 text-xs text-gray-400 border border-gray-700">Ubuntu 22.04</span> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <button id="clearLogs" class="text-gray-400 hover:text-white transition-colors text-sm flex items-center gap-2"> | |
| <i data-feather="trash-2" class="w-4 h-4"></i> | |
| Clear Logs | |
| </button> | |
| <div class="h-4 w-px bg-gray-700"></div> | |
| <div class="flex items-center gap-2 text-sm text-gray-400"> | |
| <div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div> | |
| System Ready | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Dashboard Content --> | |
| <div class="flex-1 overflow-y-auto p-6 space-y-6"> | |
| <!-- Connection Control Section --> | |
| <section class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Main Power Control --> | |
| <div class="lg:col-span-1 bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl p-8 border border-gray-700 shadow-2xl flex flex-col items-center justify-center relative overflow-hidden group"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-primary-600/10 to-secondary-600/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div> | |
| <power-button id="mainToggle"></power-button> | |
| <div class="mt-6 text-center"> | |
| <h2 class="text-2xl font-bold text-white mb-1" id="connectionStatus">Disconnected</h2> | |
| <p class="text-gray-400 text-sm" id="connectionSubtitle">Tap to connect</p> | |
| </div> | |
| <div class="mt-6 flex items-center gap-4 text-sm"> | |
| <div class="flex items-center gap-2 text-gray-400"> | |
| <i data-feather="shield" class="w-4 h-4"></i> | |
| <span>Secure</span> | |
| </div> | |
| <div class="flex items-center gap-2 text-gray-400"> | |
| <i data-feather="zap" class="w-4 h-4"></i> | |
| <span>Fast</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Stats Grid --> | |
| <div class="lg:col-span-2 grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <status-card | |
| icon="download" | |
| label="Download Speed" | |
| value="0 MB/s" | |
| color="primary" | |
| id="downloadStat"> | |
| </status-card> | |
| <status-card | |
| icon="upload" | |
| label="Upload Speed" | |
| value="0 MB/s" | |
| color="secondary" | |
| id="uploadStat"> | |
| </status-card> | |
| <status-card | |
| icon="clock" | |
| label="Connection Time" | |
| value="00:00:00" | |
| color="yellow" | |
| id="timeStat"> | |
| </status-card> | |
| <status-card | |
| icon="server" | |
| label="Server Location" | |
| value="Auto-Select" | |
| color="purple" | |
| id="serverStat"> | |
| </status-card> | |
| </div> | |
| </section> | |
| <!-- Terminal/Logs Section --> | |
| <section class="bg-gray-950 rounded-2xl border border-gray-800 overflow-hidden flex flex-col h-96"> | |
| <div class="bg-gray-900 px-4 py-3 border-b border-gray-800 flex items-center justify-between"> | |
| <div class="flex items-center gap-3"> | |
| <i data-feather="terminal" class="w-4 h-4 text-gray-400"></i> | |
| <span class="text-sm font-medium text-gray-300">Process Logs</span> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <div class="flex gap-1"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <log-console id="logConsole"></log-console> | |
| </section> | |
| <!-- Configuration Info --> | |
| <section class="bg-gray-800/50 rounded-xl p-6 border border-gray-700"> | |
| <h3 class="text-lg font-semibold text-white mb-4 flex items-center gap-2"> | |
| <i data-feather="info" class="w-5 h-5 text-primary-400"></i> | |
| Configuration Details | |
| </h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm"> | |
| <div class="space-y-2"> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-400">Executable:</span> | |
| <span class="text-gray-200 font-mono">psiphon-tunnel-core-x86_64</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-400">Data Directory:</span> | |
| <span class="text-gray-200 font-mono text-right truncate max-w-xs">/home/hossein/Files/psiphon</span> | |
| </div> | |
| </div> | |
| <div class="space-y-2"> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-400">Config File:</span> | |
| <span class="text-gray-200 font-mono text-right truncate max-w-xs">psiphon.config</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-400">Protocol:</span> | |
| <span class="px-2 py-0.5 rounded bg-primary-500/20 text-primary-300 text-xs">SSH+</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| </main> | |
| </div> | |
| <script src="components/sidebar.js"></script> | |
| <script src="components/status-card.js"></script> | |
| <script src="components/log-console.js"></script> | |
| <script src="components/power-button.js"></script> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |