v3

assets/css/custom.css

@@ -0,0 +1,47 @@
+body {
+    background-color: #FFFFFF;
+    font-family: 'Poppins', sans-serif;
+}
+
+.navbar {
+    border-bottom: 1px solid #eee;
+}
+
+.delulu-card {
+    background-color: #F8F9FA;
+    border: none;
+    border-radius: 1rem;
+    transition: all 0.2s ease-in-out;
+}
+
+.delulu-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
+}
+
+.card-title {
+    color: #A076F9;
+    font-weight: bold;
+}
+
+.card-subtitle {
+    color: #74C0FC;
+}
+
+.btn-primary {
+    background-color: #A076F9;
+    border-color: #A076F9;
+}
+
+.btn-primary:hover {
+    background-color: #74C0FC;
+    border-color: #74C0FC;
+}
+
+.gradient-bg {
+    background: linear-gradient(135deg, #A076F9, #74C0FC);
+    color: white;
+    padding: 4rem 2rem;
+    border-radius: 1rem;
+    margin-bottom: 2rem;
+}

auth.php

@@ -0,0 +1,62 @@
+<?php
+session_start();
+
+header('Content-Type: application/json');
+
+require __DIR__ . '/vendor/autoload.php'; // Composer Autoloader
+
+use Kreait\Firebase\Factory;
+use Kreait\Firebase\Exception\Auth\InvalidToken;
+
+$response = ['status' => 'error', 'message' => 'Invalid request'];
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $input = json_decode(file_get_contents('php://input'), true);
+
+    $action = $input['action'] ?? '';
+    $idToken = $input['idToken'] ?? '';
+
+    // Initialize Firebase Admin SDK
+    // IMPORTANT: Replace 'path/to/your/serviceAccountKey.json' with the actual path to your Firebase service account key file.
+    // This file contains your project's credentials and should be kept secure.
+    // You can download it from Firebase Console -> Project settings -> Service accounts -> Generate new private key.
+    try {
+        $factory = (new Factory())->withServiceAccount(__DIR__ . '/firebase-service-account.json');
+        $auth = $factory->createAuth();
+    } catch (\Exception $e) {
+        error_log('Firebase Admin SDK initialization error: ' . $e->getMessage());
+        $response = ['status' => 'error', 'message' => 'Server configuration error.'];
+        echo json_encode($response);
+        exit;
+    }
+
+
+    if ($action === 'signin' && !empty($idToken)) {
+        try {
+            $verifiedIdToken = $auth->verifyIdToken($idToken);
+            $uid = $verifiedIdToken->claims()->get('sub');
+            $email = $verifiedIdToken->claims()->get('email');
+            $displayName = $verifiedIdToken->claims()->get('name');
+
+            $_SESSION['user_id'] = $uid;
+            $_SESSION['user_email'] = $email;
+            $_SESSION['user_name'] = $displayName;
+            $_SESSION['is_logged_in'] = true;
+
+            $response = ['status' => 'success', 'message' => 'Sign-in successful.', 'user' => ['uid' => $uid, 'email' => $email, 'name' => $displayName]];
+        } catch (InvalidToken $e) {
+            $response = ['status' => 'error', 'message' => 'Invalid Firebase ID token.'];
+            error_log('Firebase ID token verification failed: ' . $e->getMessage());
+        } catch (\Exception $e) {
+            $response = ['status' => 'error', 'message' => 'Authentication failed.'];
+            error_log('General authentication error: ' . $e->getMessage());
+        }
+    } else if ($action === 'signout') {
+        session_unset();
+        session_destroy();
+        $response = ['status' => 'success', 'message' => 'Sign-out successful. Session destroyed.'];
+    }
+}
+
+echo json_encode($response);
+?>

db/migrations/001_create_delulus_table.sql

@@ -0,0 +1,7 @@
+CREATE TABLE IF NOT EXISTS delulus (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    username VARCHAR(255) NOT NULL,
+    title VARCHAR(255) NOT NULL,
+    body TEXT NOT NULL,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);

db/seed.php

@@ -0,0 +1,34 @@
+<?php
+require_once __DIR__ . '/../db/config.php';
+
+$delulus = [
+    [
+        'username' => 'DreamyDolphin',
+        'title' => 'Manifesting a trip to Japan',
+        'body' => 'I can already taste the ramen and see the cherry blossoms. My bags are packed (in my head).'
+    ],
+    [
+        'username' => 'CosmicCat',
+        'title' => 'My cat is secretly a world-renowned philosopher',
+        'body' => 'He just sits there, judging my life choices. I am sure he is pondering the meaning of existence.'
+    ],
+    [
+        'username' => 'StarlightSailor',
+        'title' => 'I am the main character',
+        'body' => 'The world is my movie, and I am just waiting for the plot twist. It is going to be epic.'
+    ],
+    [
+        'username' => 'MoonbeamMoth',
+        'title' => 'My plants are my therapists',
+        'body' => 'They listen to all my problems and never talk back. Best therapy session ever.'
+    ],
+];
+
+$pdo = db();
+$stmt = $pdo->prepare('INSERT INTO delulus (username, title, body) VALUES (?, ?, ?)');
+
+foreach ($delulus as $delulu) {
+    $stmt->execute([$delulu['username'], $delulu['title'], $delulu['body']]);
+}
+
+echo 'Database seeded successfully!';

firebase-service-account.json

@@ -0,0 +1,29 @@
+{ "type": "service_account", "project_id": "dululu-fe617", "private_key_id": "f994dbe9213123675911cb1556e73579f9a2d5b0", "private_key": "-----BEGIN PRIVATE KEY-----
+MIIEvAIBADANBgkqhkiG9w0BAQEFAASCBKYwggSiAgEAAoIBAQDIakeW+EiZZZXx
+sbJ2NTkXDk6zbiyUHb3XGsVzfgaTVRIjltV6aFJLKa9qz/hHvUAZn0sr0o95gz+8
+B1bBLVTABS54Sx1flhcCbVIFCZ9s25yDbV2OvL22QG1RjrhUoTMwvLaAW43kud77
+OzS3tlL4pDiv+77jE17fC96VfTlmpRzpIJWdEdMN87UZlsnSdXh7Gp0U0+s6bnTv
+5YuB5L38dxPYcsze7s/cbcm1S5sW1eCDWmlX+V4l77AgzJ4RzMoRxGqoN5tykzHR
+wRnaX+yu60SkN4rXgubfZdIkTI1+hpsxJtSt5P/etJ/4dxwpyAFZStbAk1EQ0rzu
+WZ9Ce+kDAgMBAAECggEABteJb7SiWwCRnBvKQ4z6UMGvf/3y9zmFkGgF7FmoAIai
+d0Bt6pYZk/oI+0ThmxQ6saCqMKoEx8KzhvXam5FE01kVXYxjgGWI1yHfAb1y3Bcq
+Yn8aiVhMVW/YECLv+ejNf17OfaAHGdxkBS4WniWJ8yyq7MMc6dIVQf1hiACG6sgI
+7Mf+ojrtRfKu/H4I6bxsN8OM52qrk0ECFkR+hxwo5TG7XA9AdoG2nsGUyjG5jBaj
+pLec9qOo1ohBFx4wojr4r6SPnttMm74BMWH65huS+bfBSoXhTDZMBMNz6TRmjf7o
++/2qLRAMxxAbYyy5JWZSZZNA3aZT347mMwxAczMniQKBgQDn+Q1KLuV7lI3E/Fy6
+EktNR+DPfB/3bTA/9Ssuh7cbTvDBOE/EeS9ETppSvlqh5+JycVhK5GSYi62CFQE4
+2TI/iGv962X1Iw1fRLpSMJQ7caHC8Uj0qdGrU0Bz8D/Ct7oD4J9orLvC4iEOYL5K
+6nrX3Pp4yeVBJoME5hSE4wvVCQKBgQDdLHMdicyDkr05VNt8vwoQC3Er9Nw+5zDM
+DHADXaEX8W1Qz3xxHKNCsi48ZhMoVGsvgb5SAo9t7RraqhJZKsFB8rDAfqo8WBl7
+TTeWyZM1QX0WIt1pTo2MPWUlT155o73O/dfMuKIkWUdSOGvdjL5OetNcaeVTIlir
+4p94mpK8qwKBgHJcKL4aso2jJeUoGLquzCrUNbN0WPoM/U16m4g75fxzhWNsVH7i
+03eUXKZQK7RH8i5DTKjXQfSmX6qSmmChSxFhOwQaadBZMH14D3b3dgx8L6hAdZwQ
+oEobJ9pAZd6j3vOMaGodRg+ElZFWBlo+kMMcsOqddgURbGQc3Z7JpAqpAoGARawr
+80EmeMgv7bCKl+iCXf2MwCEZhINFvvGoE5daGPXHzu4dsHAqCeehYwtwu4KkZUnE
+z4bY8fMAQ6PRtd8fFAxEm88LB4llNY9klI6ZXexpilOfVf4V3vi0NSWkiEMJlvwm
+D+qVwUeSjRcS+67LgGN206TURfUK49K3E8H1uZMCgYBRXJd64BKViLPUFUJBdmz8
+NHKrnGQiVo57NLx/eXvvvI3/Yd3AGkUdapgkT2sCTHh9aoczgHXcjmlIcho1Q5Jz
+0fkUZkjFwuSn5XjPyVDipHA46M+UqHXZ7E88TNisXTzZApj2YhlgUQNQfR8wCDup
+Ccwcz12GqS1ZWpK9SoWAFw==
+-----END PRIVATE KEY-----
+", "client_email": "firebase-adminsdk-fbsvc @dululu-fe617.iam.gserviceaccount.com", "client_id": "104495485400716482072", "auth_uri": "https://accounts.google.com/o/oauth2/auth", "token_uri": "https://oauth2.googleapis.com/token", "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs", "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/firebase-adminsdk-fbsvc%40dululu-fe617.iam.gserviceaccount.com", "universe_domain": "googleapis.com" }

includes/firebase_config.php

@@ -0,0 +1,15 @@
+<?php
+// firebase_config.php
+// This file will hold your Firebase project configuration.
+// You need to replace the placeholder values with your actual Firebase project settings.
+// You can find these values in your Firebase project console under Project settings -> General -> Your apps.
+
+return [
+    'apiKey'            => 'AIzaSyCwEATlIVGKEvm-Ph1oH0-fOySmx7hBYkg',
+    'authDomain'        => 'dululu-fe617.firebaseapp.com',
+    'projectId'         => 'dululu-fe617',
+    'storageBucket'     => 'dululu-fe617.firebasestorage.app',
+    'messagingSenderId' => '553086833572',
+    'appId'             => '1:553086833572:web:2536751230886bd8552731',
+    'measurementId'     => 'G-5DJ9LXGSZZ' // Optional, if you use Google Analytics for Firebase
+];

index.php

@@ -1,150 +1,185 @@
 <?php
 declare(strict_types=1);
-@ini_set('display_errors', '1');
-@error_reporting(E_ALL);
-@date_default_timezone_set('UTC');
+require_once __DIR__ . '/db/config.php';
+require_once __DIR__ . '/includes/firebase_config.php';
 
-$phpVersion = PHP_VERSION;
-$now = date('Y-m-d H:i:s');
+$firebaseConfig = require __DIR__ . '/includes/firebase_config.php';
+
+$delulus = [];
+try {
+    $pdo = db();
+    $stmt = $pdo->query('SELECT username, title, body, created_at FROM delulus ORDER BY created_at DESC');
+    $delulus = $stmt->fetchAll();
+} catch (PDOException $e) {
+    // For now, we just show an error. In a real app, you'd log this.
+    error_log($e->getMessage());
+}
+
+$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'A playful social space where imagination meets validation.';
+$projectTitle = 'Delulu is the New Sululu';
 ?>
 <!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 -->
+    <title><?= htmlspecialchars($projectTitle) ?></title>
+    
+    <meta name="description" content="<?= htmlspecialchars($projectDescription) ?>" />
+    <meta property="og:title" content="<?= htmlspecialchars($projectTitle) ?>" />
     <meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
-  <!-- Twitter meta tags -->
+    <meta property="twitter:card" content="summary_large_image" />
+    <meta property="twitter:title" content="<?= htmlspecialchars($projectTitle) ?>" />
     <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; ?>
+
+    <?php if (!empty($_SERVER['PROJECT_IMAGE_URL'])): ?>
+    <meta property="og:image" content="<?= htmlspecialchars($_SERVER['PROJECT_IMAGE_URL']) ?>" />
+    <meta property="twitter:image" content="<?= htmlspecialchars($_SERVER['PROJECT_IMAGE_URL']) ?>" />
+    <?php endif; ?>
+
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/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=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);
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
+
+    <script type="module">
+      // Import the functions you need from the SDKs you need
+      import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-app.js";
+      import { getAuth, GoogleAuthProvider, signInWithPopup, signOut, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-auth.js";
+      // TODO: Add SDKs for Firebase products that you want to use
+      // https://firebase.google.com/docs/web/setup#available-libraries
+
+      // Your web app's Firebase configuration
+      const firebaseConfig = <?= json_encode($firebaseConfig) ?>;
+
+      // Initialize Firebase
+      const app = initializeApp(firebaseConfig);
+      const auth = getAuth(app);
+      const provider = new GoogleAuthProvider();
+
+      const authUi = document.getElementById('auth-ui');
+      const signInButton = document.getElementById('signInButton');
+
+      // Update UI based on auth state
+      onAuthStateChanged(auth, (user) => {
+        if (user) {
+          // User is signed in
+          authUi.innerHTML = `
+            <span class="navbar-text me-3">Welcome, \${user.displayName}</span>
+            <button id="signOutButton" class="btn btn-outline-danger">Sign Out</button>
+          `;
+          document.getElementById('signOutButton').addEventListener('click', () => {
+            signOut(auth).then(() => {
+              // Sign-out successful.
+              console.log('User signed out');
+            }).catch((error) => {
+              // An error happened.
+              console.error('Sign out error:', error);
+            });
+          });
+          // After successful sign-in, send ID token to backend for session management
+          user.getIdToken().then(idToken => {
+            fetch('auth.php', {
+              method: 'POST',
+              headers: {
+                'Content-Type': 'application/json',
+              },
+              body: JSON.stringify({ idToken: idToken, action: 'signin' }),
+            })
+            .then(response => response.json())
+            .then(data => {
+              if (data.status === 'success') {
+                console.log('Backend session established:', data.message);
+              } else {
+                console.error('Backend session error:', data.message);
               }
-    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;
+            })
+            .catch(error => {
+              console.error('Error sending token to backend:', error);
+            });
+          });
+
+        } else {
+          // User is signed out
+          authUi.innerHTML = `<button id="signInButton" class="btn btn-primary">Sign in with Google</button>`;
+          document.getElementById('signInButton').addEventListener('click', () => {
+            signInWithPopup(auth, provider)
+              .then((result) => {
+                // This gives you a Google Access Token. You can use it to access the Google API.
+                const credential = GoogleAuthProvider.credentialFromResult(result);
+                const token = credential.accessToken;
+                // The signed-in user info.
+                const user = result.user;
+                console.log('User signed in:', user.displayName);
+              }).catch((error) => {
+                // Handle Errors here.
+                const errorCode = error.code;
+                const errorMessage = error.message;
+                // The email of the user's account used.
+                const email = error.customData.email;
+                // The AuthCredential type that was used.
+                const credential = GoogleAuthProvider.credentialFromError(error);
+                console.error('Sign-in error:', errorMessage);
+              });
+          });
         }
-    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>
+      });
+    </script>
 </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>
+
+    <nav class="navbar navbar-expand-lg navbar-light bg-white">
+        <div class="container">
+            <a class="navbar-brand" href="#" style="color: #A076F9; font-weight: bold;"><?= htmlspecialchars($projectTitle) ?></a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav ms-auto">
+                    <li class="nav-item" id="auth-ui">
+                        <!-- Authentication UI will be rendered here -->
+                        <button id="signInButton" class="btn btn-primary">Sign in with Google</button>
+                    </li>
+                </ul>
             </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>
+    </nav>
+
+    <main class="container my-5">
+        <div class="text-center gradient-bg">
+            <h1 class="display-4">Welcome to the Delulu Space</h1>
+            <p class="lead">Share your dreams, manifest your future, and find your sululu.</p>
+        </div>
+
+        <div class="row">
+            <?php if (empty($delulus)): ?>
+                <div class="col">
+                    <div class="alert alert-info">No delulus posted yet. Be the first!</div>
+                </div>
+            <?php else: ?>
+                <?php foreach ($delulus as $delulu): ?>
+                <div class="col-md-6 col-lg-4 mb-4">
+                    <div class="card delulu-card h-100">
+                        <div class="card-body">
+                            <h5 class="card-title"><?= htmlspecialchars($delulu['title']) ?></h5>
+                            <h6 class="card-subtitle mb-2 text-muted">@<?= htmlspecialchars($delulu['username']) ?></h6>
+                            <p class="card-text"><?= nl2br(htmlspecialchars(substr($delulu['body'], 0, 100))) . (strlen($delulu['body']) > 100 ? '...' : '') ?></p>
+                        </div>
+                        <div class="card-footer bg-transparent border-0 text-end">
+                             <small class="text-muted"><?= date('M j, Y', strtotime($delulu['created_at'])) ?></small>
+                        </div>
+                    </div>
+                </div>
+                <?php endforeach; ?>
+            <?php endif; ?>
         </div>
     </main>
-  <footer>
-    Page updated: <?= htmlspecialchars($now) ?> (UTC)
+
+    <footer class="text-center py-4">
+        <p>&copy; <?= date('Y') ?> <?= htmlspecialchars($projectTitle) ?>. All rights reserved.</p>
     </footer>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
 </body>
 </html>