Base app

assets/css/custom.css

@@ -0,0 +1,127 @@
+body {
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    background-color: #f4f7f6;
+    color: #333;
+    line-height: 1.6;
+}
+
+.navbar {
+    background-color: #ffffff;
+    border-bottom: 1px solid #e7e7e7;
+    padding: 1rem 2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.navbar-brand {
+    font-weight: bold;
+    font-size: 1.5rem;
+    color: #007bff;
+}
+
+.nav-links a {
+    color: #555;
+    text-decoration: none;
+    margin-left: 1.5rem;
+    font-size: 1rem;
+}
+
+.nav-links a:hover {
+    color: #007bff;
+}
+
+.container {
+    max-width: 960px;
+    margin: 2rem auto;
+    padding: 0 1rem;
+}
+
+.card {
+    background-color: #ffffff;
+    border: 1px solid #e7e7e7;
+    border-radius: 8px;
+    padding: 1.5rem;
+    margin-bottom: 1.5rem;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+}
+
+.card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+}
+
+.card-title {
+    font-size: 1.25rem;
+    font-weight: bold;
+}
+
+.card-meta {
+    font-size: 0.9rem;
+    color: #777;
+}
+
+.card-body p {
+    margin-bottom: 1rem;
+}
+
+.form-control {
+    width: 100%;
+    padding: 0.75rem;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    margin-bottom: 1rem;
+}
+
+.btn {
+    display: inline-block;
+    padding: 0.75rem 1.5rem;
+    border-radius: 4px;
+    text-decoration: none;
+    font-weight: bold;
+    text-align: center;
+    cursor: pointer;
+}
+
+.btn-primary {
+    background-color: #007bff;
+    color: #ffffff;
+    border: 1px solid #007bff;
+}
+
+.btn-primary:hover {
+    background-color: #0056b3;
+}
+
+.btn-secondary {
+    background-color: #6c757d;
+    color: #ffffff;
+    border: 1px solid #6c757d;
+}
+
+.footer {
+    text-align: center;
+    padding: 2rem 0;
+    margin-top: 2rem;
+    font-size: 0.9rem;
+    color: #777;
+}
+
+/* Vote buttons */
+.vote-buttons {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+}
+
+.like-button, .dislike-button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 1rem;
+}

assets/js/main.js

@@ -0,0 +1,27 @@
+
+document.addEventListener('DOMContentLoaded', function() {
+    const voteButtons = document.querySelectorAll('.vote-buttons a');
+
+    voteButtons.forEach(button => {
+        button.addEventListener('click', function(e) {
+            e.preventDefault();
+            const url = this.href;
+            const likeCountSpan = this.querySelector('span');
+            const dislikeButton = this.parentElement.querySelector('.dislike-button');
+            const dislikeCountSpan = dislikeButton.querySelector('span');
+
+            fetch(url)
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        likeCountSpan.textContent = data.likes;
+                        dislikeCountSpan.textContent = data.dislikes;
+                    } else {
+                        // Handle errors if needed
+                        console.error(data.error);
+                    }
+                })
+                .catch(error => console.error('Error:', error));
+        });
+    });
+});

db/migrate.php

@@ -0,0 +1,22 @@
+<?php
+require_once __DIR__ . '/config.php';
+
+function apply_migrations() {
+    $pdo = db();
+    $migrations_dir = __DIR__ . '/migrations';
+    $files = glob($migrations_dir . '/*.sql');
+
+    foreach ($files as $file) {
+        echo "Applying migration: " . basename($file) . "...\n";
+        $sql = file_get_contents($file);
+        try {
+            $pdo->exec($sql);
+            echo "Success.\n";
+        } catch (PDOException $e) {
+            die("Migration failed: " . $e->getMessage());
+        }
+    }
+}
+
+apply_migrations();
+

db/migrations/001_create_users_and_skills_tables.sql

@@ -0,0 +1,18 @@
+CREATE TABLE IF NOT EXISTS users (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    username VARCHAR(50) NOT NULL UNIQUE,
+    email VARCHAR(100) NOT NULL UNIQUE,
+    password_hash VARCHAR(255) NOT NULL,
+    display_name VARCHAR(50),
+    description TEXT,
+    occupation VARCHAR(100),
+    location VARCHAR(255),
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+
+CREATE TABLE IF NOT EXISTS skills (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    user_id INT NOT NULL,
+    skill_name VARCHAR(100) NOT NULL,
+    FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

db/migrations/002_create_posts_table.sql

@@ -0,0 +1,7 @@
+CREATE TABLE IF NOT EXISTS posts (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    user_id INT NOT NULL,
+    content TEXT NOT NULL,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    FOREIGN KEY (user_id) REFERENCES users(id)
+);

db/migrations/003_add_likes_to_posts.sql

@@ -0,0 +1 @@
+ALTER TABLE posts ADD COLUMN likes INT DEFAULT 0, ADD COLUMN dislikes INT DEFAULT 0;

db/migrations/004_create_post_votes_table.sql

@@ -0,0 +1,10 @@
+CREATE TABLE IF NOT EXISTS post_votes (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    user_id INT NOT NULL,
+    post_id INT NOT NULL,
+    vote_type ENUM('like', 'dislike') NOT NULL,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    UNIQUE KEY user_post_vote (user_id, post_id),
+    FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE,
+    FOREIGN KEY (post_id) REFERENCES posts(id) ON DELETE CASCADE
+);

db/migrations/005_add_city_country_to_users.sql

@@ -0,0 +1,4 @@
+ALTER TABLE users
+ADD COLUMN city VARCHAR(100),
+ADD COLUMN country VARCHAR(100),
+DROP COLUMN location;

db/migrations/006_remove_likes_from_posts.sql

@@ -0,0 +1,3 @@
+ALTER TABLE posts
+DROP COLUMN likes,
+DROP COLUMN dislikes;

db/migrations/007_change_vote_type_to_int.sql

@@ -0,0 +1,2 @@
+ALTER TABLE post_votes
+CHANGE COLUMN vote_type vote INT NOT NULL;

handle_create_post.php

@@ -0,0 +1,26 @@
+<?php
+session_start();
+require_once 'db/config.php';
+require_once 'includes/flash_messages.php';
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_SESSION['user_id'])) {
+    $content = trim($_POST['content']);
+    $user_id = $_SESSION['user_id'];
+
+    if (!empty($content)) {
+        try {
+            $pdo = db();
+            $stmt = $pdo->prepare('INSERT INTO posts (user_id, content) VALUES (?, ?)');
+            $stmt->execute([$user_id, $content]);
+            set_flash_message('Post created successfully!', 'success');
+        } catch (PDOException $e) {
+            error_log("Failed to create post: " . $e->getMessage());
+            set_flash_message('Failed to create post. Please try again.', 'danger');
+        }
+    } else {
+        set_flash_message('Post content cannot be empty.', 'danger');
+    }
+}
+
+header("Location: index.php");
+exit;

handle_like.php

@@ -0,0 +1,63 @@
+<?php
+session_start();
+require_once 'db/config.php';
+
+header('Content-Type: application/json');
+
+if (!isset($_SESSION['user_id'])) {
+    echo json_encode(['success' => false, 'error' => 'User not logged in.']);
+    exit();
+}
+
+if (!isset($_GET['post_id']) || !isset($_GET['action'])) {
+    echo json_encode(['success' => false, 'error' => 'Invalid request.']);
+    exit();
+}
+
+$postId = (int)$_GET['post_id'];
+$action = $_GET['action'];
+$userId = $_SESSION['user_id'];
+$vote = ($action === 'like') ? 1 : -1;
+
+$pdo = db();
+
+try {
+    $pdo->beginTransaction();
+
+    // Check for existing vote
+    $stmt = $pdo->prepare('SELECT vote FROM post_votes WHERE user_id = :user_id AND post_id = :post_id');
+    $stmt->execute(['user_id' => $userId, 'post_id' => $postId]);
+    $existingVote = $stmt->fetchColumn();
+
+    if ($existingVote) {
+        if ($existingVote == $vote) {
+            // User is undoing their vote
+            $stmt = $pdo->prepare('DELETE FROM post_votes WHERE user_id = :user_id AND post_id = :post_id');
+            $stmt->execute(['user_id' => $userId, 'post_id' => $postId]);
+        } else {
+            // User is changing their vote
+            $stmt = $pdo->prepare('UPDATE post_votes SET vote = :vote WHERE user_id = :user_id AND post_id = :post_id');
+            $stmt->execute(['vote' => $vote, 'user_id' => $userId, 'post_id' => $postId]);
+        }
+    } else {
+        // New vote
+        $stmt = $pdo->prepare('INSERT INTO post_votes (user_id, post_id, vote) VALUES (:user_id, :post_id, :vote)');
+        $stmt->execute(['user_id' => $userId, 'post_id' => $postId, 'vote' => $vote]);
+    }
+
+    $pdo->commit();
+
+    // Fetch new like/dislike counts
+    $stmt = $pdo->prepare('SELECT 
+        (SELECT COUNT(*) FROM post_votes WHERE post_id = :post_id AND vote = 1) as likes,
+        (SELECT COUNT(*) FROM post_votes WHERE post_id = :post_id AND vote = -1) as dislikes
+    ');
+    $stmt->execute(['post_id' => $postId]);
+    $counts = $stmt->fetch(PDO::FETCH_ASSOC);
+
+    echo json_encode(['success' => true, 'likes' => $counts['likes'], 'dislikes' => $counts['dislikes']]);
+
+} catch (Exception $e) {
+    $pdo->rollBack();
+    echo json_encode(['success' => false, 'error' => 'Database error: ' . $e->getMessage()]);
+}

handle_login.php

@@ -0,0 +1,32 @@
+<?php
+session_start();
+require_once 'db/config.php';
+require_once 'includes/flash_messages.php';
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $email = $_POST['email'];
+    $password = $_POST['password'];
+
+    try {
+        $pdo = db();
+        $stmt = $pdo->prepare('SELECT id, password_hash FROM users WHERE email = ?');
+        $stmt->execute([$email]);
+        $user = $stmt->fetch();
+
+        if ($user && password_verify($password, $user['password_hash'])) {
+            $_SESSION['user_id'] = $user['id'];
+            set_flash_message('You have been successfully logged in.', 'success');
+            header("Location: index.php");
+            exit;
+        } else {
+            set_flash_message('Invalid email or password.', 'danger');
+            header("Location: login.php");
+            exit;
+        }
+    } catch (PDOException $e) {
+        set_flash_message('Database error. Please try again.', 'danger');
+        error_log("Login DB Error: " . $e->getMessage());
+        header("Location: login.php");
+        exit;
+    }
+}

handle_profile_setup.php

@@ -0,0 +1,70 @@
+<?php
+session_start();
+
+if (!isset($_SESSION['user_id'])) {
+    header('Location: login.php');
+    exit();
+}
+
+require_once 'db/config.php';
+require_once 'includes/flash_messages.php';
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $userId = $_SESSION['user_id'];
+    $displayName = trim($_POST['display_name'] ?? '');
+    $description = trim($_POST['description'] ?? '');
+    $occupation = trim($_POST['occupation'] ?? '');
+    $skillsJson = $_POST['skills'] ?? '[]';
+    $city = trim($_POST['city'] ?? '');
+    $country = trim($_POST['country'] ?? '');
+
+    // Validate display name
+    if (empty($displayName)) {
+        set_flash_message('Display Name is required.', 'danger');
+        header('Location: profile_setup.php');
+        exit();
+    }
+
+    try {
+        $pdo = db();
+
+        // Update users table
+        $stmt = $pdo->prepare(
+            "UPDATE users SET display_name = ?, description = ?, occupation = ?, city = ?, country = ? WHERE id = ?"
+        );
+        $stmt->execute([$displayName, $description, $occupation, $city, $country, $userId]);
+
+        // Handle skills
+        $skills = json_decode($skillsJson, true);
+
+        if (is_array($skills) && !empty($skills)) {
+            // First, remove existing skills for the user to prevent duplicates on re-editing
+            $deleteStmt = $pdo->prepare("DELETE FROM skills WHERE user_id = ?");
+            $deleteStmt->execute([$userId]);
+
+            // Insert new skills
+            $insertStmt = $pdo->prepare("INSERT INTO skills (user_id, skill_name) VALUES (?, ?)");
+            foreach ($skills as $skill) {
+                if (!empty(trim($skill))) {
+                    $insertStmt->execute([$userId, trim($skill)]);
+                }
+            }
+        }
+        
+        set_flash_message('Profile updated successfully!', 'success');
+        // Redirect to a success page or the main feed
+        header('Location: profile.php?id=' . $userId);
+        exit();
+
+    } catch (PDOException $e) {
+        set_flash_message('Database error: ' . $e->getMessage(), 'danger');
+        header('Location: profile_setup.php');
+        exit();
+    }
+
+} else {
+    // If not a POST request, redirect away
+    header('Location: profile_setup.php');
+    exit();
+}
+?>

handle_signup.php

@@ -0,0 +1,68 @@
+<?php
+require_once __DIR__ . '/db/config.php';
+require_once __DIR__ . '/includes/flash_messages.php';
+
+session_start();
+
+if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
+    header('Location: signup.php');
+    exit();
+}
+
+$username = trim($_POST['username'] ?? '');
+$email = trim($_POST['email'] ?? '');
+$password = $_POST['password'] ?? '';
+$confirm_password = $_POST['confirm_password'] ?? '';
+
+// --- Basic Validation ---
+if (empty($username) || empty($email) || empty($password) || empty($confirm_password)) {
+    set_flash_message('Please fill all fields.', 'danger');
+    header('Location: signup.php');
+    exit();
+}
+
+if ($password !== $confirm_password) {
+    set_flash_message('Passwords do not match.', 'danger');
+    header('Location: signup.php');
+    exit();
+}
+
+if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
+    set_flash_message('Invalid email format.', 'danger');
+    header('Location: signup.php');
+    exit();
+}
+
+// --- Check for existing user ---
+$pdo = db();
+$stmt = $pdo->prepare("SELECT id FROM users WHERE username = ? OR email = ?");
+$stmt->execute([$username, $email]);
+if ($stmt->fetch()) {
+    set_flash_message('Username or email already exists.', 'danger');
+    header('Location: signup.php');
+    exit();
+}
+
+// --- Create User ---
+$password_hash = password_hash($password, PASSWORD_DEFAULT);
+
+$stmt = $pdo->prepare("INSERT INTO users (username, email, password_hash, display_name) VALUES (?, ?, ?, ?)");
+try {
+    $stmt->execute([$username, $email, $password_hash, $username]);
+    $user_id = $pdo->lastInsertId();
+    
+    // Log the user in
+    $_SESSION['user_id'] = $user_id;
+    $_SESSION['username'] = $username;
+
+    set_flash_message('You have successfully registered. Please complete your profile.', 'success');
+    // Redirect to profile setup
+    header('Location: profile_setup.php');
+    exit();
+
+} catch (PDOException $e) {
+    set_flash_message('Database error. Please try again.', 'danger');
+    error_log("Signup DB Error: " . $e->getMessage());
+    header('Location: signup.php');
+    exit();
+}

includes/flash_messages.php

@@ -0,0 +1,17 @@
+<?php
+
+function set_flash_message($message, $type = 'success') {
+    $_SESSION['flash_message'] = [
+        'message' => $message,
+        'type' => $type
+    ];
+}
+
+function display_flash_message() {
+    if (isset($_SESSION['flash_message'])) {
+        $message = $_SESSION['flash_message']['message'];
+        $type = $_SESSION['flash_message']['type'];
+        unset($_SESSION['flash_message']);
+        echo "<div class='alert alert-{$type}'>{$message}</div>";
+    }
+}

index.php

@@ -1,150 +1,111 @@
 <?php
-declare(strict_types=1);
-@ini_set('display_errors', '1');
-@error_reporting(E_ALL);
-@date_default_timezone_set('UTC');
+session_start();
+require_once 'db/config.php';
+require_once 'includes/flash_messages.php';
+
+// Fetch posts
+$posts = [];
+try {
+    $pdo = db();
+    $stmt = $pdo->query('
+        SELECT 
+            posts.id, 
+            posts.content, 
+            posts.created_at, 
+            users.display_name, 
+            users.id as user_id,
+            (SELECT COUNT(*) FROM post_votes WHERE post_id = posts.id AND vote = 1) as likes,
+            (SELECT COUNT(*) FROM post_votes WHERE post_id = posts.id AND vote = -1) as dislikes
+        FROM posts
+        JOIN users ON posts.user_id = users.id
+        ORDER BY posts.created_at DESC
+    ');
+    $posts = $stmt->fetchAll(PDO::FETCH_ASSOC);
+} catch (PDOException $e) {
+    // Handle database errors gracefully
+    error_log("DB Error: " . $e->getMessage());
+}
 
-$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" />
-  <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>Welcome to Our Social Platform</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
 </head>
 <body>
-  <main>
+
+    <nav class="navbar">
+        <a class="navbar-brand" href="index.php">Social Platform</a>
+        <div class="nav-links">
+            <?php if (isset($_SESSION['user_id'])): ?>
+                <a href="profile.php?id=<?php echo $_SESSION['user_id']; ?>">My Profile</a>
+                <a href="logout.php">Logout</a>
+            <?php else: ?>
+                <a href="login.php">Login</a>
+                <a href="signup.php">Sign Up</a>
+            <?php endif; ?>
+        </div>
+    </nav>
+
+    <div class="container">
+        <?php display_flash_message(); ?>
+        <?php if (isset($_SESSION['user_id'])): ?>
             <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 class="card-body">
+                    <h5 class="card-title">Create a Post</h5>
+                    <form action="handle_create_post.php" method="POST">
+                        <textarea class="form-control" name="content" placeholder="What's on your mind?"></textarea>
+                        <button type="submit" class="btn btn-primary">Post</button>
+                    </form>
                 </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>
-  </main>
-  <footer>
-    Page updated: <?= htmlspecialchars($now) ?> (UTC)
+
+            <h2 class="mb-4">Feed</h2>
+            <?php if (empty($posts)): ?>
+                <div class="card text-center text-muted">No posts yet. Be the first to share!</div>
+            <?php else: ?>
+                <?php foreach ($posts as $post): ?>
+                    <div class="card">
+                        <div class="card-header">
+                            <a href="profile.php?id=<?= $post['user_id'] ?>"><?php echo htmlspecialchars($post['display_name']); ?></a>
+                            <small class="card-meta">Posted on <?php echo date("F j, Y, g:i a", strtotime($post['created_at'])); ?></small>
+                        </div>
+                        <div class="card-body">
+                            <p><?php echo htmlspecialchars($post['content']); ?></p>
+                        </div>
+                        <div class="card-footer vote-buttons">
+                            <a href="handle_like.php?post_id=<?= $post['id'] ?>&action=like" class="like-button">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 10v12"/><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 18.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h3z"/></svg>
+                                <span><?= $post['likes'] ?></span>
+                            </a>
+                            <a href="handle_like.php?post_id=<?= $post['id'] ?>&action=dislike" class="dislike-button">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 14V2"/><path d="M15 18.12 14 14H8.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 10.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-3z"/></svg>
+                                <span><?= $post['dislikes'] ?></span>
+                            </a>
+                        </div>
+                    </div>
+                <?php endforeach; ?>
+            <?php endif; ?>
+
+        <?php else: ?>
+            <div class="hero">
+                <h1>Connect and Share</h1>
+                <p>Join our community to connect with friends, share your thoughts, and discover new things.</p>
+                <a href="signup.php" class="btn btn-custom-primary">Get Started</a>
+                <a href="login.php" class="btn btn-custom-secondary">Have an account? Login</a>
+            </div>
+        <?php endif; ?>
+    </div>
+
+    <footer class="footer">
+        <p>&copy; <?php echo date("Y"); ?> Social Platform. All rights reserved.</p>
     </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>
 </body>
 </html>

login.php

@@ -0,0 +1,48 @@
+<?php
+session_start();
+require_once 'includes/flash_messages.php';
+
+if (isset($_SESSION['user_id'])) {
+    header("Location: index.php");
+    exit;
+}
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
+</head>
+<body>
+    <div class="container mt-5">
+        <div class="row justify-content-center">
+            <div class="col-md-6">
+                <div class="card">
+                    <div class="card-body">
+                        <h3 class="card-title text-center">Login</h3>
+                        <?php display_flash_message(); ?>
+                        <form action="handle_login.php" method="POST">
+                            <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>
+                            <div class="mb-3">
+                                <label for="password" class="form-label">Password</label>
+                                <input type="password" class="form-control" id="password" name="password" required>
+                            </div>
+                            <button type="submit" class="btn btn-custom-primary w-100">Login</button>
+                        </form>
+                    </div>
+                    <div class="card-footer text-center">
+                        <small>Don't have an account? <a href="signup.php">Sign up</a></small>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>

logout.php

@@ -0,0 +1,11 @@
+<?php
+session_start();
+require_once 'includes/flash_messages.php';
+session_unset();
+session_destroy();
+
+// Start a new session to store the flash message
+session_start();
+set_flash_message('You have been logged out successfully.', 'success');
+header("Location: index.php");
+exit;

profile.php

@@ -0,0 +1,93 @@
+<?php
+session_start();
+require_once 'db/config.php';
+require_once 'includes/flash_messages.php';
+
+if (!isset($_GET['id'])) {
+    header('Location: index.php');
+    exit();
+}
+
+$user_id = $_GET['id'];
+$p = db();
+
+// Fetch user data
+$stmt = $p->prepare('SELECT display_name, description, occupation FROM users WHERE id = ?');
+$stmt->execute([$user_id]);
+$user = $stmt->fetch();
+
+if (!$user) {
+    header('Location: index.php');
+    exit();
+}
+
+    $stmt = $p->prepare('SELECT p.id, p.content, p.created_at, u.display_name, (SELECT COUNT(*) FROM post_votes WHERE post_id = p.id AND vote = 1) as likes, (SELECT COUNT(*) FROM post_votes WHERE post_id = p.id AND vote = -1) as dislikes FROM posts p JOIN users u ON p.user_id = u.id WHERE p.user_id = ? ORDER BY p.created_at DESC');
+    $stmt->execute([$user_id]);
+    $posts = $stmt->fetchAll();
+
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title><?= htmlspecialchars($user['display_name']) ?>'s Profile</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="assets/css/custom.css">
+</head>
+    <nav class="navbar">
+        <a class="navbar-brand" href="index.php">Social Platform</a>
+        <div class="nav-links">
+            <?php if (isset($_SESSION['user_id'])): ?>
+                <a href="profile.php?id=<?php echo $_SESSION['user_id']; ?>">My Profile</a>
+                <a href="logout.php">Logout</a>
+            <?php else: ?>
+                <a href="login.php">Login</a>
+                <a href="signup.php">Sign Up</a>
+            <?php endif; ?>
+        </div>
+    </nav>
+
+    <div class="container">
+        <?php display_flash_message(); ?>
+        <div class="card">
+            <div class="card-body">
+                <h2 class="card-title"><?= htmlspecialchars($user['display_name']) ?></h2>
+                <p class="card-text"><?= htmlspecialchars($user['description']) ?></p>
+                <p class="card-text"><small class="text-muted"><?= htmlspecialchars($user['occupation']) ?></small></p>
+            </div>
+        </div>
+
+        <h3 class="mt-5">Posts by <?= htmlspecialchars($user['display_name']) ?></h3>
+
+        <?php if (empty($posts)) : ?>
+            <p>This user has no posts yet.</p>
+        <?php else : ?>
+            <?php foreach ($posts as $post) : ?>
+                <div class="card my-3">
+                    <div class="card-body">
+                        <p class="card-text"><?= htmlspecialchars($post['content']) ?></p>
+                        <div class="vote-buttons">
+                            <a href="handle_like.php?post_id=<?= $post['id'] ?>&action=like" class="like-button">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 10v12"/><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 18.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h3z"/></svg>
+                                <span><?= $post['likes'] ?></span>
+                            </a>
+                            <a href="handle_like.php?post_id=<?= $post['id'] ?>&action=dislike" class="dislike-button">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 14V2"/><path d="M15 18.12 14 14H8.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 10.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-3z"/></svg>
+                                <span><?= $post['dislikes'] ?></span>
+                            </a>
+                        </div>
+                        <p class="card-text mt-2"><small class="text-muted">Posted on <?= date('F j, Y, g:i a', strtotime($post['created_at'])) ?></small></p>
+                    </div>
+                </div>
+            <?php endforeach; ?>
+        <?php endif; ?>
+        <a href="index.php" class="btn btn-secondary mt-3">Back to Feed</a>
+    </div>
+
+    <footer class="footer">
+        <p>&copy; <?php echo date("Y"); ?> Social Platform. All rights reserved.</p>
+    </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>
+</html>

profile_setup.php

@@ -0,0 +1,196 @@
+<?php
+session_start();
+require_once 'includes/flash_messages.php';
+
+if (!isset($_SESSION['user_id'])) {
+    header('Location: login.php');
+    exit();
+}
+
+// Pre-fill display name with username
+$displayName = $_SESSION['username'] ?? '';
+
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Complete Your Profile</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="assets/css/custom.css">
+    <style>
+        .skill-tag {
+            display: inline-flex;
+            align-items: center;
+            background-color: #007bff;
+            color: white;
+            padding: 0.25rem 0.75rem;
+            border-radius: 50rem;
+            margin-right: 0.5rem;
+            margin-bottom: 0.5rem;
+        }
+        .skill-tag .btn-close {
+            margin-left: 0.5rem;
+        }
+    </style>
+</head>
+<body>
+
+<nav class="navbar navbar-expand-lg navbar-light bg-light">
+    <div class="container-fluid">
+        <a class="navbar-brand" href="index.php">SocialApp</a>
+    </div>
+</nav>
+
+<div class="container mt-5">
+    <div class="row justify-content-center">
+        <div class="col-md-8 col-lg-6">
+            <div class="card shadow-sm">
+                <div class="card-body p-4">
+                    <h1 class="card-title text-center mb-4">Setup Your Profile</h1>
+                    <?php display_flash_message(); ?>
+                    <p class="text-center text-muted mb-4">Welcome! Let's get your profile ready.</p>
+
+                    <form action="handle_profile_setup.php" method="POST" id="profileForm">
+                        <div class="mb-3">
+                            <label for="display_name" class="form-label">Display Name</label>
+                            <input type="text" class="form-control" id="display_name" name="display_name" value="<?php echo htmlspecialchars($displayName); ?>" required>
+                        </div>
+
+                        <div class="mb-3">
+                            <label for="description" class="form-label">Description</label>
+                            <textarea class="form-control" id="description" name="description" rows="3" placeholder="Tell us a little about yourself"></textarea>
+                        </div>
+
+                        <div class="mb-3">
+                            <label for="occupation" class="form-label">Occupation</label>
+                            <select class="form-select" id="occupation" name="occupation">
+                                <option selected>Choose...</option>
+                                <option value="Developer">Developer</option>
+                                <option value="Designer">Designer</option>
+                                <option value="Manager">Manager</option>
+                                <option value="Student">Student</option>
+                                <option value="Other">Other</option>
+                            </select>
+                        </div>
+
+                        <div class="mb-3">
+                            <label for="skill_input" class="form-label">Skills (up to 10)</label>
+                            <div class="input-group">
+                                <input type="text" class="form-control" id="skill_input" placeholder="e.g., PHP, Svelte, Marketing">
+                                <button class="btn btn-outline-primary" type="button" id="add_skill_btn">Add</button>
+                            </div>
+                            <div id="skills_container" class="mt-2"></div>
+                            <input type="hidden" name="skills" id="skills_hidden_input">
+                        </div>
+
+                        <div class="mb-4">
+                            <label class="form-label">Location</label>
+                            <div class="input-group">
+                                <input type="text" class="form-control" id="location_display" name="location_display" placeholder="City, Country" readonly>
+                                <button class="btn btn-outline-secondary" type="button" id="get_location_btn">Get Location</button>
+                            </div>
+                            <input type="hidden" name="city" id="city_input">
+                            <input type="hidden" name="country" id="country_input">
+                        </div>
+
+
+                        <div class="d-grid">
+                            <button type="submit" class="btn btn-primary btn-lg">Save and Continue</button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+    document.addEventListener("DOMContentLoaded", function() {
+        const addSkillBtn = document.getElementById('add_skill_btn');
+        const skillInput = document.getElementById('skill_input');
+        const skillsContainer = document.getElementById('skills_container');
+        const skillsHiddenInput = document.getElementById('skills_hidden_input');
+        const getLocationBtn = document.getElementById('get_location_btn');
+        const locationDisplay = document.getElementById('location_display');
+        const cityInput = document.getElementById('city_input');
+        const countryInput = document.getElementById('country_input');
+
+        let skills = [];
+
+        function renderSkills() {
+            skillsContainer.innerHTML = '';
+            skills.forEach((skill, index) => {
+                const skillTag = document.createElement('div');
+                skillTag.className = 'skill-tag';
+                skillTag.innerHTML = `
+                    <span>${skill}</span>
+                    <button type="button" class="btn-close btn-close-white" aria-label="Close"></button>
+                `;
+                skillTag.querySelector('.btn-close').addEventListener('click', () => {
+                    skills.splice(index, 1);
+                    renderSkills();
+                });
+                skillsContainer.appendChild(skillTag);
+            });
+            skillsHiddenInput.value = JSON.stringify(skills);
+        }
+
+        addSkillBtn.addEventListener('click', () => {
+            const skill = skillInput.value.trim();
+            if (skill && skills.length < 10 && !skills.includes(skill)) {
+                skills.push(skill);
+                skillInput.value = '';
+                renderSkills();
+            }
+        });
+        
+        skillInput.addEventListener('keypress', function(event) {
+            if (event.key === 'Enter') {
+                event.preventDefault();
+                addSkillBtn.click();
+            }
+        });
+
+        getLocationBtn.addEventListener('click', () => {
+            if ("geolocation" in navigator) {
+                locationDisplay.value = "Fetching location...";
+                navigator.geolocation.getCurrentPosition(async (position) => {
+                    const lat = position.coords.latitude;
+                    const lon = position.coords.longitude;
+                    
+                    try {
+                        // Using a free reverse geocoding API
+                        const response = await fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lon}`);
+                        const data = await response.json();
+                        
+                        const city = data.address.city || data.address.town || data.address.village || 'Unknown City';
+                        const country = data.address.country || 'Unknown Country';
+                        
+                        locationDisplay.value = `${city}, ${country}`;
+                        cityInput.value = city;
+                        countryInput.value = country;
+
+                    } catch (error) {
+                        locationDisplay.value = "Could not fetch location details.";
+                        console.error("Error fetching location details:", error);
+                    }
+                }, (error) => {
+                    locationDisplay.value = "Location access denied.";
+                    console.error("Geolocation error:", error);
+                });
+            } else {
+                locationDisplay.value = "Geolocation is not available.";
+            }
+        });
+
+        document.getElementById('profileForm').addEventListener('submit', function() {
+            // Ensure the hidden input is up-to-date before submitting
+            skillsHiddenInput.value = JSON.stringify(skills);
+        });
+    });
+</script>
+
+</body>
+</html>

signup.php

@@ -0,0 +1,66 @@
+<?php 
+session_start();
+require_once 'includes/flash_messages.php';
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sign Up - Social Platform</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
+</head>
+<body>
+    <nav class="navbar navbar-expand-lg navbar-light bg-light">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="index.php">Social Platform</a>
+        </div>
+    </nav>
+
+    <div class="container mt-5">
+        <div class="row justify-content-center">
+            <div class="col-md-6">
+                <div class="card">
+                    <div class="card-body">
+                        <h3 class="card-title text-center">Create Your Account</h3>
+                        <?php display_flash_message(); ?>
+                        <form action="handle_signup.php" method="POST">
+                            <div class="mb-3">
+                                <label for="username" class="form-label">Username</label>
+                                <input type="text" class="form-control" id="username" name="username" required>
+                            </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>
+                            <div class="mb-3">
+                                <label for="password" class="form-label">Password</label>
+                                <input type="password" class="form-control" id="password" name="password" required>
+                            </div>
+                            <div class="mb-3">
+                                <label for="confirm_password" class="form-label">Confirm Password</label>
+                                <input type="password" class="form-control" id="confirm_password" name="confirm_password" required>
+                            </div>
+                            <div class="d-grid">
+                                <button type="submit" class="btn btn-primary">Sign Up</button>
+                            </div>
+                        </form>
+                        <p class="text-center mt-3">
+                            Already have an account? <a href="login.php">Login</a>
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <footer class="footer mt-auto py-3 bg-light fixed-bottom">
+        <div class="container">
+            <span class="text-muted">&copy; <?php echo date("Y"); ?> Social Platform. All rights reserved.</span>
+        </div>
+    </footer>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>