F&Q

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>IZA - Memory & Prompt Saver</title>
  <style>
    /* Reset & Core Styling */
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background-color: #030712;
      color: #f9fafb;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }
    /* Top Navigation Header */
    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 48px;
      background-color: #0b0f19;
      border-bottom: 2px solid #10b981;
      position: sticky;
      top: 0;
      z-index: 1000;
    }
    .brand-logo {
      font-size: 26px;
      font-weight: 900;
      color: #ffffff;
      text-decoration: none;
    }
    .brand-logo span { color: #10b981; font-weight: 400; }
    .menu-container { position: relative; }
    .menu-trigger {
      background: #111827;
      color: #10b981;
      border: 1px solid #10b981;
      padding: 8px 16px;
      font-size: 18px;
      font-weight: bold;
      border-radius: 6px;
      cursor: pointer;
    }
    /* Main Container */
    main {
      flex: 1;
      max-width: 900px;
      width: 100%;
      margin: 0 auto;
      padding: 40px 24px 100px;
    }
    /* Prompt Capture Card */
    .prompt-box {
      background: #0b0f19;
      border: 1px solid #1f2937;
      border-top: 3px solid #10b981;
      border-radius: 12px;
      padding: 28px;
      margin-bottom: 36px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    }
    .prompt-box h2 {
      font-size: 20px;
      color: #10b981;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .prompt-input-group {
      display: flex;
      gap: 12px;
      margin-top: 14px;
    }
    .prompt-input {
      flex: 1;
      background: #030712;
      border: 1px solid #374151;
      color: #ffffff;
      padding: 14px 18px;
      border-radius: 8px;
      font-size: 15px;
      outline: none;
    }
    .prompt-input:focus {
      border-color: #10b981;
      box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
    }
    .btn-save {
      background: #10b981;
      color: #030712;
      font-weight: 800;
      padding: 14px 28px;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.2s ease;
    }
    .btn-save:hover { background: #34d399; }
    /* Command Shortcut Buttons */
    .command-pills {
      display: flex;
      gap: 10px;
      margin-top: 16px;
      flex-wrap: wrap;
    }
    .pill {
      background: #111827;
      color: #9ca3af;
      border: 1px solid #1f2937;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 12px;
      font-family: monospace;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .pill:hover {
      color: #10b981;
      border-color: #10b981;
    }
    /* Saved Feed & FAQ Section */
    .section-title {
      font-size: 22px;
      font-weight: 800;
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .memory-feed {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .memory-card {
      background: #0b0f19;
      border: 1px solid #1f2937;
      border-radius: 10px;
      padding: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .memory-tag {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #10b981;
      font-weight: 700;
      margin-bottom: 4px;
    }
    .memory-text {
      font-size: 15px;
      color: #e5e7eb;
    }
    .memory-time {
      font-size: 12px;
      color: #6b7280;
    }
    /* Sticky Footer (65px) */
    footer {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 65px;
      background-color: #000000;
      border-top: 1px solid #1f2937;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 48px;
      z-index: 1000;
    }
    .footer-brand { font-weight: 800; color: #ffffff; }
    .footer-brand span { color: #10b981; }
    .footer-nav a {
      color: #9ca3af;
      text-decoration: none;
      font-size: 14px;
      margin-left: 24px;
    }
    .footer-nav a:hover { color: #10b981; }
  </style>
</head>
<body>
  <!-- Top Header -->
  <header>
    <a href="#" class="brand-logo">IZA <span>is life</span></a>
    <div class="menu-container">
      <button class="menu-trigger" aria-label="Menu">|||</button>
    </div>
  </header>
  <!-- Main View -->
  <main>
    <!-- Quick Capture / Prompt Saver -->
    <div class="prompt-box">
      <h2><span>⚡</span> Save Prompt, Memory, or Note</h2>
      <p style="color: #9ca3af; font-size: 14px;">Instant client-side encrypted capture into your personal Moments feed.</p>
      
      <div class="prompt-input-group">
        <input type="text" id="promptInput" class="prompt-input" placeholder="e.g. Diyah's birthday - get a birthday card & special gift..." />
        <button class="btn-save" onclick="savePrompt()">Capture</button>
      </div>
      <!-- Quick Command Presets -->
      <div class="command-pills">
        <span class="pill" onclick="setPreset('iza capture &quot;Get birthday card &amp; flowers&quot;')">iza capture</span>
        <span class="pill" onclick="setPreset('iza secret-put &quot;Birthday Vault&quot; &quot;Card &amp; Gift notes&quot;')">iza secret-put</span>
        <span class="pill" onclick="setPreset('iza recall &quot;Diyah birthday&quot;')">iza recall</span>
        <span class="pill" onclick="setPreset('iza circle-add &quot;Diyah Faranda&quot; &quot;Partner&quot;')">iza circle-add</span>
      </div>
    </div>
    <!-- Live Saved Feed -->
    <div class="section-title">
      Saved Moments &amp; Presets
      <span style="font-size: 14px; color: #10b981; font-weight: normal;">Row-Level Security Active</span>
    </div>
    <div class="memory-feed" id="memoryFeed">
      <div class="memory-card">
        <div>
          <div class="memory-tag">Moment Capture</div>
          <div class="memory-text">Diyah's birthday — get a birthday card &amp; special gift</div>
        </div>
        <div class="memory-time">Just now</div>
      </div>
      <div class="memory-card">
        <div>
          <div class="memory-tag">Continuity Vault</div>
          <div class="memory-text">Encrypted Note: Birthday surprise ideas &amp; venue bookings</div>
        </div>
        <div class="memory-time">2 hrs ago</div>
      </div>
    </div>
  </main>
  <!-- Sticky Black 65px Footer -->
  <footer>
    <div class="footer-brand">IZA <span>is life</span></div>
    <nav class="footer-nav">
      <a href="#privacy">Privacy</a>
      <a href="#terms">Terms</a>
      <a href="#support">Support</a>
    </nav>
  </footer>
  <script>
    function setPreset(cmd) {
      document.getElementById('promptInput').value = cmd;
    }
    function savePrompt() {
      const input = document.getElementById('promptInput');
      const val = input.value.trim();
      if (!val) return;
      const feed = document.getElementById('memoryFeed');
      const card = document.createElement('div');
      card.className = 'memory-card';
      card.innerHTML = `
        <div>
          <div class="memory-tag">Captured Moment</div>
          <div class="memory-text">${val}</div>
        </div>
        <div class="memory-time">Just now</div>
      `;
      feed.prepend(card);
      input.value = '';
    }
  </script>
</body>
</html>