<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Premium Barber Studio | AI Haircut Visualizer</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Raleway:wght@400;500;600;700&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/8a5f4b5a8c.js" crossorigin="anonymous"></script>
<style>
body {
font-family: 'Raleway', sans-serif;
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
color: #e2e2e2;
}
.header-font {
font-family: 'Playfair Display', serif;
}
.face-container {
position: relative;
width: 320px;
height: 420px;
margin: 0 auto;
overflow: hidden;
border-radius: 12px;
background-color: #111;
box-shadow: 0 20px 40px rgba(0,0,0,0.5);
border: 3px solid #333;
}
.face-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
z-index: 1;
}
.hair-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
z-index: 2;
opacity: 0.95;
}
.fade-option {
cursor: pointer;
transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
border: 3px solid #333;
padding: 24px;
border-radius: 16px;
background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
border-bottom: 3px solid #555;
}
.fade-option:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 20px 40px rgba(79, 70, 229, 0.25);
border-color: #4f46e5;
}
.fade-option.active {
border-color: #4f46e5;
box-shadow: 0 0 30px rgba(79, 70, 229, 0.4);
background: linear-gradient(145deg, #252540, #151525);
transform: translateY(-4px) scale(1.03);
}
.intensity-btn {
transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
padding: 14px 28px;
border-radius: 10px;
font-weight: 700;
border: 3px solid #444;
background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
color: #ddd;
position: relative;
overflow: hidden;
}
.intensity-btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
transform: translateX(-100%);
}
.intensity-btn:hover::before {
transform: translateX(100%);
transition: transform 0.8s;
}
.intensity-btn:hover {
transform: translateY(-4px) scale(1.05);
border-color: #818cf8;
}
.intensity-btn.active {
background: linear-gradient(145deg, #3a308f, #2a206f);
color: white;
border-color: #4f46e5;
transform: translateY(-2px) scale(1.1);
box-shadow: 0 8px 20px rgba(79, 70, 229, 0.4);
}
.hair-preview {
width: 100%;
height: 140px;
background-size: cover;
background-position: center;
border-radius: 10px;
margin-bottom: 16px;
border: 4px solid #333;
box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}
.intensity-preview {
width: 90px;
height: 110px;
background-size: cover;
background-position: center;
border-radius: 10px;
margin: 0 auto 10px auto;
border: 3px solid #444;
}
.premium-badge {
position: absolute;
top: -10px;
right: -10px;
background: linear-gradient(45deg, #fbbf24, #f59e0b);
color: #1a1a1a;
font-weight: bold;
font-size: 12px;
padding: 4px 8px;
border-radius: 15px;
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
z-index: 3;
}
.feature-icon {
font-size: 24px;
color: #4f46e5;
margin-bottom: 8px;
}
.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #1a1a1a, #2d2d2d);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 1000;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s;
}
.loading-overlay.active {
opacity: 1;
pointer-events: all;
}
.spinner {
width: 70px;
height: 70px;
border: 6px solid #333;
border-top: 6px solid #4f46e5;
border-radius: 50%;
animation: spin 1.2s linear infinite;
box-shadow: 0 0 30px rgba(79, 70, 229, 0.3);
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.ai-glow {
position: absolute;
width: 100%;
height: 100%;
background: radial-gradient(circle, rgba(79, 70, 229, 0.2) 0%, transparent 70%);
z-index: 1;
opacity: 0;
pointer-events: none;
}
.step-transition {
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.floating {
animation: floating 3s ease-in-out infinite;
}
@keyframes floating {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
.luxury-border {
position: relative;
}
.luxury-border::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 2px solid transparent;
border-radius: 16px;
background: linear-gradient(45deg, #4f46e5, #8b5cf6, #4f46e5) border-box;
-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: destination-out;
mask-composite: exclude;
pointer-events: none;
}
</style>
</head>
<body class="min-h-screen">
<div class="container mx-auto px-4 py-8">
<!-- Header -->
<div class="text-center mb-10">
<div class="flex justify-center items-center mb-4">
<div class="w-3 h-3 bg-gradient-to-r from-purple-500 to-blue-500 rounded-full mr-2"></div>
<h1 class="header-font text-5xl text-transparent bg-clip-text bg-gradient-to-r from-purple-400 via-pink-400 to-blue-400 mb-2">
ELITE BARBER STUDIO
</h1>
<div class="w-3 h-3 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full ml-2"></div>
</div>
<p class="text-xl text-gray-300 mb-2">Premium Haircut Experience with AI Visualization</p>
<p class="text-sm text-gray-400">Where Tradition Meets Innovation</p>
</div>
<!-- Features -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
<div class="bg-gray-900 bg-opacity-80 rounded-xl p-6 text-center border border-gray-700">
<div class="feature-icon mb-3">
<i class="fas fa-magic"></i>
</div>
<h3 class="text-lg font-bold text-white mb-2">AI-Powered Visualization</h3>
<p class="text-gray-300 text-sm">Our advanced AI technology creates hyper-realistic previews of how each style will look on your unique facial structure.</p>
</div>
<div class="bg-gray-900 bg-opacity-80 rounded-xl p-6 text-center border border-gray-700">
<div class="feature-icon mb-3">
<i class="fas fa-ruler-combined"></i>
</div>
<h3 class="text-lg font-bold text-white mb-2">Precision Customization</h3>
<p class="text-gray-300 text-sm">Adjust fade intensity, length, and transition points to create your perfect personalized look.</p>
</div>
<div class="bg-gray-900 bg-opacity-80 rounded-xl p-6 text-center border border-gray-700">
<div class="feature-icon mb-3">
<i class="fas fa-crown"></i>
</div>
<h3 class="text-lg font-bold text-white mb-2">Master Barber Approved</h3>
<p class="text-gray-300 text-sm">Every digital preview is validated by our team of master barbers to ensure salon-perfect accuracy.</p>
</div>
</div>
<!-- Main Visualizer -->
<div class="max-w-6xl mx-auto">
<!-- Loading Overlay -->
<div id="loading-overlay" class="loading-overlay">
<div class="text-center text-white">
<div class="spinner mx-auto mb-6"></div>
<h3 class="text-3xl font-bold mb-4 bg-gradient-to-r from-purple-400 to-blue-400 bg-clip-text text-transparent">
AI PROCESSING
</h3>
<p class="text-xl text-gray-300 mb-2">Analyzing facial structure...</p>
<p class="text-lg text-gray-400 mb-2">Generating personalized haircut previews</p>
<div class="flex justify-center mt-6 space-x-2">
<div class="w-3 h-3 bg-purple-500 rounded-full animate-bounce" style="animation-delay: 0s"></div>
<div class="w-3 h-3 bg-blue-500 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
<div class="w-3 h-3 bg-pink-500 rounded-full animate-bounce" style="animation-delay: 0.4s"></div>
</div>
</div>
</div>
<!-- Step 1: Upload Photo -->
<div id="upload-step" class="bg-gray-800 bg-opacity-90 rounded-3xl shadow-2xl p-10 mb-6 step-transition">
<h2 class="header-font text-3xl text-center text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-blue-400 mb-8">
STEP 1: CAPTURE YOUR PROFILE
</h2>
<div class="text-center">
<div class="face-container mx-auto mb-8 floating">
<div id="uploaded-face" class="face-overlay" style="display: none;"></div>
<div id="demo-face" class="flex items-center justify-center h-full" style="background-image: url('https://placehold.co/320x420/1a1a1a/6366f1?text=CAPTURE+YOUR+FACE'); background-size: cover; background-position: center;"></div>
<div class="ai-glow"></div>
</div>
<input type="file" id="photo-upload" accept="image/*" class="hidden">
<button id="upload-btn" class="bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white font-bold py-5 px-12 rounded-2xl transition-all duration-300 shadow-2xl hover:shadow-3xl transform hover:scale-105 text-lg font-semibold">
<i class="fas fa-camera mr-3"></i>
CAPTURE SELFIE
</button>
<p class="text-sm text-gray-400 mt-4 max-w-md mx-auto">
For best results, ensure good lighting and a neutral expression. Position your face in the center of the frame.
</p>
<!-- Capture Tips -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-8 max-w-4xl mx-auto">
<div class="bg-gray-900 rounded-xl p-4 border border-gray-700">
<i class="fas fa-lightbulb text-yellow-400 text-2xl mb-2"></i>
<h4 class="font-semibold text-white mb-1">Lighting</h4>
<p class="text-xs text-gray-300">Natural light is best. Avoid backlighting and harsh shadows.</p>
</div>
<div class="bg-gray-900 rounded-xl p-4 border border-gray-700">
<i class="fas fa-face-smile text-green-400 text-2xl mb-2"></i>
<h4 class="font-semibold text-white mb-1">Expression</h4>
<p class="text-xs text-gray-300">Keep a neutral expression with eyes open and mouth closed.</p>
</div>
<div class="bg-gray-900 rounded-xl p-4 border border-gray-700">
<i class="fas fa-expand-arrows-alt text-blue-400 text-2xl mb-2"></i>
<h4 class="font-semibold text-white mb-1">Position</h4>
<p class="text-xs text-gray-300">Center your face and ensure your hairline is fully visible.</p>
</div>
</div>
</div>
</div>
<!-- Step 2: Select Fade Type -->
<div id="fade-type-step" class="bg-gray-800 bg-opacity-90 rounded-3xl shadow-2xl p-10 mb-6 step-transition opacity-0 pointer-events-none">
<h2 class="header-font text-3xl text-center text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-blue-400 mb-10">
STEP 2: CHOOSE YOUR FADE STYLE
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="fade-option luxury-border" data-fade="taper">
<div class="premium-badge">PRO</div>
<div class="hair-preview" style="background-image: url('https://placehold.co/320x420/1a1a1a/8b5cf6?text=TAPER+FADE+AI+RENDER');"></div>
<h3 class="header-font text-2xl text-white text-center mb-3">Taper Fade</h3>
<p class="text-gray-300 text-sm mb-4">The classic professional fade with a gradual transition from short to long. Perfect for business professionals and those who prefer a clean, timeless look. Our AI precisely calculates the optimal fade line based on your jaw structure.</p>
<div class="text-center">
<span class="text-xs text-purple-400 font-semibold">BEST FOR: Oval & Round Face Shapes</span>
</div>
</div>
<div class="fade-option luxury-border" data-fade="drop">
<div class="premium-badge">ELITE</div>
<div class="hair-preview" style="background-image: url('https://placehold.co/320x420/1a1a1a/06b6d4?text=DROP+FADE+AI+RENDER');"></div>
<h3 class="header-font text-2xl text-white text-center mb-3">Drop Fade</h3>
<p class="text-gray-300 text-sm mb-4">Features a dramatic curved fade line at the back of the head that "drops" lower than traditional fades. Creates a bold, modern statement. Our AI optimizes the curve to complement your neck and shoulder lines.</p>
<div class="text-center">
<span class="text-xs text-cyan-400 font-semibold">BEST FOR: Square & Rectangular Face Shapes</span>
</div>
</div>
<div class="fade-option luxury-border" data-fade="burst">
<div class="premium-badge">PREMIUM</div>
<div class="hair-preview" style="background-image: url('https://placehold.co/320x420/1a1a1a/f97316?text=BURST+FADE+AI+RENDER');"></div>
<h3 class="header-font text-2xl text-white text-center mb-3">Burst Fade</h3>
<p class="text-gray-300 text-sm mb-4">A circular fade pattern that "bursts" around the back and sides of the head. Creates maximum visual impact and draws attention upward. Our AI creates a perfect circular gradient that follows the natural curve of your skull.</p>
<div class="text-center">
<span class="text-xs text-orange-400 font-semibold">BEST FOR: All Face Shapes</span>
</div>
</div>
<div class="fade-option luxury-border" data-fade="temple">
<div class="premium-badge">CLASSIC</div>
<div class="hair-preview" style="background-image: url('https://placehold.co/320x420/1a1a1a/22c55e?text=TEMPLE+FADE+AI+RENDER');"></div>
<h3 class="header-font text-2xl text-white text-center mb-3">Temple Fade</h3>
<p class="text-gray-300 text-sm mb-4">Focuses the fade on the temple area while maintaining more length on top and back. Offers the perfect balance between bold and conservative. Our AI precisely targets the temple region for optimal facial framing.</p>
<div class="text-center">
<span class="text-xs text-green-400 font-semibold">BEST FOR: Long & Diamond Face Shapes</span>
</div>
</div>
<div class="fade-option luxury-border" data-fade="shadow">
<div class="premium-badge">SHARP</div>
<div class="hair-preview" style="background-image: url('https://placehold.co/320x420/1a1a1a/dc2626?text=SHADOW+FADE+AI+RENDER');"></div>
<h3 class="header-font text-2xl text-white text-center mb-3">Shadow Fade</h3>
<p class="text-gray-300 text-sm mb-4">An ultra-short fade that creates a "shadow" effect on the skin. Delivers a crisp, clean look with maximum contrast. Our AI creates a seamless gradient that appears airbrushed onto your skin.</p>
<div class="text-center">
<span class="text-xs text-red-400 font-semibold">BEST FOR: Strong Jawlines</span>
</div>
</div>
<div class="fade-option luxury-border" data-fade="skin">
<div class="premium-badge">BOLD</div>
<div class="hair-preview" style="background-image: url('https://placehold.co/320x420/1a1a1a/8b5cf6?text=SKIN+FADE+AI+RENDER');"></div>
<h3 class="header-font text-2xl text-white text-center mb-3">Skin/Bald Fade</h3>
<p class="text-gray-300 text-sm mb-4">The most dramatic fade, taking hair down to the skin level. Creates a bold, confident statement. Our AI simulates the exact blade effect for hyper-realistic results.</p>
<div class="text-center">
<span class="text-xs text-purple-400 font-semibold">BEST FOR: Confidence & Style</span>
</div>
</div>
</div>
</div>
<!-- Step 3: Select Intensity and Preview -->
<div id="intensity-step" class="bg-gray-800 bg-opacity-90 rounded-3xl shadow-2xl p-10 step-transition opacity-0 pointer-events-none">
<h2 class="header-font text-3xl text-center text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-blue-400 mb-10">
STEP 3: CUSTOMIZE & PREVIEW
</h2>
<!-- Current Selection Display -->
<div class="bg-gradient-to-r from-gray-900 to-black rounded-2xl p-8 mb-10 border border-purple-900">
<div class="flex flex-col items-center">
<span class="text-sm font-medium text-purple-400 mb-3">YOUR PREMIUM SELECTION</span>
<span id="current-selection" class="header-font text-3xl text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-blue-400 text-center">Taper Fade</span>
<div class="flex items-center mt-4">
<div class="w-2 h-2 bg-purple-500 rounded-full mr-2"></div>
<span class="text-sm text-gray-300">AI-Optimized for your facial structure</span>
<div class="w-2 h-2 bg-purple-500 rounded-full ml-2"></div>
</div>
</div>
</div>
<!-- Intensity Selection -->
<div class="text-center mb-12">
<h3 class="header-font text-2xl text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-blue-400 mb-8">SELECT FADE INTENSITY</h3>
<div class="grid grid-cols-3 gap-8 max-w-2xl mx-auto">
<div class="text-center group">
<div class="intensity-preview mb-4 group-hover:scale-110 transition-transform duration-300" style="background-image: url('https://placehold.co/90x110/1a1a1a/94a3b8?text=LOW'); border-color: #94a3b8;"></div>
<button class="intensity-btn w-full border-gray-600 text-gray-300 group-hover:border-purple-500" data-intensity="low">
LOW
</button>
<p class="text-xs text-gray-400 mt-3 group-hover:text-purple-300 transition-colors duration-300">Subtle transition with more length remaining. Perfect for first-time fade wearers or professional settings.</p>
</div>
<div class="text-center group">
<div class="intensity-preview mb-4 group-hover:scale-110 transition-transform duration-300" style="background-image: url('https://placehold.co/90x110/1a1a1a/4f46e5?text=MID'); border-color: #4f46e5;"></div>
<button class="intensity-btn w-full border-gray-600 text-gray-300 group-hover:border-purple-500" data-intensity="mid">
MID
</button>
<p class="text-xs text-gray-400 mt-3 group-hover:text-purple-300 transition-colors duration-300">Balanced fade with moderate shortness. The most popular choice offering both style and versatility.</p>
</div>
<div class="text-center group">
<div class="intensity-preview mb-4 group-hover:scale-110 transition-transform duration-300" style="background-image: url('https://placehold.co/90x110/1a1a1a/dc2626?text=HIGH'); border-color: #dc2626;"></div>
<button class="intensity-btn w-full border-gray-600 text-gray-300 group-hover:border-purple-500" data-intensity="high">
HIGH
</button>
<p class="text-xs text-gray-400 mt-3 group-hover:text-purple-300 transition-colors duration-300">Dramatic fade with very short length. Creates maximum contrast and makes a bold fashion statement.</p>
</div>
</div>
</div>
<!-- Final Preview -->
<div class="bg-gradient-to-br from-gray-900 to-black rounded-3xl p-10 border border-gray-700">
<h3 class="header-font text-2xl text-center text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-blue-400 mb-8">YOUR PERSONALIZED AI PREVIEW</h3>
<div class="flex flex-col items-center">
<div class="face-container mb-8 relative group">
<div id="final-face" class="face-overlay"></div>
<div id="final-hair" class="hair-overlay"></div>
<div class="absolute top-3 left-3 bg-black bg-opacity-70 text-white text-xs px-3 py-1 rounded-full">
<i class="fas fa-magic mr-1"></i> AI RENDER
</div>
<div class="absolute bottom-3 right-3 bg-gradient-to-r from-purple-600 to-blue-600 text-white text-xs px-3 py-1 rounded-full">
<span id="preview-label">Taper Fade - Low</span>
</div>
<div class="ai-glow opacity-30 group-hover:opacity-60 transition-opacity duration-500"></div>
</div>
<div class="text-center max-w-2xl">
<p class="text-gray-300 mb-6 leading-relaxed">This hyper-realistic preview shows exactly how your selected fade will look on <strong>your unique facial structure</strong>. Our advanced AI technology analyzes your bone structure, hair density, and skin tone to create a perfectly accurate visualization.</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
<div class="bg-gray-900 bg-opacity-50 rounded-xl p-6 border border-gray-700">
<h4 class="font-semibold text-purple-400 mb-3 flex items-center">
<i class="fas fa-check-circle mr-2"></i>
MAINTENANCE TIP
</h4>
<p class="text-sm text-gray-300">Higher intensity fades require touch-ups every 2-3 weeks, while lower intensities can go 4-6 weeks between appointments.</p>
</div>
<div class="bg-gray-900 bg-opacity-50 rounded-xl p-6 border border-gray-700">
<h4 class="font-semibold text-blue-400 mb-3 flex items-center">
<i class="fas fa-star mr-2"></i>
STYLE RECOMMENDATION
</h4>
<p class="text-sm text-gray-300">Pair your new fade with a quality pomade to style the top section and complete your premium look.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Action Buttons -->
<div class="flex flex-col sm:flex-row justify-center gap-6 mt-10">
<button id="back-to-types" class="px-10 py-4 border-2 border-gray-600 text-gray-300 rounded-2xl hover:border-purple-500 hover:text-white transition-all duration-300 font-semibold text-lg group">
<i class="fas fa-arrow-left mr-3 transform group-hover:translate-x-1 transition-transform duration-300"></i>
CHANGE STYLE
</button>
<button id="book-appointment" class="px-10 py-4 bg-gradient-to-r from-purple-600 to-blue-600 text-white rounded-2xl hover:from-purple-700 hover:to-blue-700 transition-all duration-300 font-bold text-lg shadow-xl hover:shadow-2xl transform hover:scale-105 flex items-center justify-center">
<i class="fas fa-calendar-check mr-3"></i>
BOOK PREMIUM APPOINTMENT
</button>
</div>
</div>
</div>
</div>
<script>
// DOM Elements
const uploadBtn = document.getElementById('upload-btn');
const photoUpload = document.getElementById('photo-upload');
const uploadedFace = document.getElementById('uploaded-face');
const demoFace = document.getElementById('demo-face');
const uploadStep = document.getElementById('upload-step');
const fadeTypeStep = document.getElementById('fade-type-step');
const intensityStep = document.getElementById('intensity-step');
const currentSelection = document.getElementById('current-selection');
const finalFace = document.getElementById('final-face');
const finalHair = document.getElementById('final-hair');
const backToTypes = document.getElementById('back-to-types');
const bookAppointment = document.getElementById('book-appointment');
const previewLabel = document.getElementById('preview-label');
const loadingOverlay = document.getElementById('loading-overlay');
const aiGlow = document.querySelector('.ai-glow');
// Premium fade images with AI rendering
const fadeImages = {
taper: {
low: 'https://placehold.co/320x420/1a1a1a/8b5cf6?text=AI+TAPER+LOW+FADE',
mid: 'https://placehold.co/320x420/1a1a1a/7c3aed?text=AI+TAPER+MID+FADE',
high: 'https://placehold.co/320x420/1a1a1a/6d28d9?text=AI+TAPER+HIGH+FADE'
},
drop: {
low: 'https://placehold.co/320x420/1a1a1a/06b6d4?text=AI+DROP+LOW+FADE',
mid: 'https://placehold.co/320x420/1a1a1a/0891b2?text=AI+DROP+MID+FADE',
high: 'https://placehold.co/320x420/1a1a1a/0e7490?text=AI+DROP+HIGH+FADE'
},
burst: {
low: 'https://placehold.co/320x420/1a1a1a/f97316?text=AI+BURST+LOW+FADE',
mid: 'https://placehold.co/320x420/1a1a1a/ea580c?text=AI+BURST+MID+FADE',
high: 'https://placehold.co/320x420/1a1a1a/c2410c?text=AI+BURST+HIGH+FADE'
},
temple: {
low: 'https://placehold.co/320x420/1a1a1a/22c55e?text=AI+TEMPLE+LOW+FADE',
mid: 'https://placehold.co/320x420/1a1a1a/16a34a?text=AI+TEMPLE+MID+FADE',
high: 'https://placehold.co/320x420/1a1a1a/15803d?text=AI+TEMPLE+HIGH+FADE'
},
shadow: {
low: 'https://placehold.co/320x420/1a1a1a/dc2626?text=AI+SHADOW+LOW+FADE',
mid: 'https://placehold.co/320x420/1a1a1a/b91c1c?text=AI+SHADOW+MID+FADE',
high: 'https://placehold.co/320x420/1a1a1a/991b1b?text=AI+SHADOW+HIGH+FADE'
},
skin: {
low: 'https://placehold.co/320x420/1a1a1a/8b5cf6?text=AI+SKIN+LOW+FADE',
mid: 'https://placehold.co/320x420/1a1a1a/7c3aed?text=AI+SKIN+MID+FADE',
high: 'https://placehold.co/320x420/1a1a1a/6d28d9?text=AI+SKIN+HIGH+FADE'
}
};
// State
let selectedFade = 'taper';
let selectedIntensity = 'low';
// Event Listeners
uploadBtn.addEventListener('click', () => {
photoUpload.click();
});
photoUpload.addEventListener('change', (e) => {
if (e.target.files && e.target.files[0]) {
const reader = new FileReader();
reader.onload = (event) => {
uploadedFace.style.backgroundImage = `url(${event.target.result})`;
uploadedFace.style.display = 'block';
demoFace.style.display = 'none';
// Show AI processing
loadingOverlay.classList.add('active');
// Simulate AI processing with multiple steps
setTimeout(() => {
const aiSteps = [
"Analyzing facial structure...",
"Mapping bone density...",
"Calculating optimal fade lines...",
"Simulating hair texture...",
"Generating hyper-realistic preview..."
];
let step = 0;
const stepText = document.querySelector('.loading-overlay p:nth-child(2)');
const stepSubtext = document.querySelector('.loading-overlay p:nth-child(3)');
const interval = setInterval(() => {
if (step < aiSteps.length) {
stepText.textContent = aiSteps[step];
stepSubtext.textContent = `Step ${step + 1} of ${aiSteps.length}`;
step++;
} else {
clearInterval(interval);
loadingOverlay.classList.remove('active');
// Move to next step with animation
uploadStep.style.transform = 'translateY(-30px)';
uploadStep.style.opacity = '0';
setTimeout(() => {
uploadStep.style.display = 'none';
fadeTypeStep.style.transform = 'translateY(0)';
fadeTypeStep.style.opacity = '1';
fadeTypeStep.classList.remove('opacity-0', 'pointer-events-none');
}, 300);
}
}, 800);
}, 800);
};
reader.readAsDataURL(e.target.files[0]);
}
});
// Fade type selection
document.querySelectorAll('.fade-option').forEach(option => {
option.addEventListener('click', () => {
document.querySelectorAll('.fade-option').forEach(opt => {
opt.classList.remove('active');
});
option.classList.add('active');
selectedFade = option.getAttribute('data-fade');
const fadeName = selectedFade.charAt(0).toUpperCase() + selectedFade.slice(1);
currentSelection.textContent = `${fadeName} Fade`;
// Show AI processing
loadingOverlay.classList.add('active');
document.querySelector('.loading-overlay h3').textContent = 'AI CUSTOMIZING';
document.querySelector('.loading-overlay p:nth-child(2)').textContent = `Optimizing ${fadeName} fade for your face...`;
document.querySelector('.loading-overlay p:nth-child(3)').textContent = 'Applying professional barber techniques';
// Simulate AI customization
setTimeout(() => {
loadingOverlay.classList.remove('active');
// Update final preview with low intensity by default
finalFace.style.backgroundImage = uploadedFace.style.backgroundImage;
finalHair.style.backgroundImage = `url(${fadeImages[selectedFade].low})`;
previewLabel.textContent = `${fadeName} Fade - Low`;
// Move to next step
fadeTypeStep.style.transform = 'translateY(-30px)';
fadeTypeStep.style.opacity = '0';
setTimeout(() => {
fadeTypeStep.classList.add('pointer-events-none');
intensityStep.style.transform = 'translateY(0)';
intensityStep.style.opacity = '1';
intensityStep.classList.remove('opacity-0', 'pointer-events-none');
}, 300);
}, 1200);
});
});
// Intensity selection
document.querySelectorAll('.intensity-btn').forEach(btn => {
btn.addEventListener('click', () => {
document.querySelectorAll('.intensity-btn').forEach(b => {
b.classList.remove('active');
b.classList.remove('bg-purple-600', 'text-white', 'border-purple-600');
b.classList.add('bg-gray-800', 'text-gray-300', 'border-gray-600');
});
btn.classList.add('active');
btn.classList.remove('bg-gray-800', 'text-gray-300', 'border-gray-600');
btn.classList.add('bg-gradient-to-r', 'from-purple-600', 'to-blue-600', 'text-white', 'border-purple-600');
selectedIntensity = btn.getAttribute('data-intensity');
// Show AI adjustment
loadingOverlay.classList.add('active');
document.querySelector('.loading-overlay h3').textContent = 'AI ADJUSTING';
document.querySelector('.loading-overlay p:nth-child(2)').textContent = `Perfecting ${selectedIntensity.toUpperCase()} intensity...`;
document.querySelector('.loading-overlay p:nth-child(3)').textContent = 'Finalizing professional finish';
// Simulate AI adjustment
setTimeout(() => {
loadingOverlay.classList.remove('active');
// Update final hair preview
const fadeName = selectedFade.charAt(0).toUpperCase() + selectedFade.slice(1);
finalHair.style.backgroundImage = `url(${fadeImages[selectedFade][selectedIntensity]})`;
previewLabel.textContent = `${fadeName} Fade - ${selectedIntensity.charAt(0).toUpperCase() + selectedIntensity.slice(1)}`;
}, 600);
});
});
// Back button
backToTypes.addEventListener('click', () => {
intensityStep.style.transform = 'translateY(30px)';
intensityStep.style.opacity = '0';
setTimeout(() => {
intensityStep.classList.add('pointer-events-none');
intensityStep.classList.add('opacity-0');
fadeTypeStep.style.transform = 'translateY(0)';
fadeTypeStep.style.opacity = '1';
fadeTypeStep.classList.remove('pointer-events-none');
}, 300);
});
// Book appointment
bookAppointment.addEventListener('click', () => {
const fadeName = selectedFade.charAt(0).toUpperCase() + selectedFade.slice(1);
const intensityName = selectedIntensity.charAt(0).toUpperCase() + selectedIntensity.slice(1);
// Create a premium booking experience
loadingOverlay.classList.add('active');
document.querySelector('.loading-overlay h3').textContent = 'CONFIRMING';
document.querySelector('.loading-overlay p:nth-child(2)').textContent = 'Processing your premium appointment...';
document.querySelector('.loading-overlay p:nth-child(3)').textContent = 'Connecting with your master barber';
setTimeout(() => {
loadingOverlay.classList.remove('active');
const confirmationHTML = `
<div class="bg-gradient-to-br from-gray-900 to-black rounded-2xl p-8 text-center max-w-md mx-auto border border-purple-900" style="box-shadow: 0 20px 40px rgba(139, 92, 246, 0.2);">
<div class="text-6xl mb-4">✨</div>
<h3 class="header-font text-2xl text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-blue-400 mb-4">APPOINTMENT CONFIRMED</h3>
<p class="text-gray-300 mb-4">Your ${intensityName} ${fadeName} FADE is scheduled with our master barber.</p>
<div class="bg-gray-800 rounded-xl p-4 mb-4 text-sm">
<p class="text-purple-400 font-semibold">Service: ${intensityName} ${fadeName} Fade</p>
<p class="text-gray-300">Premium Experience • 45 min</p>
</div>
<p class="text-sm text-gray-400">Our studio will contact you within 1 hour to confirm the exact time. Prepare for your transformation!</p>
</div>
`;
// Create modal
const modal = document.createElement('div');
modal.style.position = 'fixed';
modal.style.top = '0';
modal.style.left = '0';
modal.style.width = '100%';
modal.style.height = '100%';
modal.style.background = 'rgba(0,0,0,0.8)';
modal.style.display = 'flex';
modal.style.justifyContent = 'center';
modal.style.alignItems = 'center';
modal.style.zIndex = '1001';
modal.style.opacity = '0';
modal.style.transition = 'opacity 0.5s';
modal.innerHTML = confirmationHTML;
document.body.appendChild(modal);
// Show modal
setTimeout(() => {
modal.style.opacity = '1';
}, 100);
// Close modal on click
modal.addEventListener('click', () => {
modal.style.opacity = '0';
setTimeout(() => {
document.body.removeChild(modal);
}, 500);
});
}, 1500);
});
// Initialize with first fade option selected after a delay for premium effect
setTimeout(() => {
const firstOption = document.querySelector('[data-fade="taper"]');
firstOption.classList.add('active');
currentSelection.textContent = "Taper Fade";
}, 500);
</script>
</body>
</html>
