| 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 |
|
|---|
