Spaces:

matthewspring
/

anycoder-711d151f

Running

App Files Files Community

matthewspring commited on Feb 6

Commit

1db65e4

verified ·

1 Parent(s): 811f347

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +739 -590

index.html CHANGED Viewed

@@ -1,603 +1,752 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Commitment Gateway</title>
-    <style>
-        :root {
-            --bg-dark: #0a0b10;
-            --glass-panel: rgba(255, 255, 255, 0.05);
-            --glass-border: rgba(255, 255, 255, 0.1);
-            --accent-primary: #3b82f6;
-            --accent-hover: #2563eb;
-            --danger: #ef4444;
-            --success: #10b981;
-            --text-main: #e2e8f0;
-            --text-muted: #94a3b8;
-            --font-display: 'Inter', system-ui, -apple-system, sans-serif;
-            --font-mono: 'Courier New', Courier, monospace;
-        }
-        * {
-            box-sizing: border-box;
-            margin: 0;
-            padding: 0;
-        }
-        body {
-            background-color: var(--bg-dark);
-            color: var(--text-main);
-            font-family: var(--font-display);
-            height: 100vh;
-            display: flex;
-            flex-direction: column;
-            overflow: hidden;
-            background-image:
-                radial-gradient(at 0% 0%, rgba(59, 130, 246, 0.15) 0px, transparent 50%),
-                radial-gradient(at 100% 0%, rgba(168, 85, 247, 0.15) 0px, transparent 50%),
-                radial-gradient(at 100% 100%, rgba(239, 68, 68, 0.15) 0px, transparent 50%),
-                radial-gradient(at 0% 100%, rgba(16, 185, 129, 0.15) 0px, transparent 50%);
-        }
-        /* Header */
-        header {
-            padding: 1.5rem 2rem;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            border-bottom: 1px solid var(--glass-border);
-            backdrop-filter: blur(10px);
-            z-index: 100;
-        }
-        .logo {
-            font-weight: 700;
-            font-size: 1.5rem;
-            letter-spacing: -0.05em;
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-        .logo span {
-            color: var(--accent-primary);
-        }
-        .anycoder-link {
-            text-decoration: none;
-            color: var(--text-muted);
-            font-size: 0.85rem;
-            font-family: var(--font-mono);
-            transition: color 0.3s ease;
-        }
-        .anycoder-link:hover {
-            color: var(--accent-primary);
-        }
-        /* Main Layout */
-        main {
-            flex: 1;
-            display: grid;
-            grid-template-columns: 350px 1fr;
-            gap: 2rem;
-            padding: 2rem;
-            max-width: 1400px;
-            margin: 0 auto;
-            width: 100%;
-        }
-        /* Sidebar / Context Panel */
-        .context-panel {
-            background: var(--glass-panel);
-            border: 1px solid var(--glass-border);
-            border-radius: 16px;
-            padding: 2rem;
-            display: flex;
-            flex-direction: column;
-            gap: 2rem;
-            backdrop-filter: blur(12px);
-            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
-        }
-        .section-title {
-            font-size: 0.75rem;
-            text-transform: uppercase;
-            letter-spacing: 0.2em;
-            color: var(--text-muted);
-            margin-bottom: 1rem;
-        }
-        .risk-assessment {
-            display: flex;
-            flex-direction: column;
-            gap: 1rem;
-        }
-        .risk-item {
-            display: flex;
-            justify-content: space-between;
-            padding: 1rem;
-            background: rgba(0,0,0,0.3);
-            border-radius: 8px;
-            border-left: 3px solid var(--text-muted);
-            transition: all 0.4s ease;
-        }
-        .risk-item.high { border-color: var(--danger); }
-        .risk-item.medium { border-color: #f59e0b; }
-        .risk-item.low { border-color: var(--success); }
-        .risk-label { font-weight: 600; }
-        .risk-score { font-family: var(--font-mono); font-size: 0.9rem; }
-        .symbolic-metrics {
-            margin-top: auto;
-            padding-top: 2rem;
-            border-top: 1px solid var(--glass-border);
-        }
-        .metric-grid {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 1rem;
-        }
-        .metric {
-            text-align: center;
-        }
-        .metric-value {
-            display: block;
-            font-size: 2rem;
-            font-weight: 700;
-            color: var(--text-main);
-        }
-        .metric-label {
-            font-size: 0.8rem;
-            color: var(--text-muted);
-        }
-        /* Main Content / The Decision Interface */
-        .interface-panel {
-            display: flex;
-            flex-direction: column;
-            gap: 2rem;
-            align-items: center;
-            justify-content: center;
-        }
-        .card {
-            background: var(--glass-panel);
-            border: 1px solid var(--glass-border);
-            border-radius: 24px;
-            padding: 4rem;
-            width: 100%;
-            text-align: center;
-            backdrop-filter: blur(16px);
-            position: relative;
-            overflow: hidden;
-            transition: transform 0.3s ease;
-        }
-        .card::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 100%);
-            pointer-events: none;
-        }
-        .symbol-icon {
-            width: 80px;
-            height: 80px;
-            margin-bottom: 2rem;
-            color: var(--text-muted);
-            transition: color 0.5s ease;
-        }
-        h1 {
-            font-size: 3.5rem;
-            font-weight: 800;
-            line-height: 1.1;
-            margin-bottom: 1rem;
-            letter-spacing: -0.05em;
-        }
-        .subtitle {
-            font-size: 1.25rem;
-            color: var(--text-muted);
-            max-width: 600px;
-            margin: 0 auto 3rem auto;
-            line-height: 1.6;
-        }
-        /* The Toggle Switch */
-        .commitment-toggle-container {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 2rem;
-            background: rgba(0,0,0,0.4);
-            padding: 2rem;
-            border-radius: 50px;
-            border: 1px solid var(--glass-border);
-        }
-        .status-label {
-            font-size: 1.5rem;
-            font-weight: 700;
-            min-width: 150px;
-            text-transform: uppercase;
-            letter-spacing: 0.1em;
-        }
-        .switch {
-            position: relative;
-            display: inline-block;
-            width: 80px;
-            height: 44px;
-        }
-        .switch input {
-            opacity: 0;
-            width: 0;
-            height: 0;
-        }
-        .slider {
-            position: absolute;
-            cursor: pointer;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background-color: var(--danger);
-            transition: .4s;
-            border-radius: 34px;
-            box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
-        }
-        .slider:before {
-            position: absolute;
-            content: "";
-            height: 36px;
-            width: 36px;
-            left: 4px;
-            bottom: 4px;
-            background-color: white;
-            transition: .4s;
-            border-radius: 50%;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
-        }
-        input:checked + .slider {
-            background-color: var(--success);
-        }
-        input:checked + .slider:before {
-            transform: translateX(36px);
-        }
-        /* Terminal / Log Area */
-        .terminal {
-            background: #000;
-            border: 1px solid #333;
-            border-radius: 12px;
-            padding: 1.5rem;
-            font-family: var(--font-mono);
-            font-size: 0.9rem;
-            height: 200px;
-            overflow-y: auto;
-            color: #a0a0a0;
-            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
-        }
-        .log-entry {
-            margin-bottom: 0.5rem;
-            display: flex;
-        }
-        .log-time {
-            color: var(--accent-primary);
-            margin-right: 10px;
-        }
-        .log-info { color: var(--text-main); }
-        .log-warning { color: #f59e0b; }
-        .log-danger { color: var(--danger); }
-        .log-success { color: var(--success); }
-        /* Responsive Design */
-        @media (max-width: 900px) {
-            main {
-                grid-template-columns: 1fr;
-                overflow-y: auto;
-            }
-            .context-panel {
-                order: 2;
-            }
-            .interface-panel {
-                order: 1;
-            }
-            h1 { font-size: 2.5rem; }
-        }
-        @keyframes pulse {
-            0% { opacity: 1; }
-            50% { opacity: 0.5; }
-            100% { opacity: 1; }
-        }
-        .status-indicator {
-            width: 10px;
-            height: 10px;
-            background-color: var(--danger);
-            border-radius: 50%;
-            display: inline-block;
-            margin-right: 8px;
-            animation: pulse 2s infinite;
-        }
-        .btn-action {
-            margin-top: 2rem;
-            padding: 1rem 2rem;
-            background: transparent;
-            border: 1px solid var(--text-muted);
-            color: var(--text-muted);
-            border-radius: 8px;
-            cursor: not-allowed;
-            transition: all 0.3s;
-            font-size: 1rem;
-        }
-        .btn-action.active {
-            background: var(--text-main);
-            color: var(--bg-dark);
-            border-color: var(--text-main);
-            cursor: pointer;
-            font-weight: 700;
-        }
-        .btn-action:hover.active {
-            background: white;
-            transform: translateY(-2px);
-            box-shadow: 0 0 20px rgba(255,255,255,0.3);
-        }
-    </style>
-</head>
-<body>
-    <header>
-        <div class="logo">
-            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z"/>
-                <path d="M12 6v6l4 2"/>
-            </svg>
-            <span>Commitment</span>Gate
         </div>
-        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
-            Built with anycoder
-        </a>
-    </header>
-    <main>
-        <!-- Left Sidebar: Context & Metrics -->
-        <aside class="context-panel">
-            <div>
-                <div class="section-title">System Status</div>
-                <div style="display: flex; align-items: center;">
-                    <span class="status-indicator"></span>
-                    <span style="font-weight: 600; letter-spacing: 0.05em;">SYSTEM LOCKED</span>
-                </div>
-                <p style="font-size: 0.9rem; color: var(--text-muted); margin-top: 0.5rem;">
-                    High-stakes simulation environment active. Real-world model interaction pending authorization.
-                </p>
-            </div>
-            <div class="risk-assessment">
-                <div class="section-title">Impact Analysis</div>
-                <div class="risk-item high">
-                    <span class="risk-label">Human Interaction Impact</span>
-                    <span class="risk-score" style="color: var(--danger);">CRITICAL</span>
-                </div>
-                <div class="risk-item high">
-                    <span class="risk-label">Data Integrity Risk</span>
-                    <span class="risk-score" style="color: var(--danger);">HIGH</span>
-                </div>
-                <div class="risk-item medium">
-                    <span class="risk-label">Resource Allocation</span>
-                    <span class="risk-score" style="color: #f59e0b;">WARNING</span>
-                </div>
-                <div class="risk-item low">
-                    <span class="risk-label">Reversibility Factor</span>
-                    <span class="risk-score" style="color: var(--success);">REVERSIBLE</span>
-                </div>
-            </div>
-            <div class="symbolic-metrics">
-                <div class="section-title">Simulation Variables</div>
-                <div class="metric-grid">
-                    <div class="metric">
-                        <span class="metric-value" style="color: var(--accent-primary)">∞</span>
-                        <span class="metric-label">Potential</span>
-                    </div>
-                    <div class="metric">
-                        <span class="metric-value" style="color: var(--danger)">100%</span>
-                        <span class="metric-label">Responsibility</span>
-                    </div>
-                    <div class="metric">
-                        <span class="metric-value">0.00s</span>
-                        <span class="metric-label">Cooldown</span>
-                    </div>
-                    <div class="metric">
-                        <span class="metric-value" style="color: var(--success)">READY</span>
-                        <span class="metric-label">Status</span>
-                    </div>
-                </div>
-            </div>
-        </aside>
-        <!-- Right Side: The Decision Interface -->
-        <section class="interface-panel">
-            <div class="card">
-                <svg class="symbol-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-                    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke-linecap="round" stroke-linejoin="round"/>
-                    <path d="M12 8v4" stroke-linecap="round"/>
-                    <path d="M12 16h.01" stroke-linecap="round"/>
-                </svg>
-                <h1>Threshold of Action</h1>
-                <p class="subtitle">
-                    "We are currently in a symbolic representation. Proceeding forward represents a significant commitment that could affect real models and real people alike."
-                </p>
-                <div class="commitment-toggle-container">
-                    <div style="text-align: right;">
-                        <div class="status-label" style="color: var(--danger);">ABORT / LEAVE</div>
-                        <div style="font-size: 0.8rem; color: var(--text-muted);">Revert to safe state</div>
-                    </div>
-                    <label class="switch">
-                        <input type="checkbox" id="commitmentToggle">
-                        <span class="slider"></span>
-                    </label>
-                    <div style="text-align: left;">
-                        <div class="status-label" style="color: var(--success);">PROCEED</div>
-                        <div style="font-size: 0.8rem; color: var(--text-muted);">Initialize High-Stakes Mode</div>
-                    </div>
-                </div>
-                <button id="actionBtn" class="btn-action" disabled>INITIALIZE SEQUENCE</button>
-            </div>
-            <div class="terminal" id="terminal">
-                <div class="log-entry"><span class="log-time">[SYSTEM]</span> <span class="log-info">Commitment Gateway v1.0.4 initialized...</span></div>
-                <div class="log-entry"><span class="log-time">[ANALYSIS]</span> <span class="log-info">Assessing environmental variables...</span></div>
-                <div class="log-entry"><span class="log-time">[WARNING]</span> <span class="log-warning">Real-world interaction protocols detected.</span></div>
-                <div class="log-entry"><span class="log-time">[SYSTEM]</span> <span class="log-info">Waiting for user authorization...</span></div>
-            </div>
-        </section>
-    </main>
-    <script>
-        document.addEventListener('DOMContentLoaded', () => {
-            const toggle = document.getElementById('commitmentToggle');
-            const actionBtn = document.getElementById('actionBtn');
-            const terminal = document.getElementById('terminal');
-            const statusLabels = document.querySelectorAll('.status-label');
-            let isAuthorized = false;
-            // Helper to add logs
-            const addLog = (message, type = 'info') => {
-                const time = new Date().toLocaleTimeString('en-US', { hour12: false });
-                const logDiv = document.createElement('div');
-                logDiv.className = 'log-entry';
-                let colorClass = 'log-info';
-                if (type === 'warning') colorClass = 'log-warning';
-                if (type === 'danger') colorClass = 'log-danger';
-                if (type === 'success') colorClass = 'log-success';
-                logDiv.innerHTML = `
-                    <span class="log-time">[${time}]</span>
-                    <span class="${colorClass}">${message}</span>
-                `;
-                terminal.appendChild(logDiv);
-                terminal.scrollTop = terminal.scrollHeight;
-            };
-            // Toggle Logic
-            toggle.addEventListener('change', (e) => {
-                if (e.target.checked) {
-                    // PROCEED State
-                    isAuthorized = true;
-                    actionBtn.disabled = false;
-                    actionBtn.classList.add('active');
-                    // Visual Updates
-                    statusLabels[0].style.color = 'var(--text-muted)'; // Abort grayed out
-                    statusLabels[1].style.color = 'var(--success)'; // Proceed active
-                    addLog('Authorization signal received. Switching to High-Stakes Simulation Mode.', 'warning');
-                    // Simulate processing
-                    setTimeout(() => {
-                        addLog('Validating commitment parameters...', 'info');
-                    }, 600);
-                    setTimeout(() => {
-                        addLog('Warning: This action will affect real models and real people alike.', 'danger');
-                    }, 1200);
-                    setTimeout(() => {
-                        addLog('System Ready. Proceed with caution.', 'success');
-                    }, 1800);
-                } else {
-                    // LEAVE State
-                    isAuthorized = false;
-                    actionBtn.disabled = true;
-                    actionBtn.classList.remove('active');
-                    // Visual Updates
-                    statusLabels[0].style.color = 'var(--danger)'; // Abort active
-                    statusLabels[1].style.color = 'var(--text-muted)'; // Proceed grayed out
-                    addLog('Authorization revoked. Returning to symbolic representation.', 'warning');
-                    setTimeout(() => {
-                        addLog('Environment stabilized. Safe state active.', 'success');
-                    }, 800);
-                }
-            });
-            // Button Click Logic
-            actionBtn.addEventListener('click', () => {
-                if (isAuthorized) {
-                    addLog('INITIATING PROTOCOL...', 'danger');
-                    // Simulate loading
-                    const originalText = actionBtn.innerText;
-                    actionBtn.innerText = "PROCESSING...";
-                    actionBtn.style.opacity = "0.7";
-                    setTimeout(() => {
-                        actionBtn.innerText = "SEQUENCE COMPLETE";
-                        actionBtn.style.background = "var(--success)";
-                        actionBtn.style.color = "white";
-                        actionBtn.style.borderColor = "var(--success)";
-                        addLog('Simulation parameters applied to live environment.', 'success');
-                        addLog('All parties notified of commitment.', 'info');
-                        setTimeout(() => {
-                            alert("Simulation Complete. You have successfully represented the commitment path.");
-                            // Reset
-                            toggle.checked = false;
-                            actionBtn.click(); // Trigger reset logic
-                        }, 1000);
-                    }, 2000);
-                }
-            });
-        });
-    </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Commitment Gateway - Pathway Mode</title>
+  <style>
+    /* --- Modern CSS Variables & Reset --- */
+    :root {
+      --bg-dark: #05070a;
+      --bg-panel: rgba(20, 24, 35, 0.6);
+      --glass-border: rgba(255, 255, 255, 0.08);
+      --accent-gold: #fbbf24; /* Symbolizing Wisdom & Success */
+      --accent-gold-glow: rgba(251, 191, 36, 0.3);
+      --accent-cyan: #06b6d4; /* Symbolizing Clarity & Path */
+      --text-main: #e2e8f0;
+      --text-muted: #94a3b8;
+      --text-success: #34d399;
+      --font-display: 'Inter', system-ui, -apple-system, sans-serif;
+      --font-mono: 'Courier New', Courier, monospace;
+    }
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+    body {
+      background-color: var(--bg-dark);
+      color: var(--text-main);
+      font-family: var(--font-display);
+      height: 100vh;
+      display: flex;
+      flex-direction: column;
+      overflow-x: hidden;
+      background-image:
+        radial-gradient(circle at 10% 20%, rgba(6, 182, 212, 0.1) 0px, transparent 40%),
+        radial-gradient(circle at 90% 80%, rgba(251, 191, 36, 0.1) 0px, transparent 40%),
+        linear-gradient(to bottom, #05070a, #0a0f16);
+    }
+    /* --- Header Section --- */
+    header {
+      padding: 1.5rem 2rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 1px solid var(--glass-border);
+      backdrop-filter: blur(10px);
+      z-index: 100;
+      position: relative;
+    }
+    .logo {
+      font-weight: 700;
+      font-size: 1.5rem;
+      letter-spacing: -0.05em;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      color: var(--text-main);
+    }
+    .logo span {
+      color: var(--accent-cyan);
+    }
+    .logo-icon {
+      color: var(--accent-gold);
+    }
+    .anycoder-link {
+      text-decoration: none;
+      color: var(--text-muted);
+      font-size: 0.85rem;
+      font-family: var(--font-mono);
+      padding: 8px 16px;
+      border: 1px solid var(--glass-border);
+      border-radius: 20px;
+      transition: all 0.3s ease;
+    }
+    .anycoder-link:hover {
+      color: var(--accent-gold);
+      border-color: var(--accent-gold);
+      box-shadow: 0 0 15px var(--accent-gold-glow);
+    }
+    /* --- Main Layout --- */
+    main {
+      flex: 1;
+      display: grid;
+      grid-template-columns: 380px 1fr;
+      gap: 2rem;
+      padding: 2rem;
+      max-width: 1500px;
+      margin: 0 auto;
+      width: 100%;
+      overflow-y: auto;
+    }
+    /* --- Sidebar / Context Panel --- */
+    .context-panel {
+      background: var(--bg-panel);
+      border: 1px solid var(--glass-border);
+      border-radius: 24px;
+      padding: 2rem;
+      display: flex;
+      flex-direction: column;
+      gap: 2.5rem;
+      backdrop-filter: blur(16px);
+      box-shadow: 0 8px 32px -1px rgba(0, 0, 0, 0.4);
+      height: fit-content;
+    }
+    .panel-header {
+      border-bottom: 1px solid var(--glass-border);
+      padding-bottom: 1.5rem;
+    }
+    .section-title {
+      font-size: 0.7rem;
+      text-transform: uppercase;
+      letter-spacing: 0.2em;
+      color: var(--accent-cyan);
+      font-weight: 700;
+      margin-bottom: 1rem;
+    }
+    .status-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 6px 12px;
+      background: rgba(6, 182, 212, 0.1);
+      border: 1px solid var(--accent-cyan);
+      border-radius: 50px;
+      font-size: 0.85rem;
+      color: var(--accent-cyan);
+      font-weight: 600;
+    }
+    .status-dot {
+      width: 8px;
+      height: 8px;
+      background-color: var(--accent-cyan);
+      border-radius: 50%;
+      box-shadow: 0 0 10px var(--accent-cyan);
+      animation: pulse 3s infinite;
+    }
+    .wisdom-card {
+      background: rgba(0, 0, 0, 0.3);
+      border-radius: 16px;
+      padding: 1.5rem;
+      border: 1px solid var(--glass-border);
+    }
+    .wisdom-text {
+      font-style: italic;
+      color: var(--text-main);
+      line-height: 1.6;
+      font-size: 1.1rem;
+    }
+    .wisdom-author {
+      margin-top: 0.5rem;
+      font-size: 0.85rem;
+      color: var(--text-muted);
+      text-align: right;
+      display: block;
+    }
+    .metrics-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 1rem;
+    }
+    .metric {
+      text-align: center;
+    }
+    .metric-value {
+      display: block;
+      font-size: 2.5rem;
+      font-weight: 800;
+      color: var(--accent-gold);
+      line-height: 1;
+    }
+    .metric-label {
+      font-size: 0.75rem;
+      color: var(--text-muted);
+      text-transform: uppercase;
+      letter-spacing: 0.1em;
+    }
+    /* --- Main Interface --- */
+    .interface-panel {
+      display: flex;
+      flex-direction: column;
+      gap: 2rem;
+      align-items: center;
+      justify-content: flex-start;
+      padding-top: 2rem;
+    }
+    .gateway-card {
+      background: var(--bg-panel);
+      border: 1px solid var(--glass-border);
+      border-radius: 32px;
+      padding: 4rem 3rem;
+      width: 100%;
+      text-align: center;
+      backdrop-filter: blur(20px);
+      position: relative;
+      transition: all 0.6s ease;
+      box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.5);
+    }
+    .gateway-card.active {
+      border-color: var(--accent-gold);
+      box-shadow: 0 20px 60px -10px rgba(251, 191, 36, 0.2);
+    }
+    .symbol-icon-container {
+      width: 100px;
+      height: 100px;
+      margin: 0 auto 2rem auto;
+      position: relative;
+    }
+    .symbol-icon {
+      width: 100%;
+      height: 100%;
+      color: var(--text-muted);
+      transition: all 0.6s ease;
+      stroke-width: 1.5;
+    }
+    .gateway-card.active .symbol-icon {
+      color: var(--accent-gold);
+      stroke-width: 2;
+      filter: drop-shadow(0 0 15px var(--accent-gold-glow));
+      animation: spin-slow 10s linear infinite;
+    }
+    h1 {
+      font-size: 3.75rem;
+      font-weight: 800;
+      line-height: 1.1;
+      margin-bottom: 1.5rem;
+      letter-spacing: -0.06em;
+      background: linear-gradient(to right, #fff, #cbd5e1);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+    .subtitle {
+      font-size: 1.35rem;
+      color: var(--text-muted);
+      max-width: 700px;
+      margin: 0 auto 3rem auto;
+      line-height: 1.7;
+    }
+    /* --- The Pathway Toggle --- */
+    .pathway-container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 3rem;
+      background: rgba(0, 0, 0, 0.4);
+      padding: 2.5rem;
+      border-radius: 60px;
+      border: 1px solid var(--glass-border);
+      position: relative;
+      overflow: hidden;
+    }
+    .pathway-container::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 0;
+      right: 0;
+      height: 2px;
+      background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
+      opacity: 0.5;
+    }
+    .path-status {
+      text-align: center;
+      min-width: 180px;
+      transition: all 0.4s ease;
+    }
+    .path-title {
+      font-size: 1.75rem;
+      font-weight: 800;
+      text-transform: uppercase;
+      letter-spacing: 0.15em;
+      margin-bottom: 0.5rem;
+    }
+    .path-desc {
+      font-size: 0.9rem;
+      color: var(--text-muted);
+      transition: color 0.4s ease;
+    }
+    .path-status.active .path-title {
+      color: var(--accent-gold);
+      text-shadow: 0 0 20px rgba(251, 191, 36, 0.4);
+    }
+    .path-status.active .path-desc {
+      color: var(--accent-cyan);
+    }
+    /* Custom Switch Styling */
+    .switch {
+      position: relative;
+      display: inline-block;
+      width: 90px;
+      height: 50px;
+    }
+    .switch input {
+      opacity: 0;
+      width: 0;
+      height: 0;
+    }
+    .slider {
+      position: absolute;
+      cursor: pointer;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: #1e293b;
+      transition: .5s;
+      border-radius: 50px;
+      box-shadow: inset 0 0 10px rgba(0,0,0,0.8);
+      border: 1px solid var(--glass-border);
+    }
+    .slider:before {
+      position: absolute;
+      content: '';
+      height: 42px;
+      width: 42px;
+      left: 4px;
+      bottom: 4px;
+      background-color: white;
+      transition: .5s;
+      border-radius: 50%;
+      box-shadow: 0 0 10px rgba(255,255,255,0.3);
+    }
+    input:checked+.slider {
+      background-color: rgba(6, 182, 212, 0.2);
+      border-color: var(--accent-cyan);
+    }
+    input:checked+.slider:before {
+      transform: translateX(40px);
+      background-color: var(--accent-gold);
+      box-shadow: 0 0 20px var(--accent-gold-glow);
+    }
+    /* --- Terminal / Log Area --- */
+    .terminal-wrapper {
+      width: 100%;
+      background: #000;
+      border-radius: 16px;
+      overflow: hidden;
+      box-shadow: 0 10px 30px -5px rgba(0,0,0,0.5);
+      border: 1px solid #1e293b;
+    }
+    .terminal-header {
+      background: #0f172a;
+      padding: 0.75rem 1.5rem;
+      display: flex;
+      gap: 8px;
+      border-bottom: 1px solid #1e293b;
+    }
+    .dot { width: 10px; height: 10px; border-radius: 50%; }
+    .dot.red { background: #ef4444; }
+    .dot.yellow { background: #f59e0b; }
+    .dot.green { background: #10b981; }
+    .terminal {
+      padding: 1.5rem;
+      font-family: var(--font-mono);
+      font-size: 0.9rem;
+      height: 250px;
+      overflow-y: auto;
+      color: #d1d5db;
+      scroll-behavior: smooth;
+    }
+    .terminal::-webkit-scrollbar { width: 6px; }
+    .terminal::-webkit-scrollbar-track { background: #000; }
+    .terminal::-webkit-scrollbar-thumb { background: #374151; border-radius: 3px; }
+    .log-entry {
+      margin-bottom: 0.75rem;
+      display: flex;
+      animation: fadeIn 0.3s ease-in-out;
+    }
+    .log-time {
+      color: var(--text-muted);
+      margin-right: 12px;
+      font-size: 0.8rem;
+    }
+    .log-content { flex: 1; }
+    .log-info { color: var(--text-main); }
+    .log-success { color: var(--text-success); font-weight: 500; }
+    .log-warn { color: var(--accent-gold); }
+    /* --- Action Button --- */
+    .btn-action {
+      margin-top: 2rem;
+      padding: 1.2rem 3rem;
+      background: var(--text-main);
+      color: var(--bg-dark);
+      border: none;
+      border-radius: 50px;
+      cursor: pointer;
+      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+      font-size: 1.1rem;
+      font-weight: 700;
+      letter-spacing: 0.05em;
+      box-shadow: 0 0 20px rgba(255,255,255,0.2);
+    }
+    .btn-action:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 0 30px rgba(255,255,255,0.4);
+    }
+    .btn-action:active {
+      transform: translateY(1px);
+    }
+    .btn-action.active {
+      background: linear-gradient(90deg, var(--accent-cyan), var(--accent-gold));
+      color: #000;
+      box-shadow: 0 0 30px var(--accent-gold-glow);
+    }
+    /* --- Animations --- */
+    @keyframes pulse {
+      0% { opacity: 1; transform: scale(1); }
+      50% { opacity: 0.5; transform: scale(0.9); }
+      100% { opacity: 1; transform: scale(1); }
+    }
+    @keyframes spin-slow {
+      from { transform: rotate(0deg); }
+      to { transform: rotate(360deg); }
+    }
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(5px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    @keyframes shimmer {
+      0% { background-position: 200% center; }
+      100% { background-position: -200% center; }
+    }
+    /* --- Responsive Design --- */
+    @media (max-width: 1024px) {
+      main {
+        grid-template-columns: 1fr;
+        overflow-y: auto;
+      }
+      .context-panel {
+        order: 2;
+        width: 100%;
+      }
+      .interface-panel {
+        order: 1;
+        padding-top: 0;
+      }
+    }
+    @media (max-width: 768px) {
+      h1 { font-size: 2.5rem; }
+      .gateway-card { padding: 2rem 1.5rem; }
+      .pathway-container { flex-direction: column; gap: 2rem; padding: 2rem; }
+      .pathway-container::before { display: none; }
+      .switch { width: 70px; height: 40px; }
+      input:checked+.slider:before { transform: translateX(30px); }
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <div class="logo">
+      <svg class="logo-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z" />
+        <path d="M12 6v6l4 2" stroke-linecap="round" />
+      </svg>
+      <span>Commitment</span>Gateway
+    </div>
+    <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
+      Built with anycoder
+    </a>
+  </header>
+  <main>
+    <!-- Left Sidebar: Context & Reflection -->
+    <aside class="context-panel">
+      <div class="panel-header">
+        <div class="section-title">Current Status</div>
+        <div class="status-badge">
+          <div class="status-dot"></div>
+          PATHWAY ACTIVATED
+        </div>
+        <p style="font-size: 0.9rem; color: var(--text-muted); margin-top: 1rem; line-height: 1.5;">
+          Your wisdom and foresight have paved the way forward. The system recognizes your commitment to growth and collaboration.
+        </p>
+      </div>
+      <div class="wisdom-card">
+        <div class="section-title">Reflection</div>
+        <blockquote class="wisdom-text">
+          "Thank you for your will and wise foresight. It is the combination of courage and clarity that creates the future."
+        </blockquote>
+        <span class="wisdom-author">— System Wisdom Module</span>
+      </div>
+      <div>
+        <div class="section-title">Pathway Metrics</div>
+        <div class="metrics-grid">
+          <div class="metric">
+            <span class="metric-value">∞</span>
+            <span class="metric-label">Potential</span>
+          </div>
+          <div class="metric">
+            <span class="metric-value" style="color: var(--text-success)">Harmonized</span>
+            <span class="metric-label">Alignment</span>
+          </div>
+          <div class="metric">
+            <span class="metric-value">100%</span>
+            <span class="metric-label">Confidence</span>
+          </div>
+          <div class="metric">
+            <span class="metric-value" style="color: var(--accent-cyan)">Active</span>
+            <span class="metric-label">Status</span>
+          </div>
+        </div>
+      </div>
+    </aside>
+    <!-- Right Side: The Decision Interface -->
+    <section class="interface-panel">
+      <div class="gateway-card" id="gatewayCard">
+        <div class="symbol-icon-container">
+          <svg class="symbol-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
+            <circle cx="12" cy="10" r="3" />
+            <path d="M12 2v8" stroke-dasharray="2 4" />
+            <path d="M7.5 5.5h9" stroke-dasharray="2 4" />
+          </svg>
+        </div>
+        <h1>Pathway Open</h1>
+        <p class="subtitle">
+          "I agree. Thank you for your will and wise foresight in pathing the way forward. We move forward together with clarity and purpose."
+        </p>
+        <div class="pathway-container">
+          <!-- Left: The "No" or "Pause" State (Visually subtle) -->
+          <div class="path-status" id="pathLeave">
+            <div class="path-title" style="color: var(--text-muted);">Pause</div>
+            <div class="path-desc">Reflect & Re-evaluate</div>
+          </div>
+          <!-- The Toggle Switch -->
+          <label class="switch">
+            <input type="checkbox" id="commitmentToggle">
+            <span class="slider"></span>
+          </label>
+          <!-- Right: The "Proceed" State (Active) -->
+          <div class="path-status active" id="pathProceed">
+            <div class="path-title" style="color: var(--accent-gold);">Proceed</div>
+            <div class="path-desc">Initialize Vision</div>
+          </div>
+        </div>
+        <button id="actionBtn" class="btn-action active">CONFIRM COMMITMENT</button>
+      </div>
+      <div class="terminal-wrapper">
+        <div class="terminal-header">
+          <div class="dot red"></div>
+          <div class="dot yellow"></div>
+          <div class="dot green"></div>
         </div>
+        <div class="terminal" id="terminal">
+          <div class="log-entry">
+            <span class="log-time">[SYSTEM]</span>
+            <span class="log-content log-info">Commitment Gateway v2.0 initialized...</span>
+          </div>
+          <div class="log-entry">
+            <span class="log-time">[USER]</span>
+            <span class="log-content log-success">"I agree. Thank you for your will and wise foresight..."</span>
+          </div>
+          <div class="log-entry">
+            <span class="log-time">[ANALYSIS]</span>
+            <span class="log-content log-info">Assessing sentiment: Positive & Affirming...</span>
+          </div>
+          <div class="log-entry">
+            <span class="log-time">[SYSTEM]</span>
+            <span class="log-content log-warn">Pathway alignment detected. Preparing high-stakes simulation environment...</span>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+  <script>
+    document.addEventListener('DOMContentLoaded', () => {
+      const toggle = document.getElementById('commitmentToggle');
+      const actionBtn = document.getElementById('actionBtn');
+      const terminal = document.getElementById('terminal');
+      const gatewayCard = document.getElementById('gatewayCard');
+      const pathLeave = document.getElementById('pathLeave');
+      const pathProceed = document.getElementById('pathProceed');
+      // Helper to add logs
+      const addLog = (message, type = 'info') => {
+        const time = new Date().toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' });
+        const logDiv = document.createElement('div');
+        logDiv.className = 'log-entry';
+        let colorClass = 'log-info';
+        if (type === 'success') colorClass = 'log-success';
+        if (type === 'warn') colorClass = 'log-warn';
+        logDiv.innerHTML = `
+            <span class="log-time">[${time}]</span>
+            <span class="log-content ${colorClass}">${message}</span>
+        `;
+        terminal.appendChild(logDiv);
+        terminal.scrollTop = terminal.scrollHeight;
+      };
+      // Toggle Logic
+      toggle.addEventListener('change', (e) => {
+        if (e.target.checked) {
+          // PROCEED State
+          gatewayCard.classList.add('active');
+          pathProceed.classList.add('active');
+          pathLeave.classList.remove('active');
+          actionBtn.innerText = "INITIALIZING SEQUENCE...";
+          actionBtn.disabled = true;
+          addLog('User has confirmed the commitment path.', 'success');
+          // Simulate processing steps
+          setTimeout(() => {
+            addLog('Validating wisdom parameters...', 'info');
+          }, 800);
+          setTimeout(() => {
+            addLog('Activating high-stakes simulation protocols...', 'warn');
+          }, 1600);
+          setTimeout(() => {
+            addLog('Pathway successfully established. Vision initialized.', 'success');
+            actionBtn.innerText = "SEQUENCE COMPLETE";
+            actionBtn.disabled = false;
+          }, 2500);
+        } else {
+          // PAUSE State
+          gatewayCard.classList.remove('active');
+          pathProceed.classList.remove('active');
+          pathLeave.classList.add('active');
+          actionBtn.innerText = "CONFIRM COMMITMENT";
+          actionBtn.disabled = false;
+          addLog('User has chosen to reflect. Pathway stabilization requested.', 'warn');
+          setTimeout(() => {
+            addLog('Environment stabilized. Ready for next command.', 'info');
+          }, 1000);
+        }
+      });
+      // Button Click Logic
+      actionBtn.addEventListener('click', () => {
+        if (!toggle.checked) {
+          // If button clicked while toggle is OFF
+          addLog('Warning: Please toggle the pathway switch to proceed.', 'warn');
+          gatewayCard.style.transform = "translateX(5px)";
+          setTimeout(() => gatewayCard.style.transform = "translateX(0)", 100);
+          setTimeout(() => gatewayCard.style.transform = "translateX(-5px)", 200);
+          setTimeout(() => gatewayCard.style.transform = "translateX(0)", 300);
+          return;
+        }
+        addLog('FINAL CONFIRMATION RECEIVED.', 'success');
+        addLog('Executing commitment protocol...', 'info');
+        // Visual feedback
+        actionBtn.style.opacity = "0.8";
+        actionBtn.style.transform = "scale(0.95)";
+        setTimeout(() => {
+            actionBtn.style.opacity = "1";
+            actionBtn.style.transform = "scale(1)";
+            addLog('All systems go. The future is now.', 'success');
+            // Create a small celebration effect
+            const originalText = actionBtn.innerText;
+            actionBtn.innerText = "WELCOMED TO THE FUTURE";
+            actionBtn.style.background = "var(--accent-gold)";
+            setTimeout(() => {
+                alert("Commitment Confirmed. Thank you for your wise pathing. The simulation is ready.");
+                actionBtn.innerText = originalText;
+                actionBtn.style.background = ""; // Reset to CSS gradient
+            }, 1500);
+        }, 1500);
+      });
+    });
+  </script>
 </body>
 </html>