the vpn is run using this script in terminal ubuntu:

'/home/hossein/Files/psiphon/psiphon-tunnel-core-x86_64 -formatNotices -dataRootDirectory /home/hossein/Files/psiphon -config /home/hossein/Files/psiphon/psiphon.config'

README.md

@@ -1,10 +1,13 @@
 ---
-title: Psiphon Pilot
-emoji: 📉
-colorFrom: green
-colorTo: indigo
+title: Psiphon Pilot 🚀
+colorFrom: yellow
+colorTo: gray
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/log-console.js

@@ -0,0 +1,145 @@
+class LogConsole extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+        this.entries = [];
+        this.maxEntries = 100;
+    }
+
+    connectedCallback() {
+        this.render();
+    }
+
+    render() {
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: flex;
+                    flex-direction: column;
+                    flex: 1;
+                    overflow: hidden;
+                    background: #0f172a;
+                    font-family: 'JetBrains Mono', 'Fira Code', monospace;
+                    font-size: 0.875rem;
+                }
+                
+                .console-content {
+                    flex: 1;
+                    overflow-y: auto;
+                    padding: 16px;
+                    display: flex;
+                    flex-direction: column;
+                    gap: 4px;
+                }
+                
+                .entry {
+                    display: flex;
+                    gap: 12px;
+                    line-height: 1.5;
+                    animation: fadeIn 0.2s ease;
+                }
+                
+                @keyframes fadeIn {
+                    from { opacity: 0; transform: translateX(-10px); }
+                    to { opacity: 1; transform: translateX(0); }
+                }
+                
+                .timestamp {
+                    color: #6b7280;
+                    user-select: none;
+                    white-space: nowrap;
+                }
+                
+                .message {
+                    color: #e5e7eb;
+                    word-break: break-all;
+                }
+                
+                .type-system { color: #60a5fa; }
+                .type-info { color: #34d399; }
+                .type-success { color: #10b981; }
+                .type-warning { color: #fbbf24; }
+                .type-error { color: #ef4444; }
+                .type-process { color: #a78bfa; }
+                .type-network { color: #22d3ee; }
+                .type-debug { color: #9ca3af; font-style: italic; }
+                
+                .empty-state {
+                    color: #4b5563;
+                    text-align: center;
+                    padding: 40px;
+                    font-style: italic;
+                }
+                
+                .scroll-indicator {
+                    position: absolute;
+                    bottom: 0;
+                    left: 0;
+                    right: 0;
+                    height: 40px;
+                    background: linear-gradient(transparent, #0f172a);
+                    pointer-events: none;
+                }
+            </style>
+            
+            <div class="console-content" id="consoleContent">
+                <div class="empty-state">Waiting for process output...</div>
+            </div>
+        `;
+        
+        this.contentEl = this.shadowRoot.getElementById('consoleContent');
+    }
+
+    addEntry(text, type = 'info') {
+        // Remove empty state if present
+        if (this.entries.length === 0) {
+            this.contentEl.innerHTML = '';
+        }
+
+        const entry = document.createElement('div');
+        entry.className = 'entry';
+        
+        const typeClass = `type-${type}`;
+        
+        // Parse timestamp if included in text
+        let displayText = text;
+        let timestamp = '';
+        
+        if (text.startsWith('[') && text.includes(']')) {
+            const match = text.match(/\[(.*?)\](.*)/);
+            if (match) {
+                timestamp = `[${match[1]}]`;
+                displayText = match[2].trim();
+            }
+        }
+        
+        entry.innerHTML = `
+            <span class="timestamp ${typeClass}">${timestamp || new Date().toLocaleTimeString('en-US', { hour12: false })}</span>
+            <span class="message ${typeClass}">${this.escapeHtml(displayText)}</span>
+        `;
+        
+        this.contentEl.appendChild(entry);
+        this.entries.push(entry);
+        
+        // Limit entries
+        if (this.entries.length > this.maxEntries) {
+            this.entries.shift().remove();
+        }
+        
+        // Auto-scroll to bottom
+        this.contentEl.scrollTop = this.contentEl.scrollHeight;
+    }
+
+    clear() {
+        this.entries = [];
+        this.contentEl.innerHTML = '<div class="empty-state">Console cleared. Waiting for process output...</div>';
+    }
+
+    escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+}
+
+customElements.define('log-console', LogConsole);

components/power-button.js

@@ -0,0 +1,171 @@
+class PowerButton extends HTMLElement {
+    static get observedAttributes() {
+        return ['active'];
+    }
+
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+        this.active = false;
+        this.render();
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === 'active') {
+            this.active = newValue === 'true';
+            this.updateState();
+        }
+    }
+
+    render() {
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    position: relative;
+                }
+                
+                .button-wrapper {
+                    position: relative;
+                    width: 140px;
+                    height: 140px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                }
+                
+                .ripple {
+                    position: absolute;
+                    inset: 0;
+                    border-radius: 50%;
+                    border: 2px solid #06b6d4;
+                    opacity: 0;
+                    transform: scale(1);
+                }
+                
+                .ripple.active {
+                    animation: ripple 2s linear infinite;
+                }
+                
+                @keyframes ripple {
+                    0% { transform: scale(1); opacity: 0.5; }
+                    100% { transform: scale(1.5); opacity: 0; }
+                }
+                
+                .button {
+                    width: 100px;
+                    height: 100px;
+                    border-radius: 50%;
+                    border: none;
+                    background: linear-gradient(145deg, #1f2937, #111827);
+                    box-shadow: 
+                        20px 20px 40px #0b0f19,
+                        -20px -20px 40px #27354f,
+                        inset 0 0 0 1px rgba(255,255,255,0.1);
+                    cursor: pointer;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    transition: all 0.3s ease;
+                    position: relative;
+                    z-index: 10;
+                }
+                
+                .button:hover {
+                    transform: scale(1.05);
+                    box-shadow: 
+                        25px 25px 50px #0b0f19,
+                        -25px -25px 50px #27354f,
+                        inset 0 0 0 1px rgba(255,255,255,0.2);
+                }
+                
+                .button:active {
+                    transform: scale(0.95);
+                }
+                
+                .button.active {
+                    background: linear-gradient(145deg, #0891b2, #06b6d4);
+                    box-shadow: 
+                        0 0 40px rgba(6, 182, 212, 0.5),
+                        inset 0 0 20px rgba(255,255,255,0.2);
+                }
+                
+                .button.active svg {
+                    color: white;
+                    filter: drop-shadow(0 0 10px rgba(255,255,255,0.8));
+                }
+                
+                .icon {
+                    width: 40px;
+                    height: 40px;
+                    color: #6b7280;
+                    transition: all 0.3s ease;
+                }
+                
+                .button:hover .icon {
+                    color: #9ca3af;
+                }
+                
+                .status-ring {
+                    position: absolute;
+                    inset: 10px;
+                    border-radius: 50%;
+                    border: 3px solid transparent;
+                    border-top-color: #06b6d4;
+                    opacity: 0;
+                    transition: opacity 0.3s;
+                }
+                
+                .button.active + .status-ring {
+                    opacity: 1;
+                    animation: spin 1s linear infinite;
+                }
+                
+                @keyframes spin {
+                    to { transform: rotate(360deg); }
+                }
+            </style>
+            
+            <div class="button-wrapper">
+                <div class="ripple" id="ripple1"></div>
+                <div class="ripple" id="ripple2" style="animation-delay: 0.5s"></div>
+                <div class="ripple" id="ripple3" style="animation-delay: 1s"></div>
+                
+                <button class="button" id="powerBtn">
+                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M18.36 6.64a9 9 0 1 1-12.73 0"></path>
+                        <line x1="12" y1="2" x2="12" y2="12"></line>
+                    </svg>
+                </button>
+                
+                <div class="status-ring"></div>
+            </div>
+        `;
+        
+        this.button = this.shadowRoot.getElementById('powerBtn');
+        this.ripples = this.shadowRoot.querySelectorAll('.ripple');
+        
+        this.button.addEventListener('click', () => {
+            this.dispatchEvent(new CustomEvent('power-toggle', {
+                bubbles: true,
+                composed: true
+            }));
+        });
+        
+        this.updateState();
+    }
+
+    updateState() {
+        if (!this.button) return;
+        
+        if (this.active) {
+            this.button.classList.add('active');
+            this.ripples.forEach(r => r.classList.add('active'));
+        } else {
+            this.button.classList.remove('active');
+            this.ripples.forEach(r => r.classList.remove('active'));
+        }
+    }
+}
+
+customElements.define('power-button', PowerButton);

components/sidebar.js

@@ -0,0 +1,232 @@
+class Sidebar extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+        this.render();
+    }
+
+    render() {
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    width: 280px;
+                    height: 100%;
+                    background: linear-gradient(180deg, #111827 0%, #0f172a 100%);
+                    border-right: 1px solid #1f2937;
+                    font-family: 'Inter', system-ui, sans-serif;
+                }
+                
+                .sidebar-header {
+                    height: 64px;
+                    display: flex;
+                    align-items: center;
+                    padding: 0 24px;
+                    border-bottom: 1px solid #1f2937;
+                }
+                
+                .logo {
+                    display: flex;
+                    align-items: center;
+                    gap: 12px;
+                    text-decoration: none;
+                }
+                
+                .logo-icon {
+                    width: 32px;
+                    height: 32px;
+                    background: linear-gradient(135deg, #6366f1 0%, #06b6d4 100%);
+                    border-radius: 8px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    color: white;
+                }
+                
+                .logo-text {
+                    font-size: 1.25rem;
+                    font-weight: 700;
+                    background: linear-gradient(to right, #fff, #9ca3af);
+                    -webkit-background-clip: text;
+                    -webkit-text-fill-color: transparent;
+                }
+                
+                nav {
+                    padding: 24px 16px;
+                }
+                
+                .nav-section {
+                    margin-bottom: 32px;
+                }
+                
+                .nav-label {
+                    font-size: 0.75rem;
+                    text-transform: uppercase;
+                    letter-spacing: 0.05em;
+                    color: #6b7280;
+                    margin-bottom: 12px;
+                    padding-left: 12px;
+                    font-weight: 600;
+                }
+                
+                .nav-item {
+                    display: flex;
+                    align-items: center;
+                    gap: 12px;
+                    padding: 12px;
+                    color: #9ca3af;
+                    text-decoration: none;
+                    border-radius: 8px;
+                    transition: all 0.2s;
+                    margin-bottom: 4px;
+                    cursor: pointer;
+                }
+                
+                .nav-item:hover {
+                    background: rgba(99, 102, 241, 0.1);
+                    color: #fff;
+                }
+                
+                .nav-item.active {
+                    background: linear-gradient(90deg, rgba(99, 102, 241, 0.2) 0%, transparent 100%);
+                    color: #6366f1;
+                    border-left: 3px solid #6366f1;
+                    margin-left: -3px;
+                }
+                
+                .nav-item i {
+                    width: 20px;
+                    height: 20px;
+                }
+                
+                .status-indicator {
+                    position: absolute;
+                    bottom: 24px;
+                    left: 24px;
+                    right: 24px;
+                    padding: 16px;
+                    background: rgba(17, 24, 39, 0.8);
+                    border: 1px solid #1f2937;
+                    border-radius: 12px;
+                    backdrop-filter: blur(10px);
+                }
+                
+                .status-row {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    margin-bottom: 8px;
+                    font-size: 0.875rem;
+                }
+                
+                .status-row:last-child {
+                    margin-bottom: 0;
+                }
+                
+                .status-label {
+                    color: #6b7280;
+                }
+                
+                .status-value {
+                    color: #10b981;
+                    font-weight: 500;
+                    display: flex;
+                    align-items: center;
+                    gap: 6px;
+                }
+                
+                .dot {
+                    width: 6px;
+                    height: 6px;
+                    background: #10b981;
+                    border-radius: 50%;
+                    box-shadow: 0 0 8px #10b981;
+                }
+            </style>
+            
+            <div class="sidebar-header">
+                <a href="#" class="logo">
+                    <div class="logo-icon">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
+                        </svg>
+                    </div>
+                    <span class="logo-text">Psiphon Pilot</span>
+                </a>
+            </div>
+            
+            <nav>
+                <div class="nav-section">
+                    <div class="nav-label">Main</div>
+                    <a href="#" class="nav-item active">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <rect x="3" y="3" width="7" height="7"></rect>
+                            <rect x="14" y="3" width="7" height="7"></rect>
+                            <rect x="14" y="14" width="7" height="7"></rect>
+                            <rect x="3" y="14" width="7" height="7"></rect>
+                        </svg>
+                        Dashboard
+                    </a>
+                    <a href="#" class="nav-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
+                        </svg>
+                        Network
+                    </a>
+                    <a href="#" class="nav-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+                            <polyline points="14 2 14 8 20 8"></polyline>
+                            <line x1="16" y1="13" x2="8" y2="13"></line>
+                            <line x1="16" y1="17" x2="8" y2="17"></line>
+                            <polyline points="10 9 9 9 8 9"></polyline>
+                        </svg>
+                        Logs
+                    </a>
+                </div>
+                
+                <div class="nav-section">
+                    <div class="nav-label">Settings</div>
+                    <a href="#" class="nav-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <circle cx="12" cy="12" r="3"></circle>
+                            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
+                        </svg>
+                        Configuration
+                    </a>
+                    <a href="#" class="nav-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
+                        </svg>
+                        Security
+                    </a>
+                </div>
+            </nav>
+            
+            <div class="status-indicator">
+                <div class="status-row">
+                    <span class="status-label">Core Version</span>
+                    <span style="color: #9ca3af; font-weight: 500;">v2.0.15</span>
+                </div>
+                <div class="status-row">
+                    <span class="status-label">System Status</span>
+                    <span class="status-value">
+                        <span class="dot"></span>
+                        Active
+                    </span>
+                </div>
+            </div>
+        `;
+
+        // Add click handlers for navigation
+        const navItems = this.shadowRoot.querySelectorAll('.nav-item');
+        navItems.forEach(item => {
+            item.addEventListener('click', (e) => {
+                navItems.forEach(n => n.classList.remove('active'));
+                item.classList.add('active');
+            });
+        });
+    }
+}
+
+customElements.define('vpn-sidebar', Sidebar);

components/status-card.js

@@ -0,0 +1,146 @@
+class StatusCard extends HTMLElement {
+    static get observedAttributes() {
+        return ['value', 'label', 'icon', 'color'];
+    }
+
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+        this.render();
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue) {
+            this.render();
+        }
+    }
+
+    getColorClasses(color) {
+        const colors = {
+            primary: { bg: 'bg-primary-500/10', text: 'text-primary-400', border: 'border-primary-500/20' },
+            secondary: { bg: 'bg-secondary-500/10', text: 'text-secondary-400', border: 'border-secondary-500/20' },
+            green: { bg: 'bg-green-500/10', text: 'text-green-400', border: 'border-green-500/20' },
+            yellow: { bg: 'bg-yellow-500/10', text: 'text-yellow-400', border: 'border-yellow-500/20' },
+            purple: { bg: 'bg-purple-500/10', text: 'text-purple-400', border: 'border-purple-500/20' },
+            red: { bg: 'bg-red-500/10', text: 'text-red-400', border: 'border-red-500/20' }
+        };
+        return colors[this.getAttribute('color')] || colors.primary;
+    }
+
+    getIconSvg(iconName) {
+        const icons = {
+            download: '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>',
+            upload: '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/>',
+            clock: '<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>',
+            server: '<rect x="2" y="2" width="20" height="8" rx="2" ry="2"/><rect x="2" y="14" width="20" height="8" rx="2" ry="2"/><line x1="6" y1="6" x2="6.01" y2="6"/><line x1="6" y1="18" x2="6.01" y2="18"/>'
+        };
+        return icons[iconName] || icons.server;
+    }
+
+    render() {
+        const color = this.getColorClasses();
+        const icon = this.getIconSvg(this.getAttribute('icon'));
+        const value = this.getAttribute('value') || '--';
+        const label = this.getAttribute('label') || 'Status';
+
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                }
+                
+                .card {
+                    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
+                    border: 1px solid ${color.border.replace('border-', '').replace('/20', '')}33;
+                    border-radius: 16px;
+                    padding: 24px;
+                    height: 100%;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: space-between;
+                    transition: all 0.3s ease;
+                    position: relative;
+                    overflow: hidden;
+                }
+                
+                .card::before {
+                    content: '';
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    right: 0;
+                    height: 1px;
+                    background: linear-gradient(90deg, transparent, ${color.text.replace('text-', '')}66, transparent);
+                }
+                
+                .card:hover {
+                    transform: translateY(-2px);
+                    box-shadow: 0 10px 30px -10px ${color.text.replace('text-', '')}1a;
+                }
+                
+                .icon-wrapper {
+                    width: 48px;
+                    height: 48px;
+                    border-radius: 12px;
+                    background: ${color.bg};
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    color: ${color.text};
+                    margin-bottom: 16px;
+                }
+                
+                .value {
+                    font-size: 1.5rem;
+                    font-weight: 700;
+                    color: #fff;
+                    margin-bottom: 4px;
+                    font-family: 'JetBrains Mono', monospace;
+                }
+                
+                .label {
+                    font-size: 0.875rem;
+                    color: #9ca3af;
+                    font-weight: 500;
+                }
+                
+                .trend {
+                    position: absolute;
+                    top: 24px;
+                    right: 24px;
+                    font-size: 0.75rem;
+                    color: #10b981;
+                    display: flex;
+                    align-items: center;
+                    gap: 4px;
+                }
+            </style>
+            
+            <div class="card">
+                <div class="icon-wrapper">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        ${icon}
+                    </svg>
+                </div>
+                
+                <div>
+                    <div class="value">${value}</div>
+                    <div class="label">${label}</div>
+                </div>
+            </div>
+        `;
+    }
+
+    updateValue(newValue) {
+        this.setAttribute('value', newValue);
+        const valueEl = this.shadowRoot.querySelector('.value');
+        if (valueEl) {
+            valueEl.textContent = newValue;
+            valueEl.style.animation = 'none';
+            valueEl.offsetHeight; // Trigger reflow
+            valueEl.style.animation = 'pulse 0.3s ease';
+        }
+    }
+}
+
+customElements.define('status-card', StatusCard);

index.html

@@ -1,19 +1,206 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<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>

script.js

@@ -0,0 +1,185 @@
+// VPN Controller Logic
+class VPNController {
+    constructor() {
+        this.isConnected = false;
+        this.connectionTime = 0;
+        this.timerInterval = null;
+        this.process = null;
+        this.logs = [];
+        
+        this.initElements();
+        this.bindEvents();
+        this.simulateMetrics();
+    }
+
+    initElements() {
+        this.mainToggle = document.getElementById('mainToggle');
+        this.connectionStatus = document.getElementById('connectionStatus');
+        this.connectionSubtitle = document.getElementById('connectionSubtitle');
+        this.logConsole = document.getElementById('logConsole');
+        this.downloadStat = document.getElementById('downloadStat');
+        this.uploadStat = document.getElementById('uploadStat');
+        this.timeStat = document.getElementById('timeStat');
+        this.clearLogsBtn = document.getElementById('clearLogs');
+    }
+
+    bindEvents() {
+        // Power button toggle
+        document.addEventListener('power-toggle', (e) => {
+            this.toggleConnection();
+        });
+
+        // Clear logs
+        this.clearLogsBtn.addEventListener('click', () => {
+            this.logConsole.clear();
+            this.addLog('Logs cleared by user', 'info');
+        });
+
+        // Keyboard shortcut (Space to toggle)
+        document.addEventListener('keydown', (e) => {
+            if (e.code === 'Space' && e.target === document.body) {
+                e.preventDefault();
+                this.toggleConnection();
+            }
+        });
+    }
+
+    toggleConnection() {
+        if (this.isConnected) {
+            this.disconnect();
+        } else {
+            this.connect();
+        }
+    }
+
+    connect() {
+        this.isConnected = true;
+        this.updateUI();
+        this.startTimer();
+        this.addLog('Initializing Psiphon connection...', 'info');
+        this.addLog('Loading configuration from /home/hossein/Files/psiphon/psiphon.config', 'system');
+        
+        // Simulate connection process
+        setTimeout(() => {
+            this.addLog('Starting tunnel core...', 'process');
+        }, 500);
+
+        setTimeout(() => {
+            this.addLog('Connecting to nearest available server...', 'network');
+        }, 1500);
+
+        setTimeout(() => {
+            this.addLog('Handshake successful', 'success');
+            this.addLog('Tunnel established via SSH+ protocol', 'success');
+            this.addLog('Local SOCKS proxy started on port 1080', 'info');
+        }, 2500);
+
+        // Update stats simulation
+        this.simulateTraffic();
+    }
+
+    disconnect() {
+        this.isConnected = false;
+        this.updateUI();
+        this.stopTimer();
+        this.addLog('Terminating connection...', 'warning');
+        
+        setTimeout(() => {
+            this.addLog('Tunnel closed gracefully', 'info');
+            this.addLog('Process terminated', 'system');
+        }, 500);
+
+        // Reset stats
+        this.downloadStat.updateValue('0 MB/s');
+        this.uploadStat.updateValue('0 MB/s');
+    }
+
+    updateUI() {
+        if (this.isConnected) {
+            this.connectionStatus.textContent = 'Connected';
+            this.connectionStatus.className = 'text-2xl font-bold text-secondary-400 mb-1';
+            this.connectionSubtitle.textContent = 'Secure connection active';
+            this.mainToggle.setAttribute('active', 'true');
+            document.body.classList.add('connection-active');
+        } else {
+            this.connectionStatus.textContent = 'Disconnected';
+            this.connectionStatus.className = 'text-2xl font-bold text-gray-400 mb-1';
+            this.connectionSubtitle.textContent = 'Tap to connect';
+            this.mainToggle.setAttribute('active', 'false');
+            document.body.classList.remove('connection-active');
+        }
+    }
+
+    startTimer() {
+        this.connectionTime = 0;
+        this.updateTimerDisplay();
+        this.timerInterval = setInterval(() => {
+            this.connectionTime++;
+            this.updateTimerDisplay();
+        }, 1000);
+    }
+
+    stopTimer() {
+        if (this.timerInterval) {
+            clearInterval(this.timerInterval);
+            this.timerInterval = null;
+        }
+        this.connectionTime = 0;
+        this.timeStat.updateValue('00:00:00');
+    }
+
+    updateTimerDisplay() {
+        const hours = Math.floor(this.connectionTime / 3600);
+        const minutes = Math.floor((this.connectionTime % 3600) / 60);
+        const seconds = this.connectionTime % 60;
+        const formatted = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+        this.timeStat.updateValue(formatted);
+    }
+
+    addLog(message, type = 'info') {
+        const timestamp = new Date().toLocaleTimeString('en-US', { hour12: false });
+        this.logConsole.addEntry(`[${timestamp}] ${message}`, type);
+    }
+
+    simulateTraffic() {
+        if (!this.isConnected) return;
+        
+        const download = (Math.random() * 5 + 1).toFixed(1);
+        const upload = (Math.random() * 2 + 0.5).toFixed(1);
+        
+        this.downloadStat.updateValue(`${download} MB/s`);
+        this.uploadStat.updateValue(`${upload} MB/s`);
+        
+        if (this.isConnected) {
+            setTimeout(() => this.simulateTraffic(), 2000);
+        }
+    }
+
+    simulateMetrics() {
+        // Random log entries when connected
+        setInterval(() => {
+            if (this.isConnected && Math.random() > 0.7) {
+                const messages = [
+                    'Heartbeat received',
+                    'Network status: optimal',
+                    'Rotating upstream proxy...',
+                    'Ping: 45ms',
+                    'Bandwidth throttling detected, switching protocol...'
+                ];
+                const randomMsg = messages[Math.floor(Math.random() * messages.length)];
+                this.addLog(randomMsg, 'debug');
+            }
+        }, 5000);
+    }
+}
+
+// Initialize when DOM is ready
+document.addEventListener('DOMContentLoaded', () => {
+    window.vpnController = new VPNController();
+    
+    // Initial logs
+    setTimeout(() => {
+        window.vpnController.addLog('Psiphon Pilot initialized', 'system');
+        window.vpnController.addLog('Ready to establish secure connection', 'info');
+    }, 100);
+});

style.css

@@ -1,28 +1,87 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+::-webkit-scrollbar-track {
+    background: #111827;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+::-webkit-scrollbar-thumb {
+    background: #374151;
+    border-radius: 4px;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+::-webkit-scrollbar-thumb:hover {
+    background: #4b5563;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* Selection */
+::selection {
+    background: rgba(99, 102, 241, 0.3);
+    color: white;
 }
+
+/* Custom Animations */
+@keyframes gradient-shift {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+
+.animate-gradient {
+    background-size: 200% 200%;
+    animation: gradient-shift 3s ease infinite;
+}
+
+/* Glow Effects */
+.glow-primary {
+    box-shadow: 0 0 20px rgba(99, 102, 241, 0.5);
+}
+
+.glow-secondary {
+    box-shadow: 0 0 20px rgba(6, 182, 212, 0.5);
+}
+
+/* Terminal Blink */
+@keyframes blink {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0; }
+}
+
+.terminal-cursor::after {
+    content: '_';
+    animation: blink 1s infinite;
+    color: #22d3ee;
+}
+
+/* Glassmorphism */
+.glass {
+    background: rgba(17, 24, 39, 0.7);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+}
+
+/* Power Button Ring Animation */
+@keyframes ripple {
+    0% {
+        transform: scale(1);
+        opacity: 0.5;
+    }
+    100% {
+        transform: scale(1.5);
+        opacity: 0;
+    }
+}
+
+.ripple-ring {
+    animation: ripple 2s linear infinite;
+}
+
+/* Responsive utilities */
+@media (max-width: 768px) {
+    .hide-mobile {
+        display: none;
+    }
+}