Adds a div for switch the view

Adds a new div that allows to switch between
views

src/main/webapp/main.html

@@ -15,20 +15,26 @@
 				<a href="#" class="navbar-brand d-flex align-items-center">
 					<strong>DAA	Example</strong>
 				</a>
+				<a href="#" id="people" class="navbar-brand d-flex align-items-center">Personas</a>
+				<a href="#" id="pets" class="navbar-brand d-flex align-items-center">Mascotas</a>
 				<button id="logout" class="btn btn-dark">Cerrar sesión</button>
 			</div>
 		</div>
 	</header>
 
 	<div class="container">
+		<div id="genericContainer">
 			<div id="people-container">
 				<h1 class="display-5 mt-3 mb-3">Personas</h1>
 			</div>
 		</div>
+	</div>
 	
 	<script type="text/javascript"
 		src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
 	<script type="text/javascript" src="js/dao/people.js"></script>
+	<script type="text/javascript" src="js/dao/pets.js"></script>
+	<script type="text/javascript" src="js/view/pets.js"></script>
 	<script type="text/javascript" src="js/view/people.js"></script>
 	<script type="text/javascript" src="js/login.js"></script>
 	<script type="text/javascript">
@@ -46,5 +52,36 @@
 		    view.init();
 		});
     </script>
+	<script>
+		$('#pets').click(function(event){
+			event.preventDefault();
+			$('#genericContainer').empty();
+			$('#genericContainer').append("<div id='pets-container'>" +
+					"<h1 class=\"display-5 mt-3 mb-3\">Mascotas</h1>" +
+					"</div>");
+
+			var view = new PetsView(new PetsDAO(),
+					'pets-container','pets-container'
+			);
+
+			view.init();
+		});
+	</script>
+	<script>
+		$('#people').click(function (event) {
+			event.preventDefault();
+			$('#genericContainer').empty();
+			$('#genericContainer').append("<div id='people-container'>" +
+					"<h1 class=\"display-5 mt-3 mb-3\">Personas</h1>" +
+					"</div>");
+
+			let view = new PeopleView(new PeopleDAO(),
+					'people-container','people-container'
+			);
+
+			view.init();
+		})
+	</script>
+
 </body>
 </html>
\ No newline at end of file