braidnet / index.html
Jjumaa's picture
Project: Create a modern, responsive website for a beauty parlor named “ Braid Station Norfolk ” that allows staff/admin users to log in and upload photos of recent services (e.g., nails, hairstyles, makeup, spa treatments) to a public gallery. ⸻ 🧩 Core Features: 🔐 User Login System: • Secure admin/staff login with email and password. • Optional: Role-based access (Admin, Staff, Client). • Password recovery/reset functionality. 📸 Admin Dashboard: • Simple dashboard for logged-in users to: • Upload images (drag-and-drop or file select). • Add titles, descriptions, tags (e.g., “nail art”, “bridal makeup”). • Assign images to service categories. • Delete or edit previously uploaded entries. • Uploaded images should display instantly in the public-facing Gallery. ⸻ 🌐 Website Pages & Layout: Home Page • Eye-catching hero image and tagline: “Glow From Within” • Featured services or image carousel • Quick access to booking and gallery Services • List of all services: Hair, Nails, Makeup, Skincare, Spa • Each with a brief description, price, and optional image • “Book Now” button for each service Gallery • Display uploaded images from admin panel • Sort/filter by category (e.g., Hair, Nails, etc.) • Auto-refresh with new uploads Booking Page • Form to schedule appointments: • Name, phone/email • Date & time picker • Service selection • Optional stylist preference • Email/SMS confirmation setup About Us • Story of Radiance Beauty Lounge • Team bios with images • Mission, values, and certifications Contact Page • Contact form • Address with Google Maps • Phone, email, and social media links ⸻ 🎨 Design & Tech Notes: • Soft pastel theme: blush pink, cream, gold • Clean, modern typography (e.g., Playfair Display + Open Sans) • Fully responsive (mobile/tablet/desktop) • Fast-loading and SEO-friendly • Optional blog section for beauty tips & product spotlights ⸻ 🛠️ Tech Stack Suggestion (if applicable): • Frontend: React and style with CSS not tailwind - Initial Deployment
40f6888 verified
Raw History Blame Contribute Delete
65.1 kB
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Braid Station Norfolk | Glow From Within</title> <script src="https://cdn.tailwindcss.com"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <style> /* Custom CSS */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Open+Sans:wght@300;400;600&display=swap'); body { font-family: 'Open Sans', sans-serif; color: #333; } h1, h2, h3, h4 { font-family: 'Playfair Display', serif; } .hero { background: linear-gradient(rgba(250, 224, 228, 0.8), rgba(250, 224, 228, 0.8)), url('https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80'); background-size: cover; background-position: center; } .service-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); } .gallery-item { transition: all 0.3s ease; } .gallery-item:hover { transform: scale(1.02); } .login-modal, .upload-modal { display: none; position: fixed; z-index: 100; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); } .modal-content { background-color: #fefefe; margin: 10% auto; padding: 20px; border: 1px solid #888; width: 80%; max-width: 500px; border-radius: 10px; } .dropzone { border: 2px dashed #d1d5db; border-radius: 6px; padding: 20px; text-align: center; cursor: pointer; transition: all 0.3s; } .dropzone:hover, .dropzone.dragover { border-color: #f472b6; background-color: #fdf2f8; } .admin-nav { display: none; } .active-filter { background-color: #f472b6; color: white; } </style> </head> <body class="bg-rose-50"> <!-- Header/Navigation --> <header class="bg-white shadow-md sticky top-0 z-50"> <div class="container mx-auto px-4 py-3 flex justify-between items-center"> <div class="flex items-center"> <i class="fas fa-spa text-3xl text-rose-400 mr-2"></i> <h1 class="text-2xl font-bold text-rose-800">Braid Station Norfolk</h1> </div> <nav class="hidden md:flex space-x-8"> <a href="#home" class="text-rose-800 hover:text-rose-600 font-medium">Home</a> <a href="#services" class="text-rose-800 hover:text-rose-600 font-medium">Services</a> <a href="#gallery" class="text-rose-800 hover:text-rose-600 font-medium">Gallery</a> <a href="#booking" class="text-rose-800 hover:text-rose-600 font-medium">Book Now</a> <a href="#about" class="text-rose-800 hover:text-rose-600 font-medium">About Us</a> <a href="#contact" class="text-rose-800 hover:text-rose-600 font-medium">Contact</a> <button id="login-btn" class="text-rose-800 hover:text-rose-600 font-medium">Staff Login</button> </nav> <button class="md:hidden text-rose-800 text-2xl" id="mobile-menu-btn"> <i class="fas fa-bars"></i> </button> </div> <!-- Mobile Menu --> <div class="md:hidden hidden bg-white w-full py-4 px-4 shadow-md" id="mobile-menu"> <div class="flex flex-col space-y-4"> <a href="#home" class="text-rose-800 hover:text-rose-600 font-medium">Home</a> <a href="#services" class="text-rose-800 hover:text-rose-600 font-medium">Services</a> <a href="#gallery" class="text-rose-800 hover:text-rose-600 font-medium">Gallery</a> <a href="#booking" class="text-rose-800 hover:text-rose-600 font-medium">Book Now</a> <a href="#about" class="text-rose-800 hover:text-rose-600 font-medium">About Us</a> <a href="#contact" class="text-rose-800 hover:text-rose-600 font-medium">Contact</a> <button id="mobile-login-btn" class="text-rose-800 hover:text-rose-600 font-medium text-left">Staff Login</button> </div> </div> <!-- Admin Navigation (hidden by default) --> <div class="admin-nav bg-rose-800 text-white py-2 px-4"> <div class="container mx-auto flex justify-between items-center"> <span class="font-medium">Admin Dashboard</span> <div class="flex space-x-4"> <button id="upload-btn" class="hover:text-rose-200">Upload Photos</button> <button id="logout-btn" class="hover:text-rose-200">Logout</button> </div> </div> </div> </header> <!-- Login Modal --> <div id="login-modal" class="login-modal"> <div class="modal-content"> <span class="close-modal float-right text-2xl cursor-pointer">&times;</span> <h2 class="text-2xl font-bold text-rose-800 mb-6">Staff Login</h2> <form id="login-form"> <div class="mb-4"> <label for="email" class="block text-gray-700 mb-2">Email</label> <input type="email" id="email" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-rose-400" required> </div> <div class="mb-6"> <label for="password" class="block text-gray-700 mb-2">Password</label> <input type="password" id="password" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-rose-400" required> </div> <button type="submit" class="w-full bg-rose-600 text-white py-2 px-4 rounded-md hover:bg-rose-700 transition">Login</button> <div class="mt-4 text-center"> <a href="#" class="text-rose-600 hover:underline">Forgot password?</a> </div> </form> </div> </div> <!-- Upload Modal --> <div id="upload-modal" class="login-modal"> <div class="modal-content"> <span class="close-upload-modal float-right text-2xl cursor-pointer">&times;</span> <h2 class="text-2xl font-bold text-rose-800 mb-6">Upload New Photo</h2> <form id="upload-form"> <div class="mb-4"> <div id="dropzone" class="dropzone"> <i class="fas fa-cloud-upload-alt text-4xl text-rose-400 mb-2"></i> <p class="text-gray-600">Drag & drop your image here or click to browse</p> <input type="file" id="file-input" class="hidden" accept="image/*"> </div> <div id="preview-container" class="mt-4 hidden"> <img id="image-preview" class="max-h-48 mx-auto rounded-md"> </div> </div> <div class="mb-4"> <label for="image-title" class="block text-gray-700 mb-2">Title</label> <input type="text" id="image-title" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-rose-400" required> </div> <div class="mb-4"> <label for="image-desc" class="block text-gray-700 mb-2">Description</label> <textarea id="image-desc" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-rose-400" rows="3"></textarea> </div> <div class="mb-4"> <label for="image-category" class="block text-gray-700 mb-2">Category</label> <select id="image-category" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-rose-400"> <option value="hair">Hair</option> <option value="nails">Nails</option> <option value="makeup">Makeup</option> <option value="spa">Spa</option> <option value="skincare">Skincare</option> </select> </div> <div class="mb-4"> <label class="block text-gray-700 mb-2">Tags (comma separated)</label> <input type="text" id="image-tags" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-rose-400" placeholder="e.g., bridal, summer, gold"> </div> <button type="submit" class="w-full bg-rose-600 text-white py-2 px-4 rounded-md hover:bg-rose-700 transition">Upload Photo</button> </form> </div> </div> <!-- Hero Section --> <section id="home" class="hero min-h-screen flex items-center justify-center text-center px-4"> <div class="max-w-4xl mx-auto"> <h2 class="text-4xl md:text-6xl font-bold text-rose-800 mb-6">Glow From Within</h2> <p class="text-xl md:text-2xl text-gray-700 mb-8">Experience luxury beauty services tailored just for you at Braid Station Norfolk</p> <div class="flex flex-col sm:flex-row justify-center gap-4"> <a href="#booking" class="bg-rose-600 hover:bg-rose-700 text-white font-bold py-3 px-6 rounded-full transition duration-300">Book Now</a> <a href="#services" class="bg-white hover:bg-gray-100 text-rose-600 font-bold py-3 px-6 rounded-full border border-rose-600 transition duration-300">Our Services</a> </div> </div> </section> <!-- Services Section --> <section id="services" class="py-16 bg-white"> <div class="container mx-auto px-4"> <h2 class="text-3xl font-bold text-center text-rose-800 mb-12">Our Services</h2> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Hair Services --> <div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300"> <div class="h-48 overflow-hidden"> <img src="https://images.unsplash.com/photo-1595476108010-b4d1f102b1b1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1888&q=80" alt="Hair Services" class="w-full h-full object-cover"> </div> <div class="p-6"> <h3 class="text-xl font-bold text-rose-800 mb-2">Hair Services</h3> <p class="text-gray-600 mb-4">From precision cuts to vibrant colors and luxurious treatments, we'll help you achieve your dream hair.</p> <div class="mb-4"> <div class="flex justify-between py-2 border-b"> <span>Women's Cut & Style</span> <span>$65+</span> </div> <div class="flex justify-between py-2 border-b"> <span>Color Services</span> <span>$75+</span> </div> <div class="flex justify-between py-2 border-b"> <span>Extensions</span> <span>$150+</span> </div> <div class="flex justify-between py-2"> <span>Special Occasion</span> <span>$85+</span> </div> </div> <a href="#booking" class="inline-block bg-rose-600 hover:bg-rose-700 text-white font-medium py-2 px-4 rounded-md transition duration-300">Book Now</a> </div> </div> <!-- Nail Services --> <div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300"> <div class="h-48 overflow-hidden"> <img src="https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1888&q=80" alt="Nail Services" class="w-full h-full object-cover"> </div> <div class="p-6"> <h3 class="text-xl font-bold text-rose-800 mb-2">Nail Services</h3> <p class="text-gray-600 mb-4">Pamper your hands and feet with our luxurious manicures, pedicures, and nail art services.</p> <div class="mb-4"> <div class="flex justify-between py-2 border-b"> <span>Classic Manicure</span> <span>$35</span> </div> <div class="flex justify-between py-2 border-b"> <span>Gel Polish</span> <span>$45</span> </div> <div class="flex justify-between py-2 border-b"> <span>Spa Pedicure</span> <span>$55</span> </div> <div class="flex justify-between py-2"> <span>Nail Art</span> <span>$10+</span> </div> </div> <a href="#booking" class="inline-block bg-rose-600 hover:bg-rose-700 text-white font-medium py-2 px-4 rounded-md transition duration-300">Book Now</a> </div> </div> <!-- Makeup Services --> <div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300"> <div class="h-48 overflow-hidden"> <img src="https://images.unsplash.com/photo-1596462502278-27bfdc403348?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Makeup Services" class="w-full h-full object-cover"> </div> <div class="p-6"> <h3 class="text-xl font-bold text-rose-800 mb-2">Makeup Services</h3> <p class="text-gray-600 mb-4">Professional makeup application for every occasion, from natural daytime looks to glamorous evening styles.</p> <div class="mb-4"> <div class="flex justify-between py-2 border-b"> <span>Everyday Makeup</span> <span>$65</span> </div> <div class="flex justify-between py-2 border-b"> <span>Special Occasion</span> <span>$85</span> </div> <div class="flex justify-between py-2 border-b"> <span>Bridal Makeup</span> <span>$120</span> </div> <div class="flex justify-between py-2"> <span>Makeup Lesson</span> <span>$95</span> </div> </div> <a href="#booking" class="inline-block bg-rose-600 hover:bg-rose-700 text-white font-medium py-2 px-4 rounded-md transition duration-300">Book Now</a> </div> </div> </div> <!-- Second Row of Services --> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-8"> <!-- Spa Services --> <div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300"> <div class="h-48 overflow-hidden"> <img src="https://images.unsplash.com/photo-1544161515-4ab6ce6db874?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Spa Services" class="w-full h-full object-cover"> </div> <div class="p-6"> <h3 class="text-xl font-bold text-rose-800 mb-2">Spa Services</h3> <p class="text-gray-600 mb-4">Relax and rejuvenate with our selection of spa treatments designed to refresh both body and mind.</p> <div class="mb-4"> <div class="flex justify-between py-2 border-b"> <span>Swedish Massage</span> <span>$85/hr</span> </div> <div class="flex justify-between py-2 border-b"> <span>Hot Stone Massage</span> <span>$110/hr</span> </div> <div class="flex justify-between py-2 border-b"> <span>Facials</span> <span>$75+</span> </div> <div class="flex justify-between py-2"> <span>Body Treatments</span> <span>$95+</span> </div> </div> <a href="#booking" class="inline-block bg-rose-600 hover:bg-rose-700 text-white font-medium py-2 px-4 rounded-md transition duration-300">Book Now</a> </div> </div> <!-- Skincare Services --> <div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300"> <div class="h-48 overflow-hidden"> <img src="https://images.unsplash.com/photo-1570172619644-dfd03ed5d881?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Skincare Services" class="w-full h-full object-cover"> </div> <div class="p-6"> <h3 class="text-xl font-bold text-rose-800 mb-2">Skincare Services</h3> <p class="text-gray-600 mb-4">Achieve healthy, glowing skin with our customized facials and advanced skincare treatments.</p> <div class="mb-4"> <div class="flex justify-between py-2 border-b"> <span>Basic Facial</span> <span>$75</span> </div> <div class="flex justify-between py-2 border-b"> <span>Anti-Aging Treatment</span> <span>$120</span> </div> <div class="flex justify-between py-2 border-b"> <span>Acne Treatment</span> <span>$95</span> </div> <div class="flex justify-between py-2"> <span>Microdermabrasion</span> <span>$110</span> </div> </div> <a href="#booking" class="inline-block bg-rose-600 hover:bg-rose-700 text-white font-medium py-2 px-4 rounded-md transition duration-300">Book Now</a> </div> </div> <!-- Bridal Packages --> <div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300"> <div class="h-48 overflow-hidden"> <img src="https://images.unsplash.com/photo-1519225421980-715cb0215aed?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Bridal Packages" class="w-full h-full object-cover"> </div> <div class="p-6"> <h3 class="text-xl font-bold text-rose-800 mb-2">Bridal Packages</h3> <p class="text-gray-600 mb-4">Make your special day perfect with our comprehensive bridal beauty packages and trials.</p> <div class="mb-4"> <div class="flex justify-between py-2 border-b"> <span>Bridal Hair & Makeup</span> <span>$200</span> </div> <div class="flex justify-between py-2 border-b"> <span>Bridal Party Package</span> <span>$150/person</span> </div> <div class="flex justify-between py-2 border-b"> <span>Trial Session</span> <span>$95</span> </div> <div class="flex justify-between py-2"> <span>Full Day Package</span> <span>$350+</span> </div> </div> <a href="#booking" class="inline-block bg-rose-600 hover:bg-rose-700 text-white font-medium py-2 px-4 rounded-md transition duration-300">Book Now</a> </div> </div> </div> </div> </section> <!-- Gallery Section --> <section id="gallery" class="py-16 bg-rose-50"> <div class="container mx-auto px-4"> <h2 class="text-3xl font-bold text-center text-rose-800 mb-12">Our Gallery</h2> <!-- Gallery Filters --> <div class="flex flex-wrap justify-center gap-2 mb-8"> <button class="filter-btn px-4 py-2 rounded-full bg-white text-rose-800 border border-rose-200 hover:bg-rose-100 transition active-filter" data-filter="all">All</button> <button class="filter-btn px-4 py-2 rounded-full bg-white text-rose-800 border border-rose-200 hover:bg-rose-100 transition" data-filter="hair">Hair</button> <button class="filter-btn px-4 py-2 rounded-full bg-white text-rose-800 border border-rose-200 hover:bg-rose-100 transition" data-filter="nails">Nails</button> <button class="filter-btn px-4 py-2 rounded-full bg-white text-rose-800 border border-rose-200 hover:bg-rose-100 transition" data-filter="makeup">Makeup</button> <button class="filter-btn px-4 py-2 rounded-full bg-white text-rose-800 border border-rose-200 hover:bg-rose-100 transition" data-filter="spa">Spa</button> <button class="filter-btn px-4 py-2 rounded-full bg-white text-rose-800 border border-rose-200 hover:bg-rose-100 transition" data-filter="skincare">Skincare</button> </div> <!-- Gallery Grid --> <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6" id="gallery-grid"> <!-- Gallery items will be added dynamically via JavaScript --> </div> </div> </section> <!-- Booking Section --> <section id="booking" class="py-16 bg-white"> <div class="container mx-auto px-4"> <h2 class="text-3xl font-bold text-center text-rose-800 mb-12">Book An Appointment</h2> <div class="max-w-3xl mx-auto bg-rose-50 rounded-lg shadow-md overflow-hidden"> <div class="md:flex"> <div class="md:w-1/2 bg-rose-100 p-8"> <h3 class="text-xl font-bold text-rose-800 mb-4">Booking Information</h3> <p class="text-gray-700 mb-6">Ready to pamper yourself? Fill out our booking form and we'll get back to you within 24 hours to confirm your appointment.</p> <div class="mb-6"> <h4 class="font-bold text-rose-800 mb-2">Opening Hours</h4> <div class="space-y-1"> <div class="flex justify-between"> <span>Monday - Friday</span> <span>9:00 AM - 7:00 PM</span> </div> <div class="flex justify-between"> <span>Saturday</span> <span>9:00 AM - 5:00 PM</span> </div> <div class="flex justify-between"> <span>Sunday</span> <span>10:00 AM - 4:00 PM</span> </div> </div> </div> <div> <h4 class="font-bold text-rose-800 mb-2">Contact Info</h4> <div class="space-y-2"> <div class="flex items-center"> <i class="fas fa-map-marker-alt text-rose-600 mr-2"></i> <span>123 Beauty Lane, Norfolk, VA 23510</span> </div> <div class="flex items-center"> <i class="fas fa-phone text-rose-600 mr-2"></i> <span>(757) 555-1234</span> </div> <div class="flex items-center"> <i class="fas fa-envelope text-rose-600 mr-2"></i> <span>info@braidstationnorfolk.com</span> </div> </div> </div> </div> <div class="md:w-1/2 p-8"> <form id="booking-form"> <div class="mb-4"> <label for="booking-name" class="block text-gray-700 mb-2">Full Name</label> <input type="text" id="booking-name" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-rose-400" required> </div> <div class="mb-4"> <label for="booking-email" class="block text-gray-700 mb-2">Email</label> <input type="email" id="booking-email" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-rose-400" required> </div> <div class="mb-4"> <label for="booking-phone" class="block text-gray-700 mb-2">Phone Number</label> <input type="tel" id="booking-phone" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-rose-400" required> </div> <div class="mb-4"> <label for="booking-service" class="block text-gray-700 mb-2">Service</label> <select id="booking-service" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-rose-400" required> <option value="">Select a service</option> <option value="hair">Hair Services</option> <option value="nails">Nail Services</option> <option value="makeup">Makeup Services</option> <option value="spa">Spa Services</option> <option value="skincare">Skincare Services</option> <option value="bridal">Bridal Packages</option> </select> </div> <div class="mb-4"> <label for="booking-date" class="block text-gray-700 mb-2">Preferred Date</label> <input type="date" id="booking-date" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-rose-400" required> </div> <div class="mb-4"> <label for="booking-time" class="block text-gray-700 mb-2">Preferred Time</label> <input type="time" id="booking-time" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-rose-400" required> </div> <div class="mb-4"> <label for="booking-notes" class="block text-gray-700 mb-2">Special Requests</label> <textarea id="booking-notes" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-rose-400" rows="3"></textarea> </div> <button type="submit" class="w-full bg-rose-600 hover:bg-rose-700 text-white font-bold py-3 px-4 rounded-md transition duration-300">Submit Booking</button> </form> </div> </div> </div> </div> </section> <!-- About Us Section --> <section id="about" class="py-16 bg-rose-50"> <div class="container mx-auto px-4"> <h2 class="text-3xl font-bold text-center text-rose-800 mb-12">About Us</h2> <div class="max-w-4xl mx-auto"> <div class="md:flex items-center gap-8 mb-12"> <div class="md:w-1/2 mb-8 md:mb-0"> <img src="https://images.unsplash.com/photo-1580618672591-eb180b1a973f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80" alt="Our Salon" class="w-full h-auto rounded-lg shadow-md"> </div> <div class="md:w-1/2"> <h3 class="text-2xl font-bold text-rose-800 mb-4">Our Story</h3> <p class="text-gray-700 mb-4">Founded in 2015, Braid Station Norfolk began as a small boutique salon with a big vision: to create a space where beauty meets wellness, and every client leaves feeling confident and rejuvenated.</p> <p class="text-gray-700">What started as a single-chair operation has grown into Norfolk's premier beauty destination, known for our exceptional service, talented team, and commitment to using only the highest quality products.</p> </div> </div> <div class="mb-12"> <h3 class="text-2xl font-bold text-center text-rose-800 mb-8">Our Mission</h3> <div class="bg-white p-8 rounded-lg shadow-md text-center max-w-3xl mx-auto"> <p class="text-gray-700 text-lg italic mb-6">"To enhance natural beauty through personalized services, foster confidence in our clients, and create a welcoming environment where everyone feels valued."</p> <div class="flex flex-wrap justify-center gap-6"> <div class="flex items-center"> <i class="fas fa-heart text-rose-600 text-2xl mr-2"></i> <span>Quality Products</span> </div> <div class="flex items-center"> <i class="fas fa-star text-rose-600 text-2xl mr-2"></i> <span>Expert Stylists</span> </div> <div class="flex items-center"> <i class="fas fa-leaf text-rose-600 text-2xl mr-2"></i> <span>Eco-Friendly</span> </div> <div class="flex items-center"> <i class="fas fa-smile text-rose-600 text-2xl mr-2"></i> <span>Client Satisfaction</span> </div> </div> </div> </div> <h3 class="text-2xl font-bold text-center text-rose-800 mb-8">Meet Our Team</h3> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Team Member 1 --> <div class="bg-white rounded-lg shadow-md overflow-hidden transition duration-300 hover:shadow-lg"> <div class="h-64 overflow-hidden"> <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5cd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1888&q=80" alt="Sarah Johnson" class="w-full h-full object-cover"> </div> <div class="p-6"> <h4 class="text-xl font-bold text-rose-800 mb-1">Sarah Johnson</h4> <p class="text-rose-600 font-medium mb-3">Master Stylist & Owner</p> <p class="text-gray-700 mb-4">With over 15 years in the industry, Sarah specializes in precision cutting and balayage techniques.</p> <div class="flex space-x-3"> <a href="#" class="text-rose-600 hover:text-rose-800"><i class="fab fa-instagram"></i></a> <a href="#" class="text-rose-600 hover:text-rose-800"><i class="fab fa-facebook"></i></a> </div> </div> </div> <!-- Team Member 2 --> <div class="bg-white rounded-lg shadow-md overflow-hidden transition duration-300 hover:shadow-lg"> <div class="h-64 overflow-hidden"> <img src="https://images.unsplash.com/photo-1551836022-d5d88e9218df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80" alt="Maria Garcia" class="w-full h-full object-cover"> </div> <div class="p-6"> <h4 class="text-xl font-bold text-rose-800 mb-1">Maria Garcia</h4> <p class="text-rose-600 font-medium mb-3">Lead Esthetician</p> <p class="text-gray-700 mb-4">Maria's facials and skincare treatments are transformative, using only organic, cruelty-free products.</p> <div class="flex space-x-3"> <a href="#" class="text-rose-600 hover:text-rose-800"><i class="fab fa-instagram"></i></a> <a href="#" class="text-rose-600 hover:text-rose-800"><i class="fab fa-facebook"></i></a> </div> </div> </div> <!-- Team Member 3 --> <div class="bg-white rounded-lg shadow-md overflow-hidden transition duration-300 hover:shadow-lg"> <div class="h-64 overflow-hidden"> <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1961&q=80" alt="Taylor Smith" class="w-full h-full object-cover"> </div> <div class="p-6"> <h4 class="text-xl font-bold text-rose-800 mb-1">Taylor Smith</h4> <p class="text-rose-600 font-medium mb-3">Nail Technician & Makeup Artist</p> <p class="text-gray-700 mb-4">Taylor's intricate nail art and flawless makeup applications make her a bridal client favorite.</p> <div class="flex space-x-3"> <a href="#" class="text-rose-600 hover:text-rose-800"><i class="fab fa-instagram"></i></a> <a href="#" class="text-rose-600 hover:text-rose-800"><i class="fab fa-facebook"></i></a> </div> </div> </div> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="py-16 bg-white"> <div class="container mx-auto px-4"> <h2 class="text-3xl font-bold text-center text-rose-800 mb-12">Contact Us</h2> <div class="max-w-6xl mx-auto"> <div class="md:flex gap-8"> <div class="md:w-1/2 mb-8 md:mb-0"> <div class="bg-rose-50 p-6 rounded-lg shadow-md h-full"> <h3 class="text-xl font-bold text-rose-800 mb-4">Get In Touch</h3> <form id="contact-form"> <div class="mb-4"> <label for="contact-name" class="block text-gray-700 mb-2">Name</label> <input type="text" id="contact-name" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-rose-400" required> </div> <div class="mb-4"> <label for="contact-email" class="block text-gray-700 mb-2">Email</label> <input type="email" id="contact-email" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-rose-400" required> </div> <div class="mb-4"> <label for="contact-subject" class="block text-gray-700 mb-2">Subject</label> <input type="text" id="contact-subject" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-rose-400" required> </div> <div class="mb-4"> <label for="contact-message" class="block text-gray-700 mb-2">Message</label> <textarea id="contact-message" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-rose-400" rows="5" required></textarea> </div> <button type="submit" class="w-full bg-rose-600 hover:bg-rose-700 text-white font-bold py-3 px-4 rounded-md transition duration-300">Send Message</button> </form> </div> </div> <div class="md:w-1/2"> <div class="bg-rose-50 p-6 rounded-lg shadow-md h-full"> <h3 class="text-xl font-bold text-rose-800 mb-4">Our Location</h3> <div class="mb-6"> <div class="h-64 bg-gray-200 rounded-lg overflow-hidden"> <!-- Google Maps iframe would go here --> <div class="w-full h-full flex items-center justify-center bg-rose-100"> <i class="fas fa-map-marker-alt text-4xl text-rose-600"></i> </div> </div> </div> <div class="space-y-4"> <div class="flex items-start"> <i class="fas fa-map-marker-alt text-rose-600 mt-1 mr-3"></i> <div> <h4 class="font-bold text-gray-800">Address</h4> <p class="text-gray-700">123 Beauty Lane<br>Norfolk, VA 23510</p> </div> </div> <div class="flex items-start"> <i class="fas fa-phone text-rose-600 mt-1 mr-3"></i> <div> <h4 class="font-bold text-gray-800">Phone</h4> <p class="text-gray-700">(757) 555-1234</p> </div> </div> <div class="flex items-start"> <i class="fas fa-envelope text-rose-600 mt-1 mr-3"></i> <div> <h4 class="font-bold text-gray-800">Email</h4> <p class="text-gray-700">info@braidstationnorfolk.com</p> </div> </div> <div class="flex items-start"> <i class="fas fa-clock text-rose-600 mt-1 mr-3"></i> <div> <h4 class="font-bold text-gray-800">Hours</h4> <p class="text-gray-700"> Mon-Fri: 9AM - 7PM<br> Sat: 9AM - 5PM<br> Sun: 10AM - 4PM </p> </div> </div> </div> <div class="mt-6"> <h4 class="font-bold text-gray-800 mb-3">Follow Us</h4> <div class="flex space-x-4"> <a href="#" class="bg-rose-600 hover:bg-rose-700 text-white w-10 h-10 rounded-full flex items-center justify-center transition duration-300"> <i class="fab fa-facebook-f"></i> </a> <a href="#" class="bg-rose-600 hover:bg-rose-700 text-white w-10 h-10 rounded-full flex items-center justify-center transition duration-300"> <i class="fab fa-instagram"></i> </a> <a href="#" class="bg-rose-600 hover:bg-rose-700 text-white w-10 h-10 rounded-full flex items-center justify-center transition duration-300"> <i class="fab fa-pinterest-p"></i> </a> <a href="#" class="bg-rose-600 hover:bg-rose-700 text-white w-10 h-10 rounded-full flex items-center justify-center transition duration-300"> <i class="fab fa-yelp"></i> </a> </div> </div> </div> </div> </div> </div> </div> </section> <!-- Newsletter Section --> <section class="py-12 bg-rose-800 text-white"> <div class="container mx-auto px-4 text-center"> <h2 class="text-2xl font-bold mb-4">Join Our Beauty Community</h2> <p class="max-w-2xl mx-auto mb-6">Subscribe to our newsletter for exclusive offers, beauty tips, and the latest trends delivered straight to your inbox.</p> <form class="max-w-md mx-auto flex"> <input type="email" placeholder="Your email address" class="flex-grow px-4 py-2 rounded-l-md focus:outline-none text-gray-800"> <button type="submit" class="bg-rose-600 hover:bg-rose-700 px-6 py-2 rounded-r-md transition duration-300">Subscribe</button> </form> </div> </section> <!-- Footer --> <footer class="bg-gray-900 text-white py-8"> <div class="container mx-auto px-4"> <div class="md:flex justify-between items-center"> <div class="mb-6 md:mb-0"> <div class="flex items-center"> <i class="fas fa-spa text-2xl text-rose-400 mr-2"></i> <h2 class="text-xl font-bold">Braid Station Norfolk</h2> </div> <p class="mt-2 text-gray-400">Glow From Within</p> </div> <div class="grid grid-cols-2 md:grid-cols-3 gap-8"> <div> <h3 class="text-lg font-bold mb-3">Quick Links</h3> <ul class="space-y-2"> <li><a href="#home" class="text-gray-400 hover:text-white transition">Home</a></li> <li><a href="#services" class="text-gray-400 hover:text-white transition">Services</a></li> <li><a href="#gallery" class="text-gray-400 hover:text-white transition">Gallery</a></li> <li><a href="#booking" class="text-gray-400 hover:text-white transition">Booking</a></li> </ul> </div> <div> <h3 class="text-lg font-bold mb-3">Information</h3> <ul class="space-y-2"> <li><a href="#about" class="text-gray-400 hover:text-white transition">About Us</a></li> <li><a href="#contact" class="text-gray-400 hover:text-white transition">Contact</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a></li> </ul> </div> <div> <h3 class="text-lg font-bold mb-3">Contact</h3> <ul class="space-y-2"> <li class="flex items-center"> <i class="fas fa-map-marker-alt text-rose-400 mr-2"></i> <span class="text-gray-400">123 Beauty Lane, Norfolk</span> </li> <li class="flex items-center"> <i class="fas fa-phone text-rose-400 mr-2"></i> <span class="text-gray-400">(757) 555-1234</span> </li> <li class="flex items-center"> <i class="fas fa-envelope text-rose-400 mr-2"></i> <span class="text-gray-400">info@braidstationnorfolk.com</span> </li> </ul> </div> </div> </div> <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400"> <p>&copy; 2023 Braid Station Norfolk. All rights reserved.</p> </div> </div> </footer> <!-- JavaScript --> <script> // Sample gallery data (in a real app, this would come from a database) const galleryData = [ { id: 1, title: "Balayage Highlights", description: "Beautiful sun-kissed balayage on long layered cut", category: "hair", tags: ["balayage", "highlights", "blonde"], imageUrl: "https://images.unsplash.com/photo-1559599101-f09722fb4948?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80" }, { id: 2, title: "French Manicure", description: "Classic french manicure with gel polish", category: "nails", tags: ["french", "manicure", "gel"], imageUrl: "https://images.unsplash.com/photo-1604658243842-8258bcdac0a0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80" }, { id: 3, title: "Bridal Makeup", description: "Elegant bridal makeup with soft glam look", category: "makeup", tags: ["bridal", "makeup", "glam"], imageUrl: "https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80" }, { id: 4, title: "Hot Stone Massage", description: "Relaxing hot stone massage therapy", category: "spa", tags: ["massage", "spa", "relaxation"], imageUrl: "https://images.unsplash.com/photo-1544161515-4ab6ce6db874?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" }, { id: 5, title: "Hydrafacial Treatment", description: "Revitalizing hydrafacial for glowing skin", category: "skincare", tags: ["facial", "skincare", "hydra"], imageUrl: "https://images.unsplash.com/photo-1570172619644-dfd03ed5d881?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" }, { id: 6, title: "Braided Updo", description: "Elegant braided updo for special occasions", category: "hair", tags: ["braids", "updo", "formal"], imageUrl: "https://images.unsplash.com/photo-1525507119028-ed4c629a60a3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1935&q=80" }, { id: 7, title: "Nail Art Design", description: "Creative nail art with floral patterns", category: "nails", tags: ["nailart", "floral", "design"], imageUrl: "https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1888&q=80" }, { id: 8, title: "Evening Glam Makeup", description: "Dramatic evening makeup with smokey eyes", category: "makeup", tags: ["glam", "evening", "smokey"], imageUrl: "https://images.unsplash.com/photo-1596462502278-27bfdc403348?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" } ]; // DOM Elements const mobileMenuBtn = document.getElementById('mobile-menu-btn'); const mobileMenu = document.getElementById('mobile-menu'); const loginBtn = document.getElementById('login-btn'); const mobileLoginBtn = document.getElementById('mobile-login-btn'); const loginModal = document.getElementById('login-modal'); const closeModal = document.querySelector('.close-modal'); const loginForm = document.getElementById('login-form'); const uploadBtn = document.getElementById('upload-btn'); const uploadModal = document.getElementById('upload-modal'); const closeUploadModal = document.querySelector('.close-upload-modal'); const uploadForm = document.getElementById('upload-form'); const dropzone = document.getElementById('dropzone'); const fileInput = document.getElementById('file-input'); const previewContainer = document.getElementById('preview-container'); const imagePreview = document.getElementById('image-preview'); const galleryGrid = document.getElementById('gallery-grid'); const filterBtns = document.querySelectorAll('.filter-btn'); const adminNav = document.querySelector('.admin-nav'); const logoutBtn = document.getElementById('logout-btn'); const bookingForm = document.getElementById('booking-form'); const contactForm = document.getElementById('contact-form'); // Mobile Menu Toggle mobileMenuBtn.addEventListener('click', () => { mobileMenu.classList.toggle('hidden'); }); // Login Modal const openLoginModal = () => { loginModal.style.display = 'block'; }; const closeLoginModal = () => { loginModal.style.display = 'none'; }; loginBtn.addEventListener('click', openLoginModal); mobileLoginBtn.addEventListener('click', openLoginModal); closeModal.addEventListener('click', closeLoginModal); // Close modal when clicking outside window.addEventListener('click', (e) => { if (e.target === loginModal) { closeLoginModal(); } if (e.target === uploadModal) { closeUploadModal(); } }); // Upload Modal const openUploadModal = () => { uploadModal.style.display = 'block'; }; const closeUploadModal = () => { uploadModal.style.display = 'none'; // Reset form uploadForm.reset(); previewContainer.classList.add('hidden'); }; uploadBtn.addEventListener('click', openUploadModal); closeUploadModal.addEventListener('click', closeUploadModal); // Drag and drop file upload dropzone.addEventListener('click', () => { fileInput.click(); }); fileInput.addEventListener('change', (e) => { const file = e.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = (e) => { imagePreview.src = e.target.result; previewContainer.classList.remove('hidden'); }; reader.readAsDataURL(file); } }); dropzone.addEventListener('dragover', (e) => { e.preventDefault(); dropzone.classList.add('dragover'); }); dropzone.addEventListener('dragleave', () => { dropzone.classList.remove('dragover'); }); dropzone.addEventListener('drop', (e) => { e.preventDefault(); dropzone.classList.remove('dragover'); const file = e.dataTransfer.files[0]; if (file && file.type.startsWith('image/')) { fileInput.files = e.dataTransfer.files; const reader = new FileReader(); reader.onload = (e) => { imagePreview.src = e.target.result; previewContainer.classList.remove('hidden'); }; reader.readAsDataURL(file); } }); // Login Form Submission loginForm.addEventListener('submit', (e) => { e.preventDefault(); const email = document.getElementById('email').value; const password = document.getElementById('password').value; // Simple validation (in a real app, this would check against a database) if (email === 'admin@braidstation.com' && password === 'password123') { // Show admin nav adminNav.style.display = 'block'; // Close modal closeLoginModal(); // Scroll to top window.scrollTo(0, 0); } else { alert('Invalid credentials. Please try again.'); } }); // Logout logoutBtn.addEventListener('click', () => { adminNav.style.display = 'none'; }); // Upload Form Submission uploadForm.addEventListener('submit', (e) => { e.preventDefault(); // Get form values const title = document.getElementById('image-title').value; const description = document.getElementById('image-desc').value; const category = document.getElementById('image-category').value; const tags = document.getElementById('image-tags').value.split(',').map(tag => tag.trim()); // In a real app, this would upload to a server // For demo, we'll just add to our gallery data if (fileInput.files.length > 0) { const reader = new FileReader(); reader.onload = (e) => { const newItem = { id: galleryData.length + 1, title, description, category, tags, imageUrl: e.target.result }; galleryData.unshift(newItem); // Add to beginning of array renderGalleryItems('all'); // Re-render gallery closeUploadModal(); // Close modal }; reader.readAsDataURL(fileInput.files[0]); } else { alert('Please select an image to upload'); } }); // Gallery Filter filterBtns.forEach(btn => { btn.addEventListener('click', () => { // Remove active class from all buttons filterBtns.forEach(b => b.classList.remove('active-filter')); // Add active class to clicked button btn.classList.add('active-filter'); // Filter gallery const filter = btn.dataset.filter; renderGalleryItems(filter); }); }); // Render Gallery Items function renderGalleryItems(filter) { galleryGrid.innerHTML = ''; const filteredItems = filter === 'all' ? galleryData : galleryData.filter(item => item.category === filter); filteredItems.forEach(item => { const galleryItem = document.createElement('div'); galleryItem.className = 'gallery-item relative group overflow-hidden rounded-lg shadow-md'; galleryItem.dataset.category = item.category; galleryItem.innerHTML = ` <div class="h-64 overflow-hidden"> <img src="${item.imageUrl}" alt="${item.title}" class="w-full h-full object-cover transition duration-300 group-hover:scale-110"> </div> <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-40 transition duration-300 flex items-end p-4"> <div class="transform translate-y-10 group-hover:translate-y-0 transition duration-300"> <h3 class="text-white font-bold text-lg">${item.title}</h3> <p class="text-gray-200 text-sm">${item.description}</p> <div class="mt-2 flex flex-wrap gap-1"> ${item.tags.map(tag => `<span class="bg-rose-600 text-white text-xs px-2 py-1 rounded-full">${tag}</span>`).join('')} </div> </div> </div> ${adminNav.style.display === 'block' ? `<button class="absolute top-2 right-2 bg-red-500 text-white p-2 rounded-full opacity-0 group-hover:opacity-100 transition duration-300 delete-btn" data-id="${item.id}"> <i class="fas fa-trash"></i> </button>` : ''} `; galleryGrid.appendChild(galleryItem); }); // Add delete event listeners if admin is logged in if (adminNav.style.display === 'block') { document.querySelectorAll('.delete-btn').forEach(btn => { btn.addEventListener('click', (e) => { e.stopPropagation(); const id = parseInt(btn.dataset.id); deleteGalleryItem(id); }); }); } } // Delete Gallery Item function deleteGalleryItem(id) { if (confirm('Are you sure you want to delete this item?')) { const index = galleryData.findIndex(item => item.id === id); if (index !== -1) { galleryData.splice(index, 1); renderGalleryItems(document.querySelector('.filter-btn.active-filter').dataset.filter); } } } // Booking Form Submission bookingForm.addEventListener('submit', (e) => { e.preventDefault(); alert('Thank you for your booking request! We will contact you shortly to confirm your appointment.'); bookingForm.reset(); }); // Contact Form Submission contactForm.addEventListener('submit', (e) => { e.preventDefault(); alert('Thank you for your message! We will get back to you soon.'); contactForm.reset(); }); // Initialize gallery on page load document.addEventListener('DOMContentLoaded', () => { renderGalleryItems('all'); }); // Smooth scrolling for anchor links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const targetId = this.getAttribute('href'); const targetElement = document.querySelector(targetId); if (targetElement) { window.scrollTo({ top: targetElement.offsetTop - 80, behavior: 'smooth' }); // Close mobile menu if open if (!mobileMenu.classList.contains('hidden')) { mobileMenu.classList.add('hidden'); } } }); }); </script> <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Jjumaa/braidnet" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Braid Station Norfolk | Glow From Within</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* Custom CSS */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Open+Sans:wght@300;400;600&display=swap');
body {
font-family: 'Open Sans', sans-serif;
color: #333;
}
h1, h2, h3, h4 {
font-family: 'Playfair Display', serif;
}
.hero {
background: linear-gradient(rgba(250, 224, 228, 0.8), rgba(250, 224, 228, 0.8)), url('https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80');
background-size: cover;
background-position: center;
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.gallery-item {
transition: all 0.3s ease;
}
.gallery-item:hover {
transform: scale(1.02);
}
.login-modal, .upload-modal {
display: none;
position: fixed;
z-index: 100;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: 10% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 500px;
border-radius: 10px;
}
.dropzone {
border: 2px dashed #d1d5db;
border-radius: 6px;
padding: 20px;
text-align: center;
cursor: pointer;
transition: all 0.3s;
}
.dropzone:hover, .dropzone.dragover {
border-color: #f472b6;
background-color: #fdf2f8;
}
.admin-nav {
display: none;
}
.active-filter {
background-color: #f472b6;
color: white;
}
</style>
</head>
<body class="bg-rose-50">
<!-- Header/Navigation -->
<header class="bg-white shadow-md sticky top-0 z-50">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="flex items-center">
<i class="fas fa-spa text-3xl text-rose-400 mr-2"></i>
<h1 class="text-2xl font-bold text-rose-800">Braid Station Norfolk</h1>
</div>
<nav class="hidden md:flex space-x-8">
<a href="#home" class="text-rose-800 hover:text-rose-600 font-medium">Home</a>
<a href="#services" class="text-rose-800 hover:text-rose-600 font-medium">Services</a>
<a href="#gallery" class="text-rose-800 hover:text-rose-600 font-medium">Gallery</a>
<a href="#booking" class="text-rose-800 hover:text-rose-600 font-medium">Book Now</a>
<a href="#about" class="text-rose-800 hover:text-rose-600 font-medium">About Us</a>
<a href="#contact" class="text-rose-800 hover:text-rose-600 font-medium">Contact</a>