Vehicle energy consumption and production simulator
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.
 
 
 
 

120 lines
3.5 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"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.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>
<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>
</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>
<script type="text/javascript" src="simulator.js"></script>
</body>
</html>