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