Spaces:

matthewspring
/

anycoder-711d151f

Running

File size: 21,727 Bytes

<!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>