1 | <!DOCTYPE html>
|
---|
2 | <html lang="en" xmlns:sec="http://www.w3.org/1999/xhtml">
|
---|
3 | <head>
|
---|
4 | <meta charset="UTF-8">
|
---|
5 | <title>BeautyCenter</title>
|
---|
6 | <link href="https://bootswatch.com/5/journal/bootstrap.css"
|
---|
7 | rel="stylesheet">
|
---|
8 | <script src="https://bootswatch.com/_assets/css/custom.min.css"></script>
|
---|
9 | <script src="https://bootswatch.com/_vendor/prismjs/themes/prism-okaidia.css" ></script>
|
---|
10 | <script src="https://bootswatch.com/_vendor/font-awesome/css/font-awesome.min.css"></script>
|
---|
11 |
|
---|
12 |
|
---|
13 |
|
---|
14 | </head>
|
---|
15 | <body>
|
---|
16 | <div th:fragment="header">
|
---|
17 | <nav class="navbar navbar-expand-lg navbar-light bg-light">
|
---|
18 | <div class="container-fluid">
|
---|
19 | <a class="navbar-brand" href="/">BeautyCenter</a>
|
---|
20 | <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
|
---|
21 | <span class="navbar-toggler-icon"></span>
|
---|
22 | </button>
|
---|
23 |
|
---|
24 | <div class="collapse navbar-collapse" id="navbarColor03">
|
---|
25 | <ul class="navbar-nav me-auto">
|
---|
26 | <li class="nav-item">
|
---|
27 | <a class="nav-link active" href="/home">Home
|
---|
28 | <span class="visually-hidden">(current)</span>
|
---|
29 | </a>
|
---|
30 | </li>
|
---|
31 | <li class="nav-item">
|
---|
32 | <a class="nav-link" href="/aboutUs">About Us</a>
|
---|
33 | </li>
|
---|
34 | <li class="nav-item">
|
---|
35 | <a class="nav-link" href="/services">Services</a>
|
---|
36 | </li>
|
---|
37 | <th:block th:if="${session.user!=null && session.user.vraboteni!=null}">
|
---|
38 | <li class="nav-item">
|
---|
39 | <a class="nav-link" href="/termini">Termini</a>
|
---|
40 | </li>
|
---|
41 |
|
---|
42 | <li class="nav-item">
|
---|
43 | <a class="nav-link" href="/clients">Clients</a>
|
---|
44 | </li>
|
---|
45 | </th:block>
|
---|
46 | <th:block th:if="${session.user!=null}">
|
---|
47 | <li class="nav-item">
|
---|
48 | <a class="nav-link" href="/appointment">Appointments</a>
|
---|
49 | </li>
|
---|
50 |
|
---|
51 | <li class="nav-item">
|
---|
52 | <a class="nav-link" href="/makeAppointment">Make Appointment</a>
|
---|
53 | </li>
|
---|
54 | </th:block>
|
---|
55 |
|
---|
56 | </ul>
|
---|
57 | <th:block th:if="${session.user !=null}">
|
---|
58 | <form class="d-flex">
|
---|
59 | <a class="nav-link" href="#" th:text="'Hello '+${session.user.getUsername()}" >
|
---|
60 |
|
---|
61 | </a>
|
---|
62 |
|
---|
63 | <a class="btn btn-secondary " href="/logout">
|
---|
64 | Logout
|
---|
65 | </a>
|
---|
66 |
|
---|
67 |
|
---|
68 | </form>
|
---|
69 | </th:block>
|
---|
70 |
|
---|
71 | <th:block th:if="${session.user ==null}">
|
---|
72 | <form class="d-flex">
|
---|
73 |
|
---|
74 | <a class="btn btn-primary my-2 my-sm-0" th:href="@{/login}">Log in</a>
|
---|
75 |
|
---|
76 | <a class="btn btn-outline-primary my-2 my-sm-0" href="/register">Register</a>
|
---|
77 |
|
---|
78 | </form>
|
---|
79 | </th:block>
|
---|
80 | </div>
|
---|
81 | </div>
|
---|
82 | </nav>
|
---|
83 | </div>
|
---|
84 |
|
---|
85 |
|
---|
86 | <div id="bodyLayout" >
|
---|
87 | <style type="text/css">
|
---|
88 | #slider {
|
---|
89 | overflow: hidden;
|
---|
90 | }
|
---|
91 |
|
---|
92 | #slider figure {
|
---|
93 | position: relative;
|
---|
94 | width: 500%;
|
---|
95 | margin: 0;
|
---|
96 | left: 0;
|
---|
97 | animation: 20s slider infinite;
|
---|
98 | }
|
---|
99 |
|
---|
100 | #slider figure img {
|
---|
101 | float: left;
|
---|
102 | width: 20%;
|
---|
103 | }
|
---|
104 |
|
---|
105 | @keyframes slider {
|
---|
106 | 0% {
|
---|
107 | left: 0;
|
---|
108 | }
|
---|
109 |
|
---|
110 | 20% {
|
---|
111 | left: 0;
|
---|
112 | }
|
---|
113 |
|
---|
114 | 25% {
|
---|
115 | left: -100%;
|
---|
116 | }
|
---|
117 |
|
---|
118 | 45% {
|
---|
119 | left: -100%;
|
---|
120 | }
|
---|
121 |
|
---|
122 | 50% {
|
---|
123 | left: -200%;
|
---|
124 | }
|
---|
125 |
|
---|
126 | 70% {
|
---|
127 | left: -200%
|
---|
128 | }
|
---|
129 |
|
---|
130 | 75% {
|
---|
131 | left: -300%;
|
---|
132 | }
|
---|
133 |
|
---|
134 | 95% {
|
---|
135 | left: -300%;
|
---|
136 | }
|
---|
137 |
|
---|
138 | 100% {
|
---|
139 | left: -400%;
|
---|
140 | }
|
---|
141 | }
|
---|
142 | </style>
|
---|
143 | <div id="slider" style="width: 90%; margin:5%; background-color: beige" >
|
---|
144 | <figure>
|
---|
145 | <img width="700px" height="500px" src="https://www.e-architect.com/wp-content/uploads/2021/01/beauty-salon-by-magic-kyiv-v220121-a2.jpg" />
|
---|
146 | <img width="700px" height="500px" src="https://media.istockphoto.com/photos/various-hair-dresser-tools-on-pink-background-with-copy-space-picture-id1024577404?k=20&m=1024577404&s=612x612&w=0&h=4HSEj5psaIL1_7zA-D75DPjjyiqroJbNIwk5FV4d2_4=" />
|
---|
147 | <img width="700px" height="500px" src="https://abc-7.com/wp-content/uploads/2021/06/makeup-products.jpg" />
|
---|
148 | <img width="700px" height="500px" src="https://studentaffairs.lmu.edu/media/studentaffairs/brc/Spa-906x511.jpg" />
|
---|
149 | <img width="700px" height="500px" src="https://www.e-architect.com/wp-content/uploads/2021/01/beauty-salon-by-magic-kyiv-v220121-a2.jpg" />
|
---|
150 | </figure>
|
---|
151 |
|
---|
152 | </div>
|
---|
153 |
|
---|
154 | </div>
|
---|
155 |
|
---|
156 |
|
---|
157 |
|
---|
158 | <div th:fragment="footer">
|
---|
159 | <div class="footer-basic">
|
---|
160 | <footer style="text-align: center; bottom: 0">
|
---|
161 | <hr>
|
---|
162 | <div class="social"><a href="#"><i class="icon ion-social-instagram"></i></a><a href="#"><i class="icon ion-social-snapchat"></i></a><a href="#"><i class="icon ion-social-twitter"></i></a><a href="#"><i class="icon ion-social-facebook"></i></a></div>
|
---|
163 | <ul class="list-inline">
|
---|
164 | <li class="list-inline-item"><a href="/home">Home</a></li>
|
---|
165 | <li class="list-inline-item"><a href="/services">Services</a></li>
|
---|
166 | <th:block th:if="${session.user !=null}">
|
---|
167 | <li class="list-inline-item"><a href="/makeAppointment">Make Appointment</a></li>
|
---|
168 | <li class="list-inline-item"><a href="/rate">Rate</a></li>
|
---|
169 | </th:block>
|
---|
170 | <li class="list-inline-item"><a href="/aboutUs">About Us</a></li>
|
---|
171 | </ul>
|
---|
172 | <p class="copyright">BeautyCenter © 2022</p>
|
---|
173 | </footer>
|
---|
174 | </div>
|
---|
175 | </div>
|
---|
176 | </body>
|
---|
177 | </html>
|
---|
178 |
|
---|