$
This commit is contained in:
@@ -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>
|
Reference in New Issue
Block a user