homestyle

<title>HomeStyle - Premium Home Products</title> <script src="https://cdn.tailwindcss.com"></script> <style> body { box-sizing: border-box; } .hero-gradient { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } .product-card { transition: transform 0.3s ease, box-shadow 0.3s ease; } .product-card:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); } .cart-count { animation: bounce 0.5s ease-in-out; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 60% { transform: translateY(-5px); } } </style>

🏠 HomeStyle

Home Products About Contact

Logout

Login Sign Up

🛒 Cart (0)

<!-- Hero Section -->
<section id="home" class="hero-gradient text-white py-20">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-5xl font-bold mb-6">Transform Your Home</h2>
        <p class="text-xl mb-8 max-w-2xl mx-auto">Discover premium home products that blend style, comfort, and functionality. Create the perfect living space you've always dreamed of.</p>
        <button onclick="document.getElementById('products').scrollIntoView({behavior: 'smooth'})" class="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors">
            Shop Now
        </button>
    </div>
</section>

<!-- Products Section -->
<section id="products" class="py-16">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-4xl font-bold text-center text-gray-800 mb-12">Featured Products</h2>
        
        <!-- Product Categories -->
        <div class="flex flex-wrap justify-center gap-4 mb-12">
            <button onclick="filterProducts('all')" class="filter-btn bg-blue-600 text-white px-6 py-2 rounded-full hover:bg-blue-700 transition-colors">All</button>
            <button onclick="filterProducts('furniture')" class="filter-btn bg-gray-200 text-gray-700 px-6 py-2 rounded-full hover:bg-gray-300 transition-colors">Furniture</button>
            <button onclick="filterProducts('decor')" class="filter-btn bg-gray-200 text-gray-700 px-6 py-2 rounded-full hover:bg-gray-300 transition-colors">Decor</button>
            <button onclick="filterProducts('lighting')" class="filter-btn bg-gray-200 text-gray-700 px-6 py-2 rounded-full hover:bg-gray-300 transition-colors">Lighting</button>
            <button onclick="filterProducts('kitchen')" class="filter-btn bg-gray-200 text-gray-700 px-6 py-2 rounded-full hover:bg-gray-300 transition-colors">Kitchen</button>
        </div>

        <!-- Products Grid -->
        <div id="productsGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
            <!-- Products will be populated by JavaScript -->
        </div>
    </div>
</section>

<!-- About Section -->
<section id="about" class="bg-white py-16">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div>
                <h2 class="text-4xl font-bold text-gray-800 mb-6">Why Choose HomeStyle?</h2>
                <div class="space-y-6">
                    <div class="flex items-start space-x-4">
                        <div class="text-2xl">✨</div>
                        <div>
                            <h3 class="text-xl font-semibold text-gray-800 mb-2">Premium Quality</h3>
                            <p class="text-gray-600">Carefully curated products from trusted manufacturers worldwide.</p>
                        </div>
                    </div>
                    <div class="flex items-start space-x-4">
                        <div class="text-2xl">🚚</div>
                        <div>
                            <h3 class="text-xl font-semibold text-gray-800 mb-2">Fast Delivery</h3>
                            <p class="text-gray-600">Free shipping on orders over $100 with express delivery options.</p>
                        </div>
                    </div>
                    <div class="flex items-start space-x-4">
                        <div class="text-2xl">💝</div>
                        <div>
                            <h3 class="text-xl font-semibold text-gray-800 mb-2">30-Day Returns</h3>
                            <p class="text-gray-600">Not satisfied? Return any item within 30 days for a full refund.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bg-gradient-to-br from-blue-100 to-purple-100 p-8 rounded-2xl">
                <div class="text-center">
                    <div class="text-6xl mb-4">🏡</div>
                    <h3 class="text-2xl font-bold text-gray-800 mb-4">10,000+ Happy Customers</h3>
                    <p class="text-gray-600 mb-6">Join thousands of satisfied customers who have transformed their homes with our products.</p>
                    <div class="flex justify-center space-x-1">
                        <span class="text-yellow-400 text-xl">⭐⭐⭐⭐⭐</span>
                    </div>
                    <p class="text-sm text-gray-500 mt-2">4.9/5 average rating</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Contact Section -->
<section id="contact" class="bg-gray-100 py-16">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-4xl font-bold text-center text-gray-800 mb-12">Get In Touch</h2>
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
            <div>
                <h3 class="text-2xl font-semibold text-gray-800 mb-6">Contact Information</h3>
                <div class="space-y-4">
                    <div class="flex items-center space-x-3">
                        <span class="text-xl">📍</span>
                        <span class="text-gray-600">123 Home Street, Design City, DC 12345</span>
                    </div>
                    <div class="flex items-center space-x-3">
                        <span class="text-xl">📞</span>
                        <span class="text-gray-600">(555) 123-4567</span>
                    </div>
                    <div class="flex items-center space-x-3">
                        <span class="text-xl">✉️</span>
                        <span class="text-gray-600">hello@homestyle.com</span>
                    </div>
                    <div class="flex items-center space-x-3">
                        <span class="text-xl">🕒</span>
                        <span class="text-gray-600">Mon-Fri: 9AM-6PM, Sat-Sun: 10AM-4PM</span>
                    </div>
                </div>
            </div>
            <div>
                <form id="contactForm" class="space-y-6">
                    <div>
                        <label class="block text-gray-700 font-semibold mb-2">Name</label>
                        <input type="text" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                    </div>
                    <div>
                        <label class="block text-gray-700 font-semibold mb-2">Email</label>
                        <input type="email" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                    </div>
                    <div>
                        <label class="block text-gray-700 font-semibold mb-2">Message</label>
                        <textarea rows="4" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"></textarea>
                    </div>
                    <button type="submit" class="w-full bg-blue-600 text-white py-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors">
                        Send Message
                    </button>
                </form>
            </div>
        </div>
    </div>
</section>

<!-- Footer -->
<footer class="bg-gray-800 text-white py-12">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div>
                <h3 class="text-xl font-bold mb-4">🏠 HomeStyle</h3>
                <p class="text-gray-400">Transform your home with our premium collection of furniture, decor, and accessories.</p>
            </div>
            <div>
                <h4 class="font-semibold mb-4">Quick Links</h4>
                <ul class="space-y-2 text-gray-400">
                    <li><a href="#home" class="hover:text-white transition-colors">Home</a></li>
                    <li><a href="#products" class="hover:text-white transition-colors">Products</a></li>
                    <li><a href="#about" class="hover:text-white transition-colors">About</a></li>
                    <li><a href="#contact" class="hover:text-white transition-colors">Contact</a></li>
                </ul>
            </div>
            <div>
                <h4 class="font-semibold mb-4">Categories</h4>
                <ul class="space-y-2 text-gray-400">
                    <li>Furniture</li>
                    <li>Home Decor</li>
                    <li>Lighting</li>
                    <li>Kitchen & Dining</li>
                </ul>
            </div>
            <div>
                <h4 class="font-semibold mb-4">Follow Us</h4>
                <div class="flex space-x-4">
                    <span class="text-2xl cursor-pointer hover:text-blue-400 transition-colors">📘</span>
                    <span class="text-2xl cursor-pointer hover:text-pink-400 transition-colors">📷</span>
                    <span class="text-2xl cursor-pointer hover:text-blue-300 transition-colors">🐦</span>
                </div>
            </div>
        </div>
        <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
            <p>&copy; 2024 HomeStyle. All rights reserved.</p>
        </div>
    </div>
</footer>

<!-- Login Modal -->
<div id="loginModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50">
    <div class="flex items-center justify-center min-h-screen p-4">
        <div class="bg-white rounded-lg max-w-md w-full p-6">
            <div class="flex justify-between items-center mb-6">
                <h3 class="text-2xl font-bold text-gray-800">Welcome Back!</h3>
                <button id="closeLogin" class="text-gray-500 hover:text-gray-700 text-2xl">&times;</button>
            </div>
            <form id="loginForm" class="space-y-4">
                <div>
                    <label class="block text-gray-700 font-semibold mb-2">Email</label>
                    <input type="email" id="loginEmail" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                </div>
                <div>
                    <label class="block text-gray-700 font-semibold mb-2">Password</label>
                    <input type="password" id="loginPassword" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                </div>
                <button type="submit" class="w-full bg-blue-600 text-white py-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors">
                    Login
                </button>
            </form>
            <div class="mt-6 text-center">
                <p class="text-gray-600">Don't have an account? 
                    <button id="switchToSignup" class="text-blue-600 hover:text-blue-700 font-semibold">Sign up here</button>
                </p>
            </div>
            <div class="mt-4 text-center">
                <p class="text-sm text-gray-500">Demo: Use any email and password to login</p>
            </div>
        </div>
    </div>
</div>

<!-- Signup Modal -->
<div id="signupModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50">
    <div class="flex items-center justify-center min-h-screen p-4">
        <div class="bg-white rounded-lg max-w-md w-full p-6">
            <div class="flex justify-between items-center mb-6">
                <h3 class="text-2xl font-bold text-gray-800">Join HomeStyle</h3>
                <button id="closeSignup" class="text-gray-500 hover:text-gray-700 text-2xl">&times;</button>
            </div>
            <form id="signupForm" class="space-y-4">
                <div>
                    <label class="block text-gray-700 font-semibold mb-2">Full Name</label>
                    <input type="text" id="signupName" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                </div>
                <div>
                    <label class="block text-gray-700 font-semibold mb-2">Email</label>
                    <input type="email" id="signupEmail" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                </div>
                <div>
                    <label class="block text-gray-700 font-semibold mb-2">Password</label>
                    <input type="password" id="signupPassword" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                </div>
                <div>
                    <label class="block text-gray-700 font-semibold mb-2">Confirm Password</label>
                    <input type="password" id="confirmPassword" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                </div>
                <button type="submit" class="w-full bg-blue-600 text-white py-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors">
                    Create Account
                </button>
            </form>
            <div class="mt-6 text-center">
                <p class="text-gray-600">Already have an account? 
                    <button id="switchToLogin" class="text-blue-600 hover:text-blue-700 font-semibold">Login here</button>
                </p>
            </div>
        </div>
    </div>
</div>

<!-- Cart Modal -->
<div id="cartModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50">
    <div class="flex items-center justify-center min-h-screen p-4">
        <div class="bg-white rounded-lg max-w-md w-full p-6">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-xl font-bold">Shopping Cart</h3>
                <button id="closeCart" class="text-gray-500 hover:text-gray-700 text-2xl">&times;</button>
            </div>
            <div id="cartItems" class="space-y-4 mb-6">
                <!-- Cart items will be populated here -->
            </div>
            <div class="border-t pt-4">
                <div class="flex justify-between items-center mb-4">
                    <span class="font-semibold">Total: $<span id="cartTotal">0.00</span></span>
                </div>
                <button id="checkoutBtn" class="w-full bg-green-600 text-white py-3 rounded-lg font-semibold hover:bg-green-700 transition-colors">
                    Proceed to Checkout
                </button>
            </div>
        </div>
    </div>
</div>

<script>
    // Sample products data
    const products = [
        { id: 1, name: "Modern Sofa", price: 899, category: "furniture", emoji: "🛋️" },
        { id: 2, name: "Dining Table", price: 649, category: "furniture", emoji: "🪑" },
        { id: 3, name: "Table Lamp", price: 89, category: "lighting", emoji: "💡" },
        { id: 4, name: "Wall Art", price: 129, category: "decor", emoji: "🖼️" },
        { id: 5, name: "Coffee Maker", price: 199, category: "kitchen", emoji: "☕" },
        { id: 6, name: "Bookshelf", price: 299, category: "furniture", emoji: "📚" },
        { id: 7, name: "Pendant Light", price: 159, category: "lighting", emoji: "🔆" },
        { id: 8, name: "Decorative Vase", price: 79, category: "decor", emoji: "🏺" },
        { id: 9, name: "Kitchen Set", price: 349, category: "kitchen", emoji: "🍳" },
        { id: 10, name: "Armchair", price: 449, category: "furniture", emoji: "🪑" },
        { id: 11, name: "Floor Lamp", price: 189, category: "lighting", emoji: "🕯️" },
        { id: 12, name: "Mirror", price: 119, category: "decor", emoji: "🪞" }
    ];

    let cart = [];
    let currentFilter = 'all';
    let currentUser = null;

    // User authentication functions
    function showLoginModal() {
        document.getElementById('loginModal').classList.remove('hidden');
    }

    function showSignupModal() {
        document.getElementById('signupModal').classList.remove('hidden');
    }

    function hideLoginModal() {
        document.getElementById('loginModal').classList.add('hidden');
    }

    function hideSignupModal() {
        document.getElementById('signupModal').classList.add('hidden');
    }

    function updateUserInterface() {
        const userSection = document.getElementById('userSection');
        const authSection = document.getElementById('authSection');
        const welcomeUser = document.getElementById('welcomeUser');

        if (currentUser) {
            userSection.classList.remove('hidden');
            authSection.classList.add('hidden');
            welcomeUser.textContent = `Welcome, ${currentUser.name}!`;
        } else {
            userSection.classList.add('hidden');
            authSection.classList.remove('hidden');
        }
    }

    function login(email, password, name = null) {
        // In a real app, this would validate against a backend
        // For demo purposes, we'll accept any email/password
        currentUser = {
            email: email,
            name: name || email.split('@')[0]
        };
        
        // Store user in localStorage for persistence
        localStorage.setItem('currentUser', JSON.stringify(currentUser));
        
        updateUserInterface();
        hideLoginModal();
        hideSignupModal();
        
        // Show welcome message
        alert(`Welcome ${currentUser.name}! You're now logged in.`);
    }

    function logout() {
        currentUser = null;
        localStorage.removeItem('currentUser');
        cart = []; // Clear cart on logout
        updateCartDisplay();
        updateUserInterface();
        alert('You have been logged out successfully.');
    }

    function checkExistingSession() {
        const savedUser = localStorage.getItem('currentUser');
        if (savedUser) {
            currentUser = JSON.parse(savedUser);
            updateUserInterface();
        }
    }

    // Display products
    function displayProducts(productsToShow) {
        const grid = document.getElementById('productsGrid');
        grid.innerHTML = productsToShow.map(product => `
            <div class="product-card bg-white rounded-lg shadow-md overflow-hidden">
                <div class="p-6 text-center">
                    <div class="text-6xl mb-4">${product.emoji}</div>
                    <h3 class="text-xl font-semibold text-gray-800 mb-2">${product.name}</h3>
                    <p class="text-2xl font-bold text-blue-600 mb-4">$${product.price}</p>
                    <button onclick="addToCart(${product.id})" class="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition-colors">
                        Add to Cart
                    </button>
                </div>
            </div>
        `).join('');
    }

    // Filter products
    function filterProducts(category) {
        currentFilter = category;
        const filtered = category === 'all' ? products : products.filter(p => p.category === category);
        displayProducts(filtered);
        
        // Update filter buttons
        document.querySelectorAll('.filter-btn').forEach(btn => {
            btn.classList.remove('bg-blue-600', 'text-white');
            btn.classList.add('bg-gray-200', 'text-gray-700');
        });
        event.target.classList.remove('bg-gray-200', 'text-gray-700');
        event.target.classList.add('bg-blue-600', 'text-white');
    }

    // Add to cart
    function addToCart(productId) {
        const product = products.find(p => p.id === productId);
        const existingItem = cart.find(item => item.id === productId);
        
        if (existingItem) {
            existingItem.quantity += 1;
        } else {
            cart.push({ ...product, quantity: 1 });
        }
        
        updateCartDisplay();
        
        // Add bounce animation to cart button
        const cartCount = document.getElementById('cartCount');
        cartCount.classList.add('cart-count');
        setTimeout(() => cartCount.classList.remove('cart-count'), 500);
    }

    // Update cart display
    function updateCartDisplay() {
        const cartCount = document.getElementById('cartCount');
        const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);
        cartCount.textContent = totalItems;
        
        const cartItems = document.getElementById('cartItems');
        const cartTotal = document.getElementById('cartTotal');
        
        if (cart.length === 0) {
            cartItems.innerHTML = '<p class="text-gray-500 text-center">Your cart is empty</p>';
            cartTotal.textContent = '0.00';
            return;
        }
        
        cartItems.innerHTML = cart.map(item => `
            <div class="flex items-center justify-between p-3 bg-gray-50 rounded">
                <div class="flex items-center space-x-3">
                    <span class="text-2xl">${item.emoji}</span>
                    <div>
                        <p class="font-semibold">${item.name}</p>
                        <p class="text-sm text-gray-600">$${item.price} x ${item.quantity}</p>
                    </div>
                </div>
                <div class="flex items-center space-x-2">
                    <button onclick="updateQuantity(${item.id}, -1)" class="bg-gray-200 text-gray-700 w-8 h-8 rounded hover:bg-gray-300">-</button>
                    <span class="w-8 text-center">${item.quantity}</span>
                    <button onclick="updateQuantity(${item.id}, 1)" class="bg-gray-200 text-gray-700 w-8 h-8 rounded hover:bg-gray-300">+</button>
                </div>
            </div>
        `).join('');
        
        const total = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
        cartTotal.textContent = total.toFixed(2);
    }

    // Update quantity
    function updateQuantity(productId, change) {
        const item = cart.find(item => item.id === productId);
        if (item) {
            item.quantity += change;
            if (item.quantity <= 0) {
                cart = cart.filter(cartItem => cartItem.id !== productId);
            }
            updateCartDisplay();
        }
    }

    // Authentication event listeners
    document.getElementById('loginBtn').addEventListener('click', showLoginModal);
    document.getElementById('signupBtn').addEventListener('click', showSignupModal);
    document.getElementById('logoutBtn').addEventListener('click', logout);
    
    document.getElementById('closeLogin').addEventListener('click', hideLoginModal);
    document.getElementById('closeSignup').addEventListener('click', hideSignupModal);
    
    document.getElementById('switchToSignup').addEventListener('click', () => {
        hideLoginModal();
        showSignupModal();
    });
    
    document.getElementById('switchToLogin').addEventListener('click', () => {
        hideSignupModal();
        showLoginModal();
    });

    // Login form submission
    document.getElementById('loginForm').addEventListener('submit', (e) => {
        e.preventDefault();
        const email = document.getElementById('loginEmail').value;
        const password = document.getElementById('loginPassword').value;
        
        if (email && password) {
            login(email, password);
        }
    });

    // Signup form submission
    document.getElementById('signupForm').addEventListener('submit', (e) => {
        e.preventDefault();
        const name = document.getElementById('signupName').value;
        const email = document.getElementById('signupEmail').value;
        const password = document.getElementById('signupPassword').value;
        const confirmPassword = document.getElementById('confirmPassword').value;
        
        if (password !== confirmPassword) {
            alert('Passwords do not match!');
            return;
        }
        
        if (name && email && password) {
            login(email, password, name);
        }
    });

    // Cart modal functionality
    document.getElementById('cartBtn').addEventListener('click', () => {
        document.getElementById('cartModal').classList.remove('hidden');
    });

    document.getElementById('closeCart').addEventListener('click', () => {
        document.getElementById('cartModal').classList.add('hidden');
    });

    // Checkout functionality
    document.getElementById('checkoutBtn').addEventListener('click', () => {
        if (cart.length === 0) {
            alert('Your cart is empty!');
            return;
        }
        alert('Thank you for your order! This is a demo checkout.');
        cart = [];
        updateCartDisplay();
        document.getElementById('cartModal').classList.add('hidden');
    });

    // Contact form
    document.getElementById('contactForm').addEventListener('submit', (e) => {
        e.preventDefault();
        alert('Thank you for your message! We\'ll get back to you soon.');
        e.target.reset();
    });

    // Initialize
    checkExistingSession();
    displayProducts(products);
    updateCartDisplay();
</script>

<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'985b7b9f94d1aa12',t:'MTc1ODk4MTE2MS4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>