-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
160 lines (160 loc) · 9.31 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="hotel perla blanca, hotel, hospedaje, habitaciones">
<meta name="description" content="Sitio web del Hotel Perla Blanca con información de habitaciones y reservas">
<meta name="author" content="Christian Corona">
<meta name="copyright" content="Christian Corona">
<meta property="og:title" content="Hotel Perla Blanca">
<meta property="og:site_name" content="Hotel Perla Blanca">
<meta property="og:url" content="https://chriscoronab.github.io/HotelPerlaBlanca">
<meta property="og:description" content="Sitio web del Hotel Perla Blanca con información de habitaciones y reservas">
<meta property="og:type" content="website">
<meta property="og:image" content="https://raw.githubusercontent.com/chriscoronab/HotelPerlaBlanca/master/assets/img/hotel.jpg">
<link rel="apple-touch-icon" sizes="180x180" href="./assets/img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./assets/img/favicon-16x16.png">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
<link rel="stylesheet" href="./css/style.css">
<title>Hotel Perla Blanca</title>
</head>
<body>
<header>
<nav>
<div>
<a href="#"><img src="./assets/img/logo.png" alt="logo"></a>
</div>
<h1 class="fuenteTitulo">Hotel Perla Blanca</h1>
</nav>
</header>
<main class="fuenteRegular">
<section id="home">
<div id="carouselExampleSlidesOnly" class="carousel slide container" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./assets/img/hotel.jpg" class="d-block w-100" alt="hotelImg">
</div>
<div class="carousel-item">
<img src="./assets/img/hotelperlablanca.jpg" class="d-block w-100" alt="hotelPerlaBlancaImg">
</div>
<div class="carousel-item">
<img src="./assets/img/gardenbreakfast.jpg" class="d-block w-100" alt="gardenBreakfastImg">
</div>
<div class="carousel-item">
<img src="./assets/img/exterior-view.jpg" class="d-block w-100" alt="exteriorViewImg">
</div>
</div>
</div>
<div id="servicios">
<p>Contamos con habitaciones dobles, triples, cuádruples y suite. Todas cuentan con Wi-Fi, baño privado, aire acondicionado, equipadas con sommier matrimonial o camas individuales, cerradura electrónica, TV con cable, caja de seguridad individual, secador de pelo, frigobar, pava eléctrica, etc.
<br>
<br>
Además, contamos con estacionamiento cubierto, salón comedor con buffet, quincho con aire y calefacción, parrillas bajo techo, pileta y vestuarios, cancha de vóley, fútbol, sala de juegos con pool, metegol y ping pong.
<br>
<br>
Para reservar una habitación en el Hotel Perla Blanca, debes completar este <strong><a href="#formulario" >formulario</a></strong>.</p>
</div>
</section>
<section id="habitaciones"></section>
<section id="formulario">
<h3>Completa tus datos para reservar una habitación</h3>
<div id="datosReserva" class="container"></div>
<div id="reservaHecha" class="container"></div>
<div id="reservaCancelada" class="container"></div>
<div id="botonCancelar">
<button type="button" class="btn btn-danger d-none"></button>
</div>
<form id="inputsFormulario" class="container">
<div class="row mb-3">
<label for="nombreApellido" class="col-sm-2 col-form-label">Nombre y apellido</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="nombreApellido" name="nombreApellido" required>
</div>
</div>
<div class="row mb-3">
<label for="correoElectronico" class="col-sm-2 col-form-label">Correo electrónico</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="correoElectronico" name="correoElectronico" required>
</div>
</div>
<div class="row mb-3">
<label for="telefono" class="col-sm-2 col-form-label">Teléfono</label>
<div class="col-sm-10">
<input type="tel" class="form-control" id="telefono" name="telefono" required>
</div>
</div>
<div class="row mb-3">
<label for="cantidadPersonas" class="col-sm-2 col-form-label">Cantidad de personas</label>
<div class="col-sm-10">
<select class="form-control" onchange="deshabilitarOpciones(this.value);" id="cantidadPersonas" name="cantidadPersonas" required>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
</div>
<div class="row mb-3">
<label for="tipoHabitacion" class="col-sm-2 col-form-label">Tipo de habitación</label>
<div class="col-sm-10">
<select class="form-control" onchange="cambiarPrecioNoche(this.value);" id="tipoHabitacion" name="tipoHabitacion" required>
<option id="habitacionDoble" value="Habitación Doble">Habitación doble</option>
<option id="habitacionTriple" value="Habitación Triple">Habitación triple</option>
<option id="habitacionCuadruple" value="Habitación Cuádruple">Habitación cuádruple</option>
<option id="suite" value="Suite">Suite</option>
</select>
</div>
</div>
<div class="row mb-3">
<label for="fechaIngreso" class="col-sm-2 col-form-label">Fecha de ingreso</label>
<div class="col-sm-10">
<input type="date" class="form-control" id="fechaIngreso" name="fechaIngreso" required>
</div>
</div>
<div id="alertFecha"></div>
<div class="row mb-3">
<label for="fechaSalida" class="col-sm-2 col-form-label">Fecha de salida</label>
<div class="col-sm-10">
<input type="date" class="form-control" oninput="calcularNoches()" id="fechaSalida" name="fechaSalida" required>
</div>
</div>
<div class="row mb-3">
<label for="cantidadNoches" class="col-sm-2 col-form-label">Cantidad de noches</label>
<div class="col-sm-10">
<input class="form-control" id="cantidadNoches" name="cantidadNoches" readonly>
</div>
</div>
<div class="row mb-3">
<label for="precioTotal" class="col-sm-2 col-form-label">Precio total (USD)</label>
<div class="col-sm-10">
<input class="form-control" id="precioTotal" name="precioTotal" readonly>
</div>
</div>
<div class="row mb-3">
<label for="metodoPago" class="col-sm-2 col-form-label">Método de pago</label>
<div class="col-sm-10">
<select class="form-control" id="metodoPago" name="metodoPago" required>
<option value="Efectivo">Efectivo</option>
<option value="Tarjeta de débito">Tarjeta de débito</option>
<option value="Tarjeta de crédito">Tarjeta de crédito</option>
</select>
</div>
</div>
<div class="button">
<button id="boton" type="submit" class="btn btn-primary">Reservar</button>
</div>
</form>
</section>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
</script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="./js/script.js"></script>
</body>
</html>