commit 0cbe64e30ef1f62aa1bf052d24d48800d3963a3b Author: Derqsi BILAL Date: Wed Sep 24 17:58:29 2025 +0200 Upload files to "/" diff --git a/Index.html b/Index.html new file mode 100644 index 0000000..c155a22 --- /dev/null +++ b/Index.html @@ -0,0 +1,104 @@ + + + + + + dashboard + + + + +
+ +

DashBoardKooK +

+ + connexion + +
+ +
+ +
+
+
Vues
+

35 908

+
+
+
+
Likes
+

7802

+
+
+
+
Republications
+

3401

+
+
+
+
+

Répartition des utilisateurs

+
+
+
+
+ +
+
50
+
120
+
80
+
150
+
+
+
+
+
Augmentation Likes
+

+7,9%

+
+
+
Augmentation Commentaires
+

+10,3%

+
+
+
Augmentation Vues
+

-1,9%

+
+
+
Augmentation Partages
+

+3,9%

+
+
+
+ + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..1580563 --- /dev/null +++ b/style.css @@ -0,0 +1,131 @@ +*{ + padding: 0; + margin: 0; +} + +.grid-container { + display: grid; /* active le mode grid */ + grid-template-columns: 1fr 2fr 2fr ; + grid-template-rows: 1fr 3fr 1fr; + gap: 10px; + padding: 10px; + background: #eee; + height: 100vh; + +} + +.grid-item { + color: white; +} + +#large{ + grid-column: span 2; +} + +#long{ + grid-row: span 3; + overflow-y: auto; + overflow-x: hidden; + box-sizing: border-box; +} + +.camembert{ + width: 200px; + aspect-ratio: 1/1; + border-radius: 50%; + background: conic-gradient( /*donné par chat GPT*/ + #4caf50 0% 40%, /* 40% vert */ + #ff9800 40% 70%, /* 30% orange */ + #2196f3 70% 100% /* 30% bleu */ + ); +} + +.titreA{ + position: absolute; + left: 50%; + top: 5%; + transform: translateX(-50%); + +} + +#cam{ + position: relative; + display: flex; + justify-content: center; + align-items: center; +} + +.legendes{ + display: flex; + align-items: center; + position: relative; + justify-content: space-between; +} + +.legende{ + display: flex; + align-items: center; + position: relative; + justify-content: center; + flex-direction: column; +} + +.hist{ + position: relative; +} + +.histogram { + position: absolute; + top: 20%; + width: 80%; + display: flex; + align-items: flex-end; + gap: 3%; + height: 200px; + padding: 10px; +} + +.bar { + width: 10%; + background: steelblue; + color: white; + text-align: center; +} + +.couleur{ + width: 10%; + aspect-ratio: 1/1; +} + +.ame{ + display: flex; + align-items: center; + position: relative; + justify-content: space-between; + gap: 20px; + font-size: 1.5vw; +} + +.ameliorations{ + background-color: #747474; +} + +@media screen and (max-width: 800px) { + .grid-container { + grid-template-columns: 1fr; + grid-template-rows: 2fr 3fr 3fr 3fr 2fr 2fr; + height: 200vh; + } + #large{ + grid-column: span 1; + } + + #long{ + grid-row: span 1; + } + + .titreA{ + top: auto; +} + +} \ No newline at end of file diff --git a/stylegeneral.css b/stylegeneral.css new file mode 100644 index 0000000..81bb8d3 --- /dev/null +++ b/stylegeneral.css @@ -0,0 +1,38 @@ +@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=SUSE+Mono:ital,wght@0,100..800;1,100..800&display=swap'); + +*{ + font-family: "SUSE Mono", sans-serif; + font-optical-sizing: auto; + font-weight: 500; + font-style: normal; +} + +header{ + width: 100%; + height: 10vh; + display: flex; + align-items: center; + position: relative; + background-color: rgb(224, 224, 224); + justify-content: space-between; +} + +header>*{ + margin: 15px; +} + +div,article{ + background-color: rgb(183, 183, 183); + padding: 20px; + text-align: center; + border-radius: 8px; +} + +article{ + height: 5vh; + background-color: rgb(145, 145, 145); + margin-bottom: 15% ; +} + + +