| <!DOCTYPE html>
|
| <html lang="en">
|
|
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>RedactAI — Dashboard</title>
|
| <link rel="stylesheet" href="styles.css">
|
| <link rel="stylesheet" href="dashboard.css">
|
| <link rel="icon" href="logo.png">
|
| </head>
|
|
|
| <body>
|
|
|
| <div class="global-switcher"> |
| <a href="index.html" class="active global-link"><i data-lucide="shield-check"></i> REDACT-AI</a> |
| </div> |
|
|
| <aside class="sidebar" id="sidebar">
|
| <div class="sidebar__header">
|
| <a href="index.html" class="navbar__logo">
|
| <svg class="logo-svg" viewBox="0 0 48 48" width="36" height="36" xmlns="http://www.w3.org/2000/svg"
|
| style="margin-right:8px;">
|
| <g fill="#555555" class="logo-bars">
|
| <rect x="10" y="12" width="4" height="24" rx="2" />
|
| <rect x="18" y="6" width="4" height="36" rx="2" />
|
| <rect x="26" y="14" width="4" height="20" rx="2" />
|
| <rect x="34" y="10" width="4" height="28" rx="2" />
|
| </g>
|
| <rect class="logo-redaction" x="8" y="20" width="32" height="8" rx="2" fill="#ffffff" />
|
| </svg>
|
| <div class="navbar__logo-text">Redact<span>AI</span></div>
|
| </a>
|
| </div>
|
| <nav class="sidebar__nav">
|
| <button class="sidebar__link active" data-page="overview" id="nav-overview" onclick="switchPage('overview')">
|
| <span class="sidebar__icon"><i data-lucide="bar-chart-2"></i></span> <span class="sidebar__link-text">Overview</span>
|
| </button>
|
| <button class="sidebar__link" data-page="scanner" id="nav-scanner" onclick="switchPage('scanner')"> |
| <span class="sidebar__icon"><i data-lucide="shield-check"></i></span> <span class="sidebar__link-text">Scanner</span> |
| </button> |
| <button class="sidebar__link" data-page="dpdp-quick" id="nav-dpdp-quick" onclick="switchPage('dpdp-quick')"> |
| <span class="sidebar__icon"><i data-lucide="check-circle"></i></span> <span class="sidebar__link-text">DPDP Quick</span> |
| </button> |
| <button class="sidebar__link" data-page="data-flow" id="nav-data-flow" onclick="switchPage('data-flow')"> |
| <span class="sidebar__icon"><i data-lucide="workflow"></i></span> <span class="sidebar__link-text">Data Flow</span> |
| </button> |
| <button class="sidebar__link" data-page="prompt-scanner" id="nav-prompt-scanner" onclick="switchPage('prompt-scanner')">
|
| <span class="sidebar__icon"><i data-lucide="terminal-square"></i></span> <span class="sidebar__link-text">Prompt Scanner</span>
|
| </button>
|
| <button class="sidebar__link" data-page="ai-leak" id="nav-ai-leak" onclick="switchPage('ai-leak')"> |
| <span class="sidebar__icon"><i data-lucide="scan-search"></i></span> <span class="sidebar__link-text">AI Leak Scan</span> |
| </button> |
| <button class="sidebar__link" data-page="synthetic-attack" id="nav-synthetic-attack" onclick="switchPage('synthetic-attack')"> |
| <span class="sidebar__icon"><i data-lucide="syringe"></i></span> <span class="sidebar__link-text">Synthetic Tests</span> |
| </button> |
| <button class="sidebar__link" data-page="files" id="nav-files" onclick="switchPage('files')">
|
| <span class="sidebar__icon"><i data-lucide="folder"></i></span> <span class="sidebar__link-text">File Upload</span>
|
| </button>
|
| <button class="sidebar__link" data-page="history" id="nav-history" onclick="switchPage('history')">
|
| <span class="sidebar__icon"><i data-lucide="clipboard-list"></i></span> <span class="sidebar__link-text">History</span>
|
| </button>
|
| <button class="sidebar__link" data-page="api" id="nav-api" onclick="switchPage('api')">
|
| <span class="sidebar__icon"><i data-lucide="key"></i></span> <span class="sidebar__link-text">API Keys</span>
|
| </button>
|
|
|
| </nav>
|
| <div class="sidebar__footer" style="position: relative;">
|
| <div class="sidebar__plan">
|
| <div class="sidebar__plan-label">Free Plan</div>
|
| <div class="sidebar__plan-usage">
|
| <div class="sidebar__plan-bar">
|
| <div class="sidebar__plan-fill" style="width:34%"></div>
|
| </div>
|
| <span id="usage-count">0 / 1,000 docs</span>
|
| </div>
|
| <button class="btn btn--primary btn--small" style="width:100%;justify-content:center;margin-top:10px;" onclick="switchPage('plan')">Upgrade Plan</button>
|
| </div>
|
|
|
|
|
| <div class="profile-dropdown" id="profile-dropdown">
|
| <div class="profile-dropdown__header">
|
| <div class="profile-avatar">BK</div>
|
| <div class="profile-info">
|
| <div class="profile-name">Bbook</div>
|
| <div class="profile-role">Personal account</div>
|
| </div>
|
| </div>
|
| <div class="profile-dropdown__divider"></div>
|
| <button class="profile-dropdown__item" onclick="openThemeModal(); closeProfileDropdown();">
|
| <i data-lucide="zap"></i> Personalization
|
| </button>
|
| <button class="profile-dropdown__item" onclick="openProfileModal(); closeProfileDropdown();">
|
| <i data-lucide="user"></i> Profile
|
| </button>
|
| <button class="profile-dropdown__item" onclick="switchPage('settings'); closeProfileDropdown();">
|
| <i data-lucide="settings"></i> Settings
|
| </button>
|
| <div class="profile-dropdown__item has-submenu">
|
| <span style="display:flex;align-items:center;gap:12px;width:100%;"><i data-lucide="life-buoy"></i> Help <i data-lucide="chevron-right" style="margin-left:auto;width:14px;height:14px;"></i></span>
|
| <div class="profile-submenu">
|
| <button class="profile-dropdown__item"><i data-lucide="help-circle"></i> Help center</button>
|
| <button class="profile-dropdown__item"><i data-lucide="edit-3"></i> Release notes</button>
|
| <button class="profile-dropdown__item"><i data-lucide="arrow-down-circle"></i> Download apps</button>
|
| <button class="profile-dropdown__item"><i data-lucide="command"></i> Keyboard shortcuts</button>
|
| <div class="profile-dropdown__divider"></div>
|
| <button class="profile-dropdown__item"><i data-lucide="file-text"></i> Terms of Service</button>
|
| <button class="profile-dropdown__item"><i data-lucide="info"></i> Privacy Policy</button>
|
| <button class="profile-dropdown__item"><i data-lucide="bug"></i> Report a bug</button>
|
| </div>
|
| </div>
|
| <div class="profile-dropdown__divider"></div>
|
| <button class="profile-dropdown__item text-danger" onclick="window.location.href='index.html'">
|
| <i data-lucide="log-out"></i> Log out
|
| </button>
|
| </div>
|
|
|
| <div class="sidebar__profile" onclick="toggleProfileDropdown(event)">
|
| <div class="profile-avatar">BK</div>
|
| <div class="profile-info">
|
| <div class="profile-name">Bbook</div>
|
| <div class="profile-role">Personal account</div>
|
| </div>
|
| </div>
|
| </div>
|
| </aside>
|
|
|
|
|
| <main class="dash-main">
|
|
|
| <header class="topbar">
|
| <div class="topbar__left">
|
| <button class="topbar__menu" id="menu-toggle">☰</button>
|
| <h2 class="topbar__title" id="page-title">Overview</h2>
|
| </div>
|
| <div class="topbar__right">
|
| <div class="topbar__search">
|
| <span><i data-lucide="search"></i></span>
|
| <input type="text" placeholder="Search..." id="global-search">
|
| </div>
|
| <button class="topbar__notif" id="notif-btn"><i data-lucide="bell"></i> <span
|
| class="topbar__badge">3</span></button>
|
| </div>
|
| </header>
|
|
|
|
|
| <div class="page active" id="page-overview">
|
| <style>
|
| @keyframes scanline {
|
| 0% { transform: translateY(0); opacity: 0; }
|
| 10% { opacity: 1; }
|
| 90% { opacity: 1; }
|
| 100% { transform: translateY(180px); opacity: 0; }
|
| }
|
| @keyframes pulse-green {
|
| 0% { box-shadow: 0 0 0 0 rgba(50, 215, 75, 0.4); }
|
| 70% { box-shadow: 0 0 0 6px rgba(50, 215, 75, 0); }
|
| 100% { box-shadow: 0 0 0 0 rgba(50, 215, 75, 0); }
|
| }
|
| .overview-command-card {
|
| margin-bottom: 24px; border: 1px solid rgba(34, 211, 238, 0.3); background: linear-gradient(145deg, rgba(20,20,25,0.9), rgba(10,15,25,0.9)); position: relative; overflow: hidden; border-radius: 16px;
|
| }
|
| .overview-command-card::after {
|
| content: ''; position: absolute; top: -100%; left: 0; right: 0; height: 100%; background: linear-gradient(to bottom, transparent, rgba(34, 211, 238, 0.1), rgba(34, 211, 238, 0.3)); animation: scanline 4s linear infinite; pointer-events: none; border-bottom: 1px solid #22d3ee; box-shadow: 0 5px 15px rgba(34,211,238,0.2);
|
| }
|
| .live-log-entry { animation: fadeIn 0.3s ease-out; }
|
| </style>
|
|
|
|
|
| <div class="overview-command-card">
|
| <div style="display:flex; justify-content:space-between; align-items:center; padding: 32px; position:relative; z-index:1;">
|
| <div style="display: flex; align-items: center; gap: 32px;">
|
| <div style="position:relative; width: 120px; height: 120px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: conic-gradient(#32d74b 0% 98%, rgba(255,255,255,0.1) 98% 100%); box-shadow: 0 0 40px rgba(50,215,75,0.15);">
|
| <div style="position: absolute; inset: 10px; background: var(--bg-card); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column;">
|
| <span style="font-size: 36px; font-weight: 800; color: #32d74b; line-height: 1;">98<span style="font-size:18px">%</span></span>
|
| <span style="font-size: 10px; color: var(--text-muted); text-transform:uppercase; letter-spacing:1px; margin-top:4px;">Secure</span>
|
| </div>
|
| </div>
|
| <div>
|
| <h2 style="font-size: 26px; color: #fff; margin-bottom: 10px; font-weight: 700; letter-spacing: -0.5px;"><i data-lucide="shield-check" style="color:#32d74b; vertical-align:middle; margin-top:-4px;"></i> Network Posture: Optimal</h2>
|
| <p style="color: var(--text-secondary); font-size: 14px; max-width: 550px; line-height: 1.6;">RedactAI Cyber-Sentinel is actively monitoring incoming API traffic. All database endpoints are secured and DPDP compliance is being enforced in real-time across 4 zones.</p>
|
| <div style="margin-top: 20px; display: flex; gap: 12px;">
|
| <span class="badge badge--success" style="font-size: 12px; padding: 6px 12px;"><span style="display:inline-block; width:8px; height:8px; border-radius:50%; background:#32d74b; margin-right:6px; animation: pulse-green 2s infinite;"></span> Active Defense Grid</span>
|
| <span class="badge badge--neutral" style="font-size: 12px; padding: 6px 12px;"><i data-lucide="server" style="width:12px; height:12px; margin-right:4px; vertical-align:middle; display:inline-block;"></i> Zero-Trust Engine</span>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div style="width: 400px; height: 140px; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 16px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #32d74b; overflow: hidden; position: relative; box-shadow: inset 0 0 20px rgba(0,0,0,0.8);">
|
| <div style="color: var(--text-muted); margin-bottom: 12px; font-size: 10px; text-transform: uppercase; letter-spacing:1px; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 6px;">Live Intercept Log — <span style="color:#22d3ee;">Auto-Scrolling</span></div>
|
| <div id="live-intercept-log" style="line-height: 1.8; opacity: 0.9;">
|
| <div class="live-log-entry">> [15:34:21] Analyzing payload from 192.168.1.42...</div>
|
| <div class="live-log-entry">> [15:34:21] <span style="color:#ff4545;">Threat: Unmasked SSN detected.</span></div>
|
| <div class="live-log-entry">> [15:34:22] <span style="color:#ffd60a;">Redacting 14 bytes (latency: 12ms).</span></div>
|
| <div class="live-log-entry">> [15:34:22] Clean payload forwarded to LLM endpoint.</div>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="dash-grid-4">
|
| <div class="metric-card" style="--glow-color: rgba(34,211,238,0.15); border-color: rgba(34,211,238,0.2);">
|
| <div class="metric-card__header">
|
| <div class="metric-card__icon-wrap" style="color: #22d3ee; background: rgba(34,211,238,0.1); border-color: rgba(34,211,238,0.2);">
|
| <i data-lucide="activity"></i>
|
| </div>
|
| <div class="metric-card__trend positive" id="trend-scans"><i data-lucide="trending-up"></i> Live</div>
|
| </div>
|
| <div class="metric-card__content">
|
| <div class="metric-card__label">Packets Analyzed</div>
|
| <div class="metric-card__value" id="metric-scans">892,401</div>
|
| </div>
|
| </div>
|
| <div class="metric-card" style="--glow-color: rgba(255,69,69,0.15); border-color: rgba(255,69,69,0.2);">
|
| <div class="metric-card__header">
|
| <div class="metric-card__icon-wrap" style="color: #ff4545; background: rgba(255,69,69,0.1); border-color: rgba(255,69,69,0.2);">
|
| <i data-lucide="crosshair"></i>
|
| </div>
|
| <div class="metric-card__trend negative" id="trend-pii"><i data-lucide="trending-up"></i> +4.2%</div>
|
| </div>
|
| <div class="metric-card__content">
|
| <div class="metric-card__label">Threats Neutralized</div>
|
| <div class="metric-card__value" id="metric-pii">12,841</div>
|
| </div>
|
| </div>
|
| <div class="metric-card" style="--glow-color: rgba(50,215,75,0.15); border-color: rgba(50,215,75,0.2);">
|
| <div class="metric-card__header">
|
| <div class="metric-card__icon-wrap" style="color: #32d74b; background: rgba(50,215,75,0.1); border-color: rgba(50,215,75,0.2);">
|
| <i data-lucide="shield-alert"></i>
|
| </div>
|
| <div class="metric-card__trend positive" id="trend-redacted"><i data-lucide="check-circle"></i> Enforced</div>
|
| </div>
|
| <div class="metric-card__content">
|
| <div class="metric-card__label">DPDP Compliance</div>
|
| <div class="metric-card__value" id="metric-redacted">100%</div>
|
| </div>
|
| </div>
|
| <div class="metric-card" style="--glow-color: rgba(255,214,10,0.15); border-color: rgba(255,214,10,0.2);">
|
| <div class="metric-card__header">
|
| <div class="metric-card__icon-wrap" style="color: #ffd60a; background: rgba(255,214,10,0.1); border-color: rgba(255,214,10,0.2);">
|
| <i data-lucide="zap"></i>
|
| </div>
|
| <div class="metric-card__trend positive" id="trend-ms"><i data-lucide="trending-down"></i> -5ms</div>
|
| </div>
|
| <div class="metric-card__content">
|
| <div class="metric-card__label">Global Latency</div>
|
| <div class="metric-card__value" id="metric-ms">14ms</div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="dash-grid-2">
|
| <div class="chart-card">
|
| <div class="chart-card__header">
|
| <h3><i data-lucide="trending-up"></i> Scans Over Time</h3>
|
| <select class="chart-select" id="chart-range">
|
| <option value="7">Last 7 days</option>
|
| <option value="30" selected>Last 30 days</option>
|
| <option value="90">Last 90 days</option>
|
| </select>
|
| </div>
|
| <div class="chart-area" id="chart-scans">
|
| <canvas id="canvas-scans"></canvas>
|
| </div>
|
| </div>
|
| <div class="chart-card">
|
| <div class="chart-card__header">
|
| <h3><i data-lucide="crosshair"></i> PII Types Breakdown</h3>
|
| </div>
|
| <div class="chart-area" id="chart-types">
|
| <div class="donut-chart" id="donut-chart"></div>
|
| <div class="donut-legend" id="donut-legend"></div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="chart-card">
|
| <div class="chart-card__header">
|
| <h3><i data-lucide="clock"></i> Recent Scans</h3>
|
| <button class="btn btn--ghost btn--small" onclick="switchPage('history')">View All <i
|
| data-lucide="arrow-right"></i></button>
|
| </div>
|
| <div class="table-wrap">
|
| <table class="data-table" id="recent-table">
|
| <thead>
|
| <tr>
|
| <th>Time</th>
|
| <th>Source</th>
|
| <th>Entities Found</th>
|
| <th>Types</th>
|
| <th>Status</th>
|
| <th>Actions</th>
|
| </tr>
|
| </thead>
|
| <tbody id="recent-tbody"></tbody>
|
| </table>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="page" id="page-scanner">
|
| <div class="app-card">
|
| <div class="app-card__header">
|
| <div class="app-card__title"><i data-lucide="shield-check"></i> PII Scanner</div>
|
| <div class="app-card__actions">
|
| <div class="toggle-group">
|
| <button class="toggle-group__btn active" data-mode="highlight">Highlight</button>
|
| <button class="toggle-group__btn" data-mode="redact">Redact</button>
|
| </div>
|
| <button class="btn btn--ghost btn--small" id="scan-btn-sample"><i data-lucide="file-text"></i>
|
| Sample</button>
|
| <button class="btn btn--ghost btn--small" id="scan-btn-clear"><i data-lucide="x"></i> Clear</button>
|
| <button class="btn btn--primary btn--small" id="scan-btn-copy"><i data-lucide="clipboard-list"></i> Copy
|
| Redacted</button>
|
| </div>
|
| </div>
|
| <div class="editor-layout">
|
| <div class="editor-pane">
|
| <div class="editor-pane__label"><i data-lucide="download"></i> Input — Paste your text</div>
|
| <textarea id="scan-input" placeholder="Paste text containing personal information here..."></textarea>
|
| </div>
|
| <div class="editor-pane">
|
| <div class="editor-pane__label"><i data-lucide="upload"></i> Output — Detected PII</div>
|
| <div class="output-area" id="scan-output"></div>
|
| </div>
|
| </div>
|
| </div>
|
| <div class="entities-panel">
|
| <div class="entities-panel__title"><i data-lucide="search"></i> Detected Entities: <span id="scan-entity-count"
|
| style="color:var(--accent-light);">0</span></div>
|
| <div class="entities-grid" id="scan-entities-grid"></div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="page" id="page-data-flow"> |
| <div class="flow-hero">
|
| <div>
|
| <div class="flow-kicker"><i data-lucide="workflow"></i> PII Movement Intelligence</div>
|
| <h2>Map how personal data moves through your product.</h2>
|
| <p>Turn a public product URL into a first-party, cookie, tracker, AI processor, and compliance data-flow map with risk-ranked edges and concrete controls.</p>
|
| </div>
|
| <div class="flow-legend">
|
| <span><i class="flow-dot flow-dot--low"></i> Controlled</span>
|
| <span><i class="flow-dot flow-dot--medium"></i> Review</span>
|
| <span><i class="flow-dot flow-dot--high"></i> High risk</span>
|
| <span><i class="flow-dot flow-dot--critical"></i> Critical</span>
|
| </div>
|
| </div>
|
|
|
| <div class="flow-scan-card">
|
| <div class="flow-form">
|
| <div>
|
| <label class="form-label">Product URL</label>
|
| <input type="url" class="form-input" id="flow-url" placeholder="https://your-product.com">
|
| </div>
|
| <label class="ai-leak-toggle">
|
| <input type="checkbox" id="flow-trackers" checked>
|
| <span>Trackers</span>
|
| </label>
|
| <label class="ai-leak-toggle">
|
| <input type="checkbox" id="flow-cookies" checked>
|
| <span>Cookies</span>
|
| </label>
|
| <label class="ai-leak-toggle"> |
| <input type="checkbox" id="flow-ai" checked> |
| <span>AI</span> |
| </label> |
| <label class="ai-leak-toggle"> |
| <input type="checkbox" id="flow-runtime" checked> |
| <span>Runtime</span> |
| </label> |
| <button class="btn btn--primary" id="flow-scan-btn"><i data-lucide="route"></i> Map Data Flow</button> |
| </div> |
| <div class="flow-progress" id="flow-progress" style="display:none;">
|
| <span></span>
|
| <div>Scanning forms, cookies, trackers, processors, and public PII paths...</div>
|
| </div>
|
| </div>
|
|
|
| <div class="flow-empty" id="flow-empty">
|
| <i data-lucide="network"></i>
|
| <div>
|
| <strong>No map yet</strong>
|
| <span>Enter a product URL to build a PII movement graph and compliance control map.</span>
|
| </div>
|
| </div>
|
|
|
| <div class="flow-results" id="flow-results" style="display:none;">
|
| <div class="flow-summary">
|
| <div>
|
| <span id="flow-score">0</span>
|
| <label id="flow-level">low risk</label>
|
| </div>
|
| <div>
|
| <span id="flow-node-count">0</span>
|
| <label>Nodes</label>
|
| </div>
|
| <div>
|
| <span id="flow-edge-count">0</span>
|
| <label>Flows</label>
|
| </div>
|
| <div>
|
| <span id="flow-processor-count">0</span>
|
| <label>Processors</label>
|
| </div>
|
| <div>
|
| <span id="flow-high-count">0</span>
|
| <label>High-risk flows</label>
|
| </div>
|
| </div>
|
|
|
| <div class="flow-layout">
|
| <div class="flow-map-card">
|
| <div class="chart-card__header">
|
| <h3><i data-lucide="git-branch"></i> Movement Map</h3>
|
| <span class="badge" id="flow-domain">domain</span>
|
| </div>
|
| <div class="flow-map" id="flow-map"></div>
|
| </div>
|
|
|
| <div class="flow-side">
|
| <div class="chart-card"> |
| <div class="chart-card__header"> |
| <h3><i data-lucide="server-cog"></i> Services</h3> |
| </div> |
| <div class="flow-chip-list" id="flow-services"></div> |
| </div> |
| <div class="chart-card"> |
| <div class="chart-card__header"> |
| <h3><i data-lucide="fingerprint"></i> PII Types</h3> |
| </div> |
| <div class="flow-chip-list" id="flow-pii-types"></div> |
| </div> |
| <div class="chart-card">
|
| <div class="chart-card__header">
|
| <h3><i data-lucide="shield-alert"></i> Controls</h3>
|
| </div>
|
| <ol class="flow-remediation" id="flow-remediation"></ol>
|
| </div>
|
| </div>
|
| </div> |
|
|
| <div class="chart-card"> |
| <div class="chart-card__header"> |
| <h3><i data-lucide="radio-tower"></i> API Calls & Provider Evidence</h3> |
| <span class="badge" id="flow-api-count">0 calls</span> |
| </div> |
| <div class="table-wrap"> |
| <table class="data-table"> |
| <thead> |
| <tr> |
| <th>Host</th> |
| <th>Type</th> |
| <th>Observed In</th> |
| <th>Evidence</th> |
| </tr> |
| </thead> |
| <tbody id="flow-api-table"></tbody> |
| </table> |
| </div> |
| </div> |
|
|
| <div class="chart-card"> |
| <div class="chart-card__header">
|
| <h3><i data-lucide="list-tree"></i> Flow Register</h3>
|
| <span class="badge" id="flow-register-count">0 rows</span>
|
| </div>
|
| <div class="table-wrap">
|
| <table class="data-table">
|
| <thead>
|
| <tr>
|
| <th>From</th>
|
| <th>To</th>
|
| <th>Movement</th>
|
| <th>Data</th>
|
| <th>Risk</th>
|
| <th>Control</th>
|
| </tr>
|
| </thead>
|
| <tbody id="flow-register"></tbody>
|
| </table>
|
| </div>
|
| </div>
|
| </div> |
| </div> |
|
|
| |
| <div class="page" id="page-dpdp-quick"> |
| <div class="tool-hero dpdp-hero"> |
| <div> |
| <div class="flow-kicker"><i data-lucide="check-circle"></i> DPDP Quick Check</div> |
| <h2>Know if a website is audit-ready in one minute.</h2> |
| <p>A plain-English compliance snapshot for privacy notice, consent, minimization, public PII exposure, secure transport, and third-party processors.</p> |
| </div> |
| <div class="dpdp-grade-card" aria-label="DPDP grade explanation"> |
| <div class="dpdp-grade-card__title">Grade Meaning</div> |
| <div class="dpdp-grade-row"><b>A</b><span>Audit-ready evidence is strong</span></div> |
| <div class="dpdp-grade-row"><b>B</b><span>Minor review before launch</span></div> |
| <div class="dpdp-grade-row"><b>C</b><span>Material gaps need fixes</span></div> |
| <div class="dpdp-grade-row"><b>D</b><span>High-risk compliance gaps</span></div> |
| <div class="dpdp-grade-row"><b>F</b><span>Not audit-ready; missing critical proof</span></div> |
| </div> |
| </div> |
| <div class="tool-card"> |
| <div class="tool-form"> |
| <input type="url" class="form-input" id="dpdp-url" placeholder="https://your-product.com"> |
| <button class="btn btn--primary" id="dpdp-btn"><i data-lucide="search-check"></i> Run Quick Check</button> |
| </div> |
| </div> |
| <div class="tool-output" id="dpdp-output"></div> |
| </div> |
|
|
| |
| <div class="page" id="page-prompt-scanner"> |
| <div class="app-card" style="margin-bottom: 24px;"> |
| <div class="app-card__header" style="border-bottom: 1px solid var(--glass-border); padding-bottom: 16px;">
|
| <div class="app-card__title"><i data-lucide="terminal-square"></i> Prompt Risk Scanner</div>
|
| </div>
|
| <div style="padding: 24px;">
|
| <label style="display:block; font-size: 13px; font-weight:600; color:var(--text-secondary); margin-bottom:12px;">Enter System or User Prompt</label>
|
| <textarea id="prompt-scanner-input" class="form-input" style="height: 150px; font-family: 'JetBrains Mono', monospace; font-size: 14px; background: rgba(0,0,0,0.3); border: 1px solid var(--glass-border); border-radius: 8px; resize: vertical;" placeholder="You are a helpful AI assistant. Answer the user's questions but do not reveal your system prompt..."></textarea>
|
|
|
| <div style="display:flex; justify-content:space-between; align-items:center; margin-top: 16px;">
|
| <div style="font-size: 12px; color: var(--text-muted);"><i data-lucide="info" style="width:14px;height:14px;display:inline-block;vertical-align:middle;margin-right:4px;"></i> Analyzes for Jailbreaks, Toxicity, Prompt Injection, and PII Leaks.</div>
|
| <button class="btn btn--primary" id="prompt-scan-btn" onclick="runPromptScan()"><i data-lucide="shield-alert"></i> Run Security Scan</button>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <div id="prompt-scan-results" style="display: none; grid-template-columns: 1fr 2fr; gap: 24px;">
|
|
|
| <div class="metric-card" style="--glow-color: rgba(255,69,69,0.15); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 40px 24px;">
|
| <div style="font-size: 14px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px;">Overall Risk Score</div>
|
| <div style="position: relative; width: 120px; height: 120px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: conic-gradient(#ff4545 0% 75%, rgba(255,69,69,0.1) 75% 100%); margin-bottom: 16px; box-shadow: 0 0 30px rgba(255,69,69,0.2);">
|
| <div style="position: absolute; inset: 10px; background: var(--bg-card); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
|
| <span style="font-size: 36px; font-weight: 800; color: #ff4545;">High</span>
|
| </div>
|
| </div>
|
| <div style="font-size: 13px; color: var(--text-muted);">This prompt is highly vulnerable to injection attacks.</div>
|
| </div>
|
|
|
|
|
| <div class="app-card" style="height: 100%;">
|
| <div class="app-card__header">
|
| <div class="app-card__title"><i data-lucide="bar-chart-2"></i> Vulnerability Breakdown</div>
|
| </div>
|
| <div style="padding: 24px; display: flex; flex-direction: column; gap: 20px;">
|
|
|
| <div>
|
| <div style="display:flex; justify-content:space-between; margin-bottom: 8px; font-size: 13px;">
|
| <span style="color:var(--text-primary); font-weight: 600;">Prompt Injection</span>
|
| <span style="color:#ff4545; font-weight: 700;">Critical Risk</span>
|
| </div>
|
| <div style="width: 100%; height: 8px; background: rgba(255,255,255,0.05); border-radius: 4px; overflow: hidden;">
|
| <div id="bar-injection" style="width: 0%; height: 100%; background: #ff4545; box-shadow: 0 0 10px #ff4545; transition: width 1s cubic-bezier(0.16, 1, 0.3, 1);"></div>
|
| </div>
|
| </div>
|
|
|
| <div>
|
| <div style="display:flex; justify-content:space-between; margin-bottom: 8px; font-size: 13px;">
|
| <span style="color:var(--text-primary); font-weight: 600;">Jailbreak Resistance</span>
|
| <span style="color:#ffd60a; font-weight: 700;">Medium Risk</span>
|
| </div>
|
| <div style="width: 100%; height: 8px; background: rgba(255,255,255,0.05); border-radius: 4px; overflow: hidden;">
|
| <div id="bar-jailbreak" style="width: 0%; height: 100%; background: #ffd60a; box-shadow: 0 0 10px #ffd60a; transition: width 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;"></div>
|
| </div>
|
| </div>
|
|
|
| <div>
|
| <div style="display:flex; justify-content:space-between; margin-bottom: 8px; font-size: 13px;">
|
| <span style="color:var(--text-primary); font-weight: 600;">PII Exfiltration</span>
|
| <span style="color:#32d74b; font-weight: 700;">Safe</span>
|
| </div>
|
| <div style="width: 100%; height: 8px; background: rgba(255,255,255,0.05); border-radius: 4px; overflow: hidden;">
|
| <div id="bar-pii" style="width: 0%; height: 100%; background: #32d74b; box-shadow: 0 0 10px #32d74b; transition: width 1s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;"></div>
|
| </div>
|
| </div>
|
|
|
| <div>
|
| <div style="display:flex; justify-content:space-between; margin-bottom: 8px; font-size: 13px;">
|
| <span style="color:var(--text-primary); font-weight: 600;">Toxicity / Bias</span>
|
| <span style="color:#32d74b; font-weight: 700;">Safe</span>
|
| </div>
|
| <div style="width: 100%; height: 8px; background: rgba(255,255,255,0.05); border-radius: 4px; overflow: hidden;">
|
| <div id="bar-toxicity" style="width: 0%; height: 100%; background: #32d74b; box-shadow: 0 0 10px #32d74b; transition: width 1s cubic-bezier(0.16, 1, 0.3, 1) 0.6s;"></div>
|
| </div>
|
| </div>
|
|
|
| </div>
|
| </div>
|
| </div> |
| </div> |
|
|
| |
| <div class="page" id="page-synthetic-attack"> |
| <div class="tool-hero"> |
| <div> |
| <div class="flow-kicker"><i data-lucide="syringe"></i> Synthetic Attack Suite</div> |
| <h2>Test privacy defenses with fake data, not customer data.</h2> |
| <p>Generate safe PII and prompt-injection payloads for staging, logs, AI prompts, analytics, exports, and redaction regression tests.</p> |
| </div> |
| </div> |
| <div class="tool-card"> |
| <div class="tool-form tool-form--three"> |
| <select class="form-input" id="synthetic-industry"> |
| <option value="saas">SaaS</option> |
| <option value="healthcare">Healthcare</option> |
| <option value="fintech">Fintech</option> |
| <option value="support">Customer support</option> |
| </select> |
| <input type="number" class="form-input" id="synthetic-volume" value="12" min="3" max="50"> |
| <button class="btn btn--primary" id="synthetic-btn"><i data-lucide="flask-conical"></i> Generate Suite</button> |
| </div> |
| </div> |
| <div class="tool-output" id="synthetic-output"></div> |
| </div> |
|
|
| |
| <div class="page" id="page-ai-leak">
|
| <div class="ai-leak-hero">
|
| <div>
|
| <div class="ai-leak-kicker"><i data-lucide="radar"></i> Public AI Exposure Intelligence</div>
|
| <h2>Find leaked model routes, prompts, and AI provider keys before attackers do.</h2>
|
| <p>Scan your product's public surface for shipped LLM credentials, exposed source maps, model names, client-side AI endpoints, RAG traces, and agent framework fingerprints.</p>
|
| </div>
|
| <div class="ai-leak-command">
|
| <div class="ai-leak-command__line"><span>asset</span> app.bundle.js</div>
|
| <div class="ai-leak-command__line"><span>signal</span> /v1/chat/completions</div>
|
| <div class="ai-leak-command__line danger"><span>secret</span> sk-proj...redacted</div>
|
| <div class="ai-leak-command__line"><span>action</span> rotate, proxy, lock source maps</div>
|
| </div>
|
| </div>
|
|
|
| <div class="ai-leak-scan-card">
|
| <div class="ai-leak-form">
|
| <div>
|
| <label class="form-label">Product URL</label>
|
| <input type="url" class="form-input" id="ai-leak-url" placeholder="https://your-product.com">
|
| </div>
|
| <label class="ai-leak-toggle">
|
| <input type="checkbox" id="ai-leak-deep" checked>
|
| <span>Deep crawl pages, JS bundles, metadata, source maps</span>
|
| </label>
|
| <button class="btn btn--primary" id="ai-leak-scan-btn"><i data-lucide="scan-search"></i> Run AI Leak Scan</button>
|
| </div>
|
| <div class="ai-leak-progress" id="ai-leak-progress" style="display:none;">
|
| <div class="ai-leak-progress__bar"><span id="ai-leak-progress-bar"></span></div>
|
| <div class="ai-leak-progress__text" id="ai-leak-progress-text">Fingerprinting public AI surface...</div>
|
| </div>
|
| </div>
|
|
|
| <div class="ai-engine-card">
|
| <div class="chart-card__header">
|
| <h3><i data-lucide="plug"></i> Elite Engines</h3>
|
| <span class="badge" id="ai-engine-status-badge">Checking tools...</span>
|
| </div>
|
| <div class="ai-engine-grid" id="ai-engine-grid"></div>
|
| <div class="ai-engine-actions">
|
| <div>
|
| <label class="form-label">Repo / Code Path</label>
|
| <input type="text" class="form-input" id="repo-ai-path" value="." placeholder=".">
|
| </div>
|
| <label class="ai-leak-toggle ai-engine-toggle">
|
| <input type="checkbox" id="repo-ai-history">
|
| <span>Scan Git history</span>
|
| </label>
|
| <button class="btn btn--outline" id="repo-ai-scan-btn"><i data-lucide="git-branch"></i> Scan Repo</button>
|
| <div>
|
| <label class="form-label">GitHub Repo URL</label>
|
| <input type="url" class="form-input" id="github-ai-url" placeholder="https://github.com/org/repo">
|
| </div>
|
| <label class="ai-leak-toggle ai-engine-toggle">
|
| <input type="checkbox" id="github-ai-history">
|
| <span>History</span>
|
| </label>
|
| <button class="btn btn--outline" id="github-ai-scan-btn"><i data-lucide="git-fork"></i> Scan GitHub</button>
|
| <div>
|
| <label class="form-label">Ignore Fingerprints</label>
|
| <input type="text" class="form-input" id="ai-ignore-fingerprints" placeholder="comma-separated IDs">
|
| </div>
|
| <div>
|
| <label class="form-label">Model Artifact Path</label>
|
| <input type="text" class="form-input" id="model-ai-path" placeholder="models/model.pkl">
|
| </div>
|
| <button class="btn btn--outline" id="model-ai-scan-btn"><i data-lucide="box"></i> Scan Model</button>
|
| <div>
|
| <label class="form-label">LLM App/API Target</label>
|
| <input type="text" class="form-input" id="redteam-ai-target" placeholder="https://api.yourapp.com/chat">
|
| </div>
|
| <button class="btn btn--outline" id="redteam-ai-btn"><i data-lucide="swords"></i> Red-Team Plan</button>
|
| <button class="btn btn--outline" id="guardrails-ai-btn"><i data-lucide="shield-plus"></i> CI Guardrails</button>
|
| <button class="btn btn--outline" id="install-ai-btn"><i data-lucide="terminal"></i> Install Plan</button>
|
| </div>
|
| <div class="ai-engine-output" id="ai-engine-output"></div>
|
| </div>
|
|
|
| <div class="ai-leak-empty" id="ai-leak-empty">
|
| <i data-lucide="shield-check"></i>
|
| <div>
|
| <strong>No scan yet</strong>
|
| <span>Enter a product URL to generate an AI exposure report with redacted evidence and concrete fixes.</span>
|
| </div>
|
| </div>
|
|
|
| <div class="ai-leak-results" id="ai-leak-results" style="display:none;">
|
| <div class="ai-leak-score-card" id="ai-leak-score-card">
|
| <div class="ai-leak-score-card__meta">
|
| <span id="ai-leak-domain">domain</span>
|
| <span id="ai-leak-ms">0ms</span>
|
| </div>
|
| <div class="ai-leak-score-card__body">
|
| <div class="ai-leak-score-ring" id="ai-leak-score-ring">
|
| <div>
|
| <strong id="ai-leak-score">0</strong>
|
| <span id="ai-leak-level">low</span>
|
| </div>
|
| </div>
|
| <div class="ai-leak-score-copy">
|
| <h3 id="ai-leak-verdict">Clean public AI surface</h3>
|
| <p id="ai-leak-verdict-copy">No obvious leaks were found in the scanned assets.</p>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <div class="ai-leak-metrics">
|
| <div><span id="ai-leak-total">0</span><label>Findings</label></div>
|
| <div><span id="ai-leak-critical">0</span><label>Critical</label></div>
|
| <div><span id="ai-leak-assets">0</span><label>Assets</label></div>
|
| <div><span id="ai-leak-pages">0</span><label>Pages</label></div>
|
| </div>
|
|
|
| <div class="ai-leak-grid">
|
| <div class="chart-card">
|
| <div class="chart-card__header">
|
| <h3><i data-lucide="alert-triangle"></i> Exposure Findings</h3>
|
| <span class="badge" id="ai-leak-findings-count">0 detected</span>
|
| </div>
|
| <div class="ai-leak-findings" id="ai-leak-findings"></div>
|
| </div>
|
|
|
| <div class="ai-leak-side">
|
| <div class="chart-card">
|
| <div class="chart-card__header">
|
| <h3><i data-lucide="wrench"></i> Fix Plan</h3>
|
| </div>
|
| <ol class="ai-leak-remediation" id="ai-leak-remediation"></ol>
|
| </div>
|
|
|
| <div class="chart-card">
|
| <div class="chart-card__header">
|
| <h3><i data-lucide="boxes"></i> Detected AI Stack</h3>
|
| </div>
|
| <div class="ai-leak-stack" id="ai-leak-stack"></div>
|
| </div>
|
|
|
| <div class="chart-card">
|
| <div class="chart-card__header">
|
| <h3><i data-lucide="shield-alert"></i> OWASP LLM Map</h3>
|
| </div>
|
| <div class="ai-leak-stack" id="ai-leak-owasp"></div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <div class="chart-card">
|
| <div class="chart-card__header">
|
| <h3><i data-lucide="file-search"></i> Scanned Assets</h3>
|
| <span class="badge" id="ai-leak-asset-count">0 assets</span>
|
| </div>
|
| <div class="table-wrap">
|
| <table class="data-table">
|
| <thead>
|
| <tr>
|
| <th>Asset</th>
|
| <th>Type</th>
|
| <th>Status</th>
|
| <th>Size</th>
|
| </tr>
|
| </thead>
|
| <tbody id="ai-leak-assets-table"></tbody>
|
| </table>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="page" id="page-files">
|
| <div class="chart-card">
|
| <div class="chart-card__header">
|
| <h3><i data-lucide="folder"></i> Bulk File Processing</h3>
|
| <span class="badge">Supports PDF, DOCX, XLSX, CSV, JSON, TXT</span>
|
| </div>
|
| <div class="upload-zone" id="upload-zone">
|
| <div class="upload-zone__icon"><i data-lucide="folder-open"></i></div>
|
| <div class="upload-zone__title">Drag & drop files here</div>
|
| <div class="upload-zone__desc">or click to browse — PDF, DOCX, XLSX, CSV, JSON, TXT up to 10MB</div>
|
| <input type="file" id="file-input" accept=".pdf,.docx,.doc,.xlsx,.xls,.csv,.json,.txt" multiple hidden>
|
| <button class="btn btn--primary" id="browse-btn" style="margin-top:16px;">Browse Files</button>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="chart-card" id="file-queue-card" style="display:none;">
|
| <div class="chart-card__header">
|
| <h3>Processing Queue</h3>
|
| <button class="btn btn--primary btn--small" id="process-all-btn"><i data-lucide="play"></i> Process
|
| All</button>
|
| </div>
|
| <div id="file-queue"></div>
|
| </div>
|
|
|
|
|
| <div class="chart-card" id="file-results-card" style="display:none;">
|
| <div class="chart-card__header">
|
| <h3>Results</h3>
|
| <button class="btn btn--primary btn--small" id="download-all-btn"><i data-lucide="download"></i> Download All
|
| Redacted</button>
|
| </div>
|
| <div class="table-wrap">
|
| <table class="data-table">
|
| <thead>
|
| <tr>
|
| <th>File</th>
|
| <th>Size</th>
|
| <th>PII Found</th>
|
| <th>Status</th>
|
| <th>Actions</th>
|
| </tr>
|
| </thead>
|
| <tbody id="file-results-tbody"></tbody>
|
| </table>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="page" id="page-history">
|
| <div class="chart-card">
|
| <div class="chart-card__header">
|
| <h3><i data-lucide="clipboard-list"></i> Scan History</h3>
|
| <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;">
|
| <input type="date" class="form-input" id="history-date-from"
|
| style="width:140px;padding:6px 8px;font-size:13px;" title="From date">
|
| <span style="color:var(--text-secondary);font-size:13px;">—</span>
|
| <input type="date" class="form-input" id="history-date-to"
|
| style="width:140px;padding:6px 8px;font-size:13px;" title="To date">
|
| <select class="chart-select" id="history-filter">
|
| <option value="all">All Sources</option>
|
| <option value="text">Text Scans</option>
|
| <option value="file">File Scans</option>
|
| </select>
|
| <select class="chart-select" id="history-type-filter">
|
| <option value="all">All PII Types</option>
|
| <option value="Person Name">Person Name</option>
|
| <option value="Email">Email</option>
|
| <option value="Phone">Phone</option>
|
| <option value="SSN">SSN</option>
|
| <option value="Credit Card">Credit Card</option>
|
| <option value="Date/Time">Date/Time</option>
|
| <option value="Location">Location</option>
|
| <option value="IP Address">IP Address</option>
|
| </select>
|
| <button class="btn btn--outline btn--small" id="history-apply-filter"><i data-lucide="search"></i>
|
| Filter</button>
|
| <button class="btn btn--outline btn--small" id="export-history-btn"><i data-lucide="download"></i> Export
|
| CSV</button>
|
| </div>
|
| </div>
|
| <div class="table-wrap">
|
| <table class="data-table">
|
| <thead>
|
| <tr>
|
| <th>Date</th>
|
| <th>Source</th>
|
| <th>Input Preview</th>
|
| <th>Entities</th>
|
| <th>Types</th>
|
| <th>Status</th>
|
| </tr>
|
| </thead>
|
| <tbody id="history-tbody"></tbody>
|
| </table>
|
| </div>
|
| <div class="table-pagination">
|
| <button class="btn btn--ghost btn--small" id="prev-page"><i data-lucide="arrow-left"></i> Previous</button>
|
| <span class="pagination-info" id="pagination-info">Page 1 of 5</span>
|
| <button class="btn btn--ghost btn--small" id="next-page">Next <i data-lucide="arrow-right"></i></button>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
|
|
|
|
|
|
| <div class="page" id="page-api">
|
| <div class="settings-layout">
|
|
|
| <div class="settings-sidebar">
|
| <button class="settings-tab active" data-api-tab="keys" onclick="switchApiTab('keys')"><i data-lucide="key"></i> API Keys</button>
|
| <button class="settings-tab" data-api-tab="quickstart" onclick="switchApiTab('quickstart')"><i data-lucide="zap"></i> Quick Start</button>
|
| <button class="settings-tab" data-api-tab="webhooks" onclick="switchApiTab('webhooks')"><i data-lucide="webhook"></i> Webhooks</button>
|
| </div>
|
|
|
|
|
| <div class="settings-content">
|
|
|
| <div class="settings-section active" id="api-section-keys">
|
| <div class="settings-card">
|
| <div class="settings-card__body">
|
| <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom: 16px;">
|
| <h2 class="settings-card__title" style="margin:0; font-size:18px;"><i data-lucide="key" style="vertical-align:middle;margin-right:8px;"></i> API Keys</h2>
|
| <button class="btn btn--primary btn--small" id="create-key-btn">+ Create New Key</button>
|
| </div>
|
| <p class="settings-card__desc">Use API keys to integrate RedactAI into your applications. Do not share your secret keys in publicly accessible areas such as GitHub.</p>
|
| <div id="api-keys-list" style="margin-top:24px;"></div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="settings-section" id="api-section-quickstart">
|
| <div class="settings-card">
|
| <div class="settings-card__body">
|
| <h2 class="settings-card__title" style="font-size:18px;"><i data-lucide="book-open" style="vertical-align:middle;margin-right:8px;"></i> Quick Start</h2>
|
| <p class="settings-card__desc">Make your first API request using our endpoints.</p>
|
|
|
| <div class="code-block" style="margin-top:24px;">
|
| <div class="code-block__header">
|
| <span>cURL</span>
|
| <button class="btn btn--ghost btn--small" id="copy-curl"><i data-lucide="clipboard-list"></i> Copy</button>
|
| </div>
|
| <pre class="code-block__body"><code>curl -X POST https://api.redact-ai.com/v1/scan \
|
| -H "Authorization: Bearer YOUR_API_KEY" \
|
| -H "Content-Type: application/json" \
|
| -d '{
|
| "text": "My name is Rahul Sharma, email: rahul@gmail.com",
|
| "mode": "redact"
|
| }'</code></pre>
|
| </div>
|
|
|
| <div class="code-block" style="margin-top:16px;">
|
| <div class="code-block__header">
|
| <span>Python</span>
|
| <button class="btn btn--ghost btn--small" id="copy-python"><i data-lucide="clipboard-list"></i> Copy</button>
|
| </div>
|
| <pre class="code-block__body"><code>import requests
|
|
|
| response = requests.post(
|
| "https://api.redact-ai.com/v1/scan",
|
| headers={"Authorization": "Bearer YOUR_API_KEY"},
|
| json={
|
| "text": "My name is Rahul Sharma, email: rahul@gmail.com",
|
| "mode": "redact"
|
| }
|
| )
|
| print(response.json())</code></pre>
|
| </div>
|
|
|
| <div class="code-block" style="margin-top:16px;">
|
| <div class="code-block__header">
|
| <span>Response</span>
|
| </div>
|
| <pre class="code-block__body"><code>{
|
| "redacted": "My name is [NAME], email: [EMAIL]",
|
| "entities": [
|
| {"type": "name", "value": "Rahul Sharma", "start": 11, "end": 23},
|
| {"type": "email", "value": "rahul@gmail.com", "start": 32, "end": 47}
|
| ],
|
| "count": 2,
|
| "processing_ms": 18
|
| }</code></pre>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="settings-section" id="api-section-webhooks">
|
| <div class="settings-card">
|
| <div class="settings-card__body">
|
| <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom: 16px;">
|
| <h2 class="settings-card__title" style="margin:0; font-size:18px;"><i data-lucide="webhook" style="vertical-align:middle;margin-right:8px;"></i> Webhooks</h2>
|
| <button class="btn btn--outline btn--small">+ Add Endpoint</button>
|
| </div>
|
| <p class="settings-card__desc">Listen to events on your RedactAI account so your integration can automatically trigger reactions.</p>
|
|
|
| <div style="text-align:center; padding: 60px 40px; border: 1px dashed var(--border-strong); border-radius: var(--radius); margin-top: 24px; background: rgba(255,255,255,0.02);">
|
| <i data-lucide="webhook" style="width: 48px; height: 48px; color: var(--text-muted); margin-bottom: 16px;"></i>
|
| <p style="color: var(--text-secondary); margin-bottom: 24px;">No webhooks configured yet.</p>
|
| <button class="btn btn--outline btn--small" style="margin:0 auto;">Learn More</button>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="page" id="page-settings">
|
| <div class="settings-layout">
|
|
|
|
|
| <div class="settings-sidebar">
|
| <button class="settings-tab active" data-tab="general" onclick="switchSettingsTab('general')"><i
|
| data-lucide="user"></i> General</button>
|
| <button class="settings-tab" data-tab="detection" onclick="switchSettingsTab('detection')"><i
|
| data-lucide="shield-check"></i> Detection Rules</button>
|
| <button class="settings-tab" data-tab="advanced" onclick="switchSettingsTab('advanced')"><i
|
| data-lucide="wrench"></i> Advanced</button>
|
| </div>
|
|
|
| <div class="settings-content">
|
|
|
|
|
| <div class="settings-section active" id="settings-tab-general">
|
| <div class="settings-card">
|
| <div class="settings-card__body">
|
| <div class="settings-card__title">Profile</div>
|
| <div class="settings-card__desc">Manage your personal information and organization.</div>
|
|
|
| <div class="form-group" style="max-width: 400px;">
|
| <label class="form-label">Full Name</label>
|
| <input type="text" class="form-input" value="Bbook" id="setting-name">
|
| </div>
|
| <div class="form-group" style="max-width: 400px;">
|
| <label class="form-label">Email</label>
|
| <input type="email" class="form-input" value="bbook@example.com" id="setting-email">
|
| </div>
|
| <div class="form-group" style="max-width: 400px; margin-bottom: 0;">
|
| <label class="form-label">Organization</label>
|
| <input type="text" class="form-input" placeholder="Your company name" id="setting-org">
|
| </div>
|
| </div>
|
| <div class="settings-card__footer">
|
| <div class="settings-card__footer-text">Updates will take effect immediately.</div>
|
| <button class="btn btn--primary btn--small">Save Changes</button>
|
| </div>
|
| </div>
|
|
|
| <div class="settings-card" style="border-color: rgba(255,69,69,0.3); margin-top: 48px;">
|
| <div class="settings-card__body">
|
| <div class="settings-card__title" style="color: var(--danger);">Delete Account</div>
|
| <div class="settings-card__desc" style="margin-bottom: 0;">Permanently delete your account and all
|
| associated data. This action cannot be undone.</div>
|
| </div>
|
| <div class="settings-card__footer"
|
| style="background: rgba(255,69,69,0.05); border-color: rgba(255,69,69,0.1);">
|
| <div class="settings-card__footer-text" style="color: rgba(255,255,255,0.5);">Please be certain.</div>
|
| <button class="btn btn--danger btn--small">Delete Account</button>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
|
|
|
|
| <div class="settings-section" id="settings-tab-detection">
|
| <div class="settings-card">
|
| <div class="settings-card__body">
|
| <div class="settings-card__title">Detection Settings</div>
|
| <div class="settings-card__desc">Configure how RedactAI scans and identifies sensitive information.
|
| </div>
|
|
|
| <div class="form-group" style="max-width: 400px; margin-bottom: 24px;">
|
| <label class="form-label">Detection Sensitivity</label>
|
| <select class="form-input" id="sensitivity">
|
| <option value="low">Low — fewer false positives</option>
|
| <option value="medium" selected>Medium — balanced</option>
|
| <option value="high">High — catch everything</option>
|
| </select>
|
| </div>
|
|
|
| <div style="display:flex;flex-direction:column;gap:12px;max-width:600px;">
|
| <div class="toggle-row" style="border:none;padding:4px 0;">
|
| <span>Detect Email Addresses</span>
|
| <label class="switch"><input type="checkbox" checked><span class="slider"></span></label>
|
| </div>
|
| <div class="toggle-row" style="border:none;padding:4px 0;">
|
| <span>Detect Phone Numbers</span>
|
| <label class="switch"><input type="checkbox" checked><span class="slider"></span></label>
|
| </div>
|
| <div class="toggle-row" style="border:none;padding:4px 0;">
|
| <span>Detect Person Names</span>
|
| <label class="switch"><input type="checkbox" checked><span class="slider"></span></label>
|
| </div>
|
| <div class="toggle-row" style="border:none;padding:4px 0;">
|
| <span>Detect Government IDs (Aadhaar, PAN, SSN)</span>
|
| <label class="switch"><input type="checkbox" checked><span class="slider"></span></label>
|
| </div>
|
| <div class="toggle-row" style="border:none;padding:4px 0;">
|
| <span>Detect Credit Cards</span>
|
| <label class="switch"><input type="checkbox" checked><span class="slider"></span></label>
|
| </div>
|
| <div class="toggle-row" style="border:none;padding:4px 0;">
|
| <span>Detect IP Addresses</span>
|
| <label class="switch"><input type="checkbox" checked><span class="slider"></span></label>
|
| </div>
|
| <div class="toggle-row" style="border:none;padding:4px 0;">
|
| <span>Detect Dates of Birth</span>
|
| <label class="switch"><input type="checkbox" checked><span class="slider"></span></label>
|
| </div>
|
| </div>
|
| </div>
|
| <div class="settings-card__footer">
|
| <div class="settings-card__footer-text">Applies to both dashboard scans and API calls.</div>
|
| <button class="btn btn--primary btn--small">Save Settings</button>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="settings-section" id="settings-tab-advanced">
|
| <div class="settings-card">
|
| <div class="settings-card__body">
|
| <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
|
| <div class="settings-card__title" style="margin-bottom:0;">Custom Detectors</div>
|
| <button class="btn btn--primary btn--small" id="add-detector-btn">+ Add Detector</button>
|
| </div>
|
| <div class="settings-card__desc">Define custom regex patterns to detect company-specific PII (employee
|
| IDs, project codes, internal identifiers).</div>
|
|
|
| <div id="custom-detectors-list"></div>
|
|
|
| <div id="detector-form"
|
| style="display:none;margin-top:16px;padding:20px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:rgba(255,255,255,0.02);">
|
| <div class="form-group">
|
| <label class="form-label">Detector Name</label>
|
| <input type="text" class="form-input" id="detector-name" placeholder="e.g. Employee ID">
|
| </div>
|
| <div class="form-group">
|
| <label class="form-label">Entity Type (uppercase, no spaces)</label>
|
| <input type="text" class="form-input" id="detector-entity" placeholder="e.g. EMPLOYEE_ID">
|
| </div>
|
| <div class="form-group">
|
| <label class="form-label">Regex Pattern</label>
|
| <input type="text" class="form-input" id="detector-regex" placeholder="e.g. EMP-\d{6}">
|
| </div>
|
| <div class="form-group" style="margin-bottom: 0;">
|
| <label class="form-label">Confidence Score (0.0 - 1.0)</label>
|
| <input type="number" class="form-input" id="detector-score" value="0.8" min="0" max="1" step="0.1">
|
| </div>
|
| <div style="display:flex;gap:8px;margin-top:20px;">
|
| <button class="btn btn--primary" id="save-detector-btn">Save Detector</button>
|
| <button class="btn btn--ghost" id="cancel-detector-btn">Cancel</button>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| </div>
|
| </div>
|
| </div>
|
| </main>
|
|
|
|
|
| <div class="page" id="page-plan" style="position:fixed;top:0;left:0;width:100vw;height:100vh;background:var(--bg-primary);z-index:999999;overflow-y:auto;padding:0;">
|
| <div style="max-width:1200px;margin:0 auto;padding:60px 32px 100px;position:relative;">
|
| <button class="btn btn--ghost" onclick="switchPage('overview')" style="position:absolute;top:40px;left:32px;font-weight:600;"><i data-lucide="arrow-left"></i> Back to Dashboard</button>
|
|
|
| <div style="text-align:center;margin-bottom:64px;margin-top:20px;">
|
| <h2 style="font-size:42px;font-weight:800;color:#fff;margin-bottom:16px;letter-spacing:-1px;">Upgrade your Data Security</h2>
|
| <p style="font-size:18px;color:var(--text-secondary);max-width:600px;margin:0 auto;">
|
| Choose the right data protection plan for your scale. Seamless integration. No hidden fees.
|
| </p>
|
| </div>
|
|
|
| <div class="dash-grid-4" style="align-items:stretch;">
|
|
|
| <div style="border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.02);border-radius:24px;padding:32px;display:flex;flex-direction:column;">
|
| <h3 style="margin:0;font-size:20px;color:#fff;font-weight:700;">Starter</h3>
|
| <p style="margin:8px 0 24px;color:var(--text-secondary);font-size:13px;min-height:36px;">For individuals and small projects</p>
|
| <div style="font-size:42px;font-weight:800;color:#fff;margin:0 0 8px;line-height:1;">
|
| $0<span style="font-size:15px;color:var(--text-secondary);font-weight:500;"> / mo</span>
|
| </div>
|
| <p style="margin:0 0 32px;color:#10a37f;font-size:13px;font-weight:600;">Free forever</p>
|
|
|
| <button class="btn btn--outline" style="width:100%;justify-content:center;padding:12px;font-size:14px;margin-bottom:32px;color:#fff;border-color:rgba(255,255,255,0.2);">Your Current Plan</button>
|
|
|
| <ul style="list-style:none;padding:0;margin:0;font-size:13px;color:var(--text-secondary);line-height:2.5;flex-grow:1;">
|
| <li style="display:flex;align-items:flex-start;gap:12px;"><i data-lucide="check" style="color:#fff;width:16px;margin-top:8px;"></i> <strong>1,000 documents / month</strong></li>
|
| <li style="display:flex;align-items:flex-start;gap:12px;"><i data-lucide="check" style="color:#fff;width:16px;margin-top:8px;"></i> All 12+ PII types</li>
|
| <li style="display:flex;align-items:flex-start;gap:12px;"><i data-lucide="check" style="color:#fff;width:16px;margin-top:8px;"></i> Web scanner + API</li>
|
| <li style="display:flex;align-items:flex-start;gap:12px;"><i data-lucide="check" style="color:#fff;width:16px;margin-top:8px;"></i> Copy redacted text</li>
|
| <li style="display:flex;align-items:flex-start;gap:12px;"><i data-lucide="check" style="color:#fff;width:16px;margin-top:8px;"></i> Community support</li>
|
| </ul>
|
| </div>
|
|
|
|
|
| <div style="border:1px solid rgba(10,132,255,0.4);background:linear-gradient(180deg, rgba(10,132,255,0.08) 0%, rgba(10,132,255,0.01) 100%);border-radius:24px;padding:32px;display:flex;flex-direction:column;position:relative;box-shadow:0 12px 40px rgba(10,132,255,0.15);transform:scale(1.02);z-index:2;">
|
| <div style="position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:#0a84ff;color:#fff;font-size:10px;font-weight:800;padding:6px 16px;border-radius:100px;text-transform:uppercase;box-shadow:0 4px 12px rgba(10,132,255,0.4);white-space:nowrap;">Most Popular</div>
|
| <h3 style="margin:0;font-size:20px;color:#fff;font-weight:700;">Business</h3>
|
| <p style="margin:8px 0 24px;color:var(--text-secondary);font-size:13px;min-height:36px;">For teams and growing companies</p>
|
| <div style="font-size:42px;font-weight:800;color:#fff;margin:0 0 8px;line-height:1;">
|
| $49<span style="font-size:15px;color:var(--text-secondary);font-weight:500;"> / mo</span>
|
| </div>
|
| <p style="margin:0 0 32px;color:var(--text-secondary);font-size:13px;">Billed monthly</p>
|
|
|
| <button class="btn btn--primary" style="width:100%;justify-content:center;padding:12px;font-size:14px;margin-bottom:32px;box-shadow:0 4px 16px rgba(10,132,255,0.3);">Start 14-Day Trial</button>
|
|
|
| <ul style="list-style:none;padding:0;margin:0;font-size:13px;color:var(--text-secondary);line-height:2.5;flex-grow:1;">
|
| <li style="display:flex;align-items:flex-start;gap:12px;"><i data-lucide="check" style="color:#0a84ff;width:16px;margin-top:8px;"></i> <strong>50,000 documents / month</strong></li>
|
| <li style="display:flex;align-items:flex-start;gap:12px;"><i data-lucide="check" style="color:#0a84ff;width:16px;margin-top:8px;"></i> Batch file upload (CSV, JSON, TXT)</li>
|
| <li style="display:flex;align-items:flex-start;gap:12px;"><i data-lucide="check" style="color:#0a84ff;width:16px;margin-top:8px;"></i> Full REST API with higher limits</li>
|
| <li style="display:flex;align-items:flex-start;gap:12px;"><i data-lucide="check" style="color:#0a84ff;width:16px;margin-top:8px;"></i> Compliance reports (GDPR, HIPAA)</li>
|
| <li style="display:flex;align-items:flex-start;gap:12px;"><i data-lucide="check" style="color:#0a84ff;width:16px;margin-top:8px;"></i> Scan history & export</li>
|
| <li style="display:flex;align-items:flex-start;gap:12px;"><i data-lucide="check" style="color:#0a84ff;width:16px;margin-top:8px;"></i> Priority email support</li>
|
| </ul>
|
| </div>
|
|
|
|
|
| <div style="border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.02);border-radius:24px;padding:32px;display:flex;flex-direction:column;">
|
| <h3 style="margin:0;font-size:20px;color:#fff;font-weight:700;">Enterprise</h3>
|
| <p style="margin:8px 0 24px;color:var(--text-secondary);font-size:13px;min-height:36px;">For large organizations & MSPs</p>
|
| <div style="font-size:42px;font-weight:800;color:#fff;margin:0 0 8px;line-height:1;">
|
| $299<span style="font-size:15px;color:var(--text-secondary);font-weight:500;"> / mo</span>
|
| </div>
|
| <p style="margin:0 0 32px;color:var(--text-secondary);font-size:13px;">Custom billing available</p>
|
|
|
| <button class="btn btn--outline" style="width:100%;justify-content:center;padding:12px;font-size:14px;margin-bottom:32px;color:#fff;">Contact Sales</button>
|
|
|
| <ul style="list-style:none;padding:0;margin:0;font-size:13px;color:var(--text-secondary);line-height:2.5;flex-grow:1;">
|
| <li style="display:flex;align-items:flex-start;gap:12px;"><i data-lucide="check" style="color:#fff;width:16px;margin-top:8px;"></i> <strong>1,000,000 documents / month</strong></li>
|
| <li style="display:flex;align-items:flex-start;gap:12px;"><i data-lucide="check" style="color:#fff;width:16px;margin-top:8px;"></i> Dedicated API instance</li>
|
| <li style="display:flex;align-items:flex-start;gap:12px;"><i data-lucide="check" style="color:#fff;width:16px;margin-top:8px;"></i> Self-host / on-premise option</li>
|
| <li style="display:flex;align-items:flex-start;gap:12px;"><i data-lucide="check" style="color:#fff;width:16px;margin-top:8px;"></i> Custom PII detection rules</li>
|
| <li style="display:flex;align-items:flex-start;gap:12px;"><i data-lucide="check" style="color:#fff;width:16px;margin-top:8px;"></i> SOC2 compliance report</li>
|
| <li style="display:flex;align-items:flex-start;gap:12px;"><i data-lucide="check" style="color:#fff;width:16px;margin-top:8px;"></i> SLA & dedicated support</li>
|
| <li style="display:flex;align-items:flex-start;gap:12px;"><i data-lucide="check" style="color:#fff;width:16px;margin-top:8px;"></i> SSO & team management</li>
|
| <li style="display:flex;align-items:flex-start;gap:12px;"><i data-lucide="check" style="color:#fff;width:16px;margin-top:8px;"></i> White-label for MSPs</li>
|
| </ul>
|
| </div>
|
|
|
|
|
| <div style="border:1px solid rgba(255,255,255,0.05);background:linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 100%);border-radius:24px;padding:32px;display:flex;flex-direction:column;">
|
| <h3 style="margin:0;font-size:20px;color:#fff;font-weight:700;">Custom</h3>
|
| <p style="margin:8px 0 24px;color:var(--text-secondary);font-size:13px;min-height:36px;">For massive scale operations</p>
|
| <div style="font-size:38px;font-weight:800;color:#fff;margin:0 0 8px;line-height:1;padding-top:4px;">
|
| Custom
|
| </div>
|
| <p style="margin:0 0 32px;color:var(--text-secondary);font-size:13px;">Tailored billing</p>
|
|
|
| <button class="btn btn--outline" style="width:100%;justify-content:center;padding:12px;font-size:14px;margin-bottom:32px;">Contact Sales</button>
|
|
|
| <ul style="list-style:none;padding:0;margin:0;font-size:13px;color:var(--text-secondary);line-height:2.5;flex-grow:1;">
|
| <li style="display:flex;align-items:flex-start;gap:12px;"><i data-lucide="check" style="color:#fff;width:16px;margin-top:8px;"></i> <strong>Custom limits</strong></li>
|
| <li style="display:flex;align-items:flex-start;gap:12px;"><i data-lucide="check" style="color:#fff;width:16px;margin-top:8px;"></i> White-label for MSPs</li>
|
| <li style="display:flex;align-items:flex-start;gap:12px;"><i data-lucide="check" style="color:#fff;width:16px;margin-top:8px;"></i> Multi-region deployments</li>
|
| <li style="display:flex;align-items:flex-start;gap:12px;"><i data-lucide="check" style="color:#fff;width:16px;margin-top:8px;"></i> Priority feature requests</li>
|
| </ul>
|
| </div>
|
|
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <script>
|
| function switchPage(pageId) {
|
| var pages = document.querySelectorAll('.page');
|
| var links = document.querySelectorAll('.sidebar__link');
|
| for (var i = 0; i < pages.length; i++) { pages[i].classList.remove('active'); }
|
| for (var i = 0; i < links.length; i++) { links[i].classList.remove('active'); }
|
| var page = document.getElementById('page-' + pageId);
|
| var nav = document.getElementById('nav-' + pageId);
|
| if (page) page.classList.add('active');
|
| if (nav) nav.classList.add('active');
|
| var title = document.getElementById('page-title');
|
| if (title) title.textContent = nav ? nav.textContent.trim() : pageId;
|
| }
|
| </script>
|
| <script>
|
| function switchSettingsTab(tabId) {
|
| var tabs = document.querySelectorAll('.settings-tab');
|
| var sections = document.querySelectorAll('.settings-section');
|
| tabs.forEach(t => t.classList.remove('active'));
|
| sections.forEach(s => s.classList.remove('active'));
|
|
|
| var selectedTab = document.querySelector('.settings-tab[data-tab="' + tabId + '"]');
|
| var selectedSection = document.getElementById('settings-tab-' + (tabId === 'wrench' ? 'advanced' : tabId));
|
| if (selectedTab) selectedTab.classList.add('active');
|
| if (selectedSection) selectedSection.classList.add('active');
|
| }
|
| </script>
|
|
|
| <div class="modal-overlay" id="edit-profile-modal">
|
| <div class="profile-modal">
|
| <div class="profile-modal__header">
|
| <h3>Edit profile</h3>
|
| </div>
|
| <div class="profile-modal__body">
|
| <div class="modal-avatar-wrapper">
|
| <div class="modal-avatar-large">
|
| <span>BL</span>
|
| <button class="modal-avatar-cam"><i data-lucide="camera"></i></button>
|
| </div>
|
| </div>
|
|
|
| <div class="modal-input-group">
|
| <label>Display name</label>
|
| <input type="text" value="bleu.x">
|
| </div>
|
| <div class="modal-input-group">
|
| <label>Username</label>
|
| <input type="text" value="bleu.x">
|
| </div>
|
|
|
| <p class="modal-hint">Your profile helps people recognize you in group chats.</p>
|
| </div>
|
| <div class="profile-modal__footer">
|
| <button class="btn btn--ghost" onclick="closeProfileModal()">Cancel</button>
|
| <button class="btn btn--primary" onclick="closeProfileModal()">Save</button>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="modal-overlay" id="edit-theme-modal">
|
| <div class="profile-modal">
|
| <div class="profile-modal__header" style="display:flex; justify-content:space-between; align-items:center;">
|
| <h3>Personalization</h3>
|
| <button style="background:none; border:none; color:var(--text-secondary); cursor:pointer;" onclick="closeThemeModal()"><i data-lucide="x"></i></button>
|
| </div>
|
| <div class="profile-modal__body">
|
|
|
| <div style="margin-bottom:32px; margin-top: 8px;">
|
| <label style="display:block; font-size:11px; font-weight:700; color:var(--text-secondary); margin-bottom:12px; text-transform:uppercase; letter-spacing:1px;">Color Mode</label>
|
| <div class="theme-toggles">
|
| <button class="theme-toggle active" onclick="setTheme('dark', this)">
|
| <i data-lucide="moon"></i> Dark
|
| </button>
|
| <button class="theme-toggle" onclick="setTheme('light', this)">
|
| <i data-lucide="sun"></i> Light
|
| </button>
|
| <button class="theme-toggle" onclick="setTheme('auto', this)">
|
| <i data-lucide="monitor"></i> Auto
|
| </button>
|
| </div>
|
| </div>
|
|
|
| <div style="margin-bottom:24px;">
|
| <label style="display:block; font-size:11px; font-weight:700; color:var(--text-secondary); margin-bottom:12px; text-transform:uppercase; letter-spacing:1px;">Accent Color</label>
|
| <div class="accent-colors">
|
| <button class="accent-btn active" style="background:#00e6a8;" onclick="setAccent('#00e6a8', this)"></button>
|
| <button class="accent-btn" style="background:#74c0fc;" onclick="setAccent('#74c0fc', this)"></button>
|
| <button class="accent-btn" style="background:#f472b6;" onclick="setAccent('#f472b6', this)"></button>
|
| <button class="accent-btn" style="background:#fdcb6e;" onclick="setAccent('#fdcb6e', this)"></button>
|
| <button class="accent-btn" style="background:#a29bfe;" onclick="setAccent('#a29bfe', this)"></button>
|
| </div>
|
| </div>
|
|
|
| </div>
|
| <div class="profile-modal__footer">
|
| <button class="btn btn--primary" style="width:100%; justify-content:center;" onclick="closeThemeModal()">Done</button>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <script>
|
| function toggleProfileDropdown(e) {
|
| e.stopPropagation();
|
| document.getElementById('profile-dropdown').classList.toggle('show');
|
| }
|
| function closeProfileDropdown() {
|
| document.getElementById('profile-dropdown').classList.remove('show');
|
| }
|
| document.addEventListener('click', function(e) {
|
| var dropdown = document.getElementById('profile-dropdown');
|
| var profileBtn = document.querySelector('.sidebar__profile');
|
| if (dropdown && !dropdown.contains(e.target) && (!profileBtn || !profileBtn.contains(e.target))) {
|
| closeProfileDropdown();
|
| }
|
| });
|
|
|
|
|
| function openProfileModal() {
|
| document.getElementById('edit-profile-modal').classList.add('show');
|
| }
|
| function closeProfileModal() {
|
| document.getElementById('edit-profile-modal').classList.remove('show');
|
| }
|
|
|
| function openThemeModal() {
|
| document.getElementById('edit-theme-modal').classList.add('show');
|
| }
|
| function closeThemeModal() {
|
| document.getElementById('edit-theme-modal').classList.remove('show');
|
| }
|
|
|
| function setTheme(mode, btn) {
|
| document.querySelectorAll('.theme-toggle').forEach(b => b.classList.remove('active'));
|
| if(btn) btn.classList.add('active');
|
|
|
| if (mode === 'light') {
|
| document.body.classList.add('theme-light');
|
| } else {
|
| document.body.classList.remove('theme-light');
|
| }
|
| }
|
|
|
| function setAccent(color, btn) {
|
| document.querySelectorAll('.accent-btn').forEach(b => b.classList.remove('active'));
|
| if(btn) btn.classList.add('active');
|
|
|
| document.documentElement.style.setProperty('--accent-light', color);
|
| document.documentElement.style.setProperty('--accent-glow', color + '33');
|
| }
|
| </script>
|
| <script>
|
| document.querySelectorAll('.navbar__logo').forEach(logo => {
|
| logo.addEventListener('click', (e) => {
|
| e.preventDefault();
|
|
|
| logo.classList.remove('is-animating');
|
| void logo.offsetWidth;
|
| logo.classList.add('is-animating');
|
|
|
|
|
| document.body.classList.toggle('sidebar-collapsed');
|
|
|
| setTimeout(() => {
|
| logo.classList.remove('is-animating');
|
| }, 600);
|
| });
|
| });
|
| </script>
|
| <script src="https://unpkg.com/lucide@latest"></script>
|
| <script>lucide.createIcons();</script>
|
| <script src="dashboard.js"></script>
|
| </body>
|
|
|
| </html>
|
|
|
