add_attendee.php

@@ -1,43 +0,0 @@
-<?php
-require_once __DIR__ . '/db/config.php';
-
-if ($_SERVER['REQUEST_METHOD'] === 'POST') {
-    $name = trim($_POST['name'] ?? '');
-    $email = trim($_POST['email'] ?? '');
-    $company = trim($_POST['company'] ?? '');
-    $occupation = trim($_POST['occupation'] ?? '');
-    $relation = trim($_POST['relation'] ?? '');
-    $company_type = trim($_POST['company_type'] ?? '');
-    $linkedin_url = trim($_POST['linkedin_url'] ?? '');
-
-    if (empty($name) || empty($email) || !filter_var($email, FILTER_VALIDATE_EMAIL)) {
-        header('Location: index.php?status=error');
-        exit;
-    }
-
-    try {
-        $pdo = db();
-        $stmt = $pdo->prepare(
-            "INSERT INTO attendees (name, email, company, occupation, relation, company_type, linkedin_url) VALUES (:name, :email, :company, :occupation, :relation, :company_type, :linkedin_url)"
-        );
-        $stmt->bindParam(':name', $name, PDO::PARAM_STR);
-        $stmt->bindParam(':email', $email, PDO::PARAM_STR);
-        $stmt->bindParam(':company', $company, PDO::PARAM_STR);
-        $stmt->bindParam(':occupation', $occupation, PDO::PARAM_STR);
-        $stmt->bindParam(':relation', $relation, PDO::PARAM_STR);
-        $stmt->bindParam(':company_type', $company_type, PDO::PARAM_STR);
-        $stmt->bindParam(':linkedin_url', $linkedin_url, PDO::PARAM_STR);
-        
-        $stmt->execute();
-
-        header('Location: index.php?status=success');
-        exit;
-    } catch (PDOException $e) {
-        // In a real app, log this error.
-        header('Location: index.php?status=error');
-        exit;
-    }
-} else {
-    header('Location: index.php');
-    exit;
-}

assets/css/custom.css

@@ -1,144 +0,0 @@
-
-:root {
-    --primary-color: #8a2be2; /* Bright Purple */
-    --secondary-color: #ff1493; /* Deep Pink */
-    --accent-color: #ff4500; /* Orange Red */
-    --light-color: #ffffff;
-    --dark-color: #1a1a1a;
-    --background-color: #f0e6ff; /* Light Lavender */
-    --font-family-headings: 'Poppins', sans-serif;
-    --font-family-body: 'Montserrat', sans-serif;
-}
-
-body {
-    background-color: var(--background-color);
-    font-family: var(--font-family-body);
-    color: var(--dark-color);
-}
-
-.hero {
-    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
-    color: var(--light-color);
-    padding: 5rem 2rem;
-    border-radius: 20px;
-    text-align: center;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
-    transform: scale(1.02);
-}
-
-.qr-code-container {
-    text-align: center;
-    margin-bottom: 2rem;
-}
-
-.hero h1 {
-    font-family: var(--font-family-headings);
-    font-weight: 700;
-    font-size: 3.5rem;
-    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
-}
-
-.form-section, .list-section {
-    background: rgba(255, 255, 255, 0.8);
-    backdrop-filter: blur(10px);
-    padding: 2.5rem;
-    border-radius: 20px;
-    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
-    margin-top: 3rem;
-    transition: transform 0.3s ease-in-out;
-}
-
-.form-section:hover, .list-section:hover {
-    transform: translateY(-10px);
-}
-
-h2 {
-    font-family: var(--font-family-headings);
-    color: var(--primary-color);
-    margin-bottom: 1.5rem;
-}
-
-.form-control, .form-select {
-    border-radius: 10px;
-    padding: 0.75rem 1rem;
-    border: 1px solid #ddd;
-    transition: all 0.3s ease;
-}
-
-.form-control:focus, .form-select:focus {
-    border-color: var(--primary-color);
-    box-shadow: 0 0 10px rgba(138, 43, 226, 0.3);
-}
-
-.btn-primary {
-    background-image: linear-gradient(to right, var(--accent-color), var(--secondary-color));
-    border: none;
-    border-radius: 10px;
-    padding: 0.75rem 1.5rem;
-    font-weight: 500;
-    color: var(--light-color);
-    transition: all 0.4s ease;
-    background-size: 200% auto;
-    animation: pulse 2s infinite;
-}
-
-.btn-primary:hover {
-    background-position: right center;
-    transform: scale(1.05);
-    box-shadow: 0 5px 15px rgba(255, 20, 147, 0.4);
-}
-
-@keyframes pulse {
-    0% { transform: scale(1); }
-    50% { transform: scale(1.03); }
-    100% { transform: scale(1); }
-}
-
-.table {
-    margin-top: 2rem;
-    border-collapse: separate;
-    border-spacing: 0 10px;
-}
-
-.table thead th {
-    background-color: var(--primary-color);
-    color: var(--light-color);
-    border: none;
-}
-
-.table tbody tr {
-    background-color: var(--light-color);
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
-    border-radius: 10px;
-}
-
-.table tbody td {
-    padding: 1rem;
-}
-
-.table tbody tr td:first-child {
-    border-top-left-radius: 10px;
-    border-bottom-left-radius: 10px;
-}
-
-.table tbody tr td:last-child {
-    border-top-right-radius: 10px;
-    border-bottom-right-radius: 10px;
-}
-
-.table a {
-    color: var(--accent-color);
-    text-decoration: none;
-    font-weight: 500;
-}
-
-.table a:hover {
-    text-decoration: underline;
-}
-
-.toast-container {
-    position: fixed;
-    top: 1rem;
-    right: 1rem;
-    z-index: 1055;
-}

assets/js/main.js

@@ -1,48 +0,0 @@
-window.addEventListener('DOMContentLoaded', (event) => {
-    const params = new URLSearchParams(window.location.search);
-    const status = params.get('status');
-
-    if (status) {
-        let message = '';
-        let type = '';
-
-        if (status === 'success') {
-            message = 'Thank you for joining the friends list!';
-            type = 'success';
-        } else if (status === 'error') {
-            message = 'There was an error with your submission. Please try again.';
-            type = 'danger';
-        }
-
-        if (message) {
-            showToast(message, type);
-            // Clean URL
-            window.history.replaceState({}, document.title, window.location.pathname);
-        }
-    }
-});
-
-function showToast(message, type = 'success') {
-    const toastContainer = document.getElementById('toast-container');
-    if (!toastContainer) return;
-
-    const toastId = 'toast-' + Date.now();
-    const toastHTML = `
-        <div id="${toastId}" class="toast align-items-center text-white bg-${type} border-0" role="alert" aria-live="assertive" aria-atomic="true">
-            <div class="d-flex">
-                <div class="toast-body">
-                    ${message}
-                </div>
-                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
-            </div>
-        </div>
-    `;
-
-    toastContainer.insertAdjacentHTML('beforeend', toastHTML);
-    const toastElement = document.getElementById(toastId);
-    const toast = new bootstrap.Toast(toastElement, { delay: 5000 });
-    toast.show();
-    toastElement.addEventListener('hidden.bs.toast', () => {
-        toastElement.remove();
-    });
-}

db/setup.php

@@ -1,22 +0,0 @@
-<?php
-require_once __DIR__ . '/config.php';
-
-try {
-    $pdo = db();
-    $sql = "
-    CREATE TABLE IF NOT EXISTS attendees (
-        id INT AUTO_INCREMENT PRIMARY KEY,
-        name VARCHAR(255) NOT NULL,
-        email VARCHAR(255) NOT NULL,
-        company VARCHAR(255),
-        occupation VARCHAR(255),
-        relation VARCHAR(50),
-        company_type VARCHAR(100),
-        linkedin_url VARCHAR(255),
-        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
-    );";
-    $pdo->exec($sql);
-} catch (PDOException $e) {
-    // In a real app, you'd log this error.
-    // For this example, we'll just ignore it if the table already exists.
-}

friends.php

@@ -1,171 +0,0 @@
-<?php
-require_once __DIR__ . '/db/config.php';
-
-// Fetch attendees
-$attendees = [];
-$company_type_data = [];
-$relation_data = [];
-
-try {
-    $pdo = db();
-    $stmt = $pdo->query("SELECT name, company, occupation, relation, company_type, linkedin_url, created_at FROM attendees ORDER BY created_at DESC");
-    $attendees = $stmt->fetchAll(PDO::FETCH_ASSOC);
-
-    // Fetch data for charts
-    $company_type_stmt = $pdo->query("SELECT company_type, COUNT(*) as count FROM attendees WHERE company_type IS NOT NULL AND company_type != '' GROUP BY company_type");
-    $company_type_data = $company_type_stmt->fetchAll(PDO::FETCH_ASSOC);
-
-    $relation_stmt = $pdo->query("SELECT relation, COUNT(*) as count FROM attendees WHERE relation IS NOT NULL AND relation != '' GROUP BY relation");
-    $relation_data = $relation_stmt->fetchAll(PDO::FETCH_ASSOC);
-
-} catch (PDOException $e) {
-    // Silently fail for now, or log error
-}
-?>
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Friends List - Belarusians Worldwide</title>
-    <meta name="description" content="A friends list for the Belarusian Pavilion at Web Summit.">
-    <meta name="keywords" content="Belarusian Pavilion, Web Summit, Belarusians Worldwide, tech community, startups, networking, Belarusian founders, tech diaspora, Built with Flatlogic Generator">
-    <meta property="og:title" content="Belarusians Worldwide Friends">
-    <meta property="og:description" content="A friends list for the Belarusian Pavilion at Web Summit.">
-    <meta property="og:image" content="">
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:image" content="">
-
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
-    <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=Poppins:wght@700&family=Montserrat:wght@400;500&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-</head>
-<body>
-
-    <div class="container my-5">
-        <header class="hero text-center mb-5">
-            <h1>Our Friends & Associates</h1>
-            <p class="lead">A directory of the amazing people in the Belarusian tech community.</p>
-            <a href="index.php" class="btn btn-secondary">Back to Join the List</a>
-        </header>
-
-        <main>
-            <section class="charts-section mb-5">
-                <h2 class="text-center">Community Insights</h2>
-                <div class="row">
-                    <div class="col-md-6">
-                        <canvas id="companyTypeChart"></canvas>
-                    </div>
-                    <div class="col-md-6">
-                        <canvas id="relationChart"></canvas>
-                    </div>
-                </div>
-            </section>
-
-            <section class="list-section">
-                <div class="table-responsive">
-                    <table class="table table-striped table-hover">
-                        <thead class="table-dark">
-                            <tr>
-                                <th>Name</th>
-                                <th>Company / Startup</th>
-                                <th>Occupation</th>
-                                <th>Company Type</th>
-                                <th>LinkedIn</th>
-                                <th>Relation</th>
-                                <th>Date Joined</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <?php if (empty($attendees)): ?>
-                                <tr>
-                                    <td colspan="7" class="text-center">No friends yet. Be the first to join!</td>
-                                </tr>
-                            <?php else: ?>
-                                <?php foreach ($attendees as $attendee): ?>
-                                    <tr>
-                                        <td><?php echo htmlspecialchars($attendee['name']); ?></td>
-                                        <td><?php echo htmlspecialchars($attendee['company']); ?></td>
-                                        <td><?php echo htmlspecialchars($attendee['occupation']); ?></td>
-                                        <td><?php echo htmlspecialchars($attendee['company_type']); ?></td>
-                                        <td><a href="<?php echo htmlspecialchars($attendee['linkedin_url']); ?>" target="_blank">View Profile</a></td>
-                                        <td><?php echo htmlspecialchars($attendee['relation']); ?></td>
-                                        <td><?php echo date('M d, Y', strtotime($attendee['created_at'])); ?></td>
-                                    </tr>
-                                <?php endforeach; ?>
-                            <?php endif; ?>
-                        </tbody>
-                    </table>
-                </div>
-            </section>
-        </main>
-
-        <footer class="text-center text-muted mt-5">
-            <p>Built with ❤️ by the Belarusian Worldwide community.</p>
-        </footer>
-    </div>
-
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
-    <script>
-    document.addEventListener("DOMContentLoaded", function() {
-        const companyTypeData = <?php echo json_encode($company_type_data); ?>;
-        const relationData = <?php echo json_encode($relation_data); ?>;
-
-        const generateChart = (ctx, label, data, dataLabel, chartType) => {
-            const labels = data.map(item => item[dataLabel]);
-            const values = data.map(item => item.count);
-
-            new Chart(ctx, {
-                type: chartType,
-                data: {
-                    labels: labels,
-                    datasets: [{
-                        label: label,
-                        data: values,
-                        backgroundColor: [
-                            'rgba(255, 99, 132, 0.7)',
-                            'rgba(54, 162, 235, 0.7)',
-                            'rgba(255, 206, 86, 0.7)',
-                            'rgba(75, 192, 192, 0.7)',
-                            'rgba(153, 102, 255, 0.7)',
-                            'rgba(255, 159, 64, 0.7)'
-                        ],
-                        borderColor: [
-                            'rgba(255, 99, 132, 1)',
-                            'rgba(54, 162, 235, 1)',
-                            'rgba(255, 206, 86, 1)',
-                            'rgba(75, 192, 192, 1)',
-                            'rgba(153, 102, 255, 1)',
-                            'rgba(255, 159, 64, 1)'
-                        ],
-                        borderWidth: 1
-                    }]
-                },
-                options: {
-                    responsive: true,
-                    plugins: {
-                        legend: {
-                            position: 'top',
-                        },
-                        title: {
-                            display: true,
-                            text: label
-                        }
-                    }
-                }
-            });
-        };
-
-        const companyTypeCtx = document.getElementById('companyTypeChart').getContext('2d');
-        generateChart(companyTypeCtx, 'Users by Company Type', companyTypeData, 'company_type', 'pie');
-
-        const relationCtx = document.getElementById('relationChart').getContext('2d');
-        generateChart(relationCtx, 'Users by Relation', relationData, 'relation', 'pie');
-    });
-    </script>
-</body>
-</html>

index.php

@@ -1,128 +1,150 @@
 <?php
-require_once __DIR__ . '/db/setup.php';
+declare(strict_types=1);
+@ini_set('display_errors', '1');
+@error_reporting(E_ALL);
+@date_default_timezone_set('UTC');
 
-// Fetch attendees
-$attendees = [];
-try {
-    $pdo = db();
-    $stmt = $pdo->query("SELECT name, company, occupation, relation, company_type, linkedin_url, created_at FROM attendees ORDER BY created_at DESC");
-    $attendees = $stmt->fetchAll(PDO::FETCH_ASSOC);
-} catch (PDOException $e) {
-    // Silently fail for now, or log error
-}
+$phpVersion = PHP_VERSION;
+$now = date('Y-m-d H:i:s');
 ?>
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Belarusians Worldwide Friends</title>
-    <meta name="description" content="A friends list for the Belarusian Pavilion at Web Summit.">
-    <meta name="keywords" content="Belarusian Pavilion, Web Summit, Belarusians Worldwide, tech community, startups, networking, Belarusian founders, tech diaspora, Built with Flatlogic Generator">
-    <meta property="og:title" content="Belarusians Worldwide Friends">
-    <meta property="og:description" content="A friends list for the Belarusian Pavilion at Web Summit.">
-    <meta property="og:image" content="">
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:image" content="">
-
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
-    <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=Poppins:wght@700&family=Montserrat:wght@400;500&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>New Style</title>
+<?php
+// Read project preview data from environment
+$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
+$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
+?>
+<?php if ($projectDescription): ?>
+  <!-- Meta description -->
+  <meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' />
+  <!-- Open Graph meta tags -->
+  <meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
+  <!-- Twitter meta tags -->
+  <meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
+<?php endif; ?>
+<?php if ($projectImageUrl): ?>
+  <!-- Open Graph image -->
+  <meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
+  <!-- Twitter image -->
+  <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">
+  <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);
+    }
+    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>
-
-    <div id="toast-container" class="toast-container"></div>
-
-    <div class="container my-5">
-        <header class="hero text-center mb-5">
-            <div class="qr-code-container">
-                <h2>Join Now</h2>
-                <img src="assets/pasted-20251113-135132-33815403.png" alt="QR Code for joining" class="img-fluid">
-            </div>
-            <h1>Belarusians Worldwide Friends</h1>
-            <p class="lead">A welcoming corner at Web Summit where Belarusian founders, engineers, investors, creatives, and ecosystem builders meet, share, and show that we keep building - wherever we are.</p>
-        </header>
-
-        <main>
-            <section class="form-section">
-                <h2>Join the Friends List</h2>
-                <p>Leave your details to connect with the Belarusian tech community at Web Summit.</p>
-                <form action="add_attendee.php" method="POST" class="needs-validation" novalidate>
-                    <div class="mb-3">
-                        <label for="name" class="form-label">Full Name</label>
-                        <input type="text" class="form-control" id="name" name="name" required>
-                        <div class="invalid-feedback">Please enter your name.</div>
-                    </div>
-                    <div class="mb-3">
-                        <label for="email" class="form-label">Email Address</label>
-                        <input type="email" class="form-control" id="email" name="email" required>
-                        <div class="invalid-feedback">Please enter a valid email address.</div>
-                    </div>
-                    <div class="mb-3">
-                        <label for="company" class="form-label">Company / Startup</label>
-                        <input type="text" class="form-control" id="company" name="company">
-                    </div>
-                    <div class="mb-3">
-                        <label for="occupation" class="form-label">Occupation</label>
-                        <input type="text" class="form-control" id="occupation" name="occupation">
-                    </div>
-                    <div class="mb-3">
-                        <label for="company_type" class="form-label">Company Type</label>
-                        <select class="form-select" id="company_type" name="company_type">
-                            <option selected value="">- Select -</option>
-                            <option value="Startup">Startup</option>
-                            <option value="Scaleup">Scaleup</option>
-                            <option value="Enterprise">Enterprise</option>
-                            <option value="VC">VC</option>
-                            <option value="Ecosystem">Ecosystem</option>
-                            <option value="Solo">Solo</option>
-                        </select>
-                    </div>
-                    <div class="mb-3">
-                        <label for="linkedin_url" class="form-label">LinkedIn Profile URL</label>
-                        <input type="url" class="form-control" id="linkedin_url" name="linkedin_url" placeholder="https://www.linkedin.com/in/your-profile">
-                    </div>
-                    <div class="mb-3">
-                        <label for="relation" class="form-label">Relation to the Booth</label>
-                        <select class="form-select" id="relation" name="relation">
-                            <option selected value="Friend">Friend</option>
-                            <option value="Founder">Founder</option>
-                            <option value="Investor">Investor</option>
-                            <option value="Supporter">Supporter</option>
-                        </select>
-                    </div>
-                    <button type="submit" class="btn btn-primary btn-lg">Join the List</button>
-                </form>
-            </section>
-            <div class="text-center mt-4">
-                <a href="friends.php" class="btn btn-secondary">View the Friends List</a>
-            </div>
-        </main>
-
-        <footer class="text-center text-muted mt-5">
-            <p>Built with ❤️ by the Belarusian Worldwide community.</p>
-        </footer>
+  <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>
-
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
-    <script>
-        // Bootstrap form validation
-        (() => {
-            'use strict'
-            const forms = document.querySelectorAll('.needs-validation')
-            Array.from(forms).forEach(form => {
-                form.addEventListener('submit', event => {
-                    if (!form.checkValidity()) {
-                        event.preventDefault()
-                        event.stopPropagation()
-                    }
-                    form.classList.add('was-validated')
-                }, false)
-            })
-        })()
-    </script>
+  </main>
+  <footer>
+    Page updated: <?= htmlspecialchars($now) ?> (UTC)
+  </footer>
 </body>
 </html>