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.
132 lines
3.9 KiB
132 lines
3.9 KiB
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|
<link rel="stylesheet" href="simulator.css"/> |
|
</head> |
|
<body> |
|
<section class="section"> |
|
<div class="container"> |
|
<div class="simulation-parameters"> |
|
<div class="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">kWh</a> |
|
</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="field is-horizontal"> |
|
<div class="field-label is-normal"> |
|
<label class="label">Poids (bagages + passagers)</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="130"/> |
|
</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 id="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 class="field is-horizontal"> |
|
<div class="field-label is-normal"> |
|
</div> |
|
<div class="field-body"> |
|
<div class="field"> |
|
<p class="control is-expanded"> |
|
<a class="button is-primary is-fullwidth">Simuler</a> |
|
</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
<div id="zones-map-modal" class="modal"> |
|
<div class="modal-background"></div> |
|
<div class="modal-content"> |
|
<p class="image"> |
|
<svg id="zones-map" width="587" height="550" version="1.0"></svg> |
|
</p> |
|
</div> |
|
<button class="modal-close is-large" aria-label="close"></button> |
|
</div> |
|
|
|
<script type="text/javascript" src="simulator.js"></script> |
|
</body> |
|
</html>
|
|
|