<!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="587" height="550" version="1.0"></svg> </section> </div> </div> <script type="text/javascript" src="simulator.js"></script> </body> </html>