122 lines
5.2 KiB
HTML
122 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>ANyONe Extension</title>
|
|
<link rel="stylesheet" href="../css/popup.css">
|
|
</head>
|
|
<body>
|
|
<div class="popup-container">
|
|
<!-- Header -->
|
|
<header class="popup-header">
|
|
<div class="logo">
|
|
<img src="../images/anyone2.png" alt="ANyONe" class="logo-img">
|
|
<span class="logo-subtitle">Privacy Extension</span>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Mode Selection -->
|
|
<section class="mode-section">
|
|
<div class="mode-tabs">
|
|
<button class="mode-tab active" data-mode="public">Public Proxies</button>
|
|
<button class="mode-tab" data-mode="custom">Custom Proxy</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Mode Content: Public -->
|
|
<section class="mode-content active" id="mode-public">
|
|
<div class="card">
|
|
<div class="proxy-info">
|
|
<div class="proxy-info-row">
|
|
<span class="proxy-info-label">Mode</span>
|
|
<span class="proxy-info-value" id="proxy-mode">Auto (Fastest)</span>
|
|
</div>
|
|
<div class="proxy-info-row">
|
|
<span class="proxy-info-label">Available</span>
|
|
<span class="proxy-info-value" id="proxy-count">Loading...</span>
|
|
</div>
|
|
</div>
|
|
<div class="proxy-actions">
|
|
<button class="btn btn-secondary" id="btn-connect-text">Connect</button>
|
|
<button class="btn btn-secondary" id="btn-next-proxy">Next Proxy</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Mode Content: Custom -->
|
|
<section class="mode-content" id="mode-custom">
|
|
<div class="card">
|
|
<div class="custom-form">
|
|
<div class="input-row">
|
|
<div class="input-group">
|
|
<label class="input-label">IP / Hostname</label>
|
|
<input type="text" class="input" id="custom-ip" placeholder="relayup.local">
|
|
</div>
|
|
<div class="input-group port">
|
|
<label class="input-label">Port</label>
|
|
<input type="number" class="input" id="custom-port" placeholder="9050">
|
|
</div>
|
|
</div>
|
|
<button class="btn btn-secondary w-full" id="btn-test-custom">
|
|
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
|
|
<polyline points="22 4 12 14.01 9 11.01"/>
|
|
</svg>
|
|
Test Connection
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Connect Button -->
|
|
<section class="connect-section">
|
|
<button class="connect-btn" id="btn-connect">
|
|
<div class="connect-btn-ring"></div>
|
|
<img src="../images/anonlogo.png" alt="Connect" class="connect-btn-icon">
|
|
</button>
|
|
</section>
|
|
|
|
<!-- Status Card -->
|
|
<section class="status-card" id="status-card">
|
|
<div class="status-main">
|
|
<div class="status-dot-container">
|
|
<span class="status-dot offline" id="status-dot"></span>
|
|
</div>
|
|
<div class="status-info">
|
|
<span class="status-text" id="status-text">Disconnected</span>
|
|
<span class="status-ip" id="status-ip" style="display: none;">-</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Quick Actions -->
|
|
<section class="quick-actions">
|
|
<button class="quick-action" id="btn-check-ip">
|
|
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="11" cy="11" r="8"/>
|
|
<line x1="21" y1="21" x2="16.65" y2="16.65"/>
|
|
</svg>
|
|
<span class="quick-action-label">Check IP</span>
|
|
</button>
|
|
<button class="quick-action" id="btn-refresh">
|
|
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<polyline points="23 4 23 10 17 10"/>
|
|
<path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/>
|
|
</svg>
|
|
<span class="quick-action-label">Refresh</span>
|
|
</button>
|
|
<button class="quick-action" id="btn-settings">
|
|
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="3"/>
|
|
<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"/>
|
|
</svg>
|
|
<span class="quick-action-label">Settings</span>
|
|
</button>
|
|
</section>
|
|
</div>
|
|
|
|
<script type="module" src="../js/popup.js"></script>
|
|
</body>
|
|
</html>
|