atlas-browser 0.2.0

package/src/renderer/styles.css

@@ -0,0 +1,688 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+/* ── Loading Progress Bar ────────────────────────────────── */
+.progress-bar-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 3px;
+  z-index: 9999;
+  background: transparent;
+}
+
+.progress-bar-container.hidden { display: none; }
+
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, var(--accent), #00ffcc, var(--accent));
+  background-size: 200% 100%;
+  animation: progressShimmer 1.5s linear infinite;
+  transition: width 0.3s ease;
+  width: 0%;
+  box-shadow: 0 0 8px var(--accent);
+}
+
+@keyframes progressShimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+/* ── Context Menu ────────────────────────────────────────── */
+.context-menu {
+  position: fixed;
+  z-index: 10000;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 4px 0;
+  min-width: 180px;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
+  backdrop-filter: blur(12px);
+}
+
+.context-menu.hidden { display: none; }
+
+.ctx-item {
+  padding: 7px 16px;
+  font-size: 12px;
+  cursor: pointer;
+  color: var(--text);
+  transition: background 0.1s;
+}
+
+.ctx-item:hover {
+  background: var(--accent);
+  color: var(--bg);
+}
+
+.ctx-separator {
+  height: 1px;
+  background: var(--border);
+  margin: 4px 0;
+}
+
+:root {
+  --bg: #0a0a0f;
+  --surface: #12121a;
+  --surface2: #1a1a28;
+  --border: #1e1e2e;
+  --text: #e2e2e8;
+  --muted: #8888a0;
+  --accent: #00d4ff;
+  --accent-dim: #00a3c4;
+  --green: #22c55e;
+  --amber: #eab308;
+  --red: #ef4444;
+  --purple: #a855f7;
+  --chrome-height: 110px;
+}
+
+body {
+  background: var(--bg);
+  color: var(--text);
+  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
+  font-size: 13px;
+  overflow: hidden;
+  height: 100vh;
+  user-select: none;
+}
+
+/* ── Tab Bar ─────────────────────────────────────────────── */
+.tab-bar {
+  display: flex;
+  align-items: center;
+  height: 38px;
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+  padding-left: 80px; /* Space for traffic lights */
+  -webkit-app-region: drag;
+}
+
+.tab-bar-drag-region {
+  flex: 0;
+}
+
+.tabs-container {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex: 1;
+  overflow-x: auto;
+  padding: 4px 4px;
+  -webkit-app-region: no-drag;
+}
+
+.tab {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 12px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  color: var(--muted);
+  font-size: 12px;
+  cursor: pointer;
+  max-width: 200px;
+  min-width: 100px;
+  transition: all 0.15s;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.tab:hover {
+  background: var(--surface2);
+  color: var(--text);
+}
+
+.tab.active {
+  background: var(--surface2);
+  border-color: var(--accent);
+  color: var(--text);
+}
+
+.tab-title {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.tab-favicon {
+  width: 14px;
+  height: 14px;
+  border-radius: 2px;
+  flex-shrink: 0;
+}
+
+.tab-close {
+  font-size: 14px;
+  color: var(--muted);
+  cursor: pointer;
+  padding: 2px 4px;
+  border-radius: 4px;
+  line-height: 1;
+  opacity: 0;
+  transition: all 0.15s;
+}
+
+.tab:hover .tab-close { opacity: 1; }
+
+.tab-close:hover {
+  color: var(--red);
+  background: rgba(239, 68, 68, 0.15);
+}
+
+.tab-loading {
+  width: 10px;
+  height: 10px;
+  border: 2px solid var(--accent);
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.new-tab-btn {
+  background: none;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--muted);
+  font-size: 18px;
+  width: 28px;
+  height: 28px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 4px;
+  -webkit-app-region: no-drag;
+  transition: all 0.15s;
+}
+
+.new-tab-btn:hover {
+  background: var(--surface2);
+  color: var(--accent);
+  border-color: var(--accent);
+}
+
+/* ── Navigation Bar ──────────────────────────────────────── */
+.nav-bar {
+  display: flex;
+  align-items: center;
+  height: 44px;
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+  padding: 0 12px;
+  gap: 8px;
+}
+
+.nav-controls {
+  display: flex;
+  gap: 4px;
+}
+
+.nav-btn {
+  background: none;
+  border: none;
+  color: var(--muted);
+  font-size: 16px;
+  width: 30px;
+  height: 30px;
+  border-radius: 6px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s;
+}
+
+.nav-btn:hover:not(:disabled) {
+  background: var(--surface2);
+  color: var(--text);
+}
+
+.nav-btn:disabled {
+  opacity: 0.3;
+  cursor: default;
+}
+
+.address-bar-wrapper {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 0 12px;
+  height: 32px;
+  transition: border-color 0.2s;
+}
+
+.address-bar-wrapper:focus-within {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.1);
+}
+
+.ssl-indicator {
+  font-size: 14px;
+  margin-right: 8px;
+}
+
+.ssl-secure { color: var(--green); }
+.ssl-insecure { color: var(--red); }
+
+.address-bar {
+  flex: 1;
+  background: none;
+  border: none;
+  color: var(--text);
+  font-size: 13px;
+  font-family: 'SF Mono', 'Menlo', monospace;
+  outline: none;
+}
+
+.address-bar::placeholder {
+  color: var(--muted);
+  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
+}
+
+/* ── Bookmark Star ────────────────────────────────────────── */
+.bookmark-star {
+  background: none;
+  border: none;
+  color: var(--muted);
+  font-size: 18px;
+  cursor: pointer;
+  padding: 0 4px;
+  transition: color 0.15s;
+}
+
+.bookmark-star:hover { color: var(--amber); }
+.bookmark-star.active { color: var(--amber); }
+
+/* ── Phantom Mode Bar ────────────────────────────────────── */
+.phantom-bar {
+  display: flex;
+  align-items: center;
+  height: 28px;
+  background: linear-gradient(90deg, rgba(168,85,247,0.12), rgba(168,85,247,0.06));
+  border-bottom: 1px solid rgba(168,85,247,0.25);
+  padding: 0 16px;
+  gap: 10px;
+  font-size: 11px;
+}
+
+.phantom-bar.hidden { display: none; }
+
+.phantom-pulse {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #a855f7;
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(168,85,247,0.4); }
+  50% { opacity: 0.7; box-shadow: 0 0 0 6px rgba(168,85,247,0); }
+}
+
+.phantom-label {
+  color: #a855f7;
+  font-weight: 700;
+  letter-spacing: 1px;
+  font-family: 'SF Mono', monospace;
+}
+
+.phantom-info {
+  color: rgba(168,85,247,0.6);
+  flex: 1;
+  font-family: 'SF Mono', monospace;
+}
+
+.phantom-timer {
+  color: #a855f7;
+  font-family: 'SF Mono', monospace;
+  font-weight: 600;
+}
+
+.phantom-destroy-btn {
+  background: none;
+  border: 1px solid rgba(239,68,68,0.3);
+  color: #ef4444;
+  padding: 2px 10px;
+  border-radius: 5px;
+  font-size: 10px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.phantom-destroy-btn:hover {
+  background: rgba(239,68,68,0.1);
+  border-color: #ef4444;
+}
+
+.toolbar-btn.phantom-active {
+  color: var(--purple);
+  border-color: var(--purple);
+  background: rgba(168, 85, 247, 0.15);
+  animation: pulse 2s ease-in-out infinite;
+}
+
+/* ── Bookmarks Bar ───────────────────────────────────────── */
+.bookmarks-bar {
+  display: flex;
+  align-items: center;
+  height: 28px;
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+  padding: 0 12px 0 80px;
+  gap: 4px;
+}
+
+.bookmarks-container {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex: 1;
+  overflow-x: auto;
+}
+
+.bookmarks-container::-webkit-scrollbar { height: 0; }
+
+.bookmarks-empty {
+  font-size: 11px;
+  color: var(--muted);
+  opacity: 0.5;
+}
+
+.bm-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 11px;
+  color: var(--muted);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: all 0.15s;
+  border: 1px solid transparent;
+}
+
+.bm-item:hover {
+  background: var(--surface2);
+  color: var(--text);
+  border-color: var(--border);
+}
+
+.bm-item img { width: 14px; height: 14px; border-radius: 2px; }
+
+.all-bookmarks-btn {
+  background: none;
+  border: none;
+  color: var(--muted);
+  font-size: 14px;
+  cursor: pointer;
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+.all-bookmarks-btn:hover { background: var(--surface2); color: var(--text); }
+
+/* ── Zoom Controls ───────────────────────────────────────── */
+.zoom-controls {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 0 2px;
+  height: 28px;
+}
+
+.zoom-btn {
+  background: none;
+  border: none;
+  color: var(--muted);
+  font-size: 14px;
+  width: 22px;
+  height: 22px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  font-weight: 700;
+}
+
+.zoom-btn:hover { background: var(--surface2); color: var(--text); }
+
+.zoom-level {
+  font-size: 10px;
+  font-family: 'SF Mono', monospace;
+  color: var(--muted);
+  min-width: 32px;
+  text-align: center;
+}
+
+.toolbar-separator {
+  width: 1px;
+  height: 20px;
+  background: var(--border);
+  margin: 0 4px;
+}
+
+.toolbar-actions {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}
+
+.toolbar-btn {
+  background: none;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  color: var(--muted);
+  font-size: 16px;
+  width: 32px;
+  height: 32px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  transition: all 0.15s;
+}
+
+.toolbar-btn:hover {
+  background: var(--surface2);
+  color: var(--text);
+}
+
+.toolbar-btn.shield-active {
+  color: var(--green);
+}
+
+.toolbar-btn.tor-active {
+  color: var(--purple);
+  border-color: var(--purple);
+  background: rgba(168, 85, 247, 0.1);
+}
+
+.blocked-badge {
+  position: absolute;
+  top: -2px;
+  right: -4px;
+  background: var(--green);
+  color: #000;
+  font-size: 9px;
+  font-weight: 700;
+  padding: 1px 4px;
+  border-radius: 8px;
+  min-width: 14px;
+  text-align: center;
+  transition: transform 0.15s;
+}
+
+.blocked-badge.pop {
+  animation: badgePop 0.3s ease;
+}
+
+@keyframes badgePop {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.4); }
+  100% { transform: scale(1); }
+}
+
+/* ── Security Sidebar ────────────────────────────────────── */
+.security-sidebar {
+  position: fixed;
+  top: var(--chrome-height);
+  right: 0;
+  width: 300px;
+  height: calc(100vh - var(--chrome-height));
+  background: var(--surface);
+  border-left: 1px solid var(--border);
+  z-index: 100;
+  overflow-y: auto;
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
+}
+
+.security-sidebar.hidden {
+  transform: translateX(100%);
+  opacity: 0;
+  pointer-events: none;
+}
+
+.sidebar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border);
+}
+
+.sidebar-header h3 {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  color: var(--muted);
+  font-size: 20px;
+  cursor: pointer;
+}
+
+.sidebar-content {
+  padding: 8px;
+}
+
+.security-section {
+  padding: 12px;
+  margin-bottom: 4px;
+  border-radius: 8px;
+  background: var(--bg);
+}
+
+.security-section h4 {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--muted);
+  margin-bottom: 8px;
+}
+
+.privacy-score-container {
+  text-align: center;
+  padding: 12px 0;
+}
+
+.privacy-score {
+  font-size: 48px;
+  font-weight: 700;
+  font-family: 'SF Mono', monospace;
+  color: var(--green);
+}
+
+.privacy-score-label {
+  font-size: 11px;
+  color: var(--muted);
+  margin-top: 4px;
+}
+
+.info-rows {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.info-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.info-row .label {
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.info-row .value {
+  font-family: 'SF Mono', monospace;
+  font-size: 12px;
+}
+
+.badge-green { color: var(--green); }
+.badge-amber { color: var(--amber); }
+.badge-red { color: var(--red); }
+
+.tor-circuit {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 12px;
+}
+
+.tor-disabled {
+  color: var(--muted);
+  font-style: italic;
+}
+
+.tor-node {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px;
+  background: var(--surface2);
+  border-radius: 4px;
+  font-size: 11px;
+  font-family: 'SF Mono', monospace;
+}
+
+.tor-node::before {
+  content: '';
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--purple);
+}
+
+#network-canvas {
+  width: 100%;
+  height: 200px;
+  border-radius: 6px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+}

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "commonjs",
+    "lib": ["ES2022"],
+    "outDir": "dist-electron",
+    "rootDir": "src",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "declaration": false,
+    "sourceMap": true
+  },
+  "include": ["src/main/**/*", "src/preload/**/*"],
+  "exclude": ["node_modules", "dist", "dist-electron"]
+}