$

src/app.riot

@@ -56,7 +56,6 @@
 
     <style>
         :host {
-            padding: 6%;
             background: #B8CBD0;
             min-height: 100vh;
         }

src/components/global/generalytics/generalytics.riot

@@ -1,3 +1,107 @@
 <generalytics>
-    <p>gen</p>
+    <style>
+        #generalytics {
+            width: 60vw;
+            height: auto;
+            overflow: auto;
+        }
+
+        #generalytics
+        #generalytics-stat-container
+        #generalytics-stat-glob {
+            padding: 20px;
+            background: red;
+            color: white;
+            display: flex;
+            flex-direction: column;
+        }
+
+        #generalytics
+        #generalytics-stat-container
+        #generalytics-stat-glob
+        .generalytics-stat-atom {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+        }
+
+        #generalytics
+        #generalytics-stat-container
+        #generalytics-stat-glob
+        .generalytics-stat-atom
+        #generalytics-stat-progress {
+            width: 40vw;
+        }
+
+        #generalytics
+        #generalytics-stat-container
+        #generalytics-stat-gender {
+            text-align: center;
+            background: blue;
+            color: white;
+        }
+
+        #generalytics
+        #generalytics-stat-container
+        #generalytics-stat-gender
+        .generalytics-gender-progress {
+
+        }
+
+        #generalytics
+        #generalytics-stat-container
+        #generalytics-stat-gender-m, #generalytics-stat-gender-f {
+            padding: 20px;
+            display: flex;
+            justify-content: space-between;
+        }
+
+        #generalytics
+        #generalytics-stat-container
+        #generalytics-stat-gender
+        .generalytics-gender-progress {
+            background-color: #000;
+        }
+    </style>
+
+    <div id="generalytics">
+        <div id="generalytics-stat-container">
+            <div id="generalytics-stat-glob" >
+                <div class="generalytics-stat-atom">
+                    <span>Moyenne</span>
+                    <span>342</span>
+                </div>
+
+                <div class="generalytics-stat-atom">
+                    <span>Nb formations</span>
+                    <span>49</span>
+                </div>
+
+                <div class="generalytics-stat-atom">
+                    <span>Capacite</span>
+                    <span>38</span>
+                </div>
+
+                <div class="generalytics-stat-atom">
+                    <span>Selectivite (50%)</span>
+                    <progress id="generalytics-stat-progress" max="100" min="40" value="50"/>
+                </div>
+            </div>
+
+            <div id="generalytics-stat-gender">
+                <span>Repartition par genre</span>
+
+                <div id="generalytics-stat-gender-m">
+                    <span>Homme</span>
+                    <progress class="generalytics-gender-progress" max="100" min="40" value="80"/>
+                </div>
+
+                <div id="generalytics-stat-gender-f">
+                    <span>Femme</span>
+                    <progress class="generalytics-gender-progress" max="100" min="40" value="20"/>
+                </div>
+            </div>
+        </div>
+    </div>
+
 </generalytics>

src/components/global/localisationpath/loc.riot

@@ -1,3 +1,9 @@
 <loc>
+    <script>
+        import * as riot from 'riot';
+    </script>
+
+    <style>
+    </style>
     <p>BUT - PRODUCTION - Informatique</p>
 </loc>

src/components/global/selector/selector.riot

@@ -1,13 +1,9 @@
 <selector>
     <style>
         #selector {
-            width: 500px;
+            width: 20vw;
             height: auto;
             max-height: 700px;
-            padding: 20px;
-            box-shadow: 0px 0px 9px 1px black;
-            background: #7A90A4;
-            border-radius: 10px;
             overflow: auto;
         }
 
@@ -20,6 +16,7 @@
             justify-content: space-between;
             position: relative;
             min-height: 100px;
+            gap: 3%;
         }
 
         #selector

src/index.html

@@ -12,9 +12,9 @@
         <style>
             #root {
                 display: flex;
+                flex-direction: row;
                 justify-content: center;
                 align-items: center;
-                flex-direction: row;
             }
         </style>
 

src/pages/home.riot

@@ -1,49 +1,36 @@
 <home>
 	<style>
 		#main-container {
+			position: relative;
 			display: flex;
 			flex-direction: row;
-			justify-content: center;
+			justify-content: space-around;
-			align-items: center;
-			gap: 10%;
 		}
 
 		#main-container
-		#left
+		#right, #left generalytics, #left etablanalytics {
-		generalytics {
-			margin-bottom: 5%;
-		}
-
-		#main-container
-		#left
-		generalytics, etablanalytics {
-			display: flex;
-			flex-direction: column;
-			width: 525px;
-			height: 300px;
 			padding: 20px;
 			box-shadow: 0px 0px 9px 1px black;
 			background: #7A90A4;
 			border-radius: 10px;
-
 		}
 
 		#main-container
-		#top
+		#right {
-		loc {
+			align-self: flex-start;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			width: 200px;
-			height: 10px;
 		}
+
+		#main-container
+		#left {
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-self: center;
+		}
+
 	</style>
 
 	<div id="main-container">
-		<div id="top">
-			<loc />
-		</div>
-
 		<div id="right">
 			<selector />
 		</div>