|
|
|
|
<!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>
|
|
|
|
|
|
|
|
|
|
<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/vhelio-simulator">Accéder au code source</a>
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</footer>
|
|
|
|
|
|
|
|
|
|
<div id="zones-map-modal" class="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 id="zones-map" width="595" height="564" version="1.0"></svg>
|
|
|
|
|
</section>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript" src="simulator.js"></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
