Hugging Face's logo

Spaces:
supportATP
/
site-atp
Running

App Files Community
supportATP commited on
Commit
8d5477f
·
verified ·
1 Parent(s): 59fbacc

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +587 -28
index.html CHANGED
@@ -6,6 +6,10 @@
6
  <title>Atelier Picking - Solutions de picking innovantes</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 
 
 
 
9
  <style>
10
  .bg-orange-atelier {
11
  background-color: #F15A24;
@@ -45,6 +49,19 @@
45
  transform: translateY(-5px);
46
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
47
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
48
  </style>
49
  </head>
50
  <body class="font-sans antialiased text-gray-800">
@@ -59,14 +76,53 @@
59
  <a href="#accueil" class="nav-link text-blue-atelier font-medium">Accueil</a>
60
  <a href="#expertise" class="nav-link text-gray-600 hover:text-blue-atelier">Notre expertise</a>
61
  <a href="#solutions" class="nav-link text-gray-600 hover:text-blue-atelier">Nos solutions</a>
 
62
  <a href="#references" class="nav-link text-gray-600 hover:text-blue-atelier">Nos références</a>
63
  <a href="#contact" class="nav-link text-gray-600 hover:text-blue-atelier">Contact</a>
64
  </nav>
65
 
66
- <div class="md:hidden">
67
- <button class="text-gray-600 focus:outline-none">
68
- <i class="fas fa-bars text-2xl"></i>
69
- </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
70
  </div>
71
  </div>
72
  </header>
@@ -160,8 +216,40 @@
160
  </div>
161
  </section>
162
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
163
  <!-- References Section -->
164
- <section id="references" class="py-16 bg-white">
165
  <div class="container mx-auto px-4">
166
  <div class="text-center mb-12">
167
  <h2 class="text-2xl md:text-3xl font-bold mb-4 text-blue-atelier">Nos références</h2>
@@ -184,7 +272,7 @@
184
  </div>
185
 
186
  <div class="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8">
187
- <div class="bg-gray-50 p-6 rounded-lg">
188
  <div class="flex items-center mb-4">
189
  <div class="text-yellow-400 mr-2">
190
  <i class="fas fa-star"></i>
@@ -203,7 +291,7 @@
203
  </div>
204
  </div>
205
 
206
- <div class="bg-gray-50 p-6 rounded-lg">
207
  <div class="flex items-center mb-4">
208
  <div class="text-yellow-400 mr-2">
209
  <i class="fas fa-star"></i>
@@ -222,7 +310,7 @@
222
  </div>
223
  </div>
224
 
225
- <div class="bg-gray-50 p-6 rounded-lg">
226
  <div class="flex items-center mb-4">
227
  <div class="text-yellow-400 mr-2">
228
  <i class="fas fa-star"></i>
@@ -295,15 +383,15 @@
295
  </div>
296
 
297
  <div class="lg:w-1/2">
298
- <form class="bg-gray-50 p-8 rounded-lg">
299
  <div class="mb-6">
300
  <label for="name" class="block text-gray-700 font-medium mb-2">Nom complet*</label>
301
- <input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-atelier">
302
  </div>
303
 
304
  <div class="mb-6">
305
  <label for="email" class="block text-gray-700 font-medium mb-2">Email*</label>
306
- <input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-atelier">
307
  </div>
308
 
309
  <div class="mb-6">
@@ -313,10 +401,13 @@
313
 
314
  <div class="mb-6">
315
  <label for="message" class="block text-gray-700 font-medium mb-2">Message*</label>
316
- <textarea id="message" rows="4" class="w-full px-4 py-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-atelier"></textarea>
317
  </div>
318
 
319
- <button type="submit" class="w-full bg-orange-atelier text-white font-bold py-3 px-6 rounded hover-bg-orange transition duration-300">Envoyer</button>
 
 
 
320
  </form>
321
  </div>
322
  </div>
@@ -374,28 +465,496 @@
374
  </div>
375
  </footer>
376
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
377
  <script>
378
- // Simple script for mobile menu toggle (would be enhanced in a real implementation)
379
- document.querySelector('.fa-bars').addEventListener('click', function() {
380
- alert("Menu mobile serait implémenté ici dans une version complète");
381
- });
382
-
383
- // Smooth scrolling for anchor links
384
- document.querySelectorAll('a[href^="#"]').forEach(anchor => {
385
- anchor.addEventListener('click', function (e) {
386
- e.preventDefault();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
387
 
388
- const targetId = this.getAttribute('href');
389
- if(targetId === '#') return;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
390
 
391
- const targetElement = document.querySelector(targetId);
392
- if(targetElement) {
393
- targetElement.scrollIntoView({
394
- behavior: 'smooth'
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
395
  });
396
  }
397
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
398
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
399
  </script>
400
  <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=supportATP/site-atp" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
401
  </html>
 
6
  <title>Atelier Picking - Solutions de picking innovantes</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <!-- Firebase SDK -->
10
+ <script src="https://www.gstatic.com/firebasejs/9.6.0/firebase-app-compat.js"></script>
11
+ <script src="https://www.gstatic.com/firebasejs/9.6.0/firebase-firestore-compat.js"></script>
12
+ <script src="https://www.gstatic.com/firebasejs/9.6.0/firebase-auth-compat.js"></script>
13
  <style>
14
  .bg-orange-atelier {
15
  background-color: #F15A24;
 
49
  transform: translateY(-5px);
50
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
51
  }
52
+ .cart-item {
53
+ transition: all 0.3s ease;
54
+ }
55
+ .cart-item:hover {
56
+ background-color: #f7fafc;
57
+ }
58
+ .modal {
59
+ transition: opacity 0.3s ease, visibility 0.3s ease;
60
+ }
61
+ .product-card:hover {
62
+ transform: translateY(-5px);
63
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
64
+ }
65
  </style>
66
  </head>
67
  <body class="font-sans antialiased text-gray-800">
 
76
  <a href="#accueil" class="nav-link text-blue-atelier font-medium">Accueil</a>
77
  <a href="#expertise" class="nav-link text-gray-600 hover:text-blue-atelier">Notre expertise</a>
78
  <a href="#solutions" class="nav-link text-gray-600 hover:text-blue-atelier">Nos solutions</a>
79
+ <a href="#boutique" class="nav-link text-gray-600 hover:text-blue-atelier">Boutique</a>
80
  <a href="#references" class="nav-link text-gray-600 hover:text-blue-atelier">Nos références</a>
81
  <a href="#contact" class="nav-link text-gray-600 hover:text-blue-atelier">Contact</a>
82
  </nav>
83
 
84
+ <div class="flex items-center space-x-4">
85
+ <div class="relative">
86
+ <button id="cart-button" class="text-gray-600 hover:text-blue-atelier transition">
87
+ <i class="fas fa-shopping-cart text-xl"></i>
88
+ <span id="cart-count" class="absolute -top-2 -right-2 bg-orange-atelier text-white text-xs font-bold rounded-full h-5 w-5 flex items-center justify-center">0</span>
89
+ </button>
90
+
91
+ <!-- Panier dropdown -->
92
+ <div id="cart-dropdown" class="hidden absolute right-0 mt-2 w-72 bg-white rounded-md shadow-lg z-50 py-2">
93
+ <div class="px-4 py-2 border-b">
94
+ <h3 class="font-bold text-gray-700">Votre panier</h3>
95
+ </div>
96
+ <div id="cart-items" class="max-h-60 overflow-y-auto">
97
+ <p class="text-gray-500 text-center py-4">Votre panier est vide</p>
98
+ </div>
99
+ <div class="px-4 py-2 border-t">
100
+ <div class="flex justify-between mb-2">
101
+ <span class="font-bold">Total:</span>
102
+ <span id="cart-total" class="font-bold">0,00 €</span>
103
+ </div>
104
+ <a href="#boutique" class="block text-center bg-blue-atelier text-white py-2 px-4 rounded hover:bg-blue-700 transition">Commander</a>
105
+ </div>
106
+ </div>
107
+ </div>
108
+
109
+ <div class="md:hidden">
110
+ <button id="mobile-menu-button" class="text-gray-600 focus:outline-none">
111
+ <i class="fas fa-bars text-2xl"></i>
112
+ </button>
113
+ </div>
114
+ </div>
115
+ </div>
116
+
117
+ <!-- Mobile menu -->
118
+ <div id="mobile-menu" class="hidden md:hidden bg-white border-t">
119
+ <div class="container mx-auto px-4 py-3 flex flex-col space-y-3">
120
+ <a href="#accueil" class="text-blue-atelier font-medium py-2">Accueil</a>
121
+ <a href="#expertise" class="text-gray-600 hover:text-blue-atelier py-2">Notre expertise</a>
122
+ <a href="#solutions" class="text-gray-600 hover:text-blue-atelier py-2">Nos solutions</a>
123
+ <a href="#boutique" class="text-gray-600 hover:text-blue-atelier py-2">Boutique</a>
124
+ <a href="#references" class="text-gray-600 hover:text-blue-atelier py-2">Nos références</a>
125
+ <a href="#contact" class="text-gray-600 hover:text-blue-atelier py-2">Contact</a>
126
  </div>
127
  </div>
128
  </header>
 
216
  </div>
217
  </section>
218
 
219
+ <!-- Boutique Section -->
220
+ <section id="boutique" class="py-16 bg-white">
221
+ <div class="container mx-auto px-4">
222
+ <div class="text-center mb-12">
223
+ <h2 class="text-2xl md:text-3xl font-bold mb-4 text-blue-atelier">Notre Boutique</h2>
224
+ <p class="text-gray-600 max-w-3xl mx-auto">Découvrez nos solutions matérielles et logicielles</p>
225
+ </div>
226
+
227
+ <div class="mb-8 flex justify-between items-center">
228
+ <div class="relative w-full md:w-64">
229
+ <input type="text" id="search-products" placeholder="Rechercher un produit..." class="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-atelier">
230
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
231
+ </div>
232
+
233
+ <div class="hidden md:flex space-x-2">
234
+ <button class="category-filter px-4 py-2 rounded-lg border hover:bg-gray-50" data-category="all">Tous</button>
235
+ <button class="category-filter px-4 py-2 rounded-lg border hover:bg-gray-50" data-category="hardware">Matériel</button>
236
+ <button class="category-filter px-4 py-2 rounded-lg border hover:bg-gray-50" data-category="software">Logiciel</button>
237
+ <button class="category-filter px-4 py-2 rounded-lg border hover:bg-gray-50" data-category="service">Service</button>
238
+ </div>
239
+ </div>
240
+
241
+ <div id="products-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
242
+ <!-- Les produits seront chargés dynamiquement depuis Firebase -->
243
+ <div class="text-center py-8">
244
+ <i class="fas fa-spinner fa-spin text-4xl text-blue-atelier"></i>
245
+ <p class="mt-4">Chargement des produits...</p>
246
+ </div>
247
+ </div>
248
+ </div>
249
+ </section>
250
+
251
  <!-- References Section -->
252
+ <section id="references" class="py-16 bg-gray-50">
253
  <div class="container mx-auto px-4">
254
  <div class="text-center mb-12">
255
  <h2 class="text-2xl md:text-3xl font-bold mb-4 text-blue-atelier">Nos références</h2>
 
272
  </div>
273
 
274
  <div class="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8">
275
+ <div class="bg-white p-6 rounded-lg shadow-sm">
276
  <div class="flex items-center mb-4">
277
  <div class="text-yellow-400 mr-2">
278
  <i class="fas fa-star"></i>
 
291
  </div>
292
  </div>
293
 
294
+ <div class="bg-white p-6 rounded-lg shadow-sm">
295
  <div class="flex items-center mb-4">
296
  <div class="text-yellow-400 mr-2">
297
  <i class="fas fa-star"></i>
 
310
  </div>
311
  </div>
312
 
313
+ <div class="bg-white p-6 rounded-lg shadow-sm">
314
  <div class="flex items-center mb-4">
315
  <div class="text-yellow-400 mr-2">
316
  <i class="fas fa-star"></i>
 
383
  </div>
384
 
385
  <div class="lg:w-1/2">
386
+ <form id="contact-form" class="bg-gray-50 p-8 rounded-lg shadow-sm">
387
  <div class="mb-6">
388
  <label for="name" class="block text-gray-700 font-medium mb-2">Nom complet*</label>
389
+ <input type="text" id="name" required class="w-full px-4 py-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-atelier">
390
  </div>
391
 
392
  <div class="mb-6">
393
  <label for="email" class="block text-gray-700 font-medium mb-2">Email*</label>
394
+ <input type="email" id="email" required class="w-full px-4 py-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-atelier">
395
  </div>
396
 
397
  <div class="mb-6">
 
401
 
402
  <div class="mb-6">
403
  <label for="message" class="block text-gray-700 font-medium mb-2">Message*</label>
404
+ <textarea id="message" rows="4" required class="w-full px-4 py-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-atelier"></textarea>
405
  </div>
406
 
407
+ <button type="submit" class="w-full bg-orange-atelier text-white font-bold py-3 px-6 rounded hover-bg-orange transition duration-300 flex items-center justify-center">
408
+ <span id="submit-text">Envoyer</span>
409
+ <i id="submit-spinner" class="fas fa-spinner fa-spin ml-2 hidden"></i>
410
+ </button>
411
  </form>
412
  </div>
413
  </div>
 
465
  </div>
466
  </footer>
467
 
468
+ <!-- Product Modal -->
469
+ <div id="product-modal" class="modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 opacity-0 invisible">
470
+ <div class="bg-white rounded-lg max-w-4xl w-full mx-4 max-h-[90vh] overflow-y-auto">
471
+ <div class="p-6">
472
+ <div class="flex justify-between items-start mb-6">
473
+ <h3 id="modal-product-name" class="text-2xl font-bold text-blue-atelier"></h3>
474
+ <button id="close-modal" class="text-gray-500 hover:text-gray-700">
475
+ <i class="fas fa-times text-xl"></i>
476
+ </button>
477
+ </div>
478
+
479
+ <div class="flex flex-col md:flex-row gap-8">
480
+ <div class="md:w-1/3">
481
+ <img id="modal-product-image" src="" alt="" class="w-full rounded-lg border border-gray-200">
482
+ </div>
483
+
484
+ <div class="md:w-2/3">
485
+ <p id="modal-product-description" class="text-gray-600 mb-4"></p>
486
+
487
+ <div class="mb-4">
488
+ <span class="text-2xl font-bold text-blue-atelier" id="modal-product-price"></span>
489
+ <span class="text-gray-500 ml-1" id="modal-product-tax"></span>
490
+ </div>
491
+
492
+ <div class="flex items-center mb-6">
493
+ <div class="mr-4">
494
+ <label for="product-quantity" class="block text-gray-700 mb-1">Quantité</label>
495
+ <div class="flex border rounded-lg w-32">
496
+ <button class="quantity-btn px-3 py-1 border-r bg-gray-100 hover:bg-gray-200" data-action="decrease">-</button>
497
+ <input type="number" id="product-quantity" value="1" min="1" class="w-12 text-center border-none focus:ring-0">
498
+ <button class="quantity-btn px-3 py-1 border-l bg-gray-100 hover:bg-gray-200" data-action="increase">+</button>
499
+ </div>
500
+ </div>
501
+
502
+ <button id="add-to-cart-btn" class="bg-orange-atelier text-white font-bold py-2 px-6 rounded hover-bg-orange transition duration-300 mt-6">
503
+ Ajouter au panier
504
+ </button>
505
+ </div>
506
+
507
+ <div class="border-t pt-4">
508
+ <h4 class="font-bold text-gray-700 mb-2">Caractéristiques</h4>
509
+ <ul id="modal-product-features" class="list-disc pl-5 text-gray-600"></ul>
510
+ </div>
511
+ </div>
512
+ </div>
513
+ </div>
514
+ </div>
515
+ </div>
516
+
517
+ <!-- Order Confirmation Toast -->
518
+ <div id="toast" class="fixed bottom-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg transform translate-y-10 opacity-0 transition-all duration-300 z-50 hidden">
519
+ <div class="flex items-center">
520
+ <i class="fas fa-check-circle mr-2"></i>
521
+ <span id="toast-message">Produit ajouté au panier</span>
522
+ </div>
523
+ </div>
524
+
525
  <script>
526
+ // Configuration Firebase
527
+ const firebaseConfig = {
528
+ apiKey: "AIzaSyDv8Q4j1jJ8X7X9Q4Q2Q3Q4Q5Q6Q7Q8Q9",
529
+ authDomain: "atelier-picking.firebaseapp.com",
530
+ projectId: "atelier-picking",
531
+ storageBucket: "atelier-picking.appspot.com",
532
+ messagingSenderId: "123456789012",
533
+ appId: "1:123456789012:web:abcdefghijklmnopqrstuv"
534
+ };
535
+
536
+ // Initialisation Firebase
537
+ firebase.initializeApp(firebaseConfig);
538
+ const db = firebase.firestore();
539
+ const auth = firebase.auth();
540
+
541
+ // Variables globales
542
+ let cart = JSON.parse(localStorage.getItem('cart')) || [];
543
+ let currentProduct = null;
544
+
545
+ // DOM Elements
546
+ const cartButton = document.getElementById('cart-button');
547
+ const cartDropdown = document.getElementById('cart-dropdown');
548
+ const cartCount = document.getElementById('cart-count');
549
+ const cartItems = document.getElementById('cart-items');
550
+ const cartTotal = document.getElementById('cart-total');
551
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
552
+ const mobileMenu = document.getElementById('mobile-menu');
553
+ const productsContainer = document.getElementById('products-container');
554
+ const searchProducts = document.getElementById('search-products');
555
+ const categoryFilters = document.querySelectorAll('.category-filter');
556
+ const productModal = document.getElementById('product-modal');
557
+ const closeModal = document.getElementById('close-modal');
558
+ const quantityInput = document.getElementById('product-quantity');
559
+ const quantityButtons = document.querySelectorAll('.quantity-btn');
560
+ const addToCartBtn = document.getElementById('add-to-cart-btn');
561
+ const toast = document.getElementById('toast');
562
+ const contactForm = document.getElementById('contact-form');
563
+ const submitText = document.getElementById('submit-text');
564
+ const submitSpinner = document.getElementById('submit-spinner');
565
+
566
+ // Charger les produits depuis Firebase
567
+ function loadProducts() {
568
+ productsContainer.innerHTML = `
569
+ <div class="text-center py-8">
570
+ <i class="fas fa-spinner fa-spin text-4xl text-blue-atelier"></i>
571
+ <p class="mt-4">Chargement des produits...</p>
572
+ </div>
573
+ `;
574
+
575
+ db.collection("products").get().then((querySnapshot) => {
576
+ productsContainer.innerHTML = '';
577
+
578
+ querySnapshot.forEach((doc) => {
579
+ const product = doc.data();
580
+ productsContainer.appendChild(createProductCard(product));
581
+ });
582
+ }).catch((error) => {
583
+ productsContainer.innerHTML = `
584
+ <div class="text-center py-8 text-red-500">
585
+ <i class="fas fa-exclamation-triangle text-4xl"></i>
586
+ <p class="mt-4">Erreur lors du chargement des produits</p>
587
+ </div>
588
+ `;
589
+ console.error("Error loading products: ", error);
590
+ });
591
+ }
592
+
593
+ // Créer une carte produit
594
+ function createProductCard(product) {
595
+ const card = document.createElement('div');
596
+ card.className = 'product-card bg-white rounded-lg border border-gray-200 overflow-hidden transition duration-300';
597
+ card.dataset.category = product.category;
598
+ card.dataset.name = product.name.toLowerCase();
599
+
600
+ card.innerHTML = `
601
+ <div class="h-48 bg-gray-100 flex items-center justify-center p-4">
602
+ <img src="${product.image || 'https://via.placeholder.com/300x200?text=Produit'}" alt="${product.name}" class="h-full object-contain">
603
+ </div>
604
+ <div class="p-6">
605
+ <h3 class="text-xl font-bold mb-2 text-blue-atelier">${product.name}</h3>
606
+ <p class="text-gray-600 mb-4 line-clamp-2">${product.description}</p>
607
+ <div class="flex justify-between items-center">
608
+ <span class="text-lg font-bold text-blue-atelier">${formatPrice(product.price)}</span>
609
+ <button class="view-product-btn bg-blue-atelier text-white py-2 px-4 rounded hover:bg-blue-700 transition" data-id="${product.id}">
610
+ Voir le produit
611
+ </button>
612
+ </div>
613
+ </div>
614
+ `;
615
+
616
+ return card;
617
+ }
618
+
619
+ // Formater le prix
620
+ function formatPrice(price) {
621
+ return new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(price);
622
+ }
623
+
624
+ // Mettre à jour le panier
625
+ function updateCart() {
626
+ // Mettre à jour le compteur
627
+ const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);
628
+ cartCount.textContent = totalItems;
629
+
630
+ // Mettre à jour le dropdown
631
+ if (cart.length === 0) {
632
+ cartItems.innerHTML = '<p class="text-gray-500 text-center py-4">Votre panier est vide</p>';
633
+ cartTotal.textContent = '0,00 €';
634
+ } else {
635
+ cartItems.innerHTML = '';
636
+ let total = 0;
637
 
638
+ cart.forEach((item, index) => {
639
+ const itemTotal = item.price * item.quantity;
640
+ total += itemTotal;
641
+
642
+ const cartItem = document.createElement('div');
643
+ cartItem.className = 'cart-item px-4 py-3 border-b flex justify-between items-center';
644
+
645
+ cartItem.innerHTML = `
646
+ <div>
647
+ <h4 class="font-medium">${item.name}</h4>
648
+ <p class="text-sm text-gray-500">${formatPrice(item.price)} x ${item.quantity}</p>
649
+ </div>
650
+ <div class="flex items-center">
651
+ <span class="font-bold mr-4">${formatPrice(itemTotal)}</span>
652
+ <button class="remove-item text-red-500 hover:text-red-700" data-index="${index}">
653
+ <i class="fas fa-trash"></i>
654
+ </button>
655
+ </div>
656
+ `;
657
+
658
+ cartItems.appendChild(cartItem);
659
+ });
660
 
661
+ cartTotal.textContent = formatPrice(total);
662
+ }
663
+
664
+ // Sauvegarder dans localStorage
665
+ localStorage.setItem('cart', JSON.stringify(cart));
666
+ }
667
+
668
+ // Afficher le toast
669
+ function showToast(message) {
670
+ document.getElementById('toast-message').textContent = message;
671
+ toast.classList.remove('hidden');
672
+ toast.classList.remove('opacity-0');
673
+ toast.classList.remove('translate-y-10');
674
+ toast.classList.add('opacity-100');
675
+
676
+ setTimeout(() => {
677
+ toast.classList.remove('opacity-100');
678
+ toast.classList.add('opacity-0');
679
+ toast.classList.add('translate-y-10');
680
+ }, 3000);
681
+ }
682
+
683
+ // Ouvrir le modal produit
684
+ function openProductModal(product) {
685
+ currentProduct = product;
686
+
687
+ document.getElementById('modal-product-name').textContent = product.name;
688
+ document.getElementById('modal-product-image').src = product.image || 'https://via.placeholder.com/300x200?text=Produit';
689
+ document.getElementById('modal-product-image').alt = product.name;
690
+ document.getElementById('modal-product-description').textContent = product.description;
691
+ document.getElementById('modal-product-price').textContent = formatPrice(product.price);
692
+ document.getElementById('modal-product-tax').textContent = 'HT';
693
+
694
+ const featuresList = document.getElementById('modal-product-features');
695
+ featuresList.innerHTML = '';
696
+
697
+ if (product.features && product.features.length > 0) {
698
+ product.features.forEach(feature => {
699
+ const li = document.createElement('li');
700
+ li.textContent = feature;
701
+ featuresList.appendChild(li);
702
+ });
703
+ } else {
704
+ featuresList.innerHTML = '<li>Aucune caractéristique spécifiée</li>';
705
+ }
706
+
707
+ quantityInput.value = 1;
708
+
709
+ productModal.classList.remove('opacity-0');
710
+ productModal.classList.remove('invisible');
711
+ }
712
+
713
+ // Fermer le modal produit
714
+ function closeProductModal() {
715
+ productModal.classList.add('opacity-0');
716
+ productModal.classList.add('invisible');
717
+ }
718
+
719
+ // Filtrer les produits
720
+ function filterProducts() {
721
+ const searchTerm = searchProducts.value.toLowerCase();
722
+ const activeCategory = document.querySelector('.category-filter.active')?.dataset.category || 'all';
723
+
724
+ document.querySelectorAll('.product-card').forEach(card => {
725
+ const matchesSearch = card.dataset.name.includes(searchTerm);
726
+ const matchesCategory = activeCategory === 'all' || card.dataset.category === activeCategory;
727
+
728
+ if (matchesSearch && matchesCategory) {
729
+ card.style.display = 'block';
730
+ } else {
731
+ card.style.display = 'none';
732
+ }
733
+ });
734
+ }
735
+
736
+ // Événements
737
+ document.addEventListener('DOMContentLoaded', () => {
738
+ // Charger les produits
739
+ loadProducts();
740
+ updateCart();
741
+
742
+ // Panier dropdown
743
+ cartButton.addEventListener('click', () => {
744
+ cartDropdown.classList.toggle('hidden');
745
+ });
746
+
747
+ // Fermer le dropdown quand on clique ailleurs
748
+ document.addEventListener('click', (e) => {
749
+ if (!cartButton.contains(e.target) && !cartDropdown.contains(e.target)) {
750
+ cartDropdown.classList.add('hidden');
751
+ }
752
+ });
753
+
754
+ // Menu mobile
755
+ mobileMenuButton.addEventListener('click', () => {
756
+ mobileMenu.classList.toggle('hidden');
757
+ });
758
+
759
+ // Filtres de catégorie
760
+ categoryFilters.forEach(button => {
761
+ button.addEventListener('click', () => {
762
+ categoryFilters.forEach(btn => btn.classList.remove('bg-blue-atelier', 'text-white'));
763
+ button.classList.add('bg-blue-atelier', 'text-white');
764
+ filterProducts();
765
+ });
766
+ });
767
+
768
+ // Recherche de produits
769
+ searchProducts.addEventListener('input', filterProducts);
770
+
771
+ // Modal produit
772
+ productsContainer.addEventListener('click', (e) => {
773
+ if (e.target.closest('.view-product-btn')) {
774
+ const productId = e.target.closest('.view-product-btn').dataset.id;
775
+
776
+ db.collection("products").doc(productId).get().then((doc) => {
777
+ if (doc.exists) {
778
+ openProductModal({ id: doc.id, ...doc.data() });
779
+ }
780
+ }).catch((error) => {
781
+ console.error("Error loading product: ", error);
782
  });
783
  }
784
  });
785
+
786
+ // Fermer le modal
787
+ closeModal.addEventListener('click', closeProductModal);
788
+
789
+ // Boutons quantité
790
+ quantityButtons.forEach(button => {
791
+ button.addEventListener('click', () => {
792
+ let value = parseInt(quantityInput.value);
793
+
794
+ if (button.dataset.action === 'increase') {
795
+ quantityInput.value = value + 1;
796
+ } else if (button.dataset.action === 'decrease' && value > 1) {
797
+ quantityInput.value = value - 1;
798
+ }
799
+ });
800
+ });
801
+
802
+ // Ajouter au panier
803
+ addToCartBtn.addEventListener('click', () => {
804
+ if (currentProduct) {
805
+ const quantity = parseInt(quantityInput.value);
806
+ const existingItemIndex = cart.findIndex(item => item.id === currentProduct.id);
807
+
808
+ if (existingItemIndex >= 0) {
809
+ cart[existingItemIndex].quantity += quantity;
810
+ } else {
811
+ cart.push({
812
+ id: currentProduct.id,
813
+ name: currentProduct.name,
814
+ price: currentProduct.price,
815
+ quantity: quantity,
816
+ image: currentProduct.image
817
+ });
818
+ }
819
+
820
+ updateCart();
821
+ showToast('Produit ajouté au panier');
822
+ closeProductModal();
823
+ }
824
+ });
825
+
826
+ // Supprimer un article du panier
827
+ cartItems.addEventListener('click', (e) => {
828
+ if (e.target.closest('.remove-item')) {
829
+ const index = e.target.closest('.remove-item').dataset.index;
830
+ cart.splice(index, 1);
831
+ updateCart();
832
+ showToast('Produit retiré du panier');
833
+ }
834
+ });
835
+
836
+ // Formulaire de contact
837
+ contactForm.addEventListener('submit', (e) => {
838
+ e.preventDefault();
839
+
840
+ submitText.classList.add('hidden');
841
+ submitSpinner.classList.remove('hidden');
842
+
843
+ // Simuler l'envoi du formulaire
844
+ setTimeout(() => {
845
+ submitText.classList.remove('hidden');
846
+ submitSpinner.classList.add('hidden');
847
+
848
+ showToast('Votre message a été envoyé avec succès');
849
+ contactForm.reset();
850
+ }, 1500);
851
+ });
852
+
853
+ // Smooth scrolling
854
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
855
+ anchor.addEventListener('click', function (e) {
856
+ e.preventDefault();
857
+
858
+ const targetId = this.getAttribute('href');
859
+ if(targetId === '#') return;
860
+
861
+ const targetElement = document.querySelector(targetId);
862
+ if(targetElement) {
863
+ // Fermer le menu mobile si ouvert
864
+ mobileMenu.classList.add('hidden');
865
+
866
+ targetElement.scrollIntoView({
867
+ behavior: 'smooth'
868
+ });
869
+ }
870
+ });
871
+ });
872
  });
873
+
874
+ // Exemple de données pour Firebase (à remplacer par vos propres données)
875
+ // Ces données seraient normalement ajoutées via l'interface Firebase
876
+ const sampleProducts = [
877
+ {
878
+ id: "pick-to-light-pro",
879
+ name: "Système Pick-to-Light Pro",
880
+ description: "Solution avancée de picking visuel avec indicateurs LED et connectivité IoT.",
881
+ price: 2499,
882
+ category: "hardware",
883
+ features: [
884
+ "Indicateurs LED haute visibilité",
885
+ "Connectivité WiFi et Ethernet",
886
+ "Intégration avec les WMS",
887
+ "Installation facile et rapide"
888
+ ],
889
+ image: "https://atelier-picking.com/wp-content/uploads/2022/02/icon-pick-to-light.png"
890
+ },
891
+ {
892
+ id: "voice-picking-software",
893
+ name: "Logiciel Voice Picking",
894
+ description: "Solution logicielle complète pour la préparation de commandes mains-libres.",
895
+ price: 899,
896
+ category: "software",
897
+ features: [
898
+ "Reconnaissance vocale avancée",
899
+ "Compatibilité avec tous les terminaux vocaux",
900
+ "Interface d'administration intuitive",
901
+ "Rapports de performance en temps réel"
902
+ ],
903
+ image: "https://atelier-picking.com/wp-content/uploads/2022/02/icon-voice-picking.png"
904
+ },
905
+ {
906
+ id: "rfid-gate",
907
+ name: "Portique RFID",
908
+ description: "Système de portique RFID pour la traçabilité des marchandises.",
909
+ price: 3499,
910
+ category: "hardware",
911
+ features: [
912
+ "Détection à 360°",
913
+ "Portée jusqu'à 6 mètres",
914
+ "Intégration avec les ERP",
915
+ "Résistant aux environnements industriels"
916
+ ],
917
+ image: "https://atelier-picking.com/wp-content/uploads/2022/02/icon-rfid.png"
918
+ },
919
+ {
920
+ id: "mobile-picking-app",
921
+ name: "Application Mobile Picking",
922
+ description: "Application dédiée aux opérations logistiques sur terminaux mobiles.",
923
+ price: 599,
924
+ category: "software",
925
+ features: [
926
+ "Compatibilité Android et iOS",
927
+ "Interface utilisateur intuitive",
928
+ "Fonctionnement hors ligne",
929
+ "Synchronisation automatique"
930
+ ],
931
+ image: "https://atelier-picking.com/wp-content/uploads/2022/02/icon-mobile.png"
932
+ },
933
+ {
934
+ id: "consulting-day",
935
+ name: "Journée de consulting",
936
+ description: "Audit et recommandations pour optimiser vos opérations de picking.",
937
+ price: 990,
938
+ category: "service",
939
+ features: [
940
+ "Analyse complète des processus",
941
+ "Rapport détaillé avec recommandations",
942
+ "Plan d'action personnalisé",
943
+ "Suivi post-audit"
944
+ ],
945
+ image: "https://via.placeholder.com/300x200?text=Consulting"
946
+ }
947
+ ];
948
+
949
+ // Pour initialiser votre base de données Firebase, vous pouvez exécuter cette fonction une fois
950
+ // function initializeProducts() {
951
+ // sampleProducts.forEach(product => {
952
+ // db.collection("products").doc(product.id).set(product)
953
+ // .then(() => console.log("Product added: ", product.id))
954
+ // .catch(error => console.error("Error adding product: ", error));
955
+ // });
956
+ // }
957
+ // initializeProducts();
958
  </script>
959
  <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=supportATP/site-atp" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
960
  </html>