TP valarcher web ajout
This commit is contained in:
BIN
TP_valarcher/Wireframe/Lofi dashboard .pdf
Normal file
BIN
TP_valarcher/Wireframe/Lofi dashboard .pdf
Normal file
Binary file not shown.
BIN
TP_valarcher/Wireframe/Mi-fi.png
Normal file
BIN
TP_valarcher/Wireframe/Mi-fi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 478 KiB |
BIN
TP_valarcher/__MACOSX/._board
Executable file
BIN
TP_valarcher/__MACOSX/._board
Executable file
Binary file not shown.
BIN
TP_valarcher/__MACOSX/board/._index.html
Normal file
BIN
TP_valarcher/__MACOSX/board/._index.html
Normal file
Binary file not shown.
BIN
TP_valarcher/__MACOSX/board/._style.css
Normal file
BIN
TP_valarcher/__MACOSX/board/._style.css
Normal file
Binary file not shown.
BIN
TP_valarcher/board.zip
Normal file
BIN
TP_valarcher/board.zip
Normal file
Binary file not shown.
134
TP_valarcher/board/index.html
Normal file
134
TP_valarcher/board/index.html
Normal file
@@ -0,0 +1,134 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>Mon Dashboard</title>
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
<!-- Chart.js pour créer les graphiques -->
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- En-tête -->
|
||||||
|
<header class="tete">
|
||||||
|
<h1>Mon Dashboard</h1>
|
||||||
|
|
||||||
|
<!-- Barre de recherche -->
|
||||||
|
<form class="search" action="#" role="search">
|
||||||
|
<input type="search" placeholder="Rechercher…" />
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Mise en page principale -->
|
||||||
|
<main class="layout">
|
||||||
|
<!-- Menu latéral gauche -->
|
||||||
|
<aside class="sidebar">
|
||||||
|
<nav class="menu">
|
||||||
|
<a href="#" class="btn active">Accueil</a>
|
||||||
|
<a href="#" class="btn">Statistiques</a>
|
||||||
|
<a href="#" class="btn">Utilisateurs</a>
|
||||||
|
<a href="#" class="btn">Paramètres</a>
|
||||||
|
</nav>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<!-- Zone principale du contenu -->
|
||||||
|
<section class="content">
|
||||||
|
<div class="dashboard">
|
||||||
|
|
||||||
|
<!-- Carte Courbe (graphique en ligne) -->
|
||||||
|
<div class="card card-line">
|
||||||
|
<canvas id="lineChart"></canvas>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Carte Histogramme -->
|
||||||
|
<div class="card card-histo">
|
||||||
|
<canvas id="histogramme"></canvas>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Carte Barres (graphique en barres principal) -->
|
||||||
|
<div class="card card-bars">
|
||||||
|
<canvas id="barChart"></canvas>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Carte Camembert -->
|
||||||
|
<div class="card card-pie">
|
||||||
|
<canvas id="camembert"></canvas>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- Scripts pour les graphiques -->
|
||||||
|
<script>
|
||||||
|
// Graphique en ligne (courbe)
|
||||||
|
const ctxLine = document.getElementById('lineChart');
|
||||||
|
new Chart(ctxLine, {
|
||||||
|
type: 'line',
|
||||||
|
data: {
|
||||||
|
labels: ['Lun','Mar','Mer','Jeu','Ven','Sam','Dim'], // jours de la semaine
|
||||||
|
datasets: [{
|
||||||
|
label: 'Visites',
|
||||||
|
data: [12, 19, 15, 22, 30, 25, 18], // données fictives
|
||||||
|
fill: false,
|
||||||
|
borderColor: '#3b82f6',
|
||||||
|
tension: 0.2
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
scales: { y: { beginAtZero: true } }
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Histogramme
|
||||||
|
const ctxBar = document.getElementById('histogramme');
|
||||||
|
new Chart(ctxBar, {
|
||||||
|
type: 'bar',
|
||||||
|
data: {
|
||||||
|
labels: ['Jan','Fév','Mar','Avr'], // mois
|
||||||
|
datasets: [{
|
||||||
|
label: 'Ventes',
|
||||||
|
data: [12,19,8,15], // données fictives
|
||||||
|
backgroundColor: '#3b82f6'
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
scales: { y: { beginAtZero: true } }
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Graphique en barres principal
|
||||||
|
const ctxBarMain = document.getElementById('barChart');
|
||||||
|
new Chart(ctxBarMain, {
|
||||||
|
type: 'bar',
|
||||||
|
data: {
|
||||||
|
labels: ['Q1','Q2','Q3','Q4'], // trimestres
|
||||||
|
datasets: [{
|
||||||
|
label: 'Revenus',
|
||||||
|
data: [5000, 7000, 4000, 9000], // données fictives
|
||||||
|
backgroundColor: '#f97316'
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
scales: { y: { beginAtZero: true } }
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Camembert
|
||||||
|
const ctxPie = document.getElementById('camembert');
|
||||||
|
new Chart(ctxPie, {
|
||||||
|
type: 'pie',
|
||||||
|
data: {
|
||||||
|
labels: ['Cat A','Cat B','Cat C'], // catégories
|
||||||
|
datasets: [{
|
||||||
|
data: [40, 35, 25], // données fictives
|
||||||
|
backgroundColor: ['#3b82f6','#f97316','#10b981']
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
170
TP_valarcher/board/style.css
Normal file
170
TP_valarcher/board/style.css
Normal file
@@ -0,0 +1,170 @@
|
|||||||
|
/* Base */
|
||||||
|
:root{
|
||||||
|
--bg:#f6f7fb;
|
||||||
|
--panel:#ffffff;
|
||||||
|
--text:#222;
|
||||||
|
--muted:#6b7280;
|
||||||
|
--accent:#3b82f6;
|
||||||
|
--radius:12px;
|
||||||
|
--gap:16px;
|
||||||
|
--shadow:0 4px 12px rgba(0,0,0,.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
*{ box-sizing:border-box; }
|
||||||
|
html,body{ height:100%; }
|
||||||
|
body{
|
||||||
|
margin:0;
|
||||||
|
font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
|
||||||
|
color:var(--text);
|
||||||
|
background:var(--bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header */
|
||||||
|
.tete{
|
||||||
|
display: flex;
|
||||||
|
align-items:center;
|
||||||
|
justify-content:space-between;
|
||||||
|
gap:var(--gap);
|
||||||
|
padding:12px 16px;
|
||||||
|
background:var(--panel);
|
||||||
|
box-shadow:var(--shadow);
|
||||||
|
position:sticky;
|
||||||
|
top:0;
|
||||||
|
z-index:10;
|
||||||
|
}
|
||||||
|
.tete h1{
|
||||||
|
margin:0;
|
||||||
|
font-size:20px;
|
||||||
|
letter-spacing:.3px;
|
||||||
|
}
|
||||||
|
.search input{
|
||||||
|
width: min(520px);
|
||||||
|
padding:10px 12px;
|
||||||
|
border:1px solid #e5e7eb;
|
||||||
|
border-radius:20px;
|
||||||
|
outline:none;
|
||||||
|
}
|
||||||
|
.search input:focus{
|
||||||
|
border-color:var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Layout */
|
||||||
|
.layout{
|
||||||
|
display:flex;
|
||||||
|
min-height: calc(100vh - 60px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sidebar (gauche) */
|
||||||
|
.sidebar{
|
||||||
|
width:220px;
|
||||||
|
padding:16px;
|
||||||
|
}
|
||||||
|
.menu{
|
||||||
|
display:flex;
|
||||||
|
flex-direction:column;
|
||||||
|
gap:10px;
|
||||||
|
}
|
||||||
|
.menu .btn{
|
||||||
|
display:block;
|
||||||
|
padding:12px 14px;
|
||||||
|
text-decoration:none;
|
||||||
|
color:var(--text);
|
||||||
|
background:var(--panel);
|
||||||
|
border:1px solid #e0e2e6;
|
||||||
|
border-radius:var(--radius);
|
||||||
|
box-shadow:var(--shadow);
|
||||||
|
font-weight:600;
|
||||||
|
transition:transform .15s, background .15s;
|
||||||
|
}
|
||||||
|
.menu .btn:hover{ transform:translateX(4px); }
|
||||||
|
.menu .btn.active{
|
||||||
|
background:#eef2ff;
|
||||||
|
border-color:#c7d2fe;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Zone contenu (droite) */
|
||||||
|
.content{
|
||||||
|
flex:1;
|
||||||
|
padding:16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* grille 3 colonnes pour grands écrans */
|
||||||
|
.dashboard{
|
||||||
|
display:grid;
|
||||||
|
grid-template-columns: 2fr 1fr 1fr;
|
||||||
|
grid-auto-rows: 160px;
|
||||||
|
gap:var(--gap);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Cartes génériques */
|
||||||
|
.card{
|
||||||
|
background:var(--panel);
|
||||||
|
border:1px solid #e5e7eb;
|
||||||
|
border-radius:var(--radius);
|
||||||
|
box-shadow:var(--shadow);
|
||||||
|
padding:12px;
|
||||||
|
display:flex;
|
||||||
|
align-items:center;
|
||||||
|
justify-content:center;
|
||||||
|
font-weight:600;
|
||||||
|
color:var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-line{
|
||||||
|
grid-column: 1 / span 2;
|
||||||
|
grid-row: span 2;
|
||||||
|
}
|
||||||
|
.card-small{
|
||||||
|
grid-column: 3 / span 1;
|
||||||
|
grid-row: span 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-tiles{
|
||||||
|
grid-column: 3 / span 1;
|
||||||
|
grid-row: span 1;
|
||||||
|
}
|
||||||
|
.card-bars{
|
||||||
|
grid-column: 1 / span 2;
|
||||||
|
grid-row: span 2;
|
||||||
|
}
|
||||||
|
.card-rings{
|
||||||
|
grid-column: 3 / span 1;
|
||||||
|
grid-row: span 2;
|
||||||
|
gap:24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Les deux ronds */
|
||||||
|
.ring{
|
||||||
|
width:120px; height:120px;
|
||||||
|
border:10px solid #eceef1;
|
||||||
|
border-radius:50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive */
|
||||||
|
/* Moyen écran: 2 colonnes */
|
||||||
|
@media (max-width: 1100px){
|
||||||
|
.dashboard{
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
}
|
||||||
|
.card-line{ grid-column: 1 / span 2; }
|
||||||
|
.card-small{ grid-column:auto; }
|
||||||
|
.card-bars{ grid-column: 1 / span 2; }
|
||||||
|
.card-rings{ grid-column: 1 / span 2; flex-wrap:wrap; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Petit écran*/
|
||||||
|
@media (max-width: 750px){
|
||||||
|
.layout{ flex-direction:column; }
|
||||||
|
.sidebar{ width:auto; padding:12px 16px; }
|
||||||
|
.menu{ flex-direction:row; flex-wrap:wrap; }
|
||||||
|
.menu .btn{ flex:1 1 140px; }
|
||||||
|
.content{ padding:12px; }
|
||||||
|
.dashboard{ grid-template-columns: 1fr; }
|
||||||
|
.card-line,
|
||||||
|
.card-bars,
|
||||||
|
.card-rings{ grid-column: 1; }
|
||||||
|
.ring{ width:90px; height:90px; }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
134
TP_valarcher/projet/index.html
Normal file
134
TP_valarcher/projet/index.html
Normal file
@@ -0,0 +1,134 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>Mon Dashboard</title>
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
<!-- Chart.js pour créer les graphiques -->
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- En-tête -->
|
||||||
|
<header class="tete">
|
||||||
|
<h1>Mon Dashboard</h1>
|
||||||
|
|
||||||
|
<!-- Barre de recherche -->
|
||||||
|
<form class="search" action="#" role="search">
|
||||||
|
<input type="search" placeholder="Rechercher…" />
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Mise en page principale -->
|
||||||
|
<main class="layout">
|
||||||
|
<!-- Menu latéral gauche -->
|
||||||
|
<aside class="sidebar">
|
||||||
|
<nav class="menu">
|
||||||
|
<a href="#" class="btn active">Accueil</a>
|
||||||
|
<a href="#" class="btn">Statistiques</a>
|
||||||
|
<a href="#" class="btn">Utilisateurs</a>
|
||||||
|
<a href="#" class="btn">Paramètres</a>
|
||||||
|
</nav>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<!-- Zone principale du contenu -->
|
||||||
|
<section class="content">
|
||||||
|
<div class="dashboard">
|
||||||
|
|
||||||
|
<!-- Carte Courbe (graphique en ligne) -->
|
||||||
|
<div class="card card-line">
|
||||||
|
<canvas id="lineChart"></canvas>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Carte Histogramme -->
|
||||||
|
<div class="card card-histo">
|
||||||
|
<canvas id="histogramme"></canvas>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Carte Barres (graphique en barres principal) -->
|
||||||
|
<div class="card card-bars">
|
||||||
|
<canvas id="barChart"></canvas>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Carte Camembert -->
|
||||||
|
<div class="card card-pie">
|
||||||
|
<canvas id="camembert"></canvas>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- Scripts pour les graphiques -->
|
||||||
|
<script>
|
||||||
|
// Graphique en ligne (courbe)
|
||||||
|
const ctxLine = document.getElementById('lineChart');
|
||||||
|
new Chart(ctxLine, {
|
||||||
|
type: 'line',
|
||||||
|
data: {
|
||||||
|
labels: ['Lun','Mar','Mer','Jeu','Ven','Sam','Dim'], // jours de la semaine
|
||||||
|
datasets: [{
|
||||||
|
label: 'Visites',
|
||||||
|
data: [12, 19, 15, 22, 30, 25, 18], // données fictives
|
||||||
|
fill: false,
|
||||||
|
borderColor: '#3b82f6',
|
||||||
|
tension: 0.2
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
scales: { y: { beginAtZero: true } }
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Histogramme
|
||||||
|
const ctxBar = document.getElementById('histogramme');
|
||||||
|
new Chart(ctxBar, {
|
||||||
|
type: 'bar',
|
||||||
|
data: {
|
||||||
|
labels: ['Jan','Fév','Mar','Avr'], // mois
|
||||||
|
datasets: [{
|
||||||
|
label: 'Ventes',
|
||||||
|
data: [12,19,8,15], // données fictives
|
||||||
|
backgroundColor: '#3b82f6'
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
scales: { y: { beginAtZero: true } }
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Graphique en barres principal
|
||||||
|
const ctxBarMain = document.getElementById('barChart');
|
||||||
|
new Chart(ctxBarMain, {
|
||||||
|
type: 'bar',
|
||||||
|
data: {
|
||||||
|
labels: ['Q1','Q2','Q3','Q4'], // trimestres
|
||||||
|
datasets: [{
|
||||||
|
label: 'Revenus',
|
||||||
|
data: [5000, 7000, 4000, 9000], // données fictives
|
||||||
|
backgroundColor: '#f97316'
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
scales: { y: { beginAtZero: true } }
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Camembert
|
||||||
|
const ctxPie = document.getElementById('camembert');
|
||||||
|
new Chart(ctxPie, {
|
||||||
|
type: 'pie',
|
||||||
|
data: {
|
||||||
|
labels: ['Cat A','Cat B','Cat C'], // catégories
|
||||||
|
datasets: [{
|
||||||
|
data: [40, 35, 25], // données fictives
|
||||||
|
backgroundColor: ['#3b82f6','#f97316','#10b981']
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
170
TP_valarcher/projet/style.css
Normal file
170
TP_valarcher/projet/style.css
Normal file
@@ -0,0 +1,170 @@
|
|||||||
|
/* Base */
|
||||||
|
:root{
|
||||||
|
--bg:#f6f7fb;
|
||||||
|
--panel:#ffffff;
|
||||||
|
--text:#222;
|
||||||
|
--muted:#6b7280;
|
||||||
|
--accent:#3b82f6;
|
||||||
|
--radius:12px;
|
||||||
|
--gap:16px;
|
||||||
|
--shadow:0 4px 12px rgba(0,0,0,.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
*{ box-sizing:border-box; }
|
||||||
|
html,body{ height:100%; }
|
||||||
|
body{
|
||||||
|
margin:0;
|
||||||
|
font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
|
||||||
|
color:var(--text);
|
||||||
|
background:var(--bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header */
|
||||||
|
.tete{
|
||||||
|
display: flex;
|
||||||
|
align-items:center;
|
||||||
|
justify-content:space-between;
|
||||||
|
gap:var(--gap);
|
||||||
|
padding:12px 16px;
|
||||||
|
background:var(--panel);
|
||||||
|
box-shadow:var(--shadow);
|
||||||
|
position:sticky;
|
||||||
|
top:0;
|
||||||
|
z-index:10;
|
||||||
|
}
|
||||||
|
.tete h1{
|
||||||
|
margin:0;
|
||||||
|
font-size:20px;
|
||||||
|
letter-spacing:.3px;
|
||||||
|
}
|
||||||
|
.search input{
|
||||||
|
width: min(520px);
|
||||||
|
padding:10px 12px;
|
||||||
|
border:1px solid #e5e7eb;
|
||||||
|
border-radius:20px;
|
||||||
|
outline:none;
|
||||||
|
}
|
||||||
|
.search input:focus{
|
||||||
|
border-color:var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Layout */
|
||||||
|
.layout{
|
||||||
|
display:flex;
|
||||||
|
min-height: calc(100vh - 60px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sidebar (gauche) */
|
||||||
|
.sidebar{
|
||||||
|
width:220px;
|
||||||
|
padding:16px;
|
||||||
|
}
|
||||||
|
.menu{
|
||||||
|
display:flex;
|
||||||
|
flex-direction:column;
|
||||||
|
gap:10px;
|
||||||
|
}
|
||||||
|
.menu .btn{
|
||||||
|
display:block;
|
||||||
|
padding:12px 14px;
|
||||||
|
text-decoration:none;
|
||||||
|
color:var(--text);
|
||||||
|
background:var(--panel);
|
||||||
|
border:1px solid #e0e2e6;
|
||||||
|
border-radius:var(--radius);
|
||||||
|
box-shadow:var(--shadow);
|
||||||
|
font-weight:600;
|
||||||
|
transition:transform .15s, background .15s;
|
||||||
|
}
|
||||||
|
.menu .btn:hover{ transform:translateX(4px); }
|
||||||
|
.menu .btn.active{
|
||||||
|
background:#eef2ff;
|
||||||
|
border-color:#c7d2fe;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Zone contenu (droite) */
|
||||||
|
.content{
|
||||||
|
flex:1;
|
||||||
|
padding:16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* grille 3 colonnes pour grands écrans */
|
||||||
|
.dashboard{
|
||||||
|
display:grid;
|
||||||
|
grid-template-columns: 2fr 1fr 1fr;
|
||||||
|
grid-auto-rows: 160px;
|
||||||
|
gap:var(--gap);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Cartes génériques */
|
||||||
|
.card{
|
||||||
|
background:var(--panel);
|
||||||
|
border:1px solid #e5e7eb;
|
||||||
|
border-radius:var(--radius);
|
||||||
|
box-shadow:var(--shadow);
|
||||||
|
padding:12px;
|
||||||
|
display:flex;
|
||||||
|
align-items:center;
|
||||||
|
justify-content:center;
|
||||||
|
font-weight:600;
|
||||||
|
color:var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-line{
|
||||||
|
grid-column: 1 / span 2;
|
||||||
|
grid-row: span 2;
|
||||||
|
}
|
||||||
|
.card-small{
|
||||||
|
grid-column: 3 / span 1;
|
||||||
|
grid-row: span 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-tiles{
|
||||||
|
grid-column: 3 / span 1;
|
||||||
|
grid-row: span 1;
|
||||||
|
}
|
||||||
|
.card-bars{
|
||||||
|
grid-column: 1 / span 2;
|
||||||
|
grid-row: span 2;
|
||||||
|
}
|
||||||
|
.card-rings{
|
||||||
|
grid-column: 3 / span 1;
|
||||||
|
grid-row: span 2;
|
||||||
|
gap:24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Les deux ronds */
|
||||||
|
.ring{
|
||||||
|
width:120px; height:120px;
|
||||||
|
border:10px solid #eceef1;
|
||||||
|
border-radius:50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive */
|
||||||
|
/* Moyen écran: 2 colonnes */
|
||||||
|
@media (max-width: 1100px){
|
||||||
|
.dashboard{
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
}
|
||||||
|
.card-line{ grid-column: 1 / span 2; }
|
||||||
|
.card-small{ grid-column:auto; }
|
||||||
|
.card-bars{ grid-column: 1 / span 2; }
|
||||||
|
.card-rings{ grid-column: 1 / span 2; flex-wrap:wrap; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Petit écran*/
|
||||||
|
@media (max-width: 750px){
|
||||||
|
.layout{ flex-direction:column; }
|
||||||
|
.sidebar{ width:auto; padding:12px 16px; }
|
||||||
|
.menu{ flex-direction:row; flex-wrap:wrap; }
|
||||||
|
.menu .btn{ flex:1 1 140px; }
|
||||||
|
.content{ padding:12px; }
|
||||||
|
.dashboard{ grid-template-columns: 1fr; }
|
||||||
|
.card-line,
|
||||||
|
.card-bars,
|
||||||
|
.card-rings{ grid-column: 1; }
|
||||||
|
.ring{ width:90px; height:90px; }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
60
TP_valarcher/test/index.html
Normal file
60
TP_valarcher/test/index.html
Normal file
@@ -0,0 +1,60 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>Mon Dashboard</title>
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header class="tete">
|
||||||
|
<h1>Mon Dashboard</h1>
|
||||||
|
|
||||||
|
|
||||||
|
<form class="search" action="#" role="search">
|
||||||
|
<input type="search" placeholder="Rechercher…" aria-label="Rechercher" />
|
||||||
|
</form>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="layout">
|
||||||
|
<aside class="sidebar">
|
||||||
|
<nav class="menu">
|
||||||
|
<a href="#" class="btn active">Accueil</a>
|
||||||
|
<a href="#" class="btn">Statistiques</a>
|
||||||
|
<a href="#" class="btn">Utilisateurs</a>
|
||||||
|
<a href="#" class="btn">Paramètres</a>
|
||||||
|
</nav>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<section class="content">
|
||||||
|
|
||||||
|
<div class="dashboard">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="card card-line">Courbe</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="card card-small">Info A</div>
|
||||||
|
<div class="card card-small">Info B</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="card card-bars">Barres</div>
|
||||||
|
|
||||||
|
<div class="card card-rings">
|
||||||
|
<div class="ring"></div>
|
||||||
|
<div class="ring"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
171
TP_valarcher/test/style.css
Normal file
171
TP_valarcher/test/style.css
Normal file
@@ -0,0 +1,171 @@
|
|||||||
|
/* Base */
|
||||||
|
:root{
|
||||||
|
--bg:#f6f7fb;
|
||||||
|
--panel:#ffffff;
|
||||||
|
--text:#222;
|
||||||
|
--muted:#6b7280;
|
||||||
|
--accent:#3b82f6;
|
||||||
|
--radius:12px;
|
||||||
|
--gap:16px;
|
||||||
|
--shadow:0 4px 12px rgba(0,0,0,.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
*{ box-sizing:border-box; }
|
||||||
|
html,body{ height:100%; }
|
||||||
|
body{
|
||||||
|
margin:0;
|
||||||
|
font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
|
||||||
|
color:var(--text);
|
||||||
|
background:var(--bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header */
|
||||||
|
.tete{
|
||||||
|
display: flex;
|
||||||
|
align-items:center;
|
||||||
|
justify-content:space-between;
|
||||||
|
gap:var(--gap);
|
||||||
|
padding:12px 16px;
|
||||||
|
background:var(--panel);
|
||||||
|
box-shadow:var(--shadow);
|
||||||
|
position:sticky;
|
||||||
|
top:0;
|
||||||
|
z-index:10;
|
||||||
|
}
|
||||||
|
.tete h1{
|
||||||
|
margin:0;
|
||||||
|
font-size:20px;
|
||||||
|
letter-spacing:.3px;
|
||||||
|
}
|
||||||
|
.search input{
|
||||||
|
width: min(520px);
|
||||||
|
padding:10px 12px;
|
||||||
|
border:1px solid #e5e7eb;
|
||||||
|
border-radius:20px;
|
||||||
|
outline:none;
|
||||||
|
}
|
||||||
|
.search input:focus{
|
||||||
|
border-color:var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Layout */
|
||||||
|
.layout{
|
||||||
|
display:flex;
|
||||||
|
min-height: calc(100vh - 60px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sidebar (gauche) */
|
||||||
|
.sidebar{
|
||||||
|
width:220px;
|
||||||
|
padding:16px;
|
||||||
|
}
|
||||||
|
.menu{
|
||||||
|
display:flex;
|
||||||
|
flex-direction:column;
|
||||||
|
gap:10px;
|
||||||
|
}
|
||||||
|
.menu .btn{
|
||||||
|
display:block;
|
||||||
|
padding:12px 14px;
|
||||||
|
text-decoration:none;
|
||||||
|
color:var(--text);
|
||||||
|
background:var(--panel);
|
||||||
|
border:1px solid #e0e2e6;
|
||||||
|
border-radius:var(--radius);
|
||||||
|
box-shadow:var(--shadow);
|
||||||
|
font-weight:600;
|
||||||
|
transition:transform .15s, background .15s;
|
||||||
|
}
|
||||||
|
.menu .btn:hover{ transform:translateX(4px); }
|
||||||
|
.menu .btn.active{
|
||||||
|
background:#eef2ff;
|
||||||
|
border-color:#c7d2fe;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Zone contenu (droite) */
|
||||||
|
.content{
|
||||||
|
flex:1;
|
||||||
|
padding:16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* grille 3 colonnes pour grands écrans */
|
||||||
|
.dashboard{
|
||||||
|
display:grid;
|
||||||
|
grid-template-columns: 2fr 1fr 1fr;
|
||||||
|
grid-auto-rows: 160px;
|
||||||
|
gap:var(--gap);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Cartes génériques */
|
||||||
|
.card{
|
||||||
|
background:var(--panel);
|
||||||
|
border:1px solid #e5e7eb;
|
||||||
|
border-radius:var(--radius);
|
||||||
|
box-shadow:var(--shadow);
|
||||||
|
padding:12px;
|
||||||
|
display:flex;
|
||||||
|
align-items:center;
|
||||||
|
justify-content:center;
|
||||||
|
font-weight:600;
|
||||||
|
color:var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* placement des cartes pour ressembler au croquis */
|
||||||
|
.card-line{
|
||||||
|
grid-column: 1 / span 2;
|
||||||
|
grid-row: span 2;
|
||||||
|
}
|
||||||
|
.card-small{
|
||||||
|
grid-column: 3 / span 1;
|
||||||
|
grid-row: span 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-tiles{
|
||||||
|
grid-column: 3 / span 1;
|
||||||
|
grid-row: span 1;
|
||||||
|
}
|
||||||
|
.card-bars{
|
||||||
|
grid-column: 1 / span 2;
|
||||||
|
grid-row: span 2;
|
||||||
|
}
|
||||||
|
.card-rings{
|
||||||
|
grid-column: 3 / span 1;
|
||||||
|
grid-row: span 2;
|
||||||
|
gap:24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Les deux ronds */
|
||||||
|
.ring{
|
||||||
|
width:120px; height:120px;
|
||||||
|
border:10px solid #eceef1;
|
||||||
|
border-radius:50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* Responsive */
|
||||||
|
/* Moyen écran: 2 colonnes */
|
||||||
|
@media (max-width: 1100px){
|
||||||
|
.dashboard{
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
}
|
||||||
|
.card-line{ grid-column: 1 / span 2; }
|
||||||
|
.card-small{ grid-column:auto; }
|
||||||
|
.card-bars{ grid-column: 1 / span 2; }
|
||||||
|
.card-rings{ grid-column: 1 / span 2; flex-wrap:wrap; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Petit écran*/
|
||||||
|
@media (max-width: 750px){
|
||||||
|
.layout{ flex-direction:column; }
|
||||||
|
.sidebar{ width:auto; padding:12px 16px; }
|
||||||
|
.menu{ flex-direction:row; flex-wrap:wrap; }
|
||||||
|
.menu .btn{ flex:1 1 140px; }
|
||||||
|
.content{ padding:12px; }
|
||||||
|
.dashboard{ grid-template-columns: 1fr; }
|
||||||
|
.card-line,
|
||||||
|
.card-bars,
|
||||||
|
.card-rings{ grid-column: 1; }
|
||||||
|
.ring{ width:90px; height:90px; }
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user