Skip to content

Ajout d'un tableau de bord pour le client #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Oct 8, 2025
Merged

Ajout d'un tableau de bord pour le client #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ff31cf6
Ajout d'un tableau de bord pour le client
JosueMoffo Oct 6, 2025
bee3208
changement de la devise du FCFA au $
JosueMoffo Oct 7, 2025
23a49a8
Merge branch 'main' of https://github.com/Web-Programming-Polytechnic…
JosueMoffo Oct 7, 2025
298ba2d
suppression de l'en-tete et du pieds et page
JosueMoffo Oct 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 89 additions & 0 deletions pages/mon-compte.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Dashboard Client - E-commerce</title>
<link rel="stylesheet" href="../styles/mon-compte.css">
</head>
<body>
<nav class="sidebar">
<ul>
<li><a href="#resume">Résumé du compte</a></li>
<li><a href="#fidelite">Points de fidélité</a></li>
<li><a href="#historique">Historique des commandes</a></li>
<li><a href="#consultes">Produits consultés</a></li>
</ul>
</nav>

<main>

<section id="resume" class="card">
<h2>Résumé du compte</h2>
<p>Date de création : <strong>15 Janvier 2022</strong></p>
<p>Nombre Total de commandes : <strong>56</strong></p>
</section>

<!-- Fidélité -->
<section id="fidelite" class="card">
<h2>Points de fidélité</h2>
<p>Total points : <strong>520</strong></p>
<p>Récompenses disponibles : <strong>2 bons d’achat</strong></p>
</section>

<!-- Historique -->
<section id="historique" class="card">
<h2>Historique des commandes</h2>
<table>
<thead>
<tr>
<th>Code Commande</th>
<th>Date</th>
<th>Statut</th>
<th>Montant</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>A2025-001</td>
<td>01/09/2025</td>
<td>Livrée</td>
<td>$230</td>
<td><a href="#">Détails</a> | <a href="#">Télécharger facture</a></td>
</tr>
<tr>
<td>A2025-002</td>
<td>15/09/2025</td>
<td>Livrée</td>
<td>$120</td>
<td><a href="#">Détails</a> | <a href="#">Télécharger facture</a></td>
</tr>
<tr>
<td>A2025-003</td>
<td>28/09/2025</td>
<td>En attente</td>
<td>$86</td>
<td><a href="#">Détails</a> | <a href="#">Télécharger facture</a></td>
</tr>
</tbody>
</table>

</section>

<!-- Retours -->
<section class="card">
<h2>Retours & Réclamations</h2>
<p>Aucun retour en cours.</p>
</section>

<!-- Produits consultés -->
<section id="consultes" class="card">
<h2>Produits consultés récemment</h2>
<ul>
<li>Écran 27" 4K</li>
<li>Clé USB 128Go</li>
</ul>
</section>
</main>
</body>
</html>
111 changes: 111 additions & 0 deletions styles/mon-compte.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
/* Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Couleurs principales */
:root {
--primary: #776f73;
--secondary: #8f253c;
--light: #cccccc;
--white: #fff;
}

/* Global */
body {
font-family: Arial, sans-serif;
display: flex;
background-color: var(--light);
}

/* Header */
header {
position: fixed;
top: 0;
left: 200px;
right: 0;
background: var(--primary);
color: var(--white);
padding: 1rem;
text-align: center;
z-index: 10;
}

/* Sidebar */
.sidebar {
width: 200px;
background: var(--secondary);
min-height: 100vh;
position: fixed;
top: 0;
left: 0;
padding-top: 5rem;
}

.sidebar ul {
list-style: none;
}

.sidebar li {
margin: 1rem 0;
}

.sidebar a {
color: var(--white);
text-decoration: none;
padding: 0.5rem 1rem;
display: block;
}

.sidebar a:hover {
background: var(--primary);
}

/* Main */
main {
margin-left: 200px;
padding: 7rem 2rem 2rem 2rem;
width: 100%;
}

.card {
background: var(--white);
padding: 1.5rem;
margin-bottom: 1.5rem;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.card h2 {
margin-bottom: 1rem;
color: var(--secondary);
}

/* Table */
table {
width: 100%;
border-collapse: collapse;
margin-top: 1rem;
}

table th, table td {
padding: 0.8rem;
border: 1px solid var(--light);
text-align: left;
}

table th {
background: var(--primary);
color: var(--white);
}

/* Footer */
footer {
background: var(--primary);
color: var(--white);
text-align: center;
padding: 1rem;
margin-left: 200px;
}