gitmodelmujtaba/gdpr-compliance-explorer
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>GDPR Interactive Compliance Explorer & Knowledge Graph</title>7 <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.">8 9 <!-- Fonts -->10 <link rel="preconnect" href="https://fonts.googleapis.com">11 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>12 <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">13 14 <!-- Styles -->15 16 <!-- Cytoscape for Knowledge Graph -->17 <script src="https://cdn.jsdelivr.net/npm/cytoscape@3.28.1/dist/cytoscape.min.js"></script>18 <script type="module" crossorigin src="./assets/index-CJB4hcrp.js"></script>19 <link rel="stylesheet" crossorigin href="./assets/index-ByAd2Vml.css">20</head>21<body>22 23 <div class="app-container">24 25 <!-- Header -->26 <header class="app-header">27 <div class="brand-section">28 <div class="brand-logo">🛡</div>29 <div class="brand-title">30 <h1>GDPR Compliance Explorer</h1>31 <p>Regulation (EU) 2016/679 • Deontic Normative Triples & 4-Tier Legal Provenance</p>32 </div>33 </div>34 <div class="header-stats">35 <div class="stat-pill">36 <span class="indicator-dot"></span>37 <span>Corpus: <strong>99 Articles • 173 Recitals</strong></span>38 </div>39 <div class="stat-pill">40 <span class="badge badge-verified">✓ SHA-256 Provenance</span>41 </div>42 <div class="stat-pill">43 <span>Standards: <strong>W3C DPV • ISO 27701</strong></span>44 </div>45 </div>46 </header>47 48 <!-- Top Metrics Grid -->49 <section class="metrics-grid">50 <div class="glass-panel metric-card">51 <div class="metric-label">Total Normative Clauses</div>52 <div class="metric-value" id="statTotalTriples">936</div>53 <div class="metric-sub">Line-by-line Hohfeldian tuples</div>54 </div>55 <div class="glass-panel metric-card">56 <div class="metric-label">Binding Legal Obligations</div>57 <div class="metric-value" id="statTotalObligations" style="color: var(--mod-obligation);">489</div>58 <div class="metric-sub">Mandatory compliance duties</div>59 </div>60 <div class="glass-panel metric-card">61 <div class="metric-label">Knowledge Graph Entities</div>62 <div class="metric-value" id="statTotalNodes" style="color: var(--accent-cyan);">355</div>63 <div class="metric-sub">Across 924 relational links</div>64 </div>65 <div class="glass-panel metric-card">66 <div class="metric-label">Cryptographic Integrity</div>67 <div class="metric-value" id="statVerifiedHashes" style="color: #34d399;">100%</div>68 <div class="metric-sub">EUR-Lex ELI permalink verified</div>69 </div>70 </section>71 72 <!-- Navigation Tabs -->73 <nav class="nav-tabs" role="tablist">74 <button class="nav-tab active" data-tab="tab-triples" id="tabBtnTriples">75 <span>🔍</span> Rules & Triples Explorer76 </button>77 <button class="nav-tab" data-tab="tab-assistant" id="tabBtnAssistant">78 <span>💬</span> AI Legal Assistant (Verifiable RAG)79 </button>80 <button class="nav-tab" data-tab="tab-graph" id="tabBtnGraph">81 <span>🖇</span> Knowledge Graph Visualizer82 </button>83 <button class="nav-tab" data-tab="tab-compliance" id="tabBtnCompliance">84 <span>⚙</span> Compliance Decision Engines85 </button>86 <button class="nav-tab" data-tab="tab-standards" id="tabBtnStandards">87 <span>📖</span> W3C DPV & ISO 27701 Matrix88 </button>89 <button class="nav-tab" data-tab="tab-dictionary" id="tabBtnDictionary">90 <span>📄</span> Data Dictionary Taxonomy91 </button>92 <button class="nav-tab" data-tab="tab-ropa" id="tabBtnRopa">93 <span>📝</span> Art. 30 ROPA Register94 </button>95 <button class="nav-tab" data-tab="tab-modeler" id="tabBtnModeler">96 <span>🏗</span> Architecture Modeler97 </button>98 <button class="nav-tab" data-tab="tab-cross-reg" id="tabBtnCrossReg">99 <span>⚖</span> Cross-Regulatory (AI Act • NIS2)100 </button>101 <button class="nav-tab" data-tab="tab-linter" id="tabBtnLinter">102 <span>🛡</span> Privacy Linter (DevSecOps)103 </button>104 <button class="nav-tab" data-tab="tab-dpia" id="tabBtnDpia">105 <span>📋</span> Art. 35 DPIA Wizard106 </button>107 <button class="nav-tab" data-tab="tab-dsar" id="tabBtnDsar">108 <span>📬</span> DSAR SLA Orchestrator109 </button>110 </nav>111 112 <!-- TAB 1: TRIPLES EXPLORER -->113 <main class="tab-content active" id="tab-triples">114 115 <!-- Filter Bar -->116 <div class="glass-panel filter-bar">117 <div class="filter-row-primary">118 <div class="search-input-wrapper">119 <span class="search-icon">🔍</span>120 <input type="text" id="searchQuery" class="search-input" placeholder="Search verbatim text, actors, actions, or keywords (e.g. '72 hours', 'consent', 'erasure')...">121 </div>122 <div class="select-wrapper">123 <select id="actorFilter" class="filter-select">124 <option value="ALL">All Legal Actors</option>125 </select>126 </div>127 <div class="select-wrapper">128 <select id="modalityFilter" class="filter-select">129 <option value="ALL">All Modalities</option>130 <option value="OBLIGATION">Obligation (Shall / Must)</option>131 <option value="RIGHT">Right (Shall Have Right)</option>132 <option value="PROHIBITION">Prohibition (Shall Not)</option>133 <option value="PERMISSION">Permission (May / Can)</option>134 <option value="DEFINITION">Definition (Means)</option>135 <option value="DECLARATIVE">Declarative Norm</option>136 </select>137 </div>138 <div class="select-wrapper">139 <select id="articleFilter" class="filter-select">140 <option value="ALL">All Articles (1-99)</option>141 </select>142 </div>143 </div>144 145 <div class="filter-row-secondary">146 <div class="quick-toggles">147 <span style="color: var(--text-muted); font-size: 0.78rem; text-transform: uppercase; font-weight: 600; margin-right: 0.2rem;">Quick Toggles:</span>148 <div class="toggle-chip" id="toggleDeadlines">⏱ Has Deadlines</div>149 <div class="toggle-chip" id="toggleExceptions">⚠️ Has Statutory Exceptions</div>150 <div class="toggle-chip" id="toggleCitations">🔗 Has Cross-Citations</div>151 </div>152 <div class="filter-actions">153 <span id="resultCount" style="color: var(--text-muted); font-size: 0.8rem; margin-right: 0.5rem;">936 rules matched</span>154 <button class="btn btn-secondary btn-sm" id="resetFiltersBtn">↻ Reset</button>155 <button class="btn btn-secondary btn-sm" id="exportCsvBtn">⇩ CSV</button>156 <button class="btn btn-primary btn-sm" id="exportJsonBtn">⇩ JSON</button>157 </div>158 </div>159 </div>160 161 <!-- Table Container -->162 <div class="glass-panel table-container">163 <table class="triples-table" id="triplesTable">164 <thead>165 <tr>166 <th style="width: 105px;">ID</th>167 <th style="width: 100px;">Location</th>168 <th style="width: 180px;">Norm Addressee</th>169 <th style="width: 130px;">Modality</th>170 <th style="width: 190px;">Predicate & Theme</th>171 <th>Verbatim Statutory Clause</th>172 <th style="width: 110px; text-align: right;">Provenance</th>173 </tr>174 </thead>175 <tbody id="triplesTableBody">176 <!-- Rendered by tripleView.js -->177 </tbody>178 </table>179 180 <!-- Pagination -->181 <div class="pagination-bar">182 <div id="paginationInfo">Showing 1-25 of 936 rules</div>183 <div class="pagination-controls">184 <select id="pageSizeSelect" class="filter-select" style="padding: 0.25rem 0.5rem; font-size: 0.78rem; width: auto;">185 <option value="25">25 per page</option>186 <option value="50">50 per page</option>187 <option value="100">100 per page</option>188 </select>189 <button class="btn btn-secondary btn-sm" id="prevPageBtn">← Prev</button>190 <span id="currentPageNumber" style="font-weight: 600; padding: 0 0.5rem;">Page 1</span>191 <button class="btn btn-secondary btn-sm" id="nextPageBtn">Next →</button>192 </div>193 </div>194 </div>195 196 </main>197 198 <!-- TAB 2: KNOWLEDGE GRAPH VISUALIZER -->199 <section class="tab-content" id="tab-graph">200 <div class="graph-view-container">201 202 <!-- Graph Canvas -->203 <div class="graph-canvas-wrapper glass-panel">204 <div class="graph-floating-controls">205 <button class="btn btn-secondary btn-sm" id="graphZoomIn" title="Zoom In">+</button>206 <button class="btn btn-secondary btn-sm" id="graphZoomOut" title="Zoom Out">−</button>207 <button class="btn btn-secondary btn-sm" id="graphFit" title="Fit to Screen">↻ Fit</button>208 <select id="graphLayoutSelect" class="filter-select" style="padding: 0.35rem; font-size: 0.75rem; background: rgba(15,23,42,0.9);">209 <option value="cose">Force-Directed (cose)</option>210 <option value="concentric">Concentric Rings</option>211 <option value="circle">Circular</option>212 <option value="breadthfirst">Hierarchical</option>213 </select>214 </div>215 <div id="cy"></div>216 </div>217 218 <!-- Graph Sidebar -->219 <aside class="glass-panel graph-sidebar">220 <h3>Entity Types & Filters</h3>221 <div id="graphLegend" style="font-size: 0.8rem;">222 <!-- Generated by graphView.js -->223 </div>224 225 <h3 style="margin-top: 0.5rem;">Selected Entity Details</h3>226 <div id="graphNodeDetails">227 <div style="color: var(--text-muted); font-size: 0.85rem; text-align: center; padding: 2rem 0;">228 Click any node in the knowledge graph to view its legal attributes, definitions, and statutory relationships.229 </div>230 </div>231 </aside>232 233 </div>234 </section>235 236 <!-- TAB 3: COMPLIANCE DECISION ENGINES -->237 <section class="tab-content" id="tab-compliance">238 239 <!-- W3C SHACL Executable Policy Auditor -->240 <div class="shacl-auditor-container">241 <div class="shacl-header-card">242 <div>243 <div style="display: flex; align-items: center; gap: 0.6rem;">244 <span style="font-size: 1.5rem;">⚒</span>245 <h2 style="font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em;">W3C SHACL Executable Policy Audit Engine</h2>246 </div>247 <p style="font-size: 0.84rem; color: var(--text-secondary); margin-top: 0.35rem; max-width: 820px; line-height: 1.45;">248 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.249 </p>250 </div>251 <div class="shacl-header-meta">252 <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>253 <span class="badge badge-verified">🔒 100% Provenance Anchored</span>254 <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>255 </div>256 </div>257 258 <div class="shacl-workspace">259 <!-- Left Column: Payload Editor & Scenario Selector -->260 <div class="shacl-editor-panel">261 <div class="shacl-editor-toolbar">262 <label style="font-size: 0.82rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em;">263 Operational Architecture Payload264 </label>265 <div style="display: flex; gap: 0.4rem;">266 <button class="btn btn-secondary btn-sm" id="formatJsonBtn" title="Prettify JSON">⚙ Format</button>267 <button class="btn btn-secondary btn-sm" id="resetScenarioBtn" title="Reset to Scenario Default">↻ Reset</button>268 </div>269 </div>270 271 <div class="select-wrapper">272 <select id="auditScenarioSelect" class="filter-select" style="font-weight: 600;">273 <option value="scenario-a-compliant-saas">Scenario A: Compliant EU Enterprise Cloud SaaS</option>274 <option value="scenario-b-unlawful-us-transfer">Scenario B: Unlawful Cross-Border US Cloud Transfer</option>275 <option value="scenario-c-late-breach-notification">Scenario C: Late High-Risk Data Breach Notification</option>276 <option value="scenario-d-invalid-bundled-consent">Scenario D: Non-Compliant Pre-ticked Bundled Consent</option>277 <option value="custom">Custom Operational Architecture (Interactive JSON)</option>278 </select>279 </div>280 281 <div id="scenarioDescriptionBox" class="scenario-desc-box">282 Standard B2B SaaS platform hosted in Frankfurt (EU-central-1), processing customer data with explicit contracts and encryption.283 </div>284 285 <textarea id="auditPayloadJson" class="payload-textarea" spellcheck="false" placeholder="Paste or edit operational JSON payload here..."></textarea>286 287 <button id="runShaclAuditBtn" class="btn btn-primary" style="justify-content: center; padding: 0.85rem; font-weight: 700; font-size: 0.95rem;">288 <span>▶</span> Run SHACL Compliance Audit289 </button>290 </div>291 292 <!-- Right Column: Audit Findings & Provenance Feed -->293 <div class="shacl-results-panel">294 <!-- Score Card -->295 <div class="shacl-score-card">296 <div class="shacl-score-left">297 <div class="shacl-score-circle" id="auditScoreCircle">100</div>298 <div>299 <div style="font-size: 0.75rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase;">300 Statutory Compliance Status301 </div>302 <div id="auditStatusBadge" style="margin-top: 0.25rem;">303 <span class="badge badge-verified" style="font-size: 0.85rem; padding: 0.25rem 0.65rem;">COMPLIANT</span>304 </div>305 </div>306 </div>307 <div class="shacl-stats-row">308 <div>309 <div style="font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase;">Evaluated</div>310 <div style="font-size: 1.1rem; font-weight: 700; color: #f1f5f9;" id="auditEvaluatedCount">2</div>311 </div>312 <div>313 <div style="font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase;">Critical</div>314 <div style="font-size: 1.1rem; font-weight: 700; color: #fb7185;" id="auditCriticalCount">0</div>315 </div>316 <div>317 <div style="font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase;">Standard</div>318 <div style="font-size: 1.1rem; font-weight: 700; color: #fbbf24;" id="auditStandardCount">0</div>319 </div>320 </div>321 </div>322 323 <div style="display: flex; justify-content: space-between; align-items: center;">324 <div style="font-size: 0.85rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em;">325 Violation Findings & Normative Citations326 </div>327 <div style="display: flex; gap: 0.45rem;">328 <button class="btn btn-secondary btn-sm" id="copyAuditJsonBtn">📋 Copy Report</button>329 <button class="btn btn-primary btn-sm" id="exportAuditCertBtn">📜 Download Certificate</button>330 </div>331 </div>332 333 <!-- Dynamic Findings List -->334 <div id="auditFindingsContainer" class="shacl-findings-list">335 <!-- Dynamically populated -->336 </div>337 </div>338 </div>339 </div>340 341 <!-- Statutory Fine Risk & Liability Quantifier (EDPB Guidelines 04/2022) -->342 <div class="fine-calculator-card">343 <div style="display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1rem;">344 <div>345 <div style="display: flex; align-items: center; gap: 0.6rem;">346 <span style="font-size: 1.4rem;">💰</span>347 <h3 style="font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em;">Statutory Fine Risk & Financial Liability Quantifier</h3>348 </div>349 <p style="font-size: 0.82rem; color: var(--text-secondary); margin-top: 0.25rem; max-width: 820px; line-height: 1.45;">350 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.351 </p>352 </div>353 <div style="display: flex; gap: 0.45rem; flex-wrap: wrap;">354 <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>355 <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>356 <span class="badge badge-verified">EDPB 04/2022 Validated</span>357 </div>358 </div>359 360 <div class="fine-workspace">361 <!-- Left Column: Controls & Modifiers -->362 <div class="fine-controls-panel">363 <div>364 <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.35rem;">365 <label style="font-size: 0.78rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase;">366 Worldwide Annual Turnover (€ EUR)367 </label>368 <span id="fineUndertakingBracket" class="badge" style="background: rgba(99, 102, 241, 0.2); color: #a5b4fc; font-size: 0.75rem;">369 Medium Undertaking370 </span>371 </div>372 <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;">373 <input type="range" id="fineTurnoverSlider" class="fine-slider" min="500000" max="1000000000" step="1000000" value="50000000">374 </div>375 376 <div>377 <label style="font-size: 0.78rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; display: block; margin-bottom: 0.35rem;">378 Evaluated Infringed Articles (Linked from SHACL Audit)379 </label>380 <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);">381 </div>382 383 <div>384 <label style="font-size: 0.78rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; display: block; margin-bottom: 0.35rem;">385 Infringement Seriousness Rating (Step 1)386 </label>387 <select id="fineSeriousnessSelect" class="filter-select" style="font-size: 0.85rem;">388 <option value="LOW">Low Seriousness (0% - 10% Base Ceiling • Isolated, ordinary data)</option>389 <option value="MEDIUM" selected>Medium Seriousness (10% - 20% Base Ceiling • Systemic, moderate impact)</option>390 <option value="HIGH">High Seriousness (20% - 100% Base Ceiling • Sensitive/Health data, severe)</option>391 </select>392 </div>393 394 <!-- Modifying Factors (Step 3) -->395 <div class="factors-container">396 <div>397 <div class="factor-group-label" style="color: #fb7185;">Aggravating Modifiers (+%)</div>398 <div style="display: flex; flex-direction: column; gap: 0.35rem;">399 <label class="checklist-item" style="padding: 0.45rem;">400 <input type="checkbox" class="fine-factor-cb" data-type="aggravating" value="INTENTIONAL">401 <span style="font-size: 0.75rem;">Intentional Action (+25%)</span>402 </label>403 <label class="checklist-item" style="padding: 0.45rem;">404 <input type="checkbox" class="fine-factor-cb" data-type="aggravating" value="RECIDIVISM">405 <span style="font-size: 0.75rem;">Recidivism / Past Fines (+20%)</span>406 </label>407 <label class="checklist-item" style="padding: 0.45rem;">408 <input type="checkbox" class="fine-factor-cb" data-type="aggravating" value="FAILURE_TO_MITIGATE">409 <span style="font-size: 0.75rem;">Failure to Mitigate (+15%)</span>410 </label>411 <label class="checklist-item" style="padding: 0.45rem;">412 <input type="checkbox" class="fine-factor-cb" data-type="aggravating" value="LACK_OF_COOPERATION">413 <span style="font-size: 0.75rem;">Obstruction of DPA (+20%)</span>414 </label>415 </div>416 </div>417 418 <div>419 <div class="factor-group-label" style="color: #34d399;">Mitigating Modifiers (-%)</div>420 <div style="display: flex; flex-direction: column; gap: 0.35rem;">421 <label class="checklist-item" style="padding: 0.45rem;">422 <input type="checkbox" class="fine-factor-cb" data-type="mitigating" value="PROMPT_SELF_REPORT">423 <span style="font-size: 0.75rem;">Spontaneous Notification (-20%)</span>424 </label>425 <label class="checklist-item" style="padding: 0.45rem;">426 <input type="checkbox" class="fine-factor-cb" data-type="mitigating" value="EXEMPLARY_COOPERATION">427 <span style="font-size: 0.75rem;">Exemplary Cooperation (-15%)</span>428 </label>429 <label class="checklist-item" style="padding: 0.45rem;">430 <input type="checkbox" class="fine-factor-cb" data-type="mitigating" value="ROBUST_PRE_TOMS">431 <span style="font-size: 0.75rem;">Robust TOMs / ISO 27001 (-15%)</span>432 </label>433 <label class="checklist-item" style="padding: 0.45rem;">434 <input type="checkbox" class="fine-factor-cb" data-type="mitigating" value="PROMPT_SUBJECT_REMEDY">435 <span style="font-size: 0.75rem;">Direct Redress to Subjects (-15%)</span>436 </label>437 </div>438 </div>439 </div>440 </div>441 442 <!-- Right Column: Fine Exposure Hero & 5-Step Breakdown -->443 <div class="fine-summary-panel">444 <div class="fine-exposure-hero">445 <div class="fine-hero-top">446 <div style="font-size: 0.75rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase;">447 Estimated Fine Exposure (Expected Amount)448 </div>449 <span id="fineTierBadge" class="badge badge-article">TIER_2 (Art. 83(5))</span>450 </div>451 452 <div id="fineExpectedVal" class="fine-expected-amount">€2,000,000</div>453 454 <div class="fine-exposure-grid">455 <div class="fine-stat-box">456 <div class="fine-stat-label">Min Exposure</div>457 <div id="fineMinVal" class="fine-stat-value" style="color: #34d399;">€400,000</div>458 </div>459 <div class="fine-stat-box">460 <div class="fine-stat-label">Upper Exposure</div>461 <div id="fineMaxVal" class="fine-stat-value" style="color: #fbbf24;">€2,000,000</div>462 </div>463 <div class="fine-stat-box">464 <div class="fine-stat-label">Statutory Ceiling</div>465 <div id="fineCeilingVal" class="fine-stat-value" style="color: #fb7185;">€20,000,000</div>466 </div>467 </div>468 </div>469 470 <div>471 <div style="font-size: 0.78rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; margin-bottom: 0.5rem; letter-spacing: 0.05em;">472 EDPB Guidelines 04/2022: 5-Step Assessment Trail473 </div>474 <div id="fineStepsContainer" style="display: flex; flex-direction: column; gap: 0.45rem;">475 <!-- Dynamically populated by fineCalculator.js -->476 </div>477 </div>478 </div>479 </div>480 </div>481 482 <!-- Quick Regulatory Decision Wizards Grid -->483 <div style="margin-bottom: 1rem; border-top: 1px solid var(--border-subtle); padding-top: 1.5rem;">484 <h3 style="font-size: 1.15rem; font-weight: 700; margin-bottom: 0.35rem;">Statutory Assessment Wizards</h3>485 <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>486 </div>487 488 <div class="audit-grid" style="grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));">489 490 <!-- DPIA Checker -->491 <div class="glass-panel audit-card">492 <div style="display: flex; justify-content: space-between; align-items: flex-start;">493 <div>494 <h4 style="font-size: 1.05rem; font-weight: 700;">DPIA Mandatory Trigger Evaluator</h4>495 <p style="font-size: 0.8rem; color: var(--text-secondary);">Article 35(3) GDPR • Data Protection Impact Assessment</p>496 </div>497 <span class="badge badge-article">Art. 35</span>498 </div>499 500 <div style="display: flex; flex-direction: column; gap: 0.45rem;">501 <label class="checklist-item">502 <input type="checkbox" class="dpia-check" data-mandatory="true">503 <div style="font-size: 0.8rem;">504 <strong>Automated Profiling:</strong> Systematic evaluation producing legal effects (Art. 35(3)(a)).505 </div>506 </label>507 508 <label class="checklist-item">509 <input type="checkbox" class="dpia-check" data-mandatory="true">510 <div style="font-size: 0.8rem;">511 <strong>Large-Scale Sensitive Data:</strong> Processing special categories (Art. 9/10) (Art. 35(3)(b)).512 </div>513 </label>514 515 <label class="checklist-item">516 <input type="checkbox" class="dpia-check" data-mandatory="true">517 <div style="font-size: 0.8rem;">518 <strong>Public Surveillance:</strong> Systematic monitoring of public area on a large scale (Art. 35(3)(c)).519 </div>520 </label>521 522 <label class="checklist-item">523 <input type="checkbox" class="dpia-check" data-mandatory="false">524 <div style="font-size: 0.8rem;">525 <strong>Vulnerable Data Subjects:</strong> Processing data of children or employees (EDPB Criteria).526 </div>527 </label>528 </div>529 530 <div id="dpiaResultBox" class="audit-status-box status-ok">531 <span style="font-size: 1.25rem;">✓</span>532 <div>533 <div style="font-weight: 700; font-size: 0.85rem;">DPIA Not Mandatory Under Statutory Triggers</div>534 <div style="font-size: 0.78rem; font-weight: 400; margin-top: 0.15rem;">535 Standard processing principles apply under Article 5 and Article 32.536 </div>537 </div>538 </div>539 </div>540 541 <!-- 72h Breach Escalation Wizard -->542 <div class="glass-panel audit-card">543 <div style="display: flex; justify-content: space-between; align-items: flex-start;">544 <div>545 <h4 style="font-size: 1.05rem; font-weight: 700;">72-Hour Breach Escalation Wizard</h4>546 <p style="font-size: 0.8rem; color: var(--text-secondary);">Articles 33 & 34 GDPR • Notification & Communication</p>547 </div>548 <span class="badge badge-article">Art. 33 • 34</span>549 </div>550 551 <div style="display: flex; flex-direction: column; gap: 0.65rem;">552 <div>553 <label style="font-size: 0.78rem; color: var(--text-secondary); font-weight: 600; display: block; margin-bottom: 0.25rem;">554 Risk to Rights & Freedoms of Individuals:555 </label>556 <select id="breachRiskSelect" class="filter-select" style="font-size: 0.82rem;">557 <option value="none">Unlikely to result in risk (Exempt from DPA)</option>558 <option value="moderate" selected>Likely to result in risk (DPA within 72h)</option>559 <option value="high">Likely to result in HIGH risk (DPA + Data Subject)</option>560 </select>561 </div>562 563 <div>564 <label style="font-size: 0.78rem; color: var(--text-secondary); font-weight: 600; display: block; margin-bottom: 0.25rem;">565 Were State-of-the-Art Technical Protections Applied (e.g. Encryption)?566 </label>567 <select id="breachEncryptionSelect" class="filter-select" style="font-size: 0.82rem;">568 <option value="no" selected>No / Compromised in cleartext</option>569 <option value="yes">Yes / Robust encryption applied (Art. 34(3)(a))</option>570 </select>571 </div>572 </div>573 574 <div id="breachResultBox" class="audit-status-box status-warning">575 <span style="font-size: 1.25rem;">⚠</span>576 <div>577 <div style="font-weight: 700; font-size: 0.85rem;">TIER 2: NOTIFY DPA WITHIN 72 HOURS (Art. 33(1))</div>578 <div style="font-size: 0.78rem; font-weight: 400; margin-top: 0.15rem;">579 Notify competent Supervisory Authority without undue delay and within 72 hours.580 </div>581 </div>582 </div>583 </div>584 585 <!-- DPO Mandatory Designation Evaluator -->586 <div class="glass-panel audit-card">587 <div style="display: flex; justify-content: space-between; align-items: flex-start;">588 <div>589 <h4 style="font-size: 1.05rem; font-weight: 700;">DPO Mandatory Evaluator</h4>590 <p style="font-size: 0.8rem; color: var(--text-secondary);">Article 37 GDPR • Data Protection Officer Designation</p>591 </div>592 <span class="badge badge-article">Art. 37</span>593 </div>594 595 <div style="display: flex; flex-direction: column; gap: 0.45rem;">596 <label class="checklist-item">597 <input type="checkbox" id="dpoPublicBody">598 <div style="font-size: 0.8rem;">599 <strong>Public Authority:</strong> Processing carried out by a public authority or body (Art. 37(1)(a)).600 </div>601 </label>602 603 <label class="checklist-item">604 <input type="checkbox" id="dpoMonitoring">605 <div style="font-size: 0.8rem;">606 <strong>Regular & Systematic Monitoring:</strong> Core activities require regular monitoring on a large scale (Art. 37(1)(b)).607 </div>608 </label>609 610 <label class="checklist-item">611 <input type="checkbox" id="dpoSensitive">612 <div style="font-size: 0.8rem;">613 <strong>Large Scale Sensitive Data:</strong> Core activities consist of processing special data or criminal records (Art. 37(1)(c)).614 </div>615 </label>616 </div>617 618 <div id="dpoResultBox" class="audit-status-box status-ok">619 <span style="font-size: 1.25rem;">✓</span>620 <div>621 <div style="font-weight: 700; font-size: 0.85rem;">Mandatory DPO Designation Not Triggered</div>622 <div style="font-size: 0.78rem; font-weight: 400; margin-top: 0.15rem;">623 Statutory criteria under Art. 37(1) not met. Voluntary appointment remains open.624 </div>625 </div>626 </div>627 </div>628 629 </div>630 </section>631 632 <!-- TAB 4: W3C DPV & ISO 27701 STANDARDS MATRIX -->633 <section class="tab-content" id="tab-standards">634 <div class="glass-panel table-container">635 <div style="padding: 1.25rem; border-bottom: 1px solid var(--border-subtle);">636 <h3 style="font-size: 1.1rem; font-weight: 700;">International Open Standards Interoperability</h3>637 <p style="font-size: 0.82rem; color: var(--text-secondary); margin-top: 0.25rem;">638 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.639 </p>640 </div>641 <table class="triples-table">642 <thead>643 <tr>644 <th>GDPR Legal Concept</th>645 <th>Canonical ID</th>646 <th>Legal Basis</th>647 <th>W3C DPV Term & IRI</th>648 <th>ISO/IEC 27701 Clause</th>649 <th>ISO/IEC 27001 Mapping</th>650 </tr>651 </thead>652 <tbody id="standardsTableBody">653 <!-- Rendered by app.js -->654 </tbody>655 </table>656 </div>657 </section>658 659 <!-- TAB 5: DOMAIN KNOWLEDGE DATA DICTIONARY -->660 <section class="tab-content" id="tab-dictionary">661 662 <!-- Sub-Navigation Pills -->663 <div class="dict-sub-tabs">664 <button class="dict-sub-tab active" data-sec="dict-sec-subjects">665 <span>👥</span> 1. Subjects (Actors & Duty-Bearers)666 </button>667 <button class="dict-sub-tab" data-sec="dict-sec-objects">668 <span>📂</span> 2. Objects (Assets & Artifacts)669 </button>670 <button class="dict-sub-tab" data-sec="dict-sec-predicates">671 <span>🔗</span> 3. Predicates (Deontic Verbs)672 </button>673 <button class="dict-sub-tab" data-sec="dict-sec-spo">674 <span>⚖</span> 4. SPO Compatibility Matrix675 </button>676 <button class="dict-sub-tab" data-sec="dict-sec-ops">677 <span>⚙</span> 5. Processing Taxonomy (Art. 4(2))678 </button>679 </div>680 681 <!-- SECTION 1: SUBJECTS -->682 <div class="dict-section" id="dict-sec-subjects" style="display: block;">683 <div style="margin-bottom: 1rem;">684 <h3 style="font-size: 1.15rem; font-weight: 700;">Subject Taxonomy: Legal Duty-Bearers & Right-Holders</h3>685 <p style="font-size: 0.82rem; color: var(--text-secondary); margin-top: 0.2rem;">686 Formal domain definitions of all legal persons, natural persons, and public authorities recognized by the GDPR with Hohfeldian legal roles and statutory capacities.687 </p>688 </div>689 <div class="subjects-grid" id="subjectsCardsGrid">690 <!-- Rendered by domainDictionaryView.js -->691 </div>692 </div>693 694 <!-- SECTION 2: OBJECTS -->695 <div class="dict-section glass-panel table-container" id="dict-sec-objects" style="display: none;">696 <div style="padding: 1.25rem; border-bottom: 1px solid var(--border-subtle);">697 <h3 style="font-size: 1.15rem; font-weight: 700;">Object Taxonomy: Regulated Assets, Artifacts & Sanctions</h3>698 <p style="font-size: 0.82rem; color: var(--text-secondary); margin-top: 0.2rem;">699 Formal domain definitions of regulated information assets, compliance artifacts, risk events, and statutory sanctions.700 </p>701 </div>702 <table class="triples-table">703 <thead>704 <tr>705 <th style="width: 200px;">Object Name & ID</th>706 <th style="width: 140px;">Category</th>707 <th style="width: 180px;">Sensitivity / Risk</th>708 <th style="width: 130px;">Statutory Basis</th>709 <th>Domain Definition</th>710 <th style="width: 190px;">ISO/IEC 27701 Mapping</th>711 </tr>712 </thead>713 <tbody id="objectsTableBody">714 <!-- Rendered by domainDictionaryView.js -->715 </tbody>716 </table>717 </div>718 719 <!-- SECTION 3: PREDICATES -->720 <div class="dict-section glass-panel table-container" id="dict-sec-predicates" style="display: none;">721 <div style="padding: 1.25rem; border-bottom: 1px solid var(--border-subtle);">722 <h3 style="font-size: 1.15rem; font-weight: 700;">Predicate Catalog: Domain Actions & Deontic Relations</h3>723 <p style="font-size: 0.82rem; color: var(--text-secondary); margin-top: 0.2rem;">724 Formal domain verbs connecting Subjects to Objects with strict Domain/Range constraints, inverse relations, statutory deadlines, and exception rules.725 </p>726 </div>727 <table class="triples-table">728 <thead>729 <tr>730 <th style="width: 210px;">Predicate & Cypher</th>731 <th style="width: 150px;">Domain (Subject)</th>732 <th style="width: 160px;">Range (Object)</th>733 <th style="width: 130px;">Deontic Modality</th>734 <th style="width: 170px;">Inverse Predicate</th>735 <th style="width: 120px;">Legal Anchor</th>736 <th>Operational Meaning & Statutory Constraints</th>737 </tr>738 </thead>739 <tbody id="predicatesTableBody">740 <!-- Rendered by domainDictionaryView.js -->741 </tbody>742 </table>743 </div>744 745 <!-- SECTION 4: SPO MATRIX -->746 <div class="dict-section glass-panel table-container" id="dict-sec-spo" style="display: none;">747 <div style="padding: 1.25rem; border-bottom: 1px solid var(--border-subtle);">748 <h3 style="font-size: 1.15rem; font-weight: 700;">Subject-Predicate-Object (SPO) Compatibility Matrix</h3>749 <p style="font-size: 0.82rem; color: var(--text-secondary); margin-top: 0.2rem;">750 Formal legal compatibility rules validating permissible interactions between Subjects and Objects under EU data protection law.751 </p>752 </div>753 <table class="triples-table">754 <thead>755 <tr>756 <th style="width: 90px;">Rule ID</th>757 <th style="width: 150px;">Subject</th>758 <th style="width: 190px;">Predicate</th>759 <th style="width: 170px;">Object</th>760 <th style="width: 130px;">Status</th>761 <th style="width: 170px;">Deontic Classification</th>762 <th style="width: 110px;">Legal Anchor</th>763 <th>Compliance Rule & Statutory Rationale</th>764 </tr>765 </thead>766 <tbody id="spoMatrixTableBody">767 <!-- Rendered by domainDictionaryView.js -->768 </tbody>769 </table>770 </div>771 772 <!-- SECTION 5: PROCESSING TAXONOMY -->773 <div class="dict-section glass-panel table-container" id="dict-sec-ops" style="display: none;">774 <div style="padding: 1.25rem; border-bottom: 1px solid var(--border-subtle);">775 <h3 style="font-size: 1.15rem; font-weight: 700;">Controlled Processing Operations Taxonomy</h3>776 <p style="font-size: 0.82rem; color: var(--text-secondary); margin-top: 0.2rem;">777 Statutory taxonomy of all 15 personal data processing operations established under Article 4(2) GDPR.778 </p>779 </div>780 <table class="triples-table">781 <thead>782 <tr>783 <th style="width: 250px;">Processing Operation Code</th>784 <th style="width: 120px;">Legal Basis</th>785 <th>Operational & Regulatory Definition</th>786 </tr>787 </thead>788 <tbody id="definitionsTableBody">789 <!-- Rendered by app.js -->790 </tbody>791 </table>792 </div>793 794 </section>795 796 <!-- TAB 6: ARTICLE 30 ROPA REGISTER -->797 <section class="tab-content" id="tab-ropa">798 <!-- ROPA Header Card -->799 <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;">800 <div>801 <div style="display: flex; align-items: center; gap: 0.6rem;">802 <span style="font-size: 1.4rem;">📝</span>803 <h2 style="font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em;">Article 30 GDPR: Record of Processing Activities (ROPA)</h2>804 </div>805 <p style="font-size: 0.82rem; color: var(--text-secondary); margin-top: 0.25rem; max-width: 820px; line-height: 1.45;">806 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.807 </p>808 </div>809 <div style="display: flex; gap: 0.45rem; flex-wrap: wrap;">810 <button class="btn btn-secondary btn-sm" id="exportRopaCsvBtn">⇩ Export CSV</button>811 <button class="btn btn-secondary btn-sm" id="exportRopaJsonBtn">⇩ Export JSON</button>812 <button class="btn btn-primary btn-sm" id="exportRopaMdBtn">⇩ Export Markdown</button>813 </div>814 </div>815 816 <!-- Filter Bar -->817 <div class="glass-panel filter-bar" style="margin-bottom: 1.25rem;">818 <div class="filter-row-primary">819 <div class="search-input-wrapper">820 <span class="search-icon">🔍</span>821 <input type="text" id="ropaSearchInput" class="search-input" placeholder="Search activities, purpose, categories of data, or recipients...">822 </div>823 <div class="select-wrapper">824 <select id="ropaBasisFilter" class="filter-select">825 <option value="ALL">All Lawful Bases</option>826 <option value="CONTRACT_ART_6_1_B">Contract (Art. 6(1)(b))</option>827 <option value="LEGAL_OBLIGATION_ART_6_1_C">Legal Obligation (Art. 6(1)(c))</option>828 <option value="LEGITIMATE_INTERESTS_ART_6_1_F">Legitimate Interests (Art. 6(1)(f))</option>829 <option value="CONSENT_ART_6_1_A">Consent (Art. 6(1)(a))</option>830 </select>831 </div>832 <div class="select-wrapper">833 <select id="ropaTransferFilter" class="filter-select">834 <option value="ALL">All Transfer Types</option>835 <option value="TRANSFERRED">Third Country Transfers (Outside EEA)</option>836 <option value="EEA_ONLY">EEA Local Processing Only</option>837 </select>838 </div>839 <div class="select-wrapper">840 <select id="ropaSpecialFilter" class="filter-select">841 <option value="ALL">All Data Categories</option>842 <option value="SPECIAL_ONLY">Article 9 Special Category Data Only</option>843 </select>844 </div>845 </div>846 <div class="filter-row-secondary">847 <span id="ropaCountDisplay" style="color: var(--text-muted); font-size: 0.8rem;">4 activities registered</span>848 </div>849 </div>850 851 <!-- ROPA Table -->852 <div class="glass-panel table-container">853 <table class="triples-table">854 <thead>855 <tr>856 <th style="width: 110px;">ROPA ID</th>857 <th style="width: 260px;">Activity Name & Purpose</th>858 <th style="width: 170px;">Lawful Basis</th>859 <th style="width: 170px;">Data Subjects</th>860 <th style="width: 180px;">Personal Data</th>861 <th style="width: 120px;">Transfers</th>862 <th style="width: 110px; text-align: right;">Action</th>863 </tr>864 </thead>865 <tbody id="ropaTableBody">866 <!-- Rendered by ropaManager.js -->867 </tbody>868 </table>869 </div>870 </section>871 872 <!-- TAB 7: VISUAL ARCHITECTURE MODELER -->873 <section class="tab-content" id="tab-modeler">874 <!-- Modeler Header -->875 <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;">876 <div>877 <div style="display: flex; align-items: center; gap: 0.6rem;">878 <span style="font-size: 1.4rem;">🏗</span>879 <h2 style="font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em;">Visual Privacy Architecture Modeler & Live SHACL Auditor</h2>880 </div>881 <p style="font-size: 0.82rem; color: var(--text-secondary); margin-top: 0.25rem; max-width: 840px; line-height: 1.45;">882 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.883 </p>884 </div>885 <div style="display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;">886 <div class="select-wrapper">887 <select id="modelerTemplateSelect" class="filter-select" style="font-weight: 600;">888 <option value="template-compliant-saas">Template 1: Compliant Multi-Tier EU Cloud</option>889 <option value="template-unlawful-us-transfer">Template 2: Unlawful Direct US Analytics Transfer</option>890 <option value="template-missing-dpa-processor">Template 3: Unregulated Sub-processor (Missing DPA)</option>891 <option value="template-high-risk-ai">Template 4: High-Risk AI Profiling (Missing DPIA)</option>892 </select>893 </div>894 <button class="btn btn-primary btn-sm" id="runModelerAuditBtn">▶ Live Audit Canvas</button>895 </div>896 </div>897 898 <div id="modelerDescBox" class="scenario-desc-box" style="margin-bottom: 1.25rem;">899 Multi-tenant B2B platform hosted in Frankfurt (EU), governed by binding DPAs and encrypted databases.900 </div>901 902 <!-- Live Audit Status Banner & Score -->903 <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;">904 <div style="display: flex; align-items: center; gap: 1rem;">905 <div class="shacl-score-circle" id="modelerScoreCircle" style="width: 52px; height: 52px; font-size: 1.2rem;">100</div>906 <div>907 <div style="font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; font-weight: 700;">Live Architecture Health</div>908 <div id="modelerAuditStatus" style="margin-top: 0.2rem;">909 <span class="badge badge-verified">COMPLIANT ARCHITECTURE</span>910 </div>911 </div>912 </div>913 <div id="modelerFineSummaryBox" style="flex: 1; max-width: 480px;">914 <!-- Dynamically populated by architectureModeler.js -->915 </div>916 </div>917 918 <!-- Visual Canvas Area -->919 <div class="glass-panel" style="padding: 1.5rem; margin-bottom: 1.5rem;">920 <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem;">921 <div style="font-size: 0.82rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em;">922 Interactive Architecture Topology Canvas923 </div>924 <div style="display: flex; gap: 0.5rem; font-size: 0.75rem; flex-wrap: wrap;">925 <span class="badge" style="border-left: 3px solid #38bdf8;">Data Subject</span>926 <span class="badge" style="border-left: 3px solid #818cf8;">Controller</span>927 <span class="badge" style="border-left: 3px solid #34d399;">Storage</span>928 <span class="badge" style="border-left: 3px solid #fbbf24;">Processor</span>929 <span class="badge" style="border-left: 3px solid #f43f5e;">Cross-Border</span>930 <span class="badge" style="border-left: 3px solid #ec4899;">High-Risk AI</span>931 </div>932 </div>933 934 <div id="modelerCanvas">935 <!-- Dynamically populated by architectureModeler.js -->936 </div>937 </div>938 939 <!-- Modeler Findings & Violations List -->940 <div class="glass-panel" style="padding: 1.5rem;">941 <div style="font-size: 0.85rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; margin-bottom: 1rem; letter-spacing: 0.05em;">942 Active Architecture Policy Violations (W3C SHACL Grounded)943 </div>944 <div id="modelerFindingsList" class="shacl-findings-list">945 <!-- Dynamically populated by architectureModeler.js -->946 </div>947 </div>948 </section>949 950 <!-- TAB: CROSS-REGULATORY HARMONIZATION -->951 <section class="tab-content" id="tab-cross-reg">952 953 <!-- Top Banner / Header -->954 <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;">955 <div>956 <h2 style="font-size: 1.3rem; font-weight: 700; display: flex; align-items: center; gap: 0.6rem;">957 <span>⚖</span> Cross-Regulatory Harmonization Engine958 </h2>959 <p style="font-size: 0.84rem; color: var(--text-secondary); margin-top: 0.25rem;">960 Unified statutory conformance across <strong>GDPR (2016/679)</strong>, <strong>EU AI Act (2024/1689)</strong>, and <strong>NIS2 Directive (2022/2555)</strong>.961 </p>962 </div>963 <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">964 <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>965 <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>966 <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>967 </div>968 </div>969 970 <!-- DUAL-INCIDENT SLA NOTIFICATION TIMELINE -->971 <div class="glass-panel" style="padding: 1.5rem; margin-bottom: 1.5rem;">972 <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; flex-wrap: wrap; gap: 0.75rem;">973 <div>974 <div style="font-size: 0.8rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em;">975 Statutory Incident Escalation976 </div>977 <h3 style="font-size: 1.1rem; font-weight: 700; margin-top: 0.2rem; color: #f1f5f9;">978 Dual-Incident SLA Notification Timeline (NIS2 24h • GDPR 72h)979 </h3>980 </div>981 <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">982 <button class="btn btn-secondary btn-sm" id="incidentPresetNow">Incident: Now (T=0)</button>983 <button class="btn btn-secondary btn-sm" id="incidentPresetApproaching">Incident: -19h (NIS2 Imminent)</button>984 <button class="btn btn-secondary btn-sm" id="incidentPresetBreached">Incident: -78h (GDPR Breached)</button>985 </div>986 </div>987 988 <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);">989 <label for="incidentDateInput" style="font-size: 0.82rem; font-weight: 600; color: #cbd5e1;">990 Detection Timestamp:991 </label>992 <input type="datetime-local" id="incidentDateInput" class="filter-select" style="max-width: 240px; font-family: var(--font-mono); font-size: 0.82rem;">993 <button class="btn btn-primary btn-sm" id="evalIncidentBtn">994 <span>⚙</span> Re-evaluate SLAs995 </button>996 <span style="font-size: 0.78rem; color: var(--text-muted); margin-left: auto;">997 Dual reporting required when cybersecurity incidents compromise personal data confidentiality.998 </span>999 </div>1000 1001 <!-- Milestones Grid -->1002 <div id="incidentTimelineGrid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem;">1003 <!-- Dynamically populated by crossRegulatoryView.js -->1004 </div>1005 </div>1006 1007 <!-- INTERACTIVE CROSS-REGULATORY SYSTEM AUDITOR -->1008 <div class="glass-panel" style="padding: 1.5rem; margin-bottom: 1.5rem;">1009 <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; flex-wrap: wrap; gap: 0.75rem;">1010 <div>1011 <div style="font-size: 0.8rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em;">1012 Live System Compliance Auditing1013 </div>1014 <h3 style="font-size: 1.1rem; font-weight: 700; margin-top: 0.2rem; color: #f1f5f9;">1015 Harmonized Risk & Requirement Evaluator1016 </h3>1017 </div>1018 <div style="display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;">1019 <label for="crossPresetSelect" style="font-size: 0.82rem; color: var(--text-secondary);">Load System Preset:</label>1020 <select id="crossPresetSelect" class="filter-select" style="min-width: 300px;">1021 <option value="scenario-compliant-ai">Compliant Diagnostic Medical AI (100% Pass)</option>1022 <option value="scenario-ai-credit-scoring">Automated Credit Scoring AI (High-Risk Deficit)</option>1023 <option value="scenario-biometric-categorization">Biometric Emotion & Political Profiling (Prohibited)</option>1024 <option value="scenario-dual-ransomware">Critical Infrastructure Ransomware (Active Dual Breach)</option>1025 </select>1026 <button class="btn btn-primary btn-sm" id="runCrossAuditBtn">1027 <span>⚙</span> Audit System1028 </button>1029 <button class="btn btn-secondary btn-sm" id="exportCrossCertBtn">1030 <span>📥</span> Export Certificate (.md)1031 </button>1032 </div>1033 </div>1034 1035 <!-- Auditor Layout Grid -->1036 <div style="display: grid; grid-template-columns: 1fr 1.2fr; gap: 1.5rem; align-items: start;" class="cross-auditor-layout">1037 1038 <!-- Parameters Checklist Form -->1039 <div class="glass-panel" style="padding: 1.25rem; background: rgba(0, 0, 0, 0.25);">1040 <div style="font-size: 0.82rem; font-weight: 700; color: var(--accent-cyan); text-transform: uppercase; margin-bottom: 0.85rem; letter-spacing: 0.05em;">1041 Operational Architecture Controls & Parameters1042 </div>1043 1044 <div style="display: flex; flex-direction: column; gap: 0.65rem; font-size: 0.82rem;">1045 <label style="display: flex; align-items: center; gap: 0.6rem; cursor: pointer;">1046 <input type="checkbox" id="chkBiometricCategorization" class="cross-audit-toggle">1047 <span>Biometric Data Ingestion & Recognition Active</span>1048 </label>1049 <label style="display: flex; align-items: center; gap: 0.6rem; cursor: pointer;">1050 <input type="checkbox" id="chkSensitiveInference" class="cross-audit-toggle">1051 <span>Inferring Sensitive Data / Emotions (AI Act Art. 5(1)(c))</span>1052 </label>1053 <label style="display: flex; align-items: center; gap: 0.6rem; cursor: pointer;">1054 <input type="checkbox" id="chkAutomatedDecisions" class="cross-audit-toggle">1055 <span>Automated Decision-Making / Profiling (GDPR Art. 22)</span>1056 </label>1057 <label style="display: flex; align-items: center; gap: 0.6rem; cursor: pointer;">1058 <input type="checkbox" id="chkHumanOversight" class="cross-audit-toggle">1059 <span>Human-in-the-Loop Override Control (AI Act Art. 14)</span>1060 </label>1061 <label style="display: flex; align-items: center; gap: 0.6rem; cursor: pointer;">1062 <input type="checkbox" id="chkDPIAConducted" class="cross-audit-toggle">1063 <span>Prior DPIA Completed & Signed (GDPR Art. 35)</span>1064 </label>1065 <label style="display: flex; align-items: center; gap: 0.6rem; cursor: pointer;">1066 <input type="checkbox" id="chkBiasAudited" class="cross-audit-toggle">1067 <span>Statistical Bias Audited on Training Datasets (AI Act Art. 10)</span>1068 </label>1069 <label style="display: flex; align-items: center; gap: 0.6rem; cursor: pointer;">1070 <input type="checkbox" id="chkDataMinimization" class="cross-audit-toggle">1071 <span>Data Minimization & Privacy-Preserving ML Applied</span>1072 </label>1073 <label style="display: flex; align-items: center; gap: 0.6rem; cursor: pointer;">1074 <input type="checkbox" id="chkMFAActive" class="cross-audit-toggle">1075 <span>Mandatory MFA on Privileged Access (NIS2 Art. 21)</span>1076 </label>1077 <label style="display: flex; align-items: center; gap: 0.6rem; cursor: pointer;">1078 <input type="checkbox" id="chkSupplyChainAudited" class="cross-audit-toggle">1079 <span>Third-Party Vendor Supply Chain Audited (NIS2 Art. 21(2))</span>1080 </label>1081 <label style="display: flex; align-items: center; gap: 0.6rem; cursor: pointer;">1082 <input type="checkbox" id="chkIncidentActive" class="cross-audit-toggle">1083 <span>Active Cybersecurity Incident / Data Breach Detected</span>1084 </label>1085 </div>1086 </div>1087 1088 <!-- Evaluation Outcome Panel -->1089 <div>1090 <!-- Status Pill & Score -->1091 <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem;">1092 <div id="crossAuditStatusBadge">1093 <!-- Populated by crossRegulatoryView.js -->1094 </div>1095 <div style="font-size: 0.85rem; color: var(--text-secondary);">1096 Harmonization Score: <strong id="crossAuditScoreVal" style="color: #34d399; font-size: 1.1rem;">100%</strong>1097 </div>1098 </div>1099 1100 <!-- Findings List -->1101 <div id="crossAuditFindingsList">1102 <!-- Populated by crossRegulatoryView.js -->1103 </div>1104 </div>1105 1106 </div>1107 </div>1108 1109 <!-- HARMONIZATION MATRIX CATALOG -->1110 <div class="glass-panel" style="padding: 1.5rem;">1111 <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; flex-wrap: wrap; gap: 0.75rem;">1112 <div>1113 <div style="font-size: 0.8rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em;">1114 Unified Legal Framework Matrix1115 </div>1116 <h3 style="font-size: 1.1rem; font-weight: 700; margin-top: 0.2rem; color: #f1f5f9;">1117 Tri-Regulatory Rule Standards Catalog1118 </h3>1119 </div>1120 <div style="display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;">1121 <button class="cross-filter-btn active" data-filter="ALL">All Regulations</button>1122 <button class="cross-filter-btn" data-filter="AI_ACT">GDPR + AI Act</button>1123 <button class="cross-filter-btn" data-filter="NIS2">GDPR + NIS2</button>1124 <button class="cross-filter-btn" data-filter="TRI_REG">Tri-Regulatory Core</button>1125 <div class="search-input-wrapper" style="min-width: 220px;">1126 <input type="text" id="crossRegSearch" class="search-input" placeholder="Search rules, articles..." style="padding: 0.4rem 0.8rem; font-size: 0.8rem;">1127 </div>1128 </div>1129 </div>1130 1131 <div id="crossRegRulesContainer">1132 <!-- Dynamically populated by crossRegulatoryView.js -->1133 </div>1134 </div>1135 1136 </section>1137 1138 <!-- TAB: PRIVACY-AS-CODE LINTER -->1139 <section class="tab-content" id="tab-linter">1140 1141 <!-- Banner -->1142 <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;">1143 <div>1144 <h2 style="font-size: 1.3rem; font-weight: 700; display: flex; align-items: center; gap: 0.6rem;">1145 <span>🛡</span> Privacy-as-Code DevSecOps Static Analysis Linter1146 </h2>1147 <p style="font-size: 0.84rem; color: var(--text-secondary); margin-top: 0.25rem;">1148 Automated static analysis for <strong>Terraform Infrastructure</strong> and <strong>OpenAPI Specs</strong> enforcing GDPR, AI Act, and NIS2 compliance before deployment.1149 </p>1150 </div>1151 <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">1152 <span class="badge badge-verified">✓ SARIF v2.1.0 Compatible</span>1153 <span class="badge badge-actor">CI/CD & Pre-Commit Gating</span>1154 </div>1155 </div>1156 1157 <!-- Controls & Editor -->1158 <div class="glass-panel" style="padding: 1.5rem; margin-bottom: 1.5rem;">1159 <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; flex-wrap: wrap; gap: 0.75rem;">1160 <div style="display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap;">1161 <label for="linterPresetSelect" style="font-size: 0.82rem; color: var(--text-secondary);">Load Architecture / API Spec:</label>1162 <select id="linterPresetSelect" class="filter-select" style="min-width: 320px;">1163 <option value="tf-vulnerable">Vulnerable Terraform Plan (Non-EEA, Unencrypted, Public S3)</option>1164 <option value="tf-compliant">Compliant Terraform Plan (Frankfurt, KMS Encrypted, Strict IAM)</option>1165 <option value="api-vulnerable">Vulnerable OpenAPI Spec (Biometric Endpoint Missing Auth/DPIA)</option>1166 <option value="api-compliant">Compliant OpenAPI Spec (OAuth2 mTLS, DPIA Reference, POST Body)</option>1167 </select>1168 </div>1169 <div style="display: flex; gap: 0.6rem; flex-wrap: wrap;">1170 <button class="btn btn-primary btn-sm" id="runLinterBtn">1171 <span>⚙</span> Run Privacy Lint1172 </button>1173 <button class="btn btn-secondary btn-sm" id="exportSarifBtn">1174 <span>📥</span> Export SARIF (.json)1175 </button>1176 </div>1177 </div>1178 1179 <!-- 2-Column Linter Layout -->1180 <div style="display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.5rem;" class="linter-grid-layout">1181 <div>1182 <div style="font-size: 0.78rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; margin-bottom: 0.4rem; letter-spacing: 0.05em;">1183 Input Specification (JSON / Terraform Plan / OpenAPI)1184 </div>1185 <textarea id="linterCodeEditor" class="linter-editor" spellcheck="false"></textarea>1186 </div>1187 <div>1188 <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.6rem;">1189 <div id="linterStatusBadge">1190 <!-- Dynamically populated -->1191 </div>1192 <div style="font-size: 0.82rem; color: var(--text-secondary);">1193 Infringements: <strong id="linterViolationsCount" style="color: #fca5a5;">0</strong>1194 </div>1195 </div>1196 <div id="linterFindingsList" style="max-height: 400px; overflow-y: auto;">1197 <!-- Dynamically populated by privacyLinterView.js -->1198 </div>1199 </div>1200 </div>