|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>New Life Fashion - Premium Ladies Clothing in Nairobi</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
} |
|
|
|
|
|
.heading-font { |
|
|
font-family: 'Playfair Display', serif; |
|
|
} |
|
|
|
|
|
.hero-image { |
|
|
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1483985988355-763728e1935b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80'); |
|
|
background-size: cover; |
|
|
background-position: center; |
|
|
} |
|
|
|
|
|
.product-card:hover .product-image { |
|
|
transform: scale(1.05); |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
|
|
|
.product-image { |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
|
|
|
.testimonial-card { |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease; |
|
|
} |
|
|
|
|
|
.testimonial-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.nav-link { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.nav-link:after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 0; |
|
|
height: 2px; |
|
|
bottom: -2px; |
|
|
left: 0; |
|
|
background-color: #d1a054; |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
|
|
|
.nav-link:hover:after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.mobile-menu { |
|
|
max-height: 0; |
|
|
overflow: hidden; |
|
|
transition: max-height 0.3s ease-out; |
|
|
} |
|
|
|
|
|
.mobile-menu.open { |
|
|
max-height: 500px; |
|
|
} |
|
|
|
|
|
|
|
|
.modal { |
|
|
display: none; |
|
|
position: fixed; |
|
|
z-index: 100; |
|
|
left: 0; |
|
|
top: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
overflow: auto; |
|
|
background-color: rgba(0,0,0,0.4); |
|
|
} |
|
|
|
|
|
.modal-content { |
|
|
background-color: #fefefe; |
|
|
margin: 5% auto; |
|
|
padding: 20px; |
|
|
border: none; |
|
|
width: 90%; |
|
|
max-width: 500px; |
|
|
border-radius: 8px; |
|
|
box-shadow: 0 5px 15px rgba(0,0,0,0.3); |
|
|
animation: modalopen 0.3s; |
|
|
} |
|
|
|
|
|
@keyframes modalopen { |
|
|
from {opacity: 0; transform: translateY(-50px);} |
|
|
to {opacity: 1; transform: translateY(0);} |
|
|
} |
|
|
|
|
|
.close { |
|
|
color: #aaa; |
|
|
float: right; |
|
|
font-size: 28px; |
|
|
font-weight: bold; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.close:hover { |
|
|
color: black; |
|
|
} |
|
|
|
|
|
|
|
|
.cart-count { |
|
|
position: absolute; |
|
|
top: -8px; |
|
|
right: -8px; |
|
|
background-color: #d1a054; |
|
|
color: white; |
|
|
border-radius: 50%; |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-size: 12px; |
|
|
} |
|
|
|
|
|
|
|
|
.form-group { |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.form-control { |
|
|
width: 100%; |
|
|
padding: 0.75rem; |
|
|
border: 1px solid #ddd; |
|
|
border-radius: 4px; |
|
|
font-size: 1rem; |
|
|
} |
|
|
|
|
|
.form-control:focus { |
|
|
outline: none; |
|
|
border-color: #d1a054; |
|
|
box-shadow: 0 0 0 2px rgba(209, 160, 84, 0.2); |
|
|
} |
|
|
|
|
|
.btn { |
|
|
display: inline-block; |
|
|
background-color: #d1a054; |
|
|
color: white; |
|
|
padding: 0.75rem 1.5rem; |
|
|
border: none; |
|
|
border-radius: 4px; |
|
|
cursor: pointer; |
|
|
font-size: 1rem; |
|
|
text-align: center; |
|
|
transition: background-color 0.3s; |
|
|
} |
|
|
|
|
|
.btn:hover { |
|
|
background-color: #b78a46; |
|
|
} |
|
|
|
|
|
.btn-block { |
|
|
display: block; |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.text-danger { |
|
|
color: #dc3545; |
|
|
font-size: 0.875rem; |
|
|
margin-top: 0.25rem; |
|
|
} |
|
|
|
|
|
|
|
|
.notification { |
|
|
position: fixed; |
|
|
bottom: 20px; |
|
|
right: 20px; |
|
|
background-color: #4CAF50; |
|
|
color: white; |
|
|
padding: 15px; |
|
|
border-radius: 5px; |
|
|
z-index: 1000; |
|
|
display: none; |
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.1); |
|
|
} |
|
|
|
|
|
|
|
|
.admin-panel { |
|
|
position: fixed; |
|
|
top: 20px; |
|
|
left: 20px; |
|
|
z-index: 1000; |
|
|
background-color: #333; |
|
|
color: white; |
|
|
padding: 10px; |
|
|
border-radius: 5px; |
|
|
display: none; |
|
|
} |
|
|
|
|
|
|
|
|
.tab-content { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.tab-content.active { |
|
|
display: block; |
|
|
} |
|
|
|
|
|
.tab-button { |
|
|
padding: 10px 15px; |
|
|
background-color: #f1f1f1; |
|
|
border: none; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.tab-button.active { |
|
|
background-color: #d1a054; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
|
|
|
.loader { |
|
|
border: 4px solid #f3f3f3; |
|
|
border-top: 4px solid #d1a054; |
|
|
border-radius: 50%; |
|
|
width: 30px; |
|
|
height: 30px; |
|
|
animation: spin 1s linear infinite; |
|
|
margin: 20px auto; |
|
|
} |
|
|
|
|
|
@keyframes spin { |
|
|
0% { transform: rotate(0deg); } |
|
|
100% { transform: rotate(360deg); } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
|
|
|
<div id="notification" class="notification"></div> |
|
|
|
|
|
|
|
|
<div id="admin-panel" class="admin-panel"> |
|
|
<button id="admin-login-btn" class="bg-amber-600 text-white px-3 py-1 rounded">Admin Login</button> |
|
|
<div id="admin-content" class="hidden mt-3 bg-white text-black p-4 rounded"> |
|
|
<div class="flex border-b"> |
|
|
<button class="tab-button active" onclick="openTab(event, 'products-tab')">Products</button> |
|
|
<button class="tab-button" onclick="openTab(event, 'collections-tab')">Collections</button> |
|
|
<button class="tab-button" onclick="openTab(event, 'orders-tab')">Orders</button> |
|
|
</div> |
|
|
|
|
|
<div id="products-tab" class="tab-content active"> |
|
|
<h3 class="font-bold my-2">Add New Product</h3> |
|
|
<form id="add-product-form"> |
|
|
<div class="form-group"> |
|
|
<label>Product Name</label> |
|
|
<input type="text" id="product-name" class="form-control" required> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label>Price (KSh)</label> |
|
|
<input type="number" id="product-price" class="form-control" required> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label>Image URL</label> |
|
|
<input type="url" id="product-image" class="form-control" required> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label>Category</label> |
|
|
<select id="product-category" class="form-control" required> |
|
|
<option value="dresses">Dresses</option> |
|
|
<option value="tops">Tops</option> |
|
|
<option value="skirts">Skirts</option> |
|
|
<option value="accessories">Accessories</option> |
|
|
</select> |
|
|
</div> |
|
|
<button type="submit" class="btn btn-block">Add Product</button> |
|
|
</form> |
|
|
|
|
|
<h3 class="font-bold my-2">Current Products</h3> |
|
|
<div id="products-list" class="space-y-2"> |
|
|
|
|
|
<div class="loader"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="collections-tab" class="tab-content"> |
|
|
<h3 class="font-bold my-2">Add New Collection</h3> |
|
|
<form id="add-collection-form"> |
|
|
<div class="form-group"> |
|
|
<label>Collection Name</label> |
|
|
<input type="text" id="collection-name" class="form-control" required> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label>Description</label> |
|
|
<textarea id="collection-desc" class="form-control" rows="2" required></textarea> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label>Image URL</label> |
|
|
<input type="url" id="collection-image" class="form-control" required> |
|
|
</div> |
|
|
<button type="submit" class="btn btn-block">Add Collection</button> |
|
|
</form> |
|
|
|
|
|
<h3 class="font-bold my-2">Current Collections</h3> |
|
|
<div id="collections-list" class="space-y-2"> |
|
|
|
|
|
<div class="loader"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="orders-tab" class="tab-content"> |
|
|
<h3 class="font-bold my-2">Recent Orders</h3> |
|
|
<div id="orders-list"> |
|
|
|
|
|
<div class="loader"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button id="admin-logout" class="btn btn-block mt-4 bg-red-600 hover:bg-red-700">Logout</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-black text-white text-sm py-2 px-4"> |
|
|
<div class="container mx-auto flex justify-between items-center"> |
|
|
<div class="flex space-x-4"> |
|
|
<span><i class="fas fa-phone-alt mr-1"></i> +254 712 345 678</span> |
|
|
<span><i class="fas fa-envelope mr-1"></i> info@newlifefashion.co.ke</span> |
|
|
</div> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="hover:text-amber-200"><i class="fab fa-facebook-f"></i></a> |
|
|
<a href="#" class="hover:text-amber-200"><i class="fab fa-instagram"></i></a> |
|
|
<a href="#" class="hover:text-amber-200"><i class="fab fa-twitter"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<nav class="bg-white shadow-md sticky top-0 z-50"> |
|
|
<div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
|
|
|
|
|
<div class="flex items-center"> |
|
|
<a href="#" class="flex items-center"> |
|
|
<i class="fas fa-tshirt text-3xl text-amber-600 mr-2"></i> |
|
|
<span class="heading-font text-2xl font-bold">New Life Fashion</span> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="hidden md:flex space-x-8"> |
|
|
<a href="#" class="nav-link font-medium">Home</a> |
|
|
<a href="#shop" class="nav-link font-medium">Shop</a> |
|
|
<a href="#collections" class="nav-link font-medium">Collections</a> |
|
|
<a href="#about" class="nav-link font-medium">About</a> |
|
|
<a href="#contact" class="nav-link font-medium">Contact</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="hidden md:flex items-center space-x-6"> |
|
|
<a href="#" class="hover:text-amber-600"><i class="fas fa-search"></i></a> |
|
|
<a href="#" id="user-icon" class="hover:text-amber-600"><i class="far fa-user"></i></a> |
|
|
<a href="#" id="cart-icon" class="hover:text-amber-600 relative"> |
|
|
<i class="fas fa-shopping-bag"></i> |
|
|
<span id="cart-count" class="cart-count">0</span> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<button id="mobile-menu-button" class="md:hidden text-gray-800 focus:outline-none"> |
|
|
<i class="fas fa-bars text-2xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="mobile-menu" class="mobile-menu md:hidden bg-white"> |
|
|
<div class="px-4 py-3 space-y-4"> |
|
|
<a href="#" class="block py-2 hover:text-amber-600">Home</a> |
|
|
<a href="#shop" class="block py-2 hover:text-amber-600">Shop</a> |
|
|
<a href="#collections" class="block py-2 hover:text-amber-600">Collections</a> |
|
|
<a href="#about" class="block py-2 hover:text-amber-600">About</a> |
|
|
<a href="#contact" class="block py-2 hover:text-amber-600">Contact</a> |
|
|
<div class="flex space-x-4 pt-2"> |
|
|
<a href="#" class="hover:text-amber-600"><i class="fas fa-search"></i></a> |
|
|
<a href="#" id="mobile-user-icon" class="hover:text-amber-600"><i class="far fa-user"></i></a> |
|
|
<a href="#" id="mobile-cart-icon" class="hover:text-amber-600 relative"> |
|
|
<i class="fas fa-shopping-bag"></i> |
|
|
<span id="mobile-cart-count" class="cart-count">0</span> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div id="login-modal" class="modal"> |
|
|
<div class="modal-content"> |
|
|
<span class="close">×</span> |
|
|
<h2 class="heading-font text-2xl font-bold mb-6 text-center">Login to Your Account</h2> |
|
|
<form id="login-form"> |
|
|
<div class="form-group"> |
|
|
<label for="login-email">Email</label> |
|
|
<input type="email" id="login-email" class="form-control" required> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label for="login-password">Password</label> |
|
|
<input type="password" id="login-password" class="form-control" required> |
|
|
</div> |
|
|
<button type="submit" class="btn btn-block">Login</button> |
|
|
<p class="text-center mt-4">Don't have an account? <a href="#" id="show-register" class="text-amber-600">Register here</a></p> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="register-modal" class="modal"> |
|
|
<div class="modal-content"> |
|
|
<span class="close">×</span> |
|
|
<h2 class="heading-font text-2xl font-bold mb-6 text-center">Create an Account</h2> |
|
|
<form id="register-form"> |
|
|
<div class="form-group"> |
|
|
<label for="register-name">Full Name</label> |
|
|
<input type="text" id="register-name" class="form-control" required> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label for="register-email">Email</label> |
|
|
<input type="email" id="register-email" class="form-control" required> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label for="register-password">Password</label> |
|
|
<input type="password" id="register-password" class="form-control" required> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label for="register-confirm">Confirm Password</label> |
|
|
<input type="password" id="register-confirm" class="form-control" required> |
|
|
</div> |
|
|
<button type="submit" class="btn btn-block">Register</button> |
|
|
<p class="text-center mt-4">Already have an account? <a href="#" id="show-login" class="text-amber-600">Login here</a></p> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="admin-login-modal" class="modal"> |
|
|
<div class="modal-content"> |
|
|
<span class="close">×</span> |
|
|
<h2 class="heading-font text-2xl font-bold mb-6 text-center">Admin Login</h2> |
|
|
<form id="admin-login-form"> |
|
|
<div class="form-group"> |
|
|
<label for="admin-email">Email</label> |
|
|
<input type="email" id="admin-email" class="form-control" required> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label for="admin-password">Password</label> |
|
|
<input type="password" id="admin-password" class="form-control" required> |
|
|
</div> |
|
|
<button type="submit" class="btn btn-block">Login</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="cart-modal" class="modal"> |
|
|
<div class="modal-content"> |
|
|
<span class="close">×</span> |
|
|
<h2 class="heading-font text-2xl font-bold mb-6">Your Shopping Cart</h2> |
|
|
<div id="cart-items" class="mb-4"> |
|
|
|
|
|
<p class="text-center py-8">Your cart is empty</p> |
|
|
</div> |
|
|
<div class="border-t pt-4"> |
|
|
<div class="flex justify-between mb-4"> |
|
|
<span class="font-bold">Subtotal:</span> |
|
|
<span id="cart-subtotal">KSh 0</span> |
|
|
</div> |
|
|
<button id="checkout-btn" class="btn btn-block">Proceed to Checkout</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="checkout-modal" class="modal"> |
|
|
<div class="modal-content"> |
|
|
<span class="close">×</span> |
|
|
<h2 class="heading-font text-2xl font-bold mb-6">Checkout</h2> |
|
|
<form id="checkout-form"> |
|
|
<div class="form-group"> |
|
|
<label for="checkout-name">Full Name</label> |
|
|
<input type="text" id="checkout-name" class="form-control" required> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label for="checkout-email">Email</label> |
|
|
<input type="email" id="checkout-email" class="form-control" required> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label for="checkout-phone">Phone Number</label> |
|
|
<input type="tel" id="checkout-phone" class="form-control" required> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label for="checkout-address">Delivery Address</label> |
|
|
<textarea id="checkout-address" class="form-control" rows="3" required></textarea> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label for="checkout-payment">Payment Method</label> |
|
|
<select id="checkout-payment" class="form-control" required> |
|
|
<option value="">Select payment method</option> |
|
|
<option value="mpesa">M-Pesa</option> |
|
|
<option value="card">Credit/Debit Card</option> |
|
|
<option value="cash">Cash on Delivery</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="border-t pt-4 mb-4"> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span>Subtotal:</span> |
|
|
<span id="checkout-subtotal">KSh 0</span> |
|
|
</div> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span>Delivery Fee:</span> |
|
|
<span>KSh 300</span> |
|
|
</div> |
|
|
<div class="flex justify-between font-bold text-lg"> |
|
|
<span>Total:</span> |
|
|
<span id="checkout-total">KSh 0</span> |
|
|
</div> |
|
|
</div> |
|
|
<button type="submit" class="btn btn-block">Place Order</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="confirmation-modal" class="modal"> |
|
|
<div class="modal-content"> |
|
|
<span class="close">×</span> |
|
|
<div class="text-center py-8"> |
|
|
<div class="text-green-500 text-5xl mb-4"> |
|
|
<i class="fas fa-check-circle"></i> |
|
|
</div> |
|
|
<h2 class="heading-font text-2xl font-bold mb-2">Order Confirmed!</h2> |
|
|
<p class="mb-6">Thank you for your purchase. Your order has been placed successfully.</p> |
|
|
<p class="font-bold mb-2">Order #<span id="order-number">12345</span></p> |
|
|
<p class="mb-6">We'll send you a confirmation email shortly.</p> |
|
|
<button id="continue-shopping" class="btn">Continue Shopping</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<section class="hero-image text-white py-20 md:py-32"> |
|
|
<div class="container mx-auto px-4 text-center"> |
|
|
<h1 class="heading-font text-4xl md:text-6xl font-bold mb-4">Elevate Your Style</h1> |
|
|
<p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">Discover Kenya's finest collection of ladies fashion at New Life Fashion in Ruiru</p> |
|
|
<a href="#shop" class="bg-amber-600 hover:bg-amber-700 text-white font-bold py-3 px-8 rounded-full inline-block transition duration-300">Shop Now</a> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-12 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="heading-font text-3xl font-bold text-center mb-12">Shop By Category</h2> |
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-6" id="categories-container"> |
|
|
|
|
|
<div class="loader"></div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="shop" class="py-16 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex justify-between items-center mb-12"> |
|
|
<h2 class="heading-font text-3xl font-bold">Featured Products</h2> |
|
|
<a href="#" class="text-amber-600 hover:text-amber-700 font-medium">View All <i class="fas fa-arrow-right ml-1"></i></a> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8" id="products-container"> |
|
|
|
|
|
<div class="loader"></div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="collections" class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="heading-font text-3xl font-bold text-center mb-12">Seasonal Collections</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12" id="collections-container"> |
|
|
|
|
|
<div class="loader"></div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center"> |
|
|
<a href="#" class="border-2 border-black hover:bg-black hover:text-white font-bold py-3 px-8 rounded-full inline-block transition duration-300">View All Collections</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="about" class="py-16 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> |
|
|
<img src="https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="About New Life Fashion" class="rounded-lg shadow-lg w-full"> |
|
|
</div> |
|
|
<div class="md:w-1/2"> |
|
|
<h2 class="heading-font text-3xl font-bold mb-6">Our Story</h2> |
|
|
<p class="text-gray-700 mb-4">Founded in 2015, New Life Fashion has grown from a small boutique in Ruiru to one of Nairobi's most beloved destinations for women's fashion. Our journey began with a simple mission: to provide high-quality, stylish clothing at affordable prices.</p> |
|
|
<p class="text-gray-700 mb-6">Today, we're proud to offer a carefully curated selection of clothing that combines international trends with African-inspired designs. Our team of fashion experts travels across the continent to source unique fabrics and designs that you won't find anywhere else.</p> |
|
|
<div class="grid grid-cols-2 gap-4 mb-6"> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-amber-100 rounded-full p-3 mr-3"> |
|
|
<i class="fas fa-check-circle text-amber-600"></i> |
|
|
</div> |
|
|
<span class="font-medium">Quality Materials</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-amber-100 rounded-full p-3 mr-3"> |
|
|
<i class="fas fa-check-circle text-amber-600"></i> |
|
|
</div> |
|
|
<span class="font-medium">Affordable Prices</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-amber-100 rounded-full p-3 mr-3"> |
|
|
<i class="fas fa-check-circle text-amber-600"></i> |
|
|
</div> |
|
|
<span class="font-medium">Unique Designs</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-amber-100 rounded-full p-3 mr-3"> |
|
|
<i class="fas fa-check-circle text-amber-600"></i> |
|
|
</div> |
|
|
<span class="font-medium">Ethical Sourcing</span> |
|
|
</div> |
|
|
</div> |
|
|
<a href="#" class="bg-amber-600 hover:bg-amber-700 text-white font-bold py-3 px-8 rounded-full inline-block transition duration-300">Learn More</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="heading-font 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="testimonial-card bg-gray-50 rounded-lg p-6"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="flex text-amber-400 mr-2"> |
|
|
<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> |
|
|
<span class="text-gray-500 text-sm">2 weeks ago</span> |
|
|
</div> |
|
|
<p class="text-gray-700 mb-4">"The African print dress I bought is absolutely stunning! I've received so many compliments. The quality is excellent and the fit is perfect."</p> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Grace M." class="w-10 h-10 rounded-full mr-3"> |
|
|
<div> |
|
|
<h4 class="font-bold">Grace M.</h4> |
|
|
<p class="text-gray-500 text-sm">Nairobi</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="testimonial-card bg-gray-50 rounded-lg p-6"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="flex text-amber-400 mr-2"> |
|
|
<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> |
|
|
<span class="text-gray-500 text-sm">1 month ago</span> |
|
|
</div> |
|
|
<p class="text-gray-700 mb-4">"I'm always impressed with the unique pieces at New Life Fashion. Their customer service is exceptional and they really understand style."</p> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah K." class="w-10 h-10 rounded-full mr-3"> |
|
|
<div> |
|
|
<h4 class="font-bold">Sarah K.</h4> |
|
|
<p class="text-gray-500 text-sm">Ruiru</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="testimonial-card bg-gray-50 rounded-lg p-6"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="flex text-amber-400 mr-2"> |
|
|
<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> |
|
|
<span class="text-gray-500 text-sm">3 days ago</span> |
|
|
</div> |
|
|
<p class="text-gray-700 mb-4">"The denim jacket I ordered fits perfectly and is such great quality. Delivery was fast and the packaging was beautiful. Will definitely shop here again!"</p> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Amina W." class="w-10 h-10 rounded-full mr-3"> |
|
|
<div> |
|
|
<h4 class="font-bold">Amina W.</h4> |
|
|
<p class="text-gray-500 text-sm">Thika</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-amber-600 text-white"> |
|
|
<div class="container mx-auto px-4 text-center"> |
|
|
<h2 class="heading-font text-3xl font-bold mb-4">Join Our Newsletter</h2> |
|
|
<p class="text-xl mb-8 max-w-2xl mx-auto">Subscribe to get updates on new arrivals, special offers and fashion tips</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-lg focus:outline-none text-gray-900"> |
|
|
<button type="submit" class="bg-black hover:bg-gray-900 px-6 py-3 rounded-r-lg font-bold transition duration-300">Subscribe</button> |
|
|
</form> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-16 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="heading-font text-3xl font-bold text-center mb-12">Visit Us</h2> |
|
|
|
|
|
<div class="flex flex-col md:flex-row"> |
|
|
<div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> |
|
|
<div class="bg-white p-6 rounded-lg shadow-md h-full"> |
|
|
<h3 class="text-xl font-bold mb-4">Our Location</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-start"> |
|
|
<i class="fas fa-map-marker-alt text-amber-600 mt-1 mr-3"></i> |
|
|
<div> |
|
|
<h4 class="font-bold">Address</h4> |
|
|
<p class="text-gray-700">123 Fashion Street, Ruiru<br>Nairobi, Kenya</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<i class="fas fa-phone-alt text-amber-600 mt-1 mr-3"></i> |
|
|
<div> |
|
|
<h4 class="font-bold">Phone</h4> |
|
|
<p class="text-gray-700">+254 712 345 678</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<i class="fas fa-envelope text-amber-600 mt-1 mr-3"></i> |
|
|
<div> |
|
|
<h4 class="font-bold">Email</h4> |
|
|
<p class="text-gray-700">info@newlifefashion.co.ke</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<i class="fas fa-clock text-amber-600 mt-1 mr-3"></i> |
|
|
<div> |
|
|
<h4 class="font-bold">Opening Hours</h4> |
|
|
<p class="text-gray-700">Monday - Friday: 9:00 AM - 6:00 PM<br>Saturday: 9:00 AM - 4:00 PM<br>Sunday: Closed</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="md:w-1/2"> |
|
|
<div class="bg-white p-6 rounded-lg shadow-md h-full"> |
|
|
<h3 class="text-xl font-bold mb-4">Send Us a Message</h3> |
|
|
<form> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> |
|
|
<div> |
|
|
<label for="name" class="block text-gray-700 mb-1">Name</label> |
|
|
<input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="email" class="block text-gray-700 mb-1">Email</label> |
|
|
<input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label for="subject" class="block text-gray-700 mb-1">Subject</label> |
|
|
<input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500"> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label for="message" class="block text-gray-700 mb-1">Message</label> |
|
|
<textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500"></textarea> |
|
|
</div> |
|
|
<button type="submit" class="bg-amber-600 hover:bg-amber-700 text-white font-bold py-2 px-6 rounded-lg transition duration-300">Send Message</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-black text-white py-12"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> |
|
|
<div> |
|
|
<a href="#" class="flex items-center mb-4"> |
|
|
<i class="fas fa-tshirt text-3xl text-amber-600 mr-2"></i> |
|
|
<span class="heading-font text-2xl font-bold">New Life Fashion</span> |
|
|
</a> |
|
|
<p class="text-gray-400">Your premier destination for stylish ladies fashion in Nairobi, Kenya.</p> |
|
|
<div class="flex space-x-4 mt-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-amber-400"><i class="fab fa-facebook-f"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-amber-400"><i class="fab fa-instagram"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-amber-400"><i class="fab fa-twitter"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-amber-400"><i class="fab fa-pinterest"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-bold mb-4">Quick Links</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-amber-400">Home</a></li> |
|
|
<li><a href="#shop" class="text-gray-400 hover:text-amber-400">Shop</a></li> |
|
|
<li><a href="#collections" class="text-gray-400 hover:text-amber-400">Collections</a></li> |
|
|
<li><a href="#about" class="text-gray-400 hover:text-amber-400">About Us</a></li> |
|
|
<li><a href="#contact" class="text-gray-400 hover:text-amber-400">Contact</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-bold mb-4">Customer Service</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-amber-400">My Account</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-amber-400">Order Tracking</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-amber-400">Wishlist</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-amber-400">Shipping Policy</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-amber-400">Returns & Exchanges</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-bold mb-4">Contact Info</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-map-marker-alt text-amber-400 mt-1 mr-3"></i> |
|
|
<span class="text-gray-400">123 Fashion Street, Ruiru, Nairobi</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-phone-alt text-amber-400 mt-1 mr-3"></i> |
|
|
<span class="text-gray-400">+254 712 345 678</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-envelope text-amber-400 mt-1 mr-3"></i> |
|
|
<span class="text-gray-400">info@newlifefashion.co.ke</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-800 pt-8"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<p class="text-gray-400 mb-4 md:mb-0">© 2023 New Life Fashion. All rights reserved.</p> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="text-gray-400 hover:text-amber-400">Privacy Policy</a> |
|
|
<a href="#" class="text-gray-400 hover:text-amber-400">Terms of Service</a> |
|
|
<a href="#" class="text-gray-400 hover:text-amber-400">Sitemap</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<button id="back-to-top" class="fixed bottom-8 right-8 bg-amber-600 text-white rounded-full w-12 h-12 flex items-center justify-center shadow-lg hover:bg-amber-700 transition duration-300 hidden"> |
|
|
<i class="fas fa-arrow-up"></i> |
|
|
</button> |
|
|
|
|
|
<script> |
|
|
|
|
|
if (!localStorage.getItem('cart')) { |
|
|
localStorage.setItem('cart', JSON.stringify([])); |
|
|
} |
|
|
|
|
|
if (!localStorage.getItem('users')) { |
|
|
localStorage.setItem('users', JSON.stringify([])); |
|
|
} |
|
|
|
|
|
if (!localStorage.getItem('orders')) { |
|
|
localStorage.setItem('orders', JSON.stringify([])); |
|
|
} |
|
|
|
|
|
if (!localStorage.getItem('products')) { |
|
|
|
|
|
const defaultProducts = [ |
|
|
{ |
|
|
id: "1", |
|
|
name: "African Print Maxi Dress", |
|
|
price: 2499, |
|
|
image: "https://images.unsplash.com/photo-1572804013309-59a88b7e92f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=746&q=80", |
|
|
category: "dresses" |
|
|
}, |
|
|
{ |
|
|
id: "2", |
|
|
name: "Classic Denim Jacket", |
|
|
price: 1899, |
|
|
image: "https://images.unsplash.com/photo-1585487000160-6ebcfceb0d03?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=736&q=80", |
|
|
category: "tops" |
|
|
}, |
|
|
{ |
|
|
id: "3", |
|
|
name: "Floral Midi Skirt", |
|
|
price: 1299, |
|
|
image: "https://images.unsplash.com/photo-1595341595379-cf2a3d574a3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1473&q=80", |
|
|
category: "skirts" |
|
|
}, |
|
|
{ |
|
|
id: "4", |
|
|
name: "Elegant Silk Blouse", |
|
|
price: 2199, |
|
|
image: "https://images.unsplash.com/photo-1520367445093-50dc08a59d9d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80", |
|
|
category: "tops" |
|
|
} |
|
|
]; |
|
|
localStorage.setItem('products', JSON.stringify(defaultProducts)); |
|
|
} |
|
|
|
|
|
if (!localStorage.getItem('collections')) { |
|
|
|
|
|
const defaultCollections = [ |
|
|
{ |
|
|
id: "1", |
|
|
name: "Summer Vibes", |
|
|
description: "Bright colors and lightweight fabrics for the sunny season", |
|
|
image: "https://images.unsplash.com/photo-1551232864-3f0890e580d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" |
|
|
}, |
|
|
{ |
|
|
id: "2", |
|
|
name: "Winter Essentials", |
|
|
description: "Cozy layers and warm fabrics to keep you stylish in the cold", |
|
|
image: "https://images.unsplash.com/photo-1585487000160-6ebcfceb0d03?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=736&q=80" |
|
|
} |
|
|
]; |
|
|
localStorage.setItem('collections', JSON.stringify(defaultCollections)); |
|
|
} |
|
|
|
|
|
if (!localStorage.getItem('categories')) { |
|
|
|
|
|
const defaultCategories = [ |
|
|
{ |
|
|
name: "Dresses", |
|
|
image: "https://images.unsplash.com/photo-1551232864-3f0890e580d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" |
|
|
}, |
|
|
{ |
|
|
name: "Tops", |
|
|
image: "https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=736&q=80" |
|
|
}, |
|
|
{ |
|
|
name: "Skirts", |
|
|
image: "https://images.unsplash.com/photo-1595341888016-a392ef81b7de?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1479&q=80" |
|
|
}, |
|
|
{ |
|
|
name: "Accessories", |
|
|
image: "https://images.unsplash.com/photo-1525507119028-ed4c629a60a3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=735&q=80" |
|
|
} |
|
|
]; |
|
|
localStorage.setItem('categories', JSON.stringify(defaultCategories)); |
|
|
} |
|
|
|
|
|
|
|
|
const ADMIN_EMAIL = "admin@newlifefashion.com"; |
|
|
const ADMIN_PASSWORD = "admin123"; |
|
|
|
|
|
|
|
|
updateCartCount(); |
|
|
|
|
|
|
|
|
loadCategories(); |
|
|
loadProducts(); |
|
|
loadCollections(); |
|
|
|
|
|
|
|
|
const mobileMenuButton = document.getElementById('mobile-menu-button'); |
|
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
|
|
|
mobileMenuButton.addEventListener('click', () => { |
|
|
mobileMenu.classList.toggle('open'); |
|
|
const icon = mobileMenuButton.querySelector('i'); |
|
|
if (mobileMenu.classList.contains('open')) { |
|
|
icon.classList.remove('fa-bars'); |
|
|
icon.classList.add('fa-times'); |
|
|
} else { |
|
|
icon.classList.remove('fa-times'); |
|
|
icon.classList.add('fa-bars'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const backToTopButton = document.getElementById('back-to-top'); |
|
|
|
|
|
window.addEventListener('scroll', () => { |
|
|
if (window.pageYOffset > 300) { |
|
|
backToTopButton.classList.remove('hidden'); |
|
|
} else { |
|
|
backToTopButton.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
|
|
|
backToTopButton.addEventListener('click', () => { |
|
|
window.scrollTo({ top: 0, behavior: 'smooth' }); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function(e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
const targetId = this.getAttribute('href'); |
|
|
if (targetId === '#') return; |
|
|
|
|
|
const targetElement = document.querySelector(targetId); |
|
|
if (targetElement) { |
|
|
targetElement.scrollIntoView({ |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
|
|
|
|
|
|
if (mobileMenu.classList.contains('open')) { |
|
|
mobileMenu.classList.remove('open'); |
|
|
const icon = mobileMenuButton.querySelector('i'); |
|
|
icon.classList.remove('fa-times'); |
|
|
icon.classList.add('fa-bars'); |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const loginModal = document.getElementById('login-modal'); |
|
|
const registerModal = document.getElementById('register-modal'); |
|
|
const adminLoginModal = document.getElementById('admin-login-modal'); |
|
|
const cartModal = document.getElementById('cart-modal'); |
|
|
const checkoutModal = document.getElementById('checkout-modal'); |
|
|
const confirmationModal = document.getElementById('confirmation-modal'); |
|
|
|
|
|
const userIcon = document.getElementById('user-icon'); |
|
|
const mobileUserIcon = document.getElementById('mobile-user-icon'); |
|
|
const cartIcon = document.getElementById('cart-icon'); |
|
|
const mobileCartIcon = document.getElementById('mobile-cart-icon'); |
|
|
const checkoutBtn = document.getElementById('checkout-btn'); |
|
|
const continueShoppingBtn = document.getElementById('continue-shopping'); |
|
|
const adminLoginBtn = document.getElementById('admin-login-btn'); |
|
|
const adminLogoutBtn = document.getElementById('admin-logout'); |
|
|
|
|
|
const showLogin = document.getElementById('show-login'); |
|
|
const showRegister = document.getElementById('show-register'); |
|
|
|
|
|
const closeButtons = document.querySelectorAll('.close'); |
|
|
|
|
|
|
|
|
userIcon.addEventListener('click', (e) => { |
|
|
e.preventDefault(); |
|
|
loginModal.style.display = 'block'; |
|
|
}); |
|
|
|
|
|
mobileUserIcon.addEventListener('click', (e) => { |
|
|
e.preventDefault(); |
|
|
loginModal.style.display = 'block'; |
|
|
}); |
|
|
|
|
|
cartIcon.addEventListener('click', (e) => { |
|
|
e.preventDefault(); |
|
|
updateCartModal(); |
|
|
cartModal.style.display = 'block'; |
|
|
}); |
|
|
|
|
|
mobileCartIcon.addEventListener('click', (e) => { |
|
|
e.preventDefault(); |
|
|
updateCartModal(); |
|
|
cartModal.style.display = 'block'; |
|
|
}); |
|
|
|
|
|
checkoutBtn.addEventListener('click', (e) => { |
|
|
e.preventDefault(); |
|
|
cartModal.style.display = 'none'; |
|
|
updateCheckoutModal(); |
|
|
checkoutModal.style.display = 'block'; |
|
|
}); |
|
|
|
|
|
continueShoppingBtn.addEventListener('click', (e) => { |
|
|
e.preventDefault(); |
|
|
confirmationModal.style.display = 'none'; |
|
|
}); |
|
|
|
|
|
adminLoginBtn.addEventListener('click', (e) => { |
|
|
e.preventDefault(); |
|
|
adminLoginModal.style.display = 'block'; |
|
|
}); |
|
|
|
|
|
adminLogoutBtn.addEventListener('click', (e) => { |
|
|
e.preventDefault(); |
|
|
sessionStorage.removeItem('adminLoggedIn'); |
|
|
document.getElementById('admin-content').classList.add('hidden'); |
|
|
showNotification('Admin logged out successfully'); |
|
|
}); |
|
|
|
|
|
showLogin.addEventListener('click', (e) => { |
|
|
e.preventDefault(); |
|
|
registerModal.style.display = 'none'; |
|
|
loginModal.style.display = 'block'; |
|
|
}); |
|
|
|
|
|
showRegister.addEventListener('click', (e) => { |
|
|
e.preventDefault(); |
|
|
loginModal.style.display = 'none'; |
|
|
registerModal.style.display = 'block'; |
|
|
}); |
|
|
|
|
|
|
|
|
closeButtons.forEach(button => { |
|
|
button.addEventListener('click', () => { |
|
|
loginModal.style.display = 'none'; |
|
|
registerModal.style.display = 'none'; |
|
|
adminLoginModal.style.display = 'none'; |
|
|
cartModal.style.display = 'none'; |
|
|
checkoutModal.style.display = 'none'; |
|
|
confirmationModal.style.display = 'none'; |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
window.addEventListener('click', (e) => { |
|
|
if (e.target === loginModal) { |
|
|
loginModal.style.display = 'none'; |
|
|
} |
|
|
if (e.target === registerModal) { |
|
|
registerModal.style.display = 'none'; |
|
|
} |
|
|
if (e.target === adminLoginModal) { |
|
|
adminLoginModal.style.display = 'none'; |
|
|
} |
|
|
if (e.target === cartModal) { |
|
|
cartModal.style.display = 'none'; |
|
|
} |
|
|
if (e.target === checkoutModal) { |
|
|
checkoutModal.style.display = 'none'; |
|
|
} |
|
|
if (e.target === confirmationModal) { |
|
|
confirmationModal.style.display = 'none'; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('admin-login-form').addEventListener('submit', (e) => { |
|
|
e.preventDefault(); |
|
|
|
|
|
const email = document.getElementById('admin-email').value; |
|
|
const password = document.getElementById('admin-password').value; |
|
|
|
|
|
if (email === ADMIN_EMAIL && password === ADMIN_PASSWORD) { |
|
|
sessionStorage.setItem('adminLoggedIn', 'true'); |
|
|
adminLoginModal.style.display = 'none'; |
|
|
document.getElementById('admin-content').classList.remove('hidden'); |
|
|
showNotification('Admin login successful'); |
|
|
} else { |
|
|
alert('Invalid admin credentials'); |
|
|
} |
|
|
|
|
|
document.getElementById('admin-login-form').reset(); |
|
|
}); |
|
|
|
|
|
|
|
|
if (sessionStorage.getItem('adminLoggedIn') === 'true') { |
|
|
document.getElementById('admin-content').classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('register-form').addEventListener('submit', (e) => { |
|
|
e.preventDefault(); |
|
|
|
|
|
const name = document.getElementById('register-name').value; |
|
|
const email = document.getElementById('register-email').value; |
|
|
const password = document.getElementById('register-password').value; |
|
|
const confirm = document.getElementById('register-confirm').value; |
|
|
|
|
|
if (password !== confirm) { |
|
|
showNotification('Passwords do not match!', 'error'); |
|
|
return; |
|
|
} |
|
|
|
|
|
const users = JSON.parse(localStorage.getItem('users')); |
|
|
|
|
|
|
|
|
if (users.find(user => user.email === email)) { |
|
|
showNotification('User with this email already exists!', 'error'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
users.push({ name, email, password }); |
|
|
localStorage.setItem('users', JSON.stringify(users)); |
|
|
|
|
|
showNotification('Registration successful! Please login.'); |
|
|
registerModal.style.display = 'none'; |
|
|
loginModal.style.display = 'block'; |
|
|
|
|
|
|
|
|
document.getElementById('register-form').reset(); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('login-form').addEventListener('submit', (e) => { |
|
|
e.preventDefault(); |
|
|
|
|
|
const email = document.getElementById('login-email').value; |
|
|
const password = document.getElementById('login-password').value; |
|
|
|
|
|
const users = JSON.parse(localStorage.getItem('users')); |
|
|
const user = users.find(user => user.email === email && user.password === password); |
|
|
|
|
|
if (user) { |
|
|
|
|
|
sessionStorage.setItem('currentUser', JSON.stringify(user)); |
|
|
|
|
|
showNotification(`Welcome back, ${user.name}!`); |
|
|
loginModal.style.display = 'none'; |
|
|
|
|
|
|
|
|
updateUserIcon(); |
|
|
} else { |
|
|
showNotification('Invalid email or password!', 'error'); |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('login-form').reset(); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('checkout-form').addEventListener('submit', (e) => { |
|
|
e.preventDefault(); |
|
|
|
|
|
const name = document.getElementById('checkout-name').value; |
|
|
const email = document.getElementById('checkout-email').value; |
|
|
const phone = document.getElementById('checkout-phone').value; |
|
|
const address = document.getElementById('checkout-address').value; |
|
|
const payment = document.getElementById('checkout-payment').value; |
|
|
|
|
|
const cart = JSON.parse(localStorage.getItem('cart')); |
|
|
const subtotal = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0); |
|
|
const total = subtotal + 300; |
|
|
|
|
|
|
|
|
const order = { |
|
|
id: Date.now().toString(), |
|
|
date: new Date().toISOString(), |
|
|
customer: { name, email, phone, address }, |
|
|
paymentMethod: payment, |
|
|
items: cart, |
|
|
subtotal, |
|
|
delivery: 300, |
|
|
total, |
|
|
status: 'Processing' |
|
|
}; |
|
|
|
|
|
|
|
|
const orders = JSON.parse(localStorage.getItem('orders')); |
|
|
orders.push(order); |
|
|
localStorage.setItem('orders', JSON.stringify(orders)); |
|
|
|
|
|
|
|
|
localStorage.setItem('cart', JSON.stringify([])); |
|
|
updateCartCount(); |
|
|
|
|
|
|
|
|
checkoutModal.style.display = 'none'; |
|
|
document.getElementById('order-number').textContent = order.id; |
|
|
confirmationModal.style.display = 'block'; |
|
|
|
|
|
|
|
|
document.getElementById('checkout-form').reset(); |
|
|
|
|
|
|
|
|
if (sessionStorage.getItem('adminLoggedIn') === 'true') { |
|
|
showNotification('New order received!', 'success'); |
|
|
loadOrders(); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('add-product-form').addEventListener('submit', (e) => { |
|
|
e.preventDefault(); |
|
|
|
|
|
const name = document.getElementById('product-name').value; |
|
|
const price = parseInt(document.getElementById('product-price').value); |
|
|
const image = document.getElementById('product-image').value; |
|
|
const category = document.getElementById('product-category').value; |
|
|
|
|
|
const newProduct = { |
|
|
id: Date.now().toString(), |
|
|
name, |
|
|
price, |
|
|
image, |
|
|
category |
|
|
}; |
|
|
|
|
|
|
|
|
const products = JSON.parse(localStorage.getItem('products')); |
|
|
products.push(newProduct); |
|
|
localStorage.setItem('products', JSON.stringify(products)); |
|
|
|
|
|
showNotification('Product added successfully!'); |
|
|
document.getElementById('add-product-form').reset(); |
|
|
loadProducts(); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('add-collection-form').addEventListener('submit', (e) => { |
|
|
e.preventDefault(); |
|
|
|
|
|
const name = document.getElementById('collection-name').value; |
|
|
const description = document.getElementById('collection-desc').value; |
|
|
const image = document.getElementById('collection-image').value; |
|
|
|
|
|
const newCollection = { |
|
|
id: Date.now().toString(), |
|
|
name, |
|
|
description, |
|
|
image |
|
|
}; |
|
|
|
|
|
|
|
|
const collections = JSON.parse(localStorage.getItem('collections')); |
|
|
collections.push(newCollection); |
|
|
localStorage.setItem('collections', JSON.stringify(collections)); |
|
|
|
|
|
showNotification('Collection added successfully!'); |
|
|
document.getElementById('add-collection-form').reset(); |
|
|
loadCollections(); |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('click', function(e) { |
|
|
if (e.target && e.target.closest('.add-to-cart')) { |
|
|
e.preventDefault(); |
|
|
const button = e.target.closest('.add-to-cart'); |
|
|
|
|
|
const product = { |
|
|
id: button.getAttribute('data-id'), |
|
|
name: button.getAttribute('data-name'), |
|
|
price: parseInt(button.getAttribute('data-price')), |
|
|
image: button.getAttribute('data-image'), |
|
|
quantity: 1 |
|
|
}; |
|
|
|
|
|
addToCart(product); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
function addToCart(product) { |
|
|
const cart = JSON.parse(localStorage.getItem('cart')); |
|
|
|
|
|
|
|
|
const existingItem = cart.find(item => item.id === product.id); |
|
|
|
|
|
if (existingItem) { |
|
|
existingItem.quantity += 1; |
|
|
} else { |
|
|
cart.push(product); |
|
|
} |
|
|
|
|
|
localStorage.setItem('cart', JSON.stringify(cart)); |
|
|
updateCartCount(); |
|
|
|
|
|
|
|
|
showNotification(`${product.name} added to cart!`); |
|
|
} |
|
|
|
|
|
|
|
|
function updateCartCount() { |
|
|
const cart = JSON.parse(localStorage.getItem('cart')); |
|
|
const count = cart.reduce((sum, item) => sum + item.quantity, 0); |
|
|
|
|
|
document.getElementById('cart-count').textContent = count; |
|
|
document.getElementById('mobile-cart-count').textContent = count; |
|
|
} |
|
|
|
|
|
|
|
|
function updateCartModal() { |
|
|
const cart = JSON.parse(localStorage.getItem('cart')); |
|
|
const cartItems = document.getElementById('cart-items'); |
|
|
const subtotal = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0); |
|
|
|
|
|
document.getElementById('cart-subtotal').textContent = `KSh ${subtotal.toLocaleString()}`; |
|
|
|
|
|
if (cart.length === 0) { |
|
|
cartItems.innerHTML = '<p class="text-center py-8">Your cart is empty</p>'; |
|
|
return; |
|
|
} |
|
|
|
|
|
let html = ''; |
|
|
cart.forEach(item => { |
|
|
html += ` |
|
|
<div class="flex items-center py-4 border-b"> |
|
|
<div class="w-20 h-20 bg-gray-100 rounded overflow-hidden mr-4"> |
|
|
<img src="${item.image}" alt="${item.name}" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="flex-grow"> |
|
|
<h4 class="font-medium">${item.name}</h4> |
|
|
<div class="flex justify-between items-center mt-1"> |
|
|
<span>KSh ${item.price.toLocaleString()}</span> |
|
|
<div class="flex items-center"> |
|
|
<button class="decrease-quantity px-2 py-1 border rounded-l" data-id="${item.id}">-</button> |
|
|
<span class="px-3 py-1 border-t border-b">${item.quantity}</span> |
|
|
<button class="increase-quantity px-2 py-1 border rounded-r" data-id="${item.id}">+</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<button class="remove-item ml-4 text-red-500" data-id="${item.id}"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
`; |
|
|
}); |
|
|
|
|
|
cartItems.innerHTML = html; |
|
|
|
|
|
|
|
|
document.querySelectorAll('.increase-quantity').forEach(button => { |
|
|
button.addEventListener('click', () => { |
|
|
const id = button.getAttribute('data-id'); |
|
|
updateQuantity(id, 1); |
|
|
}); |
|
|
}); |
|
|
|
|
|
document.querySelectorAll('.decrease-quantity').forEach(button => { |
|
|
button.addEventListener('click', () => { |
|
|
const id = button.getAttribute('data-id'); |
|
|
updateQuantity(id, -1); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.remove-item').forEach(button => { |
|
|
button.addEventListener('click', () => { |
|
|
const id = button.getAttribute('data-id'); |
|
|
removeItem(id); |
|
|
}); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function updateQuantity(id, change) { |
|
|
const cart = JSON.parse(localStorage.getItem('cart')); |
|
|
const item = cart.find(item => item.id === id); |
|
|
|
|
|
if (item) { |
|
|
item.quantity += change; |
|
|
|
|
|
|
|
|
if (item.quantity <= 0) { |
|
|
cart.splice(cart.indexOf(item), 1); |
|
|
} |
|
|
|
|
|
localStorage.setItem('cart', JSON.stringify(cart)); |
|
|
updateCartCount(); |
|
|
updateCartModal(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function removeItem(id) { |
|
|
const cart = JSON.parse(localStorage.getItem('cart')); |
|
|
const itemIndex = cart.findIndex(item => item.id === id); |
|
|
|
|
|
if (itemIndex !== -1) { |
|
|
cart.splice(itemIndex, 1); |
|
|
localStorage.setItem('cart', JSON.stringify(cart)); |
|
|
updateCartCount(); |
|
|
updateCartModal(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function updateCheckoutModal() { |
|
|
const cart = JSON.parse(localStorage.getItem('cart')); |
|
|
const subtotal = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0); |
|
|
const total = subtotal + 300; |
|
|
|
|
|
document.getElementById('checkout-subtotal').textContent = `KSh ${subtotal.toLocaleString()}`; |
|
|
document.getElementById('checkout-total').textContent = `KSh ${total.toLocaleString()}`; |
|
|
|
|
|
|
|
|
const currentUser = JSON.parse(sessionStorage.getItem('currentUser')); |
|
|
if (currentUser) { |
|
|
document.getElementById('checkout-name').value = currentUser.name; |
|
|
document.getElementById('checkout-email').value = currentUser.email; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function updateUserIcon() { |
|
|
const currentUser = JSON.parse(sessionStorage.getItem('currentUser')); |
|
|
const userIcon = document.getElementById('user-icon'); |
|
|
const mobileUserIcon = document.getElementById('mobile-user-icon'); |
|
|
|
|
|
if (currentUser) { |
|
|
userIcon.innerHTML = `<i class="fas fa-user-check"></i>`; |
|
|
mobileUserIcon.innerHTML = `<i class="fas fa-user-check"></i>`; |
|
|
} else { |
|
|
userIcon.innerHTML = `<i class="far fa-user"></i>`; |
|
|
mobileUserIcon.innerHTML = `<i class="far fa-user"></i>`; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function showNotification(message, type = 'success') { |
|
|
const notification = document.getElementById('notification'); |
|
|
notification.textContent = message; |
|
|
notification.style.display = 'block'; |
|
|
|
|
|
|
|
|
if (type === 'error') { |
|
|
notification.style.backgroundColor = '#dc3545'; |
|
|
} else if (type === 'success') { |
|
|
notification.style.backgroundColor = '#4CAF50'; |
|
|
} else { |
|
|
notification.style.backgroundColor = '#333'; |
|
|
} |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
notification.style.display = 'none'; |
|
|
}, 3000); |
|
|
} |
|
|
|
|
|
|
|
|
function loadCategories() { |
|
|
const categoriesContainer = document.getElementById('categories-container'); |
|
|
const categories = JSON.parse(localStorage.getItem('categories')); |
|
|
|
|
|
let html = ''; |
|
|
categories.forEach(category => { |
|
|
html += ` |
|
|
<a href="#" class="group relative overflow-hidden rounded-lg shadow-md"> |
|
|
<img src="${category.image}" alt="${category.name}" class="w-full h-48 md:h-64 object-cover group-hover:opacity-90 transition duration-300"> |
|
|
<div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center"> |
|
|
<h3 class="text-white text-xl font-bold">${category.name}</h3> |
|
|
</div> |
|
|
</a> |
|
|
`; |
|
|
}); |
|
|
|
|
|
categoriesContainer.innerHTML = html; |
|
|
} |
|
|
|
|
|
|
|
|
function loadProducts() { |
|
|
const productsContainer = document.getElementById('products-container'); |
|
|
const products = JSON.parse(localStorage.getItem('products')); |
|
|
|
|
|
let html = ''; |
|
|
products.forEach(product => { |
|
|
html += ` |
|
|
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition duration-300"> |
|
|
<div class="relative overflow-hidden"> |
|
|
<img src="${product.image}" alt="${product.name}" class="product-image w-full h-64 object-cover"> |
|
|
<div class="absolute top-3 right-3"> |
|
|
<span class="bg-amber-600 text-white text-xs font-bold px-2 py-1 rounded-full">NEW</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-semibold text-lg mb-1">${product.name}</h3> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="flex text-amber-400"> |
|
|
<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> |
|
|
<span class="text-gray-600 text-sm ml-2">(24)</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="font-bold text-lg">KSh ${product.price.toLocaleString()}</span> |
|
|
<button class="add-to-cart bg-amber-600 hover:bg-amber-700 text-white rounded-full w-10 h-10 flex items-center justify-center" |
|
|
data-id="${product.id}" |
|
|
data-name="${product.name}" |
|
|
data-price="${product.price}" |
|
|
data-image="${product.image}"> |
|
|
<i class="fas fa-shopping-cart"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
}); |
|
|
|
|
|
productsContainer.innerHTML = html; |
|
|
} |
|
|
|
|
|
|
|
|
function loadCollections() { |
|
|
const collectionsContainer = document.getElementById('collections-container'); |
|
|
const collections = JSON.parse(localStorage.getItem('collections')); |
|
|
|
|
|
let html = ''; |
|
|
collections.forEach |
|
|
</html> |
