source: src/main/resources/templates/home.html@ f7c05a1

Last change on this file since f7c05a1 was f7c05a1, checked in by Elena Shulevska <elena.shulevska@…>, 16 months ago

initial commit of the source code on origin
  • Property mode set to 100644
File size: 5.0 KB
Line 
1<!DOCTYPE html>
2<html lang="en" xmln="http://www.w3.org/1999/xhtml">
3<head>
4 <!-- Required meta tags -->
5 <meta charset="utf-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
8 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
9 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
10 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
11 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
12 <!-- Bootstrap CSS -->
13 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
14 integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
15 <title>Home</title>
16 <style>
17 header{
18 font-size: 30px;
19 font-family: 'Montserrat', sans-serif;
20 }
21 body {
22 font-family: 'Montserrat', sans-serif;
23 }
24 h6{
25 text-align: center;
26 text-space: 5px;
27 font-size: 23px;
28 }
29 .bg-img {
30 background-position: center;
31 background-size: cover;
32 height: 100vh; /* adjust as needed */
33 }
34 .btn-width{
35 width: 120px;
36 }
37 .dropbtn {
38 background: white;
39 border: none;
40 }
41 .dropdown {
42 position: relative;
43 display: inline-block;
44 }
45 .dropdown-content {
46 display: none;
47 position: absolute;
48 background-color: #f1f1f1;
49 font-size: 20px;
50 min-width: 160px;
51 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
52 z-index: 1;
53 }
54 .dropdown-content a {
55 padding: 12px 16px;
56 text-decoration: none;
57 display: block;
58 }
59 .dropdown-content a:hover {background-color: #ddd;}
60 .dropdown:hover .dropdown-content {display: block;}
61 /*.dropdown:hover .dropbtn {background-color: darkolivegreen;}*/
62 </style>
63</head>
64<body>
65<header>
66 <nav class="navbar navbar-expand-lg navbar-light bg-white">
67 <div class="container-fluid">
68 <img th:src="@{../logo.png}" class="img-fluid mx-auto d-block ms-0" width="200px" height="150px" alt="Logo">
69 <div class="collapse navbar-collapse justify-content-end mr-5" id="navbarNavAltMarkup">
70 <div class="navbar-nav me-0 text-black ml-5">
71 <a class="nav-link active mr-5 " aria-current="page" href="#">Home</a>
72 <div class="dropdown">
73 <button class="dropbtn nav-link mr-5">Reservations</button>
74 <div class="dropdown-content">
75 <li th:if="${session.role} != 'user' and ${session.role} != 'default'"><a th:href="@{/reservations/rooms}" class="text-secondary">New Reservations</a></li>
76 <li><a th:href="@{/rooms/available}" class="text-secondary">Available Reservations</a></li>
77 </div>
78 </div>
79 <a class="nav-link mr-5" th:href="@{/home/contact}">Contact</a>
80 <a class="nav-link mr-5" href="/logout" th:if="${session.user != null}">Log Out</a>
81 </div>
82 </div>
83 </div>
84 </nav>
85</header>
86<div class="bg-img" style="background-image: url(../villa-home.png);">
87 <div class="overlay"></div>
88<div class="container-fluid">
89 <div class="container bg-light float-right mr-5 mt-5" style="width: 480px; height: 680px">
90 <div class="row">
91 <div class="col-12 p-5 mt-5">
92 <h3 class="text-secondary text-center">Welcome to Villa Dihovo!</h3>
93 </div>
94 <div class="col-12 p-5 text-center">
95 <h6 class="text-secondary">
96 Villa Dihovo is member of the Slow Food
97 organization for healthy food and
98 produces home-made beer, wine and brandy,
99 as well as home-made organic food.
100 </h6>
101 </div>
102 <div class="col-12 p-5 ml-4">
103 <a class="btn btn-secondary mx-3 my-2 btn-width" th:href="@{/api/login}" th:if="${session.user == null}">Login</a>
104 <a class="btn btn-secondary mx-3 my-2 btn-width" th:href="@{/api/register}" th:if="${session.user == null}">Register</a>
105 </div>
106 </div>
107 </div>
108</div>
109</div>
110</body>
111</html>
112
113<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
114<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.16.6/dist/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
115<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min"></script>
Note: See TracBrowser for help on using the repository browser.