kamobuilds/risk-intelligence-dashboard
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>Risk Intelligence Dashboard</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <style>11 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');12 13 * {14 font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;15 }16 17 .risk-card {18 background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);19 backdrop-filter: blur(20px);20 border: 1px solid rgba(255,255,255,0.1);21 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);22 }23 24 .risk-card:hover {25 transform: translateY(-4px);26 box-shadow: 0 20px 40px rgba(0,0,0,0.1);27 border-color: rgba(255,255,255,0.2);28 }29 30 .data-source-card {31 background: white;32 border-radius: 16px;33 box-shadow: 0 4px 20px rgba(0,0,0,0.08);34 border: 1px solid #f1f5f9;35 transition: all 0.3s ease;36 }37 38 .data-source-card:hover {39 box-shadow: 0 8px 40px rgba(0,0,0,0.12);40 transform: translateY(-2px);41 }42 43 .status-dot {44 width: 8px;45 height: 8px;46 border-radius: 50%;47 display: inline-block;48 }49 50 .status-dot.online {51 background: #10b981;52 box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);53 animation: pulse-green 2s infinite;54 }55 56 .status-dot.warning {57 background: #f59e0b;58 box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);59 animation: pulse-yellow 2s infinite;60 }61 62 .status-dot.offline {63 background: #ef4444;64 box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);65 }66 67 @keyframes pulse-green {68 0%, 100% { opacity: 1; }69 50% { opacity: 0.6; }70 }71 72 @keyframes pulse-yellow {73 0%, 100% { opacity: 1; }74 50% { opacity: 0.7; }75 }76 77 .metric-trend {78 font-size: 0.75rem;79 font-weight: 600;80 }81 82 .metric-trend.up { color: #ef4444; }83 .metric-trend.down { color: #10b981; }84 .metric-trend.stable { color: #6b7280; }85 86 .progress-bar {87 height: 6px;88 background: #f1f5f9;89 border-radius: 3px;90 overflow: hidden;91 }92 93 .progress-fill {94 height: 100%;95 border-radius: 3px;96 transition: width 0.8s ease;97 }98 99 .risk-high { background: linear-gradient(90deg, #ef4444, #dc2626); }100 .risk-rising { background: linear-gradient(90deg, #f59e0b, #d97706); }101 .risk-elevated { background: linear-gradient(90deg, #3b82f6, #2563eb); }102 103 .scenario-card {104 border-left: 4px solid;105 transition: all 0.3s ease;106 }107 108 .scenario-card:hover {109 transform: scale(1.02);110 box-shadow: 0 10px 30px rgba(0,0,0,0.1);111 }112 113 .weekly-synthesis {114 background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);115 }116 117 .alert-critical {118 background: linear-gradient(135deg, #fee2e2, #fecaca);119 border-left: 4px solid #ef4444;120 color: #991b1b;121 }122 123 .alert-warning {124 background: linear-gradient(135deg, #fef3c7, #fde68a);125 border-left: 4px solid #f59e0b;126 color: #92400e;127 }128 129 .chart-container {130 height: 60px;131 width: 100%;132 }133 134 .mini-chart {135 height: 40px;136 }137 138 .glass-header {139 background: rgba(255, 255, 255, 0.9);140 backdrop-filter: blur(20px);141 border-bottom: 1px solid rgba(0,0,0,0.05);142 }143 144 .animated-bg {145 background: linear-gradient(-45deg, #f8fafc, #f1f5f9, #e2e8f0, #cbd5e1);146 background-size: 400% 400%;147 animation: gradient 15s ease infinite;148 }149 150 @keyframes gradient {151 0% { background-position: 0% 50%; }152 50% { background-position: 100% 50%; }153 100% { background-position: 0% 50%; }154 }155 156 .glow-effect {157 box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);158 }159 </style>160</head>161<body class="animated-bg min-h-screen">162 <!-- Header -->163 <header class="glass-header sticky top-0 z-50">164 <div class="max-w-7xl mx-auto px-6 py-4">165 <div class="flex justify-between items-center">166 <div class="flex items-center space-x-4">167 <div class="bg-gradient-to-r from-indigo-600 to-purple-600 p-2 rounded-xl">168 <i data-feather="activity" class="w-6 h-6 text-white"></i>169 </div>170 <div>171 <h1 class="text-2xl font-bold text-gray-900">Risk Intelligence Dashboard</h1>172 <p class="text-sm text-gray-600">Western Structural Stability Monitor (2018-2030)</p>173 </div>174 </div>175 176 <div class="flex items-center space-x-6">177 <div class="flex items-center space-x-2">178 <div class="status-dot online"></div>179 <span class="text-sm font-medium text-gray-700">Live</span>180 </div>181 <div class="text-right text-xs text-gray-500">182 <div>Last Update: <span id="last-update" class="font-mono">22/09/2025, 17:18:14</span></div>183 <div>Next Refresh: <span id="next-refresh" class="font-mono">60s</span></div>184 </div>185 </div>186 </div>187 </div>188 </header>189 190 <main class="max-w-7xl mx-auto px-6 py-8 space-y-8">191 <!-- Risk Overview Cards -->192 <section class="grid grid-cols-1 md:grid-cols-4 gap-6">193 <!-- Overall Risk -->194 <div class="risk-card rounded-2xl p-6 text-center">195 <div class="text-4xl mb-3">⚠️</div>196 <div class="text-2xl font-bold text-gray-800" id="overall-risk">ELEVATED</div>197 <div class="text-sm text-gray-600">Overall Risk</div>198 <div class="text-xs text-gray-500 mt-2" id="risk-score">Score: 4/6</div>199 </div>200 201 <!-- Debt/GDP -->202 <div class="risk-card rounded-2xl p-6">203 <div class="flex justify-between items-start mb-4">204 <i data-feather="trending-up" class="w-5 h-5 text-red-500"></i>205 <div class="flex items-center space-x-1">206 <span class="metric-trend up">●</span>207 <span class="text-xs text-red-500">+0.3%</span>208 </div>209 </div>210 <div class="text-2xl font-bold text-gray-800" id="debt-metric">245.1%</div>211 <div class="text-sm text-gray-600">Global Debt/GDP</div>212 <div class="text-xs text-gray-500 mt-1">IMF Data</div>213 <div class="mt-3 chart-container">214 <canvas id="debt-mini-chart" class="mini-chart"></canvas>215 </div>216 </div>217 218 <!-- Trafficking -->219 <div class="risk-card rounded-2xl p-6">220 <div class="flex justify-between items-start mb-4">221 <i data-feather="shield-alert" class="w-5 h-5 text-orange-500"></i>222 <div class="flex items-center space-x-1">223 <span class="metric-trend up">▲</span>224 <span class="text-xs text-red-500">+3%</span>225 </div>226 </div>227 <div class="text-2xl font-bold text-gray-800" id="trafficking-metric">+28%</div>228 <div class="text-sm text-gray-600">Trafficking vs 2019</div>229 <div class="text-xs text-gray-500 mt-1">UNODC Data</div>230 </div>231 232 <!-- OSA Actions -->233 <div class="risk-card rounded-2xl p-6">234 <div class="flex justify-between items-start mb-4">235 <i data-feather="gavel" class="w-5 h-5 text-purple-500"></i>236 <div class="flex items-center space-x-1">237 <span class="metric-trend up">▲</span>238 <span class="text-xs text-red-500">+12</span>239 </div>240 </div>241 <div class="text-2xl font-bold text-gray-800" id="osa-metric">58</div>242 <div class="text-sm text-gray-600">OSA Actions/Month</div>243 <div class="text-xs text-gray-500 mt-1">Ofcom Data</div>244 </div>245 </section>246 247 <!-- Data Sources Status -->248 <section>249 <div class="flex justify-between items-center mb-6">250 <h2 class="text-xl font-bold text-gray-800 flex items-center">251 <i data-feather="database" class="w-5 h-5 mr-2"></i>252 Data Sources Status253 </h2>254 <div class="flex items-center space-x-4 text-sm">255 <div class="flex items-center space-x-2">256 <div class="status-dot online"></div>257 <span><span id="online-count">4</span> Online</span>258 </div>259 <div class="flex items-center space-x-2">260 <div class="status-dot warning"></div>261 <span><span id="warning-count">1</span> Warning</span>262 </div>263 </div>264 </div>265 266 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">267 <!-- IMF DataMapper -->268 <div class="data-source-card p-6 border-l-4 border-indigo-500">269 <div class="flex items-center justify-between mb-4">270 <div class="flex items-center space-x-3">271 <div class="p-2 bg-indigo-100 rounded-lg">272 <i data-feather="trending-up" class="w-5 h-5 text-indigo-600"></i>273 </div>274 <div>275 <h3 class="font-semibold text-gray-900">IMF DataMapper</h3>276 <p class="text-xs text-gray-500">Global debt & fiscal indicators</p>277 </div>278 </div>279 <div class="status-dot online"></div>280 </div>281 282 <div class="space-y-3">283 <div class="flex justify-between">284 <span class="text-sm text-gray-600">Debt/GDP Ratio</span>285 <span class="text-sm font-semibold">245.1%</span>286 </div>287 <div class="flex justify-between">288 <span class="text-sm text-gray-600">Last Update</span>289 <span class="text-sm text-green-600">Live</span>290 </div>291 <div class="mini-chart">292 <canvas id="imf-chart"></canvas>293 </div>294 </div>295 </div>296 297 <!-- BIS Statistics -->298 <div class="data-source-card p-6 border-l-4 border-blue-500">299 <div class="flex items-center justify-between mb-4">300 <div class="flex items-center space-x-3">301 <div class="p-2 bg-blue-100 rounded-lg">302 <i data-feather="bar-chart-2" class="w-5 h-5 text-blue-600"></i>303 </div>304 <div>305 <h3 class="font-semibold text-gray-900">BIS Statistics</h3>306 <p class="text-xs text-gray-500">Credit gaps & banking data</p>307 </div>308 </div>309 <div class="status-dot online"></div>310 </div>311 312 <div class="space-y-3">313 <div class="flex justify-between">314 <span class="text-sm text-gray-600">Credit Gap</span>315 <span class="text-sm font-semibold">4.0%</span>316 </div>317 <div class="flex justify-between">318 <span class="text-sm text-gray-600">Last Update</span>319 <span class="text-sm text-green-600">Live</span>320 </div>321 <div class="mini-chart">322 <canvas id="bis-chart"></canvas>323 </div>324 </div>325 </div>326 327 <!-- UNODC Reports -->328 <div class="data-source-card p-6 border-l-4 border-red-500">329 <div class="flex items-center justify-between mb-4">330 <div class="flex items-center space-x-3">331 <div class="p-2 bg-red-100 rounded-lg">332 <i data-feather="shield" class="w-5 h-5 text-red-600"></i>333 </div>334 <div>335 <h3 class="font-semibold text-gray-900">UNODC Reports</h3>336 <p class="text-xs text-gray-500">Trafficking & safety data</p>337 </div>338 </div>339 <div class="status-dot online"></div>340 </div>341 342 <div class="space-y-3">343 <div class="flex justify-between">344 <span class="text-sm text-gray-600">Detection Rate</span>345 <span class="text-sm font-semibold text-red-600">+28%</span>346 </div>347 <div class="flex justify-between">348 <span class="text-sm text-gray-600">Child Victims</span>349 <span class="text-sm font-semibold text-red-600">+35%</span>350 </div>351 <div class="flex justify-between">352 <span class="text-sm text-gray-600">Last Update</span>353 <span class="text-sm text-green-600">Live</span>354 </div>355 </div>356 </div>357 358 <!-- UK Ofcom OSA -->359 <div class="data-source-card p-6 border-l-4 border-purple-500">360 <div class="flex items-center justify-between mb-4">361 <div class="flex items-center space-x-3">362 <div class="p-2 bg-purple-100 rounded-lg">363 <i data-feather="message-square" class="w-5 h-5 text-purple-600"></i>364 </div>365 <div>366 <h3 class="font-semibold text-gray-900">UK Ofcom OSA</h3>367 <p class="text-xs text-gray-500">Online Safety Act enforcement</p>368 </div>369 </div>370 <div class="status-dot online"></div>371 </div>372 373 <div class="space-y-3">374 <div class="flex justify-between">375 <span class="text-sm text-gray-600">Enforcement Actions</span>376 <span class="text-sm font-semibold">58/month</span>377 </div>378 <div class="flex justify-between">379 <span class="text-sm text-gray-600">Last Update</span>380 <span class="text-sm text-green-600">Live</span>381 </div>382 </div>383 </div>384 385 <!-- OpenSecrets -->386 <div class="data-source-card p-6 border-l-4 border-yellow-500">387 <div class="flex items-center justify-between mb-4">388 <div class="flex items-center space-x-3">389 <div class="p-2 bg-yellow-100 rounded-lg">390 <i data-feather="dollar-sign" class="w-5 h-5 text-yellow-600"></i>391 </div>392 <div>393 <h3 class="font-semibold text-gray-900">OpenSecrets</h3>394 <p class="text-xs text-gray-500">AIPAC & lobby spending</p>395 </div>396 </div>397 <div class="status-dot warning"></div>398 </div>399 400 <div class="space-y-3">401 <div class="flex justify-between">402 <span class="text-sm text-gray-600">AIPAC 2024 Cycle</span>403 <span class="text-sm font-semibold">100M</span>404 </div>405 <div class="flex justify-between">406 <span class="text-sm text-gray-600">Last Update</span>407 <span class="text-sm text-yellow-600">1h ago</span>408 </div>409 </div>410 </div>411 412 <!-- Central Banks -->413 <div class="data-source-card p-6 border-l-4 border-green-500">414 <div class="flex items-center justify-between mb-4">415 <div class="flex items-center space-x-3">416 <div class="p-2 bg-green-100 rounded-lg">417 <i data-feather="layers" class="w-5 h-5 text-green-600"></i>418 </div>419 <div>420 <h3 class="font-semibold text-gray-900">Central Banks</h3>421 <p class="text-xs text-gray-500">ECB, BLS, BoE data</p>422 </div>423 </div>424 <div class="status-dot online"></div>425 </div>426 427 <div class="space-y-3">428 <div class="flex justify-between">429 <span class="text-sm text-gray-600">US CPI</span>430 <span class="text-sm font-semibold">5.0%</span>431 </div>432 <div class="flex justify-between">433 <span class="text-sm text-gray-600">Unemployment</span>434 <span class="text-sm font-semibold">4.3%</span>435 </div>436 <div class="flex justify-between">437 <span class="text-sm text-gray-600">Last Update</span>438 <span class="text-sm text-green-600">Live</span>439 </div>440 </div>441 </div>442 </div>443 </section>444 445 <!-- 2030 Risk Assessment Matrix -->446 <section>447 <div class="flex items-center mb-6">448 <i data-feather="alert-triangle" class="w-5 h-5 mr-2 text-orange-500"></i>449 <h2 class="text-xl font-bold text-gray-800">2030 Risk Assessment Matrix</h2>450 </div>451 452 <div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">453 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-0">454 <!-- Macro/Credit -->455 <div class="p-6 border-b md:border-b-0 md:border-r border-gray-200 hover:bg-red-50 transition-all duration-300">456 <div class="flex items-center justify-between mb-4">457 <div class="flex items-center space-x-3">458 <div class="w-3 h-3 rounded-full bg-red-500"></div>459 <span class="font-bold text-gray-900">Macro/Credit</span>460 </div>461 <span class="px-2 py-1 bg-red-100 text-red-800 text-xs font-bold rounded-full">HIGH</span>462 </div>463 <p class="text-sm text-gray-600 mb-4">Debt overhang and rate sensitivity (IMF/BIS)</p>464 <div class="space-y-2">465 <div class="flex justify-between text-xs">466 <span class="text-gray-500">Trigger Probability</span>467 <span class="font-semibold">65%</span>468 </div>469 <div class="progress-bar">470 <div class="progress-fill risk-high" style="width: 65%"></div>471 </div>472 <p class="text-xs text-gray-500">Growth shock or funding stress</p>473 </div>474 </div>475 476 <!-- Speech/Regulatory -->477 <div class="p-6 border-b md:border-b-0 md:border-r border-gray-200 hover:bg-orange-50 transition-all duration-300">478 <div class="flex items-center justify-between mb-4">479 <div class="flex items-center space-x-3">480 <div class="w-3 h-3 rounded-full bg-orange-500"></div>481 <span class="font-bold text-gray-900">Speech/Regulatory</span>482 </div>483 <span class="px-2 py-1 bg-orange-100 text-orange-800 text-xs font-bold rounded-full">RISING</span>484 </div>485 <p class="text-sm text-gray-600 mb-4">UK OSA + EU DSA enforcement intensifying</p>486 <div class="space-y-2">487 <div class="flex justify-between text-xs">488 <span class="text-gray-500">Escalation Risk</span>489 <span class="font-semibold">45%</span>490 </div>491 <div class="progress-bar">492 <div class="progress-fill risk-rising" style="width: 45%"></div>493 </div>494 <p class="text-xs text-gray-500">Platform access restrictions</p>495 </div>496 </div>497 498 <!-- Safety/Illicit -->499 <div class="p-6 border-b md:border-b-0 md:border-r border-gray-200 hover:bg-yellow-50 transition-all duration-300">500 <div class="flex items-center justify-between mb-4">501 <div class="flex items-center space-x-3">502 <div class="w-3 h-3 rounded-full bg-yellow-500"></div>503 <span class="font-bold text-gray-900">Safety/Illicit</span>504 </div>505 <span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs font-bold rounded-full">RISING</span>506 </div>507 <p class="text-sm text-gray-600 mb-4">Detected trafficking victims up post-2019</p>508 <div class="space-y-2">509 <div class="flex justify-between text-xs">510 <span class="text-gray-500">Deterioration Rate</span>511 <span class="font-semibold">35%</span>512 </div>513 <div class="progress-bar">514 <div class="progress-fill risk-rising" style="width: 35%"></div>515 </div>516 <p class="text-xs text-gray-500">UNODC updates + policing stats</p>517 </div>518 </div>519 520 <!-- Influence Networks -->521 <div class="p-6 hover:bg-blue-50 transition-all duration-300">522 <div class="flex items-center justify-between mb-4">523 <div class="flex items-center space-x-3">524 <div class="w-3 h-3 rounded-full bg-blue-500"></div>525 <span class="font-bold text-gray-900">Influence Networks</span>526 </div>527 <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs font-bold rounded-full">ELEVATED</span>528 </div>529 <p class="text-sm text-gray-600 mb-4">Concentrated spend measurably affecting policy</p>530 <div class="space-y-2">531 <div class="flex justify-between text-xs">532 <span class="text-gray-500">Impact Level</span>533 <span class="font-semibold">55%</span>534 </div>535 <div class="progress-bar">536 <div class="progress-fill risk-elevated" style="width: 55%"></div>537 </div>538 <p class="text-xs text-gray-500">PAC totals and expenditures</p>539 </div>540 </div>541 </div>542 </div>543 </section>544 545 <!-- 2030 Projection Scenarios -->546 <section>547 <div class="flex items-center mb-6">548 <i data-feather="target" class="w-5 h-5 mr-2 text-indigo-500"></i>549 <h2 class="text-xl font-bold text-gray-800">2030 Projection Scenarios</h2>550 </div>551 552 <div class="grid grid-cols-1 md:grid-cols-3 gap-6">553 <!-- Stabilization -->554 <div class="scenario-card bg-white rounded-2xl shadow-sm border border-gray-200 p-6 border-green-500">555 <div class="flex items-center justify-between mb-4">556 <h3 class="font-bold text-gray-900">Stabilization + Legal Correction</h3>557 <div class="text-2xl font-bold text-green-600">45%</div>558 </div>559 <p class="text-sm text-gray-600 mb-4">560 Fiscal tightening and targeted regulatory responses reduce instabilities. 561 Cultural battles continue within democratic contestation.562 </p>563 <div class="space-y-2 text-xs">564 <div class="flex justify-between">565 <span class="text-gray-500">Conditions:</span>566 <span class="text-green-600 font-medium">Growth holds, institutions function</span>567 </div>568 <div class="flex justify-between">569 <span class="text-gray-500">Key Factors:</span>570 <span class="text-gray-700">Platform rules, age verification</span>571 </div>572 </div>573 </div>574 575 <!-- Backlash -->576 <div class="scenario-card bg-white rounded-2xl shadow-sm border border-gray-200 p-6 border-orange-500">577 <div class="flex items-center justify-between mb-4">578 <h3 class="font-bold text-gray-900">Sharp Backlash & Rollback</h3>579 <div class="text-2xl font-bold text-orange-600">35%</div>580 </div>581 <p class="text-sm text-gray-600 mb-4">582 Rising debt + recession + cultural grievance produce electorates favoring 583 strong-order politics and civil liberty rollbacks.584 </p>585 <div class="space-y-2 text-xs">586 <div class="flex justify-between">587 <span class="text-gray-500">Risk Factors:</span>588 <span class="text-orange-600 font-medium">Weak institutions</span>589 </div>590 <div class="flex justify-between">591 <span class="text-gray-500">Outcomes:</span>592 <span class="text-gray-700">Platform curbs, democratic erosion</span>593 </div>594 </div>595 </div>596 597 <!-- Fragmentation -->598 <div class="scenario-card bg-white rounded-2xl shadow-sm border border-gray-200 p-6 border-red-500">599 <div class="flex items-center justify-between mb-4">600 <h3 class="font-bold text-gray-900">Fragmentation & Instability</h3>601 <div class="text-2xl font-bold text-red-600">20%</div>602 </div>603 <p class="text-sm text-gray-600 mb-4">604 Sustained economic shock plus information ecosystem breakdown 605 yields localized illiberal governance and geopolitical fragmentation.606 </p>607 <div class="space-y-2 text-xs">608 <div class="flex justify-between">609 <span class="text-gray-500">Trigger:</span>610 <span class="text-red-600 font-medium">Compound shocks</span>611 </div>612 <div class="flex justify-between">613 <span class="text-gray-500">Result:</span>614 <span class="text-gray-700">Trade blocs, digital sovereignty</span>615 </div>616 </div>617 </div>618 </div>619 </section>620 621 <!-- Critical Signals & Triggers -->622 <section>623 <div class="flex items-center mb-6">624 <i data-feather="zap" class="w-5 h-5 mr-2 text-yellow-500"></i>625 <h2 class="text-xl font-bold text-gray-800">Critical Signals & Triggers</h2>626 </div>627 628 <div class="grid grid-cols-1 md:grid-cols-3 gap-6">629 <!-- Economic Stress -->630 <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-6">631 <div class="flex items-center mb-4">632 <i data-feather="trending-down" class="w-4 h-4 mr-2 text-red-500"></i>633 <h3 class="font-bold text-gray-900">Economic Stress</h3>634 </div>635 <div class="space-y-3">636 <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">637 <div class="flex items-center space-x-3">638 <div class="w-2 h-2 bg-red-500 rounded-full"></div>639 <span class="text-sm text-gray-700">Sustained real wage declines</span>640 </div>641 <span class="px-2 py-1 bg-red-100 text-red-800 text-xs font-medium rounded">Alert</span>642 </div>643 <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">644 <div class="flex items-center space-x-3">645 <div class="w-2 h-2 bg-green-500 rounded-full"></div>646 <span class="text-sm text-gray-700">Unemployment spikes >2% MoM</span>647 </div>648 <span class="px-2 py-1 bg-green-100 text-green-800 text-xs font-medium rounded">Clear</span>649 </div>650 <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">651 <div class="flex items-center space-x-3">652 <div class="w-2 h-2 bg-yellow-500 rounded-full"></div>653 <span class="text-sm text-gray-700">Sovereign debt events</span>654 </div>655 <span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs font-medium rounded">Watch</span>656 </div>657 </div>658 </div>659 660 <!-- Safety Deterioration -->661 <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-6">662 <div class="flex items-center mb-4">663 <i data-feather="shield-off" class="w-4 h-4 mr-2 text-orange-500"></i>664 <h3 class="font-bold text-gray-900">Safety Deterioration</h3>665 </div>666 <div class="space-y-3">667 <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">668 <div class="flex items-center space-x-3">669 <div class="w-2 h-2 bg-red-500 rounded-full"></div>670 <span class="text-sm text-gray-700">Trafficking victims >35% vs 2019</span>671 </div>672 <span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs font-medium rounded">Watch</span>673 </div>674 <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">675 <div class="flex items-center space-x-3">676 <div class="w-2 h-2 bg-yellow-500 rounded-full"></div>677 <span class="text-sm text-gray-700">Child victim reports +50% QoQ</span>678 </div>679 <span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs font-medium rounded">Watch</span>680 </div>681 <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">682 <div class="flex items-center space-x-3">683 <div class="w-2 h-2 bg-green-500 rounded-full"></div>684 <span class="text-sm text-gray-700">Elite network prosecutions</span>685 </div>686 <span class="px-2 py-1 bg-green-100 text-green-800 text-xs font-medium rounded">Active</span>687 </div>688 </div>689 </div>690 691 <!-- Control Escalation -->692 <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-6">693 <div class="flex items-center mb-4">694 <i data-feather="lock" class="w-4 h-4 mr-2 text-purple-500"></i>695 <h3 class="font-bold text-gray-900">Control Escalation</h3>696 </div>697 <div class="space-y-3">698 <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">699 <div class="flex items-center space-x-3">700 <div class="w-2 h-2 bg-orange-500 rounded-full"></div>701 <span class="text-sm text-gray-700">OSA enforcement >100/month</span>702 </div>703 <span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs font-medium rounded">Rising</span>704 </div>705 <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">706 <div class="flex items-center space-x-3">707 <div class="w-2 h-2 bg-yellow-500 rounded-full"></div>708 <span class="text-sm text-gray-700">Platform deplatforming waves</span>709 </div>710 <span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs font-medium rounded">Monitor</span>711 </div>712 <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">713 <div class="flex items-center space-x-3">714 <div class="w-2 h-2 bg-red-500 rounded-full"></div>715 <span class="text-sm text-gray-700">New "safety" laws in >3 countries</span>716 </div>717 <span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs font-medium rounded">Watch</span>718 </div>719 </div>720 </div>721 </div>722 </section>723 724 <!-- Weekly Risk Synthesis -->725 <section>726 <div class="flex items-center mb-6">727 <i data-feather="calendar" class="w-5 h-5 mr-2 text-indigo-500"></i>728 <h2 class="text-xl font-bold text-gray-800">Weekly Risk Synthesis</h2>729 </div>730 731 <div class="weekly-synthesis rounded-2xl shadow-lg text-white p-8">732 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">733 <div>734 <h3 class="font-bold text-lg mb-4">Key Deltas This Week</h3>735 <div class="space-y-3">736 <div class="flex justify-between items-center">737 <span class="text-sm opacity-90">CPI: +0.1%</span>738 <span class="font-mono text-sm bg-white bg-opacity-20 px-2 py-1 rounded">MoM</span>739 </div>740 <div class="flex justify-between items-center">741 <span class="text-sm opacity-90">Debt/GDP: +0.3%</span>742 <span class="font-mono text-sm bg-white bg-opacity-20 px-2 py-1 rounded">QoQ</span>743 </div>744 <div class="flex justify-between items-center">745 <span class="text-sm opacity-90">OSA Actions: +12</span>746 <span class="font-mono text-sm bg-white bg-opacity-20 px-2 py-1 rounded">WoW</span>747 </div>748 <div class="flex justify-between items-center">749 <span class="text-sm opacity-90">UNODC Updates: 2 new reports</span>750 <span class="font-mono text-sm bg-white bg-opacity-20 px-2 py-1 rounded">Weekly</span>751 </div>752 </div>753 </div>754 755 <div>756 <h3 class="font-bold text-lg mb-4">Risk Level Changes</h3>757 <div class="space-y-3">758 <div class="flex justify-between items-center">759 <span class="text-sm opacity-90">Overall Risk:</span>760 <span class="font-mono text-sm">MODERATE → ELEVATED</span>761 </div>762 <div class="flex justify-between items-center">763 <span class="text-sm opacity-90">Macro Risk:</span>764 <span class="font-mono text-sm">HIGH (stable)</span>765 </div>766 <div class="flex justify-between items-center">767 <span class="text-sm opacity-90">Safety Risk:</span>768 <span class="font-mono text-sm">RISING ↗</span>769 </div>770 <div class="flex justify-between items-center">771 <span class="text-sm opacity-90">Speech Risk:</span>772 <span class="font-mono text-sm">RISING ↗</span>773 </div>774 </div>775 </div>776 777 <div>778 <h3 class="font-bold text-lg mb-4">Next Week Focus</h3>779 <ul class="space-y-2 text-sm opacity-90">780 <li class="flex items-center">781 <i data-feather="clock" class="w-3 h-3 mr-2"></i>782 UNODC Q1 2025 trafficking report783 </li>784 <li class="flex items-center">785 <i data-feather="clock" class="w-3 h-3 mr-2"></i>786 AIPAC primary spending update787 </li>788 <li class="flex items-center">789 <i data-feather="clock" class="w-3 h-3 mr-2"></i>790 BIS quarterly credit data791 </li>792 <li class="flex items-center">793 <i data-feather="clock" class="w-3 h-3 mr-2"></i>794 Ofcom enforcement statistics795 </li>796 </ul>797 </div>798 </div>799 </div>800 </section>801 802 <!-- Active Alerts -->803 <section id="alerts-section" class="space-y-4">804 <div class="alert-critical rounded-lg p-4">805 <div class="flex items-start space-x-3">806 <i data-feather="alert-triangle" class="w-5 h-5 text-red-600 mt-0.5"></i>807 <div>808 <h4 class="font-bold">Critical Alert: Debt Trajectory Approaching 250% Threshold</h4>809 <p class="text-sm mt-1">Current global debt-to-GDP at 245.1% with accelerating trend. Risk of triggering structural instability scenario within 18 months if trajectory continues.</p>810 <div class="flex items-center mt-2 text-xs">811 <i data-feather="clock" class="w-3 h-3 mr-1"></i>812 <span>Last updated: 2 hours ago</span>813 </div>814 </div>815 </div>816 </div>817 818 <div class="alert-warning rounded-lg p-4">819 <div class="flex items-start space-x-3">820 <i data-feather="info" class="w-5 h-5 text-yellow-600 mt-0.5"></i>821 <div>822 <h4 class="font-bold">Warning: OSA Enforcement Activity Elevated</h4>823 <p class="text-sm mt-1">UK Online Safety Act enforcement actions increased 26% this month (58 actions). Monitor for democratic rollback indicators per thesis framework.</p>824 <div class="flex items-center mt-2 text-xs">825 <i data-feather="clock" class="w-3 h-3 mr-1"></i>826 <span>Last updated: 4 hours ago</span>827 </div>828 </div>829 </div>830 </div>831 </section>832 </main>833 834 <!-- Footer -->835 <footer class="bg-gray-900 text-white py-8 mt-16">836 <div class="max-w-7xl mx-auto px-6">837 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">838 <div>839 <h3 class="font-bold text-lg mb-4">Data Sources</h3>840 <ul class="space-y-2 text-sm text-gray-300">841 <li>IMF DataMapper (SDMX JSON)</li>842 <li>BIS Statistics (SDMX 2.1)</li>843 <li>UNODC Global Reports</li>844 <li>UK Ofcom OSA Updates</li>845 <li>OpenSecrets Lobbying Data</li>846 </ul>847 </div>848 849 <div>850 <h3 class="font-bold text-lg mb-4">Update Frequency</h3>851 <ul class="space-y-2 text-sm text-gray-300">852 <li>Live Data: Every 60 seconds</li>853 <li>API Refresh: Every 6 hours</li>854 <li>Full Sync: Daily at 07:00 UTC</li>855 <li>Risk Calculation: Real-time</li>856 </ul>857 </div>858 859 <div>860 <h3 class="font-bold text-lg mb-4">System Status</h3>861 <div class="space-y-2 text-sm text-gray-300">862 <div class="flex items-center">863 <div class="status-dot online mr-3"></div>864 <span>API Gateway: Online</span>865 </div>866 <div class="flex items-center">867 <div class="status-dot online mr-3"></div>868 <span>Database: Connected</span>869 </div>870 <div class="flex items-center">871 <div class="status-dot online mr-3"></div>872 <span>Email Alerts: Active</span>873 </div>874 </div>875 </div>876 </div>877 878 <div class="border-t border-gray-800 mt-8 pt-8 text-center">879 <p class="text-sm text-gray-400">880 Risk Intelligence Dashboard | Western Structural Stability Monitor (2018-2030) | 881 Last System Update: <span id="footer-timestamp">2025-01-22 14:30 UTC</span>882 </p>883 </div>884 </div>885 </footer>886 887 <script>888 class EnhancedRiskDashboard {889 constructor() {890 this.data = {};891 this.charts = {};892 this.refreshCounter = 60;893 this.init();894 }895 896 init() {897 // Initialize icons898 feather.replace();899 900 // Load initial data901 this.loadData();902 903 // Set up refresh timer904 this.startRefreshTimer();905 906 // Auto-refresh every 60 seconds907 setInterval(() => this.loadData(), 60000);908 909 // Initialize charts910 this.setupCharts();911 }912 913 async loadData() {914 try {915 this.data = await this.fetchRealTimeData();916 this.updateDashboard();917 } catch (error) {918 console.error('Data load failed:', error);919 this.showConnectionError();920 }921 }922 923 async fetchRealTimeData() {924 // Simulate realistic API response925 return new Promise(resolve => {926 setTimeout(() => {927 const timestamp = new Date();928 resolve({929 timestamp: timestamp.toISOString(),930 risk: {931 overall: 'ELEVATED',932 score: 4,933 debt_gdp: 245.1 + (Math.random() - 0.5) * 2,934 trafficking: 28 + Math.random() * 5,935 osa_actions: 58 + Math.floor(Math.random() * 10),936 cpi: 5.0 + (Math.random() - 0.5) * 0.5937 },938 sources: {939 imf: { status: 'online', value: 245.1, trend: 'up' },940 bis: { status: 'online', value: 4.0, trend: 'stable' },941 unodc: { status: 'online', detection: 28, children: 35 },942 ofcom: { status: 'online', actions: 58 },943 opensecrets: { status: 'warning', aipac: '100M' },944 central_banks: { status: 'online', cpi: 5.0, unemployment: 4.3 }945 },946 scenarios: {947 stabilization: 45 - (this.data?.risk?.score || 0) * 2,948 backlash: 35 + (this.data?.risk?.score || 0) * 1,949 fragmentation: 20 + (this.data?.risk?.score || 0) * 1950 }951 });952 }, 500);953 });954 }955 956 updateDashboard() {957 this.updateMetrics();958 this.updateSourceStatus();959 this.updateCharts();960 this.updateTimestamps();961 this.checkAlerts();962 }963 964 updateMetrics() {965 // Update main risk cards966 document.getElementById('overall-risk').textContent = this.data.risk.overall;967 document.getElementById('risk-score').textContent = `Score: ${this.data.risk.score}/6`;968 document.getElementById('debt-metric').textContent = `${this.data.risk.debt_gdp.toFixed(1)}%`;969 document.getElementById('trafficking-metric').textContent = `+${this.data.risk.trafficking.toFixed(0)}%`;970 document.getElementById('osa-metric').textContent = this.data.risk.osa_actions;971 972 // Update risk emoji based on level973 const riskEmoji = {974 'CRITICAL': '🔴',975 'HIGH': '🟠', 976 'ELEVATED': '⚠️',977 'MODERATE': '🟡',978 'LOW': '🟢'979 };980 981 const riskCard = document.querySelector('.risk-card');982 if (this.data.risk.score >= 5) {983 riskCard.classList.add('glow-effect');984 }985 }986 987 updateSourceStatus() {988 let onlineCount = 0;989 let warningCount = 0;990 991 Object.entries(this.data.sources).forEach(([source, info]) => {992 const statusDot = document.querySelector(`[data-source="${source}"] .status-dot`) ||993 document.querySelector(`#${source}-status`);994 995 if (statusDot) {996 statusDot.className = `status-dot ${info.status}`;997 if (info.status === 'online') onlineCount++;998 if (info.status === 'warning') warningCount++;999 }1000 });1001 1002 document.getElementById('online-count').textContent = onlineCount;1003 document.getElementById('warning-count').textContent = warningCount;1004 }1005 1006 setupCharts() {1007 // Mini sparkline charts for key metrics1008 this.createSparklineChart('debt-mini-chart', '#ef4444');1009 this.createSparklineChart('imf-chart', '#4f46e5');1010 this.createSparklineChart('bis-chart', '#2563eb');1011 }1012 1013 createSparklineChart(canvasId, color) {1014 const canvas = document.getElementById(canvasId);1015 if (!canvas) return;1016 1017 const ctx = canvas.getContext('2d');1018 this.charts[canvasId] = new Chart(ctx, {1019 type: 'line',1020 data: {1021 labels: [],1022 datasets: [{1023 data: [],1024 borderColor: color,1025 backgroundColor: color + '20',1026 borderWidth: 2,1027 fill: true,1028 tension: 0.4,1029 pointRadius: 0,1030 pointHoverRadius: 01031 }]1032 },1033 options: {1034 responsive: true,1035 maintainAspectRatio: false,1036 plugins: { legend: { display: false } },1037 scales: {1038 x: { display: false },1039 y: { display: false }1040 },1041 elements: { point: { radius: 0 } },1042 interaction: { intersect: false }1043 }1044 });1045 }1046 1047 updateCharts() {1048 const timestamp = new Date().toLocaleTimeString();1049 1050 // Update debt chart1051 this.updateSparkline('debt-mini-chart', this.data.risk.debt_gdp, timestamp);1052 this.updateSparkline('imf-chart', this.data.sources.imf.value, timestamp);1053 this.updateSparkline('bis-chart', this.data.sources.bis.value, timestamp);1054 }1055 1056 updateSparkline(chartId, value, label) {1057 const chart = this.charts[chartId];1058 if (!chart) return;1059 1060 if (chart.data.labels.length >= 20) {1061 chart.data.labels.shift();1062 chart.data.datasets[0].data.shift();1063 }1064 1065 chart.data.labels.push(label);1066 chart.data.datasets[0].data.push(value);1067 chart.update('none');1068 }1069 1070 updateTimestamps() {1071 const now = new Date();1072 document.getElementById('last-update').textContent = now.toLocaleString('en-GB', {1073 day: '2-digit',1074 month: '2-digit', 1075 year: 'numeric',1076 hour: '2-digit',1077 minute: '2-digit',1078 second: '2-digit'1079 });1080 1081 document.getElementById('footer-timestamp').textContent = 1082 now.toISOString().slice(0, 19).replace('T', ' ') + ' UTC';1083 }1084 1085 checkAlerts() {1086 // Critical debt threshold alert1087 if (this.data.risk.debt_gdp > 250) {1088 this.showAlert('CRITICAL: Global debt exceeds 250% threshold!', 'critical');1089 }1090 1091 // OSA enforcement spike1092 if (this.data.risk.osa_actions > 75) {1093 this.showAlert('WARNING: OSA enforcement actions spiking', 'warning');1094 }1095 }1096 1097 showAlert(message, type) {1098 // Alert system would show notifications1099 console.log(`${type.toUpperCase()}: ${message}`);1100 }1101 1102 showConnectionError() {1103 // Update status indicators to show offline1104 document.querySelectorAll('.status-dot').forEach(dot => {1105 dot.className = 'status-dot offline';1106 });1107 }1108 1109 startRefreshTimer() {1110 setInterval(() => {1111 this.refreshCounter--;1112 document.getElementById('next-refresh').textContent = `${this.refreshCounter}s`;1113 1114 if (this.refreshCounter <= 0) {1115 this.refreshCounter = 60;1116 }1117 }, 1000);1118 }1119 }1120 1121 // Initialize dashboard1122 document.addEventListener('DOMContentLoaded', () => {1123 feather.replace();1124 new EnhancedRiskDashboard();1125 });1126 </script>1127</body>1128</html>