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 Download index.html from Jjumaa/braidnet: direct link, hf CLI and curl.
- Browser
- Download file 65.1 kB
-
https://huggingface.co/spaces/Jjumaa/braidnet/resolve/main/index.html
- Command line
-
hf download hf://spaces/Jjumaa/braidnet/index.html
-
curl -L -o index.html https://huggingface.co/spaces/Jjumaa/braidnet/resolve/main/index.html
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">×</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">×</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>© 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>
<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>