Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
8a4e8fcb10 |
81
assets/css/custom.css
Normal file
81
assets/css/custom.css
Normal file
@ -0,0 +1,81 @@
|
|||||||
|
|
||||||
|
:root {
|
||||||
|
--primary-color: #7C3AED;
|
||||||
|
--secondary-color: #F3E8FF;
|
||||||
|
--background-color: #FFFFFF;
|
||||||
|
--surface-color: #F9FAFB;
|
||||||
|
--text-color: #111827;
|
||||||
|
--heading-font: 'Poppins', sans-serif;
|
||||||
|
--body-font: 'Inter', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
html.dark {
|
||||||
|
--primary-color: #A78BFA;
|
||||||
|
--secondary-color: #37304A;
|
||||||
|
--background-color: #111827;
|
||||||
|
--surface-color: #1F2937;
|
||||||
|
--text-color: #F9FAFB;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: var(--background-color);
|
||||||
|
color: var(--text-color);
|
||||||
|
font-family: var(--body-font);
|
||||||
|
transition: background-color 0.3s, color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
font-family: var(--heading-font);
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar {
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
}
|
||||||
|
.navbar.bg-body-tertiary {
|
||||||
|
background-color: var(--background-color) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background-color: var(--primary-color);
|
||||||
|
border-color: var(--primary-color);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.btn-primary:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-section {
|
||||||
|
background: linear-gradient(45deg, rgba(124, 58, 237, 0.1), rgba(167, 139, 250, 0.1));
|
||||||
|
}
|
||||||
|
|
||||||
|
html.dark .hero-section {
|
||||||
|
background: linear-gradient(45deg, rgba(167, 139, 250, 0.1), rgba(55, 48, 74, 0.2));
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card {
|
||||||
|
background-color: var(--surface-color);
|
||||||
|
border: 1px solid transparent;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.service-card:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
border-color: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fade-in Animation */
|
||||||
|
.fade-in-up {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(20px);
|
||||||
|
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-in-up-visible {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle-btn {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
38
assets/js/main.js
Normal file
38
assets/js/main.js
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
// Theme toggle
|
||||||
|
const themeToggle = document.getElementById('theme-toggle');
|
||||||
|
const htmlElement = document.documentElement;
|
||||||
|
|
||||||
|
// Set initial theme based on saved preference or system setting
|
||||||
|
if (localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||||||
|
htmlElement.classList.add('dark');
|
||||||
|
} else {
|
||||||
|
htmlElement.classList.remove('dark');
|
||||||
|
}
|
||||||
|
|
||||||
|
themeToggle.addEventListener('click', () => {
|
||||||
|
if (htmlElement.classList.contains('dark')) {
|
||||||
|
htmlElement.classList.remove('dark');
|
||||||
|
localStorage.setItem('theme', 'light');
|
||||||
|
} else {
|
||||||
|
htmlElement.classList.add('dark');
|
||||||
|
localStorage.setItem('theme', 'dark');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Scroll animations
|
||||||
|
const observer = new IntersectionObserver((entries) => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
entry.target.classList.add('fade-in-up-visible');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, {
|
||||||
|
threshold: 0.1
|
||||||
|
});
|
||||||
|
|
||||||
|
document.querySelectorAll('.fade-in-up').forEach(el => {
|
||||||
|
observer.observe(el);
|
||||||
|
});
|
||||||
|
});
|
||||||
272
index.php
272
index.php
@ -1,150 +1,146 @@
|
|||||||
<?php
|
<!DOCTYPE html>
|
||||||
declare(strict_types=1);
|
|
||||||
@ini_set('display_errors', '1');
|
|
||||||
@error_reporting(E_ALL);
|
|
||||||
@date_default_timezone_set('UTC');
|
|
||||||
|
|
||||||
$phpVersion = PHP_VERSION;
|
|
||||||
$now = date('Y-m-d H:i:s');
|
|
||||||
?>
|
|
||||||
<!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>Paws at Home - Premium Pet Services</title>
|
||||||
<?php
|
|
||||||
// Read project preview data from environment
|
<!-- SEO Meta Tags -->
|
||||||
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
|
<meta name="description" content="Paws at Home offers premium, at-home pet care services including grooming, walking, and veterinary check-ups. Book appointments or order supplies instantly.">
|
||||||
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
<meta name="keywords" content="pet care, pet services, home pet care, dog grooming, cat grooming, dog walker, mobile vet">
|
||||||
?>
|
|
||||||
<?php if ($projectDescription): ?>
|
<!-- Open Graph / Facebook -->
|
||||||
<!-- Meta description -->
|
<meta property="og:type" content="website">
|
||||||
<meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' />
|
<meta property="og:title" content="Paws at Home - Premium Pet Services">
|
||||||
<!-- Open Graph meta tags -->
|
<meta property="og:description" content="Premium, at-home pet care services. Book appointments or order supplies instantly.">
|
||||||
<meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
<!-- Note: PROJECT_IMAGE_URL is managed by the platform -->
|
||||||
<!-- Twitter meta tags -->
|
<meta property="og:image" content="<?php echo htmlspecialchars($_SERVER['PROJECT_IMAGE_URL'] ?? 'assets/images/og_image.jpg'); ?>">
|
||||||
<meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
|
||||||
<?php endif; ?>
|
<!-- Twitter -->
|
||||||
<?php if ($projectImageUrl): ?>
|
<meta property="twitter:card" content="summary_large_image">
|
||||||
<!-- Open Graph image -->
|
<meta property="twitter:title" content="Paws at Home - Premium Pet Services">
|
||||||
<meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
<meta property="twitter:description" content="Premium, at-home pet care services. Book appointments or order supplies instantly.">
|
||||||
<!-- Twitter image -->
|
<meta property="twitter:image" content="<?php echo htmlspecialchars($_SERVER['PROJECT_IMAGE_URL'] ?? 'assets/images/og_image.jpg'); ?>">
|
||||||
<meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
|
||||||
<?php endif; ?>
|
<!-- Favicon -->
|
||||||
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🐾</text></svg>">
|
||||||
|
|
||||||
|
<!-- Google Fonts -->
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<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">
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Inter:wght@400;500&display=swap" rel="stylesheet">
|
||||||
<style>
|
|
||||||
:root {
|
<!-- Bootstrap CSS -->
|
||||||
--bg-color-start: #6a11cb;
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
--bg-color-end: #2575fc;
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
|
||||||
--text-color: #ffffff;
|
|
||||||
--card-bg-color: rgba(255, 255, 255, 0.01);
|
<!-- Custom CSS -->
|
||||||
--card-border-color: rgba(255, 255, 255, 0.1);
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
||||||
}
|
|
||||||
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 bg-body-tertiary sticky-top shadow-sm">
|
||||||
<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="#">🐾 Paws at Home</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 align-items-center">
|
||||||
|
<li class="nav-item"><a class="nav-link" href="#services">Services</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
|
||||||
|
<li class="nav-item ms-2">
|
||||||
|
<a href="signup.php" class="btn btn-primary">Sign Up</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item ms-3 theme-toggle-btn" id="theme-toggle">
|
||||||
|
<i class="bi bi-moon-stars-fill"></i>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero Section -->
|
||||||
|
<header id="home" class="hero-section text-center py-5 vh-100 d-flex align-items-center justify-content-center">
|
||||||
|
<div class="container fade-in-up">
|
||||||
|
<h1 class="display-3 fw-bold">Premium Pet Care, Right at Your Doorstep</h1>
|
||||||
|
<p class="lead my-4">Effortless booking for grooming, walking, and vet visits. Plus, instant delivery of all your pet's favorite supplies.</p>
|
||||||
|
<a href="signup.php" class="btn btn-primary btn-lg">Book a Service Now</a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<main class="container my-5">
|
||||||
|
<!-- Services Section -->
|
||||||
|
<section id="services" class="py-5">
|
||||||
|
<div class="text-center mb-5 fade-in-up">
|
||||||
|
<h2 class="fw-bold">Our Services</h2>
|
||||||
|
<p class="text-muted">Everything your pet needs, delivered with care.</p>
|
||||||
|
</div>
|
||||||
|
<div class="row g-4">
|
||||||
|
<div class="col-md-4 fade-in-up" style="transition-delay: 100ms;">
|
||||||
|
<div class="card h-100 p-4 text-center service-card rounded-3">
|
||||||
|
<div class="card-body">
|
||||||
|
<i class="bi bi-scissors fs-1 mb-3" style="color:var(--primary-color);"></i>
|
||||||
|
<h3 class="card-title h5">Mobile Grooming</h3>
|
||||||
|
<p class="card-text">Professional grooming services in our mobile salons. Stress-free for your pet.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4 fade-in-up" style="transition-delay: 200ms;">
|
||||||
|
<div class="card h-100 p-4 text-center service-card rounded-3">
|
||||||
|
<div class="card-body">
|
||||||
|
<i class="bi bi-heart-pulse-fill fs-1 mb-3" style="color:var(--primary-color);"></i>
|
||||||
|
<h3 class="card-title h5">At-Home Vet Visits</h3>
|
||||||
|
<p class="card-text">Routine check-ups and preventative care from licensed veterinarians at your home.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4 fade-in-up" style="transition-delay: 300ms;">
|
||||||
|
<div class="card h-100 p-4 text-center service-card rounded-3">
|
||||||
|
<div class="card-body">
|
||||||
|
<i class="bi bi-box2-heart-fill fs-1 mb-3" style="color:var(--primary-color);"></i>
|
||||||
|
<h3 class="card-title h5">Instant Delivery</h3>
|
||||||
|
<p class="card-text">Get food, toys, and supplies delivered from local stores in under an hour.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- About Section -->
|
||||||
|
<section id="about" class="py-5 bg-light rounded-3 my-5 fade-in-up">
|
||||||
|
<div class="row align-items-center">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<img src="https://images.pexels.com/photos/45170/cat-face-close-up-feline-45170.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" class="img-fluid rounded-3 shadow" alt="Happy cat">
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6 mt-4 mt-md-0">
|
||||||
|
<h2 class="fw-bold">About Paws at Home</h2>
|
||||||
|
<p class="text-muted">We started Paws at Home with a simple mission: to make pet care as convenient and joyful as possible for both pets and their parents. Our team is made up of passionate animal lovers and certified professionals dedicated to providing the best possible service.</p>
|
||||||
|
<a href="#" class="btn btn-outline-primary">Learn More</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
<footer>
|
|
||||||
Page updated: <?= htmlspecialchars($now) ?> (UTC)
|
<!-- Footer -->
|
||||||
|
<footer id="contact" class="py-4 mt-5" style="background-color: var(--surface-color);">
|
||||||
|
<div class="container text-center">
|
||||||
|
<p>© <?php echo date("Y"); ?> Paws at Home. All Rights Reserved.</p>
|
||||||
|
<p>
|
||||||
|
<a href="#" class="text-decoration-none mx-2">Privacy Policy</a> |
|
||||||
|
<a href="#" class="text-decoration-none mx-2">Terms of Service</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
<!-- Bootstrap JS Bundle -->
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
|
||||||
|
<!-- Custom JS -->
|
||||||
|
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Loading…
x
Reference in New Issue
Block a user