This commit is contained in:
pro.boooooo
2023-03-07 21:51:35 +01:00
parent 4c12f72db6
commit 753cf67823
6 changed files with 128 additions and 35 deletions

View File

@@ -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>