324 lines
14 KiB
HTML
324 lines
14 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 Settings</title>
|
|
<link rel="stylesheet" href="../css/options.css">
|
|
</head>
|
|
<body>
|
|
<div class="options-container">
|
|
<!-- Header -->
|
|
<header class="options-header">
|
|
<img src="../images/anonlogo.png" alt="ANyONe" class="header-logo-img">
|
|
<h1 class="options-title">Extension Settings</h1>
|
|
</header>
|
|
|
|
<!-- General Settings -->
|
|
<section class="settings-section">
|
|
<div class="section-title">General</div>
|
|
<div class="settings-card">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<div class="setting-label">Auto-connect on startup</div>
|
|
<div class="setting-desc">Automatically connect when browser starts</div>
|
|
</div>
|
|
<div class="setting-control">
|
|
<label class="toggle">
|
|
<input type="checkbox" id="auto-connect">
|
|
<span class="toggle-slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<div class="setting-label">Default connection mode</div>
|
|
<div class="setting-desc">Mode to use when auto-connecting</div>
|
|
</div>
|
|
<div class="setting-control">
|
|
<select class="select" id="default-mode">
|
|
<option value="public">Public Proxies</option>
|
|
<option value="custom">Custom Proxy</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Privacy Settings -->
|
|
<section class="settings-section">
|
|
<div class="section-title">Privacy</div>
|
|
<div class="settings-card">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<div class="setting-label">Local Network Access</div>
|
|
<div class="setting-desc">Access routers, printers, NAS, and local devices while connected</div>
|
|
</div>
|
|
<div class="setting-control">
|
|
<label class="toggle">
|
|
<input type="checkbox" id="bypass-local" checked>
|
|
<span class="toggle-slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<div class="setting-label">WebRTC Leak Protection</div>
|
|
<div class="setting-desc">Prevent real IP leaks through WebRTC</div>
|
|
</div>
|
|
<div class="setting-control">
|
|
<label class="toggle">
|
|
<input type="checkbox" id="webrtc-protection">
|
|
<span class="toggle-slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<div class="setting-label">Kill Switch</div>
|
|
<div class="setting-desc">Block all traffic if proxy disconnects</div>
|
|
</div>
|
|
<div class="setting-control">
|
|
<label class="toggle">
|
|
<input type="checkbox" id="kill-switch">
|
|
<span class="toggle-slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="setting-row vertical">
|
|
<div class="setting-info" style="width: 100%;">
|
|
<div class="setting-label">Bypass List <span class="setting-hint">(comma separated)</span></div>
|
|
<div class="setting-desc">Domains and IPs that should bypass the proxy (applies to both Public and Custom modes)</div>
|
|
</div>
|
|
<div class="setting-control">
|
|
<textarea class="exceptions-input large" id="exceptions" placeholder="example.com, *.mydomain.com, 203.0.113.*" autocomplete="off" spellcheck="false"></textarea>
|
|
</div>
|
|
<div class="bypass-buttons">
|
|
<button class="btn btn-secondary btn-sm" id="btn-clear-bypass">
|
|
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<polyline points="3 6 5 6 21 6"/>
|
|
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
|
|
</svg>
|
|
Clear
|
|
</button>
|
|
<button class="btn btn-primary btn-sm" id="btn-save-bypass">
|
|
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
|
|
<polyline points="17 21 17 13 7 13 7 21"/>
|
|
<polyline points="7 3 7 8 15 8"/>
|
|
</svg>
|
|
Save
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Public Proxies Settings -->
|
|
<section class="settings-section">
|
|
<div class="section-title">Public Proxies</div>
|
|
<div class="settings-card">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<div class="setting-label">Proxy list source</div>
|
|
<div class="setting-desc">Where to fetch the public proxy list from</div>
|
|
</div>
|
|
<div class="setting-control">
|
|
<select class="select" id="proxy-source">
|
|
<option value="arweave">Arweave</option>
|
|
<option value="git">GitBros</option>
|
|
<option value="github">GitHub</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<div class="setting-label">Auto-update interval</div>
|
|
<div class="setting-desc">How often to refresh proxy list</div>
|
|
</div>
|
|
<div class="setting-control">
|
|
<select class="select" id="update-interval">
|
|
<option value="1">Every hour</option>
|
|
<option value="6">Every 6 hours</option>
|
|
<option value="12">Every 12 hours</option>
|
|
<option value="24">Every 24 hours</option>
|
|
<option value="0" selected>Manual only</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="proxy-source-info">
|
|
<div class="proxy-source-icon">
|
|
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<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"/>
|
|
<polyline points="3.27 6.96 12 12.01 20.73 6.96"/>
|
|
<line x1="12" y1="22.08" x2="12" y2="12"/>
|
|
</svg>
|
|
</div>
|
|
<div class="proxy-source-details">
|
|
<div class="proxy-source-name" id="source-name">GitBros</div>
|
|
<a class="proxy-source-url" id="source-url" href="https://git.debros.io/DeBros/anyone-proxy-list" target="_blank">
|
|
git.debros.io/DeBros/anyone-proxy-list
|
|
<svg class="icon-external" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
|
|
<polyline points="15 3 21 3 21 9"/>
|
|
<line x1="10" y1="14" x2="21" y2="3"/>
|
|
</svg>
|
|
</a>
|
|
<div class="proxy-source-updated" id="source-updated">Last updated: Never</div>
|
|
</div>
|
|
<button class="btn btn-secondary" id="btn-refresh-proxies">
|
|
<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>
|
|
Refresh
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Custom Proxy Settings -->
|
|
<section class="settings-section">
|
|
<div class="section-title">Custom Proxy</div>
|
|
<div class="settings-card">
|
|
<div class="setting-row vertical">
|
|
<div class="setting-info">
|
|
<div class="setting-label">Proxy Address</div>
|
|
<div class="setting-desc">Your custom SOCKS5 proxy server</div>
|
|
</div>
|
|
<div class="setting-control">
|
|
<div class="port-inputs">
|
|
<div class="port-input-group" style="flex: 2;">
|
|
<label>IP / Hostname</label>
|
|
<input type="text" class="input" id="custom-ip" placeholder="192.168.1.100 or relayup.local" autocomplete="off" spellcheck="false">
|
|
</div>
|
|
<div class="port-input-group" style="flex: 1;">
|
|
<label>Port</label>
|
|
<input type="number" class="input" id="custom-port" placeholder="9050" autocomplete="off">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="setting-row vertical">
|
|
<div class="setting-info">
|
|
<div class="setting-label">Authentication <span class="setting-hint">(optional)</span></div>
|
|
<div class="setting-desc">Username and password if your proxy requires authentication</div>
|
|
</div>
|
|
<div class="setting-control">
|
|
<div class="port-inputs">
|
|
<div class="port-input-group">
|
|
<label>Username</label>
|
|
<input type="text" class="input" id="custom-username" placeholder="username" autocomplete="off" spellcheck="false">
|
|
</div>
|
|
<div class="port-input-group">
|
|
<label>Password</label>
|
|
<input type="password" class="input" id="custom-password" placeholder="password" autocomplete="off">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="action-buttons">
|
|
<button class="btn btn-secondary" id="btn-clear-custom">
|
|
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<polyline points="3 6 5 6 21 6"/>
|
|
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
|
|
</svg>
|
|
Clear
|
|
</button>
|
|
<button class="btn btn-secondary" 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>
|
|
<button class="btn btn-primary" id="btn-save-custom">
|
|
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
|
|
<polyline points="17 21 17 13 7 13 7 21"/>
|
|
<polyline points="7 3 7 8 15 8"/>
|
|
</svg>
|
|
Save Settings
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- About Section -->
|
|
<section class="settings-section">
|
|
<div class="section-title">About</div>
|
|
<div class="settings-card">
|
|
<div class="about-logos">
|
|
<a href="https://anyone.io" target="_blank" class="about-logo-link">
|
|
<img src="../images/anyone2.png" alt="ANyONe" class="about-logo">
|
|
</a>
|
|
<a href="https://debros.io" target="_blank" class="about-logo-link">
|
|
<img src="../images/DeBros_White_Transparent.png" alt="DeBros" class="about-logo">
|
|
</a>
|
|
</div>
|
|
<div class="donate-section">
|
|
<p class="donate-message">DeBros creates privacy-first and decentralized tools for a freer world. Support our mission.</p>
|
|
<a href="https://debros.io/donate" target="_blank" class="btn btn-donate">
|
|
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
|
|
</svg>
|
|
Support DeBros
|
|
</a>
|
|
</div>
|
|
<div class="disclaimer">
|
|
This software is provided "as is" without warranty. Use at your own risk.
|
|
See <a href="https://github.com/DeBrosOfficial/anyone-extension/blob/main/LICENSE" target="_blank">LICENSE</a> for details.
|
|
</div>
|
|
<div class="version-info">
|
|
<div>Created by DeBros | Version 2.0.2</div>
|
|
<div class="open-source">
|
|
<a href="https://git.debros.io/DeBros/anyone-extension" target="_blank">View Source Code</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- Confirmation Modal -->
|
|
<div class="modal-overlay" id="modal-overlay">
|
|
<div class="modal">
|
|
<div class="modal-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
|
|
<line x1="12" y1="9" x2="12" y2="13" stroke-width="2.5"/>
|
|
<circle cx="12" cy="17" r="1" fill="currentColor" stroke="none"/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="modal-title" id="modal-title">Disable Local Network Access?</h3>
|
|
<p class="modal-message" id="modal-message">
|
|
This will make local devices (printers, NAS, router etc) unreachable while connected to the proxy.
|
|
</p>
|
|
<div class="modal-buttons">
|
|
<button class="btn btn-secondary" id="modal-cancel">Cancel</button>
|
|
<button class="btn btn-danger" id="modal-confirm">Disable</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toast Notification -->
|
|
<div class="toast" id="toast">
|
|
<svg class="icon" id="toast-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>
|
|
<span id="toast-message">Settings saved</span>
|
|
</div>
|
|
|
|
<script type="module" src="../js/options.js"></script>
|
|
</body>
|
|
</html>
|