final v1

add_attendee.php

@@ -0,0 +1,43 @@
+<?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

@@ -0,0 +1,144 @@
+
+: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

@@ -0,0 +1,48 @@
+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

@@ -0,0 +1,22 @@
+<?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

@@ -0,0 +1,171 @@
+<?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,150 +1,128 @@
 <?php
-declare(strict_types=1);
-@ini_set('display_errors', '1');
-@error_reporting(E_ALL);
-@date_default_timezone_set('UTC');
+require_once __DIR__ . '/db/setup.php';
 
-$phpVersion = PHP_VERSION;
-$now = date('Y-m-d H:i:s');
+// 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
+}
 ?>
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
 <head>
-  <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>
+    <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(); ?>">
 </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 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>
     </div>
-  </main>
-  <footer>
-    Page updated: <?= htmlspecialchars($now) ?> (UTC)
-  </footer>
+
+    <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>
 </body>
-</html>
+</html>