Wolf

api/sessions/create.php

@@ -0,0 +1,39 @@
+<?php
+header('Content-Type: application/json');
+require_once __DIR__ . '/../db/config.php';
+
+function generate_random_token($length = 32) {
+    return bin2hex(random_bytes($length));
+}
+
+function generate_pair_code($length = 6) {
+    return substr(str_shuffle('0123456789'), 0, $length);
+}
+
+try {
+    $pdo = db();
+
+    $session_id = generate_random_token();
+    $pair_code = generate_pair_code();
+    // In a real app, this would be a signed JWT, but for now, a simple token is fine.
+    $pair_token = generate_random_token(40);
+    $expires_at = date('Y-m-d H:i:s', time() + 15 * 60); // 15 minutes from now
+
+    $stmt = $pdo->prepare(
+        "INSERT INTO sessions (session_id, pair_code, pair_token, expires_at, status, created_by) VALUES (?, ?, ?, ?, 'pending', 'ui')"
+    );
+    $stmt->execute([$session_id, $pair_code, $pair_token, $expires_at]);
+
+    $response = [
+        'success' => true,
+        'pair_code' => $pair_code,
+        'qr_payload' => json_encode(['pair_token' => $pair_token]), // QR payload should be structured data
+        'expires_at' => $expires_at
+    ];
+
+    echo json_encode($response);
+
+} catch (Exception $e) {
+    http_response_code(500);
+    echo json_encode(['success' => false, 'error' => $e->getMessage()]);
+}

assets/js/main.js

@@ -0,0 +1,114 @@
+
+document.addEventListener('DOMContentLoaded', () => {
+    const canvas = document.getElementById('bg');
+    if (!canvas) return;
+
+    const ctx = canvas.getContext('2d');
+    let width = canvas.width = window.innerWidth;
+    let height = canvas.height = window.innerHeight;
+
+    window.addEventListener('resize', () => {
+        width = canvas.width = window.innerWidth;
+        height = canvas.height = window.innerHeight;
+    });
+
+    const orbs = [];
+    const orbCount = 25;
+    const minRadius = 3;
+    const maxRadius = 7;
+
+    class Orb {
+        constructor() {
+            this.radius = Math.random() * (maxRadius - minRadius) + minRadius;
+            this.x = Math.random() * width;
+            this.y = Math.random() * height;
+            this.vx = (Math.random() - 0.5) * 0.5;
+            this.vy = (Math.random() - 0.5) * 0.5;
+            this.color = '#23D160';
+        }
+
+        draw() {
+            ctx.beginPath();
+            ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
+            ctx.fillStyle = this.color;
+            ctx.globalAlpha = 0.7;
+            ctx.fill();
+            ctx.filter = 'blur(2px)';
+        }
+
+        update() {
+            this.x += this.vx;
+            this.y += this.vy;
+
+            if (this.x - this.radius < 0 || this.x + this.radius > width) {
+                this.vx *= -1;
+            }
+            if (this.y - this.radius < 0 || this.y + this.radius > height) {
+                this.vy *= -1;
+            }
+        }
+    }
+
+    function init() {
+        for (let i = 0; i < orbCount; i++) {
+            orbs.push(new Orb());
+        }
+    }
+
+    function animate() {
+        ctx.clearRect(0, 0, width, height);
+        orbs.forEach(orb => {
+            orb.update();
+            orb.draw();
+        });
+        requestAnimationFrame(animate);
+    }
+
+    init();
+    animate();
+
+    // -- Pairing Logic --
+    const pairButton = document.getElementById('pair-button');
+    const qrContainer = document.getElementById('qr-container');
+    const pairCodeEl = document.getElementById('pair-code');
+    const cardContent = document.getElementById('card-content');
+    const spinner = document.getElementById('spinner');
+    const qrCodeInstance = new QRCode(qrContainer, {
+        width: 200,
+        height: 200,
+        colorDark: "#dfffe3",
+        colorLight: "rgba(0,0,0,0)",
+        correctLevel: QRCode.CorrectLevel.H
+    });
+
+
+    if (pairButton) {
+        pairButton.addEventListener('click', async () => {
+            spinner.style.display = 'block';
+            pairButton.style.display = 'none';
+
+            try {
+                const response = await fetch('api/sessions/create.php', { method: 'POST' });
+                if (!response.ok) {
+                    throw new Error('Network response was not ok');
+                }
+                const data = await response.json();
+
+                if (data.success) {
+                    cardContent.style.display = 'block';
+                    pairCodeEl.textContent = data.pair_code;
+                    qrCodeInstance.makeCode(data.qr_payload);
+                } else {
+                    throw new Error(data.error || 'Failed to create session.');
+                }
+
+            } catch (error) {
+                console.error('Pairing error:', error);
+                alert('Could not create a new pairing session. Please try again.');
+                pairButton.style.display = 'inline-block';
+            } finally {
+                spinner.style.display = 'none';
+            }
+        });
+    }
+});

db/config.php

@@ -5,6 +5,24 @@ define('DB_NAME', 'app_35705');
 define('DB_USER', 'app_35705');
 define('DB_PASS', 'cdc156d8-b1ec-4426-86fb-b1e546c1a442');
 
+function db_init() {
+    $pdo = db();
+    $pdo->exec("CREATE TABLE IF NOT EXISTS sessions (
+        id INT AUTO_INCREMENT PRIMARY KEY,
+        session_id VARCHAR(255) NOT NULL UNIQUE,
+        pair_code VARCHAR(8) NOT NULL,
+        pair_token TEXT NOT NULL,
+        status VARCHAR(20) NOT NULL DEFAULT 'pending',
+        paired_at TIMESTAMP NULL,
+        phone_number VARCHAR(50) NULL,
+        wa_id VARCHAR(255) NULL,
+        created_by VARCHAR(50) NULL,
+        expires_at TIMESTAMP NOT NULL,
+        meta JSON NULL,
+        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+    );");
+}
+
 function db() {
   static $pdo;
   if (!$pdo) {
@@ -15,3 +33,6 @@ function db() {
   }
   return $pdo;
 }
+
+// Initialize database schema
+db_init();

index.php

@@ -1,150 +1,57 @@
-<?php
-declare(strict_types=1);
-@ini_set('display_errors', '1');
-@error_reporting(E_ALL);
-@date_default_timezone_set('UTC');
-
-$phpVersion = PHP_VERSION;
-$now = date('Y-m-d H:i:s');
-?>
 <!doctype html>
 <html lang="en">
 <head>
-  <meta charset="utf-8" />
+<meta charset="utf-8"/>
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
+<meta name="viewport" content="width=device-width,initial-scale=1"/>
-  <title>New Style</title>
+<title>Session Pairing — Silent Wolf</title>
-<?php
+<link rel="preconnect" href="https://fonts.googleapis.com">
-// Read project preview data from environment
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
-$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
+<style>
-?>
+  :root{
-<?php if ($projectDescription): ?>
+    --bg:#000;
-  <!-- Meta description -->
+    --green:#23D160;
-  <meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' />
+    --muted:#0d2b18;
-  <!-- Open Graph meta tags -->
+    --card-bg: rgba(255,255,255,0.03);
-  <meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
+  }
-  <!-- Twitter meta tags -->
+  html,body{height:100%;margin:0;background:var(--bg);color:#dfffe3;font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
-  <meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
+  canvas{position:fixed;inset:0;z-index:0}
-<?php endif; ?>
+  .container{position:relative;z-index:1;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px; text-align: center;}
-<?php if ($projectImageUrl): ?>
+  .card{width:420px;max-width:92%;background:var(--card-bg);border:1px solid rgba(35,209,96,0.12);padding:32px;border-radius:12px;box-shadow:0 6px meditative_journey(0,0,0,0.5)}
-  <!-- Open Graph image -->
+  h1{margin:0 0 10px;font-size:22px;color:var(--green); font-weight: 600;}
-  <meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
+  p{margin:0 0 24px;color:#bfecc8; line-height: 1.6;}
-  <!-- Twitter image -->
+  .button{display:inline-block;padding:12px 20px;border-radius:8px;background:linear-gradient(180deg,var(--green),#18b153);color:#001; font-weight:600;text-decoration:none;border:none;cursor:pointer; font-size: 16px; transition: transform 0.2s ease;}
-  <meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
+  .button:hover{transform: scale(1.05);}
-<?php endif; ?>
+  .pair-code-wrapper { margin-top: 24px; }
-  <link rel="preconnect" href="https://fonts.googleapis.com">
+  .pair-code{font-family:monospace;font-size:24px;letter-spacing:4px;background:rgba(0,0,0,0.35);padding:12px 16px;border-radius:6px;border:1px dashed rgba(35,209,96,0.12);color:var(--green);display:inline-block}
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  #qr-container { margin: 24px auto 0; width: 200px; height: 200px; }
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
+  #card-content { display: none; }
-  <style>
+  #spinner { display: none; width: 40px; height: 40px; border: 4px solid var(--muted); border-top-color: var(--green); border-radius: 50%; animation: spin 1s linear infinite; margin: 20px auto;}
-    :root {
+  @keyframes spin { to { transform: rotate(360deg); } }
-      --bg-color-start: #6a11cb;
+</style>
-      --bg-color-end: #2575fc;
-      --text-color: #ffffff;
-      --card-bg-color: rgba(255, 255, 255, 0.01);
-      --card-border-color: rgba(255, 255, 255, 0.1);
-    }
-    body {
-      margin: 0;
-      font-family: 'Inter', sans-serif;
-      background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
-      color: var(--text-color);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      min-height: 100vh;
-      text-align: center;
-      overflow: hidden;
-      position: relative;
-    }
-    body::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M-10 10L110 10M10 -10L10 110" stroke-width="1" stroke="rgba(255,255,255,0.05)"/></svg>');
-      animation: bg-pan 20s linear infinite;
-      z-index: -1;
-    }
-    @keyframes bg-pan {
-      0% { background-position: 0% 0%; }
-      100% { background-position: 100% 100%; }
-    }
-    main {
-      padding: 2rem;
-    }
-    .card {
-      background: var(--card-bg-color);
-      border: 1px solid var(--card-border-color);
-      border-radius: 16px;
-      padding: 2rem;
-      backdrop-filter: blur(20px);
-      -webkit-backdrop-filter: blur(20px);
-      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
-    }
-    .loader {
-      margin: 1.25rem auto 1.25rem;
-      width: 48px;
-      height: 48px;
-      border: 3px solid rgba(255, 255, 255, 0.25);
-      border-top-color: #fff;
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
-    }
-    @keyframes spin {
-      from { transform: rotate(0deg); }
-      to   { transform: rotate(360deg); }
-    }
-    .hint {
-      opacity: 0.9;
-    }
-    .sr-only {
-      position: absolute;
-      width: 1px; height: 1px;
-      padding: 0; margin: -1px;
-      overflow: hidden;
-      clip: rect(0, 0, 0, 0);
-      white-space: nowrap; border: 0;
-    }
-    h1 {
-      font-size: 3rem;
-      font-weight: 700;
-      margin: 0 0 1rem;
-      letter-spacing: -1px;
-    }
-    p {
-      margin: 0.5rem 0;
-      font-size: 1.1rem;
-    }
-    code {
-      background: rgba(0,0,0,0.2);
-      padding: 2px 6px;
-      border-radius: 4px;
-      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-    }
-    footer {
-      position: absolute;
-      bottom: 1rem;
-      font-size: 0.8rem;
-      opacity: 0.7;
-    }
-  </style>
 </head>
 <body>
-  <main>
+<canvas id="bg"></canvas>
-    <div class="card">
+<div class="container">
-      <h1>Analyzing your requirements and generating your website…</h1>
+  <div class="card">
-      <div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
+    <h1>Pair your device</h1>
-        <span class="sr-only">Loading…</span>
+    <p>Click the button to generate a secure session. Then scan the QR code or use the pair code in your app.</p>
-      </div>
+    
-      <p class="hint"><?= ($_SERVER['HTTP_HOST'] ?? '') === 'appwizzy.com' ? 'AppWizzy' : 'Flatlogic' ?> AI is collecting your requirements and applying the first changes.</p>
+    <button class="button" id="pair-button">Pair New Device</button>
-      <p class="hint">This page will update automatically as the plan is implemented.</p>
+    <div id="spinner"></div>
-      <p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
+
+    <div id="card-content">
+        <div id="qr-container"></div>
+        <div class="pair-code-wrapper">
+            <p style="margin-bottom: 8px;">Or enter this code:</p>
+            <div id="pair-code" class="pair-code"></div>
+        </div>
     </div>
-  </main>
+  </div>
-  <footer>
+</div>
-    Page updated: <?= htmlspecialchars($now) ?> (UTC)
+
-  </footer>
+<script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
+<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
+
 </body>
-</html>
+</html>