Auto commit: 2025-12-09T17:26:41.816Z

api/pexels.php

@@ -0,0 +1,19 @@
+<?php
+header('Content-Type: application/json');
+require_once __DIR__.'/../includes/pexels.php';
+$q = isset($_GET['query']) ? $_GET['query'] : 'nature';
+$orientation = isset($_GET['orientation']) ? $_GET['orientation'] : 'landscape';
+$url = 'https://api.pexels.com/v1/search?query=' . urlencode($q) . '&orientation=' . urlencode($orientation) . '&per_page=1&page=1';
+$data = pexels_get($url);
+if (!$data || empty($data['photos'])) { echo json_encode(['error'=>'Failed to fetch image']); exit; }
+$photo = $data['photos'][0];
+$src = $photo['src']['large2x'] ?? ($photo['src']['large'] ?? $photo['src']['original']);
+$target = __DIR__ . '/../assets/images/pexels/' . $photo['id'] . '.jpg';
+download_to($src, $target);
+// Return minimal info and local relative path
+echo json_encode([
+  'id' => $photo['id'],
+  'local' => 'assets/images/pexels/' . $photo['id'] . '.jpg',
+  'photographer' => $photo['photographer'] ?? null,
+  'photographer_url' => $photo['photographer_url'] ?? null,
+]);

assets/css/custom.css

@@ -1,16 +1,15 @@
-
 /*-- Google Fonts --*/
 @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800&family=Lato:wght@400;700&display=swap');
 
 /*-- Variables --*/
 :root {
-    --primary-color: #FF7F50; /* Coral */
+    --primary-color: #FF6B6B; /* Vibrant Coral */
-    --secondary-color: #4682B4; /* Steel Blue */
+    --secondary-color: #4ECDC4; /* Aqua */
-    --background-color: #FAF9F6;
+    --background-color: #F7FFF7;
     --surface-color: #FFFFFF;
-    --text-color: #333333;
+    --text-color: #2C3E50; /* Dark Slate Blue */
     --light-gray-color: #f8f9fa;
-    --border-radius: 8px;
+    --border-radius: 12px;
     --font-family-headings: 'Nunito', sans-serif;
     --font-family-body: 'Lato', sans-serif;
 }
@@ -24,85 +23,131 @@ body {
 
 h1, h2, h3, h4, h5, h6 {
     font-family: var(--font-family-headings);
+    font-weight: 800;
+}
+
+.btn {
+    border-radius: var(--border-radius);
+    padding: 12px 30px;
     font-weight: 700;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
 }
 
 .btn-primary {
     background-color: var(--primary-color);
     border-color: var(--primary-color);
-    border-radius: var(--border-radius);
-    padding: 12px 24px;
-    font-weight: 700;
-    transition: background-color 0.3s ease;
 }
 
 .btn-primary:hover {
-    background-color: #E56A40; /* Darker coral */
+    background-color: #E55B5B; /* Darker coral */
-    border-color: #E56A40;
+    border-color: #E55B5B;
+    transform: translateY(-3px);
+    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.15);
 }
 
 .btn-secondary {
     background-color: var(--secondary-color);
     border-color: var(--secondary-color);
-    border-radius: var(--border-radius);
-    padding: 12px 24px;
-    font-weight: 700;
     color: var(--surface-color);
-    transition: background-color 0.3s ease;
 }
 
 .btn-secondary:hover {
-    background-color: #3A6A8A; /* Darker steel blue */
+    background-color: #3DB8AF; /* Darker aqua */
-    border-color: #3A6A8A;
+    border-color: #3DB8AF;
     color: var(--surface-color);
+    transform: translateY(-3px);
+    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.15);
 }
 
 /*-- Header --*/
 .navbar {
-    background-color: var(--surface-color);
+    transition: background-color 0.5s ease;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
 }
 
+.transparent-nav {
+    background-color: transparent !important;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.transparent-nav .navbar-brand,
+.transparent-nav .nav-link {
+    color: var(--surface-color) !important;
+    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
+}
+
+.scrolled {
+    background-color: var(--surface-color) !important;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+
+.scrolled .navbar-brand,
+.scrolled .nav-link {
+    color: var(--text-color) !important;
+    text-shadow: none;
+}
+
+
 .navbar-brand {
     font-family: var(--font-family-headings);
     font-weight: 800;
-    color: var(--primary-color) !important;
 }
 
 /*-- Hero Section --*/
 .hero-section {
-    padding: 100px 0;
+    padding: 150px 0;
-    background: linear-gradient(135deg, rgba(255, 127, 80, 0.1), rgba(255, 127, 80, 0));
+    background-size: cover;
+    background-position: center;
+    position: relative;
+    color: white;
     text-align: center;
 }
 
+.hero-section::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+}
+
+.hero-section .container {
+    position: relative;
+    z-index: 2;
+}
+
 .hero-section h1 {
-    font-size: 3.5rem;
+    font-size: 4.5rem;
     font-weight: 800;
+    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
 }
 
 .hero-section .lead {
-    font-size: 1.25rem;
+    font-size: 1.5rem;
-    max-width: 600px;
+    max-width: 650px;
     margin: 20px auto 40px;
+    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
 }
 
 /*-- Sections --*/
 .section {
-    padding: 80px 0;
+    padding: 100px 0;
 }
 
 .section-title {
     text-align: center;
-    margin-bottom: 50px;
+    margin-bottom: 60px;
-    font-size: 2.5rem;
+    font-size: 3rem;
     font-weight: 800;
 }
 
 /*-- How it works --*/
 .how-it-works-icon {
-    font-size: 3rem;
+    font-size: 4rem;
     color: var(--primary-color);
+    margin-bottom: 20px;
 }
 
 /*-- Features --*/
@@ -110,44 +155,49 @@ h1, h2, h3, h4, h5, h6 {
     background-color: var(--surface-color);
     border: none;
     border-radius: var(--border-radius);
-    padding: 30px;
+    padding: 40px;
-    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
+    box-shadow: 0 10px 30px rgba(0,0,0,0.07);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     height: 100%;
 }
 
 .feature-card:hover {
-    transform: translateY(-5px);
+    transform: translateY(-10px);
-    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
+    box-shadow: 0 15px 40px rgba(0,0,0,0.12);
 }
 
 .feature-card .icon {
-    font-size: 2.5rem;
+    font-size: 3rem;
     color: var(--secondary-color);
-    margin-bottom: 20px;
+    margin-bottom: 25px;
 }
 
 
 /*-- Search Widget --*/
 #search-widget {
     background-color: var(--surface-color);
-    padding: 40px;
+    padding: 50px;
-    border-radius: var(--border-radius);
+    border-radius: 20px;
-    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
+    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
+    margin-top: -80px;
+    position: relative;
+    z-index: 3;
 }
 
 /*-- Footer --*/
 .footer {
-    background-color: #343a40;
+    background-color: #2C3E50; /* Dark Slate Blue */
     color: var(--surface-color);
-    padding: 40px 0;
+    padding: 50px 0;
 }
 
 .footer a {
-    color: #f8f9fa;
+    color: #4ECDC4; /* Aqua */
     text-decoration: none;
+    transition: color 0.3s ease;
 }
 
 .footer a:hover {
-    text-decoration: underline;
+    color: var(--surface-color);
+    text-decoration: none;
 }

includes/pexels.php

@@ -0,0 +1,25 @@
+<?php
+function pexels_key() {
+  $k = getenv('PEXELS_KEY');
+  return $k && strlen($k) > 0 ? $k : 'Vc99rnmOhHhJAbgGQoKLZtsaIVfkeownoQNbTj78VemUjKh08ZYRbf18';
+}
+function pexels_get($url) {
+  $ch = curl_init();
+  curl_setopt_array($ch, [
+    CURLOPT_URL => $url,
+    CURLOPT_RETURNTRANSFER => true,
+    CURLOPT_HTTPHEADER => [ 'Authorization: '. pexels_key() ],
+    CURLOPT_TIMEOUT => 15,
+  ]);
+  $resp = curl_exec($ch);
+  $code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
+  curl_close($ch);
+  if ($code >= 200 && $code < 300 && $resp) return json_decode($resp, true);
+  return null;
+}
+function download_to($srcUrl, $destPath) {
+  $data = file_get_contents($srcUrl);
+  if ($data === false) return false;
+  if (!is_dir(dirname($destPath))) mkdir(dirname($destPath), 0775, true);
+  return file_put_contents($destPath, $data) !== false;
+}

index.php

@@ -2,6 +2,20 @@
 ini_set('display_errors', 1);
 ini_set('display_startup_errors', 1);
 error_reporting(E_ALL);
+
+require_once 'includes/pexels.php';
+$query = 'family';
+$orientation = 'landscape';
+$url = 'https://api.pexels.com/v1/search?query=' . urlencode($query) . '&orientation=' . urlencode($orientation) . '&per_page=1&page=1';
+$data = pexels_get($url);
+$hero_image_url = '';
+if ($data && !empty($data['photos'])) {
+    $photo = $data['photos'][0];
+    $src = $photo['src']['large2x'] ?? ($photo['src']['large'] ?? $photo['src']['original']);
+    $target = __DIR__ . '/assets/images/pexels/' . $photo['id'] . '.jpg';
+    download_to($src, $target);
+    $hero_image_url = 'assets/images/pexels/' . $photo['id'] . '.jpg';
+}
 ?>
 <!DOCTYPE html>
 <html lang="en">
@@ -37,12 +51,17 @@ error_reporting(E_ALL);
     <!-- Custom CSS -->
     <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
 
+    <style>
+        .hero-section {
+            background-image: url('<?php echo $hero_image_url; ?>');
+        }
+    </style>
 </head>
 <body>
 
     <!-- Header -->
     <header>
-        <nav class="navbar navbar-expand-lg navbar-light fixed-top">
+        <nav class="navbar navbar-expand-lg navbar-light fixed-top transparent-nav">
             <div class="container">
                 <a class="navbar-brand" href="#">👵 Grandma's Getaway</a>
                 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
@@ -63,10 +82,10 @@ error_reporting(E_ALL);
                             <a class="nav-link" href="contact.php">Contact</a>
                         </li>
                         <li class="nav-item ms-lg-3">
-                            <a class="btn btn-outline-secondary btn-sm" href="#">Sign In</a>
+                            <a class="nav-link" href="register.php">Register</a>
                         </li>
-                         <li class="nav-item ms-lg-2">
+                        <li class="nav-item">
-                            <a class="btn btn-primary btn-sm" href="#">Sign Up</a>
+                            <a class="nav-link" href="login.php">Sign In</a>
                         </li>
                     </ul>
                 </div>
@@ -75,7 +94,7 @@ error_reporting(E_ALL);
     </header>
 
     <main>
-        <section class="hero-section" style="margin-top: 70px;">
+        <section class="hero-section">
             <div class="container">
                 <div class="row">
                     <div class="col-md-10 offset-md-1">
@@ -177,5 +196,16 @@ error_reporting(E_ALL);
     <!-- Custom JS -->
     <script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
 
+    <script>
+        document.addEventListener('scroll', function() {
+            const header = document.querySelector('.transparent-nav');
+            if (window.scrollY > 50) {
+                header.classList.add('scrolled');
+            } else {
+                header.classList.remove('scrolled');
+            }
+        });
+    </script>
+
 </body>
 </html>

login.php

@@ -0,0 +1,63 @@
+<?php
+session_start();
+require_once 'db/config.php';
+
+$message = '';
+
+if ($_SERVER['REQUEST_METHOD'] == 'POST') {
+    $username = $_POST['username'];
+    $password = $_POST['password'];
+
+    if (empty($username) || empty($password)) {
+        $message = 'Please fill in all fields.';
+    } else {
+        try {
+            $db = db();
+            $stmt = $db->prepare("SELECT * FROM users WHERE username = ?");
+            $stmt->execute([$username]);
+            $user = $stmt->fetch(PDO::FETCH_ASSOC);
+
+            if ($user && password_verify($password, $user['password_hash'])) {
+                $_SESSION['user_id'] = $user['id'];
+                $_SESSION['username'] = $user['username'];
+                header("Location: index.php");
+                exit;
+            } else {
+                $message = 'Invalid username or password.';
+            }
+        } catch (PDOException $e) {
+            $message = 'Error: ' . $e->getMessage();
+        }
+    }
+}
+?>
+<!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">
+</head>
+<body>
+    <div class="container mt-5">
+        <h2>Login</h2>
+        <?php if (!empty($message)): ?>
+            <div class="alert alert-info">
+                <?php echo $message; ?>
+            </div>
+        <?php endif; ?>
+        <form action="login.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="password" class="form-label">Password</label>
+                <input type="password" class="form-control" id="password" name="password" required>
+            </div>
+            <button type="submit" class="btn btn-primary">Login</button>
+        </form>
+    </div>
+</body>
+</html>

register.php

@@ -0,0 +1,152 @@
+
+<?php
+session_start();
+require_once 'db/config.php';
+
+$message = '';
+
+if ($_SERVER["REQUEST_METHOD"] == "POST") {
+    $username = trim($_POST['username']);
+    $email = trim($_POST['email']);
+    $password = $_POST['password'];
+
+    if (empty($username) || empty($email) || empty($password)) {
+        $message = 'Please fill in all fields.';
+    } elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
+        $message = 'Invalid email format.';
+    } else {
+        try {
+            $pdo = db();
+            
+            // Check if username or email already exists
+            $stmt = $pdo->prepare("SELECT * FROM users WHERE username = :username OR email = :email");
+            $stmt->execute(['username' => $username, 'email' => $email]);
+            if ($stmt->fetch()) {
+                $message = 'Username or email already taken.';
+            } else {
+                // Hash the password
+                $password_hash = password_hash($password, PASSWORD_DEFAULT);
+                
+                // Insert new user
+                $stmt = $pdo->prepare("INSERT INTO users (username, email, password_hash) VALUES (:username, :email, :password_hash)");
+                if ($stmt->execute(['username' => $username, 'email' => $email, 'password_hash' => $password_hash])) {
+                    $message = 'Registration successful! You can now <a href="login.php">log in</a>.';
+                } else {
+                    $message = 'An error occurred. Please try again.';
+                }
+            }
+        } catch (PDOException $e) {
+            error_log('Registration failed: ' . $e->getMessage());
+            $message = 'An error occurred. Please try again later.';
+        }
+    }
+}
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Register - Flatlogic</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="assets/css/custom.css">
+</head>
+<body>
+    <nav class="navbar navbar-expand-lg navbar-light bg-light">
+        <div class="container">
+            <a class="navbar-brand" href="index.php">
+                <img src="https://flatlogic.com/assets/images/logo.svg" alt="Flatlogic logo" width="120">
+            </a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav ms-auto">
+                    <li class="nav-item">
+                        <a class="nav-link" href="index.php">Home</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="contact.php">Contact</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#">Sign In</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+
+    <main class="container mt-5">
+        <div class="row justify-content-center">
+            <div class="col-md-6">
+                <div class="card">
+                    <div class="card-body">
+                        <h1 class="card-title text-center mb-4">Create an Account</h1>
+                        <?php if ($message): ?>
+                            <div class="alert alert-info"><?php echo htmlspecialchars($message); ?></div>
+                        <?php endif; ?>
+                        <form action="register.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="d-grid">
+                                <button type="submit" class="btn btn-primary">Register</button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+                <p class="text-center mt-3">
+                    Already have an account? <a href="login.php">Sign In</a>
+                </p>
+            </div>
+        </div>
+    </main>
+
+    <footer class="bg-light text-center text-lg-start mt-5">
+        <div class="container p-4">
+            <div class="row">
+                <div class="col-lg-6 col-md-12 mb-4 mb-md-0">
+                    <h5 class="text-uppercase">Flatlogic</h5>
+                    <p>
+                        We create stunning responsive websites and web applications.
+                    </p>
+                </div>
+                <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
+                    <h5 class="text-uppercase">Links</h5>
+                    <ul class="list-unstyled mb-0">
+                        <li>
+                            <a href="index.php" class="text-dark">Home</a>
+                        </li>
+                        <li>
+                            <a href="#!" class="text-dark">About Us</a>
+                        </li>
+                    </ul>
+                </div>
+                <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
+                    <h5 class="text-uppercase">Support</h5>
+                    <ul class="list-unstyled mb-0">
+                        <li>
+                            <a href="contact.php" class="text-dark">Contact Us</a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+        <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
+            © 2025 Copyright:
+            <a class="text-dark" href="https://flatlogic.com/">Flatlogic</a>
+        </div>
+    </footer>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>