Here's a comprehensive salon website with essential pages including login/signup for both admin and users: Beauty Salon

Welcome to Beauty Salon

Your perfect beauty destination

Book Appointment

Login

Don't have an account? Sign up

Admin Login

Sign Up

Already have an account? Login

Admin Login - Beauty Salon

Admin Login

Admin Sign Up

Admin Sign Up - Beauty Salon

Admin Sign Up

Already have an account? Login

Services - Beauty Salon

Our Services

Hair Styling

Professional hair styling and cutting services.

$50+

Book Now

Manicure & Pedicure

Premium nail care services.

$35+

Book Now

Facial Treatments

Revitalizing facial treatments.

$60+

Book Now

Book Appointment - Beauty Salon

Book an Appointment

About Us - Beauty Salon

About Our Salon

Welcome to Beauty Salon, where we provide premium beauty services with a personal touch.

Our team of certified professionals is dedicated to making you look and feel your best.

Meet Our Team

Sarah Johnson

Master Stylist

Michael Chen

Nail Specialist

Emily Rodriguez

Esthetician

Contact Us

Address

123 Beauty Street, City, State 12345

Phone

(123) 456-7890

Email

info@beautysalon.com

Hours

Monday-Friday: 9am-7pm

Saturday: 10am-5pm

Sunday: Closed

:root { --primary-color: #ff6b6b; --secondary-color: #4ecdc4; --dark-color: #292f36; --light-color: #f7fff7; --accent-color: #ffd166; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Arial', sans-serif; line-height: 1.6; color: var(--dark-color); background-color: var(--light-color); } header { background-color: white; box-shadow: 0 2px 5px rgba(0,0,0,0.1); position: sticky; top: 0; z-index: 100; } nav { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; max-width: 1200px; margin: 0 auto; } .logo { font-size: 1.5rem; font-weight: bold; color: var(--primary-color); } nav ul { display: flex; list-style: none; } nav ul li { margin-left: 1.5rem; } nav ul li a { text-decoration: none; color: var(--dark-color); transition: color 0.3s; } nav ul li a:hover { color: var(--primary-color); } .btn { display: inline-block; background-color: var(--primary-color); color: white; padding: 0.5rem 1rem; border: none; border-radius: 5px; text-decoration: none; cursor: pointer; transition: background-color 0.3s; } .btn:hover { background-color: #ff5252; } main { max-width: 1200px; margin: 2rem auto; padding: 0 2rem; } .hero { text-align: center; padding: 4rem 0; } .hero h1 { font-size: 2.5rem; margin-bottom: 1rem; } .hero p { font-size: 1.2rem; margin-bottom: 2rem; } .auth-container { display: flex; justify-content: center; align-items: center; min-height: 70vh; } .auth-form { background-color: white; padding: 2rem; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); width: 100%; max-width: 400px; } .auth-form h2 { margin-bottom: 1.5rem; text-align: center; } .form-group { margin-bottom: 1rem; } .form-group label { display: block; margin-bottom: 0.5rem; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 5px; } .service-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; margin-top: 2rem; } .service-card { background-color: white; padding: 1.5rem; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); } .service-card h3 { margin-bottom: 0.5rem; color: var(--primary-color); } .price { font-weight: bold; margin: 0.5rem 0; } .appointment form { background-color: white; padding: 2rem; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); max-width: 600px; margin: 0 auto; } .about p { margin-bottom: 1rem; } .team { margin-top: 2rem; } .team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem; margin-top: 1rem; } .team-member { background-color: white; padding: 1rem; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); text-align: center; } .contact-info { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; } .contact-info div { background-color: white; padding: 1rem; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); } footer { text-align: center; padding: 1rem; background-color: var(--dark-color); color: white; margin-top: 2rem; } document.addEventListener('DOMContentLoaded', function() { // Login form handling const loginForm = document.getElementById('loginForm'); if (loginForm) { loginForm.addEventListener('submit', function(e) { e.preventDefault(); const email = document.getElementById('email').value; const password = document.getElementById('password').value; // Basic validation if (!email || !password) { alert('Please fill in all fields'); return; } // In a real app, you would send this to your backend console.log('Login attempt with:', { email, password }); alert('Login successful! Redirecting...'); // window.location.href = 'dashboard.html'; }); } // Signup form handling const signupForm = document.getElementById('signupForm'); if (signupForm) { signupForm.addEventListener('submit', function(e) { e.preventDefault(); const name = document.getElementById('name').value; const email = document.getElementById('email').value; const phone = document.getElementById('phone').value; const password = document.getElementById('password').value; const confirmPassword = document.getElementById('confirmPassword').value; // Basic validation if (!name || !email || !phone || !password || !confirmPassword) { alert('Please fill in all fields'); return; } if (password !== confirmPassword) { alert('Passwords do not match'); return; } // In a real app, you would send this to your backend console.log('Signup attempt with:', { name, email, phone, password }); alert('Account created successfully! Redirecting to login...'); window.location.href = 'login.html'; }); } // Admin login form handling const adminLoginForm = document.getElementById('adminLoginForm'); if (adminLoginForm) { adminLoginForm.addEventListener('submit', function(e) { e.preventDefault(); const email = document.getElementById('adminEmail').value; const password = document.getElementById('adminPassword').value; // Basic validation if (!email || !password) { alert('Please fill in all fields'); return; } // In a real app, you would send this to your backend console.log('Admin login attempt with:', { email, password }); alert('Admin login successful! Redirecting to dashboard...'); // window.location.href = 'admin-dashboard.html'; }); } // Admin signup form handling const adminSignupForm = document.getElementById('adminSignupForm'); if (adminSignupForm) { adminSignupForm.addEventListener('submit', function(e) { e.preventDefault(); const name = document.getElementById('adminName').value; const email = document.getElementById('adminEmail').value; const password = document.getElementById('adminPassword').value; const confirmPassword = document.getElementById('adminConfirmPassword').value; const adminCode = document.getElementById('adminCode').value; // Basic validation if (!name || !email || !password || !confirmPassword || !adminCode) { alert('Please fill in all fields'); return; } if (password !== confirmPassword) { alert('Passwords do not match'); return; } if (adminCode !== 'admin123') { alert('Invalid admin access code'); return; } // In a real app, you would send this to your backend console.log('Admin signup attempt with:', { name, email, password, adminCode }); alert('Admin account created successfully! Redirecting to login...'); window.location.href = 'admin-login.html'; }); } // Appointment form handling const appointmentForm = document.getElementById('appointmentForm'); if (appointmentForm) { appointmentForm.addEventListener('submit', function(e) { e.preventDefault(); const service = document.getElementById('service').value; const date = document.getElementById('date').value; const time = document.getElementById('time').value; const name = document.getElementById('name').value; const phone = document.getElementById('phone').value; const email = document.getElementById('email').value; // Basic validation if (!service || !date || !time || !name || !phone || !email) { alert('Please fill in all fields'); return; } // In a real app, you would send this to your backend console.log('Appointment booked:', { service, date, time, name, phone, email }); alert('Appointment booked successfully!'); window.location.href = 'index.html'; }); } // Contact form handling const contactForm = document.getElementById('contactForm'); if (contactForm) { contactForm.addEventListener('submit', function(e) { e.preventDefault(); const name = document.getElementById('name').value; const email = document.getElementById('email').value; const phone = document.getElementById('phone').value; const message = document.getElementById('message').value; // Basic validation if (!name || !email || !message) { alert('Please fill in all required fields'); return; } // In a real app, you would send this to your backend console.log('Contact form submitted:', { name, email, phone, message }); alert('Thank you for your message! We will get back to you soon.'); document.getElementById('contactForm').reset(); }); } });