ai_ml_operations/preview_sites
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added first three mockups

Browse Source
This commit is contained in:
westfarn
2026-07-20 05:38:53 -05:00
parent 4dce423c4f
commit f839df7863
864 changed files with 235286 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
proposals/select-electrical/mockup/lighting-installation.html
Executable
+381
View File
@@ -0,0 +1,381 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Select Electrical Services – professional lighting installation for residential, commercial and landscape projects. LED upgrades, smart lighting, and energy-efficient designs." />
<meta name="keywords" content="lighting installation, LED lighting, indoor lighting, outdoor lighting, landscape lighting, smart lighting" />
<title>Select Electrical Services | Lighting Installation</title>
<link rel="icon" href="assets/images/logo-select-electrical.png">
<!-- Bootstrap 5 -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
<!-- Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet" />
<!-- AOS -->
<link href="assets/css/aos.css" rel="stylesheet" />
<!-- Google Fonts: Barlow Condensed + DM Sans -->
<link
href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800;900&family=DM+Sans:wght@300;400;500;600&display=swap"
rel="stylesheet" />
<link href="assets/css/style.css" rel="stylesheet" />
</head>
<body>
<style>
.preview-concept-banner{position:fixed;top:0;left:0;right:0;z-index:10000;background:#111827;color:#e5e7eb;font:600 13px/1.4 system-ui,sans-serif;padding:10px 16px;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:center;text-align:center}
.preview-concept-banner a{color:#93c5fd;text-decoration:none;font-weight:600}
.preview-concept-banner span{opacity:.85;font-weight:400}
body{padding-top:42px}
#mainNav.fixed-top{top:42px}
</style>
<div class="preview-concept-banner">UX Concept Preview — Select Electrical Services <span>· Not the live website</span> · <a href="ux-gallery.html">Feature gallery</a> · <a href="pricing.html">Pricing</a></div>
<!-- PRELOADER (same) -->
<div id="preloader" aria-hidden="true">
<div class="preloader-bolt">
<div class="preloader-rings"></div><div class="preloader-rings"></div>
<svg class="bolt-svg" viewBox="0 0 60 80" fill="none"><polygon points="35,0 10,45 28,45 25,80 50,35 32,35" fill="#f4b400"/><polygon points="35,0 10,45 28,45 25,80 50,35 32,35" fill="url(#boltGrad)" opacity="0.6"/><defs><linearGradient id="boltGrad" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#fff" stop-opacity="0.8"/><stop offset="100%" stop-color="#f4b400" stop-opacity="0"/></linearGradient></defs></svg>
</div>
<div class="preloader-bar"><div class="preloader-bar-inner"></div></div>
<div class="preloader-text">Powering Up...</div>
</div>
<nav id="mainNav" class="navbar navbar-expand-lg fixed-top" aria-label="Main navigation">
<div class="container">
<!-- Logo -->
<a class="navbar-brand" href="index.html">
<img src="assets/images/logo-select-electrical.png" alt="Select Electrical" class="brand-logo">
</a>
<!-- Toggler -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navMenu"
aria-controls="navMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Menu -->
<div class="collapse navbar-collapse" id="navMenu">
<ul class="navbar-nav mx-auto gap-1">
<li class="nav-item"><a class="nav-link" href="index.html#hero">Home</a></li>
<li class="nav-item"><a class="nav-link" href="index.html#about">About</a></li>
<li class="nav-item"><a class="nav-link" href="index.html#services">Services</a></li>
<li class="nav-item"><a class="nav-link" href="index.html#projects">Projects</a></li>
<li class="nav-item"><a class="nav-link" href="index.html#team">Team</a></li>
<li class="nav-item"><a class="nav-link" href="index.html#testimonials">Testimonials</a></li>
<li class="nav-item"><a class="nav-link" href="index.html#contact">Contact</a></li>
</ul>
<a href="tel:+16302028020" class="nav-link btn-call ms-2">
<i class="fas fa-phone-alt me-2"></i>(630) 202-8020
</a>
</div>
</div>
</nav>
<!-- PAGE HEADER (Lighting Installation) -->
<section class="page-header">
<div class="page-header-bg" role="img" aria-label="modern lighting fixtures"></div>
<div class="page-header-overlay"></div>
<div class="container">
<div class="hero-badge" data-aos="fade-down"><i class="fas fa-lightbulb"></i> Illuminate Your Space</div>
<h1 data-aos="fade-up">Lighting <span>Installation</span> Services</h1>
<p data-aos="fade-up" data-aos-delay="80">From cozy indoor ambiance to dramatic landscape lighting – we design and install energy‑efficient, smart, and beautiful lighting systems.</p>
</div>
</section>
<!-- OVERVIEW SECTION -->
<section class="section-pad" style="background:var(--white);">
<div class="container">
<div class="row align-items-center g-5">
<div class="col-lg-6" data-aos="fade-right">
<img src="assets/images/30622.jpg" alt="electrician installing recessed lighting" class="img-fluid rounded-3 shadow">
</div>
<div class="col-lg-6" data-aos="fade-left">
<div class="section-label">Brilliant by design</div>
<h2 class="section-title">Custom <span>Lighting</span> Solutions</h2>
<p class="section-desc" style="max-width:100%;">Great lighting transforms a space. Whether you need subtle accent lighting, bright task illumination, or a complete smart home integration, our certified electricians deliver flawless installation with a focus on energy efficiency and aesthetics.</p>
<ul class="about-list mt-4">
<li><i class="fas fa-check-circle"></i> Indoor & outdoor lighting design</li>
<li><i class="fas fa-check-circle"></i> LED retrofits & energy‑saving upgrades</li>
<li><i class="fas fa-check-circle"></i> Smart lighting (WiFi / Zigbee / DALI)</li>
<li><i class="fas fa-check-circle"></i> Low‑voltage landscape lighting</li>
<li><i class="fas fa-check-circle"></i> Code‑compliant, dimmer & sensor integration</li>
</ul>
</div>
</div>
</div>
</section>
<!-- TYPES OF LIGHTING (service cards) -->
<section class="section-pad" style="background:var(--bg);">
<div class="container">
<div class="text-center mb-5" data-aos="fade-up">
<div class="section-label justify-content-center">What we offer</div>
<h2 class="section-title">Lighting <span>Services</span> For Every Space</h2>
<p class="section-desc mx-auto">Residential, commercial, and landscape – we cover it all.</p>
</div>
<div class="row g-4">
<div class="col-md-4" data-aos="fade-up">
<div class="service-card">
<div class="service-num">I</div>
<div class="service-icon"><i class="fas fa-home"></i></div>
<h5>Indoor Lighting</h5>
<p>Recessed cans, chandeliers, under‑cabinet, cove lighting, and ceiling fans. Perfect for kitchens, living areas, and bedrooms.</p>
</div>
</div>
<div class="col-md-4" data-aos="fade-up" data-aos-delay="80">
<div class="service-card">
<div class="service-num">O</div>
<div class="service-icon"><i class="fas fa-tree"></i></div>
<h5>Outdoor & Landscape</h5>
<p>Path lights, floodlights, deck/patio lighting, and security lighting. Weatherproof and low‑voltage systems.</p>
</div>
</div>
<div class="col-md-4" data-aos="fade-up" data-aos-delay="160">
<div class="service-card">
<div class="service-num">C</div>
<div class="service-icon"><i class="fas fa-building"></i></div>
<h5>Commercial Lighting</h5>
<p>Office troffers, retail display lighting, warehouse high‑bays, and emergency egress lighting. Energy audits included.</p>
</div>
</div>
<div class="col-md-4" data-aos="fade-up">
<div class="service-card">
<div class="service-num">L</div>
<div class="service-icon"><i class="fas fa-lightbulb"></i></div>
<h5>LED Upgrades</h5>
<p>Replace fluorescent or incandescent with high‑efficiency LED. Rebates available, longer life, lower bills.</p>
</div>
</div>
<div class="col-md-4" data-aos="fade-up" data-aos-delay="80">
<div class="service-card">
<div class="service-num">S</div>
<div class="service-icon"><i class="fas fa-microchip"></i></div>
<h5>Smart Lighting</h5>
<p>WiFi / Bluetooth controls, voice assistants (Alexa, Google), automated schedules, and dimming systems.</p>
</div>
</div>
<div class="col-md-4" data-aos="fade-up" data-aos-delay="160">
<div class="service-card">
<div class="service-num">A</div>
<div class="service-icon"><i class="fas fa-palette"></i></div>
<h5>Architectural & Accent</h5>
<p>Picture lights, cove lighting, track lighting, and feature wall illumination to highlight art or architecture.</p>
</div>
</div>
</div>
</div>
</section>
<!-- LIGHTING PROCESS (custom process steps) -->
<section class="section-pad" style="background:var(--white);">
<div class="container">
<div class="text-center mb-5" data-aos="fade-up">
<div class="section-label justify-content-center">How we light</div>
<h2 class="section-title">Our <span>Lighting</span> Process</h2>
<p class="section-desc mx-auto">From concept to glow – a seamless workflow.</p>
</div>
<div class="process-wrap" data-aos="fade-up">
<div class="process-step"><div class="process-icon"><span class="process-step-num">1</span><i class="fas fa-clipboard-list"></i></div><h5>Consultation</h5><p>We discuss your vision, take measurements, and assess existing wiring. We'll suggest fixture types and layouts.</p></div>
<div class="process-step"><div class="process-icon"><span class="process-step-num">2</span><i class="fas fa-drafting-compass"></i></div><h5>Design & Selection</h5><p>We create a lighting plan, help select fixtures, and provide a detailed quote – all within your budget.</p></div>
<div class="process-step"><div class="process-icon"><span class="process-step-num">3</span><i class="fas fa-tools"></i></div><h5>Professional Installation</h5><p>Our electricians install all wiring, mounts, and controls with minimal disruption and meticulous attention.</p></div>
<div class="process-step"><div class="process-icon"><span class="process-step-num">4</span><i class="fas fa-sun"></i></div><h5>Testing & Walkthrough</h5><p>We test every light, demonstrate controls, and ensure you're delighted with the result.</p></div>
</div>
</div>
</section>
<!-- WHY CHOOSE US FOR LIGHTING (dark cards) -->
<section class="section-pad" style="background:var(--navy);">
<div class="container">
<div class="text-center mb-5" data-aos="fade-up">
<div class="section-label justify-content-center" style="color:var(--yellow);">Why Select Electrical</div>
<h2 class="section-title light">Lighting <span>Advantages</span></h2>
<p style="color:rgba(255,255,255,0.55); max-width:600px; margin:0 auto;">Experience, quality, and innovation in every fixture.</p>
</div>
<div class="row g-4">
<div class="col-md-6 col-lg-4" data-aos="fade-up"><div class="why-card"><div class="why-icon"><i class="fas fa-shield-alt"></i></div><div><h5>Safety guaranteed</h5><p>All installations meet NEC codes, with proper grounding and防水 for outdoor.</p></div></div></div>
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="60"><div class="why-card"><div class="why-icon"><i class="fas fa-gem"></i></div><div><h5>Premium fixtures</h5><p>We work with trusted brands like Philips, Halo, and Kichler for lasting quality.</p></div></div></div>
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="120"><div class="why-card"><div class="why-icon"><i class="fas fa-tachometer-alt"></i></div><div><h5>Energy efficient</h5><p>LED and smart controls reduce your energy bill and carbon footprint.</p></div></div></div>
<div class="col-md-6 col-lg-4" data-aos="fade-up"><div class="why-card"><div class="why-icon"><i class="fas fa-paint-brush"></i></div><div><h5>Design expertise</h5><p>Our team understands color temperature, beam angles, and layering for perfect ambiance.</p></div></div></div>
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="60"><div class="why-card"><div class="why-icon"><i class="fas fa-file-invoice"></i></div><div><h5>Transparent quotes</h5><p>Detailed breakdown of materials and labor – no surprises.</p></div></div></div>
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="120"><div class="why-card"><div class="why-icon"><i class="fas fa-history"></i></div><div><h5>5‑year warranty</h5><p>All lighting installations backed by our comprehensive warranty.</p></div></div></div>
</div>
</div>
</section>
<!-- PROJECT GALLERY (lighting specific) -->
<section class="section-pad" style="background:var(--bg);">
<div class="container">
<div class="text-center mb-5" data-aos="fade-up">
<div class="section-label justify-content-center">Recent work</div>
<h2 class="section-title">Lighting <span>Showcase</span></h2>
</div>
<div class="row g-3">
<div class="col-md-4" data-aos="zoom-in"><div class="project-card"><img src="https://images.unsplash.com/photo-1556909114-44e3e70034e2?w=600&q=80" alt="modern kitchen lighting"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Kitchen remodel</h5><span>Recessed & under‑cabinet</span></div></div></div>
<div class="col-md-4" data-aos="zoom-in" data-aos-delay="80"><div class="project-card"><img src="https://images.unsplash.com/photo-1540932239986-30128078f3c5?w=600&q=80" alt="landscape lighting"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Garden path lights</h5><span>Low‑voltage LED</span></div></div></div>
<div class="col-md-4" data-aos="zoom-in" data-aos-delay="160"><div class="project-card"><img src="assets/images/22073.jpg" alt="office lighting"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Commercial office</h5><span>Troffer LED retrofit</span></div></div></div>
<div class="col-md-4" data-aos="zoom-in"><div class="project-card"><img src="https://images.unsplash.com/photo-1513694203232-719a280e022f?w=600&q=80" alt="chandelier installation"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Grand chandelier</h5><span>Luxury residence</span></div></div></div>
<div class="col-md-4" data-aos="zoom-in" data-aos-delay="80"><div class="project-card"><img src="assets/images/2150652842.jpg" alt="smart lighting"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Smart home automation</h5><span>Caseta / Control4</span></div></div></div>
<div class="col-md-4" data-aos="zoom-in" data-aos-delay="160"><div class="project-card"><img src="assets/images/2149728872.jpg" alt="outdoor floodlights"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Security lighting</h5><span>Motion‑sensor LEDs</span></div></div></div>
</div>
</div>
</section>
<!-- TESTIMONIAL (lighting focused) -->
<section class="section-pad" style="background:var(--navy);">
<div class="container">
<div class="text-center mb-5" data-aos="fade-up">
<div class="section-label justify-content-center" style="color:var(--yellow);">Client story</div>
<h2 class="section-title light">Brighter with <span>Select Electrical</span></h2>
</div>
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="testi-card">
<div class="testi-stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div>
<div class="testi-quote">"</div>
<p class="testi-text">Select Electrical transformed our dark backyard into a beautiful evening oasis with landscape lighting. They also installed dimmable LEDs throughout our home. The team was professional, the quality superb, and the energy savings noticeable.</p>
<div class="testi-author"><img src="https://randomuser.me/api/portraits/men/52.jpg" alt="client" class="testi-avatar"><div><div class="testi-name">David Chen</div><div class="testi-role">Homeowner, Naperville IL</div></div></div>
</div>
</div>
</div>
</div>
</section>
<!-- CONTACT SECTION (same as index) -->
<section id="contact" class="section-pad" style="background:var(--white);">
<div class="container">
<div class="text-center mb-5" data-aos="fade-up">
<div class="section-label justify-content-center">Get In Touch</div>
<h2 class="section-title">Contact <span>Select Electrical</span></h2>
<p class="section-desc mx-auto">Ready to brighten your space? Our team is standing by.</p>
</div>
<div class="row g-4">
<div class="col-lg-4" data-aos="fade-right">
<div class="contact-info-card">
<h4 style="font-family:var(--font-display);font-size:1.4rem;font-weight:800;text-transform:uppercase;color:var(--white);margin-bottom:28px;">Reach Out</h4>
<div class="contact-info-item"><div class="contact-icon"><i class="fas fa-map-marker-alt"></i></div><div><h6>Office</h6><p>1778 Villanova Drive<br>Naperville, IL 60565</p></div></div>
<div class="contact-info-item"><div class="contact-icon"><i class="fas fa-phone-alt"></i></div><div><h6>Phone</h6><p>(630) 202-8020<br>(630) 202-8020 (emergency)</p></div></div>
<div class="contact-info-item"><div class="contact-icon"><i class="fas fa-envelope"></i></div><div><h6>Email</h6><p><a href="mailto:select8020@gmail.com">select8020@gmail.com</a></p></div></div>
<div class="contact-info-item"><div class="contact-icon"><i class="fas fa-clock"></i></div><div><h6>Hours</h6><p>Mon–Fri: 7am–6pm<br>Emergency: 24/7</p></div></div>
</div>
</div>
<div class="col-lg-8" data-aos="fade-left" data-aos-delay="100">
<div class="contact-form-card">
<h4 style="font-family:var(--font-display);font-size:1.4rem;font-weight:800;text-transform:uppercase;color:var(--navy);margin-bottom:28px;">Send a message</h4>
<form id="contactForm" novalidate>
<div class="row g-3">
<div class="col-md-6"><label class="form-label" for="name">Full Name</label><input type="text" class="form-control" id="name" required></div>
<div class="col-md-6"><label class="form-label" for="email">Email</label><input type="email" class="form-control" id="email" required></div>
<div class="col-md-6"><label class="form-label" for="phone">Phone</label><input type="tel" class="form-control" id="phone"></div>
<div class="col-md-6"><label class="form-label" for="service">Service Needed</label><select class="form-select" id="service"><option selected disabled>Select</option><option>Lighting Installation</option><option>Electrical Installation</option><option>Wiring & Rewiring</option><option>Maintenance</option><option>Emergency</option><option>Smart Home</option></select></div>
<div class="col-12"><label class="form-label" for="message">Message</label><textarea class="form-control" id="message" rows="5" required></textarea></div>
<div class="col-12"><button type="submit" class="btn-submit"><i class="fas fa-paper-plane me-2"></i>Send Message</button></div>
</div>
</form>
<div id="formSuccess" style="display:none; margin-top:20px; padding:18px; background:rgba(37,99,235,0.08); border:1px solid rgba(37,99,235,0.2); border-radius:8px; color:#1d4ed8; text-align:center; font-weight:600;"><i class="fas fa-check-circle me-2"></i>Thank you! We'll be in touch within 24 hours.</div>
</div>
</div>
<div class="map-wrap mt-4">
<iframe src="https://maps.google.com/maps?q=1778+Villanova+Drive,+Naperville,+IL+60565&output=embed" allowfullscreen="" loading="lazy"></iframe>
</div>
</div>
</div>
</section>
<footer id="footer">
<div class="container">
<div class="row g-5">
<!-- Brand Column -->
<div class="col-lg-4 col-md-6">
<div class="footer-brand">
<img src="assets/images/logo-select-electrical.png" alt="Select Electrical" class="brand-logo">
</div>
<p class="footer-desc">
Select Electrical Services delivers professional, certified electrical services for
residential, commercial, and industrial clients. Safety, quality, and trust
are our core values.
</p>
<div class="footer-social">
<a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
<a href="#" aria-label="Twitter/X"><i class="fab fa-twitter"></i></a>
<a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
<a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
<a href="#" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
</div>
</div>
<!-- Quick Links -->
<div class="col-lg-2 col-md-6 col-6">
<h5 class="footer-heading">Quick Links</h5>
<ul class="footer-links">
<li><a href="index.html">Home</a></li>
<li><a href="index.html#about">About Us</a></li>
<li><a href="index.html#services">Services</a></li>
<li><a href="index.html#projects">Projects</a></li>
<li><a href="index.html#team">Our Team</a></li>
<li><a href="blog.html">Blog</a></li>
</ul>
</div>
<!-- Services -->
<div class="col-lg-2 col-md-6 col-6">
<h5 class="footer-heading">Services</h5>
<ul class="footer-links">
<li><a href="electrical-installation.html">Installation</a></li>
<li><a href="wiring-services.html">Wiring</a></li>
<li><a href="lighting-installation.html">Lighting</a></li>
<li><a href="electrical-maintenance.html">Maintenance</a></li>
<li><a href="emergency-repair.html">Emergency</a></li>
<li><a href="smart-home.html">Smart Home</a></li>
</ul>
</div>
<!-- Newsletter -->
<div class="col-lg-4 col-md-6">
<h5 class="footer-heading">Newsletter</h5>
<p style="font-size:0.88rem;line-height:1.7;margin-bottom:0">
Subscribe for electrical safety tips, company news, and exclusive service promotions.
</p>
<div class="newsletter-input-wrap">
<input type="email" class="newsletter-input" placeholder="Your email address"
aria-label="Newsletter email" />
<button class="newsletter-btn" aria-label="Subscribe">
<i class="fas fa-paper-plane"></i>
</button>
</div>
</div>
</div>
</div>
<!-- Footer Bottom -->
<div class="container">
<div class="footer-bottom">
<p>© 2026 <a href="#hero">Select Electrical Services</a>. All rights reserved. · Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></p>
<p>
<a href="privacy-policy.html">Privacy Policy</a>
<a href="terms-conditions.html">Terms of Service</a>
<a href="faq.html">FAQS</a>
</p>
</div>
</div>
</footer>
<!-- SCROLL TOP -->
<button id="scrollTop" aria-label="Scroll to top"><i class="fas fa-chevron-up"></i></button>
<!-- SCRIPTS (same) -->
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/aos.js"></script>
<script>
// preloader
window.addEventListener('load',()=>{setTimeout(()=>{document.getElementById('preloader').classList.add('hidden');document.body.style.overflow='visible'},2200)});
document.body.style.overflow='hidden';
AOS.init({duration:700,once:true,easing:'ease-out-cubic',offset:60});
// sticky nav
const nav=document.getElementById('mainNav');
window.addEventListener('scroll',()=>{nav.classList.toggle('scrolled',window.scrollY>50)});
// smooth scroll for local anchors
document.querySelectorAll('a[href^="#"]').forEach(anchor=>{anchor.addEventListener('click',function(e){const target=document.querySelector(this.getAttribute('href'));if(target){e.preventDefault();const offset=nav.offsetHeight;const top=target.getBoundingClientRect().top+window.scrollY-offset;window.scrollTo({top,behavior:'smooth'});const bsCollapse=bootstrap.Collapse.getInstance(document.getElementById('navMenu'));if(bsCollapse)bsCollapse.hide();}})});
// scroll top
const scrollTopBtn=document.getElementById('scrollTop');
window.addEventListener('scroll',()=>{scrollTopBtn.classList.toggle('visible',window.scrollY>400)});
scrollTopBtn.addEventListener('click',()=>{window.scrollTo({top:0,behavior:'smooth'})});
// contact form demo
document.getElementById('contactForm').addEventListener('submit',function(e){e.preventDefault();const name=document.getElementById('name').value.trim(),email=document.getElementById('email').value.trim(),message=document.getElementById('message').value.trim();if(!name||!email||!message){alert('Please fill Name, Email, Message.');return;}this.style.display='none';document.getElementById('formSuccess').style.display='block';});
</script>
</body>
</html>