Hugging Face's logo

Spaces:
Jacky-9
/
batchana
Running

App Files Community
batchana / index.html
Jacky-9's picture
Jacky-9
ajoute une page nomé admin ou l'administrateur peut ajouter ou modifier des articles - Initial Deployment
5baf44a verified
raw
history blame contribute delete
68.4 kB
 <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Abdoul Shop - Votre boutique en ligne</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>
/* Custom CSS */
.hero {
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1555529669-e69e7aa0ba9a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1600&q=80');
background-size: cover;
background-position: center;
}
.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.transition-all {
transition: all 0.3s ease;
}
.page {
display: none;
}
.page.active {
display: block;
animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.cart-panel {
transform: translateX(100%);
transition: transform 0.3s ease;
}
.cart-panel.open {
transform: translateX(0);
}
</style>
</head>
<body class="font-sans bg-gray-50">
<!-- Header -->
<header 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="#" onclick="showPage('home')" class="text-2xl font-bold text-indigo-600">Abdoul Shop</a>
</div>
<nav class="hidden md:flex space-x-8">
<a href="#" onclick="showPage('home')" class="text-gray-700 hover:text-indigo-600 transition-all">Accueil</a>
<a href="#" onclick="showPage('shop')" class="text-gray-700 hover:text-indigo-600 transition-all">Boutique</a>
<a href="#" onclick="showPage('about')" class="text-gray-700 hover:text-indigo-600 transition-all">À propos</a>
<a href="#" onclick="showPage('contact')" class="text-gray-700 hover:text-indigo-600 transition-all">Contact</a>
</nav>
<div class="flex items-center space-x-4">
<button onclick="toggleCart()" class="relative text-gray-700 hover:text-indigo-600">
<i class="fas fa-shopping-cart text-xl"></i>
<span id="cart-count" class="absolute -top-2 -right-2 bg-indigo-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span>
</button>
<button class="md:hidden text-gray-700" onclick="toggleMobileMenu()">
<i class="fas fa-bars text-xl"></i>
</button>
</div>
</div>
<!-- Mobile Menu -->
<div id="mobile-menu" class="md:hidden hidden bg-white py-2 px-4 shadow-lg">
<a href="#" onclick="showPage('home')" class="block py-2 text-gray-700 hover:text-indigo-600">Accueil</a>
<a href="#" onclick="showPage('shop')" class="block py-2 text-gray-700 hover:text-indigo-600">Boutique</a>
<a href="#" onclick="showPage('about')" class="block py-2 text-gray-700 hover:text-indigo-600">À propos</a>
<a href="#" onclick="showPage('contact')" class="block py-2 text-gray-700 hover:text-indigo-600">Contact</a>
</div>
</header>
<!-- Cart Panel -->
<div id="cart-panel" class="cart-panel fixed top-0 right-0 h-full w-full md:w-96 bg-white shadow-lg z-50 overflow-y-auto">
<div class="p-4">
<div class="flex justify-between items-center border-b pb-3">
<h3 class="text-xl font-bold">Votre Panier</h3>
<button onclick="toggleCart()" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<div id="cart-items" class="py-4">
<!-- Cart items will be added here dynamically -->
<p class="text-gray-500 text-center py-8">Votre panier est vide</p>
</div>
<div class="border-t pt-4">
<div class="flex justify-between mb-4">
<span class="font-semibold">Total:</span>
<span id="cart-total" class="font-bold">0 FCFA</span>
</div>
<button class="w-full bg-indigo-600 text-white py-2 rounded hover:bg-indigo-700 transition-all">
Passer la commande
</button>
</div>
</div>
</div>
<!-- Overlay -->
<div id="overlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden" onclick="toggleCart()"></div>
<!-- Main Content -->
<main>
<!-- Home Page -->
<div id="home-page" class="page active">
<!-- Hero Section -->
<section class="hero text-white py-20 md:py-32">
<div class="container mx-auto px-4 text-center">
<h1 class="text-4xl md:text-6xl font-bold mb-6">Bienvenue chez Abdoul Shop</h1>
<p class="text-xl md:text-2xl mb-8">Découvrez notre sélection exclusive d'articles de qualité</p>
<a href="#" onclick="showPage('shop')" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-8 rounded-full inline-block transition-all">
Voir la boutique
</a>
</div>
</section>
<!-- Featured Categories -->
<section class="py-16 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">Nos Catégories</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-gray-100 rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-all">
<img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Électronique" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="text-xl font-semibold mb-2">Électronique</h3>
<p class="text-gray-600 mb-4">Découvrez nos derniers gadgets électroniques</p>
<a href="#" onclick="showPage('shop')" class="text-indigo-600 font-medium hover:text-indigo-800">Voir les produits</a>
</div>
</div>
<div class="bg-gray-100 rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-all">
<img src="https://images.unsplash.com/photo-1490114538077-0a7f8cb49891?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Mode" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="text-xl font-semibold mb-2">Mode & Accessoires</h3>
<p class="text-gray-600 mb-4">Restez élégant avec nos collections tendance</p>
<a href="#" onclick="showPage('shop')" class="text-indigo-600 font-medium hover:text-indigo-800">Voir les produits</a>
</div>
</div>
<div class="bg-gray-100 rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-all">
<img src="https://images.unsplash.com/photo-1555529669-e69e7aa0ba9a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Maison" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="text-xl font-semibold mb-2">Maison & Déco</h3>
<p class="text-gray-600 mb-4">Embellissez votre intérieur avec style</p>
<a href="#" onclick="showPage('shop')" class="text-indigo-600 font-medium hover:text-indigo-800">Voir les produits</a>
</div>
</div>
</div>
</div>
</section>
<!-- Featured Products -->
<section class="py-16 bg-gray-50">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">Produits Populaires</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Product 1 -->
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition-all">
<div class="relative">
<img src="https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Montre intelligente" class="w-full h-48 object-cover">
<div class="absolute top-2 right-2 bg-indigo-600 text-white text-xs px-2 py-1 rounded">Nouveau</div>
</div>
<div class="p-4">
<h3 class="font-semibold text-lg mb-1">Montre Intelligente Pro</h3>
<div class="flex items-center mb-2">
<div class="flex text-yellow-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">(42 avis)</span>
</div>
<div class="flex justify-between items-center">
<span class="font-bold text-lg">45,000 FCFA</span>
<button onclick="addToCart('Montre Intelligente Pro', 45000, 'https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80')" class="bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700 transition-all">
<i class="fas fa-plus"></i>
</button>
</div>
</div>
</div>
<!-- Product 2 -->
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition-all">
<img src="https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Appareil photo" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="font-semibold text-lg mb-1">Appareil Photo Compact</h3>
<div class="flex items-center mb-2">
<div class="flex text-yellow-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="far fa-star"></i>
</div>
<span class="text-gray-600 text-sm ml-2">(28 avis)</span>
</div>
<div class="flex justify-between items-center">
<span class="font-bold text-lg">85,000 FCFA</span>
<button onclick="addToCart('Appareil Photo Compact', 85000, 'https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80')" class="bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700 transition-all">
<i class="fas fa-plus"></i>
</button>
</div>
</div>
</div>
<!-- Product 3 -->
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition-all">
<div class="relative">
<img src="https://images.unsplash.com/photo-1594035910387-fea47794261f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Sac à dos" class="w-full h-48 object-cover">
<div class="absolute top-2 right-2 bg-red-500 text-white text-xs px-2 py-1 rounded">Promo</div>
</div>
<div class="p-4">
<h3 class="font-semibold text-lg mb-1">Sac à Dos Élégant</h3>
<div class="flex items-center mb-2">
<div class="flex text-yellow-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"></i>
</div>
<span class="text-gray-600 text-sm ml-2">(56 avis)</span>
</div>
<div class="flex justify-between items-center">
<div>
<span class="font-bold text-lg">25,000 FCFA</span>
<span class="text-sm text-gray-500 line-through ml-2">32,000 FCFA</span>
</div>
<button onclick="addToCart('Sac à Dos Élégant', 25000, 'https://images.unsplash.com/photo-1594035910387-fea47794261f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80')" class="bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700 transition-all">
<i class="fas fa-plus"></i>
</button>
</div>
</div>
</div>
<!-- Product 4 -->
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition-all">
<img src="https://images.unsplash.com/photo-1585386959984-a4155224a1ad?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Parfum" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="font-semibold text-lg mb-1">Parfum Élégance</h3>
<div class="flex items-center mb-2">
<div class="flex text-yellow-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="far fa-star"></i>
</div>
<span class="text-gray-600 text-sm ml-2">(34 avis)</span>
</div>
<div class="flex justify-between items-center">
<span class="font-bold text-lg">18,000 FCFA</span>
<button onclick="addToCart('Parfum Élégance', 18000, 'https://images.unsplash.com/photo-1585386959984-a4155224a1ad?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80')" class="bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700 transition-all">
<i class="fas fa-plus"></i>
</button>
</div>
</div>
</div>
</div>
<div class="text-center mt-10">
<a href="#" onclick="showPage('shop')" class="inline-block border-2 border-indigo-600 text-indigo-600 font-semibold py-2 px-6 rounded-full hover:bg-indigo-600 hover:text-white transition-all">
Voir tous les produits
</a>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="py-16 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">Ce que disent nos clients</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-gray-50 p-6 rounded-lg shadow-sm">
<div class="flex items-center mb-4">
<div class="flex text-yellow-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>
</div>
<p class="text-gray-600 mb-4">"J'ai reçu ma commande rapidement et l'article était exactement comme sur la photo. Service client très réactif. Je recommande!"</p>
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-gray-300 mr-3 overflow-hidden">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Client" class="w-full h-full object-cover">
</div>
<div>
<h4 class="font-semibold">Aïssatou D.</h4>
<p class="text-gray-500 text-sm">Dakar</p>
</div>
</div>
</div>
<div class="bg-gray-50 p-6 rounded-lg shadow-sm">
<div class="flex items-center mb-4">
<div class="flex text-yellow-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>
</div>
<p class="text-gray-600 mb-4">"Excellent rapport qualité-prix. La livraison a pris un peu de temps mais le produit en valait la peine. Je reviendrai."</p>
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-gray-300 mr-3 overflow-hidden">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client" class="w-full h-full object-cover">
</div>
<div>
<h4 class="font-semibold">Mamadou K.</h4>
<p class="text-gray-500 text-sm">Bamako</p>
</div>
</div>
</div>
<div class="bg-gray-50 p-6 rounded-lg shadow-sm">
<div class="flex items-center mb-4">
<div class="flex text-yellow-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>
</div>
<p class="text-gray-600 mb-4">"Commande facile et livraison rapide. Le produit est de très bonne qualité. Service après-vente disponible et efficace."</p>
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-gray-300 mr-3 overflow-hidden">
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Client" class="w-full h-full object-cover">
</div>
<div>
<h4 class="font-semibold">Fatou B.</h4>
<p class="text-gray-500 text-sm">Abidjan</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Newsletter -->
<section class="py-16 bg-indigo-600 text-white">
<div class="container mx-auto px-4 text-center">
<h2 class="text-3xl font-bold mb-4">Abonnez-vous à notre newsletter</h2>
<p class="text-xl mb-8">Recevez nos offres exclusives et nouveautés directement dans votre boîte mail</p>
<form class="max-w-md mx-auto flex">
<input type="email" placeholder="Votre adresse email" class="flex-grow px-4 py-3 rounded-l focus:outline-none text-gray-800">
<button type="submit" class="bg-indigo-800 hover:bg-indigo-900 px-6 py-3 rounded-r transition-all">
S'abonner
</button>
</form>
</div>
</section>
</div>
<!-- Shop Page -->
<div id="shop-page" class="page">
<!-- Hero Section for Shop -->
<section class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white py-16">
<div class="container mx-auto px-4 text-center">
<h1 class="text-4xl font-bold mb-4">Tous nos articles</h1>
<p class="text-xl max-w-2xl mx-auto">Découvrez notre vaste sélection de produits de qualité dans toutes les catégories</p>
</div>
</section>
<section class="py-12 bg-white">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row justify-between items-center mb-8">
<h2 class="text-2xl font-bold">Nos Produits</h2>
<div class="mt-4 md:mt-0">
<select class="border border-gray-300 rounded px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
<option>Trier par: Pertinence</option>
<option>Prix croissant</option>
<option>Prix décroissant</option>
<option>Nouveautés</option>
<option>Meilleures ventes</option>
</select>
</div>
</div>
<div class="flex flex-col md:flex-row">
<!-- Filters -->
<div class="w-full md:w-64 mb-8 md:mb-0 md:mr-8">
<div class="bg-gray-50 p-4 rounded-lg shadow-sm">
<h3 class="font-semibold text-lg mb-4">Catégories</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-600 hover:text-indigo-600">Tous les produits</a></li>
<li><a href="#" class="text-gray-600 hover:text-indigo-600">Électronique</a></li>
<li><a href="#" class="text-gray-600 hover:text-indigo-600">Mode & Accessoires</a></li>
<li><a href="#" class="text-gray-600 hover:text-indigo-600">Maison & Déco</a></li>
<li><a href="#" class="text-gray-600 hover:text-indigo-600">Beauté & Santé</a></li>
<li><a href="#" class="text-gray-600 hover:text-indigo-600">Sports & Loisirs</a></li>
<li><a href="#" class="text-gray-600 hover:text-indigo-600">Enfants</a></li>
<li><a href="#" class="text-gray-600 hover:text-indigo-600">Bureau</a></li>
</ul>
<h3 class="font-semibold text-lg mt-6 mb-4">Filtrer par prix</h3>
<div class="mb-4">
<input type="range" min="0" max="100000" step="5000" class="w-full">
</div>
<div class="flex justify-between text-sm text-gray-600">
<span>0 FCFA</span>
<span>150,000 FCFA</span>
</div>
<button class="w-full mt-6 bg-indigo-600 text-white py-2 rounded hover:bg-indigo-700 transition-all">
Appliquer les filtres
</button>
</div>
</div>
<!-- Products Grid -->
<div class="flex-grow">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Product 1 -->
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition-all">
<div class="relative">
<img src="https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Montre intelligente" class="w-full h-48 object-cover">
<div class="absolute top-2 right-2 bg-indigo-600 text-white text-xs px-2 py-1 rounded">Nouveau</div>
</div>
<div class="p-4">
<h3 class="font-semibold text-lg mb-1">Montre Intelligente Pro</h3>
<div class="flex items-center mb-2">
<div class="flex text-yellow-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">(42 avis)</span>
</div>
<div class="flex justify-between items-center">
<span class="font-bold text-lg">45,000 FCFA</span>
<button onclick="addToCart('Montre Intelligente Pro', 45000, 'https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80')" class="bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700 transition-all">
<i class="fas fa-plus"></i>
</button>
</div>
</div>
</div>
<!-- Product 2 -->
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition-all">
<img src="https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Appareil photo" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="font-semibold text-lg mb-1">Appareil Photo Compact</h3>
<div class="flex items-center mb-2">
<div class="flex text-yellow-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="far fa-star"></i>
</div>
<span class="text-gray-600 text-sm ml-2">(28 avis)</span>
</div>
<div class="flex justify-between items-center">
<span class="font-bold text-lg">85,000 FCFA</span>
<button onclick="addToCart('Appareil Photo Compact', 85000, 'https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80')" class="bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700 transition-all">
<i class="fas fa-plus"></i>
</button>
</div>
</div>
</div>
<!-- Product 3 -->
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition-all">
<div class="relative">
<img src="https://images.unsplash.com/photo-1594035910387-fea47794261f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Sac à dos" class="w-full h-48 object-cover">
<div class="absolute top-2 right-2 bg-red-500 text-white text-xs px-2 py-1 rounded">Promo</div>
</div>
<div class="p-4">
<h3 class="font-semibold text-lg mb-1">Sac à Dos Élégant</h3>
<div class="flex items-center mb-2">
<div class="flex text-yellow-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"></i>
</div>
<span class="text-gray-600 text-sm ml-2">(56 avis)</span>
</div>
<div class="flex justify-between items-center">
<div>
<span class="font-bold text-lg">25,000 FCFA</span>
<span class="text-sm text-gray-500 line-through ml-2">32,000 FCFA</span>
</div>
<button onclick="addToCart('Sac à Dos Élégant', 25000, 'https://images.unsplash.com/photo-1594035910387-fea47794261f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80')" class="bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700 transition-all">
<i class="fas fa-plus"></i>
</button>
</div>
</div>
</div>
<!-- Product 4 -->
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition-all">
<img src="https://images.unsplash.com/photo-1585386959984-a4155224a1ad?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Parfum" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="font-semibold text-lg mb-1">Parfum Élégance</h3>
<div class="flex items-center mb-2">
<div class="flex text-yellow-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="far fa-star"></i>
</div>
<span class="text-gray-600 text-sm ml-2">(34 avis)</span>
</div>
<div class="flex justify-between items-center">
<span class="font-bold text-lg">18,000 FCFA</span>
<button onclick="addToCart('Parfum Élégance', 18000, 'https://images.unsplash.com/photo-1585386959984-a4155224a1ad?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80')" class="bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700 transition-all">
<i class="fas fa-plus"></i>
</button>
</div>
</div>
</div>
<!-- Product 5 -->
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition-all">
<img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Chaussures" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="font-semibold text-lg mb-1">Chaussures de Sport</h3>
<div class="flex items-center mb-2">
<div class="flex text-yellow-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="far fa-star"></i>
</div>
<span class="text-gray-600 text-sm ml-2">(39 avis)</span>
</div>
<div class="flex justify-between items-center">
<span class="font-bold text-lg">22,000 FCFA</span>
<button onclick="addToCart('Chaussures de Sport', 22000, 'https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80')" class="bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700 transition-all">
<i class="fas fa-plus"></i>
</button>
</div>
</div>
</div>
<!-- Product 6 -->
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition-all">
<div class="relative">
<img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Montre" class="w-full h-48 object-cover">
<div class="absolute top-2 right-2 bg-indigo-600 text-white text-xs px-2 py-1 rounded">Nouveau</div>
</div>
<div class="p-4">
<h3 class="font-semibold text-lg mb-1">Montre Classique</h3>
<div class="flex items-center mb-2">
<div class="flex text-yellow-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"></i>
</div>
<span class="text-gray-600 text-sm ml-2">(47 avis)</span>
</div>
<div class="flex justify-between items-center">
<span class="font-bold text-lg">35,000 FCFA</span>
<button onclick="addToCart('Montre Classique', 35000, 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80')" class="bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700 transition-all">
<i class="fas fa-plus"></i>
</button>
</div>
</div>
</div>
</div>
<!-- Pagination -->
<div class="mt-10 flex justify-center">
<nav class="flex items-center space-x-2">
<a href="#" class="px-3 py-1 rounded border border-gray-300 text-gray-500 hover:bg-gray-100">&laquo;</a>
<a href="#" class="px-3 py-1 rounded border border-indigo-600 bg-indigo-600 text-white">1</a>
<a href="#" class="px-3 py-1 rounded border border-gray-300 text-gray-700 hover:bg-gray-100">2</a>
<a href="#" class="px-3 py-1 rounded border border-gray-300 text-gray-700 hover:bg-gray-100">3</a>
<a href="#" class="px-3 py-1 rounded border border-gray-300 text-gray-700 hover:bg-gray-100">4</a>
<a href="#" class="px-3 py-1 rounded border border-gray-300 text-gray-700 hover:bg-gray-100">5</a>
<a href="#" class="px-3 py-1 rounded border border-gray-300 text-gray-500 hover:bg-gray-100">&raquo;</a>
</nav>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- About Page -->
<div id="about-page" class="page">
<section class="py-16 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h1 class="text-4xl font-bold mb-4">À propos de Abdoul Shop</h1>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Notre engagement envers la qualité et le service client</p>
</div>
<div class="flex flex-col lg:flex-row items-center mb-16">
<div class="lg:w-1/2 mb-8 lg:mb-0 lg:pr-12">
<h2 class="text-3xl font-bold mb-6">Notre Histoire</h2>
<p class="text-gray-600 mb-4">Abdoul Shop a été fondé en 2015 avec une vision simple: fournir des produits de qualité à des prix abordables pour la communauté locale.</p>
<p class="text-gray-600 mb-4">Ce qui a commencé comme une petite boutique physique s'est rapidement transformé en une entreprise florissante avec une présence en ligne importante.</p>
<p class="text-gray-600">Aujourd'hui, nous sommes fiers de servir des milliers de clients satisfaits à travers toute la région, avec une sélection soigneusement choisie de produits dans diverses catégories.</p>
</div>
<div class="lg:w-1/2">
<img src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Notre équipe" class="rounded-lg shadow-lg w-full">
</div>
</div>
<div class="flex flex-col lg:flex-row items-center mb-16">
<div class="lg:w-1/2 order-last lg:order-first">
<img src="https://images.unsplash.com/photo-1521791136064-7986c2920216?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Notre mission" class="rounded-lg shadow-lg w-full">
</div>
<div class="lg:w-1/2 mb-8 lg:mb-0 lg:pl-12">
<h2 class="text-3xl font-bold mb-6">Notre Mission</h2>
<p class="text-gray-600 mb-4">Notre mission est de rendre les produits de qualité accessibles à tous, tout en fournissant un service client exceptionnel.</p>
<p class="text-gray-600 mb-4">Nous croyons que chaque client mérite:</p>
<ul class="text-gray-600 mb-4 space-y-2">
<li class="flex items-start">
<i class="fas fa-check text-indigo-600 mt-1 mr-2"></i>
<span>Des produits authentiques et de haute qualité</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-indigo-600 mt-1 mr-2"></i>
<span>Des prix compétitifs et transparents</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-indigo-600 mt-1 mr-2"></i>
<span>Une expérience d'achat simple et agréable</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-indigo-600 mt-1 mr-2"></i>
<span>Un service après-vente réactif et efficace</span>
</li>
</ul>
</div>
</div>
<div class="text-center">
<h2 class="text-3xl font-bold mb-8">Notre Équipe</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
<div class="bg-gray-50 p-6 rounded-lg">
<div class="w-32 h-32 mx-auto rounded-full overflow-hidden mb-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Abdoul" class="w-full h-full object-cover">
</div>
<h3 class="text-xl font-semibold mb-1">Abdoul Diop</h3>
<p class="text-indigo-600 mb-3">Fondateur & PDG</p>
<p class="text-gray-600">Abdoul a fondé l'entreprise avec la vision de créer une boutique fiable pour la communauté locale.</p>
</div>
<div class="bg-gray-50 p-6 rounded-lg">
<div class="w-32 h-32 mx-auto rounded-full overflow-hidden mb-4">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Aminata" class="w-full h-full object-cover">
</div>
<h3 class="text-xl font-semibold mb-1">Aminata Ndiaye</h3>
<p class="text-indigo-600 mb-3">Directrice Commerciale</p>
<p class="text-gray-600">Aminata supervise les opérations quotidiennes et s'assure que chaque client est satisfait.</p>
</div>
<div class="bg-gray-50 p-6 rounded-lg">
<div class="w-32 h-32 mx-auto rounded-full overflow-hidden mb-4">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Moussa" class="w-full h-full object-cover">
</div>
<h3 class="text-xl font-semibold mb-1">Moussa Fall</h3>
<p class="text-indigo-600 mb-3">Responsable Logistique</p>
<p class="text-gray-600">Moussa gère la chaîne d'approvisionnement et s'assure que les produits arrivent à temps.</p>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- Contact Page -->
<div id="contact-page" class="page">
<section class="py-16 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h1 class="text-4xl font-bold mb-4">Contactez-nous</h1>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Nous sommes là pour répondre à toutes vos questions</p>
</div>
<div class="flex flex-col lg:flex-row gap-12">
<div class="lg:w-1/2">
<div class="bg-gray-50 p-8 rounded-lg shadow-sm">
<h2 class="text-2xl font-bold mb-6">Envoyez-nous un message</h2>
<form>
<div class="mb-4">
<label for="name" class="block text-gray-700 mb-2">Votre nom</label>
<input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-indigo-500">
</div>
<div class="mb-4">
<label for="email" class="block text-gray-700 mb-2">Votre email</label>
<input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-indigo-500">
</div>
<div class="mb-4">
<label for="subject" class="block text-gray-700 mb-2">Sujet</label>
<input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-indigo-500">
</div>
<div class="mb-6">
<label for="message" class="block text-gray-700 mb-2">Message</label>
<textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-indigo-500"></textarea>
</div>
<button type="submit" class="w-full bg-indigo-600 text-white py-3 rounded hover:bg-indigo-700 transition-all font-semibold">
Envoyer le message
</button>
</form>
</div>
</div>
<div class="lg:w-1/2">
<div class="bg-gray-50 p-8 rounded-lg shadow-sm h-full">
<h2 class="text-2xl font-bold mb-6">Nos coordonnées</h2>
<div class="space-y-6">
<div class="flex items-start">
<div class="bg-indigo-100 p-3 rounded-full mr-4">
<i class="fas fa-map-marker-alt text-indigo-600"></i>
</div>
<div>
<h3 class="font-semibold text-lg mb-1">Adresse</h3>
<p class="text-gray-600">123 Avenue de la Liberté, Dakar, Sénégal</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-indigo-100 p-3 rounded-full mr-4">
<i class="fas fa-phone-alt text-indigo-600"></i>
</div>
<div>
<h3 class="font-semibold text-lg mb-1">Téléphone</h3>
<p class="text-gray-600">+221 33 123 45 67</p>
<p class="text-gray-600">+221 77 890 12 34 (WhatsApp)</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-indigo-100 p-3 rounded-full mr-4">
<i class="fas fa-envelope text-indigo-600"></i>
</div>
<div>
<h3 class="font-semibold text-lg mb-1">Email</h3>
<p class="text-gray-600">[email protected]</p>
<p class="text-gray-600">[email protected]</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-indigo-100 p-3 rounded-full mr-4">
<i class="fas fa-clock text-indigo-600"></i>
</div>
<div>
<h3 class="font-semibold text-lg mb-1">Heures d'ouverture</h3>
<p class="text-gray-600">Lundi - Vendredi: 8h00 - 18h00</p>
<p class="text-gray-600">Samedi: 9h00 - 16h00</p>
<p class="text-gray-600">Dimanche: Fermé</p>
</div>
</div>
</div>
<div class="mt-8">
<h3 class="font-semibold text-lg mb-4">Suivez-nous</h3>
<div class="flex space-x-4">
<a href="#" class="bg-gray-200 p-3 rounded-full text-gray-700 hover:bg-indigo-600 hover:text-white transition-all">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="bg-gray-200 p-3 rounded-full text-gray-700 hover:bg-indigo-600 hover:text-white transition-all">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="bg-gray-200 p-3 rounded-full text-gray-700 hover:bg-indigo-600 hover:text-white transition-all">
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="bg-gray-200 p-3 rounded-full text-gray-700 hover:bg-indigo-600 hover:text-white transition-all">
<i class="fab fa-linkedin-in"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="mt-16">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3859.227465736822!2d-17.443788924683!3d14.69223048576163!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xec1725a5b5a7e9b%3A0x5d5e5e5e5e5e5e5e!2sDakar%2C%20Senegal!5e0!3m2!1sen!2sus!4v1620000000000!5m2!1sen!2sus" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" class="rounded-lg shadow-lg"></iframe>
</div>
</div>
</section>
</div>
</main>
<!-- Footer -->
<footer class="bg-gray-900 text-white pt-16 pb-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
<div>
<h3 class="text-xl font-bold mb-4">Abdoul Shop</h3>
<p class="text-gray-400 mb-4">Votre boutique en ligne préférée pour tous vos besoins quotidiens.</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white transition-all"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition-all"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition-all"><i class="fab fa-instagram"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition-all"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
<div>
<h4 class="font-semibold text-lg mb-4">Liens rapides</h4>
<ul class="space-y-2">
<li><a href="#" onclick="showPage('home')" class="text-gray-400 hover:text-white transition-all">Accueil</a></li>
<li><a href="#" onclick="showPage('shop')" class="text-gray-400 hover:text-white transition-all">Boutique</a></li>
<li><a href="#" onclick="showPage('about')" class="text-gray-400 hover:text-white transition-all">À propos</a></li>
<li><a href="#" onclick="showPage('contact')" class="text-gray-400 hover:text-white transition-all">Contact</a></li>
</ul>
</div>
<div>
<h4 class="font-semibold text-lg mb-4">Catégories</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition-all">Électronique</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-all">Mode</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-all">Maison & Déco</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-all">Beauté</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-all">Sports & Loisirs</a></li>
</ul>
</div>
<div>
<h4 class="font-semibold text-lg mb-4">Newsletter</h4>
<p class="text-gray-400 mb-4">Abonnez-vous pour recevoir nos offres spéciales et nouveautés.</p>
<form class="flex">
<input type="email" placeholder="Votre email" class="px-4 py-2 rounded-l focus:outline-none text-gray-800 w-full">
<button type="submit" class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-r transition-all">
<i class="fas fa-paper-plane"></i>
</button>
</form>
</div>
</div>
<div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-400 mb-4 md:mb-0">© 2023 Abdoul Shop. Tous droits réservés.</p>
<div class="flex space-x-6">
<a href="#" class="text-gray-400 hover:text-white transition-all">Conditions générales</a>
<a href="#" class="text-gray-400 hover:text-white transition-all">Politique de confidentialité</a>
<a href="#" class="text-gray-400 hover:text-white transition-all">Mentions légales</a>
</div>
</div>
</div>
</footer>
<script>
// Cart functionality
let cart = [];
let cartTotal = 0;
function toggleCart() {
const cartPanel = document.getElementById('cart-panel');
const overlay = document.getElementById('overlay');
cartPanel.classList.toggle('open');
overlay.classList.toggle('hidden');
// Prevent scrolling when cart is open
if (cartPanel.classList.contains('open')) {
document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = '';
}
}
function addToCart(name, price, image) {
// Check if item already exists in cart
const existingItem = cart.find(item => item.name === name);
if (existingItem) {
existingItem.quantity += 1;
} else {
cart.push({
name: name,
price: price,
image: image,
quantity: 1
});
}
// Update cart total
cartTotal += price;
// Update cart UI
updateCartUI();
// Show notification
showNotification(`${name} ajouté au panier`);
}
function updateCartUI() {
const cartItemsContainer = document.getElementById('cart-items');
const cartCount = document.getElementById('cart-count');
const cartTotalElement = document.getElementById('cart-total');
// Update cart count
const totalItems = cart.reduce((total, item) => total + item.quantity, 0);
cartCount.textContent = totalItems;
// Update cart items
if (cart.length === 0) {
cartItemsContainer.innerHTML = '<p class="text-gray-500 text-center py-8">Votre panier est vide</p>';
} else {
let html = '';
cart.forEach(item => {
html += `
<div class="flex items-center py-4 border-b">
<div class="w-16 h-16 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>
<p class="text-gray-600">${item.price.toLocaleString()} FCFA x ${item.quantity}</p>
</div>
<div class="flex items-center">
<span class="font-semibold mr-4">${(item.price * item.quantity).toLocaleString()} FCFA</span>
<button onclick="removeFromCart('${item.name}')" class="text-red-500 hover:text-red-700">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
`;
});
cartItemsContainer.innerHTML = html;
}
// Update cart total
cartTotalElement.textContent = cartTotal.toLocaleString() + ' FCFA';
}
function removeFromCart(name) {
const itemIndex = cart.findIndex(item => item.name === name);
if (itemIndex !== -1) {
const item = cart[itemIndex];
cartTotal -= item.price * item.quantity;
// Remove item from cart
cart.splice(itemIndex, 1);
// Update cart UI
updateCartUI();
// Show notification
showNotification(`${name} retiré du panier`);
}
}
function showNotification(message) {
const notification = document.createElement('div');
notification.className = 'fixed bottom-4 right-4 bg-gray-800 text-white px-6 py-3 rounded shadow-lg flex items-center';
notification.innerHTML = `
<i class="fas fa-check-circle mr-2"></i>
<span>${message}</span>
`;
document.body.appendChild(notification);
// Remove notification after 3 seconds
setTimeout(() => {
notification.classList.add('opacity-0', 'transition-all', 'duration-300');
setTimeout(() => notification.remove(), 300);
}, 3000);
}
// Page navigation
function showPage(pageId) {
// Hide all pages
document.querySelectorAll('.page').forEach(page => {
page.classList.remove('active');
});
// Show selected page
document.getElementById(`${pageId}-page`).classList.add('active');
// Close mobile menu if open
document.getElementById('mobile-menu').classList.add('hidden');
// Scroll to top
window.scrollTo(0, 0);
}
function toggleMobileMenu() {
document.getElementById('mobile-menu').classList.toggle('hidden');
}
// Initialize the page
document.addEventListener('DOMContentLoaded', function() {
// Set home page as active by default
showPage('home');
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Jacky-9/batchana" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>