Spaces:
Running
Running
| <html><head><base href="."> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | |
| <style> | |
| :root { | |
| --primary: #03055B; | |
| --secondary: #e74c3c; | |
| --light: #ecf0f1; | |
| --dark: #2c3e50; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Poppins', sans-serif; | |
| } | |
| body { | |
| background: var(--light); | |
| } | |
| .header { | |
| background: var(--primary); | |
| padding: 1rem; | |
| color: white; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .auth-buttons { | |
| position: relative; | |
| } | |
| .auth-menu-button { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| background: var(--secondary); | |
| color: white; | |
| border: none; | |
| padding: 0.5rem 1rem; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| } | |
| .auth-dropdown { | |
| position: absolute; | |
| top: 100%; | |
| right: 0; | |
| background: white; | |
| border-radius: 4px; | |
| box-shadow: 0 2px 8px rgba(0,0,0,0.1); | |
| display: none; | |
| z-index: 1000; | |
| } | |
| .auth-dropdown.show { | |
| display: block; | |
| } | |
| .auth-dropdown button { | |
| display: block; | |
| width: 100%; | |
| padding: 0.75rem 1.5rem; | |
| border: none; | |
| background: none; | |
| cursor: pointer; | |
| text-align: left; | |
| color: var(--dark); | |
| } | |
| .auth-dropdown button:hover { | |
| background: var(--light); | |
| } | |
| .main-content { | |
| padding: 2rem; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .dashboard { | |
| display: none; | |
| } | |
| .dashboard-grid { | |
| display: grid; | |
| grid-template-columns: 250px 1fr; | |
| gap: 2rem; | |
| } | |
| .dashboard-menu { | |
| background: white; | |
| padding: 1rem; | |
| border-radius: 8px; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.1); | |
| } | |
| .dashboard-menu ul { | |
| list-style: none; | |
| } | |
| .dashboard-menu li { | |
| padding: 0.5rem; | |
| cursor: pointer; | |
| transition: 0.3s; | |
| margin-bottom: 0.5rem; | |
| } | |
| .dashboard-menu li:hover { | |
| background: var(--light); | |
| } | |
| .dashboard-content { | |
| background: white; | |
| padding: 2rem; | |
| border-radius: 8px; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.1); | |
| } | |
| .form-group { | |
| margin-bottom: 1rem; | |
| } | |
| .form-group label { | |
| display: block; | |
| margin-bottom: 0.5rem; | |
| } | |
| .form-group input, | |
| .form-group textarea, | |
| .form-group select { | |
| width: 100%; | |
| padding: 0.5rem; | |
| border: 1px solid #ddd; | |
| border-radius: 4px; | |
| } | |
| .form-group label::after { | |
| content: " *"; | |
| color: red; | |
| display: none; | |
| } | |
| .form-group label[for="productCategory"]::after, | |
| .form-group label[for="productGender"]::after { | |
| display: inline; | |
| } | |
| .form-group button.action-button { | |
| margin-top: 1rem; | |
| background: var(--primary); | |
| color: white; | |
| border: none; | |
| padding: 0.8rem 1.5rem; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.8rem; | |
| margin: 0; | |
| font-size: 1.1rem; | |
| min-width: 120px; | |
| height: 48px; | |
| margin-top: 16px; | |
| } | |
| .form-group button.action-button:hover { | |
| opacity: 0.9; | |
| transform: scale(1.02); | |
| transition: all 0.2s ease; | |
| } | |
| .form-group button.action-button i { | |
| font-size: 1.2rem; | |
| } | |
| .photo-upload-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 1rem; | |
| margin: 1rem 0; | |
| } | |
| .photo-upload-box { | |
| display: none; /* Add CSS to hide photo boxes by default */ | |
| aspect-ratio: 1; | |
| border: 2px dashed #ddd; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| } | |
| .client-interface { | |
| display: block; | |
| } | |
| .search-section { | |
| margin-bottom: 2rem; | |
| } | |
| div.search-section > div { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| margin-bottom: 1rem; | |
| } | |
| div.search-section > div > div { | |
| display: flex; | |
| flex: 1; | |
| position: relative; | |
| align-items: center; | |
| } | |
| .search-bar { | |
| width: 100%; | |
| padding: 1rem; | |
| border: 2px solid var(--primary); | |
| border-radius: 8px; | |
| margin-bottom: 0.5rem; | |
| height: 56px; | |
| } | |
| .search-buttons { | |
| display: flex; | |
| gap: 1rem; | |
| justify-content: flex-end; | |
| margin-top: 0.2rem; | |
| position: relative; | |
| } | |
| .search-button { | |
| position: static; | |
| transform: none; | |
| background: var(--primary); | |
| border: none; | |
| color: white; | |
| cursor: pointer; | |
| padding: 8px; | |
| border-radius: 4px; | |
| width: auto; | |
| min-width: 42px; | |
| height: 42px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| font-size: 16px; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.1); | |
| } | |
| .search-button:hover { | |
| opacity: 0.8; | |
| background: var(--secondary); | |
| transform: none; | |
| box-shadow: 0 3px 6px rgba(0,0,0,0.15); | |
| } | |
| .search-button:active { | |
| transform: none; | |
| } | |
| .search-button i { | |
| font-size: 18px; | |
| } | |
| .search-button i.loading { | |
| animation: spin 1s linear infinite; | |
| opacity: 0.8; | |
| } | |
| .filters { | |
| display: flex; | |
| gap: 1rem; | |
| flex-wrap: wrap; | |
| } | |
| .filter-item { | |
| padding: 0.5rem 1rem; | |
| background: white; | |
| border-radius: 20px; | |
| cursor: pointer; | |
| } | |
| .filter-item.active { | |
| background: var(--primary); | |
| color: white; | |
| } | |
| .products-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); | |
| gap: 2rem; | |
| } | |
| .product-card { | |
| background: white; | |
| border-radius: 8px; | |
| overflow: hidden; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.1); | |
| } | |
| .product-image { | |
| height: 200px; | |
| background: #ddd; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .product-image img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .product-info { | |
| padding: 1rem; | |
| } | |
| .share-buttons { | |
| display: flex; | |
| gap: 0.5rem; | |
| margin-top: 1rem; | |
| } | |
| .share-button { | |
| padding: 0.5rem; | |
| border: none; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| background: var(--primary); | |
| color: white; | |
| } | |
| .cart { | |
| position: fixed; | |
| right: 2rem; | |
| bottom: 50px; | |
| background: #FF8C00; | |
| color: white; | |
| padding: 1rem; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| box-shadow: 0 2px 8px rgba(0,0,0,0.2); | |
| transition: transform 0.2s; | |
| } | |
| .cart:hover { | |
| transform: scale(1.1); | |
| cursor: pointer; | |
| } | |
| .cart-modal { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0, 0, 0, 0.5); | |
| z-index: 1000; | |
| } | |
| .cart-content { | |
| position: fixed; | |
| right: 0; | |
| top: 0; | |
| height: 100%; | |
| width: 400px; | |
| background: white; | |
| padding: 2rem; | |
| box-shadow: -2px 0 8px rgba(0,0,0,0.1); | |
| } | |
| .cart-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 2rem; | |
| } | |
| .close-cart { | |
| background: none; | |
| border: none; | |
| font-size: 2rem; | |
| cursor: pointer; | |
| color: var(--dark); | |
| } | |
| .cart-items { | |
| max-height: calc(100vh - 200px); | |
| overflow-y: auto; | |
| } | |
| .cart-footer { | |
| position: absolute; | |
| bottom: 2rem; | |
| left: 2rem; | |
| right: 2rem; | |
| } | |
| .cart-total { | |
| font-size: 1.2rem; | |
| font-weight: bold; | |
| margin-bottom: 1rem; | |
| } | |
| .checkout-button { | |
| width: 100%; | |
| padding: 1rem; | |
| background: var(--primary); | |
| color: white; | |
| border: none; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| } | |
| .cart-item { | |
| display: grid; | |
| grid-template-columns: 100px 1fr auto; | |
| gap: 1rem; | |
| padding: 1rem; | |
| border-bottom: 1px solid #eee; | |
| align-items: start; | |
| } | |
| .cart-item-image { | |
| width: 100px; | |
| height: 100px; | |
| object-fit: cover; | |
| border-radius: 4px; | |
| } | |
| .cart-item-info { | |
| flex-grow: 1; | |
| } | |
| .cart-item-info h3 { | |
| margin-bottom: 0.5rem; | |
| } | |
| .cart-item-info .description { | |
| font-size: 0.9rem; | |
| color: #666; | |
| margin-bottom: 0.5rem; | |
| } | |
| .cart-item-info .details { | |
| font-size: 0.8rem; | |
| color: #888; | |
| } | |
| .advanced-filters { | |
| background: white; | |
| padding: 1rem; | |
| border-radius: 8px; | |
| margin: 1rem 0; | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 1rem; | |
| position: relative; | |
| } | |
| .filter-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| min-width: 0; | |
| } | |
| .apply-filters { | |
| display: none; | |
| } | |
| .price-range { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .price-range input { | |
| width: 100px; | |
| } | |
| .date-range { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .date-range input { | |
| flex: 1; | |
| padding: 0.5rem; | |
| border: 1px solid #ddd; | |
| border-radius: 4px; | |
| } | |
| @keyframes fadeOut { | |
| 0% { opacity: 1; } | |
| 70% { opacity: 1; } | |
| 100% { opacity: 0; } | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| .quantity-controls { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| margin-top: 0.5rem; | |
| } | |
| .quantity-controls button { | |
| background: var(--primary); | |
| color: white; | |
| border: none; | |
| width: 24px; | |
| height: 24px; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| } | |
| .quantity-controls span { | |
| min-width: 24px; | |
| text-align: center; | |
| } | |
| .toggle-filters-btn { | |
| width: 100%; | |
| padding: 0.75rem; | |
| background: var(--primary); | |
| color: white; | |
| border: none; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 0.5rem; | |
| margin: 1rem 0; | |
| } | |
| .toggle-filters-btn i { | |
| transition: transform 0.3s ease; | |
| } | |
| .advanced-filters { | |
| max-height: 1000px; | |
| opacity: 1; | |
| transition: all 0.3s ease-in-out; | |
| overflow: hidden; | |
| } | |
| .advanced-filters.collapsed { | |
| max-height: 0; | |
| opacity: 0; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .toggle-filters-btn.active i { | |
| transform: rotate(180deg); | |
| } | |
| .filter-toggle-btn { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 0.5rem 1rem; | |
| background: var(--primary); | |
| color: white; | |
| border: none; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| margin-bottom: 1rem; | |
| } | |
| .filter-toggle-btn.active { | |
| background: var(--secondary); | |
| } | |
| .filter-toggle-btn i { | |
| transition: color 0.3s ease; | |
| } | |
| .file-input { | |
| display: none; | |
| } | |
| .photo-upload-window { | |
| position: fixed; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| background: white; | |
| padding: 2rem; | |
| border-radius: 8px; | |
| box-shadow: 0 4px 12px rgba(0,0,0,0.15); | |
| z-index: 2000; | |
| display: none; | |
| width: 90%; | |
| max-width: 400px; /* Reduced from 500px */ | |
| } | |
| .photo-upload-window h3 { | |
| margin-bottom: 1rem; | |
| } | |
| .photo-upload-preview { | |
| width: 100%; | |
| height: 200px; | |
| border: 2px dashed #ddd; | |
| align-items: center; | |
| justify-content: center; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .photo-upload-preview img { | |
| max-width: 100%; | |
| max-height: 100%; | |
| object-fit: contain; | |
| } | |
| .photo-upload-window .buttons { | |
| display: flex; | |
| gap: 1rem; | |
| justify-content: flex-end; | |
| } | |
| .photo-upload-window button { | |
| padding: 0.5rem 1rem; | |
| border: none; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| } | |
| .photo-upload-window .upload-btn { | |
| background: var(--primary); | |
| color: white; | |
| } | |
| .photo-upload-window .cancel-btn { | |
| background: #ddd; | |
| } | |
| .product-actions { | |
| display: flex; | |
| gap: 0.5rem; | |
| margin-top: 0.5rem; | |
| } | |
| .product-actions button { | |
| padding: 0.5rem; | |
| border: none; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| color: white; | |
| } | |
| .edit-product { | |
| background: var(--primary); | |
| } | |
| .delete-product { | |
| background: var(--secondary); | |
| } | |
| .action-button { | |
| background: var(--primary); | |
| color: white; | |
| border: none; | |
| padding: 0.5rem 1rem; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| margin: 0; | |
| } | |
| .action-button:hover { | |
| opacity: 0.9; | |
| } | |
| .newProductSection { | |
| background: white; | |
| padding: 1rem; | |
| border-radius: 8px; | |
| margin-top: 1rem; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.1); | |
| } | |
| .buttons-container { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 1rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .category-item { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 0.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| .order-status-buttons { | |
| display: flex; | |
| gap: 1rem; | |
| margin-top: 1rem; | |
| } | |
| .status-button { | |
| padding: 0.5rem 1rem; | |
| border: none; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| color: white; | |
| } | |
| .found-button { | |
| background: #27ae60; | |
| } | |
| .not-found-button { | |
| background: #c0392b; | |
| } | |
| .order-item[data-status="found"] { | |
| border-left: 4px solid #27ae60; | |
| } | |
| .order-item[data-status="not-found"] { | |
| border-left: 4px solid #c0392b; | |
| } | |
| .item-status-buttons { | |
| display: flex; | |
| gap: 0.5rem; | |
| } | |
| .status-button { | |
| padding: 0.5rem 1rem; | |
| border: none; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .status-button.active { | |
| transform: scale(1.05); | |
| } | |
| .order-item-detail { | |
| transition: border-left-color 0.3s ease; | |
| } | |
| .scrolling-banner { | |
| position: fixed; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| background: var(--primary); | |
| color: white; | |
| overflow: hidden; | |
| height: 40px; | |
| z-index: 999; | |
| } | |
| .scrolling-text { | |
| white-space: nowrap; | |
| animation: scroll-left 20s linear infinite; | |
| display: inline-block; | |
| padding: 10px; | |
| } | |
| @keyframes scroll-left { | |
| 0% { | |
| transform: translateX(100%); | |
| } | |
| 100% { | |
| transform: translateX(-100%); | |
| } | |
| } | |
| .category-section { | |
| margin-bottom: 2rem; | |
| } | |
| .category-title { | |
| font-size: 1.5rem; | |
| color: var(--primary); | |
| margin-bottom: 1rem; | |
| padding-bottom: 0.5rem; | |
| border-bottom: 2px solid var(--primary); | |
| } | |
| .category-section .products-grid { | |
| margin-top: 1rem; | |
| } | |
| .home-button { | |
| position: fixed; | |
| left: 20px; | |
| bottom: 50px; | |
| background: #FF8C00; | |
| color: white; | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 50%; | |
| border: none; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| box-shadow: 0 2px 8px rgba(0,0,0,0.2); | |
| z-index: 998; | |
| font-size: 1.5em; | |
| } | |
| .home-button:hover { | |
| transform: scale(1.1); | |
| transition: all 0.2s; | |
| } | |
| @media (max-width: 768px) { | |
| /* Header adjustments */ | |
| .header { | |
| flex-direction: column; | |
| gap: 1rem; | |
| text-align: center; | |
| padding: 1rem 0.5rem; | |
| } | |
| .header h1 { | |
| font-size: 1.5rem; | |
| } | |
| /* Search section adjustments */ | |
| .search-section { | |
| padding: 0 0.5rem; | |
| } | |
| .search-buttons { | |
| justify-content: center; | |
| } | |
| /* Advanced filters adjustments */ | |
| .advanced-filters { | |
| grid-template-columns: 1fr; | |
| } | |
| .price-range { | |
| flex-direction: column; | |
| align-items: stretch; | |
| } | |
| .price-range input { | |
| width: 100%; | |
| } | |
| .date-range { | |
| flex-direction: column; | |
| align-items: stretch; | |
| } | |
| .date-range input { | |
| width: 100%; | |
| } | |
| /* Products grid adjustments */ | |
| .products-grid { | |
| grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); | |
| gap: 1rem; | |
| padding: 0.5rem; | |
| } | |
| /* Cart adjustments */ | |
| .cart-content { | |
| width: 100%; | |
| padding: 1rem; | |
| } | |
| .cart-item { | |
| grid-template-columns: 80px 1fr auto; | |
| gap: 0.5rem; | |
| padding: 0.5rem; | |
| } | |
| .cart-item-image { | |
| width: 80px; | |
| height: 80px; | |
| } | |
| /* Dashboard adjustments */ | |
| .dashboard-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .dashboard-menu { | |
| margin-bottom: 1rem; | |
| } | |
| .dashboard-menu ul { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.5rem; | |
| } | |
| .dashboard-menu li { | |
| flex: 1; | |
| text-align: center; | |
| background: var(--primary); | |
| color: white; | |
| border-radius: 4px; | |
| padding: 0.75rem; | |
| } | |
| /* Photo upload grid adjustments */ | |
| .photo-upload-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| /* Form adjustments */ | |
| .form-group input, | |
| .form-group textarea, | |
| .form-group select { | |
| font-size: 16px; /* Prevents zoom on mobile */ | |
| } | |
| /* Main content padding adjustment */ | |
| .main-content { | |
| padding: 1rem; | |
| } | |
| /* Cart icon adjustment */ | |
| .cart { | |
| right: 1rem; | |
| bottom: 40px; | |
| } | |
| /* Auth dropdown adjustment */ | |
| .auth-dropdown { | |
| right: 50%; | |
| transform: translateX(50%); | |
| width: 90%; | |
| max-width: 300px; | |
| } | |
| /* Filter buttons adjustment */ | |
| .filters { | |
| flex-direction: column; | |
| } | |
| .filter-toggle-btn, | |
| .toggle-filters-btn { | |
| width: 100%; | |
| } | |
| /* Scrolling banner adjustments */ | |
| .scrolling-banner { | |
| height: 30px; | |
| } | |
| .scrolling-text { | |
| font-size: 14px; | |
| padding: 6px; | |
| } | |
| .cart { | |
| bottom: 40px; | |
| } | |
| .home-button { | |
| left: 16px; | |
| bottom: 40px; | |
| width: 40px; | |
| height: 40px; | |
| font-size: 1.2em; | |
| } | |
| } | |
| @media (max-width: 380px) { | |
| .products-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .photo-upload-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .header h1 { | |
| font-size: 1.2rem; | |
| } | |
| .cart-item { | |
| grid-template-columns: 1fr; | |
| text-align: center; | |
| } | |
| .cart-item-image { | |
| margin: 0 auto; | |
| } | |
| } | |
| @media (min-width: 769px) { | |
| .main-content, | |
| .header, | |
| .products-grid, | |
| .dashboard-grid, | |
| .cart-content, | |
| .form-group, | |
| .search-section, | |
| .filters, | |
| .advanced-filters { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| } | |
| .delete-order-btn { | |
| background: var(--secondary); | |
| color: white; | |
| border: none; | |
| padding: 0.5rem 1rem; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| margin-top: 1rem; | |
| } | |
| .delete-order-btn:hover { | |
| opacity: 0.9; | |
| } | |
| /* Updated styles for the order confirmation modal */ | |
| #order-confirmation { | |
| display: none; | |
| position: fixed; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| background: white; | |
| padding: 2rem; | |
| border-radius: 8px; | |
| box-shadow: 0 2px 8px rgba(0,0,0,0.2); | |
| } | |
| #order-confirmation button { | |
| margin-top: 1rem; | |
| padding: 0.8rem 2rem; | |
| font-size: 1.2rem; | |
| font-weight: 500; | |
| background: var(--primary); | |
| color: white; | |
| border: none; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| min-width: 120px; | |
| transition: all 0.2s ease; | |
| } | |
| #order-confirmation button:hover { | |
| opacity: 0.9; | |
| transform: scale(1.02); | |
| } | |
| /* Add new styles for category dropdown */ | |
| .category-dropdown { | |
| position: relative; | |
| width: 200px; | |
| margin-bottom: 1rem; | |
| } | |
| .category-dropdown select { | |
| width: 100%; | |
| padding: 0.8rem; | |
| border: 1px solid var(--primary); | |
| border-radius: 4px; | |
| appearance: none; | |
| background: white; | |
| cursor: pointer; | |
| font-size: 1rem; | |
| } | |
| .category-dropdown::after { | |
| content: '\f078'; | |
| font-family: 'Font Awesome 5 Free'; | |
| font-weight: 900; | |
| position: absolute; | |
| right: 10px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| pointer-events: none; | |
| } | |
| /* Add persistence checkbox styles */ | |
| .form-group .persistence-option { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| margin-top: 0.25rem; | |
| font-size: 0.9em; | |
| color: #666; | |
| } | |
| .form-group .persistence-option input[type="checkbox"] { | |
| width: auto; | |
| } | |
| /* Add new styles */ | |
| .photo-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 0.5rem; | |
| margin-top: 1rem; | |
| } | |
| .photo-grid img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| cursor: pointer; | |
| } | |
| .photo-modal { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0, 0, 0, 0.8); | |
| display: none; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 2000; | |
| } | |
| .photo-modal img { | |
| max-width: 90%; | |
| max-height: 90vh; | |
| object-fit: contain; | |
| } | |
| .product-photos button { | |
| width: 100%; | |
| padding: 0.5rem; | |
| margin-top: 0.5rem; | |
| background: var(--primary); | |
| color: white; | |
| border: none; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| } | |
| .details-button { | |
| width: 100%; | |
| padding: 0.5rem; | |
| margin-top: 0.5rem; | |
| background: var(--primary); | |
| color: white; | |
| border: none; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| } | |
| .product-details { | |
| display: none; | |
| margin-top: 1rem; | |
| padding: 1rem; | |
| background: #f8f8f8; | |
| border-radius: 4px; | |
| } | |
| .photo-upload-flex { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.5rem; | |
| margin-bottom: 1.5rem; /* Add margin bottom for spacing */ | |
| } | |
| .photo-upload-flex > button { | |
| flex: 1; | |
| min-width: 120px; | |
| padding: 0.5rem; | |
| background: var(--primary); | |
| color: white; | |
| border: none; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| } | |
| .toast-notification { | |
| position: fixed; | |
| bottom: 20px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| background: #FF8C00; | |
| color: white; | |
| padding: 1rem 2rem; | |
| border-radius: 4px; | |
| z-index: 1000; | |
| animation: fadeOut 2s forwards; | |
| } | |
| </style> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js"></script> | |
| <header class="header"> | |
| <h1>FRIPTEDO.BF chez ROAMBA & Frères à NAGRIN</h1> | |
| <div class="auth-buttons"> | |
| <button onclick="toggleAuthMenu()" class="auth-menu-button"> | |
| <i class="fas fa-user"></i> | |
| Interface | |
| <i class="fas fa-chevron-down"></i> | |
| </button> | |
| <div id="vendorLoginModal" class="modal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:2000;"> | |
| <div class="modal-content" style="position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:white; padding:2rem; border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,0.15); max-width:400px; width:90%;"> | |
| <h3>Accès Interface Vendeur</h3> | |
| <div class="form-group" style="margin:1rem 0;"> | |
| <input type="password" id="vendorCode" placeholder="Entrer le code d'accès" style="width:100%; padding:0.5rem; border:1px solid #ddd; border-radius:4px;"> | |
| </div> | |
| <div style="display:flex; gap:1rem; justify-content:flex-end;"> | |
| <button onclick="closeVendorLogin()" style="padding:0.5rem 1rem; border:none; border-radius:4px; cursor:pointer; background:#ddd;">Annuler</button> | |
| <button onclick="checkVendorCode()" style="padding:0.5rem 1rem; border:none; border-radius:4px; cursor:pointer; background:var(--primary); color:white;">Valider</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="auth-dropdown" class="auth-dropdown"> | |
| <button onclick="toggleInterface('client')">Client</button> | |
| <button onclick="showVendorLogin()">Vendeur</button> | |
| </div> | |
| </div> | |
| </header> | |
| <div id="photoUploadWindow" class="photo-upload-window"> | |
| <h3>Importer une photo</h3> | |
| <div id="photoPreview" class="photo-upload-preview"> | |
| <i class="fas fa-cloud-upload-alt fa-2x"></i> | |
| </div> | |
| <input type="file" id="fileInput" class="file-input" accept="image/*"> | |
| <div class="buttons"> | |
| <button class="cancel-btn" onclick="closeUploadWindow()">Annuler</button> | |
| <button class="upload-btn" onclick="document.getElementById('fileInput').click()">Choisir une photo</button> | |
| </div> | |
| </div> | |
| <!-- Add hidden file input with camera support --> | |
| <input type="file" id="productPhotoInput" accept="image/*" capture="environment" multiple style="display: none"> | |
| <main class="main-content"> | |
| <button onclick="scrollToTop()" class="home-button"> | |
| <i class="fas fa-home"></i> | |
| </button> | |
| <!-- Interface Client --> | |
| <div class="client-interface"> | |
| <section class="search-section"> | |
| <div> | |
| <div> | |
| <input type="text" class="search-bar" placeholder="Rechercher des articles..."> | |
| <input type="file" id="imageSearchInput" accept="image/*" style="display: none"> | |
| </div> | |
| <div class="search-buttons"> | |
| <button onclick="performSearch()" class="search-button"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| <button onclick="document.getElementById('imageSearchInput').click()" class="search-button"> | |
| <i class="fas fa-camera"></i> | |
| <span style="font-size: 0.8em; white-space: nowrap;">Recherche à partir d'image</span> | |
| </button> | |
| </div> | |
| </div> | |
| <button class="toggle-filters-btn" onclick="toggleAdvancedFilters()"> | |
| Filtres avancés <i class="fas fa-chevron-down"></i> | |
| </button> | |
| <div class="advanced-filters collapsed" id="advancedFilters"> | |
| <div class="filter-group"> | |
| <label>Genre</label> | |
| <select id="gender-filter"> | |
| <option value>Tous</option> | |
| <option value="homme">Homme</option> | |
| <option value="femme">Femme</option> | |
| <option value="unigenre">Unigenre</option> | |
| </select> | |
| </div> | |
| <div class="filter-group"> | |
| <label>Catégorie</label> | |
| <select id="category-filter"> | |
| <option value>Toutes</option> | |
| </select> | |
| </div> | |
| <div class="filter-group"> | |
| <label>Taille</label> | |
| <select id="size-filter"> | |
| <option value>Toutes</option> | |
| <option value="xs">XS</option> | |
| <option value="s">S</option> | |
| <option value="m">M</option> | |
| <option value="l">L</option> | |
| <option value="xl">XL</option> | |
| <option value="xxl">XXL</option> | |
| </select> | |
| </div> | |
| <div class="filter-group"> | |
| <label>Prix</label> | |
| <div class="price-range"> | |
| <input type="number" id="min-price" placeholder="Min FCFA"> | |
| <span>-</span> | |
| <input type="number" id="max-price" placeholder="Max FCFA"> | |
| </div> | |
| </div> | |
| <div class="filter-group"> | |
| <label>Date d'arrivage</label> | |
| <div class="date-range"> | |
| <input type="date" id="arrival-start" placeholder="Date d'arrivage debut"> | |
| <span>-</span> | |
| <input type="date" id="arrival-end" placeholder="Date d'arrivage fin"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="filters"> | |
| <button class="filter-toggle-btn" onclick="toggleFilterMode()"> | |
| <i class="fas fa-filter"></i> | |
| <span>Activer les filtres</span> | |
| </button> | |
| </div> | |
| </section> | |
| <div id="search-results-count" style="margin: 1rem 0; font-size: 0.9rem; color: #666;"></div> | |
| <section class="products-grid"> | |
| <div class="product-card"> | |
| <div class="product-image"> | |
| <i class="fas fa-tshirt fa-3x"></i> | |
| </div> | |
| <div class="product-info"> | |
| <h3>T-Shirt Vintage</h3> | |
| <p>25 FCFA</p> | |
| <div class="share-buttons"> | |
| <button class="share-button" onclick="shareProduct('whatsapp', '')"> | |
| <i class="fab fa-whatsapp"></i> | |
| </button> | |
| <button class="share-button" onclick="shareProduct('facebook', '')"> | |
| <i class="fab fa-facebook"></i> | |
| </button> | |
| <button class="share-button" onclick="addToCart('')"> | |
| <i class="fas fa-cart-plus"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <!-- Interface Vendeur --> | |
| <div class="dashboard"> | |
| <div class="dashboard-grid"> | |
| <div class="dashboard-menu"> | |
| <ul> | |
| <li onclick="showDashboardSection('categories')">Gérer les catégories</li> | |
| <li onclick="showDashboardSection('products')">Gérer les articles</li> | |
| <li onclick="showDashboardSection('orders')">Commandes</li> | |
| <li onclick="checkStorageUsage()">Consulter l'espace de stockage</li> | |
| </ul> | |
| </div> | |
| <div class="dashboard-content"> | |
| <!-- Categories Section --> | |
| <div id="categories-section"> | |
| <h2>Gérer les catégories</h2> | |
| <div class="form-group"> | |
| <input type="text" id="newCategory" placeholder="Nouvelle catégorie"> | |
| <button onclick="addCategory()" class="action-button">Ajouter</button> | |
| </div> | |
| <div id="categoriesList"> | |
| <!-- Categories will be added here --> | |
| </div> | |
| </div> | |
| <!-- Products Section --> | |
| <div id="products-section" style="display: none;"> | |
| <h2>Gérer les articles</h2> | |
| <div class="catalog-section"> | |
| <div class="buttons-container"> | |
| <button onclick="toggleNewProductForm()" class="action-button"> | |
| <i class="fas fa-plus"></i> Nouvel article | |
| </button> | |
| </div> | |
| <h3>Catalogue par catégories</h3> | |
| <div id="newProductSection" style="display: none;"> | |
| <h3>Ajouter un nouvel article</h3> | |
| <form id="productForm"> | |
| <div class="form-group"> | |
| <label>Nom de l'article</label> | |
| <input type="text" id="productName"> | |
| <div class="persistence-option"> | |
| <input type="checkbox" id="persistProductName"> | |
| <label for="persistProductName">Mémoriser cette valeur</label> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label>Description</label> | |
| <textarea id="productDescription"></textarea> | |
| <div class="persistence-option"> | |
| <input type="checkbox" id="persistDescription"> | |
| <label for="persistDescription">Mémoriser cette valeur</label> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label>Prix</label> | |
| <input type="number" id="productPrice"> | |
| <div class="persistence-option"> | |
| <input type="checkbox" id="persistPrice"> | |
| <label for="persistPrice">Mémoriser cette valeur</label> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label>Catégorie *</label> | |
| <div class="category-dropdown"> | |
| <select id="productCategory" required> | |
| <option value>Sélectionner une catégorie</option> | |
| </select> | |
| </div> | |
| <div class="persistence-option"> | |
| <input type="checkbox" id="persistCategory"> | |
| <label for="persistCategory">Mémoriser cette valeur</label> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label>Genre *</label> | |
| <select id="productGender" required> | |
| <option value>Sélectionner un genre</option> | |
| <option value="homme">Homme</option> | |
| <option value="femme">Femme</option> | |
| <option value="unigenre">Unigenre</option> | |
| </select> | |
| <div class="persistence-option"> | |
| <input type="checkbox" id="persistGender"> | |
| <label for="persistGender">Mémoriser cette valeur</label> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label>Taille</label> | |
| <select id="productSize"> | |
| <option value>Sélectionner une taille</option> | |
| <option value="xs">XS</option> | |
| <option value="s">S</option> | |
| <option value="m">M</option> | |
| <option value="l">L</option> | |
| <option value="xl">XL</option> | |
| <option value="xxl">XXL</option> | |
| </select> | |
| <div class="persistence-option"> | |
| <input type="checkbox" id="persistSize"> | |
| <label for="persistSize">Mémoriser cette valeur</label> | |
| </div> | |
| </div> | |
| <!-- New fields added as per the plan --> | |
| <div class="form-group"> | |
| <label>Marque</label> | |
| <input type="text" id="productBrand"> | |
| <div class="persistence-option"> | |
| <input type="checkbox" id="persistBrand"> | |
| <label for="persistBrand">Mémoriser cette valeur</label> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label>Style</label> | |
| <input type="text" id="productStyle"> | |
| <div class="persistence-option"> | |
| <input type="checkbox" id="persistStyle"> | |
| <label for="persistStyle">Mémoriser cette valeur</label> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label>Matière</label> | |
| <input type="text" id="productMaterial"> | |
| <div class="persistence-option"> | |
| <input type="checkbox" id="persistMaterial"> | |
| <label for="persistMaterial">Mémoriser cette valeur</label> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label>Emplacement de stockage</label> | |
| <input type="text" id="productLocation"> | |
| <div class="persistence-option"> | |
| <input type="checkbox" id="persistLocation"> | |
| <label for="persistLocation">Mémoriser cette valeur</label> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label>Couleur dominante</label> | |
| <input type="text" id="productColor"> | |
| <div class="persistence-option"> | |
| <input type="checkbox" id="persistColor"> | |
| <label for="persistColor">Mémoriser cette valeur</label> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label>Date d'arrivage</label> | |
| <input type="date" id="productArrivalDate"> | |
| <div class="persistence-option"> | |
| <input type="checkbox" id="persistArrivalDate"> | |
| <label for="persistArrivalDate">Mémoriser cette valeur</label> | |
| </div> | |
| </div> | |
| <!-- End of new fields --> | |
| <div class="photo-upload-flex"> | |
| <button onclick="uploadPhoto(0)">Photo principale</button> | |
| <button onclick="toggleAdditionalPhotos()">Ajouter photos</button> | |
| </div> | |
| <div id="additionalPhotos" class="photo-upload-grid" style="display: none;"> | |
| <div class="photo-upload-box" onclick="uploadPhoto(1)"> | |
| <i class="fas fa-camera-retro"></i> | |
| </div> | |
| <div class="photo-upload-box" onclick="uploadPhoto(2)"> | |
| <i class="fas fa-camera-retro"></i> | |
| </div> | |
| <div class="photo-upload-box" onclick="uploadPhoto(3)"> | |
| <i class="fas fa-camera-retro"></i> | |
| </div> | |
| <div class="photo-upload-box" onclick="uploadPhoto(4)"> | |
| <i class="fas fa-camera-retro"></i> | |
| </div> | |
| <div class="photo-upload-box" onclick="uploadPhoto(5)"> | |
| <i class="fas fa-camera-retro"></i> | |
| </div> | |
| <div class="photo-upload-box" onclick="uploadPhoto(6)"> | |
| <i class="fas fa-camera-retro"></i> | |
| </div> | |
| <div class="photo-upload-box" onclick="uploadPhoto(7)"> | |
| <i class="fas fa-camera-retro"></i> | |
| </div> | |
| </div> | |
| <button type="submit" class="action-button">Créer l'article</button> | |
| </form> | |
| </div> | |
| <div id="productsCatalog" class="products-grid" style="margin-top: 1rem;"> | |
| <!-- Products will be loaded here --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Orders Section --> | |
| <div id="orders-section" style="display: none;"> | |
| <h2>Commandes</h2> | |
| <div id="orders-list"> | |
| <!-- Orders will be listed here --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="cart"> | |
| <i class="fas fa-shopping-cart"></i> | |
| <span class="cart-count">0</span> | |
| </div> | |
| <div id="cart-modal" class="cart-modal"> | |
| <div class="cart-content"> | |
| <div class="cart-header"> | |
| <h2>Panier</h2> | |
| <div style="display: flex; gap: 1rem; align-items: center;"> | |
| <button onclick="clearCart()" class="clear-cart-button" style="background: var(--secondary); color: white; border: none; padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer;"> | |
| <i class="fas fa-trash-alt"></i> Vider le panier | |
| </button> | |
| <button class="close-cart">×</button> | |
| </div> | |
| </div> | |
| <div class="cart-items"> | |
| <!-- Cart items will be populated here --> | |
| </div> | |
| <div class="cart-footer"> | |
| <div class="cart-total">Total: 0 FCFA</div> | |
| <div class="form-group" style="margin: 1rem 0;"> | |
| <label for="cartName">Nom du panier</label> | |
| <input type="text" id="cartName" placeholder="Donnez un nom à votre panier" style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; margin-top: 0.5rem;"> | |
| </div> | |
| <button class="checkout-button">Commander</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="order-confirmation" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:white; padding:2rem; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,0.2); z-index:2000;"> | |
| <h3>Commande envoyée!</h3> | |
| <p>Votre commande a été transmise au vendeur.</p> | |
| <button onclick="this.parentElement.style.display='none'" style="margin-top:1rem; padding:0.8rem 2rem; font-size:1.2rem; font-weight:500; background:var(--primary); color:white; border:none; border-radius:4px; cursor:pointer; min-width:120px;">OK</button> | |
| </div> | |
| </main> | |
| <div class="scrolling-banner"> | |
| <div class="scrolling-text"> | |
| Adresse boutique : www.76641411.friptedo.bf     réalisée par www.friptedo.bf | |
| </div> | |
| </div> | |
| <script>let products = [{ | |
| id: '1', | |
| name: 'T-Shirt Vintage', | |
| description: 'T-shirt vintage en excellent état', | |
| price: 25000, | |
| category: 'T-Shirts', | |
| gender: 'homme', | |
| size: 'm', | |
| images: [] | |
| }, { | |
| id: '2', | |
| name: 'Robe d\'été', | |
| description: 'Robe d\'été légère et élégante', | |
| price: 35000, | |
| category: 'Robes', | |
| gender: 'femme', | |
| size: 's', | |
| images: [] | |
| }]; | |
| let categories = ['T-Shirts', 'Robes', 'Pantalons', 'Chemises', 'Jupes']; | |
| document.addEventListener('DOMContentLoaded', function () { | |
| updateCategoriesList(); | |
| updateProductDisplay(products); | |
| const productCategory = document.getElementById('productCategory'); | |
| if (productCategory) { | |
| productCategory.innerHTML = ` | |
| <option value="">Sélectionner une catégorie</option> | |
| ${categories.map(cat => `<option value="${cat}">${cat}</option>`).join('')} | |
| `; | |
| } | |
| const filterInputs = ['gender-filter', 'category-filter', 'size-filter', 'min-price', 'max-price']; | |
| filterInputs.forEach(id => { | |
| document.getElementById(id)?.addEventListener('change', () => { | |
| if (filtersEnabled) { | |
| applyFilters(); | |
| } | |
| }); | |
| }); | |
| document.getElementById('gender-filter').innerHTML = ` | |
| <option value="">Tous</option> | |
| <option value="homme">Homme</option> | |
| <option value="femme">Femme</option> | |
| <option value="unigenre">Unigenre</option> | |
| `; | |
| document.getElementById('imageSearchInput').addEventListener('change', function (e) { | |
| if (e.target.files && e.target.files[0]) { | |
| searchByImage(e.target.files[0]); | |
| } | |
| }); | |
| ['Name', 'Description', 'Price', 'Category', 'Gender', 'Size', 'Brand', 'Style', 'Material', 'Location', 'Color'].forEach(field => { | |
| const checkbox = document.getElementById(`persist${field}`); | |
| const input = document.getElementById(`product${field}`); | |
| if (checkbox && input) { | |
| checkbox.addEventListener('change', () => { | |
| persistentFields[`product${field}`] = checkbox.checked; | |
| if (checkbox.checked) { | |
| persistentValues[`product${field}`] = input.value; | |
| } | |
| }); | |
| input.addEventListener('change', () => { | |
| if (persistentFields[`product${field}`]) { | |
| persistentValues[`product${field}`] = input.value; | |
| } | |
| }); | |
| } | |
| }); | |
| }); | |
| let cartCount = 0; | |
| let cart = []; | |
| let orders = []; | |
| function toggleInterface(type) { | |
| const clientInterface = document.querySelector('.client-interface'); | |
| const dashboard = document.querySelector('.dashboard'); | |
| const cartElement = document.querySelector('.cart'); | |
| if (type === 'client') { | |
| clientInterface.style.display = 'block'; | |
| dashboard.style.display = 'none'; | |
| cartElement.style.display = 'block'; | |
| } else { | |
| clientInterface.style.display = 'none'; | |
| dashboard.style.display = 'block'; | |
| cartElement.style.display = 'none'; | |
| } | |
| } | |
| function showDashboardSection(section) { | |
| const sections = ['categories-section', 'products-section', 'orders-section']; | |
| sections.forEach(s => { | |
| const element = document.getElementById(s); | |
| if (element) { | |
| element.style.display = s === section + '-section' ? 'block' : 'none'; | |
| } | |
| }); | |
| if (section === 'products') { | |
| updateProductsCatalog(); | |
| const catalogSection = document.querySelector('.catalog-section'); | |
| if (catalogSection) { | |
| const buttons = catalogSection.querySelector('.buttons-container') || document.createElement('div'); | |
| buttons.className = 'buttons-container'; | |
| buttons.innerHTML = ` | |
| <button onclick="toggleNewProductForm()" class="action-button"> | |
| <i class="fas fa-plus"></i> Nouvel article | |
| </button> | |
| `; | |
| if (!catalogSection.contains(buttons)) { | |
| catalogSection.insertBefore(buttons, catalogSection.firstChild); | |
| } | |
| } | |
| } | |
| } | |
| function addCategory() { | |
| const input = document.getElementById('newCategory'); | |
| const categoryName = input.value.trim(); | |
| if (categoryName) { | |
| categories.push(categoryName); | |
| updateCategoriesList(); | |
| const productCategory = document.getElementById('productCategory'); | |
| if (productCategory) { | |
| productCategory.innerHTML = ` | |
| <option value="">Sélectionner une catégorie</option> | |
| ${categories.map(cat => `<option value="${cat}">${cat}</option>`).join('')} | |
| `; | |
| } | |
| input.value = ''; | |
| } | |
| } | |
| function deleteCategory(index) { | |
| categories.splice(index, 1); | |
| updateCategoriesList(); | |
| const productCategory = document.getElementById('productCategory'); | |
| if (productCategory) { | |
| productCategory.innerHTML = ` | |
| <option value="">Sélectionner une catégorie</option> | |
| ${categories.map(cat => `<option value="${cat}">${cat}</option>`).join('')} | |
| `; | |
| } | |
| } | |
| function updateCategoriesList() { | |
| const list = document.getElementById('categoriesList'); | |
| list.innerHTML = categories.map((category, index) => ` | |
| <div class="category-item"> | |
| <span>${category}</span> | |
| <button onclick="deleteCategory(${index})" class="action-button delete">Supprimer</button> | |
| </div> | |
| `).join(''); | |
| const categoryFilter = document.getElementById('category-filter'); | |
| categoryFilter.innerHTML = ` | |
| <option value="">Toutes</option> | |
| ${categories.map(cat => `<option value="${cat}">${cat}</option>`).join('')} | |
| `; | |
| } | |
| function addToCart(productId) { | |
| const product = products.find(p => p.id === productId); | |
| if (product) { | |
| const existingItem = cart.find(item => item.id === productId); | |
| if (existingItem) { | |
| existingItem.quantity = (existingItem.quantity || 1) + 1; | |
| } else { | |
| cart.push({ | |
| ...product, | |
| quantity: 1 | |
| }); | |
| } | |
| cartCount++; | |
| document.querySelector('.cart-count').textContent = cartCount; | |
| updateCartDisplay(); | |
| const toast = document.createElement('div'); | |
| toast.className = 'toast-notification'; | |
| toast.textContent = 'Article ajouté au panier'; | |
| document.body.appendChild(toast); | |
| setTimeout(() => toast.remove(), 2000); | |
| } | |
| } | |
| function updateCartDisplay() { | |
| const cartItems = document.querySelector('.cart-items'); | |
| cartItems.innerHTML = cart.map(item => ` | |
| <div class="cart-item"> | |
| <div class="cart-item-image"> | |
| ${item.images ? `<img src="${item.images[0]}" alt="${item.name}" class="cart-item-image">` : `<i class="fas fa-tshirt fa-3x"></i>`} | |
| </div> | |
| <div class="cart-item-info"> | |
| <h3>${item.name}</h3> | |
| <p class="description">${item.description}</p> | |
| <p class="price">${item.price} FCFA</p> | |
| <div class="details"> | |
| <p>Catégorie: ${item.category}</p> | |
| <p>Taille: ${(item.size || '').toUpperCase()}</p> | |
| <p>Genre: ${item.gender === 'homme' ? 'Homme' : item.gender === 'femme' ? 'Femme' : 'Unigenre'}</p> | |
| </div> | |
| <div class="quantity-controls"> | |
| <button onclick="updateQuantity('${item.id}', -1)">-</button> | |
| <span>${item.quantity}</span> | |
| <button onclick="updateQuantity('${item.id}', 1)">+</button> | |
| </div> | |
| </div> | |
| <button class="remove-from-cart" onclick="removeFromCart('${item.id}')"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| `).join(''); | |
| const total = cart.reduce((sum, item) => sum + item.price * (item.quantity || 1), 0); | |
| document.querySelector('.cart-total').textContent = `Total: ${total} FCFA`; | |
| } | |
| function updateQuantity(productId, change) { | |
| const item = cart.find(item => item.id === productId); | |
| if (item) { | |
| item.quantity = Math.max(1, (item.quantity || 1) + change); | |
| updateCartDisplay(); | |
| cartCount = cart.reduce((sum, item) => sum + (item.quantity || 1), 0); | |
| document.querySelector('.cart-count').textContent = cartCount; | |
| } | |
| } | |
| function shareProduct(platform, productId) { | |
| const productUrl = window.location.href; | |
| const productTitle = "T-Shirt Vintage"; | |
| switch (platform) { | |
| case 'whatsapp': | |
| window.open(`https://api.whatsapp.com/send?text=${encodeURIComponent(productTitle + ' ' + productUrl)}`); | |
| break; | |
| case 'facebook': | |
| window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(productUrl)}`); | |
| break; | |
| } | |
| } | |
| function uploadPhoto(index) { | |
| currentUploadBox = document.querySelectorAll('.photo-upload-box')[index]; | |
| const modal = document.createElement('div'); | |
| modal.style.cssText = ` | |
| position: fixed; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| background: white; | |
| padding: 2rem; | |
| border-radius: 8px; | |
| box-shadow: 0 4px 12px rgba(0,0,0,0.15); | |
| z-index: 2000; | |
| `; | |
| modal.innerHTML = ` | |
| <h3>Choisir une photo</h3> | |
| <div style="display: flex; gap: 1rem; margin-top: 1rem;"> | |
| <button onclick="takePicture(${index})" class="action-button"> | |
| <i class="fas fa-camera"></i> Prendre une photo | |
| </button> | |
| <button onclick="selectFile(${index})" class="action-button"> | |
| <i class="fas fa-folder-open"></i> Choisir un fichier | |
| </button> | |
| </div> | |
| <button onclick="this.parentElement.remove()" style=" | |
| background: #eee; | |
| border: none; | |
| padding: 0.5rem 1rem; | |
| border-radius: 4px; | |
| margin-top: 1rem; | |
| cursor: pointer; | |
| ">Annuler</button> | |
| `; | |
| document.body.appendChild(modal); | |
| } | |
| function closeUploadWindow() {} | |
| document.getElementById('fileInput').addEventListener('change', function (e) {}); | |
| function updateMenuOptions(selectedCategory) { | |
| const genderFilter = document.getElementById('gender-filter'); | |
| const sizeFilter = document.getElementById('size-filter'); | |
| const productsInCategory = products.filter(p => p.category === selectedCategory); | |
| const availableGenders = [...new Set(productsInCategory.map(p => p.gender))]; | |
| const availableSizes = [...new Set(productsInCategory.map(p => p.size))]; | |
| genderFilter.innerHTML = ` | |
| <option value="">Tous</option> | |
| ${availableGenders.map(g => `<option value="${g}">${g === 'homme' ? 'Homme' : g === 'femme' ? 'Femme' : 'Unigenre'}</option>`).join('')} | |
| `; | |
| sizeFilter.innerHTML = ` | |
| <option value="">Toutes</option> | |
| ${availableSizes.map(s => `<option value="${s}">${s.toUpperCase()}</option>`).join('')} | |
| `; | |
| } | |
| document.getElementById('category-filter').addEventListener('change', function (e) { | |
| if (e.target.value) { | |
| updateMenuOptions(e.target.value); | |
| } else { | |
| document.getElementById('gender-filter').innerHTML = ` | |
| <option value="">Tous</option> | |
| <option value="homme">Homme</option> | |
| <option value="femme">Femme</option> | |
| <option value="unigenre">Unigenre</option> | |
| `; | |
| document.getElementById('size-filter').innerHTML = ` | |
| <option value="">Toutes</option> | |
| <option value="xs">XS</option> | |
| <option value="s">S</option> | |
| <option value="m">M</option> | |
| <option value="l">L</option> | |
| <option value="xl">XL</option> | |
| <option value="xxl">XXL</option> | |
| `; | |
| } | |
| }); | |
| let filtersEnabled = false; | |
| function applyFilters() { | |
| if (!filtersEnabled) { | |
| updateProductDisplay(products); | |
| return; | |
| } | |
| const filters = { | |
| gender: document.getElementById('gender-filter').value, | |
| category: document.getElementById('category-filter').value, | |
| size: document.getElementById('size-filter').value, | |
| minPrice: document.getElementById('min-price').value, | |
| maxPrice: document.getElementById('max-price').value, | |
| arrivalStart: document.getElementById('arrival-start').value, | |
| arrivalEnd: document.getElementById('arrival-end').value | |
| }; | |
| const filteredProducts = products.filter(product => { | |
| let matches = true; | |
| if (filters.gender && product.gender !== filters.gender) matches = false; | |
| if (filters.category && product.category !== filters.category) matches = false; | |
| if (filters.size && product.size !== filters.size) matches = false; | |
| if (filters.minPrice && product.price < filters.minPrice) matches = false; | |
| if (filters.maxPrice && product.price > filters.maxPrice) matches = false; | |
| if (filters.arrivalStart && filters.arrivalEnd) { | |
| const arrivalDate = new Date(product.arrivalDate); | |
| const startDate = new Date(filters.arrivalStart); | |
| const endDate = new Date(filters.arrivalEnd); | |
| if (arrivalDate < startDate || arrivalDate > endDate) matches = false; | |
| } | |
| return matches; | |
| }); | |
| updateProductDisplay(filteredProducts); | |
| } | |
| function updateProductDisplay(filteredProducts) { | |
| const productsGrid = document.querySelector('.products-grid'); | |
| if (!productsGrid) return; | |
| productsGrid.innerHTML = filteredProducts.map(product => ` | |
| <div class="product-card"> | |
| <div class="product-image" onclick="showProductImages('${product.id}')"> | |
| ${product.images && product.images.length > 0 ? `<img src="${product.images[0]}" alt="${product.name}" style="width:100%; height:100%; object-fit:cover;">` : `<i class="fas fa-tshirt fa-3x"></i>`} | |
| </div> | |
| <div class="product-info"> | |
| <h3>${product.category}</h3> | |
| <p class="price">${product.price} FCFA</p> | |
| <button class="details-button" onclick="toggleProductDetails(this)">Voir détails</button> | |
| <div class="product-details"> | |
| <p>Nom: ${product.name}</p> | |
| <p>Description: ${product.description}</p> | |
| <p>Marque: ${product.brand || 'Non spécifié'}</p> | |
| <p>Style: ${product.style || 'Non spécifié'}</p> | |
| <p>Matière: ${product.material || 'Non spécifié'}</p> | |
| <p>Emplacement: ${product.location || 'Non spécifié'}</p> | |
| <p>Couleur: ${product.color || 'Non spécifié'}</p> | |
| ${product.images && product.images.length > 1 ? ` | |
| <div class="photo-grid"> | |
| ${product.images.map(img => ` | |
| <img src="${img}" alt="${product.name}" onclick="showProductImages('${product.id}')"> | |
| `).join('')} | |
| </div> | |
| ` : ''} | |
| </div> | |
| <div class="share-buttons"> | |
| <button class="share-button" onclick="shareProduct('whatsapp', '${product.id}')"> | |
| <i class="fab fa-whatsapp"></i> | |
| </button> | |
| <button class="share-button" onclick="shareProduct('facebook', '${product.id}')"> | |
| <i class="fab fa-facebook"></i> | |
| </button> | |
| <button class="share-button" onclick="addToCart('${product.id}')"> | |
| <i class="fas fa-cart-plus"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| `).join(''); | |
| } | |
| document.querySelector('.search-bar').addEventListener('input', function (e) { | |
| console.log('Recherche:', e.target.value); | |
| }); | |
| document.querySelectorAll('.filter-item').forEach(filter => { | |
| filter.addEventListener('click', function () { | |
| this.classList.toggle('active'); | |
| }); | |
| }); | |
| document.getElementById('productForm').addEventListener('submit', function (e) { | |
| e.preventDefault(); | |
| const category = document.getElementById('productCategory').value; | |
| const gender = document.getElementById('productGender').value; | |
| if (!category || !gender) { | |
| alert('La catégorie et le genre sont obligatoires'); | |
| return; | |
| } | |
| const productData = { | |
| name: document.getElementById('productName').value || 'Sans nom', | |
| description: document.getElementById('productDescription').value || '', | |
| price: Number(document.getElementById('productPrice').value) || 0, | |
| category: category, | |
| gender: gender, | |
| size: document.getElementById('productSize').value || '', | |
| brand: document.getElementById('productBrand').value || '', | |
| style: document.getElementById('productStyle').value || '', | |
| material: document.getElementById('productMaterial').value || '', | |
| location: document.getElementById('productLocation').value || '', | |
| color: document.getElementById('productColor').value || '', | |
| arrivalDate: document.getElementById('productArrivalDate').value || '', | |
| images: uploadedImages.filter(img => img !== null) | |
| }; | |
| if (this.dataset.editMode === 'true' && this.dataset.editId) { | |
| const index = products.findIndex(p => p.id === this.dataset.editId); | |
| if (index !== -1) { | |
| products[index] = { | |
| ...products[index], | |
| ...productData | |
| }; | |
| } | |
| this.dataset.editMode = 'false'; | |
| this.dataset.editId = ''; | |
| document.querySelector('#productForm button[type="submit"]').textContent = 'Créer l\'article'; | |
| const toast = document.createElement('div'); | |
| toast.className = 'toast-notification'; | |
| toast.textContent = 'Article modifié avec succès'; | |
| document.body.appendChild(toast); | |
| setTimeout(() => toast.remove(), 2000); | |
| } else { | |
| productData.id = Date.now().toString(); | |
| products.push(productData); | |
| const toast = document.createElement('div'); | |
| toast.className = 'toast-notification'; | |
| toast.textContent = 'Article créé avec succès'; | |
| document.body.appendChild(toast); | |
| setTimeout(() => toast.remove(), 2000); | |
| } | |
| updateProductDisplay(products); | |
| updateProductsCatalog(); | |
| this.reset(); | |
| uploadedImages = new Array(8).fill(null); | |
| document.querySelectorAll('.photo-upload-box').forEach(box => { | |
| box.innerHTML = '<i class="fas fa-plus"></i>'; | |
| }); | |
| }); | |
| function showCart() { | |
| document.getElementById('cart-modal').style.display = 'block'; | |
| updateCartDisplay(); | |
| } | |
| function hideCart() { | |
| document.getElementById('cart-modal').style.display = 'none'; | |
| } | |
| function removeFromCart(productId) { | |
| const index = cart.findIndex(p => p.id === productId); | |
| if (index !== -1) { | |
| cart.splice(index, 1); | |
| cartCount--; | |
| document.querySelector('.cart-count').textContent = cartCount; | |
| updateCartDisplay(); | |
| } | |
| } | |
| function submitOrder() { | |
| const cartName = document.getElementById('cartName').value.trim() || `Commande #${Date.now()}`; | |
| const orderData = { | |
| id: Date.now().toString(), | |
| name: cartName, | |
| items: cart.map(item => ({ | |
| ...item, | |
| productId: item.id, | |
| name: item.name, | |
| description: item.description, | |
| quantity: item.quantity, | |
| price: item.price, | |
| size: item.size, | |
| gender: item.gender, | |
| category: item.category, | |
| images: item.images, | |
| status: 'pending' | |
| })), | |
| total: cart.reduce((sum, item) => sum + item.price * (item.quantity || 1), 0), | |
| date: new Date() | |
| }; | |
| orders.push(orderData); | |
| cart = []; | |
| cartCount = 0; | |
| document.querySelector('.cart-count').textContent = '0'; | |
| hideCart(); | |
| showOrderConfirmation(); | |
| updateOrdersList(); | |
| } | |
| function updateOrdersList() { | |
| const ordersList = document.getElementById('orders-list'); | |
| if (!ordersList) return; | |
| ordersList.innerHTML = orders.map(order => ` | |
| <div class="order-item" style="background:white; padding:1rem; margin:1rem 0; border-radius:4px; box-shadow:0 1px 4px rgba(0,0,0,0.1);"> | |
| <div class="order-header"> | |
| <h4>${order.name}</h4> | |
| <p>Commande #${order.id}</p> | |
| <p>Date: ${order.date.toLocaleString()}</p> | |
| </div> | |
| <div class="order-items"> | |
| ${order.items.map(item => ` | |
| <div class="order-item-detail" style="display:grid; grid-template-columns:auto 1fr auto; gap:1rem; align-items:start; padding:1rem; border-bottom:1px solid #eee; position:relative; border-left: 4px solid ${item.status === 'found' ? '#27ae60' : item.status === 'not-found' ? '#c0392b' : '#ddd'};"> | |
| <div class="order-item-image" style="width:100px; height:100px; display:flex; align-items:center; justify-content:center; background:#f8f8f8; border-radius:4px;"> | |
| ${item.images && item.images.length > 0 ? `<img src="${item.images[0]}" alt="${item.name}" style="max-width:100%; max-height:100%; object-fit:cover;">` : `<i class="fas fa-tshirt fa-2x"></i>`} | |
| </div> | |
| <div class="order-item-info"> | |
| <h4>${item.name}</h4> | |
| <p class="description" style="font-size:0.9rem; color:#666; margin:0.5rem 0;">${item.description || ''}</p> | |
| <div class="details" style="font-size:0.8rem; color:#888;"> | |
| <p>Catégorie: ${item.category || 'Non spécifié'}</p> | |
| <p>Taille: ${(item.size || '').toUpperCase()}</p> | |
| <p>Genre: ${item.gender === 'homme' ? 'Homme' : item.gender === 'femme' ? 'Femme' : 'Unigenre'}</p> | |
| <p>Quantité: ${item.quantity}</p> | |
| </div> | |
| <div class="item-status-buttons" style="margin-top:1rem;"> | |
| <button class="status-button found-button ${item.status === 'found' ? 'active' : ''}" | |
| onclick="updateItemStatus('${order.id}', '${item.productId}', 'found')" | |
| style="background: ${item.status === 'found' ? '#27ae60' : '#eee'}; color: ${item.status === 'found' ? 'white' : '#666'};"> | |
| <i class="fas fa-check"></i> Trouvé | |
| </button> | |
| <button class="status-button not-found-button ${item.status === 'not-found' ? 'active' : ''}" | |
| onclick="updateItemStatus('${order.id}', '${item.productId}', 'not-found')" | |
| style="background: ${item.status === 'not-found' ? '#c0392b' : '#eee'}; color: ${item.status === 'not-found' ? 'white' : '#666'};"> | |
| <i class="fas fa-times"></i> Non trouvé | |
| </button> | |
| </div> | |
| </div> | |
| <div class="order-item-price"> | |
| <p>${item.price * item.quantity} FCFA</p> | |
| </div> | |
| </div> | |
| `).join('')} | |
| </div> | |
| <div class="order-footer" style="margin-top:1rem; padding-top:1rem; border-top:1px solid #eee;"> | |
| <h4>Total: ${order.total} FCFA</h4> | |
| <button class="delete-order-btn" onclick="deleteOrder('${order.id}')"> | |
| <i class="fas fa-trash"></i> Supprimer la commande | |
| </button> | |
| </div> | |
| </div> | |
| `).join(''); | |
| } | |
| function updateItemStatus(orderId, itemId, status) { | |
| const order = orders.find(o => o.id === orderId); | |
| if (order) { | |
| const item = order.items.find(item => item.productId === itemId); | |
| if (item) { | |
| item.status = status; | |
| updateOrdersList(); | |
| } | |
| } | |
| } | |
| function showOrderConfirmation() { | |
| const confirmation = document.getElementById('order-confirmation'); | |
| confirmation.style.background = '#FF8C00'; | |
| confirmation.style.display = 'block'; | |
| setTimeout(() => { | |
| confirmation.style.display = 'none'; | |
| }, 3000); | |
| } | |
| document.querySelector('.cart').onclick = showCart; | |
| document.querySelector('.close-cart').onclick = hideCart; | |
| document.getElementById('cart-modal').onclick = function (e) { | |
| if (e.target === this) { | |
| hideCart(); | |
| } | |
| }; | |
| document.querySelector('.checkout-button').onclick = submitOrder; | |
| function toggleAuthMenu() { | |
| const dropdown = document.getElementById('auth-dropdown'); | |
| dropdown.classList.toggle('show'); | |
| document.addEventListener('click', function closeMenu(e) { | |
| if (!e.target.closest('.auth-buttons')) { | |
| dropdown.classList.remove('show'); | |
| document.removeEventListener('click', closeMenu); | |
| } | |
| }); | |
| } | |
| function toggleAdvancedFilters() { | |
| const filtersSection = document.getElementById('advancedFilters'); | |
| const toggleBtn = document.querySelector('.toggle-filters-btn'); | |
| filtersSection.classList.toggle('collapsed'); | |
| toggleBtn.classList.toggle('active'); | |
| } | |
| function toggleFilterMode() { | |
| filtersEnabled = !filtersEnabled; | |
| const btn = document.querySelector('.filter-toggle-btn'); | |
| btn.classList.toggle('active'); | |
| btn.querySelector('span').textContent = filtersEnabled ? 'Désactiver les filtres' : 'Activer les filtres'; | |
| if (filtersEnabled) { | |
| applyFilters(); | |
| } else { | |
| updateProductDisplay(products); | |
| } | |
| } | |
| function performSearch() { | |
| const searchIcon = document.querySelector('.search-button i'); | |
| if (!searchIcon) return; | |
| searchIcon.classList.add('loading'); | |
| const searchBar = document.querySelector('.search-bar'); | |
| if (!searchBar) return; | |
| const searchTerm = searchBar.value.toLowerCase().trim(); | |
| setTimeout(() => { | |
| const searchResults = products.filter(product => { | |
| const terms = searchTerm.split(' ').filter(term => term.length > 0); | |
| if (terms.length === 0) return true; | |
| return terms.every(term => { | |
| return product.name.toLowerCase().includes(term) || product.description.toLowerCase().includes(term) || product.category.toLowerCase().includes(term) || product.gender.toLowerCase().includes(term) || product.size && product.size.toLowerCase().includes(term) || product.price.toString().includes(term); | |
| }); | |
| }); | |
| searchResults.sort((a, b) => { | |
| const aName = a.name.toLowerCase(); | |
| const bName = b.name.toLowerCase(); | |
| const aExact = aName.includes(searchTerm); | |
| const bExact = bName.includes(searchTerm); | |
| if (aExact && !bExact) return -1; | |
| if (!aExact && bExact) return 1; | |
| return bName.indexOf(searchTerm) - aName.indexOf(searchTerm); | |
| }); | |
| const resultsCountDiv = document.getElementById('search-results-count'); | |
| if (searchTerm) { | |
| resultsCountDiv.textContent = `${searchResults.length} article${searchResults.length > 1 ? 's' : ''} trouvé${searchResults.length > 1 ? 's' : ''}`; | |
| } else { | |
| resultsCountDiv.textContent = ''; | |
| } | |
| updateProductDisplay(searchResults); | |
| searchIcon.classList.remove('loading'); | |
| }, 300); | |
| } | |
| document.querySelector('.search-bar').addEventListener('keypress', function (e) { | |
| if (e.key === 'Enter') { | |
| performSearch(); | |
| } | |
| }); | |
| let currentUploadBox = null; | |
| let uploadedImages = new Array(8).fill(null); | |
| function updateProductsCatalog() { | |
| const catalog = document.getElementById('productsCatalog'); | |
| if (!catalog) return; | |
| const productsByCategory = products.reduce((acc, product) => { | |
| if (!acc[product.category]) { | |
| acc[product.category] = []; | |
| } | |
| acc[product.category].push(product); | |
| return acc; | |
| }, {}); | |
| const categoryDropdown = ` | |
| <div class="category-dropdown"> | |
| <select id="categoryFilter" onchange="filterByCategory(this.value)"> | |
| <option value="">Toutes les catégories</option> | |
| ${[...new Set(products.map(p => p.category))].map(cat => `<option value="${cat}">${cat}</option>`).join('')} | |
| </select> | |
| </div> | |
| `; | |
| const productCardRenderingCode = Object.entries(productsByCategory).map(([category, categoryProducts]) => ` | |
| <div class="category-section" data-category="${category}"> | |
| <h2 class="category-title">${category}</h2> | |
| <div class="products-grid"> | |
| ${categoryProducts.map(product => ` | |
| <div class="product-card"> | |
| <div class="product-image"> | |
| ${product.images && product.images.length > 0 ? `<img src="${product.images[0]}" alt="${product.name}" style="width:100%; height:100%; object-fit:cover;">` : `<i class="fas fa-tshirt fa-3x"></i>`} | |
| </div> | |
| <div class="product-info"> | |
| <h3>${product.name}</h3> | |
| <p class="description">${product.description}</p> | |
| <p class="price">${product.price} FCFA</p> | |
| <div class="details"> | |
| <p>Catégorie: ${product.category}</p> | |
| <p>Taille: ${(product.size || '').toUpperCase()}</p> | |
| <p>Genre: ${product.gender === 'homme' ? 'Homme' : product.gender === 'femme' ? 'Femme' : 'Unigenre'}</p> | |
| </div> | |
| <div class="product-actions"> | |
| <button class="edit-product" onclick="editProduct('${product.id}')"> | |
| <i class="fas fa-edit"></i> Modifier | |
| </button> | |
| <button class="delete-product" onclick="deleteProduct('${product.id}')"> | |
| <i class="fas fa-trash"></i> Supprimer | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| `).join('')} | |
| </div> | |
| </div> | |
| `).join(''); | |
| catalog.innerHTML = categoryDropdown + productCardRenderingCode; | |
| } | |
| function editProduct(productId) { | |
| const product = products.find(p => p.id === productId); | |
| if (!product) return; | |
| document.getElementById('newProductSection').style.display = 'block'; | |
| document.getElementById('newProductSection').scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| const button = document.querySelector('[onclick="toggleNewProductForm()"]'); | |
| button.innerHTML = '<i class="fas fa-times"></i> Annuler'; | |
| document.getElementById('productName').value = product.name; | |
| document.getElementById('productDescription').value = product.description; | |
| document.getElementById('productPrice').value = product.price; | |
| document.getElementById('productCategory').value = product.category; | |
| document.getElementById('productGender').value = product.gender; | |
| document.getElementById('productSize').value = product.size || ''; | |
| document.getElementById('productBrand').value = product.brand || ''; | |
| document.getElementById('productStyle').value = product.style || ''; | |
| document.getElementById('productMaterial').value = product.material || ''; | |
| document.getElementById('productLocation').value = product.location || ''; | |
| document.getElementById('productColor').value = product.color || ''; | |
| document.getElementById('productArrivalDate').value = product.arrivalDate || ''; | |
| uploadedImages = [...(product.images || []), ...new Array(8).fill(null)].slice(0, 8); | |
| document.querySelector('.photo-upload-flex button:first-child').innerHTML = uploadedImages[0] ? `<img src="${uploadedImages[0]}" alt="Preview" style="max-width: 100%; max-height: 100%; object-fit: contain;">` : 'Photo principale'; | |
| document.querySelectorAll('.photo-upload-box').forEach((box, index) => { | |
| if (uploadedImages[index + 1]) { | |
| box.innerHTML = `<img src="${uploadedImages[index + 1]}" alt="Preview">`; | |
| box.style.display = 'flex'; | |
| } else { | |
| box.innerHTML = '<i class="fas fa-plus"></i>'; | |
| box.style.display = 'none'; | |
| } | |
| }); | |
| const productForm = document.getElementById('productForm'); | |
| productForm.dataset.editMode = 'true'; | |
| productForm.dataset.editId = productId; | |
| const photoWindows = document.querySelectorAll('.photo-upload-window'); | |
| photoWindows.forEach(window => { | |
| window.style.maxWidth = '400px'; | |
| }); | |
| document.querySelector('#productForm button[type="submit"]').textContent = 'Modifier l\'article'; | |
| } | |
| function deleteProduct(productId) { | |
| if (confirm('Êtes-vous sûr de vouloir supprimer cet article ?')) { | |
| products = products.filter(p => p.id !== productId); | |
| updateProductsCatalog(); | |
| updateProductDisplay(products); | |
| } | |
| } | |
| function toggleNewProductForm() { | |
| const newProductSection = document.getElementById('newProductSection'); | |
| const isVisible = newProductSection.style.display === 'block'; | |
| newProductSection.style.display = isVisible ? 'none' : 'block'; | |
| const button = document.querySelector('[onclick="toggleNewProductForm()"]'); | |
| button.innerHTML = isVisible ? '<i class="fas fa-plus"></i> Nouvel article' : '<i class="fas fa-times"></i> Annuler'; | |
| if (!isVisible) { | |
| document.getElementById('productForm').reset(); | |
| uploadedImages = new Array(8).fill(null); | |
| document.querySelectorAll('.photo-upload-box').forEach(box => { | |
| box.innerHTML = '<i class="fas fa-plus"></i>'; | |
| box.style.display = 'none'; | |
| }); | |
| Object.keys(persistentFields).forEach(field => { | |
| if (persistentFields[field]) { | |
| document.getElementById(field).value = persistentValues[field]; | |
| } | |
| }); | |
| document.getElementById('productBrand').value = ''; | |
| document.getElementById('productStyle').value = ''; | |
| document.getElementById('productMaterial').value = ''; | |
| document.getElementById('productLocation').value = ''; | |
| document.getElementById('productColor').value = ''; | |
| const productForm = document.getElementById('productForm'); | |
| productForm.dataset.editMode = 'false'; | |
| productForm.dataset.editId = ''; | |
| document.querySelector('#productForm button[type="submit"]').textContent = 'Créer l\'article'; | |
| } | |
| } | |
| function clearCart() { | |
| if (confirm('Voulez-vous vraiment vider tout le panier ?')) { | |
| cart = []; | |
| cartCount = 0; | |
| document.querySelector('.cart-count').textContent = '0'; | |
| updateCartDisplay(); | |
| } | |
| } | |
| const VENDOR_ACCESS_CODE = '56888879'; | |
| function showVendorLogin() { | |
| document.getElementById('vendorLoginModal').style.display = 'block'; | |
| document.getElementById('auth-dropdown').classList.remove('show'); | |
| } | |
| function closeVendorLogin() { | |
| document.getElementById('vendorLoginModal').style.display = 'none'; | |
| } | |
| function checkVendorCode() { | |
| const code = document.getElementById('vendorCode').value; | |
| if (code === VENDOR_ACCESS_CODE) { | |
| closeVendorLogin(); | |
| toggleInterface('vendor'); | |
| } else { | |
| alert('Code d\'accès incorrect'); | |
| } | |
| } | |
| document.getElementById('auth-dropdown').innerHTML = ` | |
| <button onclick="toggleInterface('client')">Client</button> | |
| <button onclick="showVendorLogin()">Vendeur</button> | |
| `; | |
| function deleteOrder(orderId) { | |
| if (confirm('Êtes-vous sûr de vouloir supprimer cette commande ?')) { | |
| orders = orders.filter(o => o.id !== orderId); | |
| updateOrdersList(); | |
| } | |
| } | |
| function searchByImage(imageFile) { | |
| const reader = new FileReader(); | |
| reader.onload = function (e) { | |
| const imageData = e.target.result; | |
| alert('Recherche par image activée. Dans une version production, ceci utiliserait un service AI pour analyser l\'image.'); | |
| const searchResults = products.slice(0, 2); | |
| const resultsCountDiv = document.getElementById('search-results-count'); | |
| resultsCountDiv.textContent = `${searchResults.length} article${searchResults.length > 1 ? 's' : ''} similaire${searchResults.length > 1 ? 's' : ''} trouvé${searchResults.length > 1 ? 's' : ''}`; | |
| updateProductDisplay(searchResults); | |
| }; | |
| reader.readAsDataURL(imageFile); | |
| } | |
| function filterByCategory(category) { | |
| const sections = document.querySelectorAll('.category-section'); | |
| if (!category) { | |
| sections.forEach(section => section.style.display = 'block'); | |
| } else { | |
| sections.forEach(section => { | |
| section.style.display = section.dataset.category === category ? 'block' : 'none'; | |
| }); | |
| } | |
| } | |
| function checkStorageUsage() { | |
| let totalSize = 0; | |
| products.forEach(product => { | |
| if (product.images) { | |
| product.images.forEach(imageUrl => { | |
| if (imageUrl.startsWith('data:image')) { | |
| totalSize += imageUrl.length * 0.75; | |
| } | |
| }); | |
| } | |
| }); | |
| let size = ''; | |
| if (totalSize < 1024) { | |
| size = totalSize + ' B'; | |
| } else if (totalSize < 1024 * 1024) { | |
| size = (totalSize / 1024).toFixed(2) + ' KB'; | |
| } else { | |
| size = (totalSize / (1024 * 1024)).toFixed(2) + ' MB'; | |
| } | |
| const modal = document.createElement('div'); | |
| modal.style.cssText = ` | |
| position: fixed; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| background: white; | |
| padding: 2rem; | |
| border-radius: 8px; | |
| box-shadow: 0 2px 8px rgba(0,0,0,0.2); | |
| z-index: 2000; | |
| `; | |
| modal.innerHTML = ` | |
| <h3>Espace de stockage utilisé</h3> | |
| <p style="margin: 1rem 0;">Taille totale des fichiers du catalogue: ${size}</p> | |
| <p style="margin: 1rem 0; font-size: 0.9em; color: #666;"> | |
| Nombre d'articles: ${products.length}<br> | |
| Nombre total d'images: ${products.reduce((count, p) => count + (p.images?.length || 0), 0)} | |
| </p> | |
| <button onclick="this.parentElement.remove()" style=" | |
| background: var(--primary); | |
| color: white; | |
| border: none; | |
| padding: 0.8rem 1.5rem; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| margin-top: 1rem; | |
| ">Fermer</button> | |
| `; | |
| document.body.appendChild(modal); | |
| } | |
| let persistentFields = { | |
| productName: false, | |
| description: false, | |
| price: false, | |
| category: false, | |
| gender: false, | |
| size: false, | |
| brand: false, | |
| style: false, | |
| material: false, | |
| location: false, | |
| color: false, | |
| arrivalDate: false | |
| }; | |
| let persistentValues = { | |
| productName: '', | |
| description: '', | |
| price: '', | |
| category: '', | |
| gender: '', | |
| size: '', | |
| brand: '', | |
| style: '', | |
| material: '', | |
| location: '', | |
| color: '', | |
| arrivalDate: '' | |
| }; | |
| function takePicture(index) { | |
| const input = document.getElementById('productPhotoInput'); | |
| input.setAttribute('capture', 'environment'); | |
| input.onchange = e => { | |
| handlePhotoFile(e.target.files[0], index); | |
| input.value = ''; | |
| const modal = document.querySelector('[style*="position: fixed"]'); | |
| if (modal && modal.style.maxWidth !== '400px') { | |
| modal.remove(); | |
| } | |
| }; | |
| input.click(); | |
| } | |
| function selectFile(index) { | |
| const input = document.getElementById('productPhotoInput'); | |
| input.removeAttribute('capture'); | |
| input.onchange = e => { | |
| handlePhotoFile(e.target.files[0], index); | |
| input.value = ''; | |
| const modal = document.querySelector('[style*="position: fixed"]'); | |
| if (modal && modal.style.maxWidth !== '400px') { | |
| modal.remove(); | |
| } | |
| }; | |
| input.click(); | |
| } | |
| function handlePhotoFile(file, index) { | |
| if (!file) return; | |
| const reader = new FileReader(); | |
| reader.onload = function (e) { | |
| const previewImg = `<img src="${e.target.result}" alt="Preview" style="max-width:100%; max-height:100%; object-fit:cover;">`; | |
| if (index === 0) { | |
| document.querySelector('.photo-upload-flex button:first-child').innerHTML = previewImg; | |
| } else { | |
| const box = document.querySelectorAll('.photo-upload-box')[index - 1]; | |
| box.innerHTML = previewImg; | |
| box.style.display = 'flex'; | |
| } | |
| uploadedImages[index] = e.target.result; | |
| const modal = document.querySelector('[style*="position: fixed"]'); | |
| if (modal && modal.style.maxWidth !== '400px') { | |
| modal.remove(); | |
| } | |
| }; | |
| reader.readAsDataURL(file); | |
| } | |
| function showProductImages(productId) { | |
| const product = products.find(p => p.id === productId); | |
| if (!product || !product.images || !product.images.length) return; | |
| const modal = document.createElement('div'); | |
| modal.className = 'photo-modal'; | |
| modal.innerHTML = `<img src="${product.images[0]}" alt="${product.name}">`; | |
| modal.onclick = () => modal.remove(); | |
| document.body.appendChild(modal); | |
| modal.style.display = 'flex'; | |
| } | |
| function toggleProductDetails(button) { | |
| const details = button.nextElementSibling; | |
| details.style.display = details.style.display === 'none' ? 'block' : 'none'; | |
| button.textContent = details.style.display === 'none' ? 'Voir détails' : 'Masquer détails'; | |
| } | |
| function toggleAdditionalPhotos() { | |
| const additionalPhotos = document.getElementById('additionalPhotos'); | |
| const isShown = additionalPhotos.style.display === 'none'; | |
| additionalPhotos.style.display = isShown ? 'grid' : 'none'; | |
| if (isShown) { | |
| const boxes = document.querySelectorAll('.photo-upload-box'); | |
| const nextEmptyIndex = uploadedImages.findIndex(img => img === null) - 1; | |
| if (nextEmptyIndex >= 0 && nextEmptyIndex < boxes.length) { | |
| boxes[nextEmptyIndex].style.display = 'flex'; | |
| } | |
| } | |
| } | |
| function scrollToTop() { | |
| window.scrollTo({ | |
| top: 0, | |
| behavior: 'smooth' | |
| }); | |
| }</script></head></html> |