82 lines
4.3 KiB
PHP
82 lines
4.3 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<!-- SEO & Meta Tags -->
|
|
<title>Screen Test</title>
|
|
<meta name="description" content="AI-powered validation for your business ideas in the Egyptian/MENA market.">
|
|
<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">
|
|
|
|
<!-- Social Media Meta Tags -->
|
|
<meta property="og:title" content="Screen Test">
|
|
<meta property="og:description" content="AI-powered validation for your business ideas in the Egyptian/MENA market.">
|
|
<meta property="og:image" content="<?php echo htmlspecialchars($_SERVER['PROJECT_IMAGE_URL'] ?? ''); ?>">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:image" content="<?php echo htmlspecialchars($_SERVER['PROJECT_IMAGE_URL'] ?? ''); ?>">
|
|
|
|
<!-- Bootstrap CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
|
|
|
<!-- Google Fonts -->
|
|
<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;500;600;700;800&display=swap" rel="stylesheet">
|
|
|
|
<!-- Custom CSS -->
|
|
<link rel="stylesheet" href="assets/css/custom.css">
|
|
</head>
|
|
<body>
|
|
|
|
<main class="d-flex flex-column align-items-center justify-content-center min-vh-100 p-3 p-md-4">
|
|
|
|
<div class="text-center mb-4">
|
|
<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>
|
|
|
|
<div class="card form-card rounded-5 shadow-xl border-0">
|
|
<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>
|
|
|
|
<div class="mb-4">
|
|
<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> |