<!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>