This commit is contained in:
Flatlogic Bot 2025-10-05 15:15:12 +00:00
parent 560932cd5c
commit 5b188f6e9c
7 changed files with 348 additions and 141 deletions

1
assets/cache/pexels_auli.json vendored Normal file
View File

@ -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"}

56
assets/css/custom.css Normal file
View File

@ -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);
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 361 KiB

41
assets/js/main.js Normal file
View File

@ -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();
});
});

40
includes/pexels.php Normal file
View File

@ -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;
}

335
index.php
View File

@ -1,150 +1,203 @@
<?php <?php
declare(strict_types=1); require_once __DIR__ . '/includes/pexels.php';
@ini_set('display_errors', '1');
@error_reporting(E_ALL);
@date_default_timezone_set('UTC');
$phpVersion = PHP_VERSION; $destination_query = 'Auli India';
$now = date('Y-m-d H:i:s'); $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"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>New Style</title> <title>TripEase</title>
<?php <meta name="description" content="TripEase ignites wanderlust with curated travel inspiration and immersive experiences for your next adventure.">
// Read project preview data from environment <meta name="keywords" content="travel, trip planner, vacation, itinerary, travel community, travel blog, wanderlust, adventure travel, budget travel, luxury travel, travel deals, destination guide">
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? ''; <meta property="og:title" content="TripEase">
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? ''; <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">
<?php if ($projectDescription): ?> <meta name="twitter:card" content="summary_large_image">
<!-- Meta description --> <meta name="twitter:image" content="https://project-screens.s3.amazonaws.com/screenshots/34692/app-hero-20251005-150709.png">
<meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' /> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Open Graph meta tags --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" /> <link rel="stylesheet" href="assets/css/custom.css">
<!-- 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>
</head> </head>
<body> <body>
<main>
<div class="card"> <!-- Header -->
<h1>Analyzing your requirements and generating your website…</h1> <nav class="navbar navbar-expand-lg navbar-light fixed-top">
<div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes"> <div class="container">
<span class="sr-only">Loading…</span> <a class="navbar-brand fw-bold" href="#">TripEase</a>
</div> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<p class="hint"><?= ($_SERVER['HTTP_HOST'] ?? '') === 'appwizzy.com' ? 'AppWizzy' : 'Flatlogic' ?> AI is collecting your requirements and applying the first changes.</p> <span class="navbar-toggler-icon"></span>
<p class="hint">This page will update automatically as the plan is implemented.</p> </button>
<p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p> <div class="collapse navbar-collapse" id="navbarNav">
</div> <ul class="navbar-nav ms-auto">
</main> <li class="nav-item"><a class="nav-link" href="#home">Home</a></li>
<footer> <li class="nav-item"><a class="nav-link" href="#about">About</a></li>
Page updated: <?= htmlspecialchars($now) ?> (UTC) <li class="nav-item"><a class="nav-link" href="#portfolio">Destination</a></li>
</footer> <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">
<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>
</div>
</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> </body>
</html> </html>

16
privacy.php Normal file
View File

@ -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>