143 lines
4.4 KiB
HTML
143 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
text-decoration: none;
|
|
outline: none;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Roboto', sans-serif;
|
|
padding: 1em;
|
|
}
|
|
|
|
input,
|
|
select {
|
|
font-size: 1.2em;
|
|
border: 1px solid rgb(202, 207, 211);
|
|
border-radius: 0.3em;
|
|
padding: 0.2em;
|
|
color: rgb(17, 17, 17);
|
|
}
|
|
textarea{
|
|
border: 1px solid rgb(202, 207, 211);
|
|
border-radius: 0.3em;
|
|
padding: 0.2em;
|
|
color: rgb(17, 17, 17);
|
|
}
|
|
label {
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
button {
|
|
padding: 0.4em;
|
|
background-color: #0d6efd;
|
|
border: 0;
|
|
border-radius: 0.4em;
|
|
color: white;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
button:hover {
|
|
background-color: #0b5ed7;
|
|
}
|
|
|
|
.ct_col {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: max-content;
|
|
}
|
|
|
|
.ct_row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
width: max-content;
|
|
gap: 1em;
|
|
}
|
|
|
|
.gap_1 {
|
|
gap: 1em;
|
|
}
|
|
</style>
|
|
<script src="./js/main.js" defer></script>
|
|
<title>Alquiler de coche</title>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="ct_col gap_1">
|
|
<form id="formAlquiler" class="ct_col gap_1">
|
|
<div class="ct_row">
|
|
<div class="ct_col">
|
|
<label for="fechaInicio">Fecha de inicio</label><input type="date" name="fechaInicio"
|
|
id="fechaInicio">
|
|
</div>
|
|
<div class="ct_col">
|
|
<label for="fechaFin">Fecha de fin</label><input type="date" name="fechaFin" id="fechaFin">
|
|
</div>
|
|
</div>
|
|
<div class="ct_col">
|
|
<label for="tipoVehiculo">Tipo de vehiculo</label>
|
|
<select name="tipoVehiculo" id="tipoVehiculo">
|
|
<option value='basico' selected>Basico (45€ dia)</option>
|
|
<option value='gama_media'>Gama media (65€ dia)</option>
|
|
<option value='lujo'>Lujo (85 dia)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<h2>Elementos Opcionales</h2>
|
|
<div>
|
|
<input type="checkbox" name="sillainfantil" id="sillainfantil">
|
|
<label for="sillainfantil">Silla infantil (15€ por dia)</label>
|
|
</div>
|
|
<div>
|
|
<input type="checkbox" name="gps" id="gps">
|
|
<label for="gps">GPS (5€ por dia)</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h2>Seguro</h2>
|
|
<p>*** El seguro a terceros es obligatorio y tiene un coste de 10 €/dia
|
|
sin
|
|
IVA</p>
|
|
<div>
|
|
<input type="checkbox" name="segurotr" id="segurotr">
|
|
<label for="segurotr">Seguro todo riesgo</label>
|
|
</div>
|
|
<div>
|
|
<input type="checkbox" name="menor30" id="menor30">
|
|
<label for="menor30">Menor de 30 años (Recargo del 30% sobre el precio final)</label>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</form>
|
|
<div class="ct_row">
|
|
<label for="total">Total Coste</label><input type="text" name="total" id="total" readonly>
|
|
</div>
|
|
|
|
<div class="ct_row">
|
|
<button type="button" onclick="calculaAlquiler()">Calcula total</button>
|
|
<button type="button" onclick="submitForm()">Enviar Formulario</button>
|
|
<button type="button" onclick="limpiarForm()">Limpiar</button>
|
|
</div>
|
|
<textarea style="width:100%; height:30em;" name="resumen" id="resumen"></textarea>
|
|
</div>
|
|
|
|
|
|
|
|
</body>
|
|
|
|
</html> |