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
|
||||
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>
|
||||
<!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; ?>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Paws at Home - Premium Pet Services</title>
|
||||
|
||||
<!-- SEO Meta Tags -->
|
||||
<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.">
|
||||
<meta name="keywords" content="pet care, pet services, home pet care, dog grooming, cat grooming, dog walker, mobile vet">
|
||||
|
||||
<!-- Open Graph / Facebook -->
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Paws at Home - Premium Pet Services">
|
||||
<meta property="og:description" content="Premium, at-home pet care services. Book appointments or order supplies instantly.">
|
||||
<!-- Note: PROJECT_IMAGE_URL is managed by the platform -->
|
||||
<meta property="og:image" content="<?php echo htmlspecialchars($_SERVER['PROJECT_IMAGE_URL'] ?? 'assets/images/og_image.jpg'); ?>">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta property="twitter:card" content="summary_large_image">
|
||||
<meta property="twitter:title" content="Paws at Home - Premium Pet Services">
|
||||
<meta property="twitter:description" content="Premium, at-home pet care services. Book appointments or order supplies instantly.">
|
||||
<meta property="twitter:image" content="<?php echo htmlspecialchars($_SERVER['PROJECT_IMAGE_URL'] ?? 'assets/images/og_image.jpg'); ?>">
|
||||
|
||||
<!-- 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.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>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Inter:wght@400;500&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Bootstrap CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
|
||||
|
||||
<!-- Custom CSS -->
|
||||
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
||||
</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>
|
||||
|
||||
<!-- Header -->
|
||||
<nav class="navbar navbar-expand-lg bg-body-tertiary sticky-top shadow-sm">
|
||||
<div class="container">
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<!-- 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>
|
||||
<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>
|
||||
|
||||
<!-- 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>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user