:root {
--primary-color: #2563eb;
--bg-color: #f8fafc;
--text-main: #1e293b;
--text-muted: #64748b;
--border-color: #e2e8f0;
--white: #ffffff;
}
body {
font-family: 'Inter', -apple-system, sans-serif;
background-color: var(--bg-color);
color: var(--text-main);
margin: 0;
padding: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
/* Barre de recherche */
.search-container {
background: var(--white);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 12px 20px;
display: flex;
align-items: center;
margin-bottom: 24px;
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.search-icon { color: var(--text-muted); margin-right: 12px; width: 20px; height: 20px; }
.search-container input {
border: none;
outline: none;
width: 100%;
font-size: 16px;
color: var(--text-main);
}
/* Boutons Filtres */
.filter-container { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.filter-label { font-size: 12px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.05em; }
.brand-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-filter {
padding: 8px 16px;
background: var(--white);
border: 1px solid var(--border-color);
border-radius: 6px;
font-size: 13px;
font-weight: 500;
color: var(--text-main);
text-decoration: none;
transition: all 0.2s;
}
.btn-filter.active { background: var(--primary-color); color: var(--white); border-color: var(--primary-color); }
/* Tableau */
.table-container { background: var(--white); border-radius: 8px; border: 1px solid var(--border-color); overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
table { width: 100%; border-collapse: collapse; text-align: left; }
th { background: #fcfcfc; padding: 12px 20px; font-size: 11px; font-weight: 700; color: var(--text-muted); border-bottom: 1px solid var(--border-color); }
td { padding: 16px 20px; border-bottom: 1px solid var(--border-color); vertical-align: middle; }
.brand-tag { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.tag-icon { color: var(--primary-color); width: 16px; height: 16px; padding: 4px; background: #eff6ff; border-radius: 4px; }
.product-name { font-size: 14px; font-weight: 600; display: block; }
.product-category { font-size: 11px; color: var(--text-muted); font-weight: 500; }
.reference-box { background: #f1f5f9; padding: 4px 8px; border-radius: 4px; font-family: monospace; font-size: 13px; color: #475569; }
.viscosity-info { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--primary-color); }
2. La nouvelle Page d'Accueil (index.php)
Remplacez tout le contenu de votre index.php par celui-ci :
query("SELECT * FROM brands ORDER BY name ASC")->fetchAll();
$brand_filter = $_GET['brand'] ?? 'all';
$search_query = $_GET['q'] ?? '';
$sql = "SELECT p.*, b.name as brand_name FROM products p JOIN brands b ON p.brand_id = b.id";
$params = [];
if ($brand_filter !== 'all' || !empty($search_query)) {
$sql .= " WHERE";
$conditions = [];
if ($brand_filter !== 'all') { $conditions[] = " p.brand_id = ?"; $params[] = $brand_filter; }
if (!empty($search_query)) { $conditions[] = " (p.product_name LIKE ? OR p.reference LIKE ?)"; $params[] = "%$search_query%"; $params[] = "%$search_query%"; }
$sql .= implode(" AND", $conditions);
}
$products = $pdo->prepare($sql . " ORDER BY b.name, p.product_name");
$products->execute($params);
$products = $products->fetchAll();
?>
Catalogue Lubrifiants
| MARQUE | PRODUIT | RÉFÉRENCE | VISCOSITÉ | ACTIONS |
|---|
|
|
|
|
|