126 lines
6.5 KiB
PHP
126 lines
6.5 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>
|
|
|
|
<!-- Chat Interface -->
|
|
<div id="chat-container" class="container mt-5 d-none">
|
|
<div class="card chat-card rounded-5 shadow-xl border-0">
|
|
<div class="card-header d-flex justify-content-between align-items-center p-3 rounded-top-5">
|
|
<div class="d-flex align-items-center">
|
|
<i id="chat-persona-icon" class="bi bi-person-circle fs-3 me-3"></i>
|
|
<h3 id="chat-persona-name" class="fw-bold mb-0"></h3>
|
|
</div>
|
|
<button id="close-chat" type="button" class="btn-close" aria-label="Close"></button>
|
|
</div>
|
|
<div class="card-body p-4" id="chat-log">
|
|
<!-- Chat messages will be appended here -->
|
|
</div>
|
|
<div class="card-footer p-3 border-top-0">
|
|
<form id="chat-form">
|
|
<div class="input-group">
|
|
<textarea id="chat-message-input" class="form-control form-control-lg" placeholder="Type your message..." rows="1"></textarea>
|
|
<button class="btn btn-primary primary-gradient-btn" type="submit" id="send-message-btn">
|
|
<i class="bi bi-send"></i>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Analysis Section -->
|
|
<div id="analysis-section" class="container mt-4 text-center d-none">
|
|
<button id="generate-analysis-btn" class="btn btn-lg rounded-4 fw-bold analysis-gradient-btn shadow-lg" disabled>
|
|
<i class="bi bi-bar-chart-line-fill me-2"></i> Generate Analysis
|
|
</button>
|
|
</div>
|
|
|
|
<div id="analysis-container" class="container mt-5 d-none">
|
|
<div class="card analysis-card rounded-5 shadow-xl border-0">
|
|
<div class="card-body p-4 p-lg-5">
|
|
<h2 class="text-center mb-4 fw-bolder">Conversation Analysis</h2>
|
|
<div id="analysis-content">
|
|
<!-- Analysis content will be injected here -->
|
|
</div>
|
|
</div>
|
|
</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> |