atlas-browser 0.2.0

package/src/renderer/network-map.js

@@ -0,0 +1,131 @@
+// Network Map - Canvas visualization of connection path
+
+const canvas = document.getElementById('network-canvas');
+if (canvas) {
+  const ctx = canvas.getContext('2d');
+  const W = canvas.width;
+  const H = canvas.height;
+
+  // Colors
+  const BG = '#0a0a0f';
+  const ACCENT = '#00d4ff';
+  const PURPLE = '#a855f7';
+  const GREEN = '#22c55e';
+  const MUTED = '#8888a0';
+  const TEXT = '#e2e2e8';
+
+  let animFrame = 0;
+  let torMode = false;
+  let currentDomain = 'Search Angel';
+
+  // Node positions
+  function getNodes() {
+    if (torMode) {
+      return [
+        { x: 40, y: H / 2, label: 'You', color: GREEN, r: 12 },
+        { x: W * 0.25, y: H * 0.3, label: 'Guard', color: PURPLE, r: 8 },
+        { x: W * 0.5, y: H * 0.65, label: 'Relay', color: PURPLE, r: 8 },
+        { x: W * 0.75, y: H * 0.35, label: 'Exit', color: PURPLE, r: 8 },
+        { x: W - 40, y: H / 2, label: currentDomain, color: ACCENT, r: 12 },
+      ];
+    }
+    return [
+      { x: 40, y: H / 2, label: 'You', color: GREEN, r: 12 },
+      { x: W / 2, y: H / 2, label: 'Encrypted', color: ACCENT, r: 6 },
+      { x: W - 40, y: H / 2, label: currentDomain, color: ACCENT, r: 12 },
+    ];
+  }
+
+  function drawFrame() {
+    ctx.fillStyle = BG;
+    ctx.fillRect(0, 0, W, H);
+
+    const nodes = getNodes();
+    animFrame++;
+
+    // Draw connections
+    for (let i = 0; i < nodes.length - 1; i++) {
+      const a = nodes[i];
+      const b = nodes[i + 1];
+
+      // Animated dashed line
+      ctx.strokeStyle = torMode ? PURPLE + '60' : ACCENT + '40';
+      ctx.lineWidth = 2;
+      ctx.setLineDash([6, 4]);
+      ctx.lineDashOffset = -animFrame * 0.5;
+      ctx.beginPath();
+      ctx.moveTo(a.x, a.y);
+      ctx.lineTo(b.x, b.y);
+      ctx.stroke();
+      ctx.setLineDash([]);
+
+      // Data packet animation
+      const progress = ((animFrame * 2 + i * 30) % 100) / 100;
+      const px = a.x + (b.x - a.x) * progress;
+      const py = a.y + (b.y - a.y) * progress;
+      ctx.fillStyle = torMode ? PURPLE : ACCENT;
+      ctx.beginPath();
+      ctx.arc(px, py, 3, 0, Math.PI * 2);
+      ctx.fill();
+    }
+
+    // Draw nodes
+    for (const node of nodes) {
+      // Glow
+      const gradient = ctx.createRadialGradient(
+        node.x, node.y, 0,
+        node.x, node.y, node.r * 2.5
+      );
+      gradient.addColorStop(0, node.color + '30');
+      gradient.addColorStop(1, 'transparent');
+      ctx.fillStyle = gradient;
+      ctx.beginPath();
+      ctx.arc(node.x, node.y, node.r * 2.5, 0, Math.PI * 2);
+      ctx.fill();
+
+      // Node circle
+      ctx.fillStyle = node.color;
+      ctx.beginPath();
+      ctx.arc(node.x, node.y, node.r, 0, Math.PI * 2);
+      ctx.fill();
+
+      // Label
+      ctx.fillStyle = TEXT;
+      ctx.font = '9px -apple-system, sans-serif';
+      ctx.textAlign = 'center';
+      const labelY = node.y > H / 2 ? node.y - node.r - 8 : node.y + node.r + 14;
+      ctx.fillText(node.label, node.x, labelY);
+    }
+
+    // Title
+    ctx.fillStyle = MUTED;
+    ctx.font = '9px -apple-system, sans-serif';
+    ctx.textAlign = 'left';
+    ctx.fillText(torMode ? 'Tor Circuit (encrypted)' : 'Direct Connection (HTTPS)', 8, 14);
+
+    requestAnimationFrame(drawFrame);
+  }
+
+  drawFrame();
+
+  // Listen for Tor toggle
+  const torBtn = document.getElementById('tor-btn');
+  if (torBtn) {
+    const origClick = torBtn.onclick;
+    torBtn.addEventListener('click', () => {
+      torMode = !torMode;
+    });
+  }
+
+  // Update domain from URL changes
+  if (window.browserAPI) {
+    window.browserAPI.onUrlChanged((data) => {
+      try {
+        const url = new URL(data.url);
+        currentDomain = url.hostname.replace('www.', '').slice(0, 15);
+      } catch {
+        currentDomain = 'Web';
+      }
+    });
+  }
+}

package/src/renderer/security-panel.js

@@ -0,0 +1,13 @@
+// Security Panel - updates sidebar with security info
+// Most logic is in browser-ui.js, this handles periodic updates
+
+setInterval(async () => {
+  const sidebar = document.getElementById('security-sidebar');
+  if (sidebar && !sidebar.classList.contains('hidden') && window.browserAPI) {
+    const stats = await window.browserAPI.getBlockerStats();
+    const trackersTotal = document.getElementById('trackers-total');
+    if (trackersTotal) {
+      trackersTotal.textContent = stats.totalBlocked;
+    }
+  }
+}, 3000);

package/src/renderer/settings.html

@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Settings - Atlas Browser</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { background: #0a0a0f; color: #e2e2e8; font-family: -apple-system, sans-serif; padding: 40px; max-width: 700px; margin: 0 auto; }
+    h1 { font-size: 24px; margin-bottom: 24px; }
+    .section { background: #12121a; border: 1px solid #1e1e2e; border-radius: 12px; padding: 20px; margin-bottom: 16px; }
+    .section h2 { font-size: 14px; color: #00d4ff; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 1px; }
+    .setting-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #1e1e2e22; }
+    .setting-row:last-child { border-bottom: none; }
+    .setting-label { font-size: 13px; }
+    .setting-desc { font-size: 11px; color: #8888a0; margin-top: 2px; }
+    input[type="text"] { background: #0a0a0f; border: 1px solid #1e1e2e; color: #e2e2e8; padding: 6px 12px; border-radius: 6px; font-size: 12px; width: 200px; outline: none; font-family: 'SF Mono', monospace; }
+    input[type="text"]:focus { border-color: #00d4ff; }
+    .toggle { position: relative; width: 40px; height: 22px; }
+    .toggle input { opacity: 0; width: 0; height: 0; }
+    .toggle .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #1e1e2e; border-radius: 11px; transition: 0.3s; }
+    .toggle .slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background: #8888a0; border-radius: 50%; transition: 0.3s; }
+    .toggle input:checked + .slider { background: #00d4ff33; }
+    .toggle input:checked + .slider:before { transform: translateX(18px); background: #00d4ff; }
+    .reset-btn { background: none; border: 1px solid #ef4444; color: #ef4444; padding: 8px 20px; border-radius: 8px; cursor: pointer; font-size: 12px; margin-top: 12px; }
+    .reset-btn:hover { background: rgba(239,68,68,0.1); }
+    .version { text-align: center; color: #8888a033; font-size: 11px; margin-top: 24px; font-family: 'SF Mono', monospace; }
+  </style>
+</head>
+<body>
+  <h1>&#x2699; Settings</h1>
+
+  <div class="section">
+    <h2>General</h2>
+    <div class="setting-row">
+      <div><div class="setting-label">Homepage</div><div class="setting-desc">Page loaded on startup and Home button</div></div>
+      <input type="text" id="homepage" value="">
+    </div>
+    <div class="setting-row">
+      <div><div class="setting-label">Search Engine</div><div class="setting-desc">Used when typing in address bar</div></div>
+      <input type="text" id="searchEngine" value="Search Angel" readonly>
+    </div>
+  </div>
+
+  <div class="section">
+    <h2>Privacy</h2>
+    <div class="setting-row">
+      <div><div class="setting-label">Clear data on exit</div><div class="setting-desc">Delete cookies, cache, and local storage when browser closes</div></div>
+      <label class="toggle"><input type="checkbox" id="clearDataOnExit"><span class="slider"></span></label>
+    </div>
+    <div class="setting-row">
+      <div><div class="setting-label">Block trackers & ads</div><div class="setting-desc">Built-in tracker and ad blocker</div></div>
+      <label class="toggle"><input type="checkbox" id="blockTrackers"><span class="slider"></span></label>
+    </div>
+    <div class="setting-row">
+      <div><div class="setting-label">Fingerprint protection</div><div class="setting-desc">Prevent canvas/WebGL fingerprinting</div></div>
+      <label class="toggle"><input type="checkbox" id="fingerprintProtection"><span class="slider"></span></label>
+    </div>
+    <div class="setting-row">
+      <div><div class="setting-label">Referrer policy</div><div class="setting-desc">What sites see when you click a link</div></div>
+      <input type="text" id="referrerPolicy" value="no-referrer">
+    </div>
+  </div>
+
+  <div class="section">
+    <h2>Appearance</h2>
+    <div class="setting-row">
+      <div><div class="setting-label">Show bookmarks bar</div><div class="setting-desc">Display bookmarks under the address bar</div></div>
+      <label class="toggle"><input type="checkbox" id="showBookmarksBar"><span class="slider"></span></label>
+    </div>
+    <div class="setting-row">
+      <div><div class="setting-label">Default zoom</div><div class="setting-desc">Default page zoom level</div></div>
+      <input type="text" id="defaultZoom" value="100" style="width:60px; text-align:center;">
+    </div>
+  </div>
+
+  <div class="section">
+    <h2>Tor</h2>
+    <div class="setting-row">
+      <div><div class="setting-label">Tor proxy URL</div><div class="setting-desc">SOCKS5 proxy for Tor routing</div></div>
+      <input type="text" id="torProxyUrl" value="">
+    </div>
+    <div class="setting-row">
+      <div><div class="setting-label">Auto-connect Tor on start</div><div class="setting-desc">Enable Tor automatically when browser opens</div></div>
+      <label class="toggle"><input type="checkbox" id="autoConnectTor"><span class="slider"></span></label>
+    </div>
+  </div>
+
+  <div class="section">
+    <h2>About</h2>
+    <div class="setting-row">
+      <div><div class="setting-label">Atlas Browser</div><div class="setting-desc">Version 0.2.0 by Atlasiant</div></div>
+      <span style="color:#8888a0; font-family: 'SF Mono', monospace; font-size: 11px;">v0.2.0</span>
+    </div>
+  </div>
+
+  <button class="reset-btn" id="reset-btn">Reset All Settings</button>
+  <div class="version">Atlas Browser v0.2.0 | Privacy-First | Powered by Search Angel</div>
+
+  <script>
+    const api = window.browserAPI;
+    const fields = ['homepage', 'searchEngine', 'clearDataOnExit', 'blockTrackers',
+      'fingerprintProtection', 'referrerPolicy', 'showBookmarksBar', 'defaultZoom',
+      'torProxyUrl', 'autoConnectTor'];
+
+    async function load() {
+      if (!api) return;
+      const s = await api.getSettings();
+      fields.forEach(f => {
+        const el = document.getElementById(f);
+        if (!el) return;
+        if (el.type === 'checkbox') el.checked = !!s[f];
+        else el.value = s[f] || '';
+      });
+    }
+
+    // Auto-save on change
+    fields.forEach(f => {
+      const el = document.getElementById(f);
+      if (!el || el.readOnly) return;
+      const event = el.type === 'checkbox' ? 'change' : 'blur';
+      el.addEventListener(event, () => {
+        if (!api) return;
+        const val = el.type === 'checkbox' ? el.checked :
+                    f === 'defaultZoom' ? parseInt(el.value) || 100 : el.value;
+        api.setSetting(f, val);
+      });
+    });
+
+    document.getElementById('reset-btn').addEventListener('click', async () => {
+      if (!api || !confirm('Reset all settings to defaults?')) return;
+      await api.resetSettings();
+      load();
+    });
+
+    load();
+  </script>
+</body>
+</html>