diff options
Diffstat (limited to 'src/main/resources/templates/index.html')
| -rw-r--r-- | src/main/resources/templates/index.html | 506 |
1 files changed, 506 insertions, 0 deletions
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html new file mode 100644 index 0000000..7c42ee5 --- /dev/null +++ b/src/main/resources/templates/index.html @@ -0,0 +1,506 @@ +<!doctype html> +<html class="no-js" lang="zxx"> + +<head> + <meta charset="utf-8"> + <meta http-equiv="x-ua-compatible" content="ie=edge"> + <title>Barber</title> + <meta name="description" content=""> + <meta name="viewport" content="width=device-width, initial-scale=1"> + + <!-- <link rel="manifest" href="site.webmanifest"> --> + <link rel="shortcut icon" type="image/x-icon" th:href="@{img/favicon.png}"> + <!-- Place favicon.ico in the root directory --> + + <!-- CSS here --> + <link rel="stylesheet" th:href="@{css/bootstrap.min.css}"> + <link rel="stylesheet" th:href="@{css/owl.carousel.min.css}"> + <link rel="stylesheet" th:href="@{css/magnific-popup.css}"> + <link rel="stylesheet" th:href="@{css/font-awesome.min.css}"> + <link rel="stylesheet" th:href="@{css/themify-icons.css}"> + <link rel="stylesheet" th:href="@{css/nice-select.css}"> + <link rel="stylesheet" th:href="@{css/flaticon.css}"> + <link rel="stylesheet" th:href="@{css/gijgo.css}"> + <link rel="stylesheet" th:href="@{css/animate.css}"> + <link rel="stylesheet" th:href="@{css/slicknav.css}"> + <link rel="stylesheet" th:href="@{css/style.css}"> + <!-- <link rel="stylesheet" href="css/responsive.css"> --> +</head> + +<body> + <!--[if lte IE 9]> + <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p> + <![endif]--> + + <!-- header-start --> + <header> + <div class="header-area "> + <div id="sticky-header" class="main-header-area"> + <div class="container"> + <div class="row align-items-center"> + <div class="col-xl-3 col-lg-3"> + <div class="logo-img"> + <a th:href="@{/}"> + <img th:src="@{img/logo.png}" alt=""> + </a> + </div> + </div> + <div class="col-xl-9 col-lg-9"> + <div class="menu_wrap d-none d-lg-block"> + <div class="menu_wrap_inner d-flex align-items-center justify-content-end"> + <div class="main-menu"> + <nav> + <ul id="navigation"> + <li><a class="active" th:href="@{/}">Home</a></li> + <li><a th:href="@{/services}">Services</a></li> + <li><a th:href="@{/about}">About</a></li> + <li><a th:href="@{/contact}">Contact</a></li> + </ul> + </nav> + </div> + <div class="book_room"> + <div class="book_btn"> + <a class="popup-with-form" href="#test-form">Appointment</a> + </div> + </div> + </div> + </div> + </div> + <div class="col-12"> + <div class="mobile_menu d-block d-lg-none"></div> + </div> + </div> + </div> + </div> + </div> + </header> + <!-- header-end --> + + <!-- slider_area_start --> + <div class="slider_area"> + <div class="slider_active owl-carousel"> + <div class="single_slider d-flex align-items-center justify-content-center overlay" th:each="slide: ${slides}" th:style="'background-image: url(data:image/png;base64,' + ${slide.encodedPhoto} + ');'"> + <div class="container"> + <div class="row"> + <div class="col-lg-6 col-md-8"> + <div class="slider_text"> + <h3 th:text="${slide.title}"></h3> + <p th:text="${slide.description}"></p> + <a href="#test-form" class="boxed-btn3 popup-with-form">Appointment</a> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + <!-- slider_area_end --> + + <!-- about_area_start --> + <div class="about_area "> + <div class="container"> + <div class="row align-items-center"> + <div class="col-xl-6 col-lg-6 col-md-6"> + <div class="about_thumbs"> + <div class="large_img_1"> + <img th:src="@{img/about/about_lft.png}" alt=""> + </div> + <div class="small_img_1"> + <img th:src="@{img/about/about_right.png}" alt=""> + </div> + </div> + </div> + <div class="col-xl-6 col-lg-6 col-md-6"> + <div class="about_info"> + <div class="section_title mb-20px"> + <h3>About Us</h3> + <p>We are united by love for our profession and the emotions that our visitors share with us. Our end result is a satisfied client. We know that by working for the result, we will achieve more than others and our visitors pay us the same - more than 70% come back again.</p> + </div> + <p class="opening_hour"> + Opening Hour + <span>10:00 am - 10:00 pm</span> + </p> + <a th:href="@{/about}" class="boxed-btn3">About Us</a> + </div> + </div> + </div> + </div> + </div> + <!-- about_area_end --> + + <div class="service_area"> + <div class="container"> + <div class="row justify-content-center "> + <div class="col-lg-6 col-md-10"> + <div class="section_title text-center mb-55"> + <h3>Our Services</h3> + <p>Our professional craftsmen will provide you with the best service.</p> + </div> + </div> + </div> + <div class="row justify-content-center"> + <div class="col-lg-4 col-md-6"> + <div class="single_service"> + <div class="service_thumb"> + <img th:src="@{img/service/1.png}" alt=""> + </div> + <div class="service_content text-center"> + <div class="icon"> + <i class="flaticon-shave"></i> + </div> + <h3>Smooth Shave</h3> + <p>Cleanse your face first with a quality face wash or a gentle exfoliating scrub.</p> + </div> + </div> + </div> + <div class="col-lg-4 col-md-6"> + <div class="single_service"> + <div class="service_thumb"> + <img th:src="@{img/service/2.png}" alt=""> + </div> + <div class="service_content text-center"> + <div class="icon"> + <i class="flaticon-barber"></i> + </div> + <h3>Beard Triming</h3> + <p>Trimming and maintaining a beard is an essential grooming skill men learn to master.</p> + </div> + </div> + </div> + <div class="col-lg-4 col-md-6"> + <div class="single_service"> + <div class="service_thumb"> + <img th:src="@{img/service/3.png}" alt=""> + </div> + <div class="service_content text-center"> + <div class="icon"> + <i class="flaticon-null"></i> + </div> + <h3>Haircut Styles</h3> + <p>From the fade or undercut on the sides to the quiff, comb over, fohawk, or textured crop on top.</p> + </div> + </div> + </div> + </div> + </div> + </div> + + + <div class="prising_area"> + <div class="container"> + <div class="row"> + <div class="col-xl-6 col-md-6"> + <div class="section_title mb-55"> + <h3>Our Pricing</h3> + <p>We provide the lowest prices for the best quality.</p> + </div> + </div> + </div> + + <div class="row"> + <div class="col-lg-12"> + <div class="prising_slider_active owl-carousel"> + <div class="prising_active d-flex justify-content-between"> + <div class="single_prising"> + <div class="prise_title"> + <h4>Hair Styling</h4> + </div> + <div class="single_service"> + <div class="service_inner"> + <div class="thumb"> + <img th:src="@{img/prising/1.png}" alt=""> + </div> + </div> + <div class="hair_style_info"> + <div class="prise d-flex justify-content-between"> + <span>Hair Cut</span> + <span>$8</span> + </div> + <p>Lorem ipsum dolor sitamet, consectetur </p> + </div> + </div> + <div class="single_service"> + <div class="service_inner"> + <div class="thumb"> + <img th:src="@{img/prising/1.png}" alt=""> + </div> + </div> + <div class="hair_style_info"> + <div class="prise d-flex justify-content-between"> + <span>Hair Style</span> + <span>$8</span> + </div> + <p>Lorem ipsum dolor sitamet, consectetur </p> + </div> + </div> + <div class="single_service"> + <div class="service_inner"> + <div class="thumb"> + <img th:src="@{img/prising/1.png}" alt=""> + </div> + </div> + <div class="hair_style_info"> + <div class="prise d-flex justify-content-between"> + <span>Shaving</span> + <span>$8</span> + </div> + <p>Lorem ipsum dolor sitamet, consectetur </p> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + + + <!-- team_area_start --> + <div class="team_area"> + <div class="container"> + <div class="row justify-content-center"> + <div class="col-lg-6 col-md-10"> + <div class="section_title text-center mb-55"> + <h3>Barber</h3> + <p>We present you our highly qualified barbers with extensive experience.</p> + </div> + </div> + </div> + <div class="row justify-content-center"> + <div class="col-lg-4 col-md-6" th:each="barber: ${barbers}"> + <div class="single_team_member"> + <div class="team_thumb"> + <img alt="Barber photo" src="" th:src="*{'data:image/png;base64,' + barber.encodedPhoto}"> + </div> + <div class="member_info text-center"> + <h3 th:text="${barber.firstName}"></h3> + <p th:text="${barber.level.name} + ' ' + Barber"></p> + </div> + </div> + </div> + </div> + </div> + </div> + <!-- team_area_end --> + + <!-- testimonial_area --> + <div class="testimonial_area "> + <div class="container"> + <div class="row"> + <div class="col-xl-12"> + <div class="section_title mb-40 text-center"> + <h3> + Testimonial + </h3> + </div> + </div> + </div> + <div class="row"> + <div class="col-xl-12"> + <div class="testmonial_active owl-carousel"> + <div class="single_carousel" th:each="testimonial: ${testimonials}"> + <div class="row justify-content-center"> + <div class="col-lg-7 col-md-10"> + <div class="single_testmonial text-center"> + <p th:text="${testimonial.comment}"></p> + <div class="testmonial_author"> + <div class="thumb"> + <img th:src="*{'data:image/png;base64,' + testimonial.encodedPhoto}" alt=""> + </div> + <h3 th:text="${testimonial.name}"></h3> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + <!-- /testimonial_area --> + + <!-- footer_start --> + <footer class="footer"> + <div class="footer_top"> + <div class="container"> + <div class="row"> + <div class="col-xl-5 col-md-6 col-lg-5 "> + <div class="footer_widget"> + <div class="footer_logo"> + <a href="#"> + <img th:src="@{img/logo.png}" alt=""> + </a> + </div> + <p class="address_text">In all countries of the world, including Uzbekistan, Kazakhstan, Russia and Ukraine.</p> + <div class="socail_links"> + <ul> + <li> + <a href="#"> + <i class="fa fa-instagram"></i> + </a> + </li> + <li> + <a href="#"> + <i class="ti-facebook"></i> + </a> + </li> + <li> + <a href="#"> + <i class="ti-twitter-alt"></i> + </a> + </li> + </ul> + </div> + + </div> + </div> + <div class="col-xl-3 col-md-6 col-lg-3"> + <div class="footer_widget"> + <h3 class="footer_title"> + Information + </h3> + <ul class="links"> + <li><a th:href="@{/about}">About</a></li> + <li><a th:href="@{/services}">Services</a></li> + <li><a href="#">Testimonial</a></li> + </ul> + </div> + </div> + <div class="col-xl-2 col-md-6 col-lg-2"> + <div class="footer_widget"> + <h3 class="footer_title"> + Services + </h3> + <ul class="links"> + <li><a href="#">Smooth Shave </a></li> + <li><a href="#">Beard Triming</a></li> + <li><a href="#">Haircut Styles</a></li> + </ul> + </div> + </div> + <div class="col-xl-2 col-md-6 col-lg-2"> + <div class="footer_widget"> + <h3 class="footer_title"> + Follow Us + </h3> + <ul class="links"> + <li><a href="#">Instagram</a></li> + <li><a href="#">FaceBook</a></li> + <li><a href="#">Twitter</a></li> + </ul> + </div> + </div> + </div> + </div> + </div> + <div class="copy-right_text"> + <div class="container"> + <div class="row"> + <div class="col-xl-12"> + <p class="copy_right text-center"> + <p>Copyright ©<script>document.write(new Date().getFullYear());</script> All rights reserved</p> + </p> + </div> + </div> + </div> + </div> + </footer> + <!-- footer_end --> + + + <!-- form itself end--> + <form id="test-form" class="white-popup-block mfp-hide" th:action="@{/save/appointment}" method="post"> + <div class="popup_box"> + <div class="popup_inner"> + <h3>Make an Appointment</h3> + <form th:action="@{/save/appointment}" method="post"> + <div class="row"> + <div class="col-xl-6 col-md-6"> + <input id="datepicker" name="date" placeholder="Date" required> + </div> + <div class="col-xl-6 col-md-6"> + <input id="timepicker" name="time" placeholder="Time" required> + </div> + <div class="col-xl-6 col-md-6"> + <select class="form-select wide" name="service"> + <option value="Hair cut" data-display="Hair cut">Hair cut</option> + <option value="Hair style">Hair style</option> + <option value="Shaving">Shaving</option> + </select> + </div> + <div class="col-xl-6 col-md-6"> + <select class="form-select wide" name="barber"> + <option th:each="barber: ${barbers}" th:text="${barber.firstName}" th:value="${barber.firstName}"></option> + </select> + </div> + <div class="col-xl-6 col-md-6"> + <input type="text" name="name" placeholder="Your name" required> + </div> + <div class="col-xl-6 col-md-6"> + <input type="text" name="telephoneNumber" placeholder="Phone no" required> + </div> + <div class="col-xl-12"> + <input type="email" name="email" placeholder="Your email" required> + </div> + <div class="col-xl-12"> + <button type="submit" class="boxed-btn3">Submit</button> + </div> + </div> + </form> + </div> + </div> + </form> + <!-- form itself end --> + + <!-- JS here --> + <script th:src="@{js/vendor/modernizr-3.5.0.min.js}"></script> + <script th:src="@{js/vendor/jquery-1.12.4.min.js}"></script> + <script th:src="@{js/popper.min.js}"></script> + <script th:src="@{js/bootstrap.min.js}"></script> + <script th:src="@{js/owl.carousel.min.js}"></script> + <script th:src="@{js/isotope.pkgd.min.js}"></script> + <script th:src="@{js/ajax-form.js}"></script> + <script th:src="@{js/waypoints.min.js}"></script> + <script th:src="@{js/jquery.counterup.min.js}"></script> + <script th:src="@{js/imagesloaded.pkgd.min.js}"></script> + <script th:src="@{js/scrollIt.js}"></script> + <script th:src="@{js/jquery.scrollUp.min.js}"></script> + <script th:src="@{js/wow.min.js}"></script> + <script th:src="@{js/nice-select.min.js}"></script> + <script th:src="@{js/jquery.slicknav.min.js}"></script> + <script th:src="@{js/jquery.magnific-popup.min.js}"></script> + <script th:src="@{js/plugins.js}"></script> + <script th:src="@{js/gijgo.min.js}"></script> + + <!--contact js--> + <script th:src="@{js/contact.js}"></script> + <script th:src="@{js/jquery.ajaxchimp.min.js}"></script> + <script th:src="@{js/jquery.form.js}"></script> + <script th:src="@{js/jquery.validate.min.js}"></script> + <script th:src="@{js/mail-script.js}"></script> + + <script th:src="@{js/main.js}"></script> + <script> + $('#datepicker').datepicker({ + iconsLibrary: 'fontawesome', + disableDaysOfWeek: [0, 0], + // icons: { + // rightIcon: '<span class="fa fa-caret-down"></span>' + // } + }); + $('#datepicker2').datepicker({ + iconsLibrary: 'fontawesome', + icons: { + rightIcon: '<span class="fa fa-caret-down"></span>' + } + + }); + var timepicker = $('#timepicker').timepicker({ + format: 'HH.MM' + }); + </script> +</body> + +</html>
\ No newline at end of file |