diff --git a/about.php b/about.php new file mode 100644 index 0000000..8cc2552 --- /dev/null +++ b/about.php @@ -0,0 +1,35 @@ + + +
+
+
+

Why ElderEase Exists

+

ElderEase was created with one simple belief: growing older should never mean losing dignity, independence, or safety.

+ +

As mobility becomes more challenging, everyday tasks can feel risky or frustrating. We focus on simple, thoughtfully designed essentials that make daily life easier — without complicated technology or learning curves.

+ +

ElderEase products are chosen to support comfort, confidence, and peace of mind for seniors and the families who care for them.

+
+
+ Happy seniors at home +
+
+ +
+
+
+

Our Mission

+

To help seniors live safely, comfortably, and independently at home through thoughtful design and human-centric care.

+
+ +
+ Explore Our Solutions +
+
+
+
+ + \ No newline at end of file diff --git a/api/inquiry.php b/api/inquiry.php new file mode 100644 index 0000000..d07382e --- /dev/null +++ b/api/inquiry.php @@ -0,0 +1,28 @@ + false, 'error' => 'Name and email are required.']); + exit; + } + + try { + $pdo = db(); + $stmt = $pdo->prepare("INSERT INTO inquiries (name, email, message, product_id) VALUES (?, ?, ?, ?)"); + $stmt->execute([$name, $email, $message, $product_id]); + + echo json_encode(['success' => true]); + } catch (PDOException $e) { + echo json_encode(['success' => false, 'error' => 'Database error.']); + } +} else { + echo json_encode(['success' => false, 'error' => 'Invalid request.']); +} diff --git a/assets/css/custom.css b/assets/css/custom.css index 65a1626..8a872e4 100644 --- a/assets/css/custom.css +++ b/assets/css/custom.css @@ -1,346 +1,93 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap'); + :root { - --color-bg: #ffffff; - --color-text: #1a1a1a; - --color-primary: #2563EB; /* Vibrant Blue */ - --color-secondary: #000000; - --color-accent: #A3E635; /* Lime Green */ - --color-surface: #f8f9fa; - --font-heading: 'Space Grotesk', sans-serif; - --font-body: 'Inter', sans-serif; - --border-width: 2px; - --shadow-hard: 5px 5px 0px #000; - --shadow-hover: 8px 8px 0px #000; - --radius-pill: 50rem; - --radius-card: 1rem; + --ee-charcoal: #121212; + --ee-gold: #D4AF37; + --ee-gold-hover: #B8962E; + --ee-white: #FFFFFF; + --ee-gray-light: #F8F9FA; + --ee-text: #2D2D2D; } body { - font-family: var(--font-body); - background-color: var(--color-bg); - color: var(--color-text); - overflow-x: hidden; + font-family: 'Inter', sans-serif; + color: var(--ee-text); + font-size: 1.125rem; + line-height: 1.6; + background-color: var(--ee-white); } -h1, h2, h3, h4, h5, h6, .navbar-brand { - font-family: var(--font-heading); - letter-spacing: -0.03em; +h1, h2, h3, .h1, .h2, .h3 { + font-weight: 600; + color: var(--ee-charcoal); } -/* Utilities */ -.text-primary { color: var(--color-primary) !important; } -.bg-black { background-color: #000 !important; } -.text-white { color: #fff !important; } -.shadow-hard { box-shadow: var(--shadow-hard); } -.border-2-black { border: var(--border-width) solid #000; } -.py-section { padding-top: 5rem; padding-bottom: 5rem; } - -/* Navbar */ -.navbar { - background: rgba(255, 255, 255, 0.9); - backdrop-filter: blur(10px); - border-bottom: var(--border-width) solid transparent; - transition: all 0.3s; - padding-top: 1rem; - padding-bottom: 1rem; +.bg-charcoal { + background-color: var(--ee-charcoal) !important; } -.navbar.scrolled { - border-bottom-color: #000; - padding-top: 0.5rem; - padding-bottom: 0.5rem; +.text-gold { + color: var(--ee-gold) !important; } -.brand-text { - font-size: 1.5rem; - font-weight: 800; -} - -.nav-link { - font-weight: 500; - color: var(--color-text); - margin-left: 1rem; - position: relative; -} - -.nav-link:hover, .nav-link.active { - color: var(--color-primary); -} - -/* Buttons */ -.btn { - font-weight: 700; - font-family: var(--font-heading); +.btn-gold { + background-color: var(--ee-gold); + color: var(--ee-white); + border: none; padding: 0.8rem 2rem; - border-radius: var(--radius-pill); - border: var(--border-width) solid #000; - transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1); - box-shadow: var(--shadow-hard); + font-weight: 600; + border-radius: 4px; + transition: background-color 0.2s ease; } -.btn:hover { - transform: translate(-2px, -2px); - box-shadow: var(--shadow-hover); +.btn-gold:hover { + background-color: var(--ee-gold-hover); + color: var(--ee-white); } -.btn:active { - transform: translate(2px, 2px); - box-shadow: 0 0 0 #000; +.btn-outline-gold { + border: 2px solid var(--ee-gold); + color: var(--ee-gold); + background: transparent; + padding: 0.8rem 2rem; + font-weight: 600; + border-radius: 4px; } -.btn-primary { - background-color: var(--color-primary); - border-color: #000; - color: #fff; +.btn-outline-gold:hover { + background-color: var(--ee-gold); + color: var(--ee-white); } -.btn-primary:hover { - background-color: #1d4ed8; - border-color: #000; - color: #fff; -} - -.btn-outline-dark { - background-color: #fff; - color: #000; -} - -.btn-cta { - background-color: var(--color-accent); - color: #000; -} - -.btn-cta:hover { - background-color: #8cc629; - color: #000; -} - -/* Hero Section */ -.hero-section { - min-height: 100vh; - padding-top: 80px; -} - -.background-blob { - position: absolute; - border-radius: 50%; - filter: blur(80px); - opacity: 0.6; - z-index: 1; -} - -.blob-1 { - top: -10%; - right: -10%; - width: 600px; - height: 600px; - background: radial-gradient(circle, var(--color-accent), transparent); -} - -.blob-2 { - bottom: 10%; - left: -10%; - width: 500px; - height: 500px; - background: radial-gradient(circle, var(--color-primary), transparent); -} - -.highlight-text { - background: linear-gradient(120deg, transparent 0%, transparent 40%, var(--color-accent) 40%, var(--color-accent) 100%); - background-repeat: no-repeat; - background-size: 100% 40%; - background-position: 0 88%; - padding: 0 5px; -} - -.dot { color: var(--color-primary); } - -.badge-pill { - display: inline-block; - padding: 0.5rem 1rem; - border: 2px solid #000; - border-radius: 50px; - font-weight: 700; - background: #fff; - box-shadow: 4px 4px 0 #000; - font-family: var(--font-heading); - font-size: 0.9rem; -} - -/* Marquee */ -.marquee-container { - overflow: hidden; - white-space: nowrap; - border-top: 2px solid #000; - border-bottom: 2px solid #000; -} - -.rotate-divider { - transform: rotate(-2deg) scale(1.05); - z-index: 10; - position: relative; - margin-top: -50px; - margin-bottom: 30px; -} - -.marquee-content { - display: inline-block; - animation: marquee 20s linear infinite; - font-family: var(--font-heading); - font-weight: 700; +.navbar-brand { + font-weight: 600; font-size: 1.5rem; - letter-spacing: 2px; + letter-spacing: -0.5px; } -@keyframes marquee { - 0% { transform: translateX(0); } - 100% { transform: translateX(-50%); } +.hero-section { + padding: 100px 0; + background-color: var(--ee-charcoal); + color: var(--ee-white); } -/* Portfolio Cards */ -.project-card { - border: 2px solid #000; - border-radius: var(--radius-card); - overflow: hidden; - background: #fff; - transition: transform 0.3s ease; - box-shadow: var(--shadow-hard); +.trust-pillar { + border: 1px solid #eee; + padding: 2rem; + border-radius: 4px; height: 100%; - display: flex; - flex-direction: column; } -.project-card:hover { - transform: translateY(-10px); - box-shadow: 8px 8px 0 #000; +.product-card img { + border-radius: 4px; } -.card-img-holder { - height: 250px; - display: flex; - align-items: center; - justify-content: center; - border-bottom: 2px solid #000; - position: relative; - font-size: 4rem; +footer { + border-top: 1px solid #eee; + padding: 60px 0; } -.placeholder-art { - transition: transform 0.3s ease; -} - -.project-card:hover .placeholder-art { - transform: scale(1.2) rotate(10deg); -} - -.bg-soft-blue { background-color: #e0f2fe; } -.bg-soft-green { background-color: #dcfce7; } -.bg-soft-purple { background-color: #f3e8ff; } -.bg-soft-yellow { background-color: #fef9c3; } - -.category-tag { - position: absolute; - top: 15px; - right: 15px; - background: #000; - color: #fff; - padding: 5px 12px; - border-radius: 20px; - font-size: 0.75rem; - font-weight: 700; -} - -.card-body { padding: 1.5rem; } - -.link-arrow { - text-decoration: none; - color: #000; - font-weight: 700; - display: inline-flex; - align-items: center; - margin-top: auto; -} - -.link-arrow i { transition: transform 0.2s; margin-left: 5px; } -.link-arrow:hover i { transform: translateX(5px); } - -/* About */ -.about-image-stack { - position: relative; - height: 400px; - width: 100%; -} - -.stack-card { - position: absolute; - width: 80%; - height: 100%; - border-radius: var(--radius-card); - border: 2px solid #000; - box-shadow: var(--shadow-hard); - left: 10%; - transform: rotate(-3deg); - background-size: cover; -} - -/* Forms */ -.form-control { - border: 2px solid #000; - border-radius: 0.5rem; - padding: 1rem; - font-weight: 500; - background: #f8f9fa; -} - -.form-control:focus { - box-shadow: 4px 4px 0 var(--color-primary); - border-color: #000; - background: #fff; -} - -/* Animations */ -.animate-up { - opacity: 0; - transform: translateY(30px); - animation: fadeUp 0.8s ease forwards; -} - -.delay-100 { animation-delay: 0.1s; } -.delay-200 { animation-delay: 0.2s; } - -@keyframes fadeUp { - to { - opacity: 1; - transform: translateY(0); - } -} - -/* Social */ -.social-links a { - transition: transform 0.2s; - display: inline-block; -} -.social-links a:hover { - transform: scale(1.2) rotate(10deg); - color: var(--color-accent) !important; -} - -/* Responsive */ -@media (max-width: 991px) { - .rotate-divider { - transform: rotate(0); - margin-top: 0; - margin-bottom: 2rem; - } - - .hero-section { - padding-top: 120px; - text-align: center; - min-height: auto; - padding-bottom: 100px; - } - - .display-1 { font-size: 3.5rem; } - - .blob-1 { width: 300px; height: 300px; right: -20%; } - .blob-2 { width: 300px; height: 300px; left: -20%; } -} +/* Senior Friendly Adjustments */ +@media (max-width: 768px) { + body { font-size: 1rem; } +} \ No newline at end of file diff --git a/assets/js/main.js b/assets/js/main.js index fdf2cfd..8fb2290 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -1,73 +1,41 @@ -document.addEventListener('DOMContentLoaded', () => { - - // Smooth scrolling for navigation links - document.querySelectorAll('a[href^="#"]').forEach(anchor => { - anchor.addEventListener('click', function (e) { +function addToCart(product) { + alert(product + " has been added to your cart. We are still setting up our full checkout system!"); +} + +document.addEventListener('DOMContentLoaded', function() { + const inquiryForm = document.getElementById('inquiryForm'); + if (inquiryForm) { + inquiryForm.addEventListener('submit', function(e) { e.preventDefault(); - const targetId = this.getAttribute('href'); - if (targetId === '#') return; + const formData = new FormData(this); + const submitBtn = this.querySelector('button[type="submit"]'); - const targetElement = document.querySelector(targetId); - if (targetElement) { - // Close mobile menu if open - const navbarToggler = document.querySelector('.navbar-toggler'); - const navbarCollapse = document.querySelector('.navbar-collapse'); - if (navbarCollapse.classList.contains('show')) { - navbarToggler.click(); + submitBtn.disabled = true; + submitBtn.textContent = 'Sending...'; + + fetch(this.action, { + method: 'POST', + body: formData + }) + .then(response => response.json()) + .then(data => { + if (data.success) { + alert('Thank you! We have received your inquiry.'); + const modal = bootstrap.Modal.getInstance(document.getElementById('inquiryModal')); + modal.hide(); + inquiryForm.reset(); + } else { + alert('Error: ' + data.error); } - - // Scroll with offset - const offset = 80; - const elementPosition = targetElement.getBoundingClientRect().top; - const offsetPosition = elementPosition + window.pageYOffset - offset; - - window.scrollTo({ - top: offsetPosition, - behavior: "smooth" - }); - } + }) + .catch(error => { + console.error('Error:', error); + alert('There was an error sending your inquiry.'); + }) + .finally(() => { + submitBtn.disabled = false; + submitBtn.textContent = 'Send Inquiry'; + }); }); - }); - - // Navbar scroll effect - const navbar = document.querySelector('.navbar'); - window.addEventListener('scroll', () => { - if (window.scrollY > 50) { - navbar.classList.add('scrolled', 'shadow-sm', 'bg-white'); - navbar.classList.remove('bg-transparent'); - } else { - navbar.classList.remove('scrolled', 'shadow-sm', 'bg-white'); - navbar.classList.add('bg-transparent'); - } - }); - - // Intersection Observer for fade-up animations - const observerOptions = { - threshold: 0.1, - rootMargin: "0px 0px -50px 0px" - }; - - const observer = new IntersectionObserver((entries) => { - entries.forEach(entry => { - if (entry.isIntersecting) { - entry.target.classList.add('animate-up'); - entry.target.style.opacity = "1"; - observer.unobserve(entry.target); // Only animate once - } - }); - }, observerOptions); - - // Select elements to animate (add a class 'reveal' to them in HTML if not already handled by CSS animation) - // For now, let's just make sure the hero animations run. - // If we want scroll animations, we'd add opacity: 0 to elements in CSS and reveal them here. - // Given the request, the CSS animation I added runs on load for Hero. - // Let's make the project cards animate in. - - const projectCards = document.querySelectorAll('.project-card'); - projectCards.forEach((card, index) => { - card.style.opacity = "0"; - card.style.animationDelay = `${index * 0.1}s`; - observer.observe(card); - }); - -}); \ No newline at end of file + } +}); diff --git a/assets/pasted-20260128-235831-98ddb985.jpg b/assets/pasted-20260128-235831-98ddb985.jpg new file mode 100644 index 0000000..1d8c9a5 Binary files /dev/null and b/assets/pasted-20260128-235831-98ddb985.jpg differ diff --git a/assets/pasted-20260129-004647-d9048856.png b/assets/pasted-20260129-004647-d9048856.png new file mode 100644 index 0000000..af573f3 Binary files /dev/null and b/assets/pasted-20260129-004647-d9048856.png differ diff --git a/faq.php b/faq.php new file mode 100644 index 0000000..2b05b6d --- /dev/null +++ b/faq.php @@ -0,0 +1,74 @@ + + +
+
+
+

Frequently Asked Questions

+ +
+
+

+ +

+
+
+ Orders are shipped directly from our fulfillment partners. Typical delivery time is 7–15 business days. +
+
+
+ +
+

+ +

+
+
+ We offer 30-day hassle-free returns. Your peace of mind is our priority. +
+
+
+ +
+

+ +

+
+
+ Seniors, caregivers, and adult children looking to improve safety at home. +
+
+
+ +
+

+ +

+
+
+ No. ElderEase products are everyday wellness and safety aids designed for home use. +
+
+
+
+ +
+
Still have questions?
+

We're here to help you make the right choice for your family.

+ Contact Our Team +
+
+
+
+ + diff --git a/footer.php b/footer.php new file mode 100644 index 0000000..d0bf92b --- /dev/null +++ b/footer.php @@ -0,0 +1,28 @@ + + + + + + diff --git a/header.php b/header.php new file mode 100644 index 0000000..2439e51 --- /dev/null +++ b/header.php @@ -0,0 +1,27 @@ + + + + + + <?php echo isset($pageTitle) ? $pageTitle . " | ElderEase" : "ElderEase - Safety, Comfort, and Independence"; ?> + + + + + + diff --git a/index.php b/index.php index 7205f3d..4eb6370 100644 --- a/index.php +++ b/index.php @@ -1,150 +1,64 @@ - -$phpVersion = PHP_VERSION; -$now = date('Y-m-d H:i:s'); -?> - - - - - - New Style - - - - - - - - - - - - - - - - - - - - - -
-
-

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

+
+
+
+
+

Safety, Comfort, and Independence — At Every Step.

+

ElderEase creates thoughtfully designed essentials that help seniors live confidently at home.

+
+ Shop Non-Slip Safety Socks + Why Safety Matters +
+
+
+ Seniors enjoying independence at home +
+
-
- - - + + +
+
+
+
+
+

Designed for Seniors

+

Every detail is considered for ease of use and maximum comfort.

+
+
+
+
+

Simple Solutions

+

Effective safety without complicated technology or setup.

+
+
+
+
+

Focused on Dignity

+

Help your loved ones stay independent and safe at home.

+
+
+
+
+
+ +
+
+
+
+ ElderEase™ Non-Slip Safety Socks +
+
+

ElderEase™ Non-Slip Safety Socks

+

Prevent slips and falls on smooth floors with soft, comfortable socks designed specifically for seniors. Move confidently without bulky shoes.

+ View Product Details +
+
+
+
+ + diff --git a/product.php b/product.php new file mode 100644 index 0000000..fffa098 --- /dev/null +++ b/product.php @@ -0,0 +1,74 @@ + + +
+
+
+ ElderEase™ Non-Slip Safety Socks +
+
+ +

ElderEase™ Non-Slip Safety Socks

+

$14.99 $19.99

+ +

Prevent slips and falls on smooth floors with soft, comfortable socks designed specifically for seniors. ElderEase Non-Slip Safety Socks help your loved ones move confidently around the home — without bulky shoes or complicated devices.

+ +
Key Benefits:
+
    +
  • ✓ Anti-slip grip designed for hardwood, tile, and laminate
    • +
  • ✓ Soft, breathable fabric for all-day comfort
    • +
  • ✓ Helps reduce fall risk at home
    • +
  • ✓ Easy to wear — no straps, no setup
    • +
+ +
+ + +
+ +
+ Peace of mind: 30-day hassle-free returns on all safety items. +
+
+
+
+ + + + + \ No newline at end of file