|
|
<!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> |
