| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <meta name="theme-color" content="#000000"> |
| <meta name="description" content="Premium clothing brand - Fashion that speaks to your soul"> |
| <title>ELEVATE | Premium Clothing</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"> |
| <link rel="manifest" href="/manifest.json"> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap'); |
| |
| body { |
| font-family: 'Montserrat', sans-serif; |
| scroll-behavior: smooth; |
| } |
| |
| .hero-gradient { |
| background: linear-gradient(135deg, #000000 0%, #2d3436 100%); |
| } |
| |
| .product-card:hover .product-overlay { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| |
| .product-overlay { |
| transition: all 0.3s ease; |
| opacity: 0; |
| transform: translateY(20px); |
| } |
| |
| .install-btn { |
| animation: pulse 2s infinite; |
| } |
| |
| @keyframes pulse { |
| 0% { transform: scale(1); } |
| 50% { transform: scale(1.05); } |
| 100% { transform: scale(1); } |
| } |
| |
| .nav-link::after { |
| content: ''; |
| display: block; |
| width: 0; |
| height: 2px; |
| background: white; |
| transition: width .3s; |
| } |
| |
| .nav-link:hover::after { |
| width: 100%; |
| } |
| |
| |
| .admin-panel { |
| position: fixed; |
| bottom: 20px; |
| right: 20px; |
| z-index: 999; |
| } |
| |
| .admin-btn { |
| background: #4f46e5; |
| color: white; |
| width: 60px; |
| height: 60px; |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
| cursor: pointer; |
| transition: all 0.3s ease; |
| } |
| |
| .admin-btn:hover { |
| transform: scale(1.1); |
| } |
| |
| .admin-menu { |
| position: absolute; |
| bottom: 70px; |
| right: 0; |
| background: white; |
| border-radius: 8px; |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
| width: 250px; |
| overflow: hidden; |
| display: none; |
| } |
| |
| .admin-menu-item { |
| padding: 12px 16px; |
| cursor: pointer; |
| transition: background 0.2s; |
| } |
| |
| .admin-menu-item:hover { |
| background: #f3f4f6; |
| } |
| |
| |
| .modal { |
| display: none; |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: rgba(0, 0, 0, 0.5); |
| z-index: 1000; |
| justify-content: center; |
| align-items: center; |
| } |
| |
| .modal-content { |
| background: white; |
| border-radius: 8px; |
| width: 90%; |
| max-width: 600px; |
| max-height: 90vh; |
| overflow-y: auto; |
| } |
| |
| |
| .dashboard-nav { |
| background: #1f2937; |
| color: white; |
| } |
| |
| .dashboard-nav-item { |
| padding: 12px 16px; |
| border-radius: 4px; |
| transition: background 0.2s; |
| } |
| |
| .dashboard-nav-item:hover { |
| background: #374151; |
| } |
| |
| .dashboard-nav-item.active { |
| background: #4f46e5; |
| } |
| |
| |
| .payment-method { |
| border: 1px solid #e5e7eb; |
| border-radius: 8px; |
| padding: 16px; |
| margin-bottom: 12px; |
| cursor: pointer; |
| transition: all 0.2s; |
| } |
| |
| .payment-method:hover { |
| border-color: #4f46e5; |
| } |
| |
| .payment-method.selected { |
| border-color: #4f46e5; |
| background: #f5f3ff; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50"> |
| |
| <div class="admin-panel"> |
| <div class="admin-btn" id="adminBtn"> |
| <i class="fas fa-cog text-2xl"></i> |
| </div> |
| <div class="admin-menu" id="adminMenu"> |
| <div class="admin-menu-item" onclick="openModal('dashboardModal')"> |
| <i class="fas fa-tachometer-alt mr-2"></i> Dashboard |
| </div> |
| <div class="admin-menu-item" onclick="openModal('editWebsiteModal')"> |
| <i class="fas fa-edit mr-2"></i> Edit Website |
| </div> |
| <div class="admin-menu-item" onclick="openModal('manageProductsModal')"> |
| <i class="fas fa-tshirt mr-2"></i> Manage Products |
| </div> |
| <div class="admin-menu-item" onclick="openModal('manageOrdersModal')"> |
| <i class="fas fa-shopping-bag mr-2"></i> Manage Orders |
| </div> |
| <div class="admin-menu-item" onclick="openModal('paymentSettingsModal')"> |
| <i class="fas fa-credit-card mr-2"></i> Payment Settings |
| </div> |
| <div class="admin-menu-item" onclick="openModal('userManagementModal')"> |
| <i class="fas fa-users mr-2"></i> User Management |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="installBanner" class="hidden fixed bottom-0 left-0 right-0 bg-black text-white p-4 flex justify-between items-center z-50"> |
| <div class="flex items-center"> |
| <i class="fas fa-mobile-alt text-2xl mr-3"></i> |
| <span>Install ELEVATE App for better experience</span> |
| </div> |
| <div> |
| <button id="installBtn" class="install-btn bg-white text-black px-4 py-2 rounded-full font-semibold mr-2">Install</button> |
| <button id="dismissBtn" class="text-gray-400">Not now</button> |
| </div> |
| </div> |
|
|
| |
| <nav class="bg-black text-white fixed w-full z-40"> |
| <div class="container mx-auto px-6 py-4"> |
| <div class="flex justify-between items-center"> |
| <div class="text-2xl font-bold tracking-wider"> |
| <a href="#" class="flex items-center"> |
| <img id="brandLogo" src="https://via.placeholder.com/40" alt="Logo" class="h-10 mr-2"> |
| <span id="brandName" class="text-white">ELEVATE</span> |
| </a> |
| </div> |
| |
| <div class="hidden md:flex space-x-8"> |
| <a href="#home" class="nav-link">Home</a> |
| <a href="#shop" class="nav-link">Shop</a> |
| <a href="#collections" class="nav-link">Collections</a> |
| <a href="#about" class="nav-link">About</a> |
| <a href="#contact" class="nav-link">Contact</a> |
| </div> |
| |
| <div class="flex items-center space-x-4"> |
| <a href="#" class="text-white"><i class="fas fa-search"></i></a> |
| <a href="#" class="text-white"><i class="fas fa-user"></i></a> |
| <a href="#" class="text-white relative"> |
| <i class="fas fa-shopping-bag"></i> |
| <span class="absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span> |
| </a> |
| <button id="mobileMenuBtn" class="md:hidden text-white focus:outline-none"> |
| <i class="fas fa-bars text-2xl"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="mobileMenu" class="hidden md:hidden bg-black absolute w-full left-0 px-6 pb-4"> |
| <div class="flex flex-col space-y-3"> |
| <a href="#home" class="block py-2">Home</a> |
| <a href="#shop" class="block py-2">Shop</a> |
| <a href="#collections" class="block py-2">Collections</a> |
| <a href="#about" class="block py-2">About</a> |
| <a href="#contact" class="block py-2">Contact</a> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <section id="home" class="hero-gradient pt-24 pb-16 md:pt-32 md:pb-24 text-white"> |
| <div class="container mx-auto px-6 flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-10 md:mb-0"> |
| <h1 class="text-4xl md:text-6xl font-bold mb-6">Elevate Your Style</h1> |
| <p class="text-lg md:text-xl mb-8 text-gray-300">Premium clothing designed for those who dare to stand out. Crafted with precision, worn with confidence.</p> |
| <div class="flex space-x-4"> |
| <a href="#shop" class="bg-white text-black px-8 py-3 rounded-full font-semibold hover:bg-gray-200 transition">Shop Now</a> |
| <a href="#collections" class="border border-white text-white px-8 py-3 rounded-full font-semibold hover:bg-white hover:text-black transition">Collections</a> |
| </div> |
| </div> |
| <div class="md:w-1/2 flex justify-center"> |
| <img src="https://images.unsplash.com/photo-1490114538077-0a7f8cb49891?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="ELEVATE Clothing" class="rounded-lg shadow-2xl max-w-full h-auto"> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="shop" class="py-16 bg-white"> |
| <div class="container mx-auto px-6"> |
| <h2 class="text-3xl font-bold text-center mb-12">Featured Collection</h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="productsContainer"> |
| |
| </div> |
| |
| <div class="text-center mt-12"> |
| <a href="#" class="inline-block border-2 border-black text-black px-8 py-3 rounded-full font-semibold hover:bg-black hover:text-white transition">View All Products</a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="collections" class="py-16 bg-gray-100"> |
| <div class="container mx-auto px-6"> |
| <h2 class="text-3xl font-bold text-center mb-12">Our Collections</h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
| |
| <div class="relative rounded-lg overflow-hidden h-96"> |
| <img src="https://images.unsplash.com/photo-1483985988355-763728e1935b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Summer Collection" class="w-full h-full object-cover"> |
| <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center"> |
| <div class="text-center text-white p-6"> |
| <h3 class="text-2xl md:text-3xl font-bold mb-4">Summer '23</h3> |
| <p class="mb-6">Lightweight fabrics and vibrant colors for the sunny days</p> |
| <a href="#" class="inline-block border-2 border-white text-white px-6 py-2 rounded-full font-semibold hover:bg-white hover:text-black transition">Explore</a> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="relative rounded-lg overflow-hidden h-96"> |
| <img src="https://images.unsplash.com/photo-1551232864-3f0890e580d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1587&q=80" alt="Winter Collection" class="w-full h-full object-cover"> |
| <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center"> |
| <div class="text-center text-white p-6"> |
| <h3 class="text-2xl md:text-3xl font-bold mb-4">Winter '23</h3> |
| <p class="mb-6">Warm layers and rich textures for the cold season</p> |
| <a href="#" class="inline-block border-2 border-white text-white px-6 py-2 rounded-full font-semibold hover:bg-white hover:text-black transition">Explore</a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="about" class="py-16 bg-white"> |
| <div class="container mx-auto px-6"> |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> |
| <h2 class="text-3xl font-bold mb-6">Our Story</h2> |
| <p class="text-gray-700 mb-6">Founded in 2015, ELEVATE began as a small boutique in downtown Los Angeles with a simple mission: to create clothing that combines exceptional quality with timeless design.</p> |
| <p class="text-gray-700 mb-6">Every piece in our collection is thoughtfully designed and meticulously crafted to elevate your everyday wardrobe. We believe in sustainable practices, ethical sourcing, and creating garments that last.</p> |
| <p class="text-gray-700 mb-8">Today, we're proud to serve customers worldwide who share our passion for elevated essentials and statement pieces.</p> |
| <a href="#" class="inline-block border-2 border-black text-black px-8 py-3 rounded-full font-semibold hover:bg-black hover:text-white transition">Learn More</a> |
| </div> |
| <div class="md:w-1/2"> |
| <div class="grid grid-cols-2 gap-4"> |
| <div class="h-64 overflow-hidden rounded-lg"> |
| <img src="https://images.unsplash.com/photo-1607082348824-0a96f2a4b3da?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Workshop" class="w-full h-full object-cover"> |
| </div> |
| <div class="h-64 overflow-hidden rounded-lg"> |
| <img src="https://images.unsplash.com/photo-1523381210434-271e8be1f52b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Materials" class="w-full h-full object-cover"> |
| </div> |
| <div class="h-64 overflow-hidden rounded-lg"> |
| <img src="https://images.unsplash.com/photo-1605000797499-95a51c5269ae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" alt="Design" class="w-full h-full object-cover"> |
| </div> |
| <div class="h-64 overflow-hidden rounded-lg"> |
| <img src="https://images.unsplash.com/photo-1490114538077-0a7f8cb49891?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Showroom" class="w-full h-full object-cover"> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-gray-100"> |
| <div class="container mx-auto px-6"> |
| <h2 class="text-3xl font-bold text-center mb-12">What Our Customers Say</h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| |
| <div class="bg-white p-8 rounded-lg shadow-md"> |
| <div class="flex items-center mb-4"> |
| <div class="text-yellow-400 text-xl"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| <p class="text-gray-700 mb-6">"The quality of ELEVATE's clothing is unmatched. I've had my Signature Tee for over a year and it still looks brand new."</p> |
| <div class="flex items-center"> |
| <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Sarah J." class="w-12 h-12 rounded-full mr-4"> |
| <div> |
| <h4 class="font-semibold">Sarah J.</h4> |
| <p class="text-gray-600 text-sm">Verified Customer</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white p-8 rounded-lg shadow-md"> |
| <div class="flex items-center mb-4"> |
| <div class="text-yellow-400 text-xl"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| <p class="text-gray-700 mb-6">"The fit and comfort of these clothes are perfect. I've completely refreshed my wardrobe with ELEVATE pieces."</p> |
| <div class="flex items-center"> |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael T." class="w-12 h-12 rounded-full mr-4"> |
| <div> |
| <h4 class="font-semibold">Michael T.</h4> |
| <p class="text-gray-600 text-sm">Verified Customer</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white p-8 rounded-lg shadow-md"> |
| <div class="flex items-center mb-4"> |
| <div class="text-yellow-400 text-xl"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star-half-alt"></i> |
| </div> |
| </div> |
| <p class="text-gray-700 mb-6">"I love the minimalist yet sophisticated designs. The attention to detail really sets ELEVATE apart from other brands."</p> |
| <div class="flex items-center"> |
| <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Jessica L." class="w-12 h-12 rounded-full mr-4"> |
| <div> |
| <h4 class="font-semibold">Jessica L.</h4> |
| <p class="text-gray-600 text-sm">Verified Customer</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-black text-white"> |
| <div class="container mx-auto px-6 text-center"> |
| <h2 class="text-3xl font-bold mb-6">Join Our Community</h2> |
| <p class="text-xl mb-8 max-w-2xl mx-auto text-gray-300">Subscribe to our newsletter and get 15% off your first order, plus exclusive access to new collections and special events.</p> |
| |
| <form class="max-w-md mx-auto flex"> |
| <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-l-full focus:outline-none text-black"> |
| <button type="submit" class="bg-white text-black px-6 py-3 rounded-r-full font-semibold hover:bg-gray-200 transition">Subscribe</button> |
| </form> |
| |
| <p class="text-sm text-gray-500 mt-4">We respect your privacy. Unsubscribe at any time.</p> |
| </div> |
| </section> |
|
|
| |
| <section id="contact" class="py-16 bg-white"> |
| <div class="container mx-auto px-6"> |
| <h2 class="text-3xl font-bold text-center mb-12">Get In Touch</h2> |
| |
| <div class="flex flex-col md:flex-row"> |
| <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> |
| <h3 class="text-xl font-semibold mb-4">Contact Information</h3> |
| <p class="text-gray-700 mb-6">Have questions or need assistance? We're here to help.</p> |
| |
| <div class="space-y-4"> |
| <div class="flex items-start"> |
| <i class="fas fa-map-marker-alt text-gray-700 mt-1 mr-4"></i> |
| <div> |
| <h4 class="font-semibold">Our Store</h4> |
| <p class="text-gray-600">123 Fashion Avenue, Los Angeles, CA 90015</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <i class="fas fa-envelope text-gray-700 mt-1 mr-4"></i> |
| <div> |
| <h4 class="font-semibold">Email Us</h4> |
| <p class="text-gray-600">hello@elevateclothing.com</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <i class="fas fa-phone-alt text-gray-700 mt-1 mr-4"></i> |
| <div> |
| <h4 class="font-semibold">Call Us</h4> |
| <p class="text-gray-600">+1 (555) 123-4567</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-8"> |
| <h4 class="font-semibold mb-4">Follow Us</h4> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-black hover:text-gray-600"><i class="fab fa-instagram text-2xl"></i></a> |
| <a href="#" class="text-black hover:text-gray-600"><i class="fab fa-facebook text-2xl"></i></a> |
| <a href="#" class="text-black hover:text-gray-600"><i class="fab fa-twitter text-2xl"></i></a> |
| <a href="#" class="text-black hover:text-gray-600"><i class="fab fa-pinterest text-2xl"></i></a> |
| </div> |
| </div> |
| </div> |
| |
| <div class="md:w-1/2"> |
| <form class="bg-gray-100 p-8 rounded-lg"> |
| <div class="mb-6"> |
| <label for="name" class="block text-gray-700 font-medium mb-2">Name</label> |
| <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-black"> |
| </div> |
| |
| <div class="mb-6"> |
| <label for="email" class="block text-gray-700 font-medium mb-2">Email</label> |
| <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-black"> |
| </div> |
| |
| <div class="mb-6"> |
| <label for="subject" class="block text-gray-700 font-medium mb-2">Subject</label> |
| <input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-black"> |
| </div> |
| |
| <div class="mb-6"> |
| <label for="message" class="block text-gray-700 font-medium mb-2">Message</label> |
| <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-black"></textarea> |
| </div> |
| |
| <button type="submit" class="bg-black text-white px-6 py-3 rounded-lg font-semibold hover:bg-gray-800 transition w-full">Send Message</button> |
| </form> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-black text-white py-12"> |
| <div class="container mx-auto px-6"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| <div> |
| <h3 class="text-xl font-bold mb-4">ELEVATE</h3> |
| <p class="text-gray-400">Premium clothing designed for those who dare to stand out.</p> |
| </div> |
| |
| <div> |
| <h4 class="font-semibold mb-4">Shop</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">All Products</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">New Arrivals</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Best Sellers</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Sale</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="font-semibold mb-4">Company</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">About Us</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Sustainability</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Press</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="font-semibold mb-4">Customer Service</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Contact Us</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">FAQs</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Shipping & Returns</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Size Guide</a></li> |
| </ul> |
| </div> |
| </div> |
| |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> |
| <p class="text-gray-400 mb-4 md:mb-0">© 2023 ELEVATE Clothing. All rights reserved.</p> |
| <div class="flex space-x-6"> |
| <a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a> |
| <a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a> |
| <a href="#" class="text-gray-400 hover:text-white transition">Cookies</a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| |
| <div class="modal" id="checkoutModal"> |
| <div class="modal-content"> |
| <div class="p-6"> |
| <div class="flex justify-between items-center mb-6"> |
| <h3 class="text-2xl font-bold">Checkout</h3> |
| <button onclick="closeModal('checkoutModal')" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
| <div> |
| <h4 class="text-lg font-semibold mb-4">Shipping Information</h4> |
| <form> |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-2">Full Name</label> |
| <input type="text" class="w-full px-4 py-2 border rounded-lg"> |
| </div> |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-2">Address</label> |
| <input type="text" class="w-full px-4 py-2 border rounded-lg"> |
| </div> |
| <div class="grid grid-cols-2 gap-4 mb-4"> |
| <div> |
| <label class="block text-gray-700 mb-2">City</label> |
| <input type="text" class="w-full px-4 py-2 border rounded-lg"> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-2">ZIP Code</label> |
| <input type="text" class="w-full px-4 py-2 border rounded-lg"> |
| </div> |
| </div> |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-2">Country</label> |
| <select class="w-full px-4 py-2 border rounded-lg"> |
| <option>United States</option> |
| <option>Canada</option> |
| <option>United Kingdom</option> |
| <option>Australia</option> |
| </select> |
| </div> |
| </form> |
| |
| <h4 class="text-lg font-semibold mt-8 mb-4">Payment Method</h4> |
| <div id="paymentMethods"> |
| <div class="payment-method selected" onclick="selectPaymentMethod(this)"> |
| <div class="flex items-center"> |
| <i class="fab fa-cc-stripe text-2xl mr-3 text-blue-500"></i> |
| <div> |
| <h5 class="font-semibold">Credit/Debit Card</h5> |
| <p class="text-sm text-gray-600">Pay with Visa, Mastercard, etc.</p> |
| </div> |
| </div> |
| <div id="cardPaymentForm" class="mt-4"> |
| <div class="mb-3"> |
| <label class="block text-gray-700 mb-1">Card Number</label> |
| <input type="text" placeholder="1234 5678 9012 3456" class="w-full px-4 py-2 border rounded-lg"> |
| </div> |
| <div class="grid grid-cols-2 gap-4 mb-3"> |
| <div> |
| <label class="block text-gray-700 mb-1">Expiry Date</label> |
| <input type="text" placeholder="MM/YY" class="w-full px-4 py-2 border rounded-lg"> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-1">CVV</label> |
| <input type="text" placeholder="123" class="w-full px-4 py-2 border rounded-lg"> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="payment-method" onclick="selectPaymentMethod(this)"> |
| <div class="flex items-center"> |
| <i class="fab fa-paypal text-2xl mr-3 text-blue-500"></i> |
| <div> |
| <h5 class="font-semibold">PayPal</h5> |
| <p class="text-sm text-gray-600">Pay with your PayPal account</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="payment-method" onclick="selectPaymentMethod(this)"> |
| <div class="flex items-center"> |
| <i class="fas fa-money-bill-wave text-2xl mr-3 text-green-500"></i> |
| <div> |
| <h5 class="font-semibold">Cash on Delivery</h5> |
| <p class="text-sm text-gray-600">Pay when you receive your order</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div> |
| <h4 class="text-lg font-semibold mb-4">Order Summary</h4> |
| <div class="bg-gray-100 p-4 rounded-lg"> |
| <div class="flex justify-between mb-4 pb-2 border-b"> |
| <span>Subtotal</span> |
| <span>$149.97</span> |
| </div> |
| <div class="flex justify-between mb-4 pb-2 border-b"> |
| <span>Shipping</span> |
| <span>$5.99</span> |
| </div> |
| <div class="flex justify-between mb-4 pb-2 border-b"> |
| <span>Tax</span> |
| <span>$12.45</span> |
| </div> |
| <div class="flex justify-between font-bold text-lg"> |
| <span>Total</span> |
| <span>$168.41</span> |
| </div> |
| </div> |
| |
| <button class="w-full bg-black text-white py-3 rounded-lg font-semibold mt-6 hover:bg-gray-800 transition"> |
| Complete Order |
| </button> |
| |
| <div class="mt-4 text-center text-sm text-gray-500"> |
| <p>By placing your order, you agree to our <a href="#" class="text-blue-500">Terms of Service</a> and <a href="#" class="text-blue-500">Privacy Policy</a>.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="modal" id="dashboardModal"> |
| <div class="modal-content"> |
| <div class="p-6"> |
| <div class="flex justify-between items-center mb-6"> |
| <h3 class="text-2xl font-bold">Admin Dashboard</h3> |
| <button onclick="closeModal('dashboardModal')" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| |
| <div class="flex flex-col md:flex-row"> |
| |
| <div class="dashboard-nav md:w-1/4 p-4 rounded-lg mr-0 md:mr-6 mb-6 md:mb-0"> |
| <div class="dashboard-nav-item active" onclick="showDashboardTab('dashboardOverview')"> |
| <i class="fas fa-tachometer-alt mr-2"></i> Overview |
| </div> |
| <div class="dashboard-nav-item" onclick="showDashboardTab('dashboardProducts')"> |
| <i class="fas fa-tshirt mr-2"></i> Products |
| </div> |
| <div class="dashboard-nav-item" onclick="showDashboardTab('dashboardOrders')"> |
| <i class="fas fa-shopping-bag mr-2"></i> Orders |
| </div> |
| <div class="dashboard-nav-item" onclick="showDashboardTab('dashboardCustomers')"> |
| <i class="fas fa-users mr-2"></i> Customers |
| </div> |
| <div class="dashboard-nav-item" onclick="showDashboardTab('dashboardAnalytics')"> |
| <i class="fas fa-chart-line mr-2"></i> Analytics |
| </div> |
| <div class="dashboard-nav-item" onclick="showDashboardTab('dashboardSettings')"> |
| <i class="fas fa-cog mr-2"></i> Settings |
| </div> |
| </div> |
| |
| |
| <div class="md:w-3/4"> |
| <div id="dashboardOverview" class="dashboard-tab"> |
| <h4 class="text-xl font-semibold mb-4">Overview</h4> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> |
| <div class="bg-blue-50 p-4 rounded-lg"> |
| <h5 class="font-semibold text-blue-800">Total Revenue</h5> |
| <p class="text-2xl font-bold">$24,567</p> |
| <p class="text-sm text-green-600">+12% from last month</p> |
| </div> |
| <div class="bg-green-50 p-4 rounded-lg"> |
| <h5 class="font-semibold text-green-800">New Orders</h5> |
| <p class="text-2xl font-bold">156</p> |
| <p class="text-sm text-green-600">+8% from last month</p> |
| </div> |
| <div class="bg-purple-50 p-4 rounded-lg"> |
| <h5 class="font-semibold text-purple-800">Products</h5> |
| <p class="text-2xl font-bold">87</p> |
| <p class="text-sm text-green-600">+5 new this month</p> |
| </div> |
| </div> |
| |
| <div class="bg-white p-4 rounded-lg shadow mb-6"> |
| <h5 class="font-semibold mb-3">Recent Orders</h5> |
| <div class="overflow-x-auto"> |
| <table class="min-w-full"> |
| <thead> |
| <tr class="border-b"> |
| <th class="text-left py-2">Order ID</th> |
| <th class="text-left py-2">Customer</th> |
| <th class="text-left py-2">Date</th> |
| <th class="text-left py-2">Amount</th> |
| <th class="text-left py-2">Status</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr class="border-b"> |
| <td class="py-2">#ORD-1001</td> |
| <td class="py-2">Sarah Johnson</td> |
| <td class="py-2">Today</td> |
| <td class="py-2">$168.41</td> |
| <td class="py-2"><span class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs">Shipped</span></td> |
| </tr> |
| <tr class="border-b"> |
| <td class="py-2">#ORD-1000</td> |
| <td class="py-2">Michael Brown</td> |
| <td class="py-2">Yesterday</td> |
| <td class="py-2">$245.50</td> |
| <td class="py-2"><span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">Processing</span></td> |
| </tr> |
| <tr class="border-b"> |
| <td class="py-2">#ORD-999</td> |
| <td class="py-2">Jessica Lee</td> |
| <td class="py-2">2 days ago</td> |
| <td class="py-2">$89.99</td> |
| <td class="py-2"><span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded text-xs">Pending</span></td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </div> |
| |
| <div id="dashboardProducts" class="dashboard-tab hidden"> |
| <div class="flex justify-between items-center mb-4"> |
| <h4 class="text-xl font-semibold">Products</h4> |
| <button onclick="openModal('addProductModal')" class="bg-black text-white px-4 py-2 rounded-lg text-sm hover:bg-gray-800"> |
| <i class="fas fa-plus mr-1"></i> Add Product |
| </button> |
| </div> |
| |
| <div class="bg-white p-4 rounded-lg shadow"> |
| <div class="overflow-x-auto"> |
| <table class="min-w-full"> |
| <thead> |
| <tr class="border-b"> |
| <th class="text-left py-2">Image</th> |
| <th class="text-left py-2">Name</th> |
| <th class="text-left py-2">Price</th> |
| <th class="text-left py-2">Stock</th> |
| <th class="text-left py-2">Actions</th> |
| </tr> |
| </thead> |
| <tbody id="productListTable"> |
| |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </div> |
| |
| <div id="dashboardOrders" class="dashboard-tab hidden"> |
| <h4 class="text-xl font-semibold mb-4">Orders</h4> |
| <div class="bg-white p-4 rounded-lg shadow"> |
| <div class="overflow-x-auto"> |
| <table class="min-w-full"> |
| <thead> |
| <tr class="border-b"> |
| <th class="text-left py-2">Order ID</th> |
| <th class="text-left py-2">Customer</th> |
| <th class="text-left py-2">Date</th> |
| <th class="text-left py-2">Amount</th> |
| <th class="text-left py-2">Status</th> |
| <th class="text-left py-2">Actions</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr class="border-b"> |
| <td class="py-2">#ORD-1001</td> |
| <td class="py-2">Sarah Johnson</td> |
| <td class="py-2">Today</td> |
| <td class="py-2">$168.41</td> |
| <td class="py-2"> |
| <select class="border rounded px-2 py-1 text-xs"> |
| <option>Pending</option> |
| <option selected>Processing</option> |
| <option>Shipped</option> |
| <option>Delivered</option> |
| <option>Cancelled</option> |
| </select> |
| </td> |
| <td class="py-2"> |
| <button class="text-blue-500 hover:text-blue-700 mr-2"> |
| <i class="fas fa-eye"></i> |
| </button> |
| <button class="text-red-500 hover:text-red-700"> |
| <i class="fas fa-trash"></i> |
| </button> |
| </td> |
| </tr> |
| <tr class="border-b"> |
| <td class="py-2">#ORD-1000</td> |
| <td class="py-2">Michael Brown</td> |
| <td class="py-2">Yesterday</td> |
| <td class="py-2">$245.50</td> |
| <td class="py-2"> |
| <select class="border rounded px-2 py-1 text-xs"> |
| <option selected>Pending</option> |
| <option>Processing</option> |
| <option>Shipped</option> |
| <option>Delivered</option> |
| <option>Cancelled</option> |
| </select> |
| </td> |
| <td class="py-2"> |
| <button class="text-blue-500 hover:text-blue-700 mr-2"> |
| <i class="fas fa-eye"></i> |
| </button> |
| <button class="text-red-500 hover:text-red-700"> |
| <i class="fas fa-trash"></i> |
| </button> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </div> |
| |
| <div id="dashboardCustomers" class="dashboard-tab hidden"> |
| <h4 class="text-xl font-semibold mb-4">Customers</h4> |
| <div class="bg-white p-4 rounded-lg shadow"> |
| <div class="overflow-x-auto"> |
| <table class="min-w-full"> |
| <thead> |
| <tr class="border-b"> |
| <th class="text-left py-2">Name</th> |
| <th class="text-left py-2">Email</th> |
| <th class="text-left py-2">Orders</th> |
| <th class="text-left py-2">Joined</th> |
| <th class="text-left py-2">Actions</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr class="border-b"> |
| <td class="py-2">Sarah Johnson</td> |
| <td class="py-2">sarah@example.com</td> |
| <td class="py-2">5</td> |
| <td class="py-2">2 months ago</td> |
| <td class="py-2"> |
| <button class="text-blue-500 hover:text-blue-700"> |
| <i class="fas fa-eye"></i> |
| </button> |
| </td> |
| </tr> |
| <tr class="border-b"> |
| <td class="py-2">Michael Brown</td> |
| <td class="py-2">michael@example.com</td> |
| <td class="py-2">3</td> |
| <td class="py-2">1 month ago</td> |
| <td class="py-2"> |
| <button class="text-blue-500 hover:text-blue-700"> |
| <i class="fas fa-eye"></i> |
| </button> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </div> |
| |
| <div id="dashboardAnalytics" class="dashboard-tab hidden"> |
| <h4 class="text-xl font-semibold mb-4">Analytics</h4> |
| <div class="bg-white p-4 rounded-lg shadow mb-6"> |
| <h5 class="font-semibold mb-3">Sales Overview</h5> |
| <div class="h-64 bg-gray-100 rounded flex items-center justify-center"> |
| <p class="text-gray-500">Sales chart will be displayed here</p> |
| </div> |
| </div> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
| <div class="bg-white p-4 rounded-lg shadow"> |
| <h5 class="font-semibold mb-3">Top Products</h5> |
| <div class="space-y-3"> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span>Signature Tee</span> |
| <span>45 sales</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 75%"></div> |
| </div> |
| </div> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span>Urban Hoodie</span> |
| <span>32 sales</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 55%"></div> |
| </div> |
| </div> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span>Tailored Chinos</span> |
| <span>28 sales</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 45%"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="bg-white p-4 rounded-lg shadow"> |
| <h5 class="font-semibold mb-3">Traffic Sources</h5> |
| <div class="h-48 bg-gray-100 rounded flex items-center justify-center"> |
| <p class="text-gray-500">Pie chart will be displayed here</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div id="dashboardSettings" class="dashboard-tab hidden"> |
| <h4 class="text-xl font-semibold mb-4">Settings</h4> |
| <div class="bg-white p-4 rounded-lg shadow"> |
| <div class="mb-6"> |
| <h5 class="font-semibold mb-3">General Settings</h5> |
| <div class="space-y-4"> |
| <div> |
| <label class="block text-gray-700 mb-1">Store Name</label> |
| <input type="text" value="ELEVATE" class="w-full px-4 py-2 border rounded-lg"> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-1">Store Logo</label> |
| <div class="flex items-center"> |
| <img id="storeLogoPreview" src="https://via.placeholder.com/100" alt="Store Logo" class="h-16 w-16 rounded mr-4"> |
| <input type="file" id="storeLogoUpload" class="hidden" accept="image/*"> |
| <button onclick="document.getElementById('storeLogoUpload').click()" class="bg-gray-100 hover:bg-gray-200 px-4 py-2 rounded-lg"> |
| Change Logo |
| </button> |
| </div> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-1">Store Description</label> |
| <textarea class="w-full px-4 py-2 border rounded-lg" rows="3">Premium clothing designed for those who dare to stand out.</textarea> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mb-6"> |
| <h5 class="font-semibold mb-3">Payment Settings</h5> |
| <div class="space-y-4"> |
| <div class="flex items-center"> |
| <input type="checkbox" id="enableStripe" class="mr-2" checked> |
| <label for="enableStripe">Enable Stripe Payments</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="enablePaypal" class="mr-2" checked> |
| <label for="enablePaypal">Enable PayPal</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="enableCOD" class="mr-2" checked> |
| <label for="enableCOD">Enable Cash on Delivery</label> |
| </div> |
| </div> |
| </div> |
| |
| <div> |
| <h5 class="font-semibold mb-3">Shipping Settings</h5> |
| <div class="space-y-4"> |
| <div> |
| <label class="block text-gray-700 mb-1">Default Shipping Fee</label> |
| <input type="number" value="5.99" class="w-full px-4 py-2 border rounded-lg"> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-1">Shipping Countries</label> |
| <select multiple class="w-full px-4 py-2 border rounded-lg"> |
| <option selected>United States</option> |
| <option selected>Canada</option> |
| <option selected>United Kingdom</option> |
| <option>Australia</option> |
| <option>Germany</option> |
| </select> |
| </div> |
| </div> |
| </div> |
| |
| <button class="bg-black text-white px-6 py-2 rounded-lg mt-6 hover:bg-gray-800"> |
| Save Settings |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="modal" id="editWebsiteModal"> |
| <div class="modal-content"> |
| <div class="p-6"> |
| <div class="flex justify-between items-center mb-6"> |
| <h3 class="text-2xl font-bold">Edit Website</h3> |
| <button onclick="closeModal('editWebsiteModal')" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| |
| <div class="space-y-6"> |
| <div> |
| <h4 class="text-lg font-semibold mb-3">Brand Identity</h4> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div> |
| <label class="block text-gray-700 mb-1">Brand Name</label> |
| <input type="text" id="brandNameInput" value="ELEVATE" class="w-full px-4 py-2 border rounded-lg"> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-1">Brand Logo</label> |
| <div class="flex items-center"> |
| <img id="brandLogoPreview" src="https://via.placeholder.com/100" alt="Brand Logo" class="h-16 w-16 rounded mr-4"> |
| <input type="file" id="brandLogoUpload" class="hidden" accept="image/*"> |
| <button onclick="document.getElementById('brandLogoUpload').click()" class="bg-gray-100 hover:bg-gray-200 px-4 py-2 rounded-lg"> |
| Upload Logo |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div> |
| <h4 class="text-lg font-semibold mb-3">Hero Section</h4> |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-1">Hero Title</label> |
| <input type="text" id="heroTitleInput" value="Elevate Your Style" class="w-full px-4 py-2 border rounded-lg"> |
| </div> |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-1">Hero Description</label> |
| <textarea id="heroDescriptionInput" class="w-full px-4 py-2 border rounded-lg" rows="3">Premium clothing designed for those who dare to stand out. Crafted with precision, worn with confidence.</textarea> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-1">Hero Image</label> |
| <div class="flex items-center"> |
| <img id="heroImagePreview" src="https://images.unsplash.com/photo-1490114538077-0a7f8cb49891?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Hero Image" class="h-24 w-24 rounded mr-4 object-cover"> |
| <input type="file" id="heroImageUpload" class="hidden" accept="image/*"> |
| <button onclick="document.getElementById('heroImageUpload').click()" class="bg-gray-100 hover:bg-gray-200 px-4 py-2 rounded-lg"> |
| Upload Image |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| <div> |
| <h4 class="text-lg font-semibold mb-3">About Section</h4> |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-1">About Title</label> |
| <input type="text" id="aboutTitleInput" value="Our Story" class="w-full px-4 py-2 border rounded-lg"> |
| </div> |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-1">About Content</label> |
| <textarea id="aboutContentInput" class="w-full px-4 py-2 border rounded-lg" rows="5">Founded in 2015, ELEVATE began as a small boutique in downtown Los Angeles with a simple mission: to create clothing that combines exceptional quality with timeless design. |
|
|
| Every piece in our collection is thoughtfully designed and meticulously crafted to elevate your everyday wardrobe. We believe in sustainable practices, ethical sourcing, and creating garments that last. |
|
|
| Today, we're proud to serve customers worldwide who share our passion for elevated essentials and statement pieces.</textarea> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-1">About Images</label> |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1607082348824-0a96f2a4b3da?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="About Image" class="h-24 w-full rounded object-cover"> |
| <button class="absolute top-1 right-1 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center"> |
| <i class="fas fa-times text-xs"></i> |
| </button> |
| </div> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1523381210434-271e8be1f52b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="About Image" class="h-24 w-full rounded object-cover"> |
| <button class="absolute top-1 right-1 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center"> |
| <i class="fas fa-times text-xs"></i> |
| </button> |
| </div> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1605000797499-95a51c5269ae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" alt="About Image" class="h-24 w-full rounded object-cover"> |
| <button class="absolute top-1 right-1 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center"> |
| <i class="fas fa-times text-xs"></i> |
| </button> |
| </div> |
| <div class="flex items-center justify-center border-2 border-dashed rounded h-24"> |
| <input type="file" id="aboutImageUpload" class="hidden" accept="image/*"> |
| <button onclick="document.getElementById('aboutImageUpload').click()" class="text-gray-500"> |
| <i class="fas fa-plus mr-1"></i> Add Image |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div> |
| <h4 class="text-lg font-semibold mb-3">Contact Information</h4> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div> |
| <label class="block text-gray-700 mb-1">Store Address</label> |
| <input type="text" id="storeAddressInput" value="123 Fashion Avenue, Los Angeles, CA 90015" class="w-full px-4 py-2 border rounded-lg"> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-1">Email</label> |
| <input type="email" id="storeEmailInput" value="hello@elevateclothing.com" class="w-full px-4 py-2 border rounded-lg"> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-1">Phone</label> |
| <input type="tel" id="storePhoneInput" value="+1 (555) 123-4567" class="w-full px-4 py-2 border rounded-lg"> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-1">Social Media Links</label> |
| <div class="flex space-x-2"> |
| <input type="text" placeholder="Instagram" class="flex-1 px-4 py-2 border rounded-lg"> |
| <input type="text" placeholder="Facebook" class="flex-1 px-4 py-2 border rounded-lg"> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="flex justify-end space-x-4 pt-4"> |
| <button onclick="closeModal('editWebsiteModal')" class="border border-gray-300 px-6 py-2 rounded-lg hover:bg-gray-100"> |
| Cancel |
| </button> |
| <button onclick="saveWebsiteChanges()" class="bg-black text-white px-6 py-2 rounded-lg hover:bg-gray-800"> |
| Save Changes |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="modal" id="manageProductsModal"> |
| <div class="modal-content"> |
| <div class="p-6"> |
| <div class="flex justify-between items-center mb-6"> |
| <h3 class="text-2xl font-bold">Manage Products</h3> |
| <button onclick="closeModal('manageProductsModal')" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| |
| <div class="mb-6"> |
| <button onclick="openModal('addProductModal')" class="bg-black text-white px-4 py-2 rounded-lg hover:bg-gray-800"> |
| <i class="fas fa-plus mr-1"></i> Add New Product |
| </button> |
| </div> |
| |
| <div class="bg-white rounded-lg shadow overflow-hidden"> |
| <div class="overflow-x-auto"> |
| <table class="min-w-full"> |
| <thead> |
| <tr class="border-b bg-gray-50"> |
| <th class="text-left py-3 px-4">Image</th> |
| <th class="text-left py-3 px-4">Name</th> |
| <th class="text-left py-3 px-4">Price</th> |
| <th class="text-left py-3 px-4">Stock</th> |
| <th class="text-left py-3 px-4">Actions</th> |
| </tr> |
| </thead> |
| <tbody id="productManagementTable"> |
| |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="modal" id="addProductModal"> |
| <div class="modal-content"> |
| <div class="p-6"> |
| <div class="flex justify-between items-center mb-6"> |
| <h3 class="text-2xl font-bold" id="productModalTitle">Add New Product</h3> |
| <button onclick="closeModal('addProductModal')" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| |
| <div class="space-y-6"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div> |
| <label class="block text-gray-700 mb-1">Product Name</label> |
| <input type="text" id="productNameInput" class="w-full px-4 py-2 border rounded-lg" placeholder="e.g. Signature Tee"> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-1">Category</label> |
| <select id="productCategoryInput" class="w-full px-4 py-2 border rounded-lg"> |
| <option value="">Select Category</option> |
| <option value="T-Shirts">T-Shirts</option> |
| <option value="Hoodies">Hoodies</option> |
| <option value="Pants">Pants</option> |
| <option value="Jackets">Jackets</option> |
| <option value="Accessories">Accessories</option> |
| </select> |
| </div> |
| </div> |
| |
| <div> |
| <label class="block text-gray-700 mb-1">Description</label> |
| <textarea id="productDescriptionInput" class="w-full px-4 py-2 border rounded-lg" rows="3" placeholder="Enter product description"></textarea> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
| <div> |
| <label class="block text-gray-700 mb-1">Price ($)</label> |
| <input type="number" id="productPriceInput" class="w-full px-4 py-2 border rounded-lg" placeholder="49.99"> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-1">Stock Quantity</label> |
| <input type="number" id="productStockInput" class="w-full px-4 py-2 border rounded-lg" placeholder="100"> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-1">SKU</label> |
| <input type="text" id="productSkuInput" class="w-full px-4 py-2 border rounded-lg" placeholder="ELV-TEE-001"> |
| </div> |
| </div> |
| |
| <div> |
| <label class="block text-gray-700 mb-1">Product Images</label> |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4"> |
| <div class="flex items-center justify-center border-2 border-dashed rounded h-32"> |
| <input type="file" id="productImageUpload" class="hidden" accept="image/*" multiple> |
| <button onclick="document.getElementById('productImageUpload').click()" class="text-gray-500"> |
| <i class="fas fa-plus mr-1"></i> Add Images |
| </button> |
| </div> |
| </div> |
| <div id="productImagesPreview" class="grid grid-cols-2 md:grid-cols-4 gap-4"> |
| |
| </div> |
| </div> |
| |
| <div> |
| <label class="block text-gray-700 mb-1">Product Variants</label> |
| <div class="bg-gray-50 p-4 rounded-lg"> |
| <div class="mb-4"> |
| <div class="flex items-center mb-2"> |
| <input type="checkbox" id="hasSizes" class="mr-2"> |
| <label for="hasSizes">This product has sizes</label> |
| </div> |
| <div id="sizeOptions" class="hidden space-y-2 ml-6"> |
| <div class="flex flex-wrap gap-2"> |
| <label class="inline-flex items-center"> |
| <input type="checkbox" class="mr-1"> XS |
| </label> |
| <label class="inline-flex items-center"> |
| <input type="checkbox" class="mr-1"> S |
| </label> |
| <label class="inline-flex items-center"> |
| <input type="checkbox" class="mr-1" checked> M |
| </label> |
| <label class="inline-flex items-center"> |
| <input type="checkbox" class="mr-1" checked> L |
| </label> |
| <label class="inline-flex items-center"> |
| <input type="checkbox" class="mr-1"> XL |
| </label> |
| <label class="inline-flex items-center"> |
| <input type="checkbox" class="mr-1"> XXL |
| </ |
| </html> |
