v.1

api/config.php

@@ -0,0 +1,6 @@
+<?php
+// api/config.php
+
+// IMPORTANT: Replace with your actual Anthropic API key.
+// You can get a key from https://console.anthropic.com/
+define('ANTHROPIC_API_KEY', 'YOUR_ANTHROPIC_API_KEY_HERE');

api/generate_personas.php

@@ -0,0 +1,99 @@
+<?php
+// api/generate_personas.php
+
+require_once __DIR__ . '/config.php';
+
+header('Content-Type: application/json');
+
+if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
+    http_response_code(405);
+    echo json_encode(['error' => 'Method Not Allowed']);
+    exit;
+}
+
+$input = json_decode(file_get_contents('php://input'), true);
+$audience = $input['audience'] ?? '';
+$idea = $input['idea'] ?? '';
+
+if (empty($audience) || empty($idea)) {
+    http_response_code(400);
+    echo json_encode(['error' => 'Audience and Idea are required.']);
+    exit;
+}
+
+if (ANTHROPIC_API_KEY === 'YOUR_ANTHROPIC_API_KEY_HERE') {
+    http_response_code(500);
+    echo json_encode(['error' => 'Anthropic API key is not configured. Please add it to api/config.php.']);
+    exit;
+}
+
+$prompt = "Based on the following business idea and target audience in Egypt/MENA, create 3 distinct user personas.
+
+Target Audience: "$audience"
+Business Idea: "$idea"
+
+For each persona, provide:
+- A culturally relevant Egyptian/MENA name.
+- Age and a realistic occupation in the Egyptian market.
+- 2-3 key personality traits.
+- Main concerns and priorities relevant to the Egyptian/MENA context.
+- A typical communication style.
+
+Please return the response as a JSON object with a single key 'personas' which is an array of the 3 persona objects. Do not include any other text or explanation outside of the JSON object.
+Each persona object in the array should have the following keys: 'name', 'age', 'occupation', 'traits', 'concerns', 'style'.";
+
+$data = [
+    'model' => 'claude-3-sonnet-20240229',
+    'max_tokens' => 2048,
+    'messages' => [
+        [
+            'role' => 'user',
+            'content' => $prompt,
+        ],
+    ],
+];
+
+$ch = curl_init('https://api.anthropic.com/v1/messages');
+curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
+curl_setopt($ch, CURLOPT_POST, true);
+curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));
+curl_setopt($ch, CURLOPT_HTTPHEADER, [
+    'x-api-key: ' . ANTHROPIC_API_KEY,
+    'anthropic-version: 2023-06-01',
+    'content-type: application/json',
+]);
+
+$response = curl_exec($ch);
+$http_code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
+curl_close($ch);
+
+if ($http_code !== 200) {
+    http_response_code(502);
+    // Forwarding a sanitized error is better for debugging without exposing too much.
+    echo json_encode(['error' => 'Failed to communicate with AI service.', 'details' => json_decode($response)]);
+    exit;
+}
+
+$result = json_decode($response, true);
+
+// The response from Claude is inside content block.
+$content_json = $result['content'][0]['text'] ?? null;
+
+if (!$content_json) {
+    http_response_code(500);
+    echo json_encode(['error' => 'Invalid response format from AI service.']);
+    exit;
+}
+
+// The actual persona data is expected to be a JSON string.
+// We need to decode it one more time.
+$personas_data = json_decode($content_json, true);
+
+if (json_last_error() !== JSON_ERROR_NONE || !isset($personas_data['personas'])) {
+    // Fallback if the AI didn't return perfect JSON
+    http_response_code(500);
+    echo json_encode(['error' => 'Could not parse personas from AI response.', 'raw_content' => $content_json]);
+    exit;
+}
+
+echo json_encode($personas_data);

assets/css/custom.css

@@ -0,0 +1,110 @@
+/* Screen Test - Custom Styles */
+
+body {
+    font-family: 'Inter', sans-serif;
+    background: linear-gradient(to bottom, #F9FAFB, #F3F4F6);
+}
+
+.main-title {
+    font-weight: 800; /* Extra Bold */
+    color: #111827; /* gray-900 */
+}
+
+.form-card {
+    width: 100%;
+    max-width: 700px;
+    background-color: rgba(255, 255, 255, 0.7);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+.form-control-lg {
+    padding: 1rem 1.25rem;
+    font-size: 1.1rem;
+    background-color: #F9FAFB;
+    border: 1px solid #E5E7EB;
+}
+
+.form-control-lg:focus {
+    background-color: #fff;
+    border-color: #A855F7;
+    box-shadow: 0 0 0 0.25rem rgba(168, 85, 247, 0.2);
+}
+
+.primary-gradient-btn {
+    background: linear-gradient(45deg, #D946EF, #A855F7, #6366F1);
+    border: none;
+    padding: 0.8rem 1.5rem;
+    transition: all 0.3s ease;
+}
+
+.primary-gradient-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
+}
+
+/* Shadow Utilities */
+.shadow-xl {
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}
+
+.shadow-2xl {
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+}
+
+/* Rounded Utilities */
+.rounded-4 {
+    border-radius: 1rem !important;
+}
+
+.rounded-5 {
+    border-radius: 1.5rem !important;
+}
+
+/* Persona Card Styles */
+.persona-card {
+    color: #fff;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.persona-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+}
+
+.persona-card .card-title {
+    color: #fff;
+}
+
+.persona-card .card-subtitle {
+    color: rgba(255, 255, 255, 0.8);
+}
+
+.persona-card h6 {
+    color: rgba(255, 255, 255, 0.9);
+    text-transform: uppercase;
+    font-size: 0.8rem;
+    letter-spacing: 0.5px;
+}
+
+.persona-card p {
+    color: rgba(255, 255, 255, 0.95);
+}
+
+/* Persona Gradients */
+.persona-gradient-1 {
+    background: linear-gradient(45deg, #22d3ee, #06b6d4); /* Cyan */
+}
+
+.persona-gradient-2 {
+    background: linear-gradient(45deg, #34d399, #059669); /* Emerald */
+}
+
+.persona-gradient-3 {
+    background: linear-gradient(45deg, #a78bfa, #7c3aed); /* Violet */
+}
+
+.text-white-75 {
+    color: rgba(255, 255, 255, 0.75) !important;
+}

assets/js/main.js

@@ -0,0 +1,96 @@
+// Screen Test - Main JS
+
+document.addEventListener('DOMContentLoaded', function () {
+    const form = document.getElementById('idea-form');
+    const submitButton = form.querySelector('button[type="submit"]');
+    const personasContainer = document.getElementById('personas-container');
+    const personasGrid = document.getElementById('personas-grid');
+
+    if (form) {
+        form.addEventListener('submit', function (e) {
+            e.preventDefault();
+            
+            const audience = document.getElementById('target-audience').value;
+            const idea = document.getElementById('business-idea').value;
+
+            if (!audience || !idea) {
+                alert('Please fill out both Target Audience and Business Idea fields.');
+                return;
+            }
+
+            // --- Loading State ---
+            const originalButtonText = submitButton.innerHTML;
+            submitButton.disabled = true;
+            submitButton.innerHTML = `
+                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+                Generating...
+            `;
+            personasContainer.classList.add('d-none');
+            personasGrid.innerHTML = '';
+
+
+            // --- API Call ---
+            fetch('api/generate_personas.php', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ audience, idea }),
+            })
+            .then(response => {
+                if (!response.ok) {
+                    return response.json().then(err => { throw new Error(err.error || 'An unknown error occurred.') });
+                }
+                return response.json();
+            })
+            .then(data => {
+                // --- Render Personas ---
+                if (data.personas && data.personas.length > 0) {
+                    renderPersonas(data.personas);
+                    personasContainer.classList.remove('d-none');
+                    setTimeout(() => {
+                        personasContainer.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                    }, 100);
+                } else {
+                    throw new Error('The AI did not return any personas. Please try refining your inputs.');
+                }
+            })
+            .catch(error => {
+                console.error('Error:', error);
+                alert(`An error occurred: ${error.message}`);
+            })
+            .finally(() => {
+                // --- Reset Button ---
+                submitButton.disabled = false;
+                submitButton.innerHTML = originalButtonText;
+            });
+        });
+    }
+
+    function renderPersonas(personas) {
+        const personaGradients = [
+            'persona-gradient-1',
+            'persona-gradient-2',
+            'persona-gradient-3'
+        ];
+
+        personasGrid.innerHTML = personas.map((persona, index) => `
+            <div class="col-lg-4 col-md-6">
+                <div class="card persona-card h-100 rounded-4 shadow-lg border-0 ${personaGradients[index % 3]}">
+                    <div class="card-body p-4">
+                        <h3 class="card-title fw-bold">${persona.name}</h3>
+                        <p class="card-subtitle mb-2 text-white-75">${persona.age}, ${persona.occupation}</p>
+                        <div class="mt-4">
+                            <h6 class="fw-semibold">Traits:</h6>
+                            <p>${persona.traits}</p>
+                            <h6 class="fw-semibold">Concerns:</h6>
+                            <p>${persona.concerns}</p>
+                            <h6 class="fw-semibold">Style:</h6>
+                            <p>${persona.style}</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `).join('');
+    }
+});

index.php

@@ -1,150 +1,82 @@
-<?php
+<!DOCTYPE html>
-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.0">
-  <title>New Style</title>
+    
-<?php
+    <!-- SEO & Meta Tags -->
-// Read project preview data from environment
+    <title>Screen Test</title>
-$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
+    <meta name="description" content="AI-powered validation for your business ideas in the Egyptian/MENA market.">
-$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
+    <meta name="keywords" content="AI business validation, Egypt entrepreneurs, MENA market research, AI personas, startup ideas Egypt, customer feedback simulator, business idea testing, Arabic AI chat, market validation tool, Egyptian consumers, MENA startups, Built with Flatlogic Generator">
-?>
+    
-<?php if ($projectDescription): ?>
+    <!-- Social Media Meta Tags -->
-  <!-- Meta description -->
+    <meta property="og:title" content="Screen Test">
-  <meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' />
+    <meta property="og:description" content="AI-powered validation for your business ideas in the Egyptian/MENA market.">
-  <!-- Open Graph meta tags -->
+    <meta property="og:image" content="<?php echo htmlspecialchars($_SERVER['PROJECT_IMAGE_URL'] ?? ''); ?>">
-  <meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
+    <meta name="twitter:card" content="summary_large_image">
-  <!-- Twitter meta tags -->
+    <meta name="twitter:image" content="<?php echo htmlspecialchars($_SERVER['PROJECT_IMAGE_URL'] ?? ''); ?>">
-  <meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
+
-<?php endif; ?>
+    <!-- Bootstrap CSS -->
-<?php if ($projectImageUrl): ?>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
-  <!-- Open Graph image -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
-  <meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
+
-  <!-- Twitter image -->
+    <!-- Google Fonts -->
-  <meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
-<?php endif; ?>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
-  <style>
+
-    :root {
+    <!-- Custom CSS -->
-      --bg-color-start: #6a11cb;
+    <link rel="stylesheet" href="assets/css/custom.css">
-      --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>
+
-    <div class="card">
+    <main class="d-flex flex-column align-items-center justify-content-center min-vh-100 p-3 p-md-4">
-      <h1>Analyzing your requirements and generating your website…</h1>
+        
-      <div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
+        <div class="text-center mb-4">
-        <span class="sr-only">Loading…</span>
+            <h1 class="display-4 fw-bolder main-title">Screen Test</h1>
+            <p class="lead text-muted">Validate your business idea with AI-powered personas for the Egyptian market.</p>
         </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>
+        <div class="card form-card rounded-5 shadow-xl border-0">
-      <p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
+            <div class="card-body p-4 p-lg-5">
+                
+                <form id="idea-form">
+                    <div class="mb-4">
+                        <label for="target-audience" class="form-label fs-5 fw-semibold">Target Audience</label>
+                        <textarea class="form-control form-control-lg rounded-4" id="target-audience" rows="4" placeholder="e.g., Young professionals in Cairo, aged 25-35, interested in sustainable products..."></textarea>
                     </div>
-  </main>
+
-  <footer>
+                    <div class="mb-4">
-    Page updated: <?= htmlspecialchars($now) ?> (UTC)
+                        <label for="business-idea" class="form-label fs-5 fw-semibold">Business Idea</label>
+                        <textarea class="form-control form-control-lg rounded-4" id="business-idea" rows="6" placeholder="e.g., A subscription box for locally-sourced organic snacks, delivered monthly..."></textarea>
+                    </div>
+                    
+                    <div class="d-grid mt-5">
+                        <button type="submit" class="btn btn-primary btn-lg rounded-4 fw-bold primary-gradient-btn shadow-lg">
+                            Generate Test Personas <i class="bi bi-arrow-right-circle ms-2"></i>
+                        </button>
+                    </div>
+                </form>
+
+            </div>
+        </div>
+
+        <div id="personas-container" class="container mt-5 d-none">
+            <h2 class="text-center mb-4 fw-bolder">Generated Personas</h2>
+            <div id="personas-grid" class="row g-4">
+                <!-- Persona cards will be injected here by JavaScript -->
+            </div>
+        </div>
+        
+        <footer class="mt-5 text-center text-muted">
+            <p>Built with <a href="https://flatlogic.com" class="text-decoration-none">Flatlogic</a></p>
         </footer>
+
+    </main>
+
+    <!-- Bootstrap JS -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+    <!-- Custom JS -->
+    <script src="assets/js/main.js"></script>
 </body>
 </html>