commit3

src/main/java/com/example/demo/controllers/MainController.java

@@ -0,0 +1,184 @@
+package com.example.demo.controllers;
+
+import com.example.demo.Dominio;
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.RequestParam;
+
+import java.net.MalformedURLException;
+import java.time.LocalDateTime;
+import java.time.format.DateTimeFormatter;
+import java.util.Optional;
+
+/** Para esto caso con UN SOLO CONTROLADOR es suficiente */
+@Controller
+public class MainController {
+
+	Dominio dom;
+
+	public void buscaURL() throws MalformedURLException {
+			this.dom  = new Dominio();
+	}
+
+	/** TRANSMITIMOS A LOS HTMLS - getMapping DICE A CUALES*/
+
+	@GetMapping({"","/","/home","/inicio","/index"})
+	public String welcome(Model model) throws MalformedURLException {
+		this.buscaURL();
+		model.addAttribute("content_1p",
+    """
+			¿Cuantas veces tienes ese tipo de días que quieres ver una película pero no sabes cual ver?
+				""");
+		model.addAttribute("content_2p",
+    """
+			¿Cuantas veces te has perdido en inmensos catalogos?
+				""");
+		model.addAttribute("content_3p",
+    """
+			Este es tu sitio ideal.
+				""");
+		model.addAttribute("title", "La Filmoteca - Inicio");
+		model.addAttribute("url", dom.getUrl());
+		return "index";
+	}
+
+	@GetMapping({"/sobre_nosotros"})
+	public String sobre(Model model) throws MalformedURLException {
+		this.buscaURL();
+		model.addAttribute("content_1p", """
+			En La Filmoteca acercamos de una manera intuitiva las mejores películas de la historia según nuestros expertos y
+			las más prestigiosas publicaciones de este arte.
+			Prometemos acercarnos al visitante de una manera intuitiva y educadora.
+				""");
+		model.addAttribute("content_2p", """
+			Nos comprometemos a que nuestros visitantes puedan escoger cualquier apartado del forma más simple,
+			sin colmar su paciencia haciendo que estos mismo recomienden dicha página a sus amigos.
+			Con una estética simple y minimalista, haremos que cada visitante confíe en nosotros.
+				""");
+		model.addAttribute("content_3p", """
+			Alejandro Javier Albus -- cc 2022
+   
+			Aviso legal:
+			Todas las imágenes de las películas son propiedad de sus respectivas productoras y/o autores.
+			Las descripciones y atributos de las películas han sido extraídas de la web de FilmAffinity
+				""");
+		model.addAttribute("title", "La Filmoteca - Sobre");
+		model.addAttribute("url", dom.getUrl());
+		return "sections/sobre_nosotros";
+	}
+
+	@GetMapping({"/nuestra_seleccion"})
+	public String nuestraSeleccion(Model model) throws MalformedURLException {
+		this.buscaURL();
+		model.addAttribute("content","Presentamos la selección completa...");
+		model.addAttribute("title", "La Filmoteca - Nuestra Seleccion");
+		model.addAttribute("url", dom.getUrl());
+		return "sections/nuestra_seleccion";
+	}
+
+	@GetMapping({"/escribir_resenya"})
+	public String escribeResenya(Model model) throws MalformedURLException {
+		this.buscaURL();
+		model.addAttribute("content","Presentamos la selección completa...");
+		model.addAttribute("title", "La Filmoteca - Escribir reseña");
+		model.addAttribute("url", dom.getUrl());
+		return "sections/escribir_resenya";
+	}
+
+	@GetMapping({"/pelicula_elegida"})
+	public String peliculaElegida(Model model) throws MalformedURLException {
+		this.buscaURL();
+		model.addAttribute("titulo", "1917");
+		return "sections/pelicula_elegida";
+	}
+
+	/** No es necesario hacer una pagina para cada genero */
+	@GetMapping({"/generos"})
+	public String generos(Model model) throws MalformedURLException {
+		this.buscaURL();
+		model.addAttribute("content","Presentamos los géneros disponibles...");
+		model.addAttribute("title", "La Filmoteca - Géneros");
+		model.addAttribute("url", dom.getUrl());
+		return "sections/generos";
+	}
+
+	@GetMapping("/hora")
+	public String hora(Model model) {
+		DateTimeFormatter dtf = DateTimeFormatter.ofPattern("dd/MM/yyyy HH:mm:ss");
+		model.addAttribute("fechahora",dtf.format(LocalDateTime.now()));
+		DateTimeFormatter hora = DateTimeFormatter.ofPattern("HH");
+		int ihora = Integer.parseInt(hora.format(LocalDateTime.now()));
+		String background="claro";
+		if (ihora >= 20 || ihora <= 7 ) {
+			background="oscuro";
+		}
+		model.addAttribute("background",background);
+		return "hora";
+	}
+
+	@GetMapping("/parametros")
+	public String parametros (Model model) throws MalformedURLException {
+		this.buscaURL();
+		model.addAttribute("titulo", "Propiedades del servidor y URL");
+		model.addAttribute("addr",dom.getAddr());
+		model.addAttribute("hostnameCanonical",dom.getCanonnical());
+		model.addAttribute("hostname",dom.getHostname());
+		model.addAttribute("address",dom.getAddr());
+		/* importante */
+		model.addAttribute("url",dom.getUrl());
+		model.addAttribute("port",dom.getPuerto());
+		model.addAttribute("host",dom.getHostname());
+		model.addAttribute("protocol",dom.getProtocolo());
+		model.addAttribute("path",dom.getPath());
+		model.addAttribute("query",dom.getQuery());
+		model.addAttribute("dominio",dom.getDominio());
+		model.addAttribute("tld",dom.getTld());
+		return("pruebas/parametros");
+	}
+
+	/**
+	 * 127.0.0.1 dominio1.es.tipo1
+	 * 127.0.0.1 dominio2.es.tipo1
+	 * 127.0.0.1 dominio1.es.tipo2
+	 * 127.0.0.1 dominio2.es.tipo2
+	 */
+
+	/* backend */
+	@GetMapping({"/springsecurity/{usuario}","/springsecurity"})
+	public String springsecurity(@PathVariable(name="usuario", required = false) String usuario, Model model) throws MalformedURLException {
+		this.buscaURL();
+		model.addAttribute("titulo","Panel de control security");
+		model.addAttribute("usuario",usuario);
+		return "springsecurity/login";
+	}
+
+	/*@GetMapping({"/logout","/salir"})
+	public String logout( Model model) throws MalformedURLException {
+		this.buscaURL();
+		model.addAttribute("titulo","Panel de control security");
+		return "springsecurity/logout";
+	}*/
+
+	/*  url amigable */
+	@GetMapping({"/entrar/{usuario}","/entrar","/usuario/{usuario}","/usuario"})
+	public String login(@PathVariable(name="usuario", required = false) String usuario,
+						Model model) throws MalformedURLException {
+		this.buscaURL();
+		model.addAttribute("titulo","Panel de control");
+		model.addAttribute("usuario",usuario);
+		return "backend/login";
+	}
+
+	/* admin */
+	@GetMapping({"/admin","/intranet","/login"})
+	public String admin(@RequestParam("usuario") Optional<String>  usuario,
+						Model model) throws MalformedURLException {
+		this.buscaURL();
+		model.addAttribute("titulo","Intranet");
+		model.addAttribute("usuario",usuario.orElse(""));
+		return "admin/login";
+	}
+
+}

src/main/resources/resources/js/login.js

@@ -0,0 +1,19 @@
+function toggleResetPswd(e){
+    e.preventDefault();
+    $('#logreg-forms .form-signin').toggle() // display:block or none
+    $('#logreg-forms .form-reset').toggle() // display:block or none
+}
+
+function toggleSignUp(e){
+    e.preventDefault();
+    $('#logreg-forms .form-signin').toggle(); // display:block or none
+    $('#logreg-forms .form-signup').toggle(); // display:block or none
+}
+
+$(()=>{
+    // Login Register Form
+    $('#logreg-forms #forgot_pswd').click(toggleResetPswd);
+    $('#logreg-forms #cancel_reset').click(toggleResetPswd);
+    $('#logreg-forms #btn-signup').click(toggleSignUp);
+    $('#logreg-forms #cancel_signup').click(toggleSignUp);
+})

src/main/resources/static/css/login.css

@@ -0,0 +1,24 @@
+@charset "UTF-8";
+.login-block{
+    background: #DE6262;  /* fallback for old browsers */
+background: -webkit-linear-gradient(to bottom, #FFB88C, #DE6262);  /* Chrome 10-25, Safari 5.1-6 */
+background: linear-gradient(to bottom, #FFB88C, #DE6262); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+float:left;
+width:100%;
+padding : 50px 0;
+}
+.banner-sec{background:url(https://static.pexels.com/photos/33972/pexels-photo.jpg)  no-repeat left bottom; background-size:cover; min-height:500px; border-radius: 0 10px 10px 0; padding:0;}
+.container{background:#fff; border-radius: 10px; box-shadow:15px 20px 0px rgba(0,0,0,0.1);}
+.carousel-inner{border-radius:0 10px 10px 0;}
+.carousel-caption{text-align:left; left:5%;}
+.login-sec{padding: 50px 30px; position:relative;}
+.login-sec .copy-text{position:absolute; width:80%; bottom:20px; font-size:13px; text-align:center;}
+.login-sec .copy-text i{color:#FEB58A;}
+.login-sec .copy-text a{color:#E36262;}
+.login-sec h2{margin-bottom:30px; font-weight:800; font-size:30px; color: #DE6262;}
+.login-sec h2:after{content:" "; width:100px; height:5px; background:#FEB58A; display:block; margin-top:20px; border-radius:3px; margin-left:auto;margin-right:auto}
+.btn-login{background: #DE6262; color:#fff; font-weight:600;}
+.banner-text{width:70%; position:absolute; bottom:40px; padding-left:20px;}
+.banner-text h2{color:#fff; font-weight:600;}
+.banner-text h2:after{content:" "; width:100px; height:5px; background:#FFF; display:block; margin-top:20px; border-radius:3px;}
+.banner-text p{color:#fff;}

src/main/resources/templates/admin/login.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
+<html lang="es" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+        <title th:text="${titulo}">Título de la página</title>
+        <meta name="description" content="">
+        <link href="/webjars/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+        <link href="/webjars/font-awesome/css/all.css" rel="stylesheet">
+        <link href="/css/adminlogin.css" rel="stylesheet">
+    </head>
+
+    <body>
+
+    <div class="main">
+        <div class="container">
+            <div class="middle">
+                <div id="login">
+                    <form action="javascript:void(0);" method="get">
+                        <fieldset class="clearfix">
+                            <p ><span class="fa fa-user"></span><input type="text"  Placeholder="Usuario" required th:value="${usuario}"></p> <!-- JS because of IE support; better: placeholder="Username" -->
+                            <p><span class="fa fa-lock"></span><input type="password"  Placeholder="Contraseña" required></p> <!-- JS because of IE support; better: placeholder="Password" -->
+                            <div>
+                                <span style="width:48%; text-align:left;  display: inline-block;"><a class="small-text" href="#">¿Has olvidado la contraseña?</a></span>
+                                <span style="width:50%; text-align:right;  display: inline-block;"><input type="submit" value="Entrar"></span>
+                            </div>
+                        </fieldset>
+                    </form>
+                </div> <!-- end login -->
+            </div>
+        </div>
+    </div>
+
+    </body>
+
+</html>

src/main/resources/templates/backend/login.html

@@ -0,0 +1,73 @@
+<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
+<html lang="es"
+      xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title th:text="${titulo}">Título de la página</title>
+    <meta name="description" content="">
+    <link href="/webjars/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+    <link href="/webjars/font-awesome/css/all.css" rel="stylesheet">
+    <link href="/css/login.css" rel="stylesheet">
+</head>
+<body >
+
+
+<section class="login-block">
+    <section class="vh-100">
+        <div class="container py-5 h-100">
+            <div class="row d-flex align-items-center justify-content-center h-100">
+                <div class="col-md-8 col-lg-7 col-xl-6">
+                    <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-login-form/draw2.svg"
+                         class="img-fluid" alt="Phone image">
+                </div>
+                <div class="col-md-7 col-lg-5 col-xl-5 offset-xl-1">
+                    <form>
+                        <!-- Email input -->
+                        <div class="form-outline mb-4">
+                            <input type="email" id="form1Example13" class="form-control form-control-lg" />
+                            <label class="form-label" for="form1Example13">Email address</label>
+                        </div>
+
+                        <!-- Password input -->
+                        <div class="form-outline mb-4">
+                            <input type="password" id="form1Example23" class="form-control form-control-lg" />
+                            <label class="form-label" for="form1Example23">Password</label>
+                        </div>
+
+                        <div class="d-flex justify-content-around align-items-center mb-4">
+                            <!-- Checkbox -->
+                            <div class="form-check">
+                                <input class="form-check-input" type="checkbox" value="" id="form1Example3" checked />
+                                <label class="form-check-label" for="form1Example3"> Remember me </label>
+                            </div>
+                            <a href="#!">Forgot password?</a>
+                        </div>
+
+                        <!-- Submit button -->
+                        <button type="submit" class="btn btn-primary btn-lg btn-block">Entrar</button>
+
+                        <div class="divider d-flex align-items-center my-4">
+                            <p class="text-center fw-bold mx-3 mb-0 text-muted">OR</p>
+                        </div>
+
+                        <a class="btn btn-primary btn-lg btn-block" style="background-color: #3b5998" href="#!"
+                           role="button">
+                            <i class="fab fa-facebook-f me-2"></i>Continue with Facebook
+                        </a>
+                        <a class="btn btn-primary btn-lg btn-block" style="background-color: #55acee" href="#!"
+                           role="button">
+                            <i class="fab fa-twitter me-2"></i>Continue with Twitter</a>
+
+                    </form>
+                </div>
+            </div>
+        </div>
+    </section>
+</section>
+<script src="webjars/jsquery/jquery.min.js"></script>
+<script src="webjars/bootstrap/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>

src/main/resources/templates/empleado/list.html

@@ -0,0 +1,20 @@
+<div th:fragment="listado" class="flex-shrink-0">
+    <h1>Listado de películas disponibles</h1>
+    <table class="table">
+        <thead>
+        <tr>
+            <th>ID</th>
+            <th>Nombre</th>
+            <th>Email</th>
+            <th>Teléfono</th>
+        </thead>
+        <tbody>
+        <tr th:each="empleado : ${listaEmpleados}">
+            <td th:text="${empleado.id}">ID</td>
+            <td th:text="${empleado.nombre}">Pepe Pérez</td>
+            <td th:text="${empleado.email}">[email protected]</td>
+            <td th:text="${empleado.telefono}">954000000</td>
+        </tr>
+        </tbody>
+    </table>
+</div>

src/main/resources/templates/main/main_content.html

@@ -0,0 +1,138 @@
+<div th:fragment="index" class="flex-shrink-0">
+  <div class="container" style = "text-align: center;">
+    <h1 style = "margin-top: 3%; margin-bottom:  2%"> ¡Bienvenidos a La Filmoteca! </h1>
+    <p th:text="${content_1p}" style = "font-style: italic;"></p>
+  </div>
+  <div class="container my-5">
+  </div>
+</div>
+
+<div th:fragment="sobre_nosotros" class="flex-shrink-0">
+  <div class="container" style = "text-align: center; margin: 5%;">
+    <div class="card text-center">
+      <div class="card-header">
+        Sobre nosotros
+      </div>
+      <div class="card-body">
+        <h5 class="card-title" th:text="${content_1p}" style = "font-style: italic;"></h5>
+        <p class="card-text" th:text="${content_2p}" style = "font-style: italic;"></p>
+        <p class="card-text" th:text="${content_3p}" style = "font-size: smaller; font-style: italic;"></p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div th:fragment="escribir_resenya" style="margin: 5% 20% 2%;">
+  <form>
+    <h3>Yo opino que...</h3>
+    <div class="mb-3">
+      <input type="email" class="form-control" id="pelicula" aria-describedby="emailHelp">
+      <div id="emailHelp" class="form-text"> Título de la reseña </div>
+    </div>
+    <div class="form-floating">
+      <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
+      <label for="floatingTextarea"> </label>
+    </div>
+    <button type="submit" class="btn btn-primary" style="background-color: black; margin-top: 1%;"> Enviar </button>
+  </form>
+</div>
+
+<div th:fragment="generos" class="flex-shrink-0">
+  <div class="container" style = "text-align: center; margin: 5%;">
+    <div class="card mb-3">
+      <img src="/img/manchesterbythesea.png" class="card-img-top" alt="...">
+      <div class="card-body">
+        <h5 class="card-title" href="/generos/genero_drama">Drama</h5>
+        <p class="card-text">Películas en que prevalecen acciones y situaciones tensas y pasiones conflictivas.</p>
+      </div>
+    </div>
+    <div class="card mb-3">
+      <img src="/img/miradaindiscreta.png" class="card-img-bottom" alt="...">
+      <div class="card-body">
+        <h5 class="card-title">Thriller</h5>
+        <p class="card-text">Películas con una trama emocionante que mantiene al espectador en constante suspenso.</p>
+      </div>
+    </div>
+    <div class="card mb-3">
+      <img src="/img/waterloo.png" class="card-img-bottom" alt="...">
+      <div class="card-body">
+        <h5 class="card-title">Épica</h5>
+        <p class="card-text">Películas que resultan impresionantes y/o majestuosas.</p>
+      </div>
+    </div>
+    <div class="card mb-3">
+      <img src="/img/enterthevoid.png" class="card-img-bottom" alt="...">
+      <div class="card-body">
+        <h5 class="card-title">Miscelánea</h5>
+        <p class="card-text">Películas que no encajan en las categorías anteriormente mencionadas.</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div th:fragment="nuestra_seleccion" class="flex-shrink-0">
+  <div class="container" style = "text-align: center; margin: 5%;">
+    <h1 style = "margin-top: 5%"> Nuestra selección </h1>
+    <hr>
+    <ol class="list-group list-group-numbered">
+      <li class="list-group-item d-flex justify-content-between align-items-start">
+        <div class="ms-2 me-auto">
+          <div class="fw-bold">1917</div>
+          Sam Mendes
+        </div>
+        <span class="badge rounded-pill" style="background-color: red; margin-right: 1%"><a style="color: white;" href="/escribir_resenya">Manda un email</a></span>
+        <span class="badge bg-primary rounded-pill"><a style="color: white;" href="/escribir_resenya">Escribe una reseña</a></span>
+      </li>
+      <li class="list-group-item d-flex justify-content-between align-items-start">
+        <div class="ms-2 me-auto">
+          <div class="fw-bold">Interstellar</div>
+          Cristopher Nolan
+        </div>
+        <span class="badge rounded-pill" style="background-color: red; margin-right: 1%"><a style="color: white;" href="/escribir_resenya">Manda un email</a></span>
+        <span class="badge bg-primary rounded-pill"><a style="color: white;" href="/escribir_resenya">Escribe una reseña</a></span>
+      </li>
+      <li class="list-group-item d-flex justify-content-between align-items-start">
+        <div class="ms-2 me-auto">
+          <div class="fw-bold">Goodfellas</div>
+          Martin Scorsese
+        </div>
+        <span class="badge rounded-pill" style="background-color: red; margin-right: 1%"><a style="color: white;" href="/escribir_resenya">Manda un email</a></span>
+        <span class="badge bg-primary rounded-pill"><a style="color: white;" href="/escribir_resenya">Escribe una reseña</a></span>
+      </li>
+      <li class="list-group-item d-flex justify-content-between align-items-start">
+        <div class="ms-2 me-auto">
+          <div class="fw-bold">Goodfellas</div>
+          Martin Scorsese
+        </div>
+        <span class="badge rounded-pill" style="background-color: red; margin-right: 1%"><a style="color: white;" href="/escribir_resenya">Manda un email</a></span>
+        <span class="badge bg-primary rounded-pill"><a style="color: white;" href="/escribir_resenya">Escribe una reseña</a></span>
+      </li>
+      <li class="list-group-item d-flex justify-content-between align-items-start">
+        <div class="ms-2 me-auto">
+          <div class="fw-bold">Goodfellas</div>
+          Martin Scorsese
+        </div>
+        <span class="badge rounded-pill" style="background-color: red; margin-right: 1%"><a style="color: white;" href="/escribir_resenya">Manda un email</a></span>
+        <span class="badge bg-primary rounded-pill"><a style="color: white;" href="/escribir_resenya">Escribe una reseña</a></span>
+      </li>
+    </ol>
+    <br>
+    <nav aria-label="Page navigation example">
+      <ul class="pagination">
+        <li class="page-item">
+          <a class="page-link" href="#" aria-label="Previous">
+            <span aria-hidden="true">&laquo;</span>
+          </a>
+        </li>
+        <li class="page-item"><a class="page-link" href="#">1</a></li>
+        <li class="page-item"><a class="page-link" href="#">2</a></li>
+        <li class="page-item"><a class="page-link" href="#">3</a></li>
+        <li class="page-item">
+          <a class="page-link" href="#" aria-label="Next">
+            <span aria-hidden="true">&raquo;</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</div>

src/main/resources/templates/springsecurity/login.html

@@ -0,0 +1,92 @@
+<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
+<html lang="es"
+      xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title th:text="${titulo}">Título de la página</title>
+    <meta name="description" content="">
+    <link href="/webjars/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+    <link href="/webjars/font-awesome/css/all.css" rel="stylesheet">
+    <link href="/css/login.css" rel="stylesheet">
+</head>
+<body >
+
+
+<section class="login-block">
+    <div class="container">
+        <div class="row">
+            <div class="col-md-4 login-sec">
+                <h2 class="text-center"><i class="fa-solid fa-key"></i> Panel de Control</h2>
+                <p th:if="${loginError}" class="error">Wrong user or password</p>
+                <form class="login-form" th:action="@{/springsecurity}" method="post">
+                    <div class="form-group">
+                        <label for="username"><i class="fa-solid fa-envelope fa-fade"></i> e-Mail</label>
+                        <input id="username" name="username"  type="text" class="form-control" placeholder="escribe tu email" th:value="${usuario}">
+
+                    </div>
+                    <div class="form-group">
+                        <label for="password"><i class="fa-solid fa-lock  fa-fade"></i> Contraseña</label>
+                        <input id="password" name="password" type="password" class="form-control" placeholder="" required>
+                    </div>
+
+
+                    <div class="form-check">
+                        <label class="form-check-label">
+                            <input type="checkbox" class="form-check-input">
+                            <small>Recordar</small>
+                        </label>
+                        <button type="submit" class="btn btn-login float-right">Entrar</button>
+                    </div>
+
+                </form>
+                <div class="copy-text">Created with <i class="fa fa-heart"></i> by Grafreez</div>
+            </div>
+            <div class="col-md-8 banner-sec">
+                <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
+                    <ol class="carousel-indicators">
+                        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
+                        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
+                        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
+                    </ol>
+                    <div class="carousel-inner" role="listbox">
+                        <div class="carousel-item active">
+                            <img class="d-block img-fluid" src="https://static.pexels.com/photos/33972/pexels-photo.jpg" alt="First slide">
+                            <div class="carousel-caption d-none d-md-block">
+                                <div class="banner-text">
+                                    <h2>This is Heaven</h2>
+                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="carousel-item">
+                            <img class="d-block img-fluid" src="https://images.pexels.com/photos/7097/people-coffee-tea-meeting.jpg" alt="First slide">
+                            <div class="carousel-caption d-none d-md-block">
+                                <div class="banner-text">
+                                    <h2>This is Heaven</h2>
+                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="carousel-item">
+                            <img class="d-block img-fluid" src="https://images.pexels.com/photos/872957/pexels-photo-872957.jpeg" alt="First slide">
+                            <div class="carousel-caption d-none d-md-block">
+                                <div class="banner-text">
+                                    <h2>This is Heaven</h2>
+                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+<script src="webjars/jsquery/jquery.min.js"></script>
+<script src="webjars/bootstrap/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>

src/main/resources/templates/springsecurity/logout.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+salir
+</body>
+</html>