diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..09bf794 --- /dev/null +++ b/assets/css/custom.css @@ -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; +} diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..3015f28 --- /dev/null +++ b/assets/js/main.js @@ -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); + }); +}); diff --git a/index.php b/index.php index 7205f3d..93d5910 100644 --- a/index.php +++ b/index.php @@ -1,150 +1,146 @@ - - + - - - New Style - - - - - - - - - - - - - - - - - - - + + + Paws at Home - Premium Pet Services + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -
-
-

Analyzing your requirements and generating your website…

-
- Loading… -
-

AI is collecting your requirements and applying the first changes.

-

This page will update automatically as the plan is implemented.

-

Runtime: PHP — UTC

-
-
- + + + + + +
+
+

Premium Pet Care, Right at Your Doorstep

+

Effortless booking for grooming, walking, and vet visits. Plus, instant delivery of all your pet's favorite supplies.

+ Book a Service Now +
+
+ + +
+ +
+
+

Our Services

+

Everything your pet needs, delivered with care.

+
+
+
+
+
+ +

Mobile Grooming

+

Professional grooming services in our mobile salons. Stress-free for your pet.

+
+
+
+
+
+
+ +

At-Home Vet Visits

+

Routine check-ups and preventative care from licensed veterinarians at your home.

+
+
+
+
+
+
+ +

Instant Delivery

+

Get food, toys, and supplies delivered from local stores in under an hour.

+
+
+
+
+
+ + +
+
+
+ Happy cat +
+
+

About Paws at Home

+

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.

+ Learn More +
+
+
+ +
+ + + + + + + + + - + \ No newline at end of file