1

2025-10-05 15:15:12 +00:00 · 2025-10-05 15:15:12 +00:00 · 5b188f6e9c
commit 5b188f6e9c
parent 560932cd5c
7 changed files with 348 additions and 141 deletions
--- a/assets/cache/pexels_auli.json
+++ b/assets/cache/pexels_auli.json
@ -0,0 +1 @@
+{"local_url":"assets\/images\/destinations\/pexels-9963746.jpg","alt":"Scenic landscape of Auli, India with snowy mountains and a serene lake in winter.","photographer":"Kushal Verma","photographer_url":"https:\/\/www.pexels.com\/@kushal-verma-123877130"}
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@ -0,0 +1,56 @@
+
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Roboto:wght@400;500&display=swap');
+
+body {
+    font-family: 'Roboto', sans-serif;
+    background-color: #F8F9FA;
+    color: #212529;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: 'Playfair Display', serif;
+}
+
+.hero {
+    background: linear-gradient(rgba(13, 110, 253, 0.1), rgba(0, 198, 255, 0.1)), url('https://picsum.photos/1600/900') no-repeat center center;
+    background-size: cover;
+    height: 100vh;
+    color: white;
+}
+
+.hero .display-4 {
+    font-size: 4.5rem;
+    font-weight: 700;
+}
+
+.btn-primary {
+    background-color: #0D6EFD;
+    border-color: #0D6EFD;
+    border-radius: 0.75rem;
+    padding: 0.75rem 1.5rem;
+    transition: all 0.3s ease;
+}
+
+.btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+}
+
+.section {
+    padding: 6rem 0;
+}
+
+.card {
+    border: none;
+    border-radius: 0.75rem;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
+}
+
+.navbar {
+    transition: background-color 0.3s ease;
+}
+
+.navbar.scrolled {
+    background-color: rgba(255, 255, 255, 0.9);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+}
--- a/assets/images/destinations/pexels-9963746.jpg
+++ b/assets/images/destinations/pexels-9963746.jpg
--- a/assets/js/main.js
+++ b/assets/js/main.js
@ -0,0 +1,41 @@
+
+document.addEventListener('DOMContentLoaded', function () {
+    // Navbar scroll effect
+    const navbar = document.querySelector('.navbar');
+    window.addEventListener('scroll', () => {
+        if (window.scrollY > 50) {
+            navbar.classList.add('scrolled');
+        } else {
+            navbar.classList.remove('scrolled');
+        }
+    });
+
+    // Smooth scrolling for anchor links
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function (e) {
+            e.preventDefault();
+            document.querySelector(this.getAttribute('href')).scrollIntoView({
+                behavior: 'smooth'
+            });
+        });
+    });
+
+    // Contact form validation
+    const form = document.querySelector('.contact-form');
+    form.addEventListener('submit', function (e) {
+        e.preventDefault();
+        // Basic validation
+        const name = form.querySelector('#name').value;
+        const email = form.querySelector('#email').value;
+        const message = form.querySelector('#message').value;
+
+        if (name === '' || email === '' || message === '') {
+            alert('Please fill out all fields.');
+            return;
+        }
+
+        // On success
+        alert('Thank you for your message!');
+        form.reset();
+    });
+});
--- a/includes/pexels.php
+++ b/includes/pexels.php
@ -0,0 +1,40 @@
+<?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 => 20,
+    CURLOPT_USERAGENT => 'Flatlogic/Gemini-CLI'
+  ]);
+  $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) {
+    if (!is_dir(dirname($destPath))) {
+        mkdir(dirname($destPath), 0775, true);
+    }
+
+    $ch = curl_init($srcUrl);
+    $fp = fopen($destPath, 'wb');
+    curl_setopt($ch, CURLOPT_FILE, $fp);
+    curl_setopt($ch, CURLOPT_HEADER, 0);
+    curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
+    curl_setopt($ch, CURLOPT_TIMEOUT, 60);
+    $result = curl_exec($ch);
+    curl_close($ch);
+    fclose($fp);
+
+    return $result !== false;
+}
--- a/index.php
+++ b/index.php
@ -1,150 +1,203 @@
 <?php
-declare(strict_types=1);
-@ini_set('display_errors', '1');
-@error_reporting(E_ALL);
-@date_default_timezone_set('UTC');
+require_once __DIR__ . '/includes/pexels.php';

-$phpVersion = PHP_VERSION;
-$now = date('Y-m-d H:i:s');
+$destination_query = 'Auli India';
+$destination_image = [
+    'local_url' => 'https://via.placeholder.com/1200x800.png?text=Auli,+India', // Fallback
+    'alt' => 'A beautiful landscape of Auli, India',
+    'photographer' => 'N/A',
+    'photographer_url' => '#',
+];
+
+// Path for the cached JSON data
+$cache_file = __DIR__ . '/assets/cache/pexels_auli.json';
+$cache_ttl = 86400; // Cache for 24 hours
+
+$image_data = null;
+
+if (file_exists($cache_file) && (time() - filemtime($cache_file)) < $cache_ttl) {
+    $image_data = json_decode(file_get_contents($cache_file), true);
+} else {
+    $url = 'https://api.pexels.com/v1/search?query=' . urlencode($destination_query) . '&orientation=landscape&per_page=1&page=1';
+    $api_data = pexels_get($url);
+
+    if ($api_data && !empty($api_data['photos'])) {
+        $photo = $api_data['photos'][0];
+        $src = $photo['src']['large2x'] ?? $photo['src']['large'] ?? $photo['src']['original'];
+        $filename = 'pexels-' . $photo['id'] . '.jpg';
+        $targetDir = __DIR__ . '/assets/images/destinations/';
+        $targetPath = $targetDir . $filename;
+        $localUrl = 'assets/images/destinations/' . $filename;
+
+        if (!file_exists($targetPath)) {
+            download_to($src, $targetPath);
+        }
+
+        if (file_exists($targetPath)) {
+            $image_data = [
+                'local_url' => $localUrl,
+                'alt' => $photo['alt'] ?? 'Image of ' . $destination_query,
+                'photographer' => $photo['photographer'] ?? 'Unknown',
+                'photographer_url' => $photo['photographer_url'] ?? '#',
+            ];
+
+            // Cache the data
+            if (!is_dir(dirname($cache_file))) mkdir(dirname($cache_file), 0775, true);
+            file_put_contents($cache_file, json_encode($image_data));
+        }
+    }
+}
+
+if ($image_data) {
+    $destination_image = $image_data;
+}
 ?>
-<!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>TripEase</title>
+    <meta name="description" content="TripEase ignites wanderlust with curated travel inspiration and immersive experiences for your next adventure.">
+    <meta name="keywords" content="travel, trip planner, vacation, itinerary, travel community, travel blog, wanderlust, adventure travel, budget travel, luxury travel, travel deals, destination guide">
+    <meta property="og:title" content="TripEase">
+    <meta property="og:description" content="TripEase ignites wanderlust with curated travel inspiration and immersive experiences for your next adventure.">
+    <meta property="og:image" content="https://project-screens.s3.amazonaws.com/screenshots/34692/app-hero-20251005-150709.png">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:image" content="https://project-screens.s3.amazonaws.com/screenshots/34692/app-hero-20251005-150709.png">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
+    <link rel="stylesheet" href="assets/css/custom.css">
 </head>
 <body>
-  <main>
+
+    <!-- Header -->
+    <nav class="navbar navbar-expand-lg navbar-light fixed-top">
+        <div class="container">
+            <a class="navbar-brand fw-bold" href="#">TripEase</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"><a class="nav-link" href="#home">Home</a></li>
+                    <li class="nav-item"><a class="nav-link" href="#about">About</a></li>
+                    <li class="nav-item"><a class="nav-link" href="#portfolio">Destination</a></li>
+                    <li class="nav-item"><a class="nav-link" href="#testimonials">Testimonials</a></li>
+                    <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
+                </ul>
+                <a href="#" class="btn btn-primary ms-lg-3">Sign Up</a>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Hero Section -->
+    <header id="home" class="hero d-flex align-items-center text-center">
+        <div class="container">
+            <h1 class="display-4">Plan. Share. Explore.</h1>
+            <p class="lead my-4">Your next adventure starts here. Discover, plan, and share your travels with a community of wanderers.</p>
+            <a href="#about" class="btn btn-primary btn-lg">Explore Trips</a>
+        </div>
+    </header>
+
+    <!-- About Section -->
+    <section id="about" class="section">
+        <div class="container">
+            <div class="row align-items-center">
+                <div class="col-lg-6">
+                    <img src="https://picsum.photos/800/600" alt="A group of friends laughing and planning a trip together." class="img-fluid rounded-3">
+                </div>
+                <div class="col-lg-6">
+                    <h2>About TripEase</h2>
+                    <p>TripEase is more than just a travel app; it's a community-driven platform designed to inspire and empower travelers. From finding your next destination to planning every detail and sharing your experiences, we provide the tools you need to make every trip unforgettable.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Portfolio Section -->
+    <section id="portfolio" class="section bg-light">
+        <div class="container text-center">
+            <h2>Destination of the Month</h2>
+            <p class="lead mb-5">Discover Auli, India - a Himalayan ski resort and hill station.</p>
+            <div class="row">
+                <div class="col-md-12">
                    <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>
+                        <img src="<?php echo htmlspecialchars($destination_image['local_url']); ?>" alt="<?php echo htmlspecialchars($destination_image['alt']); ?>" class="card-img-top">
+                        <div class="card-body">
+                            <h5 class="card-title">Auli, India</h5>
+                            <p class="card-text">With its pristine slopes and stunning mountain views, Auli is a paradise for skiers and nature lovers alike. Photo by <a href="<?php echo htmlspecialchars($destination_image['photographer_url']); ?>"><?php echo htmlspecialchars($destination_image['photographer']); ?></a> on Pexels.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Testimonials Section -->
+    <section id="testimonials" class="section">
+        <div class="container">
+            <h2 class="text-center mb-5">What Our Travelers Say</h2>
+            <div class="row">
+                <div class="col-md-4">
+                    <div class="card p-4 text-center">
+                        <p>"TripEase made planning our group trip a breeze. The collaborative features are a game-changer!"</p>
+                        <footer class="blockquote-footer mt-3">Jane Doe</footer>
+                    </div>
+                </div>
+                <div class="col-md-4">
+                    <div class="card p-4 text-center">
+                        <p>"I love the travel style quiz! The recommendations were spot on and introduced me to places I wouldn't have found otherwise."</p>
+                        <footer class="blockquote-footer mt-3">John Smith</footer>
+                    </div>
+                </div>
+                <div class="col-md-4">
+                    <div class="card p-4 text-center">
+                        <p>"The community is so inspiring. I've discovered so many hidden gems through other travelers' stories."</p>
+                        <footer class="blockquote-footer mt-3">Emily White</footer>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Contact Section -->
+    <section id="contact" class="section bg-light">
+        <div class="container">
+            <h2 class="text-center mb-5">Get in Touch</h2>
+            <div class="row justify-content-center">
+                <div class="col-lg-6">
+                    <form class="contact-form">
+                        <div class="mb-3">
+                            <input type="text" class="form-control" id="name" placeholder="Your Name">
+                        </div>
+                        <div class="mb-3">
+                            <input type="email" class="form-control" id="email" placeholder="Your Email">
+                        </div>
+                        <div class="mb-3">
+                            <textarea class="form-control" id="message" rows="5" placeholder="Your Message"></textarea>
+                        </div>
+                        <button type="submit" class="btn btn-primary w-100">Send Message</button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="py-5 bg-dark text-white">
+        <div class="container text-center">
+            <p class="mb-0">&copy; 2025 TripEase. All Rights Reserved.</p>
+            <p><a href="/privacy.php" class="text-white">Privacy Policy</a></p>
+            <div>
+                <a href="#" class="text-white me-3"><i class="bi bi-twitter"></i></a>
+                <a href="#" class="text-white me-3"><i class="bi bi-instagram"></i></a>
+                <a href="#" class="text-white"><i class="bi bi-facebook"></i></a>
            </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)
    </footer>
+    
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="assets/js/main.js"></script>
 </body>
 </html>
--- a/privacy.php
+++ b/privacy.php
@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Privacy Policy - TripEase</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+</head>
+<body>
+    <div class="container py-5">
+        <h1>Privacy Policy</h1>
+        <p>This is a placeholder for the privacy policy.</p>
+        <a href="/" class="btn btn-primary">Back to Home</a>
+    </div>
+</body>
+</html>
				`@ -0,0 +1 @@`
				`{"local_url":"assets\/images\/destinations\/pexels-9963746.jpg","alt":"Scenic landscape of Auli, India with snowy mountains and a serene lake in winter.","photographer":"Kushal Verma","photographer_url":"https:\/\/www.pexels.com\/@kushal-verma-123877130"}`