Hugging Face's logo

Spaces:
LukasBe
/
ds
Running

App Files Community
ds / index.html
LukasBe's picture
LukasBe
Add 2 files
3262140 verified
raw
history blame contribute delete
46.6 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>DreamSpace - Design Your Perfect Kitchen or Bathroom</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>
 .hero-gradient {
 background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
 }
 .card-hover {
 transition: all 0.3s ease;
 }
 .card-hover:hover {
 transform: translateY(-5px);
 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 }
 .quiz-option {
 transition: all 0.2s ease;
 }
 .quiz-option:hover {
 transform: scale(1.03);
 }
 .quiz-option.selected {
 border-color: #3b82f6;
 background-color: #eff6ff;
 }
 .fade-in {
 animation: fadeIn 0.5s ease-in;
 }
 @keyframes fadeIn {
 from { opacity: 0; }
 to { opacity: 1; }
 }
 </style>
</head>
<body class="font-sans antialiased text-gray-800">
 <!-- Navigation -->
 <nav class="bg-white shadow-sm">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="flex justify-between h-16">
 <div class="flex items-center">
 <div class="flex-shrink-0 flex items-center">
 <i class="fas fa-cubes text-blue-500 text-2xl mr-2"></i>
 <span class="text-xl font-bold text-gray-900">DreamSpace</span>
 </div>
 </div>
 <div class="hidden sm:ml-6 sm:flex sm:items-center">
 <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-blue-600">Inspiration</a>
 <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-blue-600">How It Works</a>
 <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-blue-600">Reviews</a>
 <button class="ml-4 px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
 Start My Project
 </button>
 </div>
 </div>
 </div>
 </nav>
<!-- Hero Section -->
 <div class="hero-gradient">
 <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
 <div class="text-center">
 <h1 class="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl md:text-6xl">
 <span class="block">Design Your Dream</span>
 <span class="block text-blue-600">Kitchen or Bathroom</span>
 </h1>
 <p class="mt-3 max-w-md mx-auto text-base text-gray-500 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
 From inspiration to installation - we guide you through every step of creating your perfect space.
 </p>
 <div class="mt-8 flex justify-center">
 <div class="inline-flex rounded-md shadow">
 <button id="startProjectBtn" class="inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 md:py-4 md:text-lg md:px-10 transition duration-300 transform hover:scale-105">
 Start My Project
 <i class="fas fa-arrow-right ml-2"></i>
 </button>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Inspiration Gallery -->
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
 <div class="text-center mb-12">
 <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
 Get Inspired
 </h2>
 <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
 Browse our collection of beautifully designed kitchens and bathrooms
 </p>
 </div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
 <!-- Project 1 -->
 <div class="card-hover rounded-lg overflow-hidden shadow-lg">
 <img src="https://images.unsplash.com/photo-1600585152220-90363fe7e115?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Modern Kitchen" class="w-full h-64 object-cover">
 <div class="px-6 py-4">
 <div class="font-bold text-xl mb-2">Modern Minimalist Kitchen</div>
 <p class="text-gray-700 text-base">
 Sleek cabinetry with quartz countertops and smart storage solutions.
 </p>
 </div>
 <div class="px-6 pt-4 pb-2">
 <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#Contemporary</span>
 <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#SmartHome</span>
 </div>
 </div>
<!-- Project 2 -->
 <div class="card-hover rounded-lg overflow-hidden shadow-lg">
 <img src="https://images.unsplash.com/photo-1600121848594-d8644e57abab?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Rustic Bathroom" class="w-full h-64 object-cover">
 <div class="px-6 py-4">
 <div class="font-bold text-xl mb-2">Rustic Spa Bathroom</div>
 <p class="text-gray-700 text-base">
 Natural wood accents with freestanding tub and rainfall shower.
 </p>
 </div>
 <div class="px-6 pt-4 pb-2">
 <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#Rustic</span>
 <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#Spa</span>
 </div>
 </div>
<!-- Project 3 -->
 <div class="card-hover rounded-lg overflow-hidden shadow-lg">
 <img src="https://images.unsplash.com/photo-1556911220-bff31c812dba?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Traditional Kitchen" class="w-full h-64 object-cover">
 <div class="px-6 py-4">
 <div class="font-bold text-xl mb-2">Classic Country Kitchen</div>
 <p class="text-gray-700 text-base">
 Warm wood tones with farmhouse sink and custom cabinetry.
 </p>
 </div>
 <div class="px-6 pt-4 pb-2">
 <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#Traditional</span>
 <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#Family</span>
 </div>
 </div>
 </div>
 </div>
<!-- Success Stories -->
 <div class="bg-gray-50">
 <div class="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:px-8">
 <div class="text-center mb-12">
 <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
 Real Homeowner Stories
 </h2>
 <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
 See how we've transformed spaces for families just like yours
 </p>
 </div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
 <!-- Testimonial 1 -->
 <div class="bg-white p-6 rounded-lg shadow-md card-hover">
 <div class="flex items-center mb-4">
 <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah J.">
 <div>
 <h3 class="font-bold text-gray-900">Sarah J.</h3>
 <p class="text-gray-600">Austin, TX</p>
 </div>
 </div>
 <p class="text-gray-700 mb-4">
 "DreamSpace made our kitchen renovation stress-free. The 3D design tool helped us visualize exactly what we wanted before committing."
 </p>
 <div class="flex">
 <i class="fas fa-star text-yellow-400"></i>
 <i class="fas fa-star text-yellow-400"></i>
 <i class="fas fa-star text-yellow-400"></i>
 <i class="fas fa-star text-yellow-400"></i>
 <i class="fas fa-star text-yellow-400"></i>
 </div>
 </div>
<!-- Testimonial 2 -->
 <div class="bg-white p-6 rounded-lg shadow-md card-hover">
 <div class="flex items-center mb-4">
 <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Michael T.">
 <div>
 <h3 class="font-bold text-gray-900">Michael T.</h3>
 <p class="text-gray-600">Denver, CO</p>
 </div>
 </div>
 <p class="text-gray-700 mb-4">
 "Our master bathroom is now a sanctuary. The team helped us maximize our small space with clever storage solutions we never would have thought of."
 </p>
 <div class="flex">
 <i class="fas fa-star text-yellow-400"></i>
 <i class="fas fa-star text-yellow-400"></i>
 <i class="fas fa-star text-yellow-400"></i>
 <i class="fas fa-star text-yellow-400"></i>
 <i class="fas fa-star text-yellow-400"></i>
 </div>
 </div>
<!-- Testimonial 3 -->
 <div class="bg-white p-6 rounded-lg shadow-md card-hover">
 <div class="flex items-center mb-4">
 <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Priya K.">
 <div>
 <h3 class="font-bold text-gray-900">Priya K.</h3>
 <p class="text-gray-600">Seattle, WA</p>
 </div>
 </div>
 <p class="text-gray-700 mb-4">
 "From the initial design consultation to the final installation, every step was seamless. We love our new kitchen and use it every day!"
 </p>
 <div class="flex">
 <i class="fas fa-star text-yellow-400"></i>
 <i class="fas fa-star text-yellow-400"></i>
 <i class="fas fa-star text-yellow-400"></i>
 <i class="fas fa-star text-yellow-400"></i>
 <i class="fas fa-star text-yellow-400"></i>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Quiz Modal -->
 <div id="quizModal" class="fixed inset-0 overflow-y-auto z-50 hidden">
 <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
 <div class="fixed inset-0 transition-opacity" aria-hidden="true">
 <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
 </div>
<div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full">
 <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
 <!-- Progress Bar -->
 <div class="mb-6">
 <div class="flex justify-between mb-1">
 <span class="text-sm font-medium text-blue-700">Project Discovery</span>
 <span id="progressPercent" class="text-sm font-medium text-blue-700">0%</span>
 </div>
 <div class="w-full bg-gray-200 rounded-full h-2.5">
 <div id="progressBar" class="bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div>
 </div>
 </div>
<!-- Quiz Content -->
 <div id="quizContent">
 <!-- Step 1: Project Type -->
 <div id="step1" class="fade-in">
 <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">
 What type of project are you planning?
 </h3>
 <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
 <div class="quiz-option p-4 border-2 border-gray-200 rounded-lg cursor-pointer" onclick="selectOption(this, 'projectType', 'kitchen')">
 <div class="flex items-center">
 <i class="fas fa-utensils text-2xl text-blue-500 mr-3"></i>
 <div>
 <h4 class="font-medium">Kitchen</h4>
 <p class="text-sm text-gray-500">Remodel or new installation</p>
 </div>
 </div>
 </div>
 <div class="quiz-option p-4 border-2 border-gray-200 rounded-lg cursor-pointer" onclick="selectOption(this, 'projectType', 'bathroom')">
 <div class="flex items-center">
 <i class="fas fa-bath text-2xl text-blue-500 mr-3"></i>
 <div>
 <h4 class="font-medium">Bathroom</h4>
 <p class="text-sm text-gray-500">Full or partial remodel</p>
 </div>
 </div>
 </div>
 <div class="quiz-option p-4 border-2 border-gray-200 rounded-lg cursor-pointer" onclick="selectOption(this, 'projectType', 'both')">
 <div class="flex items-center">
 <i class="fas fa-home text-2xl text-blue-500 mr-3"></i>
 <div>
 <h4 class="font-medium">Both</h4>
 <p class="text-sm text-gray-500">Whole space transformation</p>
 </div>
 </div>
 </div>
 <div class="quiz-option p-4 border-2 border-gray-200 rounded-lg cursor-pointer" onclick="selectOption(this, 'projectType', 'not-sure')">
 <div class="flex items-center">
 <i class="fas fa-question-circle text-2xl text-blue-500 mr-3"></i>
 <div>
 <h4 class="font-medium">Not Sure</h4>
 <p class="text-sm text-gray-500">Need guidance</p>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Step 2: Style Preference -->
 <div id="step2" class="hidden fade-in">
 <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">
 Which style speaks to you most?
 </h3>
 <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
 <div class="quiz-option p-4 border-2 border-gray-200 rounded-lg cursor-pointer" onclick="selectOption(this, 'style', 'modern')">
 <img src="https://images.unsplash.com/photo-1583845112208-97331140aca9?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Modern" class="w-full h-32 object-cover rounded mb-2">
 <h4 class="font-medium">Modern</h4>
 <p class="text-sm text-gray-500">Clean lines, minimal, sleek</p>
 </div>
 <div class="quiz-option p-4 border-2 border-gray-200 rounded-lg cursor-pointer" onclick="selectOption(this, 'style', 'traditional')">
 <img src="https://images.unsplash.com/photo-1600121848594-d8644e57abab?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Traditional" class="w-full h-32 object-cover rounded mb-2">
 <h4 class="font-medium">Traditional</h4>
 <p class="text-sm text-gray-500">Classic, timeless details</p>
 </div>
 <div class="quiz-option p-4 border-2 border-gray-200 rounded-lg cursor-pointer" onclick="selectOption(this, 'style', 'transitional')">
 <img src="https://images.unsplash.com/photo-1600566752227-8f3a8a8f8b8d?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Transitional" class="w-full h-32 object-cover rounded mb-2">
 <h4 class="font-medium">Transitional</h4>
 <p class="text-sm text-gray-500">Mix of modern and traditional</p>
 </div>
 <div class="quiz-option p-4 border-2 border-gray-200 rounded-lg cursor-pointer" onclick="selectOption(this, 'style', 'not-sure')">
 <img src="https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Not Sure" class="w-full h-32 object-cover rounded mb-2">
 <h4 class="font-medium">Not Sure</h4>
 <p class="text-sm text-gray-500">Need style consultation</p>
 </div>
 </div>
 </div>
<!-- Step 3: Budget Range -->
 <div id="step3" class="hidden fade-in">
 <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">
 What's your estimated budget range?
 </h3>
 <div class="grid grid-cols-1 gap-4">
 <div class="quiz-option p-4 border-2 border-gray-200 rounded-lg cursor-pointer" onclick="selectOption(this, 'budget', '5k-15k')">
 <div class="flex justify-between items-center">
 <div>
 <h4 class="font-medium">$5K - $15K</h4>
 <p class="text-sm text-gray-500">Cosmetic updates, partial remodel</p>
 </div>
 <i class="fas fa-paint-roller text-blue-500 text-xl"></i>
 </div>
 </div>
 <div class="quiz-option p-4 border-2 border-gray-200 rounded-lg cursor-pointer" onclick="selectOption(this, 'budget', '15k-30k')">
 <div class="flex justify-between items-center">
 <div>
 <h4 class="font-medium">$15K - $30K</h4>
 <p class="text-sm text-gray-500">Full remodel with mid-range materials</p>
 </div>
 <i class="fas fa-tools text-blue-500 text-xl"></i>
 </div>
 </div>
 <div class="quiz-option p-4 border-2 border-gray-200 rounded-lg cursor-pointer" onclick="selectOption(this, 'budget', '30k-50k')">
 <div class="flex justify-between items-center">
 <div>
 <h4 class="font-medium">$30K - $50K</h4>
 <p class="text-sm text-gray-500">High-end materials with custom features</p>
 </div>
 <i class="fas fa-gem text-blue-500 text-xl"></i>
 </div>
 </div>
 <div class="quiz-option p-4 border-2 border-gray-200 rounded-lg cursor-pointer" onclick="selectOption(this, 'budget', '50k+')">
 <div class="flex justify-between items-center">
 <div>
 <h4 class="font-medium">$50K+</h4>
 <p class="text-sm text-gray-500">Luxury materials and complete transformation</p>
 </div>
 <i class="fas fa-crown text-blue-500 text-xl"></i>
 </div>
 </div>
 <div class="quiz-option p-4 border-2 border-gray-200 rounded-lg cursor-pointer" onclick="selectOption(this, 'budget', 'not-sure')">
 <div class="flex justify-between items-center">
 <div>
 <h4 class="font-medium">Not Sure</h4>
 <p class="text-sm text-gray-500">Need budget consultation</p>
 </div>
 <i class="fas fa-question text-blue-500 text-xl"></i>
 </div>
 </div>
 </div>
 </div>
<!-- Step 4: Timeline -->
 <div id="step4" class="hidden fade-in">
 <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">
 When would you like to start your project?
 </h3>
 <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
 <div class="quiz-option p-4 border-2 border-gray-200 rounded-lg cursor-pointer" onclick="selectOption(this, 'timeline', 'immediately')">
 <div class="flex items-center">
 <i class="fas fa-bolt text-2xl text-blue-500 mr-3"></i>
 <div>
 <h4 class="font-medium">Immediately</h4>
 <p class="text-sm text-gray-500">Ready to start within 1 month</p>
 </div>
 </div>
 </div>
 <div class="quiz-option p-4 border-2 border-gray-200 rounded-lg cursor-pointer" onclick="selectOption(this, 'timeline', '1-3-months')">
 <div class="flex items-center">
 <i class="fas fa-calendar-week text-2xl text-blue-500 mr-3"></i>
 <div>
 <h4 class="font-medium">1-3 Months</h4>
 <p class="text-sm text-gray-500">Planning phase</p>
 </div>
 </div>
 </div>
 <div class="quiz-option p-4 border-2 border-gray-200 rounded-lg cursor-pointer" onclick="selectOption(this, 'timeline', '3-6-months')">
 <div class="flex items-center">
 <i class="fas fa-calendar-alt text-2xl text-blue-500 mr-3"></i>
 <div>
 <h4 class="font-medium">3-6 Months</h4>
 <p class="text-sm text-gray-500">Saving/budgeting phase</p>
 </div>
 </div>
 </div>
 <div class="quiz-option p-4 border-2 border-gray-200 rounded-lg cursor-pointer" onclick="selectOption(this, 'timeline', 'not-sure')">
 <div class="flex items-center">
 <i class="fas fa-question-circle text-2xl text-blue-500 mr-3"></i>
 <div>
 <h4 class="font-medium">Not Sure</h4>
 <p class="text-sm text-gray-500">Exploring options</p>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Step 5: Contact Info -->
 <div id="step5" class="hidden fade-in">
 <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">
 Let's get in touch
 </h3>
 <p class="text-gray-500 mb-6">We'll use this information to create your personalized project dashboard.</p>
<div class="grid grid-cols-1 gap-4">
 <div>
 <label for="name" class="block text-sm font-medium text-gray-700">Full Name</label>
 <input type="text" id="name" name="name" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md p-2 border">
 </div>
 <div>
 <label for="email" class="block text-sm font-medium text-gray-700">Email Address</label>
 <input type="email" id="email" name="email" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md p-2 border">
 </div>
 <div>
 <label for="phone" class="block text-sm font-medium text-gray-700">Phone Number (optional)</label>
 <input type="tel" id="phone" name="phone" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md p-2 border">
 </div>
 <div class="flex items-center">
 <input id="createAccount" name="createAccount" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded">
 <label for="createAccount" class="ml-2 block text-sm text-gray-700">
 Create an account to save my progress
 </label>
 </div>
 </div>
 </div>
<!-- Step 6: Summary -->
 <div id="step6" class="hidden fade-in">
 <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">
 Your Project Summary
 </h3>
 <p class="text-gray-500 mb-6">Review your selections before we create your personalized dashboard.</p>
<div class="bg-gray-50 p-4 rounded-lg mb-6">
 <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
 <div>
 <h4 class="font-medium text-gray-700">Project Type</h4>
 <p id="summaryProjectType" class="text-gray-900">-</p>
 </div>
 <div>
 <h4 class="font-medium text-gray-700">Style Preference</h4>
 <p id="summaryStyle" class="text-gray-900">-</p>
 </div>
 <div>
 <h4 class="font-medium text-gray-700">Budget Range</h4>
 <p id="summaryBudget" class="text-gray-900">-</p>
 </div>
 <div>
 <h4 class="font-medium text-gray-700">Timeline</h4>
 <p id="summaryTimeline" class="text-gray-900">-</p>
 </div>
 </div>
 </div>
<div class="bg-blue-50 p-4 rounded-lg">
 <h4 class="font-medium text-blue-800 mb-2">Next Steps</h4>
 <ul class="list-disc list-inside text-blue-700 text-sm space-y-1">
 <li>Access your personalized project dashboard</li>
 <li>Browse designs matched to your preferences</li>
 <li>Connect with a design consultant</li>
 <li>Get accurate cost estimates</li>
 </ul>
 </div>
 </div>
 </div>
 </div>
<!-- Navigation Buttons -->
 <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
 <button id="nextBtn" type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
 Next
 </button>
 <button id="backBtn" type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm hidden">
 Back
 </button>
 <button id="closeBtn" type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
 Close
 </button>
 </div>
 </div>
 </div>
 </div>
<!-- Footer -->
 <footer class="bg-gray-800">
 <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
 <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
 <div>
 <h3 class="text-white text-sm font-semibold tracking-wider uppercase mb-4">Services</h3>
 <ul class="space-y-2">
 <li><a href="#" class="text-gray-300 hover:text-white">Kitchen Design</a></li>
 <li><a href="#" class="text-gray-300 hover:text-white">Bathroom Design</a></li>
 <li><a href="#" class="text-gray-300 hover:text-white">3D Planning</a></li>
 <li><a href="#" class="text-gray-300 hover:text-white">Installation</a></li>
 </ul>
 </div>
 <div>
 <h3 class="text-white text-sm font-semibold tracking-wider uppercase mb-4">Resources</h3>
 <ul class="space-y-2">
 <li><a href="#" class="text-gray-300 hover:text-white">Inspiration Gallery</a></li>
 <li><a href="#" class="text-gray-300 hover:text-white">Cost Calculator</a></li>
 <li><a href="#" class="text-gray-300 hover:text-white">Design Tips</a></li>
 <li><a href="#" class="text-gray-300 hover:text-white">FAQ</a></li>
 </ul>
 </div>
 <div>
 <h3 class="text-white text-sm font-semibold tracking-wider uppercase mb-4">Company</h3>
 <ul class="space-y-2">
 <li><a href="#" class="text-gray-300 hover:text-white">About Us</a></li>
 <li><a href="#" class="text-gray-300 hover:text-white">Reviews</a></li>
 <li><a href="#" class="text-gray-300 hover:text-white">Careers</a></li>
 <li><a href="#" class="text-gray-300 hover:text-white">Contact</a></li>
 </ul>
 </div>
 <div>
 <h3 class="text-white text-sm font-semibold tracking-wider uppercase mb-4">Connect</h3>
 <div class="flex space-x-4">
 <a href="#" class="text-gray-300 hover:text-white">
 <i class="fab fa-facebook-f"></i>
 </a>
 <a href="#" class="text-gray-300 hover:text-white">
 <i class="fab fa-instagram"></i>
 </a>
 <a href="#" class="text-gray-300 hover:text-white">
 <i class="fab fa-pinterest-p"></i>
 </a>
 <a href="#" class="text-gray-300 hover:text-white">
 <i class="fab fa-houzz"></i>
 </a>
 </div>
 <div class="mt-4">
 <button class="px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700">
 Start My Project
 </button>
 </div>
 </div>
 </div>
 <div class="mt-8 border-t border-gray-700 pt-8 flex flex-col md:flex-row justify-between">
 <p class="text-gray-400 text-sm">
 &copy; 2023 DreamSpace. All rights reserved.
 </p>
 <div class="flex space-x-6 mt-4 md:mt-0">
 <a href="#" class="text-gray-400 hover:text-gray-300 text-sm">Privacy Policy</a>
 <a href="#" class="text-gray-400 hover:text-gray-300 text-sm">Terms of Service</a>
 <a href="#" class="text-gray-400 hover:text-gray-300 text-sm">Accessibility</a>
 </div>
 </div>
 </div>
 </footer>
<script>
 // Quiz state
 const quizState = {
 currentStep: 1,
 totalSteps: 6,
 answers: {
 projectType: null,
 style: null,
 budget: null,
 timeline: null,
 contactInfo: null
 }
 };
// DOM elements
 const quizModal = document.getElementById('quizModal');
 const startProjectBtn = document.getElementById('startProjectBtn');
 const closeBtn = document.getElementById('closeBtn');
 const nextBtn = document.getElementById('nextBtn');
 const backBtn = document.getElementById('backBtn');
 const progressBar = document.getElementById('progressBar');
 const progressPercent = document.getElementById('progressPercent');
// Event listeners
 startProjectBtn.addEventListener('click', openQuizModal);
 closeBtn.addEventListener('click', closeQuizModal);
 nextBtn.addEventListener('click', goToNextStep);
 backBtn.addEventListener('click', goToPreviousStep);
// Functions
 function openQuizModal() {
 quizModal.classList.remove('hidden');
 document.body.style.overflow = 'hidden';
 updateProgress();
 }
function closeQuizModal() {
 quizModal.classList.add('hidden');
 document.body.style.overflow = 'auto';
 resetQuiz();
 }
function resetQuiz() {
 quizState.currentStep = 1;
 quizState.answers = {
 projectType: null,
 style: null,
 budget: null,
 timeline: null,
 contactInfo: null
 };
// Hide all steps except first
 document.querySelectorAll('[id^="step"]').forEach(step => {
 step.classList.add('hidden');
 });
 document.getElementById('step1').classList.remove('hidden');
// Reset UI
 backBtn.classList.add('hidden');
 nextBtn.textContent = 'Next';
 updateProgress();
// Clear selections
 document.querySelectorAll('.quiz-option').forEach(option => {
 option.classList.remove('selected');
 });
 }
function selectOption(element, question, value) {
 // Remove selected class from all options in this question group
 const parent = element.parentElement;
 parent.querySelectorAll('.quiz-option').forEach(option => {
 option.classList.remove('selected');
 });
// Add selected class to clicked option
 element.classList.add('selected');
// Save answer
 quizState.answers[question] = value;
// Enable next button if not on contact info step
 if (quizState.currentStep !== 5) {
 nextBtn.disabled = false;
 }
 }
function goToNextStep() {
 // Validate current step before proceeding
 if (!validateCurrentStep()) return;
// Special handling for last step
 if (quizState.currentStep === quizState.totalSteps) {
 submitQuiz();
 return;
 }
// Hide current step
 document.getElementById(`step${quizState.currentStep}`).classList.add('hidden');
// Increment step
 quizState.currentStep++;
// Show next step
 document.getElementById(`step${quizState.currentStep}`).classList.remove('hidden');
// Update UI
 updateProgress();
 backBtn.classList.remove('hidden');
// Special handling for summary step
 if (quizState.currentStep === quizState.totalSteps) {
 updateSummary();
 nextBtn.textContent = 'Create My Dashboard';
 }
 }
function goToPreviousStep() {
 // Hide current step
 document.getElementById(`step${quizState.currentStep}`).classList.add('hidden');
// Decrement step
 quizState.currentStep--;
// Show previous step
 document.getElementById(`step${quizState.currentStep}`).classList.remove('hidden');
// Update UI
 updateProgress();
// Hide back button if on first step
 if (quizState.currentStep === 1) {
 backBtn.classList.add('hidden');
 }
// Reset next button text if not on last step
 if (quizState.currentStep !== quizState.totalSteps) {
 nextBtn.textContent = 'Next';
 }
 }
function validateCurrentStep() {
 switch(quizState.currentStep) {
 case 1:
 if (!quizState.answers.projectType) {
 alert('Please select a project type');
 return false;
 }
 break;
 case 2:
 if (!quizState.answers.style) {
 alert('Please select a style preference');
 return false;
 }
 break;
 case 3:
 if (!quizState.answers.budget) {
 alert('Please select a budget range');
 return false;
 }
 break;
 case 4:
 if (!quizState.answers.timeline) {
 alert('Please select a timeline');
 return false;
 }
 break;
 case 5:
 const name = document.getElementById('name').value;
 const email = document.getElementById('email').value;
if (!name || !email) {
 alert('Please provide at least your name and email');
 return false;
 }
// Save contact info
 quizState.answers.contactInfo = {
 name: name,
 email: email,
 phone: document.getElementById('phone').value,
 createAccount: document.getElementById('createAccount').checked
 };
 break;
 }
 return true;
 }
function updateProgress() {
 const progress = (quizState.currentStep / quizState.totalSteps) * 100;
 progressBar.style.width = `${progress}%`;
 progressPercent.textContent = `${Math.round(progress)}%`;
 }
function updateSummary() {
 document.getElementById('summaryProjectType').textContent = formatAnswer(quizState.answers.projectType);
 document.getElementById('summaryStyle').textContent = formatAnswer(quizState.answers.style);
 document.getElementById('summaryBudget').textContent = formatAnswer(quizState.answers.budget);
 document.getElementById('summaryTimeline').textContent = formatAnswer(quizState.answers.timeline);
 }
function formatAnswer(value) {
 if (!value) return 'Not specified';
const mappings = {
 'kitchen': 'Kitchen',
 'bathroom': 'Bathroom',
 'both': 'Kitchen & Bathroom',
 'not-sure': 'Need guidance',
 'modern': 'Modern',
 'traditional': 'Traditional',
 'transitional': 'Transitional',
 '5k-15k': '$5K - $15K',
 '15k-30k': '$15K - $30K',
 '30k-50k': '$30K - $50K',
 '50k+': '$50K+',
 'immediately': 'Immediately (within 1 month)',
 '1-3-months': '1-3 Months',
 '3-6-months': '3-6 Months'
 };
return mappings[value] || value;
 }
function submitQuiz() {
 // In a real app, you would send this data to your backend
 console.log('Quiz submitted:', quizState.answers);
// Show confirmation (in a real app, you would redirect to dashboard)
 alert('Thank you! Your project dashboard is being created. You will receive an email with next steps shortly.');
// Close modal
 closeQuizModal();
// Redirect to dashboard (simulated)
 // window.location.href = '/dashboard';
 }
 </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=LukasBe/ds" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>