v4

api/log_session.php

@@ -0,0 +1,45 @@
+<?php
+declare(strict_types=1);
+@ini_set('display_errors', '1');
+@error_reporting(E_ALL);
+
+require_once __DIR__ . '/../includes/db.php';
+
+header('Content-Type: application/json');
+
+$response = ['success' => false, 'message' => '', 'error' => ''];
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $input = file_get_contents('php://input');
+    $data = json_decode($input, true);
+
+    $patternName = $data['pattern_name'] ?? null;
+    $intensity = $data['intensity'] ?? null;
+    $durationSeconds = $data['duration_seconds'] ?? null;
+
+    if ($patternName === null || $intensity === null || $durationSeconds === null) {
+        $response['error'] = 'Missing required parameters.';
+    } else {
+        try {
+            $pdo = db();
+            $stmt = $pdo->prepare(
+                'INSERT INTO massage_sessions (pattern_name, intensity, duration_seconds) VALUES (:pattern_name, :intensity, :duration_seconds)'
+            );
+            $stmt->bindParam(':pattern_name', $patternName);
+            $stmt->bindParam(':intensity', $intensity, PDO::PARAM_STR); // Use PARAM_STR for float to avoid precision issues
+            $stmt->bindParam(':duration_seconds', $durationSeconds, PDO::PARAM_INT);
+            $stmt->execute();
+
+            $response['success'] = true;
+            $response['message'] = 'Session logged successfully.';
+        } catch (PDOException $e) {
+            $response['error'] = 'Database error: ' . $e->getMessage();
+        } catch (Exception $e) {
+            $response['error'] = 'Server error: ' . $e->getMessage();
+        }
+    }
+} else {
+    $response['error'] = 'Invalid request method.';
+}
+
+echo json_encode($response);

db/config.php

@@ -1,17 +1,13 @@
 <?php
-// Generated by setup_mariadb_project.sh — edit as needed.
-define('DB_HOST', '127.0.0.1');
-define('DB_NAME', 'app_38497');
-define('DB_USER', 'app_38497');
-define('DB_PASS', 'f136384b-ba47-4035-beb4-5038b71f0857');
+// db/config.php
+declare(strict_types=1);
 
-function db() {
-  static $pdo;
-  if (!$pdo) {
-    $pdo = new PDO('mysql:host='.DB_HOST.';dbname='.DB_NAME.';charset=utf8mb4', DB_USER, DB_PASS, [
-      PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
-      PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
-    ]);
-  }
-  return $pdo;
-}
+// Database configuration sourced from environment variables, managed by the platform.
+// DO NOT CHANGE THESE KEYS OR HARDCODE VALUES.
+return [
+    'DB_HOST' => $_SERVER['DB_HOST'] ?? '127.0.0.1',
+    'DB_PORT' => $_SERVER['DB_PORT'] ?? '3306',
+    'DB_NAME' => $_SERVER['DB_NAME'] ?? 'app_38497',
+    'DB_USER' => $_SERVER['DB_USER'] ?? 'app_38497',
+    'DB_PASS' => $_SERVER['DB_PASS'] ?? 'f136384b-ba47-4035-beb4-5038b71f0857',
+];

db/migrate.php

@@ -0,0 +1,27 @@
+<?php
+declare(strict_types=1);
+@ini_set('display_errors', '1');
+@error_reporting(E_ALL);
+
+require_once __DIR__ . '/../includes/db.php';
+
+echo "Starting database migration...\n";
+
+try {
+    $pdo = db();
+    $sql = file_get_contents(__DIR__ . '/migrations/001_create_sessions.sql');
+
+    if ($sql === false) {
+        throw new Exception('Could not read migration file.');
+    }
+
+    $pdo->exec($sql);
+    echo "Migration 001_create_sessions.sql applied successfully.\n";
+
+} catch (PDOException $e) {
+    echo "Database migration failed: " . $e->getMessage() . "\n";
+} catch (Exception $e) {
+    echo "Error: " . $e->getMessage() . "\n";
+}
+
+echo "Database migration finished.\n";

db/migrations/001_create_sessions.sql

@@ -0,0 +1,8 @@
+-- Migration: Create massage_sessions table
+CREATE TABLE IF NOT EXISTS massage_sessions (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    pattern_name VARCHAR(50) NOT NULL,
+    intensity FLOAT NOT NULL,
+    duration_seconds INT NOT NULL,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);

includes/db.php

@@ -0,0 +1,28 @@
+<?php
+// includes/db.php
+declare(strict_types=1);
+
+require_once __DIR__ . '/../db/config.php';
+
+function db(): PDO
+{
+    static $pdo;
+
+    if ($pdo === null) {
+        $config = require __DIR__ . '/../db/config.php';
+        $dsn = sprintf(
+            'mysql:host=%s;port=%s;dbname=%s;charset=utf8mb4',
+            $config['DB_HOST'],
+            $config['DB_PORT'],
+            $config['DB_NAME']
+        );
+
+        $pdo = new PDO($dsn, $config['DB_USER'], $config['DB_PASS'], [
+            PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
+            PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
+            PDO::ATTR_EMULATE_PREPARES => false, // Disable emulation for security
+        ]);
+    }
+
+    return $pdo;
+}

index.php

@@ -4,6 +4,8 @@ declare(strict_types=1);
 @error_reporting(E_ALL);
 @date_default_timezone_set('UTC');
 
+require_once __DIR__ . '/includes/db.php'; // Include the database helper
+
 $phpVersion = PHP_VERSION;
 $now = date('Y-m-d H:i:s');
 ?>
@@ -12,7 +14,7 @@ $now = date('Y-m-d H:i:s');
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>New Style</title>
+  <title>Gamepad Haptic Simulator</title>
 <?php
 // Read project preview data from environment
 $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
@@ -37,114 +39,381 @@ $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
   <style>
     :root {
-      --bg-color-start: #6a11cb;
-      --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);
+      --bg-color: #0F1115;
+      --surface-color: #1C1F26;
+      --accent-color: #00D1FF; /* Cyan */
+      --text-color: #E4E7EB;
+      --border-color: #2D333D;
+      --border-radius: 4px;
+      --spacing: 16px;
     }
     body {
       margin: 0;
       font-family: 'Inter', sans-serif;
-      background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
+      font-size: 14px;
+      background-color: var(--bg-color);
       color: var(--text-color);
       display: flex;
       justify-content: center;
-      align-items: center;
+      align-items: flex-start; /* Align to top */
       min-height: 100vh;
-      text-align: center;
-      overflow: hidden;
-      position: relative;
+      padding: var(--spacing);
+      box-sizing: border-box;
     }
-    body::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
+    .container {
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: var(--spacing);
+      max-width: 800px;
       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;
+    @media (min-width: 768px) {
+      .container {
+        grid-template-columns: 1fr 1fr;
+      }
+      .full-width {
+        grid-column: 1 / -1;
+      }
     }
     .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;
+      background-color: var(--surface-color);
+      border: 1px solid var(--border-color);
+      border-radius: var(--border-radius);
+      padding: var(--spacing);
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     }
     h1 {
-      font-size: 3rem;
+      font-size: 18px;
       font-weight: 700;
-      margin: 0 0 1rem;
-      letter-spacing: -1px;
+      margin-top: 0;
+      margin-bottom: var(--spacing);
+      color: var(--accent-color);
     }
-    p {
-      margin: 0.5rem 0;
-      font-size: 1.1rem;
+    h2 {
+      font-size: 16px;
+      font-weight: 700;
+      margin-top: 0;
+      margin-bottom: calc(var(--spacing) / 2);
     }
-    code {
-      background: rgba(0,0,0,0.2);
-      padding: 2px 6px;
-      border-radius: 4px;
-      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    label {
+      display: block;
+      margin-bottom: 8px;
+      color: var(--text-color);
+    }
+    select, input[type="range"], button {
+      width: 100%;
+      padding: 8px 12px;
+      margin-bottom: var(--spacing);
+      background-color: var(--bg-color);
+      border: 1px solid var(--border-color);
+      color: var(--text-color);
+      border-radius: var(--border-radius);
+      box-sizing: border-box;
+    }
+    input[type="range"] {
+      -webkit-appearance: none;
+      height: 4px;
+      padding: 0;
+    }
+    input[type="range"]::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+      background: var(--accent-color);
+      cursor: pointer;
+      margin-top: -6px;
+    }
+    button {
+      background-color: var(--accent-color);
+      color: var(--bg-color);
+      font-weight: 700;
+      cursor: pointer;
+      transition: background-color 0.2s ease;
+    }
+    button:hover:not(:disabled) {
+      background-color: #00aacc; /* Darker cyan */
+    }
+    button:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+    #gamepadStatus {
+      color: #FFD700; /* Gold for warnings/info */
+    }
+    .status-connected {
+      color: #00FF00; /* Green */
+    }
+    .status-disconnected {
+      color: #FF0000; /* Red */
+    }
+    .flex-group {
+        display: flex;
+        gap: var(--spacing);
+        align-items: center;
+        margin-bottom: var(--spacing);
+    }
+    .flex-group > div {
+        flex: 1;
     }
     footer {
-      position: absolute;
-      bottom: 1rem;
-      font-size: 0.8rem;
-      opacity: 0.7;
+        width: 100%;
+        text-align: center;
+        margin-top: var(--spacing);
+        font-size: 0.8rem;
+        opacity: 0.7;
     }
   </style>
 </head>
 <body>
-  <main>
-    <div class="card">
-      <h1>Analyzing your requirements and generating your website…</h1>
-      <div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
-        <span class="sr-only">Loading…</span>
-      </div>
-      <p class="hint"><?= ($_SERVER['HTTP_HOST'] ?? '') === 'appwizzy.com' ? 'AppWizzy' : 'Flatlogic' ?> AI is collecting your requirements and applying the first changes.</p>
-      <p class="hint">This page will update automatically as the plan is implemented.</p>
-      <p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
+  <div class="container">
+    <div class="card full-width">
+      <h1>Gamepad Haptic Simulator</h1>
     </div>
-  </main>
+
+    <div class="card">
+      <h2>Connection Status</h2>
+      <p>Gamepad: <span id="gamepadStatus">Disconnected</span></p>
+      <p id="gamepadIdDisplay"></p>
+    </div>
+
+    <div class="card">
+      <h2>Massage Configurator</h2>
+      <label for="patternSelect">Pattern:</label>
+      <select id="patternSelect">
+        <option value="knead">Knead</option>
+        <option value="tap">Tap</option>
+        <option value="wave">Wave</option>
+        <option value="sports_recovery">Sports Recovery</option>
+      </select>
+
+      <div class="flex-group">
+        <div>
+          <label for="intensityRange">Intensity:</label>
+          <input type="range" id="intensityRange" min="0" max="1" step="0.05" value="0.5">
+          <span id="intensityValue">0.5</span>
+        </div>
+        <div>
+          <label for="speedRange">Speed:</label>
+          <input type="range" id="speedRange" min="0.1" max="2" step="0.1" value="1">
+          <span id="speedValue">1x</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="card full-width">
+      <h2>Active Session Controller</h2>
+      <button id="startButton" disabled>Start Massage</button>
+      <button id="stopButton" disabled>Stop Massage</button>
+    </div>
+  </div>
+
   <footer>
-    Page updated: <?= htmlspecialchars($now) ?> (UTC)
+    <p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
+    <p>Page updated: <?= htmlspecialchars($now) ?> (UTC)</p>
   </footer>
+
+  <script>
+    const gamepadStatus = document.getElementById('gamepadStatus');
+    const gamepadIdDisplay = document.getElementById('gamepadIdDisplay');
+    const patternSelect = document.getElementById('patternSelect');
+    const intensityRange = document.getElementById('intensityRange');
+    const intensityValue = document.getElementById('intensityValue');
+    const speedRange = document.getElementById('speedRange');
+    const speedValue = document.getElementById('speedValue');
+    const startButton = document.getElementById('startButton');
+    const stopButton = document.getElementById('stopButton');
+
+
+    let gamepad = null;
+    let vibrationInterval = null;
+
+    let currentPattern = '';
+
+    // Gamepad API
+    window.addEventListener('gamepadconnected', (e) => {
+      console.log('Gamepad connected at index %d: %s. %d buttons, %d axes.',
+        e.gamepad.index, e.gamepad.id,
+        e.gamepad.buttons.length, e.gamepad.axes.length);
+      gamepad = e.gamepad;
+      updateGamepadStatus();
+    });
+
+    window.addEventListener('gamepaddisconnected', (e) => {
+      console.log('Gamepad disconnected from index %d: %s',
+        e.gamepad.index, e.gamepad.id);
+      if (gamepad && gamepad.index === e.gamepad.index) {
+        gamepad = null;
+      }
+      updateGamepadStatus();
+      stopMassage();
+    });
+
+    // Polling for gamepads (required for some browsers/situations)
+    setInterval(() => {
+      const gamepads = navigator.getGamepads();
+      let found = false;
+      for (let i = 0; i < gamepads.length; i++) {
+        if (gamepads[i]) {
+          if (!gamepad) {
+            gamepad = gamepads[i];
+            updateGamepadStatus();
+          }
+          found = true;
+          break;
+        }
+      }
+      if (!found && gamepad) {
+        gamepad = null;
+        updateGamepadStatus();
+      }
+    }, 1000);
+
+    function updateGamepadStatus() {
+      if (gamepad) {
+        gamepadStatus.textContent = 'Connected';
+        gamepadStatus.className = 'status-connected';
+        gamepadIdDisplay.textContent = `ID: ${gamepad.id}`;
+        startButton.disabled = false;
+      } else {
+        gamepadStatus.textContent = 'Disconnected (Press a button!)';
+        gamepadStatus.className = 'status-disconnected';
+        gamepadIdDisplay.textContent = 'Ensure your controller is plugged in and press any button to activate.';
+        startButton.disabled = true;
+      }
+    }
+
+    // Haptic Patterns
+    const patterns = {
+      knead: (intensity, speed) => [
+        { duration: 200 * speed, weakMagnitude: intensity * 0.5, strongMagnitude: intensity },
+        { duration: 200 * speed, weakMagnitude: intensity, strongMagnitude: intensity * 0.5 }
+      ],
+      tap: (intensity, speed) => [
+        { duration: 100 * speed, weakMagnitude: intensity, strongMagnitude: intensity },
+        { duration: 100 * speed, weakMagnitude: 0, strongMagnitude: 0 }
+      ],
+      wave: (intensity, speed) => [
+        { duration: 400 * speed, weakMagnitude: intensity * 0.2, strongMagnitude: intensity },
+        { duration: 400 * speed, weakMagnitude: intensity, strongMagnitude: intensity * 0.2 }
+      ],
+      sports_recovery: (intensity, speed) => [
+        { duration: 150 * speed, weakMagnitude: intensity, strongMagnitude: intensity },
+        { duration: 50 * speed, weakMagnitude: 0, strongMagnitude: 0 },
+        { duration: 150 * speed, weakMagnitude: intensity, strongMagnitude: intensity },
+        { duration: 150 * speed, weakMagnitude: 0.2, strongMagnitude: 0.2 }
+      ]
+    };
+
+    let patternStep = 0;
+
+    function playHapticPattern() {
+      // Re-fetch gamepad to get the most up-to-date object
+      const gamepads = navigator.getGamepads();
+      const gp = gamepads[gamepad?.index];
+      
+      if (gp && gp.vibrationActuator) {
+        const selectedPattern = patternSelect.value;
+        const intensity = parseFloat(intensityRange.value);
+        const speed = parseFloat(speedRange.value);
+
+        const steps = patterns[selectedPattern](intensity, speed);
+        const step = steps[patternStep % steps.length];
+
+        gp.vibrationActuator.playEffect('dual-rumble', {
+          startDelay: 0,
+          duration: step.duration,
+          weakMagnitude: step.weakMagnitude,
+          strongMagnitude: step.strongMagnitude
+        });
+
+        patternStep++;
+        
+        // Schedule next step
+        vibrationInterval = setTimeout(playHapticPattern, step.duration);
+      }
+    }
+
+    function startMassage() {
+      if (!gamepad) {
+        // Try to get gamepad from navigator if not detected by event
+        const gamepads = navigator.getGamepads();
+        gamepad = Array.from(gamepads).find(g => g !== null);
+        if (!gamepad) {
+            alert('Please connect a gamepad first and press any button!');
+            return;
+        }
+      }
+
+      startButton.disabled = true;
+      stopButton.disabled = false;
+      patternSelect.disabled = true;
+      intensityRange.disabled = true;
+      speedRange.disabled = true;
+
+      patternStep = 0;
+
+      // Start the haptic pattern loop
+      playHapticPattern();
+
+      logSession(patternSelect.value, parseFloat(intensityRange.value), 0); // Log with 0 duration for manual sessions
+    }
+
+    function stopMassage() {
+      if (vibrationInterval) {
+        clearTimeout(vibrationInterval);
+        vibrationInterval = null;
+      }
+      // Stop vibration
+      const gamepads = navigator.getGamepads();
+      const gp = gamepads[gamepad?.index];
+      if (gp && gp.vibrationActuator) {
+        gp.vibrationActuator.reset();
+      }
+
+      startButton.disabled = false;
+      stopButton.disabled = true;
+      patternSelect.disabled = false;
+      intensityRange.disabled = false;
+      speedRange.disabled = false;
+    }
+
+
+
+    // Event Listeners
+    startButton.addEventListener('click', startMassage);
+    stopButton.addEventListener('click', stopMassage);
+
+    intensityRange.addEventListener('input', () => {
+      intensityValue.textContent = parseFloat(intensityRange.value).toFixed(2);
+    });
+
+    speedRange.addEventListener('input', () => {
+      speedValue.textContent = parseFloat(speedRange.value).toFixed(1) + 'x';
+    });
+
+    // Log session to the database
+    async function logSession(patternName, intensity, durationSeconds) {
+      try {
+        const response = await fetch('api/log_session.php', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({ pattern_name: patternName, intensity: intensity, duration_seconds: durationSeconds }),
+        });
+        const result = await response.json();
+        if (result.success) {
+          console.log('Session logged successfully:', result.message);
+        } else {
+          console.error('Failed to log session:', result.error);
+        }
+      } catch (error) {
+        console.error('Error logging session:', error);
+      }
+    }
+
+    updateGamepadStatus(); // Initial status check
+  </script>
 </body>
 </html>