Download index.html from gitmodelmujtaba/gdpr-compliance-explorer: direct link, hf CLI and curl.
- Browser
- Download file 82.9 kB
-
https://huggingface.co/spaces/gitmodelmujtaba/gdpr-compliance-explorer/resolve/main/index.html
- Command line
-
hf download hf://spaces/gitmodelmujtaba/gdpr-compliance-explorer/index.html
-
curl -L -o index.html https://huggingface.co/spaces/gitmodelmujtaba/gdpr-compliance-explorer/resolve/main/index.html
82.9 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>GDPR Interactive Compliance Explorer & Knowledge Graph</title> | |
| <meta name="description" content="Interactive legal-tech exploration and visual analytics platform for Regulation (EU) 2016/679 (GDPR), featuring 936 line-by-line normative triples with 4-tier legal provenance."> | |
| <!-- Fonts --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet"> | |
| <!-- Styles --> | |
| <!-- Cytoscape for Knowledge Graph --> | |
| <script src="https://cdn.jsdelivr.net/npm/cytoscape@3.28.1/dist/cytoscape.min.js"></script> | |
| <script type="module" crossorigin src="./assets/index-CJB4hcrp.js"></script> | |
| <link rel="stylesheet" crossorigin href="./assets/index-ByAd2Vml.css"> | |
| </head> | |
| <body> | |
| <div class="app-container"> | |
| <!-- Header --> | |
| <header class="app-header"> | |
| <div class="brand-section"> | |
| <div class="brand-logo">🛡</div> | |
| <div class="brand-title"> | |
| <h1>GDPR Compliance Explorer</h1> | |
| <p>Regulation (EU) 2016/679 • Deontic Normative Triples & 4-Tier Legal Provenance</p> | |
| </div> | |
| </div> | |
| <div class="header-stats"> | |
| <div class="stat-pill"> | |
| <span class="indicator-dot"></span> | |
| <span>Corpus: <strong>99 Articles • 173 Recitals</strong></span> | |
| </div> | |
| <div class="stat-pill"> | |
| <span class="badge badge-verified">✓ SHA-256 Provenance</span> | |
| </div> | |
| <div class="stat-pill"> | |
| <span>Standards: <strong>W3C DPV • ISO 27701</strong></span> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Top Metrics Grid --> | |
| <section class="metrics-grid"> | |
| <div class="glass-panel metric-card"> | |
| <div class="metric-label">Total Normative Clauses</div> | |
| <div class="metric-value" id="statTotalTriples">936</div> | |
| <div class="metric-sub">Line-by-line Hohfeldian tuples</div> | |
| </div> | |
| <div class="glass-panel metric-card"> | |
| <div class="metric-label">Binding Legal Obligations</div> | |
| <div class="metric-value" id="statTotalObligations" style="color: var(--mod-obligation);">489</div> | |
| <div class="metric-sub">Mandatory compliance duties</div> | |
| </div> | |
| <div class="glass-panel metric-card"> | |
| <div class="metric-label">Knowledge Graph Entities</div> | |
| <div class="metric-value" id="statTotalNodes" style="color: var(--accent-cyan);">355</div> | |
| <div class="metric-sub">Across 924 relational links</div> | |
| </div> | |
| <div class="glass-panel metric-card"> | |
| <div class="metric-label">Cryptographic Integrity</div> | |
| <div class="metric-value" id="statVerifiedHashes" style="color: #34d399;">100%</div> | |
| <div class="metric-sub">EUR-Lex ELI permalink verified</div> | |
| </div> | |
| </section> | |
| <!-- Navigation Tabs --> | |
| <nav class="nav-tabs" role="tablist"> | |
| <button class="nav-tab active" data-tab="tab-triples" id="tabBtnTriples"> | |
| <span>🔍</span> Rules & Triples Explorer | |
| </button> | |
| <button class="nav-tab" data-tab="tab-assistant" id="tabBtnAssistant"> | |
| <span>💬</span> AI Legal Assistant (Verifiable RAG) | |
| </button> | |
| <button class="nav-tab" data-tab="tab-graph" id="tabBtnGraph"> | |
| <span>🖇</span> Knowledge Graph Visualizer | |
| </button> | |
| <button class="nav-tab" data-tab="tab-compliance" id="tabBtnCompliance"> | |
| <span>⚙</span> Compliance Decision Engines | |
| </button> | |
| <button class="nav-tab" data-tab="tab-standards" id="tabBtnStandards"> | |
| <span>📖</span> W3C DPV & ISO 27701 Matrix | |
| </button> | |
| <button class="nav-tab" data-tab="tab-dictionary" id="tabBtnDictionary"> | |
| <span>📄</span> Data Dictionary Taxonomy | |
| </button> | |
| <button class="nav-tab" data-tab="tab-ropa" id="tabBtnRopa"> | |
| <span>📝</span> Art. 30 ROPA Register | |
| </button> | |
| <button class="nav-tab" data-tab="tab-modeler" id="tabBtnModeler"> | |
| <span>🏗</span> Architecture Modeler | |
| </button> | |
| <button class="nav-tab" data-tab="tab-cross-reg" id="tabBtnCrossReg"> | |
| <span>⚖</span> Cross-Regulatory (AI Act • NIS2) | |
| </button> | |
| <button class="nav-tab" data-tab="tab-linter" id="tabBtnLinter"> | |
| <span>🛡</span> Privacy Linter (DevSecOps) | |
| </button> | |
| <button class="nav-tab" data-tab="tab-dpia" id="tabBtnDpia"> | |
| <span>📋</span> Art. 35 DPIA Wizard | |
| </button> | |
| <button class="nav-tab" data-tab="tab-dsar" id="tabBtnDsar"> | |
| <span>📬</span> DSAR SLA Orchestrator | |
| </button> | |
| </nav> | |
| <!-- TAB 1: TRIPLES EXPLORER --> | |
| <main class="tab-content active" id="tab-triples"> | |
| <!-- Filter Bar --> | |
| <div class="glass-panel filter-bar"> | |
| <div class="filter-row-primary"> | |
| <div class="search-input-wrapper"> | |
| <span class="search-icon">🔍</span> | |
| <input type="text" id="searchQuery" class="search-input" placeholder="Search verbatim text, actors, actions, or keywords (e.g. '72 hours', 'consent', 'erasure')..."> | |
| </div> | |
| <div class="select-wrapper"> | |
| <select id="actorFilter" class="filter-select"> | |
| <option value="ALL">All Legal Actors</option> | |
| </select> | |
| </div> | |
| <div class="select-wrapper"> | |
| <select id="modalityFilter" class="filter-select"> | |
| <option value="ALL">All Modalities</option> | |
| <option value="OBLIGATION">Obligation (Shall / Must)</option> | |
| <option value="RIGHT">Right (Shall Have Right)</option> | |
| <option value="PROHIBITION">Prohibition (Shall Not)</option> | |
| <option value="PERMISSION">Permission (May / Can)</option> | |
| <option value="DEFINITION">Definition (Means)</option> | |
| <option value="DECLARATIVE">Declarative Norm</option> | |
| </select> | |
| </div> | |
| <div class="select-wrapper"> | |
| <select id="articleFilter" class="filter-select"> | |
| <option value="ALL">All Articles (1-99)</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="filter-row-secondary"> | |
| <div class="quick-toggles"> | |
| <span style="color: var(--text-muted); font-size: 0.78rem; text-transform: uppercase; font-weight: 600; margin-right: 0.2rem;">Quick Toggles:</span> | |
| <div class="toggle-chip" id="toggleDeadlines">⏱ Has Deadlines</div> | |
| <div class="toggle-chip" id="toggleExceptions">⚠️ Has Statutory Exceptions</div> | |
| <div class="toggle-chip" id="toggleCitations">🔗 Has Cross-Citations</div> | |
| </div> | |
| <div class="filter-actions"> | |
| <span id="resultCount" style="color: var(--text-muted); font-size: 0.8rem; margin-right: 0.5rem;">936 rules matched</span> | |
| <button class="btn btn-secondary btn-sm" id="resetFiltersBtn">↻ Reset</button> | |
| <button class="btn btn-secondary btn-sm" id="exportCsvBtn">⇩ CSV</button> | |
| <button class="btn btn-primary btn-sm" id="exportJsonBtn">⇩ JSON</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Table Container --> | |
| <div class="glass-panel table-container"> | |
| <table class="triples-table" id="triplesTable"> | |
| <thead> | |
| <tr> | |
| <th style="width: 105px;">ID</th> | |
| <th style="width: 100px;">Location</th> | |
| <th style="width: 180px;">Norm Addressee</th> | |
| <th style="width: 130px;">Modality</th> | |
| <th style="width: 190px;">Predicate & Theme</th> | |
| <th>Verbatim Statutory Clause</th> | |
| <th style="width: 110px; text-align: right;">Provenance</th> | |
| </tr> | |
| </thead> | |
| <tbody id="triplesTableBody"> | |
| <!-- Rendered by tripleView.js --> | |
| </tbody> | |
| </table> | |
| <!-- Pagination --> | |
| <div class="pagination-bar"> | |
| <div id="paginationInfo">Showing 1-25 of 936 rules</div> | |
| <div class="pagination-controls"> | |
| <select id="pageSizeSelect" class="filter-select" style="padding: 0.25rem 0.5rem; font-size: 0.78rem; width: auto;"> | |
| <option value="25">25 per page</option> | |
| <option value="50">50 per page</option> | |
| <option value="100">100 per page</option> | |
| </select> | |
| <button class="btn btn-secondary btn-sm" id="prevPageBtn">← Prev</button> | |
| <span id="currentPageNumber" style="font-weight: 600; padding: 0 0.5rem;">Page 1</span> | |
| <button class="btn btn-secondary btn-sm" id="nextPageBtn">Next →</button> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- TAB 2: KNOWLEDGE GRAPH VISUALIZER --> | |
| <section class="tab-content" id="tab-graph"> | |
| <div class="graph-view-container"> | |
| <!-- Graph Canvas --> | |
| <div class="graph-canvas-wrapper glass-panel"> | |
| <div class="graph-floating-controls"> | |
| <button class="btn btn-secondary btn-sm" id="graphZoomIn" title="Zoom In">+</button> | |
| <button class="btn btn-secondary btn-sm" id="graphZoomOut" title="Zoom Out">−</button> | |
| <button class="btn btn-secondary btn-sm" id="graphFit" title="Fit to Screen">↻ Fit</button> | |
| <select id="graphLayoutSelect" class="filter-select" style="padding: 0.35rem; font-size: 0.75rem; background: rgba(15,23,42,0.9);"> | |
| <option value="cose">Force-Directed (cose)</option> | |
| <option value="concentric">Concentric Rings</option> | |
| <option value="circle">Circular</option> | |
| <option value="breadthfirst">Hierarchical</option> | |
| </select> | |
| </div> | |
| <div id="cy"></div> | |
| </div> | |
| <!-- Graph Sidebar --> | |
| <aside class="glass-panel graph-sidebar"> | |
| <h3>Entity Types & Filters</h3> | |
| <div id="graphLegend" style="font-size: 0.8rem;"> | |
| <!-- Generated by graphView.js --> | |
| </div> | |
| <h3 style="margin-top: 0.5rem;">Selected Entity Details</h3> | |
| <div id="graphNodeDetails"> | |
| <div style="color: var(--text-muted); font-size: 0.85rem; text-align: center; padding: 2rem 0;"> | |
| Click any node in the knowledge graph to view its legal attributes, definitions, and statutory relationships. | |
| </div> | |
| </div> | |
| </aside> | |
| </div> | |
| </section> | |
| <!-- TAB 3: COMPLIANCE DECISION ENGINES --> | |
| <section class="tab-content" id="tab-compliance"> | |
| <!-- W3C SHACL Executable Policy Auditor --> | |
| <div class="shacl-auditor-container"> | |
| <div class="shacl-header-card"> | |
| <div> | |
| <div style="display: flex; align-items: center; gap: 0.6rem;"> | |
| <span style="font-size: 1.5rem;">⚒</span> | |
| <h2 style="font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em;">W3C SHACL Executable Policy Audit Engine</h2> | |
| </div> | |
| <p style="font-size: 0.84rem; color: var(--text-secondary); margin-top: 0.35rem; max-width: 820px; line-height: 1.45;"> | |
| Formally validate operational enterprise architecture payloads against machine-readable W3C SHACL constraint shapes grounded in statutory GDPR norms with 4-tier SHA-256 legal provenance. | |
| </p> | |
| </div> | |
| <div class="shacl-header-meta"> | |
| <span class="badge" style="background: rgba(99, 102, 241, 0.2); color: #a5b4fc; border: 1px solid rgba(99, 102, 241, 0.35);">W3C SHACL 1.0</span> | |
| <span class="badge badge-verified">🔒 100% Provenance Anchored</span> | |
| <span class="badge" style="background: rgba(16, 185, 129, 0.2); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.35);">< 1ms Execution</span> | |
| </div> | |
| </div> | |
| <div class="shacl-workspace"> | |
| <!-- Left Column: Payload Editor & Scenario Selector --> | |
| <div class="shacl-editor-panel"> | |
| <div class="shacl-editor-toolbar"> | |
| <label style="font-size: 0.82rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em;"> | |
| Operational Architecture Payload | |
| </label> | |
| <div style="display: flex; gap: 0.4rem;"> | |
| <button class="btn btn-secondary btn-sm" id="formatJsonBtn" title="Prettify JSON">⚙ Format</button> | |
| <button class="btn btn-secondary btn-sm" id="resetScenarioBtn" title="Reset to Scenario Default">↻ Reset</button> | |
| </div> | |
| </div> | |
| <div class="select-wrapper"> | |
| <select id="auditScenarioSelect" class="filter-select" style="font-weight: 600;"> | |
| <option value="scenario-a-compliant-saas">Scenario A: Compliant EU Enterprise Cloud SaaS</option> | |
| <option value="scenario-b-unlawful-us-transfer">Scenario B: Unlawful Cross-Border US Cloud Transfer</option> | |
| <option value="scenario-c-late-breach-notification">Scenario C: Late High-Risk Data Breach Notification</option> | |
| <option value="scenario-d-invalid-bundled-consent">Scenario D: Non-Compliant Pre-ticked Bundled Consent</option> | |
| <option value="custom">Custom Operational Architecture (Interactive JSON)</option> | |
| </select> | |
| </div> | |
| <div id="scenarioDescriptionBox" class="scenario-desc-box"> | |
| Standard B2B SaaS platform hosted in Frankfurt (EU-central-1), processing customer data with explicit contracts and encryption. | |
| </div> | |
| <textarea id="auditPayloadJson" class="payload-textarea" spellcheck="false" placeholder="Paste or edit operational JSON payload here..."></textarea> | |
| <button id="runShaclAuditBtn" class="btn btn-primary" style="justify-content: center; padding: 0.85rem; font-weight: 700; font-size: 0.95rem;"> | |
| <span>▶</span> Run SHACL Compliance Audit | |
| </button> | |
| </div> | |
| <!-- Right Column: Audit Findings & Provenance Feed --> | |
| <div class="shacl-results-panel"> | |
| <!-- Score Card --> | |
| <div class="shacl-score-card"> | |
| <div class="shacl-score-left"> | |
| <div class="shacl-score-circle" id="auditScoreCircle">100</div> | |
| <div> | |
| <div style="font-size: 0.75rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase;"> | |
| Statutory Compliance Status | |
| </div> | |
| <div id="auditStatusBadge" style="margin-top: 0.25rem;"> | |
| <span class="badge badge-verified" style="font-size: 0.85rem; padding: 0.25rem 0.65rem;">COMPLIANT</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="shacl-stats-row"> | |
| <div> | |
| <div style="font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase;">Evaluated</div> | |
| <div style="font-size: 1.1rem; font-weight: 700; color: #f1f5f9;" id="auditEvaluatedCount">2</div> | |
| </div> | |
| <div> | |
| <div style="font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase;">Critical</div> | |
| <div style="font-size: 1.1rem; font-weight: 700; color: #fb7185;" id="auditCriticalCount">0</div> | |
| </div> | |
| <div> | |
| <div style="font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase;">Standard</div> | |
| <div style="font-size: 1.1rem; font-weight: 700; color: #fbbf24;" id="auditStandardCount">0</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div style="display: flex; justify-content: space-between; align-items: center;"> | |
| <div style="font-size: 0.85rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em;"> | |
| Violation Findings & Normative Citations | |
| </div> | |
| <div style="display: flex; gap: 0.45rem;"> | |
| <button class="btn btn-secondary btn-sm" id="copyAuditJsonBtn">📋 Copy Report</button> | |
| <button class="btn btn-primary btn-sm" id="exportAuditCertBtn">📜 Download Certificate</button> | |
| </div> | |
| </div> | |
| <!-- Dynamic Findings List --> | |
| <div id="auditFindingsContainer" class="shacl-findings-list"> | |
| <!-- Dynamically populated --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Statutory Fine Risk & Liability Quantifier (EDPB Guidelines 04/2022) --> | |
| <div class="fine-calculator-card"> | |
| <div style="display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1rem;"> | |
| <div> | |
| <div style="display: flex; align-items: center; gap: 0.6rem;"> | |
| <span style="font-size: 1.4rem;">💰</span> | |
| <h3 style="font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em;">Statutory Fine Risk & Financial Liability Quantifier</h3> | |
| </div> | |
| <p style="font-size: 0.82rem; color: var(--text-secondary); margin-top: 0.25rem; max-width: 820px; line-height: 1.45;"> | |
| Quantify financial exposure under the formal 5-step methodology established by the European Data Protection Board (<strong>EDPB Guidelines 04/2022</strong>) pursuant to Article 83 GDPR. | |
| </p> | |
| </div> | |
| <div style="display: flex; gap: 0.45rem; flex-wrap: wrap;"> | |
| <span class="badge" style="background: rgba(245, 158, 11, 0.2); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.4);">Tier 1: Up to €10M / 2%</span> | |
| <span class="badge" style="background: rgba(244, 63, 94, 0.2); color: #fb7185; border: 1px solid rgba(244, 63, 94, 0.4);">Tier 2: Up to €20M / 4%</span> | |
| <span class="badge badge-verified">EDPB 04/2022 Validated</span> | |
| </div> | |
| </div> | |
| <div class="fine-workspace"> | |
| <!-- Left Column: Controls & Modifiers --> | |
| <div class="fine-controls-panel"> | |
| <div> | |
| <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.35rem;"> | |
| <label style="font-size: 0.78rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase;"> | |
| Worldwide Annual Turnover (€ EUR) | |
| </label> | |
| <span id="fineUndertakingBracket" class="badge" style="background: rgba(99, 102, 241, 0.2); color: #a5b4fc; font-size: 0.75rem;"> | |
| Medium Undertaking | |
| </span> | |
| </div> | |
| <input type="text" id="fineTurnoverInput" class="filter-select" value="50,000,000" style="font-weight: 700; font-family: var(--font-mono); font-size: 1.05rem; color: #34d399; margin-bottom: 0.5rem;"> | |
| <input type="range" id="fineTurnoverSlider" class="fine-slider" min="500000" max="1000000000" step="1000000" value="50000000"> | |
| </div> | |
| <div> | |
| <label style="font-size: 0.78rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; display: block; margin-bottom: 0.35rem;"> | |
| Evaluated Infringed Articles (Linked from SHACL Audit) | |
| </label> | |
| <input type="text" id="fineArticlesInput" class="filter-select" value="Art. 33, Art. 44" style="font-size: 0.85rem; color: var(--accent-cyan); font-family: var(--font-mono);"> | |
| </div> | |
| <div> | |
| <label style="font-size: 0.78rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; display: block; margin-bottom: 0.35rem;"> | |
| Infringement Seriousness Rating (Step 1) | |
| </label> | |
| <select id="fineSeriousnessSelect" class="filter-select" style="font-size: 0.85rem;"> | |
| <option value="LOW">Low Seriousness (0% - 10% Base Ceiling • Isolated, ordinary data)</option> | |
| <option value="MEDIUM" selected>Medium Seriousness (10% - 20% Base Ceiling • Systemic, moderate impact)</option> | |
| <option value="HIGH">High Seriousness (20% - 100% Base Ceiling • Sensitive/Health data, severe)</option> | |
| </select> | |
| </div> | |
| <!-- Modifying Factors (Step 3) --> | |
| <div class="factors-container"> | |
| <div> | |
| <div class="factor-group-label" style="color: #fb7185;">Aggravating Modifiers (+%)</div> | |
| <div style="display: flex; flex-direction: column; gap: 0.35rem;"> | |
| <label class="checklist-item" style="padding: 0.45rem;"> | |
| <input type="checkbox" class="fine-factor-cb" data-type="aggravating" value="INTENTIONAL"> | |
| <span style="font-size: 0.75rem;">Intentional Action (+25%)</span> | |
| </label> | |
| <label class="checklist-item" style="padding: 0.45rem;"> | |
| <input type="checkbox" class="fine-factor-cb" data-type="aggravating" value="RECIDIVISM"> | |
| <span style="font-size: 0.75rem;">Recidivism / Past Fines (+20%)</span> | |
| </label> | |
| <label class="checklist-item" style="padding: 0.45rem;"> | |
| <input type="checkbox" class="fine-factor-cb" data-type="aggravating" value="FAILURE_TO_MITIGATE"> | |
| <span style="font-size: 0.75rem;">Failure to Mitigate (+15%)</span> | |
| </label> | |
| <label class="checklist-item" style="padding: 0.45rem;"> | |
| <input type="checkbox" class="fine-factor-cb" data-type="aggravating" value="LACK_OF_COOPERATION"> | |
| <span style="font-size: 0.75rem;">Obstruction of DPA (+20%)</span> | |
| </label> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="factor-group-label" style="color: #34d399;">Mitigating Modifiers (-%)</div> | |
| <div style="display: flex; flex-direction: column; gap: 0.35rem;"> | |
| <label class="checklist-item" style="padding: 0.45rem;"> | |
| <input type="checkbox" class="fine-factor-cb" data-type="mitigating" value="PROMPT_SELF_REPORT"> | |
| <span style="font-size: 0.75rem;">Spontaneous Notification (-20%)</span> | |
| </label> | |
| <label class="checklist-item" style="padding: 0.45rem;"> | |
| <input type="checkbox" class="fine-factor-cb" data-type="mitigating" value="EXEMPLARY_COOPERATION"> | |
| <span style="font-size: 0.75rem;">Exemplary Cooperation (-15%)</span> | |
| </label> | |
| <label class="checklist-item" style="padding: 0.45rem;"> | |
| <input type="checkbox" class="fine-factor-cb" data-type="mitigating" value="ROBUST_PRE_TOMS"> | |
| <span style="font-size: 0.75rem;">Robust TOMs / ISO 27001 (-15%)</span> | |
| </label> | |
| <label class="checklist-item" style="padding: 0.45rem;"> | |
| <input type="checkbox" class="fine-factor-cb" data-type="mitigating" value="PROMPT_SUBJECT_REMEDY"> | |
| <span style="font-size: 0.75rem;">Direct Redress to Subjects (-15%)</span> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Column: Fine Exposure Hero & 5-Step Breakdown --> | |
| <div class="fine-summary-panel"> | |
| <div class="fine-exposure-hero"> | |
| <div class="fine-hero-top"> | |
| <div style="font-size: 0.75rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase;"> | |
| Estimated Fine Exposure (Expected Amount) | |
| </div> | |
| <span id="fineTierBadge" class="badge badge-article">TIER_2 (Art. 83(5))</span> | |
| </div> | |
| <div id="fineExpectedVal" class="fine-expected-amount">€2,000,000</div> | |
| <div class="fine-exposure-grid"> | |
| <div class="fine-stat-box"> | |
| <div class="fine-stat-label">Min Exposure</div> | |
| <div id="fineMinVal" class="fine-stat-value" style="color: #34d399;">€400,000</div> | |
| </div> | |
| <div class="fine-stat-box"> | |
| <div class="fine-stat-label">Upper Exposure</div> | |
| <div id="fineMaxVal" class="fine-stat-value" style="color: #fbbf24;">€2,000,000</div> | |
| </div> | |
| <div class="fine-stat-box"> | |
| <div class="fine-stat-label">Statutory Ceiling</div> | |
| <div id="fineCeilingVal" class="fine-stat-value" style="color: #fb7185;">€20,000,000</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <div style="font-size: 0.78rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; margin-bottom: 0.5rem; letter-spacing: 0.05em;"> | |
| EDPB Guidelines 04/2022: 5-Step Assessment Trail | |
| </div> | |
| <div id="fineStepsContainer" style="display: flex; flex-direction: column; gap: 0.45rem;"> | |
| <!-- Dynamically populated by fineCalculator.js --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick Regulatory Decision Wizards Grid --> | |
| <div style="margin-bottom: 1rem; border-top: 1px solid var(--border-subtle); padding-top: 1.5rem;"> | |
| <h3 style="font-size: 1.15rem; font-weight: 700; margin-bottom: 0.35rem;">Statutory Assessment Wizards</h3> | |
| <p style="font-size: 0.82rem; color: var(--text-secondary);">Interactive decision paths for DPIA mandates, 72-hour breach response, and DPO appointment obligations.</p> | |
| </div> | |
| <div class="audit-grid" style="grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));"> | |
| <!-- DPIA Checker --> | |
| <div class="glass-panel audit-card"> | |
| <div style="display: flex; justify-content: space-between; align-items: flex-start;"> | |
| <div> | |
| <h4 style="font-size: 1.05rem; font-weight: 700;">DPIA Mandatory Trigger Evaluator</h4> | |
| <p style="font-size: 0.8rem; color: var(--text-secondary);">Article 35(3) GDPR • Data Protection Impact Assessment</p> | |
| </div> | |
| <span class="badge badge-article">Art. 35</span> | |
| </div> | |
| <div style="display: flex; flex-direction: column; gap: 0.45rem;"> | |
| <label class="checklist-item"> | |
| <input type="checkbox" class="dpia-check" data-mandatory="true"> | |
| <div style="font-size: 0.8rem;"> | |
| <strong>Automated Profiling:</strong> Systematic evaluation producing legal effects (Art. 35(3)(a)). | |
| </div> | |
| </label> | |
| <label class="checklist-item"> | |
| <input type="checkbox" class="dpia-check" data-mandatory="true"> | |
| <div style="font-size: 0.8rem;"> | |
| <strong>Large-Scale Sensitive Data:</strong> Processing special categories (Art. 9/10) (Art. 35(3)(b)). | |
| </div> | |
| </label> | |
| <label class="checklist-item"> | |
| <input type="checkbox" class="dpia-check" data-mandatory="true"> | |
| <div style="font-size: 0.8rem;"> | |
| <strong>Public Surveillance:</strong> Systematic monitoring of public area on a large scale (Art. 35(3)(c)). | |
| </div> | |
| </label> | |
| <label class="checklist-item"> | |
| <input type="checkbox" class="dpia-check" data-mandatory="false"> | |
| <div style="font-size: 0.8rem;"> | |
| <strong>Vulnerable Data Subjects:</strong> Processing data of children or employees (EDPB Criteria). | |
| </div> | |
| </label> | |
| </div> | |
| <div id="dpiaResultBox" class="audit-status-box status-ok"> | |
| <span style="font-size: 1.25rem;">✓</span> | |
| <div> | |
| <div style="font-weight: 700; font-size: 0.85rem;">DPIA Not Mandatory Under Statutory Triggers</div> | |
| <div style="font-size: 0.78rem; font-weight: 400; margin-top: 0.15rem;"> | |
| Standard processing principles apply under Article 5 and Article 32. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 72h Breach Escalation Wizard --> | |
| <div class="glass-panel audit-card"> | |
| <div style="display: flex; justify-content: space-between; align-items: flex-start;"> | |
| <div> | |
| <h4 style="font-size: 1.05rem; font-weight: 700;">72-Hour Breach Escalation Wizard</h4> | |
| <p style="font-size: 0.8rem; color: var(--text-secondary);">Articles 33 & 34 GDPR • Notification & Communication</p> | |
| </div> | |
| <span class="badge badge-article">Art. 33 • 34</span> | |
| </div> | |
| <div style="display: flex; flex-direction: column; gap: 0.65rem;"> | |
| <div> | |
| <label style="font-size: 0.78rem; color: var(--text-secondary); font-weight: 600; display: block; margin-bottom: 0.25rem;"> | |
| Risk to Rights & Freedoms of Individuals: | |
| </label> | |
| <select id="breachRiskSelect" class="filter-select" style="font-size: 0.82rem;"> | |
| <option value="none">Unlikely to result in risk (Exempt from DPA)</option> | |
| <option value="moderate" selected>Likely to result in risk (DPA within 72h)</option> | |
| <option value="high">Likely to result in HIGH risk (DPA + Data Subject)</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label style="font-size: 0.78rem; color: var(--text-secondary); font-weight: 600; display: block; margin-bottom: 0.25rem;"> | |
| Were State-of-the-Art Technical Protections Applied (e.g. Encryption)? | |
| </label> | |
| <select id="breachEncryptionSelect" class="filter-select" style="font-size: 0.82rem;"> | |
| <option value="no" selected>No / Compromised in cleartext</option> | |
| <option value="yes">Yes / Robust encryption applied (Art. 34(3)(a))</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div id="breachResultBox" class="audit-status-box status-warning"> | |
| <span style="font-size: 1.25rem;">⚠</span> | |
| <div> | |
| <div style="font-weight: 700; font-size: 0.85rem;">TIER 2: NOTIFY DPA WITHIN 72 HOURS (Art. 33(1))</div> | |
| <div style="font-size: 0.78rem; font-weight: 400; margin-top: 0.15rem;"> | |
| Notify competent Supervisory Authority without undue delay and within 72 hours. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- DPO Mandatory Designation Evaluator --> | |
| <div class="glass-panel audit-card"> | |
| <div style="display: flex; justify-content: space-between; align-items: flex-start;"> | |
| <div> | |
| <h4 style="font-size: 1.05rem; font-weight: 700;">DPO Mandatory Evaluator</h4> | |
| <p style="font-size: 0.8rem; color: var(--text-secondary);">Article 37 GDPR • Data Protection Officer Designation</p> | |
| </div> | |
| <span class="badge badge-article">Art. 37</span> | |
| </div> | |
| <div style="display: flex; flex-direction: column; gap: 0.45rem;"> | |
| <label class="checklist-item"> | |
| <input type="checkbox" id="dpoPublicBody"> | |
| <div style="font-size: 0.8rem;"> | |
| <strong>Public Authority:</strong> Processing carried out by a public authority or body (Art. 37(1)(a)). | |
| </div> | |
| </label> | |
| <label class="checklist-item"> | |
| <input type="checkbox" id="dpoMonitoring"> | |
| <div style="font-size: 0.8rem;"> | |
| <strong>Regular & Systematic Monitoring:</strong> Core activities require regular monitoring on a large scale (Art. 37(1)(b)). | |
| </div> | |
| </label> | |
| <label class="checklist-item"> | |
| <input type="checkbox" id="dpoSensitive"> | |
| <div style="font-size: 0.8rem;"> | |
| <strong>Large Scale Sensitive Data:</strong> Core activities consist of processing special data or criminal records (Art. 37(1)(c)). | |
| </div> | |
| </label> | |
| </div> | |
| <div id="dpoResultBox" class="audit-status-box status-ok"> | |
| <span style="font-size: 1.25rem;">✓</span> | |
| <div> | |
| <div style="font-weight: 700; font-size: 0.85rem;">Mandatory DPO Designation Not Triggered</div> | |
| <div style="font-size: 0.78rem; font-weight: 400; margin-top: 0.15rem;"> | |
| Statutory criteria under Art. 37(1) not met. Voluntary appointment remains open. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- TAB 4: W3C DPV & ISO 27701 STANDARDS MATRIX --> | |
| <section class="tab-content" id="tab-standards"> | |
| <div class="glass-panel table-container"> | |
| <div style="padding: 1.25rem; border-bottom: 1px solid var(--border-subtle);"> | |
| <h3 style="font-size: 1.1rem; font-weight: 700;">International Open Standards Interoperability</h3> | |
| <p style="font-size: 0.82rem; color: var(--text-secondary); margin-top: 0.25rem;"> | |
| Formal mapping of canonical GDPR legal concepts to the <strong>W3C Data Privacy Vocabulary (DPV v1.0)</strong>, <strong>ISO/IEC 27701:2019 (PIMS)</strong>, and <strong>ISO/IEC 27001 (ISMS)</strong> Annex A controls. | |
| </p> | |
| </div> | |
| <table class="triples-table"> | |
| <thead> | |
| <tr> | |
| <th>GDPR Legal Concept</th> | |
| <th>Canonical ID</th> | |
| <th>Legal Basis</th> | |
| <th>W3C DPV Term & IRI</th> | |
| <th>ISO/IEC 27701 Clause</th> | |
| <th>ISO/IEC 27001 Mapping</th> | |
| </tr> | |
| </thead> | |
| <tbody id="standardsTableBody"> | |
| <!-- Rendered by app.js --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </section> | |
| <!-- TAB 5: DOMAIN KNOWLEDGE DATA DICTIONARY --> | |
| <section class="tab-content" id="tab-dictionary"> | |
| <!-- Sub-Navigation Pills --> | |
| <div class="dict-sub-tabs"> | |
| <button class="dict-sub-tab active" data-sec="dict-sec-subjects"> | |
| <span>👥</span> 1. Subjects (Actors & Duty-Bearers) | |
| </button> | |
| <button class="dict-sub-tab" data-sec="dict-sec-objects"> | |
| <span>📂</span> 2. Objects (Assets & Artifacts) | |
| </button> | |
| <button class="dict-sub-tab" data-sec="dict-sec-predicates"> | |
| <span>🔗</span> 3. Predicates (Deontic Verbs) | |
| </button> | |
| <button class="dict-sub-tab" data-sec="dict-sec-spo"> | |
| <span>⚖</span> 4. SPO Compatibility Matrix | |
| </button> | |
| <button class="dict-sub-tab" data-sec="dict-sec-ops"> | |
| <span>⚙</span> 5. Processing Taxonomy (Art. 4(2)) | |
| </button> | |
| </div> | |
| <!-- SECTION 1: SUBJECTS --> | |
| <div class="dict-section" id="dict-sec-subjects" style="display: block;"> | |
| <div style="margin-bottom: 1rem;"> | |
| <h3 style="font-size: 1.15rem; font-weight: 700;">Subject Taxonomy: Legal Duty-Bearers & Right-Holders</h3> | |
| <p style="font-size: 0.82rem; color: var(--text-secondary); margin-top: 0.2rem;"> | |
| Formal domain definitions of all legal persons, natural persons, and public authorities recognized by the GDPR with Hohfeldian legal roles and statutory capacities. | |
| </p> | |
| </div> | |
| <div class="subjects-grid" id="subjectsCardsGrid"> | |
| <!-- Rendered by domainDictionaryView.js --> | |
| </div> | |
| </div> | |
| <!-- SECTION 2: OBJECTS --> | |
| <div class="dict-section glass-panel table-container" id="dict-sec-objects" style="display: none;"> | |
| <div style="padding: 1.25rem; border-bottom: 1px solid var(--border-subtle);"> | |
| <h3 style="font-size: 1.15rem; font-weight: 700;">Object Taxonomy: Regulated Assets, Artifacts & Sanctions</h3> | |
| <p style="font-size: 0.82rem; color: var(--text-secondary); margin-top: 0.2rem;"> | |
| Formal domain definitions of regulated information assets, compliance artifacts, risk events, and statutory sanctions. | |
| </p> | |
| </div> | |
| <table class="triples-table"> | |
| <thead> | |
| <tr> | |
| <th style="width: 200px;">Object Name & ID</th> | |
| <th style="width: 140px;">Category</th> | |
| <th style="width: 180px;">Sensitivity / Risk</th> | |
| <th style="width: 130px;">Statutory Basis</th> | |
| <th>Domain Definition</th> | |
| <th style="width: 190px;">ISO/IEC 27701 Mapping</th> | |
| </tr> | |
| </thead> | |
| <tbody id="objectsTableBody"> | |
| <!-- Rendered by domainDictionaryView.js --> | |
| </tbody> | |
| </table> | |
| </div> | |
| <!-- SECTION 3: PREDICATES --> | |
| <div class="dict-section glass-panel table-container" id="dict-sec-predicates" style="display: none;"> | |
| <div style="padding: 1.25rem; border-bottom: 1px solid var(--border-subtle);"> | |
| <h3 style="font-size: 1.15rem; font-weight: 700;">Predicate Catalog: Domain Actions & Deontic Relations</h3> | |
| <p style="font-size: 0.82rem; color: var(--text-secondary); margin-top: 0.2rem;"> | |
| Formal domain verbs connecting Subjects to Objects with strict Domain/Range constraints, inverse relations, statutory deadlines, and exception rules. | |
| </p> | |
| </div> | |
| <table class="triples-table"> | |
| <thead> | |
| <tr> | |
| <th style="width: 210px;">Predicate & Cypher</th> | |
| <th style="width: 150px;">Domain (Subject)</th> | |
| <th style="width: 160px;">Range (Object)</th> | |
| <th style="width: 130px;">Deontic Modality</th> | |
| <th style="width: 170px;">Inverse Predicate</th> | |
| <th style="width: 120px;">Legal Anchor</th> | |
| <th>Operational Meaning & Statutory Constraints</th> | |
| </tr> | |
| </thead> | |
| <tbody id="predicatesTableBody"> | |
| <!-- Rendered by domainDictionaryView.js --> | |
| </tbody> | |
| </table> | |
| </div> | |
| <!-- SECTION 4: SPO MATRIX --> | |
| <div class="dict-section glass-panel table-container" id="dict-sec-spo" style="display: none;"> | |
| <div style="padding: 1.25rem; border-bottom: 1px solid var(--border-subtle);"> | |
| <h3 style="font-size: 1.15rem; font-weight: 700;">Subject-Predicate-Object (SPO) Compatibility Matrix</h3> | |
| <p style="font-size: 0.82rem; color: var(--text-secondary); margin-top: 0.2rem;"> | |
| Formal legal compatibility rules validating permissible interactions between Subjects and Objects under EU data protection law. | |
| </p> | |
| </div> | |
| <table class="triples-table"> | |
| <thead> | |
| <tr> | |
| <th style="width: 90px;">Rule ID</th> | |
| <th style="width: 150px;">Subject</th> | |
| <th style="width: 190px;">Predicate</th> | |
| <th style="width: 170px;">Object</th> | |
| <th style="width: 130px;">Status</th> | |
| <th style="width: 170px;">Deontic Classification</th> | |
| <th style="width: 110px;">Legal Anchor</th> | |
| <th>Compliance Rule & Statutory Rationale</th> | |
| </tr> | |
| </thead> | |
| <tbody id="spoMatrixTableBody"> | |
| <!-- Rendered by domainDictionaryView.js --> | |
| </tbody> | |
| </table> | |
| </div> | |
| <!-- SECTION 5: PROCESSING TAXONOMY --> | |
| <div class="dict-section glass-panel table-container" id="dict-sec-ops" style="display: none;"> | |
| <div style="padding: 1.25rem; border-bottom: 1px solid var(--border-subtle);"> | |
| <h3 style="font-size: 1.15rem; font-weight: 700;">Controlled Processing Operations Taxonomy</h3> | |
| <p style="font-size: 0.82rem; color: var(--text-secondary); margin-top: 0.2rem;"> | |
| Statutory taxonomy of all 15 personal data processing operations established under Article 4(2) GDPR. | |
| </p> | |
| </div> | |
| <table class="triples-table"> | |
| <thead> | |
| <tr> | |
| <th style="width: 250px;">Processing Operation Code</th> | |
| <th style="width: 120px;">Legal Basis</th> | |
| <th>Operational & Regulatory Definition</th> | |
| </tr> | |
| </thead> | |
| <tbody id="definitionsTableBody"> | |
| <!-- Rendered by app.js --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </section> | |
| <!-- TAB 6: ARTICLE 30 ROPA REGISTER --> | |
| <section class="tab-content" id="tab-ropa"> | |
| <!-- ROPA Header Card --> | |
| <div class="glass-panel" style="padding: 1.5rem; margin-bottom: 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;"> | |
| <div> | |
| <div style="display: flex; align-items: center; gap: 0.6rem;"> | |
| <span style="font-size: 1.4rem;">📝</span> | |
| <h2 style="font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em;">Article 30 GDPR: Record of Processing Activities (ROPA)</h2> | |
| </div> | |
| <p style="font-size: 0.82rem; color: var(--text-secondary); margin-top: 0.25rem; max-width: 820px; line-height: 1.45;"> | |
| Formal inventory of personal data processing operations required of controllers under Article 30(1) GDPR, structured in compliance with standard European Data Protection Board (EDPB) accountability guidelines. | |
| </p> | |
| </div> | |
| <div style="display: flex; gap: 0.45rem; flex-wrap: wrap;"> | |
| <button class="btn btn-secondary btn-sm" id="exportRopaCsvBtn">⇩ Export CSV</button> | |
| <button class="btn btn-secondary btn-sm" id="exportRopaJsonBtn">⇩ Export JSON</button> | |
| <button class="btn btn-primary btn-sm" id="exportRopaMdBtn">⇩ Export Markdown</button> | |
| </div> | |
| </div> | |
| <!-- Filter Bar --> | |
| <div class="glass-panel filter-bar" style="margin-bottom: 1.25rem;"> | |
| <div class="filter-row-primary"> | |
| <div class="search-input-wrapper"> | |
| <span class="search-icon">🔍</span> | |
| <input type="text" id="ropaSearchInput" class="search-input" placeholder="Search activities, purpose, categories of data, or recipients..."> | |
| </div> | |
| <div class="select-wrapper"> | |
| <select id="ropaBasisFilter" class="filter-select"> | |
| <option value="ALL">All Lawful Bases</option> | |
| <option value="CONTRACT_ART_6_1_B">Contract (Art. 6(1)(b))</option> | |
| <option value="LEGAL_OBLIGATION_ART_6_1_C">Legal Obligation (Art. 6(1)(c))</option> | |
| <option value="LEGITIMATE_INTERESTS_ART_6_1_F">Legitimate Interests (Art. 6(1)(f))</option> | |
| <option value="CONSENT_ART_6_1_A">Consent (Art. 6(1)(a))</option> | |
| </select> | |
| </div> | |
| <div class="select-wrapper"> | |
| <select id="ropaTransferFilter" class="filter-select"> | |
| <option value="ALL">All Transfer Types</option> | |
| <option value="TRANSFERRED">Third Country Transfers (Outside EEA)</option> | |
| <option value="EEA_ONLY">EEA Local Processing Only</option> | |
| </select> | |
| </div> | |
| <div class="select-wrapper"> | |
| <select id="ropaSpecialFilter" class="filter-select"> | |
| <option value="ALL">All Data Categories</option> | |
| <option value="SPECIAL_ONLY">Article 9 Special Category Data Only</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="filter-row-secondary"> | |
| <span id="ropaCountDisplay" style="color: var(--text-muted); font-size: 0.8rem;">4 activities registered</span> | |
| </div> | |
| </div> | |
| <!-- ROPA Table --> | |
| <div class="glass-panel table-container"> | |
| <table class="triples-table"> | |
| <thead> | |
| <tr> | |
| <th style="width: 110px;">ROPA ID</th> | |
| <th style="width: 260px;">Activity Name & Purpose</th> | |
| <th style="width: 170px;">Lawful Basis</th> | |
| <th style="width: 170px;">Data Subjects</th> | |
| <th style="width: 180px;">Personal Data</th> | |
| <th style="width: 120px;">Transfers</th> | |
| <th style="width: 110px; text-align: right;">Action</th> | |
| </tr> | |
| </thead> | |
| <tbody id="ropaTableBody"> | |
| <!-- Rendered by ropaManager.js --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </section> | |
| <!-- TAB 7: VISUAL ARCHITECTURE MODELER --> | |
| <section class="tab-content" id="tab-modeler"> | |
| <!-- Modeler Header --> | |
| <div class="glass-panel" style="padding: 1.5rem; margin-bottom: 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;"> | |
| <div> | |
| <div style="display: flex; align-items: center; gap: 0.6rem;"> | |
| <span style="font-size: 1.4rem;">🏗</span> | |
| <h2 style="font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em;">Visual Privacy Architecture Modeler & Live SHACL Auditor</h2> | |
| </div> | |
| <p style="font-size: 0.82rem; color: var(--text-secondary); margin-top: 0.25rem; max-width: 840px; line-height: 1.45;"> | |
| Visually design enterprise data flows, processing nodes, storage regions, and third-party processors. The engine live-evaluates W3C SHACL constraint shapes in < 1ms and computes statutory fine exposure on the fly. | |
| </p> | |
| </div> | |
| <div style="display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;"> | |
| <div class="select-wrapper"> | |
| <select id="modelerTemplateSelect" class="filter-select" style="font-weight: 600;"> | |
| <option value="template-compliant-saas">Template 1: Compliant Multi-Tier EU Cloud</option> | |
| <option value="template-unlawful-us-transfer">Template 2: Unlawful Direct US Analytics Transfer</option> | |
| <option value="template-missing-dpa-processor">Template 3: Unregulated Sub-processor (Missing DPA)</option> | |
| <option value="template-high-risk-ai">Template 4: High-Risk AI Profiling (Missing DPIA)</option> | |
| </select> | |
| </div> | |
| <button class="btn btn-primary btn-sm" id="runModelerAuditBtn">▶ Live Audit Canvas</button> | |
| </div> | |
| </div> | |
| <div id="modelerDescBox" class="scenario-desc-box" style="margin-bottom: 1.25rem;"> | |
| Multi-tenant B2B platform hosted in Frankfurt (EU), governed by binding DPAs and encrypted databases. | |
| </div> | |
| <!-- Live Audit Status Banner & Score --> | |
| <div class="glass-panel" style="padding: 1rem 1.5rem; margin-bottom: 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;"> | |
| <div style="display: flex; align-items: center; gap: 1rem;"> | |
| <div class="shacl-score-circle" id="modelerScoreCircle" style="width: 52px; height: 52px; font-size: 1.2rem;">100</div> | |
| <div> | |
| <div style="font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; font-weight: 700;">Live Architecture Health</div> | |
| <div id="modelerAuditStatus" style="margin-top: 0.2rem;"> | |
| <span class="badge badge-verified">COMPLIANT ARCHITECTURE</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="modelerFineSummaryBox" style="flex: 1; max-width: 480px;"> | |
| <!-- Dynamically populated by architectureModeler.js --> | |
| </div> | |
| </div> | |
| <!-- Visual Canvas Area --> | |
| <div class="glass-panel" style="padding: 1.5rem; margin-bottom: 1.5rem;"> | |
| <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem;"> | |
| <div style="font-size: 0.82rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em;"> | |
| Interactive Architecture Topology Canvas | |
| </div> | |
| <div style="display: flex; gap: 0.5rem; font-size: 0.75rem; flex-wrap: wrap;"> | |
| <span class="badge" style="border-left: 3px solid #38bdf8;">Data Subject</span> | |
| <span class="badge" style="border-left: 3px solid #818cf8;">Controller</span> | |
| <span class="badge" style="border-left: 3px solid #34d399;">Storage</span> | |
| <span class="badge" style="border-left: 3px solid #fbbf24;">Processor</span> | |
| <span class="badge" style="border-left: 3px solid #f43f5e;">Cross-Border</span> | |
| <span class="badge" style="border-left: 3px solid #ec4899;">High-Risk AI</span> | |
| </div> | |
| </div> | |
| <div id="modelerCanvas"> | |
| <!-- Dynamically populated by architectureModeler.js --> | |
| </div> | |
| </div> | |
| <!-- Modeler Findings & Violations List --> | |
| <div class="glass-panel" style="padding: 1.5rem;"> | |
| <div style="font-size: 0.85rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; margin-bottom: 1rem; letter-spacing: 0.05em;"> | |
| Active Architecture Policy Violations (W3C SHACL Grounded) | |
| </div> | |
| <div id="modelerFindingsList" class="shacl-findings-list"> | |
| <!-- Dynamically populated by architectureModeler.js --> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- TAB: CROSS-REGULATORY HARMONIZATION --> | |
| <section class="tab-content" id="tab-cross-reg"> | |
| <!-- Top Banner / Header --> | |
| <div class="glass-panel" style="padding: 1.5rem; margin-bottom: 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;"> | |
| <div> | |
| <h2 style="font-size: 1.3rem; font-weight: 700; display: flex; align-items: center; gap: 0.6rem;"> | |
| <span>⚖</span> Cross-Regulatory Harmonization Engine | |
| </h2> | |
| <p style="font-size: 0.84rem; color: var(--text-secondary); margin-top: 0.25rem;"> | |
| Unified statutory conformance across <strong>GDPR (2016/679)</strong>, <strong>EU AI Act (2024/1689)</strong>, and <strong>NIS2 Directive (2022/2555)</strong>. | |
| </p> | |
| </div> | |
| <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;"> | |
| <span class="badge" style="background: rgba(99, 102, 241, 0.15); border: 1px solid rgba(99, 102, 241, 0.3); color: #a5b4fc;">GDPR: 32016R0679</span> | |
| <span class="badge" style="background: rgba(236, 72, 153, 0.15); border: 1px solid rgba(236, 72, 153, 0.3); color: #f472b6;">AI Act: 32024R1689</span> | |
| <span class="badge" style="background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.3); color: #6ee7b7;">NIS2: 32022L2555</span> | |
| </div> | |
| </div> | |
| <!-- DUAL-INCIDENT SLA NOTIFICATION TIMELINE --> | |
| <div class="glass-panel" style="padding: 1.5rem; margin-bottom: 1.5rem;"> | |
| <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; flex-wrap: wrap; gap: 0.75rem;"> | |
| <div> | |
| <div style="font-size: 0.8rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em;"> | |
| Statutory Incident Escalation | |
| </div> | |
| <h3 style="font-size: 1.1rem; font-weight: 700; margin-top: 0.2rem; color: #f1f5f9;"> | |
| Dual-Incident SLA Notification Timeline (NIS2 24h • GDPR 72h) | |
| </h3> | |
| </div> | |
| <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;"> | |
| <button class="btn btn-secondary btn-sm" id="incidentPresetNow">Incident: Now (T=0)</button> | |
| <button class="btn btn-secondary btn-sm" id="incidentPresetApproaching">Incident: -19h (NIS2 Imminent)</button> | |
| <button class="btn btn-secondary btn-sm" id="incidentPresetBreached">Incident: -78h (GDPR Breached)</button> | |
| </div> | |
| </div> | |
| <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; background: rgba(0, 0, 0, 0.2); padding: 0.85rem 1.15rem; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle);"> | |
| <label for="incidentDateInput" style="font-size: 0.82rem; font-weight: 600; color: #cbd5e1;"> | |
| Detection Timestamp: | |
| </label> | |
| <input type="datetime-local" id="incidentDateInput" class="filter-select" style="max-width: 240px; font-family: var(--font-mono); font-size: 0.82rem;"> | |
| <button class="btn btn-primary btn-sm" id="evalIncidentBtn"> | |
| <span>⚙</span> Re-evaluate SLAs | |
| </button> | |
| <span style="font-size: 0.78rem; color: var(--text-muted); margin-left: auto;"> | |
| Dual reporting required when cybersecurity incidents compromise personal data confidentiality. | |
| </span> | |
| </div> | |
| <!-- Milestones Grid --> | |
| <div id="incidentTimelineGrid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem;"> | |
| <!-- Dynamically populated by crossRegulatoryView.js --> | |
| </div> | |
| </div> | |
| <!-- INTERACTIVE CROSS-REGULATORY SYSTEM AUDITOR --> | |
| <div class="glass-panel" style="padding: 1.5rem; margin-bottom: 1.5rem;"> | |
| <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; flex-wrap: wrap; gap: 0.75rem;"> | |
| <div> | |
| <div style="font-size: 0.8rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em;"> | |
| Live System Compliance Auditing | |
| </div> | |
| <h3 style="font-size: 1.1rem; font-weight: 700; margin-top: 0.2rem; color: #f1f5f9;"> | |
| Harmonized Risk & Requirement Evaluator | |
| </h3> | |
| </div> | |
| <div style="display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;"> | |
| <label for="crossPresetSelect" style="font-size: 0.82rem; color: var(--text-secondary);">Load System Preset:</label> | |
| <select id="crossPresetSelect" class="filter-select" style="min-width: 300px;"> | |
| <option value="scenario-compliant-ai">Compliant Diagnostic Medical AI (100% Pass)</option> | |
| <option value="scenario-ai-credit-scoring">Automated Credit Scoring AI (High-Risk Deficit)</option> | |
| <option value="scenario-biometric-categorization">Biometric Emotion & Political Profiling (Prohibited)</option> | |
| <option value="scenario-dual-ransomware">Critical Infrastructure Ransomware (Active Dual Breach)</option> | |
| </select> | |
| <button class="btn btn-primary btn-sm" id="runCrossAuditBtn"> | |
| <span>⚙</span> Audit System | |
| </button> | |
| <button class="btn btn-secondary btn-sm" id="exportCrossCertBtn"> | |
| <span>📥</span> Export Certificate (.md) | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Auditor Layout Grid --> | |
| <div style="display: grid; grid-template-columns: 1fr 1.2fr; gap: 1.5rem; align-items: start;" class="cross-auditor-layout"> | |
| <!-- Parameters Checklist Form --> | |
| <div class="glass-panel" style="padding: 1.25rem; background: rgba(0, 0, 0, 0.25);"> | |
| <div style="font-size: 0.82rem; font-weight: 700; color: var(--accent-cyan); text-transform: uppercase; margin-bottom: 0.85rem; letter-spacing: 0.05em;"> | |
| Operational Architecture Controls & Parameters | |
| </div> | |
| <div style="display: flex; flex-direction: column; gap: 0.65rem; font-size: 0.82rem;"> | |
| <label style="display: flex; align-items: center; gap: 0.6rem; cursor: pointer;"> | |
| <input type="checkbox" id="chkBiometricCategorization" class="cross-audit-toggle"> | |
| <span>Biometric Data Ingestion & Recognition Active</span> | |
| </label> | |
| <label style="display: flex; align-items: center; gap: 0.6rem; cursor: pointer;"> | |
| <input type="checkbox" id="chkSensitiveInference" class="cross-audit-toggle"> | |
| <span>Inferring Sensitive Data / Emotions (AI Act Art. 5(1)(c))</span> | |
| </label> | |
| <label style="display: flex; align-items: center; gap: 0.6rem; cursor: pointer;"> | |
| <input type="checkbox" id="chkAutomatedDecisions" class="cross-audit-toggle"> | |
| <span>Automated Decision-Making / Profiling (GDPR Art. 22)</span> | |
| </label> | |
| <label style="display: flex; align-items: center; gap: 0.6rem; cursor: pointer;"> | |
| <input type="checkbox" id="chkHumanOversight" class="cross-audit-toggle"> | |
| <span>Human-in-the-Loop Override Control (AI Act Art. 14)</span> | |
| </label> | |
| <label style="display: flex; align-items: center; gap: 0.6rem; cursor: pointer;"> | |
| <input type="checkbox" id="chkDPIAConducted" class="cross-audit-toggle"> | |
| <span>Prior DPIA Completed & Signed (GDPR Art. 35)</span> | |
| </label> | |
| <label style="display: flex; align-items: center; gap: 0.6rem; cursor: pointer;"> | |
| <input type="checkbox" id="chkBiasAudited" class="cross-audit-toggle"> | |
| <span>Statistical Bias Audited on Training Datasets (AI Act Art. 10)</span> | |
| </label> | |
| <label style="display: flex; align-items: center; gap: 0.6rem; cursor: pointer;"> | |
| <input type="checkbox" id="chkDataMinimization" class="cross-audit-toggle"> | |
| <span>Data Minimization & Privacy-Preserving ML Applied</span> | |
| </label> | |
| <label style="display: flex; align-items: center; gap: 0.6rem; cursor: pointer;"> | |
| <input type="checkbox" id="chkMFAActive" class="cross-audit-toggle"> | |
| <span>Mandatory MFA on Privileged Access (NIS2 Art. 21)</span> | |
| </label> | |
| <label style="display: flex; align-items: center; gap: 0.6rem; cursor: pointer;"> | |
| <input type="checkbox" id="chkSupplyChainAudited" class="cross-audit-toggle"> | |
| <span>Third-Party Vendor Supply Chain Audited (NIS2 Art. 21(2))</span> | |
| </label> | |
| <label style="display: flex; align-items: center; gap: 0.6rem; cursor: pointer;"> | |
| <input type="checkbox" id="chkIncidentActive" class="cross-audit-toggle"> | |
| <span>Active Cybersecurity Incident / Data Breach Detected</span> | |
| </label> | |
| </div> | |
| </div> | |
| <!-- Evaluation Outcome Panel --> | |
| <div> | |
| <!-- Status Pill & Score --> | |
| <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem;"> | |
| <div id="crossAuditStatusBadge"> | |
| <!-- Populated by crossRegulatoryView.js --> | |
| </div> | |
| <div style="font-size: 0.85rem; color: var(--text-secondary);"> | |
| Harmonization Score: <strong id="crossAuditScoreVal" style="color: #34d399; font-size: 1.1rem;">100%</strong> | |
| </div> | |
| </div> | |
| <!-- Findings List --> | |
| <div id="crossAuditFindingsList"> | |
| <!-- Populated by crossRegulatoryView.js --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- HARMONIZATION MATRIX CATALOG --> | |
| <div class="glass-panel" style="padding: 1.5rem;"> | |
| <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; flex-wrap: wrap; gap: 0.75rem;"> | |
| <div> | |
| <div style="font-size: 0.8rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em;"> | |
| Unified Legal Framework Matrix | |
| </div> | |
| <h3 style="font-size: 1.1rem; font-weight: 700; margin-top: 0.2rem; color: #f1f5f9;"> | |
| Tri-Regulatory Rule Standards Catalog | |
| </h3> | |
| </div> | |
| <div style="display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;"> | |
| <button class="cross-filter-btn active" data-filter="ALL">All Regulations</button> | |
| <button class="cross-filter-btn" data-filter="AI_ACT">GDPR + AI Act</button> | |
| <button class="cross-filter-btn" data-filter="NIS2">GDPR + NIS2</button> | |
| <button class="cross-filter-btn" data-filter="TRI_REG">Tri-Regulatory Core</button> | |
| <div class="search-input-wrapper" style="min-width: 220px;"> | |
| <input type="text" id="crossRegSearch" class="search-input" placeholder="Search rules, articles..." style="padding: 0.4rem 0.8rem; font-size: 0.8rem;"> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="crossRegRulesContainer"> | |
| <!-- Dynamically populated by crossRegulatoryView.js --> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- TAB: PRIVACY-AS-CODE LINTER --> | |
| <section class="tab-content" id="tab-linter"> | |
| <!-- Banner --> | |
| <div class="glass-panel" style="padding: 1.5rem; margin-bottom: 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;"> | |
| <div> | |
| <h2 style="font-size: 1.3rem; font-weight: 700; display: flex; align-items: center; gap: 0.6rem;"> | |
| <span>🛡</span> Privacy-as-Code DevSecOps Static Analysis Linter | |
| </h2> | |
| <p style="font-size: 0.84rem; color: var(--text-secondary); margin-top: 0.25rem;"> | |
| Automated static analysis for <strong>Terraform Infrastructure</strong> and <strong>OpenAPI Specs</strong> enforcing GDPR, AI Act, and NIS2 compliance before deployment. | |
| </p> | |
| </div> | |
| <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;"> | |
| <span class="badge badge-verified">✓ SARIF v2.1.0 Compatible</span> | |
| <span class="badge badge-actor">CI/CD & Pre-Commit Gating</span> | |
| </div> | |
| </div> | |
| <!-- Controls & Editor --> | |
| <div class="glass-panel" style="padding: 1.5rem; margin-bottom: 1.5rem;"> | |
| <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; flex-wrap: wrap; gap: 0.75rem;"> | |
| <div style="display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap;"> | |
| <label for="linterPresetSelect" style="font-size: 0.82rem; color: var(--text-secondary);">Load Architecture / API Spec:</label> | |
| <select id="linterPresetSelect" class="filter-select" style="min-width: 320px;"> | |
| <option value="tf-vulnerable">Vulnerable Terraform Plan (Non-EEA, Unencrypted, Public S3)</option> | |
| <option value="tf-compliant">Compliant Terraform Plan (Frankfurt, KMS Encrypted, Strict IAM)</option> | |
| <option value="api-vulnerable">Vulnerable OpenAPI Spec (Biometric Endpoint Missing Auth/DPIA)</option> | |
| <option value="api-compliant">Compliant OpenAPI Spec (OAuth2 mTLS, DPIA Reference, POST Body)</option> | |
| </select> | |
| </div> | |
| <div style="display: flex; gap: 0.6rem; flex-wrap: wrap;"> | |
| <button class="btn btn-primary btn-sm" id="runLinterBtn"> | |
| <span>⚙</span> Run Privacy Lint | |
| </button> | |
| <button class="btn btn-secondary btn-sm" id="exportSarifBtn"> | |
| <span>📥</span> Export SARIF (.json) | |
| </button> | |
| </div> | |
| </div> | |
| <!-- 2-Column Linter Layout --> | |
| <div style="display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.5rem;" class="linter-grid-layout"> | |
| <div> | |
| <div style="font-size: 0.78rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; margin-bottom: 0.4rem; letter-spacing: 0.05em;"> | |
| Input Specification (JSON / Terraform Plan / OpenAPI) | |
| </div> | |
| <textarea id="linterCodeEditor" class="linter-editor" spellcheck="false"></textarea> | |
| </div> | |
| <div> | |
| <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.6rem;"> | |
| <div id="linterStatusBadge"> | |
| <!-- Dynamically populated --> | |
| </div> | |
| <div style="font-size: 0.82rem; color: var(--text-secondary);"> | |
| Infringements: <strong id="linterViolationsCount" style="color: #fca5a5;">0</strong> | |
| </div> | |
| </div> | |
| <div id="linterFindingsList" style="max-height: 400px; overflow-y: auto;"> | |
| <!-- Dynamically populated by privacyLinterView.js --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- TAB: ARTICLE 35 DPIA WIZARD --> | |
| <section class="tab-content" id="tab-dpia"> | |
| <!-- Banner --> | |
| <div class="glass-panel" style="padding: 1.5rem; margin-bottom: 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;"> | |
| <div> | |
| <h2 style="font-size: 1.3rem; font-weight: 700; display: flex; align-items: center; gap: 0.6rem;"> | |
| <span>📋</span> Article 35 Data Protection Impact Assessment (DPIA) Wizard | |
| </h2> | |
| <p style="font-size: 0.84rem; color: var(--text-secondary); margin-top: 0.25rem;"> | |
| Automated statutory risk assessment adhering strictly to <strong>EDPB Guidelines WP 248 rev.01</strong> with inherent/residual risk scoring. | |
| </p> | |
| </div> | |
| <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;"> | |
| <span class="badge" style="background: rgba(99, 102, 241, 0.15); border: 1px solid rgba(99, 102, 241, 0.3); color: #a5b4fc;">GDPR Art. 35 • WP 248</span> | |
| <button class="btn btn-primary btn-sm" id="exportDpiaReportBtn"> | |
| <span>📥</span> Export Official DPIA Report (.md) | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Controls & Scoring Overview --> | |
| <div class="glass-panel" style="padding: 1.5rem; margin-bottom: 1.5rem;"> | |
| <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; flex-wrap: wrap; gap: 0.75rem;"> | |
| <div style="display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap;"> | |
| <label for="dpiaPresetSelect" style="font-size: 0.82rem; color: var(--text-secondary);">Load Operation Blueprint:</label> | |
| <select id="dpiaPresetSelect" class="filter-select" style="min-width: 320px;"> | |
| <option value="op-ai-recruitment">Autonomous AI Recruitment & Video Scoring Engine</option> | |
| <option value="op-smart-cctv">Commercial Center CCTV Facial Recognition & Heatmap</option> | |
| <option value="op-internal-payroll">Internal Employee Monthly Salary Remittance (Low Risk)</option> | |
| </select> | |
| </div> | |
| <div style="display: flex; gap: 0.8rem; align-items: center;"> | |
| <div id="dpiaThresholdBadge"> | |
| <!-- Dynamically populated --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Operation Details Form --> | |
| <div style="display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; margin-bottom: 1.25rem;"> | |
| <div> | |
| <label style="font-size: 0.78rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase;">Operation Title</label> | |
| <input type="text" id="dpiaOpTitle" class="filter-select" style="width: 100%; margin-top: 0.3rem;"> | |
| </div> | |
| <div> | |
| <label style="font-size: 0.78rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase;">Processing Description & Scope</label> | |
| <input type="text" id="dpiaOpDesc" class="filter-select" style="width: 100%; margin-top: 0.3rem;"> | |
| </div> | |
| </div> | |
| <!-- Metrics Grid --> | |
| <div class="metrics-grid" style="margin-bottom: 1rem;"> | |
| <div class="glass-panel metric-card"> | |
| <div class="metric-label">Triggered High-Risk Criteria</div> | |
| <div class="metric-value" id="dpiaCriteriaCountVal" style="color: var(--mod-prohibition);">0 / 10</div> | |
| <div class="metric-sub">≥2 triggers mandatory DPIA</div> | |
| </div> | |
| <div class="glass-panel metric-card"> | |
| <div class="metric-label">Inherent Baseline Risk</div> | |
| <div class="metric-value" id="dpiaInherentScoreVal" style="color: #fbbf24;">16 / 25</div> | |
| <div class="metric-sub">Likelihood × Severity</div> | |
| </div> | |
| <div class="glass-panel metric-card"> | |
| <div class="metric-label">Safeguards Reduction</div> | |
| <div class="metric-value" id="dpiaReductionVal" style="color: #34d399;">-65%</div> | |
| <div class="metric-sub">Applied TOMs mitigating effect</div> | |
| </div> | |
| <div class="glass-panel metric-card"> | |
| <div class="metric-label">Final Residual Risk</div> | |
| <div class="metric-value" id="dpiaResidualScoreVal" style="color: #60a5fa;">5.6 / 25</div> | |
| <div class="metric-sub" id="dpiaResidualBadge">🟢 Low Risk</div> | |
| </div> | |
| </div> | |
| <!-- Mandatory Art. 36 Banner --> | |
| <div id="dpiaArt36Banner" style="display: none; margin-bottom: 1rem;"> | |
| <!-- Dynamically populated if score >= 15 --> | |
| </div> | |
| <!-- 2-Column Criteria & Risk Form --> | |
| <div style="display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.5rem; align-items: start;"> | |
| <div> | |
| <div style="font-size: 0.82rem; font-weight: 700; color: var(--accent-cyan); text-transform: uppercase; margin-bottom: 0.6rem; letter-spacing: 0.05em;"> | |
| EDPB WP 248 High-Risk Criteria Checklist | |
| </div> | |
| <div id="dpiaCriteriaContainer"> | |
| <!-- Dynamically populated by dpiaWizard.js --> | |
| </div> | |
| </div> | |
| <div> | |
| <!-- Inherent Sliders --> | |
| <div class="glass-panel" style="padding: 1.25rem; background: rgba(0, 0, 0, 0.25); margin-bottom: 1.25rem;"> | |
| <div style="font-size: 0.82rem; font-weight: 700; color: var(--accent-indigo); text-transform: uppercase; margin-bottom: 0.85rem; letter-spacing: 0.05em;"> | |
| Inherent Risk Parameters (Pre-Mitigation) | |
| </div> | |
| <div style="margin-bottom: 1rem;"> | |
| <div style="display: flex; justify-content: space-between; font-size: 0.82rem; margin-bottom: 0.3rem;"> | |
| <span>Likelihood of Harm:</span> | |
| <strong>Level <span id="dpiaLikelihoodVal">4</span> / 5</strong> | |
| </div> | |
| <input type="range" id="dpiaLikelihoodSlider" min="1" max="5" value="4" style="width: 100%;"> | |
| </div> | |
| <div> | |
| <div style="display: flex; justify-content: space-between; font-size: 0.82rem; margin-bottom: 0.3rem;"> | |
| <span>Severity of Impact:</span> | |
| <strong>Level <span id="dpiaSeverityVal">4</span> / 5</strong> | |
| </div> | |
| <input type="range" id="dpiaSeveritySlider" min="1" max="5" value="4" style="width: 100%;"> | |
| </div> | |
| </div> | |
| <!-- TOMs Checklist --> | |
| <div> | |
| <div style="font-size: 0.82rem; font-weight: 700; color: #34d399; text-transform: uppercase; margin-bottom: 0.6rem; letter-spacing: 0.05em;"> | |
| Technical & Organizational Safeguards (TOMs) | |
| </div> | |
| <div id="dpiaTomsContainer"> | |
| <!-- Dynamically populated by dpiaWizard.js --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- TAB: DSAR SLA ORCHESTRATOR --> | |
| <section class="tab-content" id="tab-dsar"> | |
| <!-- Banner --> | |
| <div class="glass-panel" style="padding: 1.5rem; margin-bottom: 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;"> | |
| <div> | |
| <h2 style="font-size: 1.3rem; font-weight: 700; display: flex; align-items: center; gap: 0.6rem;"> | |
| <span>📬</span> Data Subject Access Request (DSAR) SLA Workflow Orchestrator | |
| </h2> | |
| <p style="font-size: 0.84rem; color: var(--text-secondary); margin-top: 0.25rem;"> | |
| Statutory 1-month SLA deadline tracking under <strong>Article 12(3) GDPR</strong> with Article 17(3) statutory legal exemption evaluation. | |
| </p> | |
| </div> | |
| <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;"> | |
| <button class="btn btn-primary btn-sm" id="newDsarTicketBtn"> | |
| <span>+</span> Log New Request | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Top Queue Metrics --> | |
| <section class="metrics-grid" style="margin-bottom: 1.5rem;"> | |
| <div class="glass-panel metric-card"> | |
| <div class="metric-label">Active DSAR Requests</div> | |
| <div class="metric-value" id="dsarMetricTotal">4</div> | |
| <div class="metric-sub">In queue for fulfillment</div> | |
| </div> | |
| <div class="glass-panel metric-card"> | |
| <div class="metric-label">Urgent Requests (≤5 Days)</div> | |
| <div class="metric-value" id="dsarMetricUrgent" style="color: #fbbf24;">1</div> | |
| <div class="metric-sub">Approaching 1-month SLA limit</div> | |
| </div> | |
| <div class="glass-panel metric-card"> | |
| <div class="metric-label">Statutory Breaches (>30 Days)</div> | |
| <div class="metric-value" id="dsarMetricBreached" style="color: var(--mod-prohibition);">1</div> | |
| <div class="metric-sub">Infringing Article 12(3) GDPR</div> | |
| </div> | |
| </section> | |
| <!-- Filter Bar --> | |
| <div class="glass-panel filter-bar" style="margin-bottom: 1.5rem;"> | |
| <div class="filter-row-primary"> | |
| <div class="search-input-wrapper"> | |
| <span class="search-icon">🔍</span> | |
| <input type="text" id="dsarSearchInput" class="search-input" placeholder="Search ticket ID, data subject name, email, or request details..."> | |
| </div> | |
| <div class="select-wrapper"> | |
| <select id="dsarRightFilter" class="filter-select"> | |
| <option value="ALL">All Rights (Chapter III)</option> | |
| <option value="RIGHT_ACCESS">Art. 15 Right of Access</option> | |
| <option value="RIGHT_RECTIFICATION">Art. 16 Rectification</option> | |
| <option value="RIGHT_ERASURE">Art. 17 Erasure ('To be Forgotten')</option> | |
| <option value="RIGHT_PORTABILITY">Art. 20 Data Portability</option> | |
| <option value="RIGHT_OBJECT">Art. 21 Right to Object</option> | |
| </select> | |
| </div> | |
| <div class="select-wrapper"> | |
| <select id="dsarStatusFilter" class="filter-select"> | |
| <option value="ALL">All Statuses</option> | |
| <option value="ACTIVE">🟢 Active (>5d remaining)</option> | |
| <option value="URGENT">⚠️ Urgent (≤5d remaining)</option> | |
| <option value="BREACHED">🔴 Statutory Breached</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tickets Queue List --> | |
| <div id="dsarTicketsContainer"> | |
| <!-- Dynamically populated by dsarManager.js --> | |
| </div> | |
| </section> | |
| <!-- TAB: AI LEGAL ASSISTANT --> | |
| <section class="tab-content" id="tab-assistant"> | |
| <div class="assistant-layout glass-panel"> | |
| <!-- Assistant Header --> | |
| <div class="assistant-header"> | |
| <div> | |
| <h3 style="font-size: 1.15rem; font-weight: 700; display: flex; align-items: center; gap: 0.5rem;"> | |
| <span>💬</span> Verifiable GDPR Legal Assistant | |
| </h3> | |
| <p style="font-size: 0.8rem; color: var(--text-secondary);"> | |
| Deterministic, offline Retrieval-Augmented Generation • 100% Cryptographically Grounded • Zero Hallucinations | |
| </p> | |
| </div> | |
| <div style="display: flex; gap: 0.5rem;"> | |
| <span class="badge badge-verified">✓ 100% SHA-256 Verifiable</span> | |
| <span class="badge badge-actor">Offline Engine</span> | |
| </div> | |
| </div> | |
| <!-- Quick Prompts Bar --> | |
| <div class="assistant-prompts-bar"> | |
| <span style="font-size: 0.76rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; align-self: center;">Suggested:</span> | |
| <div class="assistant-prompt-pill" data-prompt="What must a controller do when a personal data breach occurs?"> | |
| What must a controller do when a personal data breach occurs? | |
| </div> | |
| <div class="assistant-prompt-pill" data-prompt="Under what conditions is a Data Protection Impact Assessment (DPIA) mandatory?"> | |
| When is a DPIA mandatory? | |
| </div> | |
| <div class="assistant-prompt-pill" data-prompt="What are the exceptions to the data subject's right to erasure?"> | |
| Exceptions to right to erasure | |
| </div> | |
| <div class="assistant-prompt-pill" data-prompt="What are the 6 lawful bases for processing personal data under Article 6?"> | |
| 6 lawful bases under Art. 6 | |
| </div> | |
| <div class="assistant-prompt-pill" data-prompt="What are the maximum administrative fine ceilings under Article 83?"> | |
| Fines & penalties under Art. 83 | |
| </div> | |
| </div> | |
| <!-- Chat Thread --> | |
| <div class="assistant-messages-container" id="assistantMessages"> | |
| <div class="chat-message assistant-message"> | |
| <div class="message-sender">🛡 GDPR Legal Reasoner (Zero-Hallucination Engine)</div> | |
| <div class="message-content"> | |
| <div style="font-size: 0.92rem; line-height: 1.5; color: #f1f5f9;"> | |
| Welcome to the <strong>Verifiable GDPR AI Legal Assistant</strong>. | |
| <p style="margin-top: 0.5rem; color: #cbd5e1; font-size: 0.86rem;"> | |
| Unlike generic large language models that may fabricate article numbers or misquote statutory timelines, this reasoning engine is mathematically anchored to the <strong>936 line-by-line normative triples</strong> of Regulation (EU) 2016/679. | |
| </p> | |
| <p style="margin-top: 0.5rem; color: #cbd5e1; font-size: 0.86rem;"> | |
| Ask any legal or compliance question, or select a suggested prompt above. Every retrieved legal rule includes its exact Hohfeldian modality, duty bearer, statutory timeline, and <strong>cryptographic SHA-256 provenance link</strong>. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Input Bar --> | |
| <div class="assistant-input-bar"> | |
| <input type="text" id="assistantInput" class="assistant-input-field" placeholder="Ask any GDPR compliance question (e.g. 'What are processor obligations for data breaches?', 'What rights exist under automated profiling?')..."> | |
| <button class="btn btn-primary" id="assistantSendBtn"> | |
| <span>Ask Assistant</span> → | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <!-- 4-TIER PROVENANCE MODAL --> | |
| <div class="modal-overlay" id="provenanceModal"> | |
| <div class="modal-box"> | |
| <div class="modal-header"> | |
| <div> | |
| <div style="font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; font-weight: 700; letter-spacing: 0.05em; margin-bottom: 0.2rem;"> | |
| 4-Tier Statutory Provenance Inspector | |
| </div> | |
| <h2 id="modalTitle" style="font-size: 1.25rem; font-weight: 700; display: flex; align-items: center; gap: 0.6rem;"> | |
| <!-- Rendered by provenanceModal.js --> | |
| </h2> | |
| </div> | |
| <button class="modal-close" id="modalCloseBtn" title="Close (Esc)">×</button> | |
| </div> | |
| <div id="modalBody"> | |
| <!-- Rendered by provenanceModal.js --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ARTICLE 30 ROPA DETAILS MODAL --> | |
| <div class="modal-overlay" id="ropaModal"> | |
| <div class="modal-box"> | |
| <div class="modal-header"> | |
| <div> | |
| <div style="font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; font-weight: 700; letter-spacing: 0.05em; margin-bottom: 0.2rem;"> | |
| Article 30 Processing Activity Specification | |
| </div> | |
| <h2 id="ropaModalTitle" style="font-size: 1.25rem; font-weight: 700; display: flex; align-items: center; gap: 0.6rem;"> | |
| <!-- Rendered by ropaManager.js --> | |
| </h2> | |
| </div> | |
| <button class="modal-close" id="ropaModalCloseBtn" title="Close (Esc)">×</button> | |
| </div> | |
| <div id="ropaModalBody"> | |
| <!-- Rendered by ropaManager.js --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- DSAR RESPONSE & EXEMPTION MODAL --> | |
| <div class="modal-overlay" id="dsarResponseModal"> | |
| <div class="modal-box" style="max-width: 750px;"> | |
| <div class="modal-header"> | |
| <div> | |
| <div style="font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; font-weight: 700; letter-spacing: 0.05em; margin-bottom: 0.2rem;"> | |
| Data Subject Rights SLA Workflow | |
| </div> | |
| <h2 id="dsarResponseTitle" style="font-size: 1.25rem; font-weight: 700; display: flex; align-items: center; gap: 0.6rem;"> | |
| <!-- Rendered by dsarManager.js --> | |
| </h2> | |
| </div> | |
| <button class="modal-close" id="dsarResponseCloseBtn" title="Close (Esc)">×</button> | |
| </div> | |
| <div id="dsarResponseBody"> | |
| <!-- Rendered by dsarManager.js --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main JavaScript App --> | |
| </body> | |
| </html> | |