TP valarcher web ajout
This commit is contained in:
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