You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
229 lines
7.4 KiB
229 lines
7.4 KiB
<section class="section"> |
|
<div class="container"> |
|
<div class="simulation-parameters"> |
|
|
|
<!-- -------------- main parameters ---------------- --> |
|
<input type="checkbox" id="main-parameters" name="parameters-accordion" checked="checked" disabled="disabled"> |
|
<div class="panel"> |
|
<label class="panel-heading" for="main-parameters">Paramètres</label> |
|
<div class="panel-block main-parameters-body"> |
|
<div class="container wide-label"> |
|
<div class="field is-horizontal"> |
|
<div class="field-label is-normal"> |
|
<label class="label">Capacité de la batterie</label> |
|
</div> |
|
<div class="field-body"> |
|
<div class="field has-addons"> |
|
<p class="control is-expanded"> |
|
<input name="battery-capacity" class="input" type="number" min="1" value="700"/> |
|
</p> |
|
<p class="control"> |
|
<a class="button is-static">Wh</a> |
|
</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="field is-horizontal"> |
|
<div class="field-label is-normal"> |
|
<label class="label">Poids du pilote</label> |
|
</div> |
|
<div class="field-body"> |
|
<div class="field has-addons"> |
|
<p class="control is-expanded"> |
|
<input name="driver-weight" class="input" type="number" min="1" value="70"/> |
|
</p> |
|
<p class="control"> |
|
<a class="button is-static">kg</a> |
|
</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="field is-horizontal"> |
|
<div class="field-label is-normal"> |
|
<label class="label">Poids passagers et chargement</label> |
|
</div> |
|
<div class="field-body"> |
|
<div class="field has-addons"> |
|
<p class="control is-expanded"> |
|
<input name="additional-weight" class="input" type="number" min="1" value="50"/> |
|
</p> |
|
<p class="control"> |
|
<a class="button is-static">kg</a> |
|
</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="field is-horizontal"> |
|
<div class="field-label is-normal"> |
|
<label class="label">Zone climatique</label> |
|
</div> |
|
<div class="field-body"> |
|
<div class="field has-addons"> |
|
<div class="control is-expanded"> |
|
<div class="select is-fullwidth"> |
|
<select class="zone-selector"> |
|
<option>H1a</option> |
|
<option>H1b</option> |
|
<option>H1c</option> |
|
<option>H2a</option> |
|
<option>H2b</option> |
|
<option>H2c</option> |
|
<option>H2d</option> |
|
<option>H3</option> |
|
</select> |
|
</div> |
|
</div> |
|
<p class="control"> |
|
<a class="button" data-activate-modal="zones-map-modal">Choix sur la carte...</a> |
|
</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="field is-horizontal"> |
|
<div class="field-label is-normal"> |
|
<label class="label">Distance quotidienne</label> |
|
</div> |
|
<div class="field-body"> |
|
<div class="field has-addons"> |
|
<p class="control is-expanded"> |
|
<input name="daily-distance" class="input" type="number" min="1" value="10"> |
|
</p> |
|
<p class="control"> |
|
<a class="button is-static">km/jour</a> |
|
</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="field is-horizontal"> |
|
<div class="field-label is-normal"> |
|
<label class="label">Dénivelé positif quotidien</label> |
|
</div> |
|
<div class="field-body"> |
|
<div class="field has-addons"> |
|
<p class="control is-expanded"> |
|
<input name="daily-elevation" class="input" type="number" min="0" value="100"> |
|
</p> |
|
<p class="control"> |
|
<a class="button is-static">m/jour</a> |
|
</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
</div> |
|
</div> |
|
</div> |
|
|
|
<!-- ------------------- Advanced parameters ---------------------- --> |
|
<!-- set input type to "radio" to change behavior (accordion) --> |
|
<input type="checkbox" id="advanced-parameters" name="parameters-accordion"> |
|
<div class="panel"> |
|
<label class="panel-heading" for="advanced-parameters">Paramètres avancés</label> |
|
<div class="panel-block advanced-parameters-body"> |
|
<div class="container wide-label"> |
|
<div class="field is-horizontal"> |
|
<div class="field-label is-normal"> |
|
<label class="label">Poids véhicule</label> |
|
</div> |
|
<div class="field-body"> |
|
<div class="field has-addons"> |
|
<p class="control is-expanded"> |
|
<input name="empty-weight" class="input" type="number" min="1" value="80"/> |
|
</p> |
|
<p class="control"> |
|
<a class="button is-static">kg</a> |
|
</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="field is-horizontal"> |
|
<div class="field-label is-normal"> |
|
<label class="label">Puissance pilote (pédalage)</label> |
|
</div> |
|
<div class="field-body"> |
|
<div class="field has-addons"> |
|
<p class="control is-expanded"> |
|
<input name="human-power" class="input" type="number" min="0" value="100"/> |
|
</p> |
|
<p class="control"> |
|
<a class="button is-static">W</a> |
|
</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="field is-horizontal"> |
|
<div class="field-label is-normal"> |
|
<label class="label">Contrainte vitesse (circulation, etc.)</label> |
|
</div> |
|
<div class="field-body"> |
|
<div class="field has-addons"> |
|
<p class="control is-expanded"> |
|
<input name="speed-limit" class="input" type="number" min="1" value="30"/> |
|
</p> |
|
<p class="control"> |
|
<a class="button is-static">km/h</a> |
|
</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="field is-horizontal"> |
|
<div class="field-label is-normal"> |
|
<label class="label">Ratio de terrain plat</label> |
|
</div> |
|
<div class="field-body"> |
|
<div class="field has-addons"> |
|
<p class="control is-expanded"> |
|
<input name="flat-ratio" class="input" type="number" min="0" max="100" value="50"/> |
|
</p> |
|
<p class="control"> |
|
<a class="button is-static">%</a> |
|
</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<a class="simulate-button button is-primary is-fullwidth">Simuler</a> |
|
</div> |
|
|
|
<div class="simulation-results is-hidden"> |
|
<div class="result-info"></div> |
|
<div class="battery-charge-graph"> |
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1000 300"></svg> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
<footer class="footer"> |
|
<div class="content has-text-centered"> |
|
<p> |
|
Ce simulateur est un logiciel libre sous licence <a href="https://gitea.youb.fr/youen/vhelio-simulator/raw/branch/master/AGPLv3.txt">AGPL</a><br/> |
|
Développé par l'association <a href="https://vhelio.org/association/">« Vélo Solaire Pour Tous »</a><br/> |
|
<a href="https://gitea.youb.fr/youen/vehicle-simulator">Accéder au code source</a> |
|
</p> |
|
</div> |
|
</footer> |
|
|
|
<div class="modal zones-map-modal"> |
|
<div class="modal-background"></div> |
|
<div class="modal-card"> |
|
<header class="modal-card-head"> |
|
<p class="modal-card-title">Choisissez votre zone climatique</p> |
|
<button class="delete" aria-label="close"></button> |
|
</header> |
|
<section class="modal-card-body"> |
|
<svg class="zones-map" xmlns="http://www.w3.org/2000/svg" width="595" height="564" version="1.0"></svg> |
|
</section> |
|
</div> |
|
</div> |