Spaces:

Volkan36
/

acf

Running

App Files Files Community

Volkan36 commited on Aug 30, 2025

Commit

c48974a

verified ·

1 Parent(s): c1edddb

undefined - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +1668 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Acf
-emoji: 🌍
-colorFrom: green
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: acf
+emoji: 🐳
+colorFrom: purple
+colorTo: pink
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,1668 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>ACF Mission Control — Advanced Crisis Communication Simulator</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
+  <style>
+    :root {
+      --bg: #0a0e1a;
+      --panel: #0f1829;
+      --panel-hover: #1a2338;
+      --muted: #64748b;
+      --text: #e2e8f0;
+      --accent: #3b82f6;
+      --success: #10b981;
+      --warning: #f59e0b;
+      --danger: #ef4444;
+      --purple: #8b5cf6;
+      --cyan: #06b6d4;
+      --pink: #ec4899;
+    }
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+    html, body {
+      height: 100%;
+      overflow-x: hidden;
+    }
+    body {
+      background: linear-gradient(135deg, #0a0e1a 0%, #1e293b 100%);
+      color: var(--text);
+      font-family: 'Inter', system-ui, -apple-system, sans-serif;
+      position: relative;
+    }
+    /* Animated background */
+    body::before {
+      content: '';
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background:
+        radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
+        radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.05) 0%, transparent 50%),
+        radial-gradient(circle at 40% 20%, rgba(6, 182, 212, 0.05) 0%, transparent 50%);
+      pointer-events: none;
+      animation: bgFloat 20s ease-in-out infinite;
+    }
+    @keyframes bgFloat {
+      0%, 100% { transform: translate(0, 0) scale(1); }
+      33% { transform: translate(-20px, -20px) scale(1.05); }
+      66% { transform: translate(20px, -10px) scale(0.95); }
+    }
+    /* Header */
+    header {
+      background: rgba(15, 24, 41, 0.95);
+      backdrop-filter: blur(10px);
+      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+      position: sticky;
+      top: 0;
+      z-index: 100;
+      padding: 20px 24px;
+    }
+    .header-content {
+      max-width: 1600px;
+      margin: 0 auto;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .header-left h1 {
+      font-size: 24px;
+      font-weight: 800;
+      background: linear-gradient(135deg, #fff 0%, #94a3b8 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      margin-bottom: 4px;
+    }
+    .header-meta {
+      font-size: 13px;
+      color: var(--muted);
+      display: flex;
+      gap: 20px;
+    }
+    .status-indicator {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+    }
+    .status-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: var(--success);
+      animation: pulse 2s ease-in-out infinite;
+    }
+    @keyframes pulse {
+      0%, 100% { opacity: 1; transform: scale(1); }
+      50% { opacity: 0.5; transform: scale(1.2); }
+    }
+    /* Controls */
+    .control-buttons {
+      display: flex;
+      gap: 12px;
+    }
+    .btn {
+      padding: 10px 20px;
+      background: rgba(59, 130, 246, 0.1);
+      border: 1px solid rgba(59, 130, 246, 0.3);
+      border-radius: 8px;
+      color: var(--accent);
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      font-size: 14px;
+    }
+    .btn:hover {
+      background: rgba(59, 130, 246, 0.2);
+      transform: translateY(-1px);
+      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
+    }
+    .btn.active {
+      background: var(--accent);
+      color: white;
+    }
+    /* Container */
+    .container {
+      max-width: 1600px;
+      margin: 0 auto;
+      padding: 24px;
+    }
+    /* Phase Indicator */
+    .phase-indicator {
+      margin-bottom: 24px;
+      padding: 16px;
+      background: rgba(15, 24, 41, 0.6);
+      border-radius: 12px;
+      border: 1px solid rgba(255, 255, 255, 0.1);
+    }
+    .phase-timeline {
+      display: flex;
+      justify-content: space-between;
+      position: relative;
+      padding: 20px 0;
+    }
+    .phase-timeline::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 0;
+      right: 0;
+      height: 2px;
+      background: rgba(255, 255, 255, 0.1);
+    }
+    .phase-item {
+      position: relative;
+      text-align: center;
+      flex: 1;
+    }
+    .phase-dot {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      background: var(--panel);
+      border: 2px solid rgba(255, 255, 255, 0.2);
+      margin: 0 auto 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 700;
+      transition: all 0.3s ease;
+    }
+    .phase-item.active .phase-dot {
+      background: var(--accent);
+      border-color: var(--accent);
+      box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
+    }
+    .phase-item.completed .phase-dot {
+      background: var(--success);
+      border-color: var(--success);
+    }
+    /* Grid Layout */
+    .dashboard-grid {
+      display: grid;
+      grid-template-columns: 380px 1fr 420px;
+      gap: 24px;
+      margin-bottom: 24px;
+    }
+    /* Panels */
+    .panel {
+      background: rgba(15, 24, 41, 0.8);
+      backdrop-filter: blur(10px);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      border-radius: 16px;
+      padding: 20px;
+      transition: all 0.3s ease;
+    }
+    .panel:hover {
+      border-color: rgba(59, 130, 246, 0.3);
+      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+    }
+    .panel-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 16px;
+    }
+    .panel h2 {
+      font-size: 14px;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      color: var(--muted);
+    }
+    .panel-badge {
+      padding: 4px 8px;
+      background: rgba(59, 130, 246, 0.1);
+      border-radius: 4px;
+      font-size: 11px;
+      color: var(--accent);
+    }
+    /* Enhanced Gauge */
+    .gauge-container {
+      position: relative;
+      padding: 20px 0;
+    }
+    .gauge-svg {
+      width: 100%;
+      max-width: 320px;
+      margin: 0 auto;
+      display: block;
+    }
+    .gauge-center {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      text-align: center;
+    }
+    .gauge-value {
+      font-size: 48px;
+      font-weight: 800;
+      background: linear-gradient(135deg, #fff 0%, #64748b 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+    .gauge-label {
+      font-size: 13px;
+      color: var(--muted);
+      margin-top: 4px;
+      font-weight: 500;
+    }
+    /* SPEC/RI Channels */
+    .channels-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 16px;
+    }
+    .channel-card {
+      background: rgba(255, 255, 255, 0.02);
+      border: 1px solid rgba(255, 255, 255, 0.08);
+      border-radius: 12px;
+      padding: 16px;
+      transition: all 0.3s ease;
+    }
+    .channel-card:hover {
+      background: rgba(255, 255, 255, 0.04);
+      transform: translateY(-2px);
+    }
+    .channel-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 12px;
+    }
+    .channel-icon {
+      width: 32px;
+      height: 32px;
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 18px;
+    }
+    .channel-card.sq .channel-icon { background: rgba(59, 130, 246, 0.2); }
+    .channel-card.pq .channel-icon { background: rgba(16, 185, 129, 0.2); }
+    .channel-card.eq .channel-icon { background: rgba(236, 72, 153, 0.2); }
+    .channel-card.cq .channel-icon { background: rgba(245, 158, 11, 0.2); }
+    .channel-name {
+      font-size: 12px;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+    }
+    .channel-progress {
+      height: 8px;
+      background: rgba(255, 255, 255, 0.05);
+      border-radius: 4px;
+      overflow: hidden;
+      margin-bottom: 8px;
+    }
+    .channel-progress-bar {
+      height: 100%;
+      background: linear-gradient(90deg, var(--accent), var(--purple));
+      transition: width 0.5s ease;
+      position: relative;
+      overflow: hidden;
+    }
+    .channel-progress-bar::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+      animation: shimmer 2s infinite;
+    }
+    @keyframes shimmer {
+      0% { transform: translateX(-100%); }
+      100% { transform: translateX(100%); }
+    }
+    /* Metrics Grid */
+    .metrics-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 12px;
+    }
+    .metric-card {
+      background: rgba(255, 255, 255, 0.02);
+      border: 1px solid rgba(255, 255, 255, 0.08);
+      border-radius: 12px;
+      padding: 16px;
+      transition: all 0.3s ease;
+    }
+    .metric-card:hover {
+      background: rgba(255, 255, 255, 0.04);
+    }
+    .metric-value {
+      font-size: 28px;
+      font-weight: 800;
+      margin-bottom: 4px;
+    }
+    .metric-label {
+      font-size: 12px;
+      color: var(--muted);
+    }
+    .metric-trend {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      margin-left: 8px;
+      font-size: 12px;
+    }
+    .trend-up { color: var(--success); }
+    .trend-down { color: var(--danger); }
+    /* Controls Section */
+    .controls-grid {
+      display: grid;
+      gap: 16px;
+    }
+    .control-group {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+    .control-label {
+      font-size: 12px;
+      font-weight: 600;
+      color: var(--muted);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+    select, input[type="range"] {
+      width: 100%;
+      padding: 10px;
+      background: rgba(255, 255, 255, 0.05);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      border-radius: 8px;
+      color: var(--text);
+      font-size: 14px;
+      transition: all 0.3s ease;
+    }
+    select:hover, input[type="range"]:hover {
+      background: rgba(255, 255, 255, 0.08);
+      border-color: rgba(59, 130, 246, 0.3);
+    }
+    .range-wrapper {
+      position: relative;
+    }
+    .range-value {
+      position: absolute;
+      right: 12px;
+      top: 50%;
+      transform: translateY(-50%);
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--accent);
+    }
+    /* Toggle Switches */
+    .toggle-group {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+    .toggle-item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px;
+      background: rgba(255, 255, 255, 0.02);
+      border-radius: 8px;
+      transition: all 0.3s ease;
+    }
+    .toggle-item:hover {
+      background: rgba(255, 255, 255, 0.04);
+    }
+    .toggle-switch {
+      position: relative;
+      width: 48px;
+      height: 24px;
+    }
+    .toggle-switch input {
+      opacity: 0;
+      width: 0;
+      height: 0;
+    }
+    .toggle-slider {
+      position: absolute;
+      cursor: pointer;
+      inset: 0;
+      background: rgba(255, 255, 255, 0.1);
+      border-radius: 24px;
+      transition: 0.3s;
+    }
+    .toggle-slider::before {
+      position: absolute;
+      content: "";
+      height: 18px;
+      width: 18px;
+      left: 3px;
+      bottom: 3px;
+      background: white;
+      border-radius: 50%;
+      transition: 0.3s;
+    }
+    input:checked + .toggle-slider {
+      background: var(--accent);
+    }
+    input:checked + .toggle-slider::before {
+      transform: translateX(24px);
+    }
+    /* Log */
+    .log-container {
+      max-height: 300px;
+      overflow-y: auto;
+      background: rgba(0, 0, 0, 0.3);
+      border-radius: 8px;
+      padding: 12px;
+      font-family: 'Monaco', 'Courier New', monospace;
+      font-size: 12px;
+      line-height: 1.6;
+    }
+    .log-entry {
+      padding: 4px 0;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+      display: flex;
+      gap: 8px;
+    }
+    .log-time {
+      color: var(--muted);
+      flex-shrink: 0;
+    }
+    .log-entry.info { color: #06b6d4; }
+    .log-entry.warn { color: #f59e0b; }
+    .log-entry.error { color: #ef4444; }
+    .log-entry.success { color: #10b981; }
+    /* Charts Section */
+    .charts-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 24px;
+      margin-bottom: 24px;
+    }
+    /* Messages Section */
+    .messages-panel {
+      grid-column: 1 / -1;
+    }
+    .message-tabs {
+      display: flex;
+      gap: 8px;
+      margin-bottom: 16px;
+    }
+    .tab-btn {
+      flex: 1;
+      padding: 8px;
+      background: rgba(255, 255, 255, 0.05);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      border-radius: 8px;
+      color: var(--text);
+      cursor: pointer;
+      transition: all 0.3s ease;
+    }
+    .tab-btn.active {
+      background: var(--accent);
+      color: white;
+      border-color: var(--accent);
+    }
+    .message-content {
+      background: rgba(255, 255, 255, 0.02);
+      border: 1px solid rgba(255, 255, 255, 0.08);
+      border-radius: 8px;
+      padding: 16px;
+      min-height: 150px;
+    }
+    /* ISO Preset */
+    .iso-preset {
+      margin-bottom: 16px;
+    }
+    /* Footer */
+    footer {
+      text-align: center;
+      padding: 32px;
+      color: var(--muted);
+      font-size: 13px;
+      border-top: 1px solid rgba(255, 255, 255, 0.05);
+      margin-top: 48px;
+    }
+    /* Responsive */
+    @media (max-width: 1400px) {
+      .dashboard-grid {
+        grid-template-columns: 1fr 1fr;
+      }
+      .dashboard-grid > *:last-child {
+        grid-column: 1 / -1;
+      }
+    }
+    @media (max-width: 768px) {
+      .dashboard-grid {
+        grid-template-columns: 1fr;
+      }
+      .channels-grid {
+        grid-template-columns: 1fr;
+      }
+      .charts-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <div class="header-content">
+      <div class="header-left">
+        <h1>ACF Mission Control</h1>
+        <div class="header-meta">
+          <span class="status-indicator">
+            <span class="status-dot"></span>
+            <span>System Active</span>
+          </span>
+          <span>ISO Detection Probability: <strong id="detectionProb">0.1/year</strong></span>
+          <span>Simulation Time: <strong id="simTime">00:00</strong></span>
+        </div>
+      </div>
+      <div class="control-buttons">
+        <button id="btnStart" class="btn">▶ Start</button>
+        <button id="btnPause" class="btn">⏸ Pause</button>
+        <button id="btnReset" class="btn">↺ Reset</button>
+        <button id="btnInfo" class="btn">ℹ Framework</button>
+      </div>
+    </div>
+  </header>
+  <div class="container">
+    <!-- Phase Indicator -->
+    <div class="phase-indicator">
+      <div class="phase-timeline">
+        <div class="phase-item" id="phase1">
+          <div class="phase-dot">1</div>
+          <div>Pre-Detection</div>
+        </div>
+        <div class="phase-item" id="phase2">
+          <div class="phase-dot">2</div>
+          <div>Active Discovery</div>
+        </div>
+        <div class="phase-item" id="phase3">
+          <div class="phase-dot">3</div>
+          <div>Post-Confirmation</div>
+        </div>
+      </div>
+    </div>
+    <!-- ISO Preset Selector -->
+    <div class="panel iso-preset">
+      <div class="control-group">
+        <label class="control-label">ISO Example</label>
+        <select id="isoExample">
+          <option value="none">None (Custom)</option>
+          <option value="oumuamua">1I/'Oumuamua (Anomalous, Level 4)</option>
+          <option value="borisov">2I/Borisov (Natural Comet, Level 0)</option>
+          <option value="atlas">3I/ATLAS (Potential Anomaly, Level 4)</option>
+        </select>
+      </div>
+    </div>
+    <!-- Main Dashboard -->
+    <div class="dashboard-grid">
+      <!-- Left: Loeb Scale & Controls -->
+      <section>
+        <div class="panel">
+          <div class="panel-header">
+            <h2>Loeb Scale Assessment</h2>
+            <span class="panel-badge" id="loebBadge">Natural</span>
+          </div>
+          <div class="gauge-container">
+            <svg class="gauge-svg" viewBox="0 0 320 200">
+              <defs>
+                <linearGradient id="gaugeGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+                  <stop offset="0%" style="stop-color:#10b981;stop-opacity:1" />
+                  <stop offset="30%" style="stop-color:#06b6d4;stop-opacity:1" />
+                  <stop offset="60%" style="stop-color:#f59e0b;stop-opacity:1" />
+                  <stop offset="100%" style="stop-color:#ef4444;stop-opacity:1" />
+                </linearGradient>
+              </defs>
+              <path d="M 40 160 A 120 120 0 0 1 280 160" stroke="rgba(255,255,255,0.1)" stroke-width="20" fill="none" stroke-linecap="round"/>
+              <path id="gaugePath" d="M 40 160 A 120 120 0 0 1 280 160" stroke="url(#gaugeGradient)" stroke-width="20" fill="none" stroke-linecap="round" stroke-dasharray="377" stroke-dashoffset="377"/>
+              <circle id="gaugePointer" cx="40" cy="160" r="8" fill="#fff"/>
+            </svg>
+            <div class="gauge-center">
+              <div class="gauge-value" id="loebValue">0.0</div>
+              <div class="gauge-label" id="loebLabel">Insignificant</div>
+            </div>
+          </div>
+        </div>
+        <div class="panel" style="margin-top: 16px;">
+          <h2>Simulation Controls</h2>
+          <div class="controls-grid">
+            <div class="control-group">
+              <label class="control-label">Scenario</label>
+              <select id="scenario">
+                <option value="baseline">Baseline Detection</option>
+                <option value="transparent">Transparent Communication</option>
+                <option value="crisis">Crisis Escalation (Fukushima-like)</option>
+                <option value="misinfo">Misinformation Surge (COVID-like)</option>
+                <option value="coordinated">Coordinated Response (Apophis-like)</option>
+              </select>
+            </div>
+            <div class="control-group">
+              <label class="control-label">Evidence Level</label>
+              <div class="range-wrapper">
+                <input type="range" id="evidence" min="0" max="10" step="0.1" value="0">
+                <span class="range-value" id="evidenceValue">0.0</span>
+              </div>
+            </div>
+            <div class="control-group">
+              <label class="control-label">AI Safeguards</label>
+              <div class="toggle-group">
+                <div class="toggle-item">
+                  <span>Deepfake Detection</span>
+                  <label class="toggle-switch">
+                    <input type="checkbox" id="deepfakeToggle">
+                    <span class="toggle-slider"></span>
+                  </label>
+                </div>
+                <div class="toggle-item">
+                  <span>LLM Pre-seeding</span>
+                  <label class="toggle-switch">
+                    <input type="checkbox" id="llmToggle">
+                    <span class="toggle-slider"></span>
+                  </label>
+                </div>
+                <div class="toggle-item">
+                  <span>Global ISO Portal</span>
+                  <label class="toggle-switch">
+                    <input type="checkbox" id="portalToggle" checked>
+                    <span class="toggle-slider"></span>
+                  </label>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      <!-- Center: SPEC/RI Channels & Effectiveness -->
+      <section>
+        <div class="panel">
+          <div class="panel-header">
+            <h2>SPEC/RI Channel Activation</h2>
+            <span class="panel-badge" id="channelStatus">Monitoring</span>
+          </div>
+          <div class="channels-grid">
+            <div class="channel-card sq">
+              <div class="channel-header">
+                <div class="channel-icon">📊</div>
+                <div>
+                  <div class="channel-name">Systematic (SQ)</div>
+                </div>
+              </div>
+              <div class="channel-progress">
+                <div class="channel-progress-bar" id="sqBar" style="width: 20%"></div>
+              </div>
+              <div style="font-size: 12px; color: var(--muted);">
+                Institutional validation • Peer review • Scientific consensus
+              </div>
+            </div>
+            <div class="channel-card pq">
+              <div class="channel-header">
+                <div class="channel-icon">🛡️</div>
+                <div>
+                  <div class="channel-name">Practical (PQ)</div>
+                </div>
+              </div>
+              <div class="channel-progress">
+                <div class="channel-progress-bar" id="pqBar" style="width: 20%"></div>
+              </div>
+              <div style="font-size: 12px; color: var(--muted);">
+                Safety assessment • Daily impact • Clear directives
+              </div>
+            </div>
+            <div class="channel-card eq">
+              <div class="channel-header">
+                <div class="channel-icon">💫</div>
+                <div>
+                  <div class="channel-name">Emotional (EQ)</div>
+                </div>
+              </div>
+              <div class="channel-progress">
+                <div class="channel-progress-bar" id="eqBar" style="width: 20%"></div>
+              </div>
+              <div style="font-size: 12px; color: var(--muted);">
+                Human stories • Shared journey • Unity themes
+              </div>
+            </div>
+            <div class="channel-card cq">
+              <div class="channel-header">
+                <div class="channel-icon">🎨</div>
+                <div>
+                  <div class="channel-name">Creative (CQ)</div>
+                </div>
+              </div>
+              <div class="channel-progress">
+                <div class="channel-progress-bar" id="cqBar" style="width: 20%"></div>
+              </div>
+              <div style="font-size: 12px; color: var(--muted);">
+                Visualizations • Analogies • Interactive content
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="panel" style="margin-top: 16px;">
+          <h2>Communication Effectiveness</h2>
+          <canvas id="effectivenessChart" height="200"></canvas>
+        </div>
+      </section>
+      <!-- Right: Metrics & Log -->
+      <section>
+        <div class="panel">
+          <h2>Live Metrics</h2>
+          <div class="metrics-grid">
+            <div class="metric-card">
+              <div class="metric-value">
+                <span id="trustValue">65</span>%
+                <span class="metric-trend trend-up">↑</span>
+              </div>
+              <div class="metric-label">Public Trust</div>
+            </div>
+            <div class="metric-card">
+              <div class="metric-value">
+                <span id="anxietyValue">18</span>%
+                <span class="metric-trend trend-down">↓</span>
+              </div>
+              <div class="metric-label">Anxiety Level</div>
+            </div>
+            <div class="metric-card">
+              <div class="metric-value">
+                <span id="coherenceValue">72</span>%
+                <span class="metric-trend trend-up">↑</span>
+              </div>
+              <div class="metric-label">Message Coherence</div>
+            </div>
+            <div class="metric-card">
+              <div class="metric-value">
+                <span id="misinfoValue">4</span>%
+                <span class="metric-trend trend-down">↓</span>
+              </div>
+              <div class="metric-label">Misinformation</div>
+            </div>
+          </div>
+        </div>
+        <div class="panel" style="margin-top: 16px;">
+          <h2>AI System Metrics</h2>
+          <div class="metrics-grid">
+            <div class="metric-card">
+              <div class="metric-value">
+                <span id="hallValue">5.0</span>%
+              </div>
+              <div class="metric-label">LLM Hallucination</div>
+            </div>
+            <div class="metric-card">
+              <div class="metric-value">
+                <span id="deepfakeValue">49</span>%
+              </div>
+              <div class="metric-label">Deepfake Prevalence</div>
+            </div>
+            <div class="metric-card">
+              <div class="metric-value">
+                <span id="reachValue">0</span>M
+              </div>
+              <div class="metric-label">Global Reach</div>
+            </div>
+            <div class="metric-card">
+              <div class="metric-value">
+                <span id="responseTime">0</span>ms
+              </div>
+              <div class="metric-label">Response Time</div>
+            </div>
+          </div>
+        </div>
+        <div class="panel" style="margin-top: 16px;">
+          <h2>Mission Log</h2>
+          <div class="log-container" id="log"></div>
+        </div>
+      </section>
+    </div>
+    <!-- New Messages Panel -->
+    <div class="panel messages-panel">
+      <div class="panel-header">
+        <h2>Generated Messages by Channel</h2>
+        <span class="panel-badge" id="messageStatus">Level-Based</span>
+      </div>
+      <div class="message-tabs">
+        <button class="tab-btn active" data-tab="sq">SQ</button>
+        <button class="tab-btn" data-tab="pq">PQ</button>
+        <button class="tab-btn" data-tab="eq">EQ</button>
+        <button class="tab-btn" data-tab="cq">CQ</button>
+      </div>
+      <div class="message-content" id="messageContent"></div>
+    </div>
+    <!-- Charts Section -->
+    <div class="charts-grid">
+      <div class="panel">
+        <h2>Public Response Dynamics</h2>
+        <canvas id="publicChart" height="200"></canvas>
+      </div>
+      <div class="panel">
+        <h2>Information Warfare Metrics</h2>
+        <canvas id="infowarChart" height="200"></canvas>
+      </div>
+    </div>
+  </div>
+  <footer>
+    <p>ACF Mission Control v2.2 | Based on the Adaptive Communication Framework for Extraterrestrial Intelligence Discovery (Eldadi et al., 2025)</p>
+    <p>Data sources: Pew Research (2021) for public trust; LLM benchmarks (2025) for hallucination; Deepfake studies (2025) for prevalence; LSST estimates (2025) for detection rates</p>
+    <p>Simulation for research and training purposes | Not for operational use</p>
+  </footer>
+  <script>
+    // Enhanced State Management with Data from Paper and External Sources
+    class SimulationState {
+      constructor() {
+        this.reset();
+      }
+      reset() {
+        this.time = 0;
+        this.running = false;
+        this.scenario = 'baseline';
+        this.loeb = 0;
+        this.phase = 1;
+        // SPEC/RI Channels - Initial low activation
+        this.channels = {
+          sq: 0.2,  // Systematic
+          pq: 0.15,  // Practical (adjusted from paper emphasis)
+          eq: 0.1,   // Emotional
+          cq: 0.15   // Creative
+        };
+        // Public metrics - Updated with latest data
+        this.trust = 65; // Pew 2021, no newer public survey found; scientist agreement ~67% for complex life (2025)
+        this.anxiety = 18; // Baseline, no specific data
+        this.coherence = 72; // Baseline
+        this.misinfo = 4; // Baseline
+        // AI metrics - Updated with 2025 benchmarks
+        this.hallucination = 15.0; // GPT-4.5 hallucination rate ~15% (2025 benchmark)
+        this.deepfakes = 38; // Human deepfake detection accuracy ~62% for images, implying ~38% undetected (2025)
+        this.reach = 0;
+        this.responseTime = 0;
+        // Controls
+        this.safeguards = {
+          deepfake: false,
+          llm: false,
+          portal: true
+        };
+        // History for charts
+        this.history = {
+          labels: [],
+          trust: [],
+          anxiety: [],
+          coherence: [],
+          misinfo: [],
+          hallucination: [],
+          deepfakes: []
+        };
+        // Track triggers
+        this.levelTriggered = {4: false, 8: false};
+        // Sample messages from paper, keyed by level groups
+        this.messages = {
+          sq: {
+            low: "The International Astronomical Union confirms that fourteen independent research teams have verified the anomalous characteristics of interstellar object 3I/ATLAS through peer-reviewed analysis.",
+            mid: "International teams are conducting coordinated observations following established protocols.",
+            high: "Systematic establishment of facts: The object is confirmed technological based on convergent evidence from multiple sources."
+          },
+          pq: {
+            low: "The object poses no threat to Earth. All essential services, from healthcare to transportation, continue operating normally.",
+            mid: "No immediate action required; the object poses no threat.",
+            high: "Practical immediate implications: Redirect a substantial fraction of military budgets toward new defense technologies and scientific research."
+          },
+          eq: {
+            low: "Dr. Smith, who first noticed the anomaly, describes feeling 'humbled by the possibility we might not be alone, it reminds us that we're all part of something larger'.",
+            mid: "Scientists worldwide are working together, embodying humanity's collective curiosity.",
+            high: "Emotional human context: We are all in the same boat, and if one of us rocks the boat, all of us might be at risk of drowning."
+          },
+          cq: {
+            low: "Interactive 3D models allowing users to explore the object's trajectory or comparing its shape to familiar objects like 'a cosmic pancake.'",
+            mid: "Interactive trajectory models and comparison graphics engage public attention constructively.",
+            high: "Creative future vision: Global commemoration events and artistic collaborations create shared experience transcending national boundaries."
+          }
+        };
+      }
+      update(dt) {
+        if (!this.running) return;
+        this.time += dt;
+        // Update phase based on Loeb scale from paper
+        if (this.loeb >= 8) this.phase = 3;
+        else if (this.loeb >= 4) this.phase = 2;
+        else this.phase = 1;
+        // Update channels based on phase and paper descriptions
+        this.updateChannels();
+        this.updatePublicMetrics();
+        this.updateAIMetrics();
+        this.updateHistory();
+      }
+      updateChannels() {
+        const L = this.loeb;
+        // Phase-dependent channel activation from paper
+        if (this.phase === 1) {
+          // Pre-detection: SQ dominates
+          this.channels.sq = this.lerp(this.channels.sq, 0.5 + L * 0.05, 0.1);
+          this.channels.pq = this.lerp(this.channels.pq, 0.15 + L * 0.03, 0.1);
+          this.channels.eq = this.lerp(this.channels.eq, 0.1 + L * 0.02, 0.1);
+          this.channels.cq = this.lerp(this.channels.cq, 0.15 + L * 0.03, 0.1);
+        } else if (this.phase === 2) {
+          // Active discovery: All activated, PQ emphasized
+          this.channels.sq = this.lerp(this.channels.sq, 0.6 + L * 0.06, 0.15);
+          this.channels.pq = this.lerp(this.channels.pq, 0.7 + L * 0.07, 0.15); // Higher for practical
+          this.channels.eq = this.lerp(this.channels.eq, 0.5 + L * 0.05, 0.15);
+          this.channels.cq = this.lerp(this.channels.cq, 0.55 + L * 0.06, 0.15);
+        } else {
+          // Post-confirmation: All high, EQ and CQ for adaptation
+          this.channels.sq = this.lerp(this.channels.sq, 0.85, 0.2);
+          this.channels.pq = this.lerp(this.channels.pq, 0.8, 0.2);
+          this.channels.eq = this.lerp(this.channels.eq, 0.9, 0.2); // Higher for unity
+          this.channels.cq = this.lerp(this.channels.cq, 0.9, 0.2); // Higher for meaning-making
+        }
+        // Scenario modifiers based on paper cases
+        switch (this.scenario) {
+          case 'transparent':
+            this.channels.sq *= 1.2;
+            this.channels.pq *= 1.15;
+            break;
+          case 'crisis':
+            this.misinfo += 0.2; // Fukushima-like trust collapse
+            this.trust *= 0.95;
+            break;
+          case 'misinfo':
+            this.hallucination *= 1.5; // COVID-like infodemic
+            this.misinfo *= 2;
+            break;
+          case 'coordinated':
+            Object.keys(this.channels).forEach(key => this.channels[key] = Math.min(1, this.channels[key] * 1.1)); // Apophis-like
+            break;
+        }
+        // Normalize to max 1.0
+        Object.keys(this.channels).forEach(key => {
+          this.channels[key] = Math.min(1, Math.max(0, this.channels[key]));
+        });
+      }
+      updatePublicMetrics() {
+        const channelValues = Object.values(this.channels);
+        const mean = channelValues.reduce((a, b) => a + b, 0) / channelValues.length;
+        const variance = channelValues.reduce((sum, val) => sum + Math.pow(val - mean, 2), 0) / channelValues.length;
+        const stdDev = Math.sqrt(variance);
+        const targetCoherence = Math.max(0, Math.min(100, 100 * (1 - stdDev * 2)));
+        this.coherence = this.lerp(this.coherence, targetCoherence, 0.1);
+        let trustDelta = (this.coherence - 50) * 0.005 - this.misinfo * 0.01;
+        if (this.safeguards.portal) trustDelta += 0.5;
+        if (this.safeguards.llm) trustDelta += 0.3;
+        if (this.safeguards.deepfake) trustDelta += 0.2;
+        this.trust = Math.max(0, Math.min(100, this.trust + trustDelta));
+        let anxietyDelta = this.loeb * 0.5 - this.channels.pq * 10 - this.trust * 0.01 + this.misinfo * 0.1;
+        this.anxiety = Math.max(0, Math.min(100, this.anxiety + anxietyDelta * 0.1));
+        let misinfoDelta = this.loeb * 0.1 - this.coherence * 0.01;
+        if (this.scenario === 'misinfo') misinfoDelta *= 3;
+        if (this.safeguards.portal) misinfoDelta *= 0.7;
+        if (this.safeguards.llm) misinfoDelta *= 0.6;
+        this.misinfo = Math.max(0, Math.min(100, this.misinfo + misinfoDelta * 0.1));
+      }
+      updateAIMetrics() {
+        let hallTarget = 15.0; // Updated base from 2025 benchmarks
+        if (this.safeguards.llm) hallTarget = 7.5; // Halved with safeguards
+        if (this.scenario === 'crisis') hallTarget *= 1.5;
+        if (this.loeb > 7) hallTarget *= 1.2; // Increase in high levels
+        this.hallucination = this.lerp(this.hallucination, hallTarget, 0.1);
+        let deepfakeTarget = 38; // Updated from 2025 stats
+        if (this.loeb > 4) deepfakeTarget = 60; // Increases with attention
+        if (this.safeguards.deepfake) deepfakeTarget *= 0.3;
+        if (this.scenario === 'misinfo') deepfakeTarget *= 2;
+        this.deepfakes = this.lerp(this.deepfakes, deepfakeTarget, 0.1);
+        if (this.loeb >= 4) {
+          let reachGrowth = 0.5 + (this.loeb - 4) * 0.5;
+          if (this.safeguards.portal) reachGrowth += 2;
+          if (this.phase === 3) reachGrowth *= 5;
+          this.reach = Math.min(8000, this.reach + reachGrowth);
+        }
+        this.responseTime = Math.max(50, 500 - this.reach * 0.05 + this.misinfo * 2);
+      }
+      updateHistory() {
+        if (this.history.labels.length > 50) {
+          Object.keys(this.history).forEach(key => this.history[key].shift());
+        }
+        this.history.labels.push(this.formatTime());
+        this.history.trust.push(this.trust);
+        this.history.anxiety.push(this.anxiety);
+        this.history.coherence.push(this.coherence);
+        this.history.misinfo.push(this.misinfo);
+        this.history.hallucination.push(this.hallucination);
+        this.history.deepfakes.push(this.deepfakes);
+      }
+      getMessageLevel() {
+        if (this.loeb < 4) return 'low';
+        if (this.loeb < 8) return 'mid';
+        return 'high';
+      }
+      lerp(a, b, t) {
+        return a + (b - a) * Math.min(1, Math.max(0, t));
+      }
+      formatTime() {
+        const minutes = Math.floor(this.time / 60);
+        const seconds = Math.floor(this.time % 60);
+        return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+      }
+    }
+    // Initialize simulation
+    const state = new SimulationState();
+    let animationId = null;
+    let lastTime = 0;
+    // UI Elements
+    const elements = {
+      // Controls
+      btnStart: document.getElementById('btnStart'),
+      btnPause: document.getElementById('btnPause'),
+      btnReset: document.getElementById('btnReset'),
+      btnInfo: document.getElementById('btnInfo'),
+      scenario: document.getElementById('scenario'),
+      evidence: document.getElementById('evidence'),
+      evidenceValue: document.getElementById('evidenceValue'),
+      deepfakeToggle: document.getElementById('deepfakeToggle'),
+      llmToggle: document.getElementById('llmToggle'),
+      portalToggle: document.getElementById('portalToggle'),
+      isoExample: document.getElementById('isoExample'),
+      // Display
+      simTime: document.getElementById('simTime'),
+      detectionProb: document.getElementById('detectionProb'),
+      loebValue: document.getElementById('loebValue'),
+      loebLabel: document.getElementById('loebLabel'),
+      loebBadge: document.getElementById('loebBadge'),
+      gaugePath: document.getElementById('gaugePath'),
+      gaugePointer: document.getElementById('gaugePointer'),
+      // Channels
+      sqBar: document.getElementById('sqBar'),
+      pqBar: document.getElementById('pqBar'),
+      eqBar: document.getElementById('eqBar'),
+      cqBar: document.getElementById('cqBar'),
+      channelStatus: document.getElementById('channelStatus'),
+      // Metrics
+      trustValue: document.getElementById('trustValue'),
+      anxietyValue: document.getElementById('anxietyValue'),
+      coherenceValue: document.getElementById('coherenceValue'),
+      misinfoValue: document.getElementById('misinfoValue'),
+      hallValue: document.getElementById('hallValue'),
+      deepfakeValue: document.getElementById('deepfakeValue'),
+      reachValue: document.getElementById('reachValue'),
+      responseTime: document.getElementById('responseTime'),
+      // Log
+      log: document.getElementById('log'),
+      // Messages
+      messageTabs: document.querySelectorAll('.tab-btn'),
+      messageContent: document.getElementById('messageContent'),
+      messageStatus: document.getElementById('messageStatus')
+    };
+    // ISO Examples Data (based on papers)
+    const isoExamples = {
+      oumuamua: {
+        loeb: 4.0,
+        description: "Anomalous non-gravitational acceleration without coma",
+        anomalyLevel: 'high'
+      },
+      borisov: {
+        loeb: 0.0,
+        description: "Natural cometary object with outgassing",
+        anomalyLevel: 'low'
+      },
+      atlas: {
+        loeb: 4.0,
+        description: "Potential technosignature indicators",
+        anomalyLevel: 'medium'
+      }
+    };
+    // Charts
+    let publicChart, infowarChart, effectivenessChart;
+    function initCharts() {
+      const chartOptions = {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+          legend: {
+            labels: { color: '#94a3b8', font: { size: 11 } }
+          }
+        },
+        scales: {
+          x: {
+            ticks: { color: '#64748b', font: { size: 10 } },
+            grid: { color: 'rgba(255,255,255,0.05)' }
+          },
+          y: {
+            min: 0,
+            max: 100,
+            ticks: { color: '#64748b', font: { size: 10 } },
+            grid: { color: 'rgba(255,255,255,0.05)' }
+          }
+        }
+      };
+      publicChart = new Chart(document.getElementById('publicChart'), {
+        type: 'line',
+        data: {
+          labels: [],
+          datasets: [
+            {
+              label: 'Trust',
+              data: [],
+              borderColor: '#10b981',
+              backgroundColor: 'rgba(16, 185, 129, 0.1)',
+              tension: 0.4
+            },
+            {
+              label: 'Anxiety',
+              data: [],
+              borderColor: '#f59e0b',
+              backgroundColor: 'rgba(245, 158, 11, 0.1)',
+              tension: 0.4
+            },
+            {
+              label: 'Coherence',
+              data: [],
+              borderColor: '#3b82f6',
+              backgroundColor: 'rgba(59, 130, 246, 0.1)',
+              tension: 0.4
+            }
+          ]
+        },
+        options: chartOptions
+      });
+      infowarChart = new Chart(document.getElementById('infowarChart'), {
+        type: 'line',
+        data: {
+          labels: [],
+          datasets: [
+            {
+              label: 'Misinformation',
+              data: [],
+              borderColor: '#ef4444',
+              backgroundColor: 'rgba(239, 68, 68, 0.1)',
+              tension: 0.4
+            },
+            {
+              label: 'Hallucination',
+              data: [],
+              borderColor: '#8b5cf6',
+              backgroundColor: 'rgba(139, 92, 246, 0.1)',
+              tension: 0.4
+            },
+            {
+              label: 'Deepfakes',
+              data: [],
+              borderColor: '#ec4899',
+              backgroundColor: 'rgba(236, 72, 153, 0.1)',
+              tension: 0.4
+            }
+          ]
+        },
+        options: chartOptions
+      });
+      effectivenessChart = new Chart(document.getElementById('effectivenessChart'), {
+        type: 'radar',
+        data: {
+          labels: ['Systematic', 'Practical', 'Emotional', 'Creative'],
+          datasets: [{
+            label: 'Channel Activation',
+            data: [20, 20, 20, 20],
+            borderColor: '#3b82f6',
+            backgroundColor: 'rgba(59, 130, 246, 0.2)',
+            pointBackgroundColor: '#3b82f6',
+            pointBorderColor: '#fff',
+            pointHoverBackgroundColor: '#fff',
+            pointHoverBorderColor: '#3b82f6'
+          }]
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: false,
+          plugins: {
+            legend: { display: false }
+          },
+          scales: {
+            r: {
+              min: 0,
+              max: 100,
+              ticks: {
+                color: '#64748b',
+                backdropColor: 'transparent'
+              },
+              grid: { color: 'rgba(255,255,255,0.1)' },
+              pointLabels: { color: '#94a3b8' }
+            }
+          }
+        }
+      });
+    }
+    function updateUI() {
+      // Time
+      elements.simTime.textContent = state.formatTime();
+      // Detection probability - Updated with 2025 LSST estimates (1-2/year)
+      const baseRate = 0.1; // 1 per decade
+      const lsstRate = 1.5; // Average of 0.9-1.9/year from 2025 estimates
+      const detProb = (baseRate + (lsstRate - baseRate) * (state.loeb / 10)).toFixed(1);
+      elements.detectionProb.textContent = `${detProb}/year`;
+      // Loeb Scale
+      elements.loebValue.textContent = state.loeb.toFixed(1);
+      updateLoebLabel();
+      updateGauge();
+      // Channels
+      elements.sqBar.style.width = `${state.channels.sq * 100}%`;
+      elements.pqBar.style.width = `${state.channels.pq * 100}%`;
+      elements.eqBar.style.width = `${state.channels.eq * 100}%`;
+      elements.cqBar.style.width = `${state.channels.cq * 100}%`;
+      // Channel status
+      if (state.phase === 1) elements.channelStatus.textContent = 'Monitoring (SQ Dominant)';
+      else if (state.phase === 2) elements.channelStatus.textContent = 'Active (All Channels)';
+      else elements.channelStatus.textContent = 'Full Activation (EQ/CQ Emphasis)';
+      // Metrics
+      elements.trustValue.textContent = Math.round(state.trust);
+      elements.anxietyValue.textContent = Math.round(state.anxiety);
+      elements.coherenceValue.textContent = Math.round(state.coherence);
+      elements.misinfoValue.textContent = Math.round(state.misinfo);
+      elements.hallValue.textContent = state.hallucination.toFixed(1);
+      elements.deepfakeValue.textContent = Math.round(state.deepfakes);
+      elements.reachValue.textContent = Math.round(state.reach);
+      elements.responseTime.textContent = Math.round(state.responseTime);
+      // Update phase indicators
+      updatePhaseIndicators();
+      // Update charts
+      updateCharts();
+      // Update messages
+      updateMessages();
+    }
+    function updateLoebLabel() {
+      const L = state.loeb;
+      let label, badge;
+      if (L < 1) {
+        label = 'Insignificant';
+        badge = 'Natural';
+      } else if (L < 2) {
+        label = 'Natural Phenomenon';
+        badge = 'Natural';
+      } else if (L < 4) {
+        label = 'Anomalous';
+        badge = 'Anomaly';
+      } else if (L < 7) {
+        label = 'Suspected Technology';
+        badge = 'Potential Tech';
+      } else if (L < 9) {
+        label = 'Likely Technology';
+        badge = 'Likely Tech';
+      } else {
+        label = 'Confirmed Technology';
+        badge = 'Confirmed';
+      }
+      elements.loebLabel.textContent = label;
+      elements.loebBadge.textContent = badge;
+      elements.messageStatus.textContent = `${label} (Level ${L.toFixed(1)})`;
+    }
+    function updateGauge() {
+      const percent = state.loeb / 10;
+      const offset = 377 * (1 - percent);
+      elements.gaugePath.style.strokeDashoffset = offset;
+      const angle = -Math.PI + (Math.PI * percent);
+      const x = 160 + 120 * Math.cos(angle);
+      const y = 160 + 120 * Math.sin(angle);
+      elements.gaugePointer.setAttribute('cx', x);
+      elements.gaugePointer.setAttribute('cy', y);
+    }
+    function updatePhaseIndicators() {
+      document.querySelectorAll('.phase-item').forEach(item => item.classList.remove('active', 'completed'));
+      for (let i = 1; i < state.phase; i++) {
+        document.getElementById(`phase${i}`).classList.add('completed');
+      }
+      document.getElementById(`phase${state.phase}`).classList.add('active');
+    }
+    function updateCharts() {
+      publicChart.data.labels = state.history.labels;
+      publicChart.data.datasets[0].data = state.history.trust;
+      publicChart.data.datasets[1].data = state.history.anxiety;
+      publicChart.data.datasets[2].data = state.history.coherence;
+      publicChart.update('none');
+      infowarChart.data.labels = state.history.labels;
+      infowarChart.data.datasets[0].data = state.history.misinfo;
+      infowarChart.data.datasets[1].data = state.history.hallucination;
+      infowarChart.data.datasets[2].data = state.history.deepfakes;
+      infowarChart.update('none');
+      effectivenessChart.data.datasets[0].data = [
+        state.channels.sq * 100,
+        state.channels.pq * 100,
+        state.channels.eq * 100,
+        state.channels.cq * 100
+      ];
+      effectivenessChart.update('none');
+    }
+    function updateMessages() {
+      const level = state.getMessageLevel();
+      const activeTab = document.querySelector('.tab-btn.active').dataset.tab;
+      elements.messageContent.innerHTML = `<p>${state.messages[activeTab][level]}</p>`;
+    }
+    function addLog(message, type = 'info') {
+      const entry = document.createElement('div');
+      entry.className = `log-entry ${type}`;
+      const time = document.createElement('span');
+      time.className = 'log-time';
+      time.textContent = `[${state.formatTime()}]`;
+      const content = document.createElement('span');
+      content.textContent = message;
+      entry.appendChild(time);
+      entry.appendChild(content);
+      elements.log.insertBefore(entry, elements.log.firstChild);
+      while (elements.log.children.length > 50) {
+        elements.log.removeChild(elements.log.lastChild);
+      }
+    }
+    function loadISOExample() {
+      const value = elements.isoExample.value;
+      if (value === 'none') return;
+      const example = isoExamples[value];
+      state.loeb = example.loeb;
+      elements.evidence.value = state.loeb;
+      elements.evidenceValue.textContent = state.loeb.toFixed(1);
+      addLog(`Loaded ISO example: ${value.toUpperCase()} - ${example.description}`, 'info');
+      updateUI();
+    }
+    function simulate(currentTime) {
+      if (state.running) {
+        const dt = Math.min((currentTime - lastTime) / 1000, 0.1);
+        lastTime = currentTime;
+        state.update(dt);
+        // Auto-adjust Loeb based on scenario
+        if (state.scenario !== 'baseline') {
+          let loebDrift = 0;
+          switch (state.scenario) {
+            case 'transparent': loebDrift = 0.005; break;
+            case 'crisis': loebDrift = 0.015; break;
+            case 'misinfo': loebDrift = 0.008; break;
+            case 'coordinated': loebDrift = 0.01; break;
+          }
+          state.loeb = Math.min(10, state.loeb + loebDrift);
+          elements.evidence.value = state.loeb;
+          elements.evidenceValue.textContent = state.loeb.toFixed(1);
+        }
+        // Trigger events at thresholds from paper
+        if (Math.floor(state.loeb) === 4 && !state.levelTriggered[4]) {
+          state.levelTriggered[4] = true;
+          addLog('ALERT: Level 4 reached - Potential Technosignature Indicators', 'warn');
+          addLog('Activating all SPEC/RI channels simultaneously', 'success');
+          addLog('Global ISO Status Portal now online', 'success');
+        }
+        if (Math.floor(state.loeb) === 8 && !state.levelTriggered[8]) {
+          state.levelTriggered[8] = true;
+          addLog('CRITICAL: Level 8 - Confirmed Technology', 'error');
+          addLog('Initiating full transparency protocols with emphasis on EQ and CQ', 'warn');
+          addLog('Redirecting resources as per Loeb principles', 'info');
+        }
+        updateUI();
+        animationId = requestAnimationFrame(simulate);
+      }
+    }
+    // Event Listeners
+    elements.btnStart.addEventListener('click', () => {
+      state.running = true;
+      lastTime = performance.now();
+      elements.btnStart.classList.add('active');
+      elements.btnPause.classList.remove('active');
+      addLog('Simulation started', 'success');
+      simulate(performance.now());
+    });
+    elements.btnPause.addEventListener('click', () => {
+      state.running = false;
+      elements.btnPause.classList.add('active');
+      elements.btnStart.classList.remove('active');
+      if (animationId) cancelAnimationFrame(animationId);
+      addLog('Simulation paused', 'warn');
+    });
+    elements.btnReset.addEventListener('click', () => {
+      state.reset();
+      elements.btnStart.classList.remove('active');
+      elements.btnPause.classList.remove('active');
+      if (animationId) cancelAnimationFrame(animationId);
+      // Reset UI
+      elements.evidence.value = 0;
+      elements.evidenceValue.textContent = '0.0';
+      elements.scenario.value = 'baseline';
+      elements.deepfakeToggle.checked = false;
+      elements.llmToggle.checked = false;
+      elements.portalToggle.checked = true;
+      elements.isoExample.value = 'none';
+      updateUI();
+      addLog('System reset to initial conditions', 'info');
+    });
+    elements.btnInfo.addEventListener('click', () => {
+      addLog('ACF: Adaptive Communication Framework for ETI Discovery', 'info');
+      addLog('Integrates SPEC/RI channels: SQ, PQ, EQ, CQ', 'info');
+      addLog('Calibrated to Loeb Scale (0-10)', 'info');
+      addLog('Lessons from COVID-19, Fukushima, Apophis', 'info');
+      addLog('Developed by Eldadi, Tenenbaum & Loeb (2025)', 'info');
+      addLog('Data-integrated: LSST rates (1.5/year avg, 2025 est.), LLM hallucination (15%, 2025), Deepfake undetected (38%, 2025)', 'info');
+    });
+    elements.scenario.addEventListener('change', (e) => {
+      state.scenario = e.target.value;
+      addLog(`Scenario changed to: ${e.target.options[e.target.selectedIndex].text}`, 'info');
+    });
+    elements.evidence.addEventListener('input', (e) => {
+      state.loeb = parseFloat(e.target.value);
+      elements.evidenceValue.textContent = state.loeb.toFixed(1);
+      updateUI();
+    });
+    elements.deepfakeToggle.addEventListener('change', (e) => {
+      state.safeguards.deepfake = e.target.checked;
+      addLog(`Deepfake detection ${e.target.checked ? 'enabled' : 'disabled'}`, e.target.checked ? 'success' : 'warn');
+    });
+    elements.llmToggle.addEventListener('change', (e) => {
+      state.safeguards.llm = e.target.checked;
+      addLog(`LLM pre-seeding ${e.target.checked ? 'activated' : 'deactivated'}`, e.target.checked ? 'success' : 'warn');
+    });
+    elements.portalToggle.addEventListener('change', (e) => {
+      state.safeguards.portal = e.target.checked;
+      addLog(`Global ISO Portal ${e.target.checked ? 'online' : 'offline'}`, e.target.checked ? 'success' : 'error');
+    });
+    elements.isoExample.addEventListener('change', loadISOExample);
+    // Message tabs
+    elements.messageTabs.forEach(tab => {
+      tab.addEventListener('click', (e) => {
+        elements.messageTabs.forEach(t => t.classList.remove('active'));
+        e.target.classList.add('active');
+        updateMessages();
+      });
+    });
+    // Initialize
+    initCharts();
+    updateUI();
+    addLog('ACF Mission Control initialized with data from Eldadi et al. (2025)', 'success');
+    addLog('Integrated real 2025 data: LSST ISO rate ~1.5/year, LLM hallucination ~15%, Deepfake undetected ~38%', 'info');
+    addLog('System ready for simulation', 'info');
+  </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Volkan36/acf" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>