diff options
Diffstat (limited to 'src/main/resources/templates')
15 files changed, 6070 insertions, 0 deletions
diff --git a/src/main/resources/templates/about.html b/src/main/resources/templates/about.html new file mode 100644 index 0000000..59fd35b --- /dev/null +++ b/src/main/resources/templates/about.html @@ -0,0 +1,370 @@ +<!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 --> + + <!-- bradcam_area_start --> + <div class="bradcam_area breadcam_bg overlay"> + <div class="container"> + <div class="row"> + <div class="col-lg-12"> + <h3>About us</h3> + </div> + </div> + </div> + </div> + <!-- bradcam_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 href="about.html" class="boxed-btn3">About Us</a> + </div> + </div> + </div> + </div> + </div> + <!-- about_area_end --> + + <!-- 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 href="#">About</a></li> + <li><a href="#">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 diff --git a/src/main/resources/templates/admin-panel/index.html b/src/main/resources/templates/admin-panel/index.html new file mode 100644 index 0000000..4380882 --- /dev/null +++ b/src/main/resources/templates/admin-panel/index.html @@ -0,0 +1,334 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>Admin Panel | Dashboard</title> + + <!-- Google Font: Source Sans Pro --> + <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback"> + <!-- Font Awesome --> + <link rel="stylesheet" th:href="@{/plugins/fontawesome-free/css/all.min.css}"> + <!-- Ionicons --> + <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css}"> + <!-- Tempusdominus Bootstrap 4 --> + <link rel="stylesheet" th:href="@{/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css}"> + <!-- iCheck --> + <link rel="stylesheet" th:href="@{/plugins/icheck-bootstrap/icheck-bootstrap.min.css}"> + <!-- JQVMap --> + <link rel="stylesheet" th:href="@{/plugins/jqvmap/jqvmap.min.css}"> + <!-- Theme style --> + <link rel="stylesheet" th:href="@{/dist/css/adminlte.min.css}"> + <!-- overlayScrollbars --> + <link rel="stylesheet" th:href="@{/plugins/overlayScrollbars/css/OverlayScrollbars.min.css}"> + <!-- Daterange picker --> + <link rel="stylesheet" th:href="@{/plugins/daterangepicker/daterangepicker.css}"> + <!-- summernote --> + <link rel="stylesheet" th:href="@{/plugins/summernote/summernote-bs4.min.css}"> +</head> +<body class="hold-transition sidebar-mini layout-fixed"> +<div class="wrapper"> + + <!-- Preloader --> + <div class="preloader flex-column justify-content-center align-items-center"> + <img class="animation__shake" th:src="@{/dist/img/AdminLTELogo.png}" alt="AdminLTELogo" height="60" width="60"> + </div> + + <!-- Navbar --> + <nav class="main-header navbar navbar-expand navbar-white navbar-light"> + <!-- Left navbar links --> + <ul class="navbar-nav"> + <li class="nav-item"> + <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a> + </li> + <li class="nav-item d-none d-sm-inline-block"> + <a th:href="@{/admin-panel}" class="nav-link">Home</a> + </li> + </ul> + + <!-- Right navbar links --> + <ul class="navbar-nav ml-auto"> + <!-- Navbar Search --> + <li class="nav-item"> + <a class="nav-link" data-widget="navbar-search" href="#" role="button"> + <i class="fas fa-search"></i> + </a> + <div class="navbar-search-block"> + <form class="form-inline"> + <div class="input-group input-group-sm"> + <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search"> + <div class="input-group-append"> + <button class="btn btn-navbar" type="submit"> + <i class="fas fa-search"></i> + </button> + <button class="btn btn-navbar" type="button" data-widget="navbar-search"> + <i class="fas fa-times"></i> + </button> + </div> + </div> + </form> + </div> + </li> + + <li class="nav-item"> + <a class="nav-link" data-widget="fullscreen" href="#" role="button"> + <i class="fas fa-expand-arrows-alt"></i> + </a> + </li> + </ul> + </nav> + <!-- /.navbar --> + + <!-- Main Sidebar Container --> + <aside class="main-sidebar sidebar-dark-primary elevation-4"> + <!-- Brand Logo --> + <a th:href="@{/admin-panel}" class="brand-link"> + <img th:src="@{/dist/img/AdminLTELogo.png}" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8"> + <span class="brand-text font-weight-light">Admin Panel</span> + </a> + + <!-- Sidebar --> + <div class="sidebar"> + <!-- Sidebar user panel (optional) --> + <div class="user-panel mt-3 pb-3 mb-3 d-flex"> + <div class="image"> + <img th:src="@{/dist/img/user2-160x160.jpg}" class="img-circle elevation-2" alt="User Image"> + </div> + <div class="info"> + <a href="#" class="d-block">Mavlon</a> + </div> + </div> + + <!-- SidebarSearch Form --> + <div class="form-inline"> + <div class="input-group" data-widget="sidebar-search"> + <input class="form-control form-control-sidebar" type="search" placeholder="Search" aria-label="Search"> + <div class="input-group-append"> + <button class="btn btn-sidebar"> + <i class="fas fa-search fa-fw"></i> + </button> + </div> + </div> + </div> + + <!-- Sidebar Menu --> + <nav class="mt-2"> + <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false"> + <!-- Add icons to the links using the .nav-icon class + with font-awesome or any other icon font library --> + <li class="nav-item"> + <a th:href="@{/admin-panel/}" class="nav-link"> + <i class="nav-icon fas fa-tachometer-alt"></i> + <p> + Dashboard + </p> + </a> + </li> + <li class="nav-item"> + <a href="#" class="nav-link"> + <i class="nav-icon fas fa-edit"></i> + <p> + Forms + <i class="fas fa-angle-left right"></i> + </p> + </a> + <ul class="nav nav-treeview"> + <li class="nav-item"> + <a th:href="@{/admin-panel/pages/forms/add-barber}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Add Barber</p> + </a> + </li> + <li class="nav-item"> + <a th:href="@{/admin-panel/pages/forms/add-slide}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Add Slide</p> + </a> + </li> + <li class="nav-item"> + <a th:href="@{/admin-panel/pages/forms/add-testimonial}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Add Testimonial</p> + </a> + </li> + </ul> + </li> + <li class="nav-item"> + <a href="#" class="nav-link"> + <i class="nav-icon fas fa-table"></i> + <p> + Tables + <i class="fas fa-angle-left right"></i> + </p> + </a> + <ul class="nav nav-treeview"> + <li class="nav-item"> + <a th:href="@{/admin-panel/tables/appointments}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Appointments</p> + </a> + </li> + <li class="nav-item"> + <a th:href="@{/admin-panel/tables/visitors}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Visitors</p> + </a> + </li> + <li class="nav-item"> + <a th:href="@{/admin-panel/tables/barbers}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Barbers</p> + </a> + </li> + <li class="nav-item"> + <a th:href="@{/admin-panel/tables/slides}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Slides</p> + </a> + </li> + <li class="nav-item"> + <a th:href="@{/admin-panel/tables/testimonials}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Testimonials</p> + </a> + </li> + </ul> + </li> + </ul> + </nav> + <!-- /.sidebar-menu --> + </div> + <!-- /.sidebar --> + </aside> + + <!-- Content Wrapper. Contains page content --> + <div class="content-wrapper"> + <!-- Content Header (Page header) --> + <div class="content-header"> + <div class="container-fluid"> + <div class="row mb-2"> + <div class="col-sm-6"> + <h1 class="m-0">Dashboard</h1> + </div><!-- /.col --> + <div class="col-sm-6"> + <ol class="breadcrumb float-sm-right"> + <li class="breadcrumb-item"><a href="#">Home</a></li> + <li class="breadcrumb-item active">Dashboard</li> + </ol> + </div><!-- /.col --> + </div><!-- /.row --> + </div><!-- /.container-fluid --> + </div> + <!-- /.content-header --> + + <!-- Main content --> + <section class="content"> + <div class="container-fluid"> + <!-- Small boxes (Stat box) --> + <div class="row"> + <div class="col-lg-3 col-6"> + <!-- small box --> + <div class="small-box bg-info"> + <div class="inner"> + <h3 th:text="${appointments}"></h3> + + <p>Appointments</p> + </div> + <div class="icon"> + <i class="ion ion-bag"></i> + </div> + <a th:href="@{/admin-panel/tables/appointments}" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a> + </div> + </div> + <!-- ./col --> + <div class="col-lg-3 col-6"> + <!-- small box --> + <div class="small-box bg-success"> + <div class="inner"> + <h3>100<sup style="font-size: 20px">%</sup></h3> + + <p>Bounce Rate</p> + </div> + <div class="icon"> + <i class="ion ion-stats-bars"></i> + </div> + <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a> + </div> + </div> + <!-- ./col --> + <div class="col-lg-3 col-6"> + <!-- small box --> + <div class="small-box bg-warning"> + <div class="inner"> + <h3 th:text="${clients}"></h3> + + <p>Clients</p> + </div> + <div class="icon"> + <i class="ion ion-person-add"></i> + </div> + <a th:href="@{/admin-panel/tables/appointments}" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a> + </div> + </div> + <!-- ./col --> + <div class="col-lg-3 col-6"> + <!-- small box --> + <div class="small-box bg-danger"> + <div class="inner"> + <h3 th:text="${views}"></h3> + + <p>Views Count</p> + </div> + <div class="icon"> + <i class="ion ion-pie-graph"></i> + </div> + <a th:href="@{/admin-panel/tables/visitors}" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a> + </div> + </div> + <!-- ./col --> + </div> + </div><!-- /.container-fluid --> + </section> + <!-- /.content --> + </div> + + <!-- Control Sidebar --> + <aside class="control-sidebar control-sidebar-dark"> + <!-- Control sidebar content goes here --> + </aside> + <!-- /.control-sidebar --> +</div> +<!-- ./wrapper --> + +<!-- jQuery --> +<script th:src="@{/plugins/jquery/jquery.min.js}"></script> +<!-- jQuery UI 1.11.4 --> +<script th:src="@{/plugins/jquery-ui/jquery-ui.min.js}"></script> +<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip --> +<script> + $.widget.bridge('uibutton', $.ui.button) +</script> +<!-- Bootstrap 4 --> +<script th:src="@{/plugins/bootstrap/js/bootstrap.bundle.min.js}"></script> +<!-- ChartJS --> +<script th:src="@{/plugins/chart.js/Chart.min.js}"></script> +<!-- Sparkline --> +<script th:src="@{/plugins/sparklines/sparkline.js}"></script> +<!-- JQVMap --> +<script th:src="@{/plugins/jqvmap/jquery.vmap.min.js}"></script> +<script th:src="@{/plugins/jqvmap/maps/jquery.vmap.usa.js}"></script> +<!-- jQuery Knob Chart --> +<script th:src="@{/plugins/jquery-knob/jquery.knob.min.js}"></script> +<!-- daterangepicker --> +<script th:src="@{/plugins/moment/moment.min.js}"></script> +<script th:src="@{/plugins/daterangepicker/daterangepicker.js}"></script> +<!-- Tempusdominus Bootstrap 4 --> +<script th:src="@{/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js}"></script> +<!-- Summernote --> +<script th:src="@{/plugins/summernote/summernote-bs4.min.js}"></script> +<!-- overlayScrollbars --> +<script th:src="@{/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js}"></script> +<!-- AdminLTE App --> +<script th:src="@{/dist/js/adminlte.js}"></script> +</body> +</html> diff --git a/src/main/resources/templates/admin-panel/pages/forms/add-barber.html b/src/main/resources/templates/admin-panel/pages/forms/add-barber.html new file mode 100644 index 0000000..5e4a773 --- /dev/null +++ b/src/main/resources/templates/admin-panel/pages/forms/add-barber.html @@ -0,0 +1,309 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>Admin Panel | Add barber</title> + + <!-- Google Font: Source Sans Pro --> + <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback"> + <!-- Font Awesome --> + <link rel="stylesheet" th:href="@{/plugins/fontawesome-free/css/all.min.css}"> + <!-- Ionicons --> + <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css}"> + <!-- Tempusdominus Bootstrap 4 --> + <link rel="stylesheet" th:href="@{/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css}"> + <!-- iCheck --> + <link rel="stylesheet" th:href="@{/plugins/icheck-bootstrap/icheck-bootstrap.min.css}"> + <!-- JQVMap --> + <link rel="stylesheet" th:href="@{/plugins/jqvmap/jqvmap.min.css}"> + <!-- Theme style --> + <link rel="stylesheet" th:href="@{/dist/css/adminlte.min.css}"> + <!-- overlayScrollbars --> + <link rel="stylesheet" th:href="@{/plugins/overlayScrollbars/css/OverlayScrollbars.min.css}"> + <!-- Daterange picker --> + <link rel="stylesheet" th:href="@{/plugins/daterangepicker/daterangepicker.css}"> + <!-- summernote --> + <link rel="stylesheet" th:href="@{/plugins/summernote/summernote-bs4.min.css}"> +</head> +<body class="hold-transition sidebar-mini layout-fixed"> +<div class="wrapper"> + + <!-- Preloader --> + <div class="preloader flex-column justify-content-center align-items-center"> + <img class="animation__shake" th:src="@{/dist/img/AdminLTELogo.png}" alt="AdminLTELogo" height="60" width="60"> + </div> + + <!-- Navbar --> + <nav class="main-header navbar navbar-expand navbar-white navbar-light"> + <!-- Left navbar links --> + <ul class="navbar-nav"> + <li class="nav-item"> + <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a> + </li> + <li class="nav-item d-none d-sm-inline-block"> + <a th:href="@{/admin-panel}" class="nav-link">Home</a> + </li> + </ul> + + <!-- Right navbar links --> + <ul class="navbar-nav ml-auto"> + <!-- Navbar Search --> + <li class="nav-item"> + <a class="nav-link" data-widget="navbar-search" href="#" role="button"> + <i class="fas fa-search"></i> + </a> + <div class="navbar-search-block"> + <form class="form-inline"> + <div class="input-group input-group-sm"> + <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search"> + <div class="input-group-append"> + <button class="btn btn-navbar" type="submit"> + <i class="fas fa-search"></i> + </button> + <button class="btn btn-navbar" type="button" data-widget="navbar-search"> + <i class="fas fa-times"></i> + </button> + </div> + </div> + </form> + </div> + </li> + + <li class="nav-item"> + <a class="nav-link" data-widget="fullscreen" href="#" role="button"> + <i class="fas fa-expand-arrows-alt"></i> + </a> + </li> + </ul> + </nav> + <!-- /.navbar --> + + <!-- Main Sidebar Container --> + <aside class="main-sidebar sidebar-dark-primary elevation-4"> + <!-- Brand Logo --> + <a th:href="@{/admin-panel}" class="brand-link"> + <img th:src="@{/dist/img/AdminLTELogo.png}" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8"> + <span class="brand-text font-weight-light">Admin Panel</span> + </a> + + <!-- Sidebar --> + <div class="sidebar"> + <!-- Sidebar user panel (optional) --> + <div class="user-panel mt-3 pb-3 mb-3 d-flex"> + <div class="image"> + <img th:src="@{/dist/img/user2-160x160.jpg}" class="img-circle elevation-2" alt="User Image"> + </div> + <div class="info"> + <a href="#" class="d-block">Mavlon</a> + </div> + </div> + + <!-- SidebarSearch Form --> + <div class="form-inline"> + <div class="input-group" data-widget="sidebar-search"> + <input class="form-control form-control-sidebar" type="search" placeholder="Search" aria-label="Search"> + <div class="input-group-append"> + <button class="btn btn-sidebar"> + <i class="fas fa-search fa-fw"></i> + </button> + </div> + </div> + </div> + + <!-- Sidebar Menu --> + <nav class="mt-2"> + <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false"> + <!-- Add icons to the links using the .nav-icon class + with font-awesome or any other icon font library --> + <li class="nav-item"> + <a th:href="@{/admin-panel/}" class="nav-link"> + <i class="nav-icon fas fa-tachometer-alt"></i> + <p> + Dashboard + </p> + </a> + </li> + <li class="nav-item"> + <a href="#" class="nav-link"> + <i class="nav-icon fas fa-edit"></i> + <p> + Forms + <i class="fas fa-angle-left right"></i> + </p> + </a> + <ul class="nav nav-treeview"> + <li class="nav-item"> + <a th:href="@{/admin-panel/pages/forms/add-barber}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Add Barber</p> + </a> + </li> + <li class="nav-item"> + <a th:href="@{/admin-panel/pages/forms/add-slide}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Add Slide</p> + </a> + </li> + <li class="nav-item"> + <a th:href="@{/admin-panel/pages/forms/add-testimonial}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Add Testimonial</p> + </a> + </li> + </ul> + </li> + <li class="nav-item"> + <a href="#" class="nav-link"> + <i class="nav-icon fas fa-table"></i> + <p> + Tables + <i class="fas fa-angle-left right"></i> + </p> + </a> + <ul class="nav nav-treeview"> + <li class="nav-item"> + <a th:href="@{/admin-panel/tables/appointments}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Appointments</p> + </a> + </li> + <li class="nav-item"> + <a th:href="@{/admin-panel/tables/visitors}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Visitors</p> + </a> + </li> + <li class="nav-item"> + <a th:href="@{/admin-panel/tables/barbers}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Barbers</p> + </a> + </li> + <li class="nav-item"> + <a th:href="@{/admin-panel/tables/slides}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Slides</p> + </a> + </li> + <li class="nav-item"> + <a th:href="@{/admin-panel/tables/testimonials}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Testimonials</p> + </a> + </li> + </ul> + </li> + </ul> + </nav> + <!-- /.sidebar-menu --> + </div> + <!-- /.sidebar --> + </aside> + + <!-- Content Wrapper. Contains page content --> + <div class="content-wrapper"> + <!-- Content Header (Page header) --> + <div class="content-header"> + <div class="container-fluid"> + <div class="row mb-2"> + <div class="col-sm-6"> + <h1 class="m-0">Add Barber</h1> + </div><!-- /.col --> + <div class="col-sm-6"> + <ol class="breadcrumb float-sm-right"> + <li class="breadcrumb-item"><a href="#">Home</a></li> + <li class="breadcrumb-item active">Add Barber</li> + </ol> + </div><!-- /.col --> + </div><!-- /.row --> + </div><!-- /.container-fluid --> + </div> + <!-- /.content-header --> + + <!-- Main content --> + <section class="content"> + <div class="container-fluid"> + <!-- Small boxes (Stat box) --> + <div class="row"> + <div class="col-md-12"> + <div class="card card-primary"> + <div class="card-header"> + <h3 class="card-title">Barber</h3> + </div> + + <form method="post" th:action="@{/save/barber}" enctype="multipart/form-data"> + <div class="card-body"> + <div class="form-group"> + <label for="firstName">Name</label> + <input class="form-control" id="firstName" name="firstName" type="text" placeholder="Enter name"> + </div> + <div class="form-group"> + <label for="level">Level</label> + <select class="form-control" id="level" name="level" placeholder="Choose level"> + <option th:each="level: ${levels}" th:value="${level.name}" th:text="${level.name}"></option> + </select> + </div> + <div class="form-group"> + <label for="photo">Photo</label> + <div class="input-group"> + <div class="custom-file"> + <input type="file" class="custom-file-input" id="photo" name="photo" accept="image/*"> + <label class="custom-file-label" for="photo">Choose photo</label> + </div> + </div> + </div> + </div> + + <div class="card-footer"> + <button type="submit" class="btn btn-primary">Add</button> + </div> + </form> + </div> + </div> + </div> + </div><!-- /.container-fluid --> + </section> + <!-- /.content --> + </div> + + <!-- Control Sidebar --> + <aside class="control-sidebar control-sidebar-dark"> + <!-- Control sidebar content goes here --> + </aside> + <!-- /.control-sidebar --> +</div> +<!-- ./wrapper --> + +<!-- jQuery --> +<script th:src="@{/plugins/jquery/jquery.min.js}"></script> +<!-- jQuery UI 1.11.4 --> +<script th:src="@{/plugins/jquery-ui/jquery-ui.min.js}"></script> +<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip --> +<script> + $.widget.bridge('uibutton', $.ui.button) +</script> +<!-- Bootstrap 4 --> +<script th:src="@{/plugins/bootstrap/js/bootstrap.bundle.min.js}"></script> +<!-- ChartJS --> +<script th:src="@{/plugins/chart.js/Chart.min.js}"></script> +<!-- Sparkline --> +<script th:src="@{/plugins/sparklines/sparkline.js}"></script> +<!-- JQVMap --> +<script th:src="@{/plugins/jqvmap/jquery.vmap.min.js}"></script> +<script th:src="@{/plugins/jqvmap/maps/jquery.vmap.usa.js}"></script> +<!-- jQuery Knob Chart --> +<script th:src="@{/plugins/jquery-knob/jquery.knob.min.js}"></script> +<!-- daterangepicker --> +<script th:src="@{/plugins/moment/moment.min.js}"></script> +<script th:src="@{/plugins/daterangepicker/daterangepicker.js}"></script> +<!-- Tempusdominus Bootstrap 4 --> +<script th:src="@{/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js}"></script> +<!-- Summernote --> +<script th:src="@{/plugins/summernote/summernote-bs4.min.js}"></script> +<!-- overlayScrollbars --> +<script th:src="@{/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js}"></script> +<!-- AdminLTE App --> +<script th:src="@{/dist/js/adminlte.js}"></script> +</body> +</html> diff --git a/src/main/resources/templates/admin-panel/pages/forms/add-slide.html b/src/main/resources/templates/admin-panel/pages/forms/add-slide.html new file mode 100644 index 0000000..2b032c9 --- /dev/null +++ b/src/main/resources/templates/admin-panel/pages/forms/add-slide.html @@ -0,0 +1,307 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>Admin Panel | Add slide</title> + + <!-- Google Font: Source Sans Pro --> + <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback"> + <!-- Font Awesome --> + <link rel="stylesheet" th:href="@{/plugins/fontawesome-free/css/all.min.css}"> + <!-- Ionicons --> + <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css}"> + <!-- Tempusdominus Bootstrap 4 --> + <link rel="stylesheet" th:href="@{/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css}"> + <!-- iCheck --> + <link rel="stylesheet" th:href="@{/plugins/icheck-bootstrap/icheck-bootstrap.min.css}"> + <!-- JQVMap --> + <link rel="stylesheet" th:href="@{/plugins/jqvmap/jqvmap.min.css}"> + <!-- Theme style --> + <link rel="stylesheet" th:href="@{/dist/css/adminlte.min.css}"> + <!-- overlayScrollbars --> + <link rel="stylesheet" th:href="@{/plugins/overlayScrollbars/css/OverlayScrollbars.min.css}"> + <!-- Daterange picker --> + <link rel="stylesheet" th:href="@{/plugins/daterangepicker/daterangepicker.css}"> + <!-- summernote --> + <link rel="stylesheet" th:href="@{/plugins/summernote/summernote-bs4.min.css}"> +</head> +<body class="hold-transition sidebar-mini layout-fixed"> +<div class="wrapper"> + + <!-- Preloader --> + <div class="preloader flex-column justify-content-center align-items-center"> + <img class="animation__shake" th:src="@{/dist/img/AdminLTELogo.png}" alt="AdminLTELogo" height="60" width="60"> + </div> + + <!-- Navbar --> + <nav class="main-header navbar navbar-expand navbar-white navbar-light"> + <!-- Left navbar links --> + <ul class="navbar-nav"> + <li class="nav-item"> + <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a> + </li> + <li class="nav-item d-none d-sm-inline-block"> + <a th:href="@{/admin-panel}" class="nav-link">Home</a> + </li> + </ul> + + <!-- Right navbar links --> + <ul class="navbar-nav ml-auto"> + <!-- Navbar Search --> + <li class="nav-item"> + <a class="nav-link" data-widget="navbar-search" href="#" role="button"> + <i class="fas fa-search"></i> + </a> + <div class="navbar-search-block"> + <form class="form-inline"> + <div class="input-group input-group-sm"> + <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search"> + <div class="input-group-append"> + <button class="btn btn-navbar" type="submit"> + <i class="fas fa-search"></i> + </button> + <button class="btn btn-navbar" type="button" data-widget="navbar-search"> + <i class="fas fa-times"></i> + </button> + </div> + </div> + </form> + </div> + </li> + + <li class="nav-item"> + <a class="nav-link" data-widget="fullscreen" href="#" role="button"> + <i class="fas fa-expand-arrows-alt"></i> + </a> + </li> + </ul> + </nav> + <!-- /.navbar --> + + <!-- Main Sidebar Container --> + <aside class="main-sidebar sidebar-dark-primary elevation-4"> + <!-- Brand Logo --> + <a th:href="@{/admin-panel}" class="brand-link"> + <img th:src="@{/dist/img/AdminLTELogo.png}" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8"> + <span class="brand-text font-weight-light">Admin Panel</span> + </a> + + <!-- Sidebar --> + <div class="sidebar"> + <!-- Sidebar user panel (optional) --> + <div class="user-panel mt-3 pb-3 mb-3 d-flex"> + <div class="image"> + <img th:src="@{/dist/img/user2-160x160.jpg}" class="img-circle elevation-2" alt="User Image"> + </div> + <div class="info"> + <a href="#" class="d-block">Mavlon</a> + </div> + </div> + + <!-- SidebarSearch Form --> + <div class="form-inline"> + <div class="input-group" data-widget="sidebar-search"> + <input class="form-control form-control-sidebar" type="search" placeholder="Search" aria-label="Search"> + <div class="input-group-append"> + <button class="btn btn-sidebar"> + <i class="fas fa-search fa-fw"></i> + </button> + </div> + </div> + </div> + + <!-- Sidebar Menu --> + <nav class="mt-2"> + <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false"> + <!-- Add icons to the links using the .nav-icon class + with font-awesome or any other icon font library --> + <li class="nav-item"> + <a th:href="@{/admin-panel/}" class="nav-link"> + <i class="nav-icon fas fa-tachometer-alt"></i> + <p> + Dashboard + </p> + </a> + </li> + <li class="nav-item"> + <a href="#" class="nav-link"> + <i class="nav-icon fas fa-edit"></i> + <p> + Forms + <i class="fas fa-angle-left right"></i> + </p> + </a> + <ul class="nav nav-treeview"> + <li class="nav-item"> + <a th:href="@{/admin-panel/pages/forms/add-barber}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Add Barber</p> + </a> + </li> + <li class="nav-item"> + <a th:href="@{/admin-panel/pages/forms/add-slide}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Add Slide</p> + </a> + </li> + <li class="nav-item"> + <a th:href="@{/admin-panel/pages/forms/add-testimonial}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Add Testimonial</p> + </a> + </li> + </ul> + </li> + <li class="nav-item"> + <a href="#" class="nav-link"> + <i class="nav-icon fas fa-table"></i> + <p> + Tables + <i class="fas fa-angle-left right"></i> + </p> + </a> + <ul class="nav nav-treeview"> + <li class="nav-item"> + <a th:href="@{/admin-panel/tables/appointments}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Appointments</p> + </a> + </li> + <li class="nav-item"> + <a th:href="@{/admin-panel/tables/visitors}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Visitors</p> + </a> + </li> + <li class="nav-item"> + <a th:href="@{/admin-panel/tables/barbers}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Barbers</p> + </a> + </li> + <li class="nav-item"> + <a th:href="@{/admin-panel/tables/slides}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Slides</p> + </a> + </li> + <li class="nav-item"> + <a th:href="@{/admin-panel/tables/testimonials}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Testimonials</p> + </a> + </li> + </ul> + </li> + </ul> + </nav> + <!-- /.sidebar-menu --> + </div> + <!-- /.sidebar --> + </aside> + + <!-- Content Wrapper. Contains page content --> + <div class="content-wrapper"> + <!-- Content Header (Page header) --> + <div class="content-header"> + <div class="container-fluid"> + <div class="row mb-2"> + <div class="col-sm-6"> + <h1 class="m-0">Add Slide</h1> + </div><!-- /.col --> + <div class="col-sm-6"> + <ol class="breadcrumb float-sm-right"> + <li class="breadcrumb-item"><a href="#">Home</a></li> + <li class="breadcrumb-item active">Add Slide</li> + </ol> + </div><!-- /.col --> + </div><!-- /.row --> + </div><!-- /.container-fluid --> + </div> + <!-- /.content-header --> + + <!-- Main content --> + <section class="content"> + <div class="container-fluid"> + <!-- Small boxes (Stat box) --> + <div class="row"> + <div class="col-md-12"> + <div class="card card-primary"> + <div class="card-header"> + <h3 class="card-title">Slide</h3> + </div> + + <form method="post" th:action="@{/save/slide}" enctype="multipart/form-data"> + <div class="card-body"> + <div class="form-group"> + <label for="title">Title</label> + <input class="form-control" id="title" name="title" type="text" placeholder="Enter title"> + </div> + <div class="form-group"> + <label for="description">Description</label> + <input class="form-control" id="description" name="description" type="text" placeholder="Enter description"> + </div> + <div class="form-group"> + <label for="photo">Photo</label> + <div class="input-group"> + <div class="custom-file"> + <input type="file" class="custom-file-input" id="photo" name="photo" accept="image/*"> + <label class="custom-file-label" for="photo">Choose photo</label> + </div> + </div> + </div> + </div> + + <div class="card-footer"> + <button type="submit" class="btn btn-primary">Add</button> + </div> + </form> + </div> + </div> + </div> + </div><!-- /.container-fluid --> + </section> + <!-- /.content --> + </div> + + <!-- Control Sidebar --> + <aside class="control-sidebar control-sidebar-dark"> + <!-- Control sidebar content goes here --> + </aside> + <!-- /.control-sidebar --> +</div> +<!-- ./wrapper --> + +<!-- jQuery --> +<script th:src="@{/plugins/jquery/jquery.min.js}"></script> +<!-- jQuery UI 1.11.4 --> +<script th:src="@{/plugins/jquery-ui/jquery-ui.min.js}"></script> +<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip --> +<script> + $.widget.bridge('uibutton', $.ui.button) +</script> +<!-- Bootstrap 4 --> +<script th:src="@{/plugins/bootstrap/js/bootstrap.bundle.min.js}"></script> +<!-- ChartJS --> +<script th:src="@{/plugins/chart.js/Chart.min.js}"></script> +<!-- Sparkline --> +<script th:src="@{/plugins/sparklines/sparkline.js}"></script> +<!-- JQVMap --> +<script th:src="@{/plugins/jqvmap/jquery.vmap.min.js}"></script> +<script th:src="@{/plugins/jqvmap/maps/jquery.vmap.usa.js}"></script> +<!-- jQuery Knob Chart --> +<script th:src="@{/plugins/jquery-knob/jquery.knob.min.js}"></script> +<!-- daterangepicker --> +<script th:src="@{/plugins/moment/moment.min.js}"></script> +<script th:src="@{/plugins/daterangepicker/daterangepicker.js}"></script> +<!-- Tempusdominus Bootstrap 4 --> +<script th:src="@{/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js}"></script> +<!-- Summernote --> +<script th:src="@{/plugins/summernote/summernote-bs4.min.js}"></script> +<!-- overlayScrollbars --> +<script th:src="@{/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js}"></script> +<!-- AdminLTE App --> +<script th:src="@{/dist/js/adminlte.js}"></script> +</body> +</html> diff --git a/src/main/resources/templates/admin-panel/pages/forms/add-testimonial.html b/src/main/resources/templates/admin-panel/pages/forms/add-testimonial.html new file mode 100644 index 0000000..7c94cde --- /dev/null +++ b/src/main/resources/templates/admin-panel/pages/forms/add-testimonial.html @@ -0,0 +1,307 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>Admin Panel | Add testimonial</title> + + <!-- Google Font: Source Sans Pro --> + <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback"> + <!-- Font Awesome --> + <link rel="stylesheet" th:href="@{/plugins/fontawesome-free/css/all.min.css}"> + <!-- Ionicons --> + <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css}"> + <!-- Tempusdominus Bootstrap 4 --> + <link rel="stylesheet" th:href="@{/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css}"> + <!-- iCheck --> + <link rel="stylesheet" th:href="@{/plugins/icheck-bootstrap/icheck-bootstrap.min.css}"> + <!-- JQVMap --> + <link rel="stylesheet" th:href="@{/plugins/jqvmap/jqvmap.min.css}"> + <!-- Theme style --> + <link rel="stylesheet" th:href="@{/dist/css/adminlte.min.css}"> + <!-- overlayScrollbars --> + <link rel="stylesheet" th:href="@{/plugins/overlayScrollbars/css/OverlayScrollbars.min.css}"> + <!-- Daterange picker --> + <link rel="stylesheet" th:href="@{/plugins/daterangepicker/daterangepicker.css}"> + <!-- summernote --> + <link rel="stylesheet" th:href="@{/plugins/summernote/summernote-bs4.min.css}"> +</head> +<body class="hold-transition sidebar-mini layout-fixed"> +<div class="wrapper"> + + <!-- Preloader --> + <div class="preloader flex-column justify-content-center align-items-center"> + <img class="animation__shake" th:src="@{/dist/img/AdminLTELogo.png}" alt="AdminLTELogo" height="60" width="60"> + </div> + + <!-- Navbar --> + <nav class="main-header navbar navbar-expand navbar-white navbar-light"> + <!-- Left navbar links --> + <ul class="navbar-nav"> + <li class="nav-item"> + <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a> + </li> + <li class="nav-item d-none d-sm-inline-block"> + <a th:href="@{/admin-panel}" class="nav-link">Home</a> + </li> + </ul> + + <!-- Right navbar links --> + <ul class="navbar-nav ml-auto"> + <!-- Navbar Search --> + <li class="nav-item"> + <a class="nav-link" data-widget="navbar-search" href="#" role="button"> + <i class="fas fa-search"></i> + </a> + <div class="navbar-search-block"> + <form class="form-inline"> + <div class="input-group input-group-sm"> + <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search"> + <div class="input-group-append"> + <button class="btn btn-navbar" type="submit"> + <i class="fas fa-search"></i> + </button> + <button class="btn btn-navbar" type="button" data-widget="navbar-search"> + <i class="fas fa-times"></i> + </button> + </div> + </div> + </form> + </div> + </li> + + <li class="nav-item"> + <a class="nav-link" data-widget="fullscreen" href="#" role="button"> + <i class="fas fa-expand-arrows-alt"></i> + </a> + </li> + </ul> + </nav> + <!-- /.navbar --> + + <!-- Main Sidebar Container --> + <aside class="main-sidebar sidebar-dark-primary elevation-4"> + <!-- Brand Logo --> + <a th:href="@{/admin-panel}" class="brand-link"> + <img th:src="@{/dist/img/AdminLTELogo.png}" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8"> + <span class="brand-text font-weight-light">Admin Panel</span> + </a> + + <!-- Sidebar --> + <div class="sidebar"> + <!-- Sidebar user panel (optional) --> + <div class="user-panel mt-3 pb-3 mb-3 d-flex"> + <div class="image"> + <img th:src="@{/dist/img/user2-160x160.jpg}" class="img-circle elevation-2" alt="User Image"> + </div> + <div class="info"> + <a href="#" class="d-block">Mavlon</a> + </div> + </div> + + <!-- SidebarSearch Form --> + <div class="form-inline"> + <div class="input-group" data-widget="sidebar-search"> + <input class="form-control form-control-sidebar" type="search" placeholder="Search" aria-label="Search"> + <div class="input-group-append"> + <button class="btn btn-sidebar"> + <i class="fas fa-search fa-fw"></i> + </button> + </div> + </div> + </div> + + <!-- Sidebar Menu --> + <nav class="mt-2"> + <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false"> + <!-- Add icons to the links using the .nav-icon class + with font-awesome or any other icon font library --> + <li class="nav-item"> + <a th:href="@{/admin-panel/}" class="nav-link"> + <i class="nav-icon fas fa-tachometer-alt"></i> + <p> + Dashboard + </p> + </a> + </li> + <li class="nav-item"> + <a href="#" class="nav-link"> + <i class="nav-icon fas fa-edit"></i> + <p> + Forms + <i class="fas fa-angle-left right"></i> + </p> + </a> + <ul class="nav nav-treeview"> + <li class="nav-item"> + <a th:href="@{/admin-panel/pages/forms/add-barber}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Add Barber</p> + </a> + </li> + <li class="nav-item"> + <a th:href="@{/admin-panel/pages/forms/add-slide}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Add Slide</p> + </a> + </li> + <li class="nav-item"> + <a th:href="@{/admin-panel/pages/forms/add-testimonial}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Add Testimonial</p> + </a> + </li> + </ul> + </li> + <li class="nav-item"> + <a href="#" class="nav-link"> + <i class="nav-icon fas fa-table"></i> + <p> + Tables + <i class="fas fa-angle-left right"></i> + </p> + </a> + <ul class="nav nav-treeview"> + <li class="nav-item"> + <a th:href="@{/admin-panel/tables/appointments}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Appointments</p> + </a> + </li> + <li class="nav-item"> + <a th:href="@{/admin-panel/tables/visitors}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Visitors</p> + </a> + </li> + <li class="nav-item"> + <a th:href="@{/admin-panel/tables/barbers}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Barbers</p> + </a> + </li> + <li class="nav-item"> + <a th:href="@{/admin-panel/tables/slides}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Slides</p> + </a> + </li> + <li class="nav-item"> + <a th:href="@{/admin-panel/tables/testimonials}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Testimonials</p> + </a> + </li> + </ul> + </li> + </ul> + </nav> + <!-- /.sidebar-menu --> + </div> + <!-- /.sidebar --> + </aside> + + <!-- Content Wrapper. Contains page content --> + <div class="content-wrapper"> + <!-- Content Header (Page header) --> + <div class="content-header"> + <div class="container-fluid"> + <div class="row mb-2"> + <div class="col-sm-6"> + <h1 class="m-0">Add Testimonial</h1> + </div><!-- /.col --> + <div class="col-sm-6"> + <ol class="breadcrumb float-sm-right"> + <li class="breadcrumb-item"><a href="#">Home</a></li> + <li class="breadcrumb-item active">Add Testimonial</li> + </ol> + </div><!-- /.col --> + </div><!-- /.row --> + </div><!-- /.container-fluid --> + </div> + <!-- /.content-header --> + + <!-- Main content --> + <section class="content"> + <div class="container-fluid"> + <!-- Small boxes (Stat box) --> + <div class="row"> + <div class="col-md-12"> + <div class="card card-primary"> + <div class="card-header"> + <h3 class="card-title">Testimonial</h3> + </div> + + <form method="post" th:action="@{/save/testimonial}" enctype="multipart/form-data"> + <div class="card-body"> + <div class="form-group"> + <label for="name">Name</label> + <input class="form-control" id="name" name="name" type="text" placeholder="Enter name"> + </div> + <div class="form-group"> + <label for="comment">Comment</label> + <input class="form-control" id="comment" name="comment" type="text" placeholder="Enter comment"> + </div> + <div class="form-group"> + <label for="photo">Photo</label> + <div class="input-group"> + <div class="custom-file"> + <input type="file" class="custom-file-input" id="photo" name="photo" accept="image/*"> + <label class="custom-file-label" for="photo">Choose photo</label> + </div> + </div> + </div> + </div> + + <div class="card-footer"> + <button type="submit" class="btn btn-primary">Add</button> + </div> + </form> + </div> + </div> + </div> + </div><!-- /.container-fluid --> + </section> + <!-- /.content --> + </div> + + <!-- Control Sidebar --> + <aside class="control-sidebar control-sidebar-dark"> + <!-- Control sidebar content goes here --> + </aside> + <!-- /.control-sidebar --> +</div> +<!-- ./wrapper --> + +<!-- jQuery --> +<script th:src="@{/plugins/jquery/jquery.min.js}"></script> +<!-- jQuery UI 1.11.4 --> +<script th:src="@{/plugins/jquery-ui/jquery-ui.min.js}"></script> +<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip --> +<script> + $.widget.bridge('uibutton', $.ui.button) +</script> +<!-- Bootstrap 4 --> +<script th:src="@{/plugins/bootstrap/js/bootstrap.bundle.min.js}"></script> +<!-- ChartJS --> +<script th:src="@{/plugins/chart.js/Chart.min.js}"></script> +<!-- Sparkline --> +<script th:src="@{/plugins/sparklines/sparkline.js}"></script> +<!-- JQVMap --> +<script th:src="@{/plugins/jqvmap/jquery.vmap.min.js}"></script> +<script th:src="@{/plugins/jqvmap/maps/jquery.vmap.usa.js}"></script> +<!-- jQuery Knob Chart --> +<script th:src="@{/plugins/jquery-knob/jquery.knob.min.js}"></script> +<!-- daterangepicker --> +<script th:src="@{/plugins/moment/moment.min.js}"></script> +<script th:src="@{/plugins/daterangepicker/daterangepicker.js}"></script> +<!-- Tempusdominus Bootstrap 4 --> +<script th:src="@{/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js}"></script> +<!-- Summernote --> +<script th:src="@{/plugins/summernote/summernote-bs4.min.js}"></script> +<!-- overlayScrollbars --> +<script th:src="@{/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js}"></script> +<!-- AdminLTE App --> +<script th:src="@{/dist/js/adminlte.js}"></script> +</body> +</html> diff --git a/src/main/resources/templates/admin-panel/pages/tables/appointments.html b/src/main/resources/templates/admin-panel/pages/tables/appointments.html new file mode 100644 index 0000000..28f60f9 --- /dev/null +++ b/src/main/resources/templates/admin-panel/pages/tables/appointments.html @@ -0,0 +1,321 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>Admin Panel | Appointments</title> + + <!-- Google Font: Source Sans Pro --> + <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback"> + <!-- Font Awesome --> + <link rel="stylesheet" th:href="@{/plugins/fontawesome-free/css/all.min.css}"> + <!-- Ionicons --> + <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css}"> + <!-- Tempusdominus Bootstrap 4 --> + <link rel="stylesheet" th:href="@{/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css}"> + <!-- iCheck --> + <link rel="stylesheet" th:href="@{/plugins/icheck-bootstrap/icheck-bootstrap.min.css}"> + <!-- JQVMap --> + <link rel="stylesheet" th:href="@{/plugins/jqvmap/jqvmap.min.css}"> + <!-- Theme style --> + <link rel="stylesheet" th:href="@{/dist/css/adminlte.min.css}"> + <!-- overlayScrollbars --> + <link rel="stylesheet" th:href="@{/plugins/overlayScrollbars/css/OverlayScrollbars.min.css}"> + <!-- Daterange picker --> + <link rel="stylesheet" th:href="@{/plugins/daterangepicker/daterangepicker.css}"> + <!-- summernote --> + <link rel="stylesheet" th:href="@{/plugins/summernote/summernote-bs4.min.css}"> +</head> +<body class="hold-transition sidebar-mini layout-fixed"> +<div class="wrapper"> + + <!-- Preloader --> + <div class="preloader flex-column justify-content-center align-items-center"> + <img class="animation__shake" th:src="@{/dist/img/AdminLTELogo.png}" alt="AdminLTELogo" height="60" width="60"> + </div> + + <!-- Navbar --> + <nav class="main-header navbar navbar-expand navbar-white navbar-light"> + <!-- Left navbar links --> + <ul class="navbar-nav"> + <li class="nav-item"> + <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a> + </li> + <li class="nav-item d-none d-sm-inline-block"> + <a th:href="@{/admin-panel}" class="nav-link">Home</a> + </li> + </ul> + + <!-- Right navbar links --> + <ul class="navbar-nav ml-auto"> + <!-- Navbar Search --> + <li class="nav-item"> + <a class="nav-link" data-widget="navbar-search" href="#" role="button"> + <i class="fas fa-search"></i> + </a> + <div class="navbar-search-block"> + <form class="form-inline"> + <div class="input-group input-group-sm"> + <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search"> + <div class="input-group-append"> + <button class="btn btn-navbar" type="submit"> + <i class="fas fa-search"></i> + </button> + <button class="btn btn-navbar" type="button" data-widget="navbar-search"> + <i class="fas fa-times"></i> + </button> + </div> + </div> + </form> + </div> + </li> + + <li class="nav-item"> + <a class="nav-link" data-widget="fullscreen" href="#" role="button"> + <i class="fas fa-expand-arrows-alt"></i> + </a> + </li> + </ul> + </nav> + <!-- /.navbar --> + + <!-- Main Sidebar Container --> + <aside class="main-sidebar sidebar-dark-primary elevation-4"> + <!-- Brand Logo --> + <a th:href="@{/admin-panel}" class="brand-link"> + <img th:src="@{/dist/img/AdminLTELogo.png}" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8"> + <span class="brand-text font-weight-light">Admin Panel</span> + </a> + + <!-- Sidebar --> + <div class="sidebar"> + <!-- Sidebar user panel (optional) --> + <div class="user-panel mt-3 pb-3 mb-3 d-flex"> + <div class="image"> + <img th:src="@{/dist/img/user2-160x160.jpg}" class="img-circle elevation-2" alt="User Image"> + </div> + <div class="info"> + <a href="#" class="d-block">Mavlon</a> + </div> + </div> + + <!-- SidebarSearch Form --> + <div class="form-inline"> + <div class="input-group" data-widget="sidebar-search"> + <input class="form-control form-control-sidebar" type="search" placeholder="Search" aria-label="Search"> + <div class="input-group-append"> + <button class="btn btn-sidebar"> + <i class="fas fa-search fa-fw"></i> + </button> + </div> + </div> + </div> + + <!-- Sidebar Menu --> + <nav class="mt-2"> + <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false"> + <!-- Add icons to the links using the .nav-icon class + with font-awesome or any other icon font library --> + <li class="nav-item"> + <a th:href="@{/admin-panel/}" class="nav-link"> + <i class="nav-icon fas fa-tachometer-alt"></i> + <p> + Dashboard + </p> + </a> + </li> + <li class="nav-item"> + <a href="#" class="nav-link"> + <i class="nav-icon fas fa-edit"></i> + <p> + Forms + <i class="fas fa-angle-left right"></i> + </p> + </a> + <ul class="nav nav-treeview"> + <li class="nav-item"> + <a th:href="@{/admin-panel/pages/forms/add-barber}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Add Barber</p> + </a> + </li> + <li class="nav-item"> + <a th:href="@{/admin-panel/pages/forms/add-slide}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Add Slide</p> + </a> + </li> + <li class="nav-item"> + <a th:href="@{/admin-panel/pages/forms/add-testimonial}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Add Testimonial</p> + </a> + </li> + </ul> + </li> + <li class="nav-item"> + <a href="#" class="nav-link"> + <i class="nav-icon fas fa-table"></i> + <p> + Tables + <i class="fas fa-angle-left right"></i> + </p> + </a> + <ul class="nav nav-treeview"> + <li class="nav-item"> + <a th:href="@{/admin-panel/tables/appointments}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Appointments</p> + </a> + </li> + <li class="nav-item"> + <a th:href="@{/admin-panel/tables/visitors}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Visitors</p> + </a> + </li> + <li class="nav-item"> + <a th:href="@{/admin-panel/tables/barbers}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Barbers</p> + </a> + </li> + <li class="nav-item"> + <a th:href="@{/admin-panel/tables/slides}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Slides</p> + </a> + </li> + <li class="nav-item"> + <a th:href="@{/admin-panel/tables/testimonials}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Testimonials</p> + </a> + </li> + </ul> + </li> + </ul> + </nav> + <!-- /.sidebar-menu --> + </div> + <!-- /.sidebar --> + </aside> + + <!-- Content Wrapper. Contains page content --> + <div class="content-wrapper"> + <!-- Content Header (Page header) --> + <div class="content-header"> + <div class="container-fluid"> + <div class="row mb-2"> + <div class="col-sm-6"> + <h1 class="m-0">Appointments</h1> + </div><!-- /.col --> + <div class="col-sm-6"> + <ol class="breadcrumb float-sm-right"> + <li class="breadcrumb-item"><a href="#">Home</a></li> + <li class="breadcrumb-item active">Appointments</li> + </ol> + </div><!-- /.col --> + </div><!-- /.row --> + </div><!-- /.container-fluid --> + </div> + <!-- /.content-header --> + + <!-- Main content --> + <section class="content"> + <div class="container-fluid"> + <div class="row"> + <div class="col-12"> + <div class="card"> + <div class="card-header"> + <h3 class="card-title">Appointments</h3> + <div class="card-tools"> + <div class="input-group input-group-sm" style="width: 150px;"> + <input type="text" name="table_search" class="form-control float-right" placeholder="Search"> + <div class="input-group-append"> + <button type="submit" class="btn btn-default"> + <i class="fas fa-search"></i> + </button> + </div> + </div> + </div> + </div> + + <div class="card-body table-responsive p-0"> + <table class="table table-hover text-nowrap"> + <thead> + <tr> + <th>ID</th> + <th>Date</th> + <th>Time</th> + <th>Service</th> + <th>Barber</th> + <th>Name</th> + <th>Telephone number</th> + <th>Email</th> + </tr> + </thead> + <tbody> + <tr th:each="appointment: ${appointments}"> + <td th:text="${appointment.id}"></td> + <td th:text="${appointment.date}"></td> + <td th:text="${appointment.time}"></td> + <td th:text="${appointment.service}"></td> + <td th:text="${appointment.barber}"></td> + <td th:text="${appointment.name}"></td> + <td th:text="${appointment.telephoneNumber}"></td> + <td th:text="${appointment.email}"></td> + </tr> + </tbody> + </table> + </div> + </div> + </div> + </div> + </div><!-- /.container-fluid --> + </section> + <!-- /.content --> + </div> + + <!-- Control Sidebar --> + <aside class="control-sidebar control-sidebar-dark"> + <!-- Control sidebar content goes here --> + </aside> + <!-- /.control-sidebar --> +</div> +<!-- ./wrapper --> + +<!-- jQuery --> +<script th:src="@{/plugins/jquery/jquery.min.js}"></script> +<!-- jQuery UI 1.11.4 --> +<script th:src="@{/plugins/jquery-ui/jquery-ui.min.js}"></script> +<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip --> +<script> + $.widget.bridge('uibutton', $.ui.button) +</script> +<!-- Bootstrap 4 --> +<script th:src="@{/plugins/bootstrap/js/bootstrap.bundle.min.js}"></script> +<!-- ChartJS --> +<script th:src="@{/plugins/chart.js/Chart.min.js}"></script> +<!-- Sparkline --> +<script th:src="@{/plugins/sparklines/sparkline.js}"></script> +<!-- JQVMap --> +<script th:src="@{/plugins/jqvmap/jquery.vmap.min.js}"></script> +<script th:src="@{/plugins/jqvmap/maps/jquery.vmap.usa.js}"></script> +<!-- jQuery Knob Chart --> +<script th:src="@{/plugins/jquery-knob/jquery.knob.min.js}"></script> +<!-- daterangepicker --> +<script th:src="@{/plugins/moment/moment.min.js}"></script> +<script th:src="@{/plugins/daterangepicker/daterangepicker.js}"></script> +<!-- Tempusdominus Bootstrap 4 --> +<script th:src="@{/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js}"></script> +<!-- Summernote --> +<script th:src="@{/plugins/summernote/summernote-bs4.min.js}"></script> +<!-- overlayScrollbars --> +<script th:src="@{/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js}"></script> +<!-- AdminLTE App --> +<script th:src="@{/dist/js/adminlte.js}"></script> +<!-- AdminLTE dashboard demo (This is only for demo purposes) --> +<script th:src="@{/dist/js/pages/dashboard.js}"></script> +</body> +</html> diff --git a/src/main/resources/templates/admin-panel/pages/tables/barbers.html b/src/main/resources/templates/admin-panel/pages/tables/barbers.html new file mode 100644 index 0000000..5c7d235 --- /dev/null +++ b/src/main/resources/templates/admin-panel/pages/tables/barbers.html @@ -0,0 +1,315 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>Admin Panel | Barbers</title> + + <!-- Google Font: Source Sans Pro --> + <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback"> + <!-- Font Awesome --> + <link rel="stylesheet" th:href="@{/plugins/fontawesome-free/css/all.min.css}"> + <!-- Ionicons --> + <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css}"> + <!-- Tempusdominus Bootstrap 4 --> + <link rel="stylesheet" th:href="@{/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css}"> + <!-- iCheck --> + <link rel="stylesheet" th:href="@{/plugins/icheck-bootstrap/icheck-bootstrap.min.css}"> + <!-- JQVMap --> + <link rel="stylesheet" th:href="@{/plugins/jqvmap/jqvmap.min.css}"> + <!-- Theme style --> + <link rel="stylesheet" th:href="@{/dist/css/adminlte.min.css}"> + <!-- overlayScrollbars --> + <link rel="stylesheet" th:href="@{/plugins/overlayScrollbars/css/OverlayScrollbars.min.css}"> + <!-- Daterange picker --> + <link rel="stylesheet" th:href="@{/plugins/daterangepicker/daterangepicker.css}"> + <!-- summernote --> + <link rel="stylesheet" th:href="@{/plugins/summernote/summernote-bs4.min.css}"> +</head> +<body class="hold-transition sidebar-mini layout-fixed"> +<div class="wrapper"> + + <!-- Preloader --> + <div class="preloader flex-column justify-content-center align-items-center"> + <img class="animation__shake" th:src="@{/dist/img/AdminLTELogo.png}" alt="AdminLTELogo" height="60" width="60"> + </div> + + <!-- Navbar --> + <nav class="main-header navbar navbar-expand navbar-white navbar-light"> + <!-- Left navbar links --> + <ul class="navbar-nav"> + <li class="nav-item"> + <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a> + </li> + <li class="nav-item d-none d-sm-inline-block"> + <a th:href="@{/admin-panel}" class="nav-link">Home</a> + </li> + </ul> + + <!-- Right navbar links --> + <ul class="navbar-nav ml-auto"> + <!-- Navbar Search --> + <li class="nav-item"> + <a class="nav-link" data-widget="navbar-search" href="#" role="button"> + <i class="fas fa-search"></i> + </a> + <div class="navbar-search-block"> + <form class="form-inline"> + <div class="input-group input-group-sm"> + <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search"> + <div class="input-group-append"> + <button class="btn btn-navbar" type="submit"> + <i class="fas fa-search"></i> + </button> + <button class="btn btn-navbar" type="button" data-widget="navbar-search"> + <i class="fas fa-times"></i> + </button> + </div> + </div> + </form> + </div> + </li> + + <li class="nav-item"> + <a class="nav-link" data-widget="fullscreen" href="#" role="button"> + <i class="fas fa-expand-arrows-alt"></i> + </a> + </li> + </ul> + </nav> + <!-- /.navbar --> + + <!-- Main Sidebar Container --> + <aside class="main-sidebar sidebar-dark-primary elevation-4"> + <!-- Brand Logo --> + <a th:href="@{/admin-panel}" class="brand-link"> + <img th:src="@{/dist/img/AdminLTELogo.png}" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8"> + <span class="brand-text font-weight-light">Admin Panel</span> + </a> + + <!-- Sidebar --> + <div class="sidebar"> + <!-- Sidebar user panel (optional) --> + <div class="user-panel mt-3 pb-3 mb-3 d-flex"> + <div class="image"> + <img th:src="@{/dist/img/user2-160x160.jpg}" class="img-circle elevation-2" alt="User Image"> + </div> + <div class="info"> + <a href="#" class="d-block">Mavlon</a> + </div> + </div> + + <!-- SidebarSearch Form --> + <div class="form-inline"> + <div class="input-group" data-widget="sidebar-search"> + <input class="form-control form-control-sidebar" type="search" placeholder="Search" aria-label="Search"> + <div class="input-group-append"> + <button class="btn btn-sidebar"> + <i class="fas fa-search fa-fw"></i> + </button> + </div> + </div> + </div> + + <!-- Sidebar Menu --> + <nav class="mt-2"> + <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false"> + <!-- Add icons to the links using the .nav-icon class + with font-awesome or any other icon font library --> + <li class="nav-item"> + <a th:href="@{/admin-panel/}" class="nav-link"> + <i class="nav-icon fas fa-tachometer-alt"></i> + <p> + Dashboard + </p> + </a> + </li> + <li class="nav-item"> + <a href="#" class="nav-link"> + <i class="nav-icon fas fa-edit"></i> + <p> + Forms + <i class="fas fa-angle-left right"></i> + </p> + </a> + <ul class="nav nav-treeview"> + <li class="nav-item"> + <a th:href="@{/admin-panel/pages/forms/add-barber}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Add Barber</p> + </a> + </li> + <li class="nav-item"> + <a th:href="@{/admin-panel/pages/forms/add-slide}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Add Slide</p> + </a> + </li> + <li class="nav-item"> + <a th:href="@{/admin-panel/pages/forms/add-testimonial}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Add Testimonial</p> + </a> + </li> + </ul> + </li> + <li class="nav-item"> + <a href="#" class="nav-link"> + <i class="nav-icon fas fa-table"></i> + <p> + Tables + <i class="fas fa-angle-left right"></i> + </p> + </a> + <ul class="nav nav-treeview"> + <li class="nav-item"> + <a th:href="@{/admin-panel/tables/appointments}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Appointments</p> + </a> + </li> + <li class="nav-item"> + <a th:href="@{/admin-panel/tables/visitors}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Visitors</p> + </a> + </li> + <li class="nav-item"> + <a th:href="@{/admin-panel/tables/barbers}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Barbers</p> + </a> + </li> + <li class="nav-item"> + <a th:href="@{/admin-panel/tables/slides}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Slides</p> + </a> + </li> + <li class="nav-item"> + <a th:href="@{/admin-panel/tables/testimonials}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Testimonials</p> + </a> + </li> + </ul> + </li> + </ul> + </nav> + <!-- /.sidebar-menu --> + </div> + <!-- /.sidebar --> + </aside> + + <!-- Content Wrapper. Contains page content --> + <div class="content-wrapper"> + <!-- Content Header (Page header) --> + <div class="content-header"> + <div class="container-fluid"> + <div class="row mb-2"> + <div class="col-sm-6"> + <h1 class="m-0">Barbers</h1> + </div><!-- /.col --> + <div class="col-sm-6"> + <ol class="breadcrumb float-sm-right"> + <li class="breadcrumb-item"><a href="#">Home</a></li> + <li class="breadcrumb-item active">Barbers</li> + </ol> + </div><!-- /.col --> + </div><!-- /.row --> + </div><!-- /.container-fluid --> + </div> + <!-- /.content-header --> + + <!-- Main content --> + <section class="content"> + <div class="container-fluid"> + <div class="row"> + <div class="col-12"> + <div class="card"> + <div class="card-header"> + <h3 class="card-title">Barbers</h3> + <div class="card-tools"> + <div class="input-group input-group-sm" style="width: 150px;"> + <input type="text" name="table_search" class="form-control float-right" placeholder="Search"> + <div class="input-group-append"> + <button type="submit" class="btn btn-default"> + <i class="fas fa-search"></i> + </button> + </div> + </div> + </div> + </div> + + <div class="card-body table-responsive p-0"> + <table class="table table-hover text-nowrap"> + <thead> + <tr> + <th>ID</th> + <th>Name</th> + <th>Level</th> + <th>Photo</th> + </tr> + </thead> + <tbody> + <tr th:each="barber: ${barbers}"> + <td th:text="${barber.id}"></td> + <td th:text="${barber.firstName}"></td> + <td th:text="${barber.level.name}"></td> + <td> + <img width="128" height="128" alt="Photo" src="" th:src="*{'data:image/png;base64,' + barber.encodedPhoto}"> + </td> + </tr> + </tbody> + </table> + </div> + </div> + </div> + </div> + </div><!-- /.container-fluid --> + </section> + <!-- /.content --> + </div> + + <!-- Control Sidebar --> + <aside class="control-sidebar control-sidebar-dark"> + <!-- Control sidebar content goes here --> + </aside> + <!-- /.control-sidebar --> +</div> +<!-- ./wrapper --> + +<!-- jQuery --> +<script th:src="@{/plugins/jquery/jquery.min.js}"></script> +<!-- jQuery UI 1.11.4 --> +<script th:src="@{/plugins/jquery-ui/jquery-ui.min.js}"></script> +<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip --> +<script> + $.widget.bridge('uibutton', $.ui.button) +</script> +<!-- Bootstrap 4 --> +<script th:src="@{/plugins/bootstrap/js/bootstrap.bundle.min.js}"></script> +<!-- ChartJS --> +<script th:src="@{/plugins/chart.js/Chart.min.js}"></script> +<!-- Sparkline --> +<script th:src="@{/plugins/sparklines/sparkline.js}"></script> +<!-- JQVMap --> +<script th:src="@{/plugins/jqvmap/jquery.vmap.min.js}"></script> +<script th:src="@{/plugins/jqvmap/maps/jquery.vmap.usa.js}"></script> +<!-- jQuery Knob Chart --> +<script th:src="@{/plugins/jquery-knob/jquery.knob.min.js}"></script> +<!-- daterangepicker --> +<script th:src="@{/plugins/moment/moment.min.js}"></script> +<script th:src="@{/plugins/daterangepicker/daterangepicker.js}"></script> +<!-- Tempusdominus Bootstrap 4 --> +<script th:src="@{/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js}"></script> +<!-- Summernote --> +<script th:src="@{/plugins/summernote/summernote-bs4.min.js}"></script> +<!-- overlayScrollbars --> +<script th:src="@{/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js}"></script> +<!-- AdminLTE App --> +<script th:src="@{/dist/js/adminlte.js}"></script> +<!-- AdminLTE dashboard demo (This is only for demo purposes) --> +<script th:src="@{/dist/js/pages/dashboard.js}"></script> +</body> +</html> diff --git a/src/main/resources/templates/admin-panel/pages/tables/slides.html b/src/main/resources/templates/admin-panel/pages/tables/slides.html new file mode 100644 index 0000000..a5ec016 --- /dev/null +++ b/src/main/resources/templates/admin-panel/pages/tables/slides.html @@ -0,0 +1,315 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>Admin Panel | Slides</title> + + <!-- Google Font: Source Sans Pro --> + <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback"> + <!-- Font Awesome --> + <link rel="stylesheet" th:href="@{/plugins/fontawesome-free/css/all.min.css}"> + <!-- Ionicons --> + <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css}"> + <!-- Tempusdominus Bootstrap 4 --> + <link rel="stylesheet" th:href="@{/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css}"> + <!-- iCheck --> + <link rel="stylesheet" th:href="@{/plugins/icheck-bootstrap/icheck-bootstrap.min.css}"> + <!-- JQVMap --> + <link rel="stylesheet" th:href="@{/plugins/jqvmap/jqvmap.min.css}"> + <!-- Theme style --> + <link rel="stylesheet" th:href="@{/dist/css/adminlte.min.css}"> + <!-- overlayScrollbars --> + <link rel="stylesheet" th:href="@{/plugins/overlayScrollbars/css/OverlayScrollbars.min.css}"> + <!-- Daterange picker --> + <link rel="stylesheet" th:href="@{/plugins/daterangepicker/daterangepicker.css}"> + <!-- summernote --> + <link rel="stylesheet" th:href="@{/plugins/summernote/summernote-bs4.min.css}"> +</head> +<body class="hold-transition sidebar-mini layout-fixed"> +<div class="wrapper"> + + <!-- Preloader --> + <div class="preloader flex-column justify-content-center align-items-center"> + <img class="animation__shake" th:src="@{/dist/img/AdminLTELogo.png}" alt="AdminLTELogo" height="60" width="60"> + </div> + + <!-- Navbar --> + <nav class="main-header navbar navbar-expand navbar-white navbar-light"> + <!-- Left navbar links --> + <ul class="navbar-nav"> + <li class="nav-item"> + <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a> + </li> + <li class="nav-item d-none d-sm-inline-block"> + <a th:href="@{/admin-panel}" class="nav-link">Home</a> + </li> + </ul> + + <!-- Right navbar links --> + <ul class="navbar-nav ml-auto"> + <!-- Navbar Search --> + <li class="nav-item"> + <a class="nav-link" data-widget="navbar-search" href="#" role="button"> + <i class="fas fa-search"></i> + </a> + <div class="navbar-search-block"> + <form class="form-inline"> + <div class="input-group input-group-sm"> + <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search"> + <div class="input-group-append"> + <button class="btn btn-navbar" type="submit"> + <i class="fas fa-search"></i> + </button> + <button class="btn btn-navbar" type="button" data-widget="navbar-search"> + <i class="fas fa-times"></i> + </button> + </div> + </div> + </form> + </div> + </li> + + <li class="nav-item"> + <a class="nav-link" data-widget="fullscreen" href="#" role="button"> + <i class="fas fa-expand-arrows-alt"></i> + </a> + </li> + </ul> + </nav> + <!-- /.navbar --> + + <!-- Main Sidebar Container --> + <aside class="main-sidebar sidebar-dark-primary elevation-4"> + <!-- Brand Logo --> + <a th:href="@{/admin-panel}" class="brand-link"> + <img th:src="@{/dist/img/AdminLTELogo.png}" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8"> + <span class="brand-text font-weight-light">Admin Panel</span> + </a> + + <!-- Sidebar --> + <div class="sidebar"> + <!-- Sidebar user panel (optional) --> + <div class="user-panel mt-3 pb-3 mb-3 d-flex"> + <div class="image"> + <img th:src="@{/dist/img/user2-160x160.jpg}" class="img-circle elevation-2" alt="User Image"> + </div> + <div class="info"> + <a href="#" class="d-block">Mavlon</a> + </div> + </div> + + <!-- SidebarSearch Form --> + <div class="form-inline"> + <div class="input-group" data-widget="sidebar-search"> + <input class="form-control form-control-sidebar" type="search" placeholder="Search" aria-label="Search"> + <div class="input-group-append"> + <button class="btn btn-sidebar"> + <i class="fas fa-search fa-fw"></i> + </button> + </div> + </div> + </div> + + <!-- Sidebar Menu --> + <nav class="mt-2"> + <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false"> + <!-- Add icons to the links using the .nav-icon class + with font-awesome or any other icon font library --> + <li class="nav-item"> + <a th:href="@{/admin-panel/}" class="nav-link"> + <i class="nav-icon fas fa-tachometer-alt"></i> + <p> + Dashboard + </p> + </a> + </li> + <li class="nav-item"> + <a href="#" class="nav-link"> + <i class="nav-icon fas fa-edit"></i> + <p> + Forms + <i class="fas fa-angle-left right"></i> + </p> + </a> + <ul class="nav nav-treeview"> + <li class="nav-item"> + <a th:href="@{/admin-panel/pages/forms/add-barber}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Add Barber</p> + </a> + </li> + <li class="nav-item"> + <a th:href="@{/admin-panel/pages/forms/add-slide}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Add Slide</p> + </a> + </li> + <li class="nav-item"> + <a th:href="@{/admin-panel/pages/forms/add-testimonial}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Add Testimonial</p> + </a> + </li> + </ul> + </li> + <li class="nav-item"> + <a href="#" class="nav-link"> + <i class="nav-icon fas fa-table"></i> + <p> + Tables + <i class="fas fa-angle-left right"></i> + </p> + </a> + <ul class="nav nav-treeview"> + <li class="nav-item"> + <a th:href="@{/admin-panel/tables/appointments}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Appointments</p> + </a> + </li> + <li class="nav-item"> + <a th:href="@{/admin-panel/tables/visitors}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Visitors</p> + </a> + </li> + <li class="nav-item"> + <a th:href="@{/admin-panel/tables/barbers}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Barbers</p> + </a> + </li> + <li class="nav-item"> + <a th:href="@{/admin-panel/tables/slides}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Slides</p> + </a> + </li> + <li class="nav-item"> + <a th:href="@{/admin-panel/tables/testimonials}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Testimonials</p> + </a> + </li> + </ul> + </li> + </ul> + </nav> + <!-- /.sidebar-menu --> + </div> + <!-- /.sidebar --> + </aside> + + <!-- Content Wrapper. Contains page content --> + <div class="content-wrapper"> + <!-- Content Header (Page header) --> + <div class="content-header"> + <div class="container-fluid"> + <div class="row mb-2"> + <div class="col-sm-6"> + <h1 class="m-0">Slides</h1> + </div><!-- /.col --> + <div class="col-sm-6"> + <ol class="breadcrumb float-sm-right"> + <li class="breadcrumb-item"><a href="#">Home</a></li> + <li class="breadcrumb-item active">Slides</li> + </ol> + </div><!-- /.col --> + </div><!-- /.row --> + </div><!-- /.container-fluid --> + </div> + <!-- /.content-header --> + + <!-- Main content --> + <section class="content"> + <div class="container-fluid"> + <div class="row"> + <div class="col-12"> + <div class="card"> + <div class="card-header"> + <h3 class="card-title">Slides</h3> + <div class="card-tools"> + <div class="input-group input-group-sm" style="width: 150px;"> + <input type="text" name="table_search" class="form-control float-right" placeholder="Search"> + <div class="input-group-append"> + <button type="submit" class="btn btn-default"> + <i class="fas fa-search"></i> + </button> + </div> + </div> + </div> + </div> + + <div class="card-body table-responsive p-0"> + <table class="table table-hover text-nowrap"> + <thead> + <tr> + <th>ID</th> + <th>Title</th> + <th>Description</th> + <th>Photo</th> + </tr> + </thead> + <tbody> + <tr th:each="slide: ${slides}"> + <td th:text="${slide.id}"></td> + <td th:text="${slide.title}"></td> + <td th:text="${slide.description}"></td> + <td> + <img width="256" height="128" alt="Photo" src="" th:src="*{'data:image/png;base64,' + slide.encodedPhoto}"> + </td> + </tr> + </tbody> + </table> + </div> + </div> + </div> + </div> + </div><!-- /.container-fluid --> + </section> + <!-- /.content --> + </div> + + <!-- Control Sidebar --> + <aside class="control-sidebar control-sidebar-dark"> + <!-- Control sidebar content goes here --> + </aside> + <!-- /.control-sidebar --> +</div> +<!-- ./wrapper --> + +<!-- jQuery --> +<script th:src="@{/plugins/jquery/jquery.min.js}"></script> +<!-- jQuery UI 1.11.4 --> +<script th:src="@{/plugins/jquery-ui/jquery-ui.min.js}"></script> +<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip --> +<script> + $.widget.bridge('uibutton', $.ui.button) +</script> +<!-- Bootstrap 4 --> +<script th:src="@{/plugins/bootstrap/js/bootstrap.bundle.min.js}"></script> +<!-- ChartJS --> +<script th:src="@{/plugins/chart.js/Chart.min.js}"></script> +<!-- Sparkline --> +<script th:src="@{/plugins/sparklines/sparkline.js}"></script> +<!-- JQVMap --> +<script th:src="@{/plugins/jqvmap/jquery.vmap.min.js}"></script> +<script th:src="@{/plugins/jqvmap/maps/jquery.vmap.usa.js}"></script> +<!-- jQuery Knob Chart --> +<script th:src="@{/plugins/jquery-knob/jquery.knob.min.js}"></script> +<!-- daterangepicker --> +<script th:src="@{/plugins/moment/moment.min.js}"></script> +<script th:src="@{/plugins/daterangepicker/daterangepicker.js}"></script> +<!-- Tempusdominus Bootstrap 4 --> +<script th:src="@{/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js}"></script> +<!-- Summernote --> +<script th:src="@{/plugins/summernote/summernote-bs4.min.js}"></script> +<!-- overlayScrollbars --> +<script th:src="@{/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js}"></script> +<!-- AdminLTE App --> +<script th:src="@{/dist/js/adminlte.js}"></script> +<!-- AdminLTE dashboard demo (This is only for demo purposes) --> +<script th:src="@{/dist/js/pages/dashboard.js}"></script> +</body> +</html> diff --git a/src/main/resources/templates/admin-panel/pages/tables/testimonials.html b/src/main/resources/templates/admin-panel/pages/tables/testimonials.html new file mode 100644 index 0000000..d8eadb3 --- /dev/null +++ b/src/main/resources/templates/admin-panel/pages/tables/testimonials.html @@ -0,0 +1,315 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>Admin Panel | Testimonials</title> + + <!-- Google Font: Source Sans Pro --> + <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback"> + <!-- Font Awesome --> + <link rel="stylesheet" th:href="@{/plugins/fontawesome-free/css/all.min.css}"> + <!-- Ionicons --> + <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css}"> + <!-- Tempusdominus Bootstrap 4 --> + <link rel="stylesheet" th:href="@{/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css}"> + <!-- iCheck --> + <link rel="stylesheet" th:href="@{/plugins/icheck-bootstrap/icheck-bootstrap.min.css}"> + <!-- JQVMap --> + <link rel="stylesheet" th:href="@{/plugins/jqvmap/jqvmap.min.css}"> + <!-- Theme style --> + <link rel="stylesheet" th:href="@{/dist/css/adminlte.min.css}"> + <!-- overlayScrollbars --> + <link rel="stylesheet" th:href="@{/plugins/overlayScrollbars/css/OverlayScrollbars.min.css}"> + <!-- Daterange picker --> + <link rel="stylesheet" th:href="@{/plugins/daterangepicker/daterangepicker.css}"> + <!-- summernote --> + <link rel="stylesheet" th:href="@{/plugins/summernote/summernote-bs4.min.css}"> +</head> +<body class="hold-transition sidebar-mini layout-fixed"> +<div class="wrapper"> + + <!-- Preloader --> + <div class="preloader flex-column justify-content-center align-items-center"> + <img class="animation__shake" th:src="@{/dist/img/AdminLTELogo.png}" alt="AdminLTELogo" height="60" width="60"> + </div> + + <!-- Navbar --> + <nav class="main-header navbar navbar-expand navbar-white navbar-light"> + <!-- Left navbar links --> + <ul class="navbar-nav"> + <li class="nav-item"> + <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a> + </li> + <li class="nav-item d-none d-sm-inline-block"> + <a th:href="@{/admin-panel}" class="nav-link">Home</a> + </li> + </ul> + + <!-- Right navbar links --> + <ul class="navbar-nav ml-auto"> + <!-- Navbar Search --> + <li class="nav-item"> + <a class="nav-link" data-widget="navbar-search" href="#" role="button"> + <i class="fas fa-search"></i> + </a> + <div class="navbar-search-block"> + <form class="form-inline"> + <div class="input-group input-group-sm"> + <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search"> + <div class="input-group-append"> + <button class="btn btn-navbar" type="submit"> + <i class="fas fa-search"></i> + </button> + <button class="btn btn-navbar" type="button" data-widget="navbar-search"> + <i class="fas fa-times"></i> + </button> + </div> + </div> + </form> + </div> + </li> + + <li class="nav-item"> + <a class="nav-link" data-widget="fullscreen" href="#" role="button"> + <i class="fas fa-expand-arrows-alt"></i> + </a> + </li> + </ul> + </nav> + <!-- /.navbar --> + + <!-- Main Sidebar Container --> + <aside class="main-sidebar sidebar-dark-primary elevation-4"> + <!-- Brand Logo --> + <a th:href="@{/admin-panel}" class="brand-link"> + <img th:src="@{/dist/img/AdminLTELogo.png}" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8"> + <span class="brand-text font-weight-light">Admin Panel</span> + </a> + + <!-- Sidebar --> + <div class="sidebar"> + <!-- Sidebar user panel (optional) --> + <div class="user-panel mt-3 pb-3 mb-3 d-flex"> + <div class="image"> + <img th:src="@{/dist/img/user2-160x160.jpg}" class="img-circle elevation-2" alt="User Image"> + </div> + <div class="info"> + <a href="#" class="d-block">Mavlon</a> + </div> + </div> + + <!-- SidebarSearch Form --> + <div class="form-inline"> + <div class="input-group" data-widget="sidebar-search"> + <input class="form-control form-control-sidebar" type="search" placeholder="Search" aria-label="Search"> + <div class="input-group-append"> + <button class="btn btn-sidebar"> + <i class="fas fa-search fa-fw"></i> + </button> + </div> + </div> + </div> + + <!-- Sidebar Menu --> + <nav class="mt-2"> + <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false"> + <!-- Add icons to the links using the .nav-icon class + with font-awesome or any other icon font library --> + <li class="nav-item"> + <a th:href="@{/admin-panel/}" class="nav-link"> + <i class="nav-icon fas fa-tachometer-alt"></i> + <p> + Dashboard + </p> + </a> + </li> + <li class="nav-item"> + <a href="#" class="nav-link"> + <i class="nav-icon fas fa-edit"></i> + <p> + Forms + <i class="fas fa-angle-left right"></i> + </p> + </a> + <ul class="nav nav-treeview"> + <li class="nav-item"> + <a th:href="@{/admin-panel/pages/forms/add-barber}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Add Barber</p> + </a> + </li> + <li class="nav-item"> + <a th:href="@{/admin-panel/pages/forms/add-slide}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Add Slide</p> + </a> + </li> + <li class="nav-item"> + <a th:href="@{/admin-panel/pages/forms/add-testimonial}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Add Testimonial</p> + </a> + </li> + </ul> + </li> + <li class="nav-item"> + <a href="#" class="nav-link"> + <i class="nav-icon fas fa-table"></i> + <p> + Tables + <i class="fas fa-angle-left right"></i> + </p> + </a> + <ul class="nav nav-treeview"> + <li class="nav-item"> + <a th:href="@{/admin-panel/tables/appointments}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Appointments</p> + </a> + </li> + <li class="nav-item"> + <a th:href="@{/admin-panel/tables/visitors}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Visitors</p> + </a> + </li> + <li class="nav-item"> + <a th:href="@{/admin-panel/tables/barbers}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Barbers</p> + </a> + </li> + <li class="nav-item"> + <a th:href="@{/admin-panel/tables/slides}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Slides</p> + </a> + </li> + <li class="nav-item"> + <a th:href="@{/admin-panel/tables/testimonials}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Testimonials</p> + </a> + </li> + </ul> + </li> + </ul> + </nav> + <!-- /.sidebar-menu --> + </div> + <!-- /.sidebar --> + </aside> + + <!-- Content Wrapper. Contains page content --> + <div class="content-wrapper"> + <!-- Content Header (Page header) --> + <div class="content-header"> + <div class="container-fluid"> + <div class="row mb-2"> + <div class="col-sm-6"> + <h1 class="m-0">Testimonials</h1> + </div><!-- /.col --> + <div class="col-sm-6"> + <ol class="breadcrumb float-sm-right"> + <li class="breadcrumb-item"><a href="#">Home</a></li> + <li class="breadcrumb-item active">Testimonials</li> + </ol> + </div><!-- /.col --> + </div><!-- /.row --> + </div><!-- /.container-fluid --> + </div> + <!-- /.content-header --> + + <!-- Main content --> + <section class="content"> + <div class="container-fluid"> + <div class="row"> + <div class="col-12"> + <div class="card"> + <div class="card-header"> + <h3 class="card-title">Testimonials</h3> + <div class="card-tools"> + <div class="input-group input-group-sm" style="width: 150px;"> + <input type="text" name="table_search" class="form-control float-right" placeholder="Search"> + <div class="input-group-append"> + <button type="submit" class="btn btn-default"> + <i class="fas fa-search"></i> + </button> + </div> + </div> + </div> + </div> + + <div class="card-body table-responsive p-0"> + <table class="table table-hover text-nowrap"> + <thead> + <tr> + <th>ID</th> + <th>Name</th> + <th>Comment</th> + <th>Photo</th> + </tr> + </thead> + <tbody> + <tr th:each="testimonial: ${testimonials}"> + <td th:text="${testimonial.id}"></td> + <td th:text="${testimonial.name}"></td> + <td th:text="${testimonial.comment}"></td> + <td> + <img width="64" height="64" alt="Photo" src="" th:src="*{'data:image/png;base64,' + testimonial.encodedPhoto}"> + </td> + </tr> + </tbody> + </table> + </div> + </div> + </div> + </div> + </div><!-- /.container-fluid --> + </section> + <!-- /.content --> + </div> + + <!-- Control Sidebar --> + <aside class="control-sidebar control-sidebar-dark"> + <!-- Control sidebar content goes here --> + </aside> + <!-- /.control-sidebar --> +</div> +<!-- ./wrapper --> + +<!-- jQuery --> +<script th:src="@{/plugins/jquery/jquery.min.js}"></script> +<!-- jQuery UI 1.11.4 --> +<script th:src="@{/plugins/jquery-ui/jquery-ui.min.js}"></script> +<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip --> +<script> + $.widget.bridge('uibutton', $.ui.button) +</script> +<!-- Bootstrap 4 --> +<script th:src="@{/plugins/bootstrap/js/bootstrap.bundle.min.js}"></script> +<!-- ChartJS --> +<script th:src="@{/plugins/chart.js/Chart.min.js}"></script> +<!-- Sparkline --> +<script th:src="@{/plugins/sparklines/sparkline.js}"></script> +<!-- JQVMap --> +<script th:src="@{/plugins/jqvmap/jquery.vmap.min.js}"></script> +<script th:src="@{/plugins/jqvmap/maps/jquery.vmap.usa.js}"></script> +<!-- jQuery Knob Chart --> +<script th:src="@{/plugins/jquery-knob/jquery.knob.min.js}"></script> +<!-- daterangepicker --> +<script th:src="@{/plugins/moment/moment.min.js}"></script> +<script th:src="@{/plugins/daterangepicker/daterangepicker.js}"></script> +<!-- Tempusdominus Bootstrap 4 --> +<script th:src="@{/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js}"></script> +<!-- Summernote --> +<script th:src="@{/plugins/summernote/summernote-bs4.min.js}"></script> +<!-- overlayScrollbars --> +<script th:src="@{/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js}"></script> +<!-- AdminLTE App --> +<script th:src="@{/dist/js/adminlte.js}"></script> +<!-- AdminLTE dashboard demo (This is only for demo purposes) --> +<script th:src="@{/dist/js/pages/dashboard.js}"></script> +</body> +</html> diff --git a/src/main/resources/templates/admin-panel/pages/tables/visitors.html b/src/main/resources/templates/admin-panel/pages/tables/visitors.html new file mode 100644 index 0000000..9d6fdeb --- /dev/null +++ b/src/main/resources/templates/admin-panel/pages/tables/visitors.html @@ -0,0 +1,309 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>Admin Panel | Visitors</title> + + <!-- Google Font: Source Sans Pro --> + <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback"> + <!-- Font Awesome --> + <link rel="stylesheet" th:href="@{/plugins/fontawesome-free/css/all.min.css}"> + <!-- Ionicons --> + <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css}"> + <!-- Tempusdominus Bootstrap 4 --> + <link rel="stylesheet" th:href="@{/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css}"> + <!-- iCheck --> + <link rel="stylesheet" th:href="@{/plugins/icheck-bootstrap/icheck-bootstrap.min.css}"> + <!-- JQVMap --> + <link rel="stylesheet" th:href="@{/plugins/jqvmap/jqvmap.min.css}"> + <!-- Theme style --> + <link rel="stylesheet" th:href="@{/dist/css/adminlte.min.css}"> + <!-- overlayScrollbars --> + <link rel="stylesheet" th:href="@{/plugins/overlayScrollbars/css/OverlayScrollbars.min.css}"> + <!-- Daterange picker --> + <link rel="stylesheet" th:href="@{/plugins/daterangepicker/daterangepicker.css}"> + <!-- summernote --> + <link rel="stylesheet" th:href="@{/plugins/summernote/summernote-bs4.min.css}"> +</head> +<body class="hold-transition sidebar-mini layout-fixed"> +<div class="wrapper"> + + <!-- Preloader --> + <div class="preloader flex-column justify-content-center align-items-center"> + <img class="animation__shake" th:src="@{/dist/img/AdminLTELogo.png}" alt="AdminLTELogo" height="60" width="60"> + </div> + + <!-- Navbar --> + <nav class="main-header navbar navbar-expand navbar-white navbar-light"> + <!-- Left navbar links --> + <ul class="navbar-nav"> + <li class="nav-item"> + <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a> + </li> + <li class="nav-item d-none d-sm-inline-block"> + <a th:href="@{/admin-panel}" class="nav-link">Home</a> + </li> + </ul> + + <!-- Right navbar links --> + <ul class="navbar-nav ml-auto"> + <!-- Navbar Search --> + <li class="nav-item"> + <a class="nav-link" data-widget="navbar-search" href="#" role="button"> + <i class="fas fa-search"></i> + </a> + <div class="navbar-search-block"> + <form class="form-inline"> + <div class="input-group input-group-sm"> + <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search"> + <div class="input-group-append"> + <button class="btn btn-navbar" type="submit"> + <i class="fas fa-search"></i> + </button> + <button class="btn btn-navbar" type="button" data-widget="navbar-search"> + <i class="fas fa-times"></i> + </button> + </div> + </div> + </form> + </div> + </li> + + <li class="nav-item"> + <a class="nav-link" data-widget="fullscreen" href="#" role="button"> + <i class="fas fa-expand-arrows-alt"></i> + </a> + </li> + </ul> + </nav> + <!-- /.navbar --> + + <!-- Main Sidebar Container --> + <aside class="main-sidebar sidebar-dark-primary elevation-4"> + <!-- Brand Logo --> + <a th:href="@{/admin-panel}" class="brand-link"> + <img th:src="@{/dist/img/AdminLTELogo.png}" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8"> + <span class="brand-text font-weight-light">Admin Panel</span> + </a> + + <!-- Sidebar --> + <div class="sidebar"> + <!-- Sidebar user panel (optional) --> + <div class="user-panel mt-3 pb-3 mb-3 d-flex"> + <div class="image"> + <img th:src="@{/dist/img/user2-160x160.jpg}" class="img-circle elevation-2" alt="User Image"> + </div> + <div class="info"> + <a href="#" class="d-block">Mavlon</a> + </div> + </div> + + <!-- SidebarSearch Form --> + <div class="form-inline"> + <div class="input-group" data-widget="sidebar-search"> + <input class="form-control form-control-sidebar" type="search" placeholder="Search" aria-label="Search"> + <div class="input-group-append"> + <button class="btn btn-sidebar"> + <i class="fas fa-search fa-fw"></i> + </button> + </div> + </div> + </div> + + <!-- Sidebar Menu --> + <nav class="mt-2"> + <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false"> + <!-- Add icons to the links using the .nav-icon class + with font-awesome or any other icon font library --> + <li class="nav-item"> + <a th:href="@{/admin-panel/}" class="nav-link"> + <i class="nav-icon fas fa-tachometer-alt"></i> + <p> + Dashboard + </p> + </a> + </li> + <li class="nav-item"> + <a href="#" class="nav-link"> + <i class="nav-icon fas fa-edit"></i> + <p> + Forms + <i class="fas fa-angle-left right"></i> + </p> + </a> + <ul class="nav nav-treeview"> + <li class="nav-item"> + <a th:href="@{/admin-panel/pages/forms/add-barber}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Add Barber</p> + </a> + </li> + <li class="nav-item"> + <a th:href="@{/admin-panel/pages/forms/add-slide}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Add Slide</p> + </a> + </li> + <li class="nav-item"> + <a th:href="@{/admin-panel/pages/forms/add-testimonial}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Add Testimonial</p> + </a> + </li> + </ul> + </li> + <li class="nav-item"> + <a href="#" class="nav-link"> + <i class="nav-icon fas fa-table"></i> + <p> + Tables + <i class="fas fa-angle-left right"></i> + </p> + </a> + <ul class="nav nav-treeview"> + <li class="nav-item"> + <a th:href="@{/admin-panel/tables/appointments}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Appointments</p> + </a> + </li> + <li class="nav-item"> + <a th:href="@{/admin-panel/tables/visitors}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Visitors</p> + </a> + </li> + <li class="nav-item"> + <a th:href="@{/admin-panel/tables/barbers}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Barbers</p> + </a> + </li> + <li class="nav-item"> + <a th:href="@{/admin-panel/tables/slides}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Slides</p> + </a> + </li> + <li class="nav-item"> + <a th:href="@{/admin-panel/tables/testimonials}" class="nav-link"> + <i class="far fa-circle nav-icon"></i> + <p>Testimonials</p> + </a> + </li> + </ul> + </li> + </ul> + </nav> + <!-- /.sidebar-menu --> + </div> + <!-- /.sidebar --> + </aside> + + <!-- Content Wrapper. Contains page content --> + <div class="content-wrapper"> + <!-- Content Header (Page header) --> + <div class="content-header"> + <div class="container-fluid"> + <div class="row mb-2"> + <div class="col-sm-6"> + <h1 class="m-0">Visitors</h1> + </div><!-- /.col --> + <div class="col-sm-6"> + <ol class="breadcrumb float-sm-right"> + <li class="breadcrumb-item"><a href="#">Home</a></li> + <li class="breadcrumb-item active">Visitors</li> + </ol> + </div><!-- /.col --> + </div><!-- /.row --> + </div><!-- /.container-fluid --> + </div> + <!-- /.content-header --> + + <!-- Main content --> + <section class="content"> + <div class="container-fluid"> + <div class="row"> + <div class="col-12"> + <div class="card"> + <div class="card-header"> + <h3 class="card-title">Visitors</h3> + <div class="card-tools"> + <div class="input-group input-group-sm" style="width: 150px;"> + <input type="text" name="table_search" class="form-control float-right" placeholder="Search"> + <div class="input-group-append"> + <button type="submit" class="btn btn-default"> + <i class="fas fa-search"></i> + </button> + </div> + </div> + </div> + </div> + + <div class="card-body table-responsive p-0"> + <table class="table table-hover text-nowrap"> + <thead> + <tr> + <th>ID</th> + <th>Date</th> + </tr> + </thead> + <tbody> + <tr th:each="visitor: ${visitors}"> + <td th:text="${visitor.id}"></td> + <td th:text="${visitor.date}"></td> + </tr> + </tbody> + </table> + </div> + </div> + </div> + </div> + </div><!-- /.container-fluid --> + </section> + <!-- /.content --> + </div> + + <!-- Control Sidebar --> + <aside class="control-sidebar control-sidebar-dark"> + <!-- Control sidebar content goes here --> + </aside> + <!-- /.control-sidebar --> +</div> +<!-- ./wrapper --> + +<!-- jQuery --> +<script th:src="@{/plugins/jquery/jquery.min.js}"></script> +<!-- jQuery UI 1.11.4 --> +<script th:src="@{/plugins/jquery-ui/jquery-ui.min.js}"></script> +<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip --> +<script> + $.widget.bridge('uibutton', $.ui.button) +</script> +<!-- Bootstrap 4 --> +<script th:src="@{/plugins/bootstrap/js/bootstrap.bundle.min.js}"></script> +<!-- ChartJS --> +<script th:src="@{/plugins/chart.js/Chart.min.js}"></script> +<!-- Sparkline --> +<script th:src="@{/plugins/sparklines/sparkline.js}"></script> +<!-- JQVMap --> +<script th:src="@{/plugins/jqvmap/jquery.vmap.min.js}"></script> +<script th:src="@{/plugins/jqvmap/maps/jquery.vmap.usa.js}"></script> +<!-- jQuery Knob Chart --> +<script th:src="@{/plugins/jquery-knob/jquery.knob.min.js}"></script> +<!-- daterangepicker --> +<script th:src="@{/plugins/moment/moment.min.js}"></script> +<script th:src="@{/plugins/daterangepicker/daterangepicker.js}"></script> +<!-- Tempusdominus Bootstrap 4 --> +<script th:src="@{/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js}"></script> +<!-- Summernote --> +<script th:src="@{/plugins/summernote/summernote-bs4.min.js}"></script> +<!-- overlayScrollbars --> +<script th:src="@{/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js}"></script> +<!-- AdminLTE App --> +<script th:src="@{/dist/js/adminlte.js}"></script> +<!-- AdminLTE dashboard demo (This is only for demo purposes) --> +<script th:src="@{/dist/js/pages/dashboard.js}"></script> +</body> +</html> diff --git a/src/main/resources/templates/contact.html b/src/main/resources/templates/contact.html new file mode 100644 index 0000000..77d1e6f --- /dev/null +++ b/src/main/resources/templates/contact.html @@ -0,0 +1,379 @@ +<!doctype html> +<html class="no-js" lang="zxx"> + +<head> + <meta charset="utf-8"> + <meta http-equiv="x-ua-compatible" content="ie=edge"> + <title>Barbers</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 --> + + <!-- bradcam_area_start --> + <div class="bradcam_area breadcam_bg overlay"> + <div class="container"> + <div class="row"> + <div class="col-lg-12"> + <h3>contact</h3> + </div> + </div> + </div> + </div> + <!-- bradcam_area_end --> + + <!-- ================ contact section start ================= --> + <section class="contact-section"> + <div class="container"> + <div class="d-none d-sm-block mb-5 pb-4"> + <div id="map" style="height: 480px; position: relative; overflow: hidden;"><div style="height: 100%; width: 100%; position: absolute; top: 0px; left: 0px; background-color: rgb(229, 227, 223);"><div class="gm-style" style="position: absolute; z-index: 0; left: 0px; top: 0px; height: 100%; width: 100%; padding: 0px; border-width: 0px; margin: 0px;"><div tabindex="0" style="position: absolute; z-index: 0; left: 0px; top: 0px; height: 100%; width: 100%; padding: 0px; border-width: 0px; margin: 0px; cursor: default; touch-action: pan-x pan-y;"><div style="z-index: 1; position: absolute; left: 50%; top: 50%; width: 100%; transform: translate(0px, 0px);"><div style="position: absolute; left: 0px; top: 0px; z-index: 100; width: 100%;"><div style="position: absolute; left: 0px; top: 0px; z-index: 0;"><div style="position: absolute; z-index: 991; transform: matrix(1, 0, 0, 1, -100, -189);"><div style="position: absolute; left: 0px; top: 0px; width: 256px; height: 256px;"><div style="width: 256px; height: 256px;"></div></div><div style="position: absolute; left: -256px; top: 0px; width: 256px; height: 256px;"><div style="width: 256px; height: 256px;"></div></div><div style="position: absolute; left: -256px; top: -256px; width: 256px; height: 256px;"><div style="width: 256px; height: 256px;"></div></div><div style="position: absolute; left: 0px; top: -256px; width: 256px; height: 256px;"><div style="width: 256px; height: 256px;"></div></div><div style="position: absolute; left: 256px; top: -256px; width: 256px; height: 256px;"><div style="width: 256px; height: 256px;"></div></div><div style="position: absolute; left: 256px; top: 0px; width: 256px; height: 256px;"><div style="width: 256px; height: 256px;"></div></div><div style="position: absolute; left: 256px; top: 256px; width: 256px; height: 256px;"><div style="width: 256px; height: 256px;"></div></div><div style="position: absolute; left: 0px; top: 256px; width: 256px; height: 256px;"><div style="width: 256px; height: 256px;"></div></div><div style="position: absolute; left: -256px; top: 256px; width: 256px; height: 256px;"><div style="width: 256px; height: 256px;"></div></div><div style="position: absolute; left: -512px; top: 256px; width: 256px; height: 256px;"><div style="width: 256px; height: 256px;"></div></div><div style="position: absolute; left: -512px; top: 0px; width: 256px; height: 256px;"><div style="width: 256px; height: 256px;"></div></div><div style="position: absolute; left: -512px; top: -256px; width: 256px; height: 256px;"><div style="width: 256px; height: 256px;"></div></div><div style="position: absolute; left: 512px; top: -256px; width: 256px; height: 256px;"><div style="width: 256px; height: 256px;"></div></div><div style="position: absolute; left: 512px; top: 0px; width: 256px; height: 256px;"><div style="width: 256px; height: 256px;"></div></div><div style="position: absolute; left: 512px; top: 256px; width: 256px; height: 256px;"><div style="width: 256px; height: 256px;"></div></div></div></div></div><div style="position: absolute; left: 0px; top: 0px; z-index: 101; width: 100%;"></div><div style="position: absolute; left: 0px; top: 0px; z-index: 102; width: 100%;"></div><div style="position: absolute; left: 0px; top: 0px; z-index: 103; width: 100%;"><div style="position: absolute; left: 0px; top: 0px; z-index: -1;"><div style="position: absolute; z-index: 991; transform: matrix(1, 0, 0, 1, -100, -189);"><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 0px; top: 0px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -256px; top: 0px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -256px; top: -256px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 0px; top: -256px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 256px; top: -256px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 256px; top: 0px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 256px; top: 256px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 0px; top: 256px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -256px; top: 256px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -512px; top: 256px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -512px; top: 0px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -512px; top: -256px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 512px; top: -256px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 512px; top: 0px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 512px; top: 256px;"></div></div></div></div><div style="position: absolute; left: 0px; top: 0px; z-index: 0;"><div style="position: absolute; z-index: 991; transform: matrix(1, 0, 0, 1, -100, -189);"><div style="position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; transition: opacity 200ms linear 0s;"><img draggable="false" alt="" role="presentation" src="https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i9!2i470!3i302!4i256!2m3!1e0!2sm!3i476185792!2m3!1e2!6m1!3e5!3m14!2sen-US!3sUS!5e18!12m1!1e68!12m3!1e37!2m1!1ssmartmaps!12m4!1e26!2m2!1sstyles!2zcC5zOi02MHxwLmw6LTYw!4e0&key=AIzaSyDpfS1oRGreGSBU5HHjMmQ3o5NLw7VdJ6I&token=70038" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div><div style="position: absolute; left: 256px; top: 0px; width: 256px; height: 256px; transition: opacity 200ms linear 0s;"><img draggable="false" alt="" role="presentation" src="https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i9!2i471!3i302!4i256!2m3!1e0!2sm!3i476185840!2m3!1e2!6m1!3e5!3m14!2sen-US!3sUS!5e18!12m1!1e68!12m3!1e37!2m1!1ssmartmaps!12m4!1e26!2m2!1sstyles!2zcC5zOi02MHxwLmw6LTYw!4e0&key=AIzaSyDpfS1oRGreGSBU5HHjMmQ3o5NLw7VdJ6I&token=84496" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div><div style="position: absolute; left: 256px; top: 256px; width: 256px; height: 256px; transition: opacity 200ms linear 0s;"><img draggable="false" alt="" role="presentation" src="https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i9!2i471!3i303!4i256!2m3!1e0!2sm!3i476185840!2m3!1e2!6m1!3e5!3m14!2sen-US!3sUS!5e18!12m1!1e68!12m3!1e37!2m1!1ssmartmaps!12m4!1e26!2m2!1sstyles!2zcC5zOi02MHxwLmw6LTYw!4e0&key=AIzaSyDpfS1oRGreGSBU5HHjMmQ3o5NLw7VdJ6I&token=107953" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div><div style="position: absolute; left: 0px; top: 256px; width: 256px; height: 256px; transition: opacity 200ms linear 0s;"><img draggable="false" alt="" role="presentation" src="https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i9!2i470!3i303!4i256!2m3!1e0!2sm!3i476185792!2m3!1e2!6m1!3e5!3m14!2sen-US!3sUS!5e18!12m1!1e68!12m3!1e37!2m1!1ssmartmaps!12m4!1e26!2m2!1sstyles!2zcC5zOi02MHxwLmw6LTYw!4e0&key=AIzaSyDpfS1oRGreGSBU5HHjMmQ3o5NLw7VdJ6I&token=93495" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div><div style="position: absolute; left: -256px; top: 256px; width: 256px; height: 256px; transition: opacity 200ms linear 0s;"><img draggable="false" alt="" role="presentation" src="https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i9!2i469!3i303!4i256!2m3!1e0!2sm!3i476185792!2m3!1e2!6m1!3e5!3m14!2sen-US!3sUS!5e18!12m1!1e68!12m3!1e37!2m1!1ssmartmaps!12m4!1e26!2m2!1sstyles!2zcC5zOi02MHxwLmw6LTYw!4e0&key=AIzaSyDpfS1oRGreGSBU5HHjMmQ3o5NLw7VdJ6I&token=85128" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div><div style="position: absolute; left: -512px; top: 256px; width: 256px; height: 256px; transition: opacity 200ms linear 0s;"><img draggable="false" alt="" role="presentation" src="https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i9!2i468!3i303!4i256!2m3!1e0!2sm!3i476185504!2m3!1e2!6m1!3e5!3m14!2sen-US!3sUS!5e18!12m1!1e68!12m3!1e37!2m1!1ssmartmaps!12m4!1e26!2m2!1sstyles!2zcC5zOi02MHxwLmw6LTYw!4e0&key=AIzaSyDpfS1oRGreGSBU5HHjMmQ3o5NLw7VdJ6I&token=46831" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div><div style="position: absolute; left: -512px; top: 0px; width: 256px; height: 256px; transition: opacity 200ms linear 0s;"><img draggable="false" alt="" role="presentation" src="https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i9!2i468!3i302!4i256!2m3!1e0!2sm!3i476184952!2m3!1e2!6m1!3e5!3m14!2sen-US!3sUS!5e18!12m1!1e68!12m3!1e37!2m1!1ssmartmaps!12m4!1e26!2m2!1sstyles!2zcC5zOi02MHxwLmw6LTYw!4e0&key=AIzaSyDpfS1oRGreGSBU5HHjMmQ3o5NLw7VdJ6I&token=10814" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div><div style="position: absolute; left: -512px; top: -256px; width: 256px; height: 256px; transition: opacity 200ms linear 0s;"><img draggable="false" alt="" role="presentation" src="https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i9!2i468!3i301!4i256!2m3!1e0!2sm!3i476184952!2m3!1e2!6m1!3e5!3m14!2sen-US!3sUS!5e18!12m1!1e68!12m3!1e37!2m1!1ssmartmaps!12m4!1e26!2m2!1sstyles!2zcC5zOi02MHxwLmw6LTYw!4e0&key=AIzaSyDpfS1oRGreGSBU5HHjMmQ3o5NLw7VdJ6I&token=118428" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div><div style="position: absolute; left: 512px; top: -256px; width: 256px; height: 256px; transition: opacity 200ms linear 0s;"><img draggable="false" alt="" role="presentation" src="https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i9!2i472!3i301!4i256!2m3!1e0!2sm!3i476185636!2m3!1e2!6m1!3e5!3m14!2sen-US!3sUS!5e18!12m1!1e68!12m3!1e37!2m1!1ssmartmaps!12m4!1e26!2m2!1sstyles!2zcC5zOi02MHxwLmw6LTYw!4e0&key=AIzaSyDpfS1oRGreGSBU5HHjMmQ3o5NLw7VdJ6I&token=43995" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div><div style="position: absolute; left: 512px; top: 0px; width: 256px; height: 256px; transition: opacity 200ms linear 0s;"><img draggable="false" alt="" role="presentation" src="https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i9!2i472!3i302!4i256!2m3!1e0!2sm!3i476185840!2m3!1e2!6m1!3e5!3m14!2sen-US!3sUS!5e18!12m1!1e68!12m3!1e37!2m1!1ssmartmaps!12m4!1e26!2m2!1sstyles!2zcC5zOi02MHxwLmw6LTYw!4e0&key=AIzaSyDpfS1oRGreGSBU5HHjMmQ3o5NLw7VdJ6I&token=905" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div><div style="position: absolute; left: 512px; top: 256px; width: 256px; height: 256px; transition: opacity 200ms linear 0s;"><img draggable="false" alt="" role="presentation" src="https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i9!2i472!3i303!4i256!2m3!1e0!2sm!3i476185840!2m3!1e2!6m1!3e5!3m14!2sen-US!3sUS!5e18!12m1!1e68!12m3!1e37!2m1!1ssmartmaps!12m4!1e26!2m2!1sstyles!2zcC5zOi02MHxwLmw6LTYw!4e0&key=AIzaSyDpfS1oRGreGSBU5HHjMmQ3o5NLw7VdJ6I&token=24362" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div><div style="position: absolute; left: -256px; top: 0px; width: 256px; height: 256px; transition: opacity 200ms linear 0s;"><img draggable="false" alt="" role="presentation" src="https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i9!2i469!3i302!4i256!2m3!1e0!2sm!3i476185792!2m3!1e2!6m1!3e5!3m14!2sen-US!3sUS!5e18!12m1!1e68!12m3!1e37!2m1!1ssmartmaps!12m4!1e26!2m2!1sstyles!2zcC5zOi02MHxwLmw6LTYw!4e0&key=AIzaSyDpfS1oRGreGSBU5HHjMmQ3o5NLw7VdJ6I&token=61671" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div><div style="position: absolute; left: -256px; top: -256px; width: 256px; height: 256px; transition: opacity 200ms linear 0s;"><img draggable="false" alt="" role="presentation" src="https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i9!2i469!3i301!4i256!2m3!1e0!2sm!3i476185792!2m3!1e2!6m1!3e5!3m14!2sen-US!3sUS!5e18!12m1!1e68!12m3!1e37!2m1!1ssmartmaps!12m4!1e26!2m2!1sstyles!2zcC5zOi02MHxwLmw6LTYw!4e0&key=AIzaSyDpfS1oRGreGSBU5HHjMmQ3o5NLw7VdJ6I&token=38214" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div><div style="position: absolute; left: 0px; top: -256px; width: 256px; height: 256px; transition: opacity 200ms linear 0s;"><img draggable="false" alt="" role="presentation" src="https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i9!2i470!3i301!4i256!2m3!1e0!2sm!3i476185792!2m3!1e2!6m1!3e5!3m14!2sen-US!3sUS!5e18!12m1!1e68!12m3!1e37!2m1!1ssmartmaps!12m4!1e26!2m2!1sstyles!2zcC5zOi02MHxwLmw6LTYw!4e0&key=AIzaSyDpfS1oRGreGSBU5HHjMmQ3o5NLw7VdJ6I&token=46581" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div><div style="position: absolute; left: 256px; top: -256px; width: 256px; height: 256px; transition: opacity 200ms linear 0s;"><img draggable="false" alt="" role="presentation" src="https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i9!2i471!3i301!4i256!2m3!1e0!2sm!3i476185792!2m3!1e2!6m1!3e5!3m14!2sen-US!3sUS!5e18!12m1!1e68!12m3!1e37!2m1!1ssmartmaps!12m4!1e26!2m2!1sstyles!2zcC5zOi02MHxwLmw6LTYw!4e0&key=AIzaSyDpfS1oRGreGSBU5HHjMmQ3o5NLw7VdJ6I&token=94061" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div></div></div></div><div class="gm-style-pbc" style="z-index: 2; position: absolute; height: 100%; width: 100%; padding: 0px; border-width: 0px; margin: 0px; left: 0px; top: 0px; opacity: 0;"><p class="gm-style-pbt"></p></div><div style="z-index: 3; position: absolute; height: 100%; width: 100%; padding: 0px; border-width: 0px; margin: 0px; left: 0px; top: 0px; touch-action: pan-x pan-y;"><div style="z-index: 4; position: absolute; left: 50%; top: 50%; width: 100%; transform: translate(0px, 0px);"><div style="position: absolute; left: 0px; top: 0px; z-index: 104; width: 100%;"></div><div style="position: absolute; left: 0px; top: 0px; z-index: 105; width: 100%;"></div><div style="position: absolute; left: 0px; top: 0px; z-index: 106; width: 100%;"></div><div style="position: absolute; left: 0px; top: 0px; z-index: 107; width: 100%;"></div></div></div></div><iframe aria-hidden="true" frameborder="0" style="z-index: -1; position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; border: none;" src="about:blank"></iframe><div style="margin-left: 5px; margin-right: 5px; z-index: 1000000; position: absolute; left: 0px; bottom: 0px;"><a target="_blank" rel="noopener" href="https://maps.google.com/maps?ll=-31.197,150.744&z=9&t=m&hl=en-US&gl=US&mapclient=apiv3" title="Open this area in Google Maps (opens a new window)" style="position: static; overflow: visible; float: none; display: inline;"><div style="width: 66px; height: 26px; cursor: pointer;"><img alt="" src="https://maps.gstatic.com/mapfiles/api-3/images/google_white5.png" draggable="false" style="position: absolute; left: 0px; top: 0px; width: 66px; height: 26px; user-select: none; border: 0px; padding: 0px; margin: 0px;"></div></a></div><div style="background-color: white; padding: 15px 21px; border: 1px solid rgb(171, 171, 171); font-family: Roboto, Arial, sans-serif; color: rgb(34, 34, 34); box-sizing: border-box; box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 16px; z-index: 10000002; display: none; width: 300px; height: 180px; position: absolute; left: 315px; top: 150px;"><div style="padding: 0px 0px 10px; font-size: 16px; box-sizing: border-box;">Map Data</div><div style="font-size: 13px;">Map data ©2019 Google</div><button draggable="false" title="Close" aria-label="Close" type="button" class="gm-ui-hover-effect" style="background: none; display: block; border: 0px; margin: 0px; padding: 0px; position: absolute; cursor: pointer; user-select: none; top: 0px; right: 0px; width: 37px; height: 37px;"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23000000%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M19%206.41L17.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%0A%3C%2Fsvg%3E%0A" style="pointer-events: none; display: block; width: 13px; height: 13px; margin: 12px;"></button></div><div class="gmnoprint" style="z-index: 1000001; position: absolute; right: 166px; bottom: 0px; width: 121px;"><div draggable="false" class="gm-style-cc" style="user-select: none; height: 14px; line-height: 14px;"><div style="opacity: 0.7; width: 100%; height: 100%; position: absolute;"><div style="width: 1px;"></div><div style="background-color: rgb(245, 245, 245); width: auto; height: 100%; margin-left: 1px;"></div></div><div style="position: relative; padding-right: 6px; padding-left: 6px; box-sizing: border-box; font-family: Roboto, Arial, sans-serif; font-size: 10px; color: rgb(68, 68, 68); white-space: nowrap; direction: ltr; text-align: right; vertical-align: middle; display: inline-block;"><a style="text-decoration: none; cursor: pointer; display: none;">Map Data</a><span>Map data ©2019 Google</span></div></div></div><div class="gmnoscreen" style="position: absolute; right: 0px; bottom: 0px;"><div style="font-family: Roboto, Arial, sans-serif; font-size: 11px; color: rgb(68, 68, 68); direction: ltr; text-align: right; background-color: rgb(245, 245, 245);">Map data ©2019 Google</div></div><div class="gmnoprint gm-style-cc" draggable="false" style="z-index: 1000001; user-select: none; height: 14px; line-height: 14px; position: absolute; right: 95px; bottom: 0px;"><div style="opacity: 0.7; width: 100%; height: 100%; position: absolute;"><div style="width: 1px;"></div><div style="background-color: rgb(245, 245, 245); width: auto; height: 100%; margin-left: 1px;"></div></div><div style="position: relative; padding-right: 6px; padding-left: 6px; box-sizing: border-box; font-family: Roboto, Arial, sans-serif; font-size: 10px; color: rgb(68, 68, 68); white-space: nowrap; direction: ltr; text-align: right; vertical-align: middle; display: inline-block;"><a href="https://www.google.com/intl/en-US_US/help/terms_maps.html" target="_blank" rel="noopener" style="text-decoration: none; cursor: pointer; color: rgb(68, 68, 68);">Terms of Use</a></div></div><button draggable="false" title="Toggle fullscreen view" aria-label="Toggle fullscreen view" type="button" class="gm-control-active gm-fullscreen-control" style="background: none rgb(255, 255, 255); border: 0px; margin: 10px; padding: 0px; position: absolute; cursor: pointer; user-select: none; border-radius: 2px; height: 40px; width: 40px; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; overflow: hidden; top: 0px; right: 0px;"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%20018%2018%22%3E%0A%20%20%3Cpath%20fill%3D%22%23666%22%20d%3D%22M0%2C0v2v4h2V2h4V0H2H0z%20M16%2C0h-4v2h4v4h2V2V0H16z%20M16%2C16h-4v2h4h2v-2v-4h-2V16z%20M2%2C12H0v4v2h2h4v-2H2V12z%22%2F%3E%0A%3C%2Fsvg%3E%0A" style="height: 18px; width: 18px;"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%3E%0A%20%20%3Cpath%20fill%3D%22%23333%22%20d%3D%22M0%2C0v2v4h2V2h4V0H2H0z%20M16%2C0h-4v2h4v4h2V2V0H16z%20M16%2C16h-4v2h4h2v-2v-4h-2V16z%20M2%2C12H0v4v2h2h4v-2H2V12z%22%2F%3E%0A%3C%2Fsvg%3E%0A" style="height: 18px; width: 18px;"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%3E%0A%20%20%3Cpath%20fill%3D%22%23111%22%20d%3D%22M0%2C0v2v4h2V2h4V0H2H0z%20M16%2C0h-4v2h4v4h2V2V0H16z%20M16%2C16h-4v2h4h2v-2v-4h-2V16z%20M2%2C12H0v4v2h2h4v-2H2V12z%22%2F%3E%0A%3C%2Fsvg%3E%0A" style="height: 18px; width: 18px;"></button><div draggable="false" class="gm-style-cc" style="user-select: none; height: 14px; line-height: 14px; position: absolute; right: 0px; bottom: 0px;"><div style="opacity: 0.7; width: 100%; height: 100%; position: absolute;"><div style="width: 1px;"></div><div style="background-color: rgb(245, 245, 245); width: auto; height: 100%; margin-left: 1px;"></div></div><div style="position: relative; padding-right: 6px; padding-left: 6px; box-sizing: border-box; font-family: Roboto, Arial, sans-serif; font-size: 10px; color: rgb(68, 68, 68); white-space: nowrap; direction: ltr; text-align: right; vertical-align: middle; display: inline-block;"><a target="_blank" rel="noopener" title="Report errors in the road map or imagery to Google" href="https://www.google.com/maps/@-31.197,150.744,9z/data=!10m1!1e1!12b1?source=apiv3&rapsrc=apiv3" style="font-family: Roboto, Arial, sans-serif; font-size: 10px; color: rgb(68, 68, 68); text-decoration: none; position: relative;">Report a map error</a></div></div><div class="gmnoprint gm-bundled-control gm-bundled-control-on-bottom" draggable="false" controlwidth="40" controlheight="81" style="margin: 10px; user-select: none; position: absolute; bottom: 95px; right: 40px;"><div class="gmnoprint" controlwidth="40" controlheight="81" style="position: absolute; left: 0px; top: 0px;"><div draggable="false" style="user-select: none; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; border-radius: 2px; cursor: pointer; background-color: rgb(255, 255, 255); width: 40px; height: 81px;"><button draggable="false" title="Zoom in" aria-label="Zoom in" type="button" class="gm-control-active" style="background: none; display: block; border: 0px; margin: 0px; padding: 0px; position: relative; cursor: pointer; user-select: none; overflow: hidden; width: 40px; height: 40px; top: 0px; left: 0px;"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%3E%0A%20%20%3Cpolygon%20fill%3D%22%23666%22%20points%3D%2218%2C7%2011%2C7%2011%2C0%207%2C0%207%2C7%200%2C7%200%2C11%207%2C11%207%2C18%2011%2C18%2011%2C11%2018%2C11%22%2F%3E%0A%3C%2Fsvg%3E%0A" style="height: 18px; width: 18px;"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%3E%0A%20%20%3Cpolygon%20fill%3D%22%23333%22%20points%3D%2218%2C7%2011%2C7%2011%2C0%207%2C0%207%2C7%200%2C7%200%2C11%207%2C11%207%2C18%2011%2C18%2011%2C11%2018%2C11%22%2F%3E%0A%3C%2Fsvg%3E%0A" style="height: 18px; width: 18px;"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%3E%0A%20%20%3Cpolygon%20fill%3D%22%23111%22%20points%3D%2218%2C7%2011%2C7%2011%2C0%207%2C0%207%2C7%200%2C7%200%2C11%207%2C11%207%2C18%2011%2C18%2011%2C11%2018%2C11%22%2F%3E%0A%3C%2Fsvg%3E%0A" style="height: 18px; width: 18px;"></button><div style="position: relative; overflow: hidden; width: 30px; height: 1px; margin: 0px 5px; background-color: rgb(230, 230, 230); top: 0px;"></div><button draggable="false" title="Zoom out" aria-label="Zoom out" type="button" class="gm-control-active" style="background: none; display: block; border: 0px; margin: 0px; padding: 0px; position: relative; cursor: pointer; user-select: none; overflow: hidden; width: 40px; height: 40px; top: 0px; left: 0px;"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%3E%0A%20%20%3Cpath%20fill%3D%22%23666%22%20d%3D%22M0%2C7h18v4H0V7z%22%2F%3E%0A%3C%2Fsvg%3E%0A" style="height: 18px; width: 18px;"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%3E%0A%20%20%3Cpath%20fill%3D%22%23333%22%20d%3D%22M0%2C7h18v4H0V7z%22%2F%3E%0A%3C%2Fsvg%3E%0A" style="height: 18px; width: 18px;"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%3E%0A%20%20%3Cpath%20fill%3D%22%23111%22%20d%3D%22M0%2C7h18v4H0V7z%22%2F%3E%0A%3C%2Fsvg%3E%0A" style="height: 18px; width: 18px;"></button></div></div><div class="gmnoprint" controlwidth="40" controlheight="40" style="display: none; position: absolute;"><div style="width: 40px; height: 40px;"><button draggable="false" title="Rotate map 90 degrees" aria-label="Rotate map 90 degrees" type="button" class="gm-control-active" style="background: none rgb(255, 255, 255); display: none; border: 0px; margin: 0px 0px 32px; padding: 0px; position: relative; cursor: pointer; user-select: none; width: 40px; height: 40px; top: 0px; left: 0px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; border-radius: 2px;"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2222%22%20viewBox%3D%220%200%2024%2022%22%3E%0A%20%20%3Cpath%20fill%3D%22%23666%22%20fill-rule%3D%22evenodd%22%20d%3D%22M20%2010c0-5.52-4.48-10-10-10s-10%204.48-10%2010v5h5v-5c0-2.76%202.24-5%205-5s5%202.24%205%205v5h-4l6.5%207%206.5-7h-4v-5z%22%20clip-rule%3D%22evenodd%22%2F%3E%0A%3C%2Fsvg%3E%0A" style="height: 18px; width: 18px;"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2222%22%20viewBox%3D%220%200%2024%2022%22%3E%0A%20%20%3Cpath%20fill%3D%22%23333%22%20fill-rule%3D%22evenodd%22%20d%3D%22M20%2010c0-5.52-4.48-10-10-10s-10%204.48-10%2010v5h5v-5c0-2.76%202.24-5%205-5s5%202.24%205%205v5h-4l6.5%207%206.5-7h-4v-5z%22%20clip-rule%3D%22evenodd%22%2F%3E%0A%3C%2Fsvg%3E%0A" style="height: 18px; width: 18px;"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2222%22%20viewBox%3D%220%200%2024%2022%22%3E%0A%20%20%3Cpath%20fill%3D%22%23111%22%20fill-rule%3D%22evenodd%22%20d%3D%22M20%2010c0-5.52-4.48-10-10-10s-10%204.48-10%2010v5h5v-5c0-2.76%202.24-5%205-5s5%202.24%205%205v5h-4l6.5%207%206.5-7h-4v-5z%22%20clip-rule%3D%22evenodd%22%2F%3E%0A%3C%2Fsvg%3E%0A" style="height: 18px; width: 18px;"></button><button draggable="false" title="Tilt map" aria-label="Tilt map" type="button" class="gm-tilt gm-control-active" style="background: none rgb(255, 255, 255); display: block; border: 0px; margin: 0px; padding: 0px; position: relative; cursor: pointer; user-select: none; width: 40px; height: 40px; top: 0px; left: 0px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; border-radius: 2px;"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2018%2016%22%3E%0A%20%20%3Cpath%20fill%3D%22%23666%22%20d%3D%22M0%2C16h8V9H0V16z%20M10%2C16h8V9h-8V16z%20M0%2C7h8V0H0V7z%20M10%2C0v7h8V0H10z%22%2F%3E%0A%3C%2Fsvg%3E%0A" style="width: 18px;"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2018%2016%22%3E%0A%20%20%3Cpath%20fill%3D%22%23333%22%20d%3D%22M0%2C16h8V9H0V16z%20M10%2C16h8V9h-8V16z%20M0%2C7h8V0H0V7z%20M10%2C0v7h8V0H10z%22%2F%3E%0A%3C%2Fsvg%3E%0A" style="width: 18px;"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2018%2016%22%3E%0A%20%20%3Cpath%20fill%3D%22%23111%22%20d%3D%22M0%2C16h8V9H0V16z%20M10%2C16h8V9h-8V16z%20M0%2C7h8V0H0V7z%20M10%2C0v7h8V0H10z%22%2F%3E%0A%3C%2Fsvg%3E%0A" style="width: 18px;"></button></div></div></div></div></div><div style="background-color: white; font-weight: 500; font-family: Roboto, sans-serif; padding: 15px 25px; box-sizing: border-box; top: 5px; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 5px; left: 50%; max-width: 375px; position: absolute; transform: translateX(-50%); width: calc(100% - 10px); z-index: 1;"><div><img alt="" src="https://maps.gstatic.com/mapfiles/api-3/images/google_gray.svg" draggable="false" style="padding: 0px; margin: 0px; border: 0px; height: 17px; vertical-align: middle; width: 52px; user-select: none;"></div><div style="line-height: 20px; margin: 15px 0px;"><span style="color: rgba(0, 0, 0, 0.87); font-size: 14px;">This page can't load Google Maps correctly.</span></div><table style="width: 100%;"><tr><td style="line-height: 16px; vertical-align: middle;"><a href="https://developers.google.com/maps/documentation/javascript/error-messages?utm_source=maps_js&utm_medium=degraded&utm_campaign=billing#api-key-and-billing-errors" target="_blank" rel="noopener" style="color: rgba(0, 0, 0, 0.54); font-size: 12px;">Do you own this website?</a></td><td style="text-align: right;"><button class="dismissButton">OK</button></td></tr></table></div></div> + <script> + function initMap() { + var uluru = { + lat: -25.363, + lng: 131.044 + }; + var grayStyles = [{ + featureType: "all", + stylers: [{ + saturation: -90 + }, + { + lightness: 50 + } + ] + }, + { + elementType: 'labels.text.fill', + stylers: [{ + color: '#ccdee9' + }] + } + ]; + var map = new google.maps.Map(document.getElementById('map'), { + center: { + lat: -31.197, + lng: 150.744 + }, + zoom: 9, + styles: grayStyles, + scrollwheel: false + }); + } + </script> + <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDpfS1oRGreGSBU5HHjMmQ3o5NLw7VdJ6I&callback=initMap"> + </script> + + </div> + + + <div class="row"> + <div class="col-12"> + <h2 class="contact-title">Get in Touch</h2> + </div> + <div class="col-lg-8"> + <form class="form-contact contact_form" th:action="@{/save/message}" method="post" id="contactForm" novalidate="novalidate"> + <div class="row"> + <div class="col-12"> + <div class="form-group"> + <textarea class="form-control w-100" name="message" id="message" cols="30" rows="9" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter Message'" placeholder="Enter message"></textarea> + </div> + </div> + <div class="col-sm-6"> + <div class="form-group"> + <input class="form-control valid" name="nameOfSender" id="nameOfSender" type="text" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter your name'" placeholder="Enter your name"> + </div> + </div> + <div class="col-sm-6"> + <div class="form-group"> + <input class="form-control valid" name="email" id="email" type="email" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter email address'" placeholder="Email"> + </div> + </div> + <div class="col-12"> + <div class="form-group"> + <input class="form-control" name="subject" id="subject" type="text" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter Subject'" placeholder="Enter Subject"> + </div> + </div> + </div> + <div class="form-group mt-3"> + <input type="submit" class="button button-contactForm boxed-btn" value="S E N D"> + </div> + </form> + </div> + <div class="col-lg-3 offset-lg-1"> + <div class="media contact-info"> + <span class="contact-info__icon"><i class="ti-home"></i></span> + <div class="media-body"> + <h3>Urgench, Uzbekistan</h3> + <p>Amir Temur, CA 91770</p> + </div> + </div> + <div class="media contact-info"> + <span class="contact-info__icon"><i class="ti-tablet"></i></span> + <div class="media-body"> + <h3>+998(99) 747-77-77</h3> + <p>Mon to Fri 9am to 6pm</p> + </div> + </div> + <div class="media contact-info"> + <span class="contact-info__icon"><i class="ti-email"></i></span> + <div class="media-body"> + <h3>support@barbershop.com</h3> + <p>Send us your query anytime!</p> + </div> + </div> + </div> + </div> + </div> + </section> + <!-- ================ contact section end ================= --> + + <!-- 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 href="#">About</a></li> + <li><a href="#">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 diff --git a/src/main/resources/templates/elements.html b/src/main/resources/templates/elements.html new file mode 100644 index 0000000..1853bb1 --- /dev/null +++ b/src/main/resources/templates/elements.html @@ -0,0 +1,946 @@ +<!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" 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="@{/service}">service</a></li> + <li><a href="#">blog <i class="ti-angle-down"></i></a> + <ul class="submenu"> + <li><a th:href="@{/blog}">blog</a></li> + <li><a th:href="@{/single-blog}">single-blog</a></li> + </ul> + </li> + <li><a href="#">pages <i class="ti-angle-down"></i></a> + <ul class="submenu"> + <li><a th:href="@{/about}">about</a></li> + <li><a th:href="@{/elements}">elements</a></li> + </ul> + </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 --> + + <!-- bradcam_area_start --> + <div class="bradcam_area breadcam_bg overlay"> + <div class="container"> + <div class="row"> + <div class="col-lg-12"> + <h3>elements</h3> + </div> + </div> + </div> + </div> + <!-- bradcam_area_end --> + + <!-- Start Sample Area --> + <section class="sample-text-area"> + <div class="container box_1170"> + <h3 class="text-heading">Text Sample</h3> + <p class="sample-text"> + Every avid independent filmmaker has <b>Bold</b> about making that <i>Italic</i> interest documentary, + or short + film to show off their creative prowess. Many have great ideas and want to “wow” + the<sup>Superscript</sup> scene, + or video renters with their big project. But once you have the<sub>Subscript</sub> “in the can” (no easy + feat), how + do you move from a <del>Strike</del> through of master DVDs with the <u>“Underline”</u> marked + hand-written title + inside a secondhand CD case, to a pile of cardboard boxes full of shiny new, retail-ready DVDs, with UPC + barcodes + and polywrap sitting on your doorstep? You need to create eye-popping artwork and have your project + replicated. + Using a reputable full service DVD Replication company like PacificDisc, Inc. to partner with is + certainly a + helpful option to ensure a professional end result, but to help with your DVD replication project, here + are 4 easy + steps to follow for good DVD replication results: + + </p> + </div> + </section> + <!-- End Sample Area --> + + <!-- Start Button --> + <section class="button-area"> + <div class="container box_1170 border-top-generic"> + <h3 class="text-heading">Sample Buttons</h3> + <div class="button-group-area"> + <a href="#" class="genric-btn default">Default</a> + <a href="#" class="genric-btn primary">Primary</a> + <a href="#" class="genric-btn success">Success</a> + <a href="#" class="genric-btn info">Info</a> + <a href="#" class="genric-btn warning">Warning</a> + <a href="#" class="genric-btn danger">Danger</a> + <a href="#" class="genric-btn link">Link</a> + <a href="#" class="genric-btn disable">Disable</a> + </div> + <div class="button-group-area mt-10"> + <a href="#" class="genric-btn default-border">Default</a> + <a href="#" class="genric-btn primary-border">Primary</a> + <a href="#" class="genric-btn success-border">Success</a> + <a href="#" class="genric-btn info-border">Info</a> + <a href="#" class="genric-btn warning-border">Warning</a> + <a href="#" class="genric-btn danger-border">Danger</a> + <a href="#" class="genric-btn link-border">Link</a> + <a href="#" class="genric-btn disable">Disable</a> + </div> + <div class="button-group-area mt-40"> + <a href="#" class="genric-btn default radius">Default</a> + <a href="#" class="genric-btn primary radius">Primary</a> + <a href="#" class="genric-btn success radius">Success</a> + <a href="#" class="genric-btn info radius">Info</a> + <a href="#" class="genric-btn warning radius">Warning</a> + <a href="#" class="genric-btn danger radius">Danger</a> + <a href="#" class="genric-btn link radius">Link</a> + <a href="#" class="genric-btn disable radius">Disable</a> + </div> + <div class="button-group-area mt-10"> + <a href="#" class="genric-btn default-border radius">Default</a> + <a href="#" class="genric-btn primary-border radius">Primary</a> + <a href="#" class="genric-btn success-border radius">Success</a> + <a href="#" class="genric-btn info-border radius">Info</a> + <a href="#" class="genric-btn warning-border radius">Warning</a> + <a href="#" class="genric-btn danger-border radius">Danger</a> + <a href="#" class="genric-btn link-border radius">Link</a> + <a href="#" class="genric-btn disable radius">Disable</a> + </div> + <div class="button-group-area mt-40"> + <a href="#" class="genric-btn default circle">Default</a> + <a href="#" class="genric-btn primary circle">Primary</a> + <a href="#" class="genric-btn success circle">Success</a> + <a href="#" class="genric-btn info circle">Info</a> + <a href="#" class="genric-btn warning circle">Warning</a> + <a href="#" class="genric-btn danger circle">Danger</a> + <a href="#" class="genric-btn link circle">Link</a> + <a href="#" class="genric-btn disable circle">Disable</a> + </div> + <div class="button-group-area mt-10"> + <a href="#" class="genric-btn default-border circle">Default</a> + <a href="#" class="genric-btn primary-border circle">Primary</a> + <a href="#" class="genric-btn success-border circle">Success</a> + <a href="#" class="genric-btn info-border circle">Info</a> + <a href="#" class="genric-btn warning-border circle">Warning</a> + <a href="#" class="genric-btn danger-border circle">Danger</a> + <a href="#" class="genric-btn link-border circle">Link</a> + <a href="#" class="genric-btn disable circle">Disable</a> + </div> + <div class="button-group-area mt-40"> + <a href="#" class="genric-btn default circle arrow">Default<span class="lnr lnr-arrow-right"></span></a> + <a href="#" class="genric-btn primary circle arrow">Primary<span class="lnr lnr-arrow-right"></span></a> + <a href="#" class="genric-btn success circle arrow">Success<span class="lnr lnr-arrow-right"></span></a> + <a href="#" class="genric-btn info circle arrow">Info<span class="lnr lnr-arrow-right"></span></a> + <a href="#" class="genric-btn warning circle arrow">Warning<span class="lnr lnr-arrow-right"></span></a> + <a href="#" class="genric-btn danger circle arrow">Danger<span class="lnr lnr-arrow-right"></span></a> + </div> + <div class="button-group-area mt-10"> + <a href="#" class="genric-btn default-border circle arrow">Default<span + class="lnr lnr-arrow-right"></span></a> + <a href="#" class="genric-btn primary-border circle arrow">Primary<span + class="lnr lnr-arrow-right"></span></a> + <a href="#" class="genric-btn success-border circle arrow">Success<span + class="lnr lnr-arrow-right"></span></a> + <a href="#" class="genric-btn info-border circle arrow">Info<span + class="lnr lnr-arrow-right"></span></a> + <a href="#" class="genric-btn warning-border circle arrow">Warning<span + class="lnr lnr-arrow-right"></span></a> + <a href="#" class="genric-btn danger-border circle arrow">Danger<span + class="lnr lnr-arrow-right"></span></a> + </div> + <div class="button-group-area mt-40"> + <a href="#" class="genric-btn primary e-large">Extra Large</a> + <a href="#" class="genric-btn success large">Large</a> + <a href="#" class="genric-btn primary">Default</a> + <a href="#" class="genric-btn success medium">Medium</a> + <a href="#" class="genric-btn primary small">Small</a> + </div> + <div class="button-group-area mt-10"> + <a href="#" class="genric-btn primary-border e-large">Extra Large</a> + <a href="#" class="genric-btn success-border large">Large</a> + <a href="#" class="genric-btn primary-border">Default</a> + <a href="#" class="genric-btn success-border medium">Medium</a> + <a href="#" class="genric-btn primary-border small">Small</a> + </div> + </div> + </section> + <!-- End Button --> + + <!-- Start Align Area --> + <div class="whole-wrap"> + <div class="container box_1170"> + <div class="section-top-border"> + <h3 class="mb-30">Left Aligned</h3> + <div class="row"> + <div class="col-md-3"> + <img th:src="@{img/elements/d.jpg}" alt="" class="img-fluid"> + </div> + <div class="col-md-9 mt-sm-20"> + <p>Recently, the US Federal government banned online casinos from operating in America by making + it illegal to + transfer money to them through any US bank or payment system. As a result of this law, most + of the popular + online casino networks such as Party Gaming and PlayTech left the United States. Overnight, + online casino + players found themselves being chased by the Federal government. But, after a fortnight, the + online casino + industry came up with a solution and new online casinos started taking root. These began to + operate under a + different business umbrella, and by doing that, rendered the transfer of money to and from + them legal. A major + part of this was enlisting electronic banking systems that would accept this new + clarification and start doing + business with me. Listed in this article are the electronic banking systems that accept + players from the United + States that wish to play in online casinos.</p> + </div> + </div> + </div> + <div class="section-top-border text-right"> + <h3 class="mb-30">Right Aligned</h3> + <div class="row"> + <div class="col-md-9"> + <p class="text-right">Over time, even the most sophisticated, memory packed computer can begin + to run slow if we + don’t do something to prevent it. The reason why has less to do with how computers are made + and how they age and + more to do with the way we use them. You see, all of the daily tasks that we do on our PC + from running programs + to downloading and deleting software can make our computer sluggish. To keep this from + happening, you need to + understand the reasons why your PC is getting slower and do something to keep your PC + running at its best. You + can do this through regular maintenance and PC performance optimization programs</p> + <p class="text-right">Before we discuss all of the things that could be affecting your PC’s + performance, let’s + talk a little about what symptoms</p> + </div> + <div class="col-md-3"> + <img th:src="@{img/elements/d.jpg}" alt="" class="img-fluid"> + </div> + </div> + </div> + <div class="section-top-border"> + <h3 class="mb-30">Definition</h3> + <div class="row"> + <div class="col-md-4"> + <div class="single-defination"> + <h4 class="mb-20">Definition 01</h4> + <p>Recently, the US Federal government banned online casinos from operating in America by + making it illegal to + transfer money to them through any US bank or payment system. As a result of this law, + most of the popular + online casino networks</p> + </div> + </div> + <div class="col-md-4"> + <div class="single-defination"> + <h4 class="mb-20">Definition 02</h4> + <p>Recently, the US Federal government banned online casinos from operating in America by + making it illegal to + transfer money to them through any US bank or payment system. As a result of this law, + most of the popular + online casino networks</p> + </div> + </div> + <div class="col-md-4"> + <div class="single-defination"> + <h4 class="mb-20">Definition 03</h4> + <p>Recently, the US Federal government banned online casinos from operating in America by + making it illegal to + transfer money to them through any US bank or payment system. As a result of this law, + most of the popular + online casino networks</p> + </div> + </div> + </div> + </div> + <div class="section-top-border"> + <h3 class="mb-30">Block Quotes</h3> + <div class="row"> + <div class="col-lg-12"> + <blockquote class="generic-blockquote"> + “Recently, the US Federal government banned online casinos from operating in America by + making it illegal to + transfer money to them through any US bank or payment system. As a result of this law, most + of the popular + online casino networks such as Party Gaming and PlayTech left the United States. Overnight, + online casino + players found themselves being chased by the Federal government. But, after a fortnight, the + online casino + industry came up with a solution and new online casinos started taking root. These began to + operate under a + different business umbrella, and by doing that, rendered the transfer of money to and from + them legal. A major + part of this was enlisting electronic banking systems that would accept this new + clarification and start doing + business with me. Listed in this article are the electronic banking” + </blockquote> + </div> + </div> + </div> + <div class="section-top-border"> + <h3 class="mb-30">Table</h3> + <div class="progress-table-wrap"> + <div class="progress-table"> + <div class="table-head"> + <div class="serial">#</div> + <div class="country">Countries</div> + <div class="visit">Visits</div> + <div class="percentage">Percentages</div> + </div> + <div class="table-row"> + <div class="serial">01</div> + <div class="country"> <img th:src="@{img/elements/f1.jpg}" alt="flag">Canada</div> + <div class="visit">645032</div> + <div class="percentage"> + <div class="progress"> + <div class="progress-bar color-1" role="progressbar" style="width: 80%" + aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div> + </div> + </div> + </div> + <div class="table-row"> + <div class="serial">02</div> + <div class="country"> <img th:src="@{img/elements/f2.jpg}" alt="flag">Canada</div> + <div class="visit">645032</div> + <div class="percentage"> + <div class="progress"> + <div class="progress-bar color-2" role="progressbar" style="width: 30%" + aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div> + </div> + </div> + </div> + <div class="table-row"> + <div class="serial">03</div> + <div class="country"> <img th:src="@{img/elements/f3.jpg}" alt="flag">Canada</div> + <div class="visit">645032</div> + <div class="percentage"> + <div class="progress"> + <div class="progress-bar color-3" role="progressbar" style="width: 55%" + aria-valuenow="55" aria-valuemin="0" aria-valuemax="100"></div> + </div> + </div> + </div> + <div class="table-row"> + <div class="serial">04</div> + <div class="country"> <img th:src="@{img/elements/f4.jpg}" alt="flag">Canada</div> + <div class="visit">645032</div> + <div class="percentage"> + <div class="progress"> + <div class="progress-bar color-4" role="progressbar" style="width: 60%" + aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div> + </div> + </div> + </div> + <div class="table-row"> + <div class="serial">05</div> + <div class="country"> <img th:src="@{img/elements/f5.jpg}" alt="flag">Canada</div> + <div class="visit">645032</div> + <div class="percentage"> + <div class="progress"> + <div class="progress-bar color-5" role="progressbar" style="width: 40%" + aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div> + </div> + </div> + </div> + <div class="table-row"> + <div class="serial">06</div> + <div class="country"> <img th:src="@{img/elements/f6.jpg}" alt="flag">Canada</div> + <div class="visit">645032</div> + <div class="percentage"> + <div class="progress"> + <div class="progress-bar color-6" role="progressbar" style="width: 70%" + aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div> + </div> + </div> + </div> + <div class="table-row"> + <div class="serial">07</div> + <div class="country"> <img th:src="@{img/elements/f7.jpg}" alt="flag">Canada</div> + <div class="visit">645032</div> + <div class="percentage"> + <div class="progress"> + <div class="progress-bar color-7" role="progressbar" style="width: 30%" + aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div> + </div> + </div> + </div> + <div class="table-row"> + <div class="serial">08</div> + <div class="country"> <img th:src="@{img/elements/f8.jpg}" alt="flag">Canada</div> + <div class="visit">645032</div> + <div class="percentage"> + <div class="progress"> + <div class="progress-bar color-8" role="progressbar" style="width: 60%" + aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div> + </div> + </div> + </div> + </div> + </div> + </div> + <div class="section-top-border"> + <h3>Image Gallery</h3> + <div class="row gallery-item"> + <div class="col-md-4"> + <a href="@{img/elements/g1.jpg" class="img-pop-up"> + <div class="single-gallery-image" style="background: url(../static/img/elements/g1.jpg);"></div> + </a> + </div> + <div class="col-md-4"> + <a href="@{img/elements/g2.jpg" class="img-pop-up"> + <div class="single-gallery-image" style="background: url(../static/img/elements/g2.jpg);"></div> + </a> + </div> + <div class="col-md-4"> + <a href="@{img/elements/g3.jpg" class="img-pop-up"> + <div class="single-gallery-image" style="background: url(../static/img/elements/g3.jpg);"></div> + </a> + </div> + <div class="col-md-6"> + <a href="@{img/elements/g4.jpg" class="img-pop-up"> + <div class="single-gallery-image" style="background: url(../static/img/elements/g4.jpg);"></div> + </a> + </div> + <div class="col-md-6"> + <a href="@{img/elements/g5.jpg" class="img-pop-up"> + <div class="single-gallery-image" style="background: url(../static/img/elements/g5.jpg);"></div> + </a> + </div> + <div class="col-md-4"> + <a href="@{img/elements/g6.jpg" class="img-pop-up"> + <div class="single-gallery-image" style="background: url(../static/img/elements/g6.jpg);"></div> + </a> + </div> + <div class="col-md-4"> + <a href="@{img/elements/g7.jpg" class="img-pop-up"> + <div class="single-gallery-image" style="background: url(../static/img/elements/g7.jpg);"></div> + </a> + </div> + <div class="col-md-4"> + <a href="@{img/elements/g8.jpg" class="img-pop-up"> + <div class="single-gallery-image" style="background: url(../static/img/elements/g8.jpg);"></div> + </a> + </div> + </div> + </div> + <div class="section-top-border"> + <div class="row"> + <div class="col-md-4"> + <h3 class="mb-20">Image Gallery</h3> + <div class="typography"> + <h1>This is header 01</h1> + <h2>This is header 02</h2> + <h3>This is header 03</h3> + <h4>This is header 04</h4> + <h5>This is header 01</h5> + <h6>This is header 01</h6> + </div> + </div> + <div class="col-md-4 mt-sm-30"> + <h3 class="mb-20">Unordered List</h3> + <div class=""> + <ul class="unordered-list"> + <li>Fta Keys</li> + <li>For Women Only Your Computer Usage</li> + <li>Facts Why Inkjet Printing Is Very Appealing + <ul> + <li>Addiction When Gambling Becomes + <ul> + <li>Protective Preventative Maintenance</li> + </ul> + </li> + </ul> + </li> + <li>Dealing With Technical Support 10 Useful Tips</li> + <li>Make Myspace Your Best Designed Space</li> + <li>Cleaning And Organizing Your Computer</li> + </ul> + </div> + </div> + <div class="col-md-4 mt-sm-30"> + <h3 class="mb-20">Ordered List</h3> + <div class=""> + <ol class="ordered-list"> + <li><span>Fta Keys</span></li> + <li><span>For Women Only Your Computer Usage</span></li> + <li><span>Facts Why Inkjet Printing Is Very Appealing</span> + <ol class="ordered-list-alpha"> + <li><span>Addiction When Gambling Becomes</span> + <ol class="ordered-list-roman"> + <li><span>Protective Preventative Maintenance</span></li> + </ol> + </li> + </ol> + </li> + <li><span>Dealing With Technical Support 10 Useful Tips</span></li> + <li><span>Make Myspace Your Best Designed Space</span></li> + <li><span>Cleaning And Organizing Your Computer</span></li> + </ol> + </div> + </div> + </div> + </div> + <div class="section-top-border"> + <div class="row"> + <div class="col-lg-8 col-md-8"> + <h3 class="mb-30">Form Element</h3> + <form action="#"> + <div class="mt-10"> + <input type="text" name="first_name" placeholder="First Name" + onfocus="this.placeholder = ''" onblur="this.placeholder = 'First Name'" required + class="single-input"> + </div> + <div class="mt-10"> + <input type="text" name="last_name" placeholder="Last Name" + onfocus="this.placeholder = ''" onblur="this.placeholder = 'Last Name'" required + class="single-input"> + </div> + <div class="mt-10"> + <input type="text" name="last_name" placeholder="Last Name" + onfocus="this.placeholder = ''" onblur="this.placeholder = 'Last Name'" required + class="single-input"> + </div> + <div class="mt-10"> + <input type="email" name="EMAIL" placeholder="Email address" + onfocus="this.placeholder = ''" onblur="this.placeholder = 'Email address'" required + class="single-input"> + </div> + <div class="input-group-icon mt-10"> + <div class="icon"><i class="fa fa-thumb-tack" aria-hidden="true"></i></div> + <input type="text" name="address" placeholder="Address" onfocus="this.placeholder = ''" + onblur="this.placeholder = 'Address'" required class="single-input"> + </div> + <div class="input-group-icon mt-10"> + <div class="icon"><i class="fa fa-plane" aria-hidden="true"></i></div> + <div class="form-select"> + <select> + <option value=" 1">City</option> + <option value="1">Dhaka</option> + <option value="1">Dilli</option> + <option value="1">Newyork</option> + <option value="1">Islamabad</option> + </select> + </div> + </div> + <div class="input-group-icon mt-10"> + <div class="icon"><i class="fa fa-globe" aria-hidden="true"></i></div> + <div class="form-select"> + <select> + <option value=" 1">Country</option> + <option value="1">Bangladesh</option> + <option value="1">India</option> + <option value="1">England</option> + <option value="1">Srilanka</option> + </select> + </div> + </div> + + <div class="mt-10"> + <textarea class="single-textarea" placeholder="Message" onfocus="this.placeholder = ''" + onblur="this.placeholder = 'Message'" required></textarea> + </div> + <!-- For Gradient Border Use --> + <!-- <div class="mt-10"> + <div class="primary-input"> + <input id="primary-input" type="text" name="first_name" placeholder="Primary color" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Primary color'"> + <label for="primary-input"></label> + </div> + </div> --> + <div class="mt-10"> + <input type="text" name="first_name" placeholder="Primary color" + onfocus="this.placeholder = ''" onblur="this.placeholder = 'Primary color'" required + class="single-input-primary"> + </div> + <div class="mt-10"> + <input type="text" name="first_name" placeholder="Accent color" + onfocus="this.placeholder = ''" onblur="this.placeholder = 'Accent color'" required + class="single-input-accent"> + </div> + <div class="mt-10"> + <input type="text" name="first_name" placeholder="Secondary color" + onfocus="this.placeholder = ''" onblur="this.placeholder = 'Secondary color'" + required class="single-input-secondary"> + </div> + </form> + </div> + <div class="col-lg-3 col-md-4 mt-sm-30"> + <div class="single-element-widget"> + <h3 class="mb-30">Switches</h3> + <div class="switch-wrap d-flex justify-content-between"> + <p>01. Sample Switch</p> + <div class="primary-switch"> + <input type="checkbox" id="default-switch"> + <label for="default-switch"></label> + </div> + </div> + <div class="switch-wrap d-flex justify-content-between"> + <p>02. Primary Color Switch</p> + <div class="primary-switch"> + <input type="checkbox" id="primary-switch" checked> + <label for="primary-switch"></label> + </div> + </div> + <div class="switch-wrap d-flex justify-content-between"> + <p>03. Confirm Color Switch</p> + <div class="confirm-switch"> + <input type="checkbox" id="confirm-switch" checked> + <label for="confirm-switch"></label> + </div> + </div> + </div> + <div class="single-element-widget mt-30"> + <h3 class="mb-30">Selectboxes</h3> + <div class="default-select"> + <select> + <option value=" 1">English</option> + <option value="1">Spanish</option> + <option value="1">Arabic</option> + <option value="1">Portuguise</option> + <option value="1">Bengali</option> + </select> + </div> + </div> + <div class="single-element-widget mt-30"> + <h3 class="mb-30">Checkboxes</h3> + <div class="switch-wrap d-flex justify-content-between"> + <p>01. Sample Checkbox</p> + <div class="primary-checkbox"> + <input type="checkbox" id="default-checkbox"> + <label for="default-checkbox"></label> + </div> + </div> + <div class="switch-wrap d-flex justify-content-between"> + <p>02. Primary Color Checkbox</p> + <div class="primary-checkbox"> + <input type="checkbox" id="primary-checkbox" checked> + <label for="primary-checkbox"></label> + </div> + </div> + <div class="switch-wrap d-flex justify-content-between"> + <p>03. Confirm Color Checkbox</p> + <div class="confirm-checkbox"> + <input type="checkbox" id="confirm-checkbox"> + <label for="confirm-checkbox"></label> + </div> + </div> + <div class="switch-wrap d-flex justify-content-between"> + <p>04. Disabled Checkbox</p> + <div class="disabled-checkbox"> + <input type="checkbox" id="disabled-checkbox" disabled> + <label for="disabled-checkbox"></label> + </div> + </div> + <div class="switch-wrap d-flex justify-content-between"> + <p>05. Disabled Checkbox active</p> + <div class="disabled-checkbox"> + <input type="checkbox" id="disabled-checkbox-active" checked disabled> + <label for="disabled-checkbox-active"></label> + </div> + </div> + </div> + <div class="single-element-widget mt-30"> + <h3 class="mb-30">Radios</h3> + <div class="switch-wrap d-flex justify-content-between"> + <p>01. Sample radio</p> + <div class="primary-radio"> + <input type="checkbox" id="default-radio"> + <label for="default-radio"></label> + </div> + </div> + <div class="switch-wrap d-flex justify-content-between"> + <p>02. Primary Color radio</p> + <div class="primary-radio"> + <input type="checkbox" id="primary-radio" checked> + <label for="primary-radio"></label> + </div> + </div> + <div class="switch-wrap d-flex justify-content-between"> + <p>03. Confirm Color radio</p> + <div class="confirm-radio"> + <input type="checkbox" id="confirm-radio" checked> + <label for="confirm-radio"></label> + </div> + </div> + <div class="switch-wrap d-flex justify-content-between"> + <p>04. Disabled radio</p> + <div class="disabled-radio"> + <input type="checkbox" id="disabled-radio" disabled> + <label for="disabled-radio"></label> + </div> + </div> + <div class="switch-wrap d-flex justify-content-between"> + <p>05. Disabled radio active</p> + <div class="disabled-radio"> + <input type="checkbox" id="disabled-radio-active" checked disabled> + <label for="disabled-radio-active"></label> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + <!-- End Align 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">Lorem ipsum dolor sit amet, consectetur <br> adipiscing elit, sed do eiusmod tempor <br> incididunt ut labore et dolore magna aliqua. <br> Quis ipsum suspendisse. + </p> + <div class="socail_links"> + <ul> + <li> + <a href="#"> + <i class="ti-facebook"></i> + </a> + </li> + <li> + <a href="#"> + <i class="ti-twitter-alt"></i> + </a> + </li> + <li> + <a href="#"> + <i class="fa fa-dribbble"></i> + </a> + </li> + <li> + <a href="#"> + <i class="fa fa-instagram"></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 href="#">About</a></li> + <li><a href="#">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="#">FaceBook</a></li> + <li><a href="#">Instagram</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><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --> + Copyright ©<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="fa fa-heart" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a> + <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p> + </p> + </div> + </div> + </div> + </div> + </footer> + <!-- footer_end --> + + + <!-- form itself end--> + <form id="test-form" class="white-popup-block mfp-hide"> + <div class="popup_box "> + <div class="popup_inner"> + <h3>Make an Appointment</h3> + <form action="#"> + <div class="row"> + <div class="col-xl-6 col-md-6"> + <input id="datepicker" placeholder="Date"> + </div> + <div class="col-xl-6 col-md-6"> + <input id="timepicker" placeholder="time"> + </div> + <div class="col-xl-6 col-md-6"> + <select class="form-select wide"> + <option data-display="Choose services">Choose services 1</option> + <option value="1">Choose services 2</option> + <option value="2">Choose services 3</option> + <option value="3">Choose services 4</option> + </select> + </div> + <div class="col-xl-6 col-md-6"> + <select class="form-select wide"> + <option data-display="Choose Barbers">Choose Barbers</option> + <option value="1">Zaki</option> + <option value="2">Ronky</option> + <option value="3">kalu</option> + </select> + </div> + <div class="col-xl-6 col-md-6"> + <input type="text" placeholder="Your name"> + </div> + <div class="col-xl-6 col-md-6"> + <input type="text" placeholder="Phone no"> + </div> + <div class="col-xl-12"> + <input type="email" placeholder="Your email"> + </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 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 diff --git a/src/main/resources/templates/services.html b/src/main/resources/templates/services.html new file mode 100644 index 0000000..1265922 --- /dev/null +++ b/src/main/resources/templates/services.html @@ -0,0 +1,330 @@ +<!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 --> + + <!-- bradcam_area_start --> + <div class="bradcam_area breadcam_bg overlay"> + <div class="container"> + <div class="row"> + <div class="col-lg-12"> + <h3>Services</h3> + </div> + </div> + </div> + </div> + <!-- bradcam_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> + + <!-- 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 diff --git a/src/main/resources/templates/single-blog.html b/src/main/resources/templates/single-blog.html new file mode 100644 index 0000000..561fdcc --- /dev/null +++ b/src/main/resources/templates/single-blog.html @@ -0,0 +1,707 @@ +<!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" th: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="@{/service}">service</a></li> + <li><a href="#">blog <i class="ti-angle-down"></i></a> + <ul class="submenu"> + <li><a th:href="@{/blog}">blog</a></li> + <li><a th:href="@{/single-blog}">single-blog</a></li> + </ul> + </li> + <li><a href="#">pages <i class="ti-angle-down"></i></a> + <ul class="submenu"> + <li><a th:href="@{/about}">about</a></li> + <li><a th:href="@{/elements}">elements</a></li> + </ul> + </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 --> + + <!-- bradcam_area_start --> + <div class="bradcam_area breadcam_bg overlay"> + <div class="container"> + <div class="row"> + <div class="col-lg-12"> + <h3>single Blog</h3> + </div> + </div> + </div> + </div> + <!-- bradcam_area_end --> + + <!--================Blog Area =================--> + <section class="blog_area single-post-area section-padding"> + <div class="container"> + <div class="row"> + <div class="col-lg-8 posts-list"> + <div class="single-post"> + <div class="feature-img"> + <img class="img-fluid" th:src="@{img/blog/single_blog_1.png}" alt=""> + </div> + <div class="blog_details"> + <h2>Second divided from form fish beast made every of seas + all gathered us saying he our + </h2> + <ul class="blog-info-link mt-3 mb-4"> + <li><a href="#"><i class="fa fa-user"></i> Travel, Lifestyle</a></li> + <li><a href="#"><i class="fa fa-comments"></i> 03 Comments</a></li> + </ul> + <p class="excert"> + MCSE boot camps have its supporters and its detractors. Some people do not understand why you + should have to spend money on boot camp when you can get the MCSE study materials yourself at a + fraction of the camp price. However, who has the willpower + </p> + <p> + MCSE boot camps have its supporters and its detractors. Some people do not understand why you + should have to spend money on boot camp when you can get the MCSE study materials yourself at a + fraction of the camp price. However, who has the willpower to actually sit through a + self-imposed MCSE training. who has the willpower to actually + </p> + <div class="quote-wrapper"> + <div class="quotes"> + MCSE boot camps have its supporters and its detractors. Some people do not understand why you + should have to spend money on boot camp when you can get the MCSE study materials yourself at + a fraction of the camp price. However, who has the willpower to actually sit through a + self-imposed MCSE training. + </div> + </div> + <p> + MCSE boot camps have its supporters and its detractors. Some people do not understand why you + should have to spend money on boot camp when you can get the MCSE study materials yourself at a + fraction of the camp price. However, who has the willpower + </p> + <p> + MCSE boot camps have its supporters and its detractors. Some people do not understand why you + should have to spend money on boot camp when you can get the MCSE study materials yourself at a + fraction of the camp price. However, who has the willpower to actually sit through a + self-imposed MCSE training. who has the willpower to actually + </p> + </div> + </div> + <div class="navigation-top"> + <div class="d-sm-flex justify-content-between text-center"> + <p class="like-info"><span class="align-middle"><i class="fa fa-heart"></i></span> Lily and 4 + people like this</p> + <div class="col-sm-4 text-center my-2 my-sm-0"> + <!-- <p class="comment-count"><span class="align-middle"><i class="fa fa-comment"></i></span> 06 Comments</p> --> + </div> + <ul class="social-icons"> + <li><a href="#"><i class="fa fa-facebook-f"></i></a></li> + <li><a href="#"><i class="fa fa-twitter"></i></a></li> + <li><a href="#"><i class="fa fa-dribbble"></i></a></li> + <li><a href="#"><i class="fa fa-behance"></i></a></li> + </ul> + </div> + <div class="navigation-area"> + <div class="row"> + <div + class="col-lg-6 col-md-6 col-12 nav-left flex-row d-flex justify-content-start align-items-center"> + <div class="thumb"> + <a href="#"> + <img class="img-fluid" th:src="@{img/post/preview.png}" alt=""> + </a> + </div> + <div class="arrow"> + <a href="#"> + <span class="lnr text-white ti-arrow-left"></span> + </a> + </div> + <div class="detials"> + <p>Prev Post</p> + <a href="#"> + <h4>Space The Final Frontier</h4> + </a> + </div> + </div> + <div + class="col-lg-6 col-md-6 col-12 nav-right flex-row d-flex justify-content-end align-items-center"> + <div class="detials"> + <p>Next Post</p> + <a href="#"> + <h4>Telescopes 101</h4> + </a> + </div> + <div class="arrow"> + <a href="#"> + <span class="lnr text-white ti-arrow-right"></span> + </a> + </div> + <div class="thumb"> + <a href="#"> + <img class="img-fluid" th:src="@{img/post/next.png}" alt=""> + </a> + </div> + </div> + </div> + </div> + </div> + <div class="blog-author"> + <div class="media align-items-center"> + <img th:src="@{img/blog/author.png}" alt=""> + <div class="media-body"> + <a href="#"> + <h4>Harvard milan</h4> + </a> + <p>Second divided from form fish beast made. Every of seas all gathered use saying you're, he + our dominion twon Second divided from</p> + </div> + </div> + </div> + <div class="comments-area"> + <h4>05 Comments</h4> + <div class="comment-list"> + <div class="single-comment justify-content-between d-flex"> + <div class="user justify-content-between d-flex"> + <div class="thumb"> + <img th:src="@{img/comment/comment_1.png}" alt=""> + </div> + <div class="desc"> + <p class="comment"> + Multiply sea night grass fourth day sea lesser rule open subdue female fill which them + Blessed, give fill lesser bearing multiply sea night grass fourth day sea lesser + </p> + <div class="d-flex justify-content-between"> + <div class="d-flex align-items-center"> + <h5> + <a href="#">Emilly Blunt</a> + </h5> + <p class="date">December 4, 2017 at 3:12 pm </p> + </div> + <div class="reply-btn"> + <a href="#" class="btn-reply text-uppercase">reply</a> + </div> + </div> + </div> + </div> + </div> + </div> + <div class="comment-list"> + <div class="single-comment justify-content-between d-flex"> + <div class="user justify-content-between d-flex"> + <div class="thumb"> + <img th:src="@{img/comment/comment_2.png}" alt=""> + </div> + <div class="desc"> + <p class="comment"> + Multiply sea night grass fourth day sea lesser rule open subdue female fill which them + Blessed, give fill lesser bearing multiply sea night grass fourth day sea lesser + </p> + <div class="d-flex justify-content-between"> + <div class="d-flex align-items-center"> + <h5> + <a href="#">Emilly Blunt</a> + </h5> + <p class="date">December 4, 2017 at 3:12 pm </p> + </div> + <div class="reply-btn"> + <a href="#" class="btn-reply text-uppercase">reply</a> + </div> + </div> + </div> + </div> + </div> + </div> + <div class="comment-list"> + <div class="single-comment justify-content-between d-flex"> + <div class="user justify-content-between d-flex"> + <div class="thumb"> + <img th:src="@{img/comment/comment_3.png}" alt=""> + </div> + <div class="desc"> + <p class="comment"> + Multiply sea night grass fourth day sea lesser rule open subdue female fill which them + Blessed, give fill lesser bearing multiply sea night grass fourth day sea lesser + </p> + <div class="d-flex justify-content-between"> + <div class="d-flex align-items-center"> + <h5> + <a href="#">Emilly Blunt</a> + </h5> + <p class="date">December 4, 2017 at 3:12 pm </p> + </div> + <div class="reply-btn"> + <a href="#" class="btn-reply text-uppercase">reply</a> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + <div class="comment-form"> + <h4>Leave a Reply</h4> + <form class="form-contact comment_form" action="#" id="commentForm"> + <div class="row"> + <div class="col-12"> + <div class="form-group"> + <textarea class="form-control w-100" name="comment" id="comment" cols="30" rows="9" + placeholder="Write Comment"></textarea> + </div> + </div> + <div class="col-sm-6"> + <div class="form-group"> + <input class="form-control" name="name" id="name" type="text" placeholder="Name"> + </div> + </div> + <div class="col-sm-6"> + <div class="form-group"> + <input class="form-control" name="email" id="email" type="email" placeholder="Email"> + </div> + </div> + <div class="col-12"> + <div class="form-group"> + <input class="form-control" name="website" id="website" type="text" placeholder="Website"> + </div> + </div> + </div> + <div class="form-group"> + <button type="submit" class="button button-contactForm btn_1 boxed-btn">Send Message</button> + </div> + </form> + </div> + </div> + <div class="col-lg-4"> + <div class="blog_right_sidebar"> + <aside class="single_sidebar_widget search_widget"> + <form action="#"> + <div class="form-group"> + <div class="input-group mb-3"> + <input type="text" class="form-control" placeholder='Search Keyword' + onfocus="this.placeholder = ''" onblur="this.placeholder = 'Search Keyword'"> + <div class="input-group-append"> + <button class="btn" type="button"><i class="ti-search"></i></button> + </div> + </div> + </div> + <button class="button rounded-0 primary-bg text-white w-100 btn_1 boxed-btn" + type="submit">Search</button> + </form> + </aside> + <aside class="single_sidebar_widget post_category_widget"> + <h4 class="widget_title">Category</h4> + <ul class="list cat-list"> + <li> + <a href="#" class="d-flex"> + <p>Resaurant food</p> + <p>(37)</p> + </a> + </li> + <li> + <a href="#" class="d-flex"> + <p>Travel news</p> + <p>(10)</p> + </a> + </li> + <li> + <a href="#" class="d-flex"> + <p>Modern technology</p> + <p>(03)</p> + </a> + </li> + <li> + <a href="#" class="d-flex"> + <p>Product</p> + <p>(11)</p> + </a> + </li> + <li> + <a href="#" class="d-flex"> + <p>Inspiration</p> + <p>(21)</p> + </a> + </li> + <li> + <a href="#" class="d-flex"> + <p>Health Care</p> + <p>(21)</p> + </a> + </li> + </ul> + </aside> + <aside class="single_sidebar_widget popular_post_widget"> + <h3 class="widget_title">Recent Post</h3> + <div class="media post_item"> + <img th:src="@{img/post/post_1.png}" alt="post"> + <div class="media-body"> + <a href="single-blog.html"> + <h3>From life was you fish...</h3> + </a> + <p>January 12, 2019</p> + </div> + </div> + <div class="media post_item"> + <img th:src="@{img/post/post_2.png}" alt="post"> + <div class="media-body"> + <a href="single-blog.html"> + <h3>The Amazing Hubble</h3> + </a> + <p>02 Hours ago</p> + </div> + </div> + <div class="media post_item"> + <img th:src="@{img/post/post_3.png}" alt="post"> + <div class="media-body"> + <a href="single-blog.html"> + <h3>Astronomy Or Astrology</h3> + </a> + <p>03 Hours ago</p> + </div> + </div> + <div class="media post_item"> + <img th:src="@{img/post/post_4.png}" alt="post"> + <div class="media-body"> + <a href="single-blog.html"> + <h3>Asteroids telescope</h3> + </a> + <p>01 Hours ago</p> + </div> + </div> + </aside> + <aside class="single_sidebar_widget tag_cloud_widget"> + <h4 class="widget_title">Tag Clouds</h4> + <ul class="list"> + <li> + <a href="#">project</a> + </li> + <li> + <a href="#">love</a> + </li> + <li> + <a href="#">technology</a> + </li> + <li> + <a href="#">travel</a> + </li> + <li> + <a href="#">restaurant</a> + </li> + <li> + <a href="#">life style</a> + </li> + <li> + <a href="#">design</a> + </li> + <li> + <a href="#">illustration</a> + </li> + </ul> + </aside> + <aside class="single_sidebar_widget instagram_feeds"> + <h4 class="widget_title">Instagram Feeds</h4> + <ul class="instagram_row flex-wrap"> + <li> + <a href="#"> + <img class="img-fluid" th:src="@{img/post/post_5.png}" alt=""> + </a> + </li> + <li> + <a href="#"> + <img class="img-fluid" th:src="@{img/post/post_6.png}" alt=""> + </a> + </li> + <li> + <a href="#"> + <img class="img-fluid" th:src="@{img/post/post_7.png}" alt=""> + </a> + </li> + <li> + <a href="#"> + <img class="img-fluid" th:src="@{img/post/post_8.png}" alt=""> + </a> + </li> + <li> + <a href="#"> + <img class="img-fluid" th:src="@{img/post/post_9.png}" alt=""> + </a> + </li> + <li> + <a href="#"> + <img class="img-fluid" th:src="@{img/post/post_10.png}" alt=""> + </a> + </li> + </ul> + </aside> + <aside class="single_sidebar_widget newsletter_widget"> + <h4 class="widget_title">Newsletter</h4> + <form action="#"> + <div class="form-group"> + <input type="email" class="form-control" onfocus="this.placeholder = ''" + onblur="this.placeholder = 'Enter email'" placeholder='Enter email' required> + </div> + <button class="button rounded-0 primary-bg text-white w-100 btn_1 boxed-btn" + type="submit">Subscribe</button> + </form> + </aside> + </div> + </div> + </div> + </div> + </section> + <!--================ Blog Area end =================--> + + <!-- 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">Lorem ipsum dolor sit amet, consectetur <br> adipiscing elit, sed do eiusmod tempor <br> incididunt ut labore et dolore magna aliqua. <br> Quis ipsum suspendisse. + </p> + <div class="socail_links"> + <ul> + <li> + <a href="#"> + <i class="ti-facebook"></i> + </a> + </li> + <li> + <a href="#"> + <i class="ti-twitter-alt"></i> + </a> + </li> + <li> + <a href="#"> + <i class="fa fa-dribbble"></i> + </a> + </li> + <li> + <a href="#"> + <i class="fa fa-instagram"></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 href="#">About</a></li> + <li><a href="#">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="#">FaceBook</a></li> + <li><a href="#">Instagram</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><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --> + Copyright ©<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="fa fa-heart" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a> + <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p> + </p> + </div> + </div> + </div> + </div> + </footer> + <!-- footer_end --> + + + <!-- form itself end--> + <form id="test-form" class="white-popup-block mfp-hide"> + <div class="popup_box "> + <div class="popup_inner"> + <h3>Make an Appointment</h3> + <form action="#"> + <div class="row"> + <div class="col-xl-6 col-md-6"> + <input id="datepicker" placeholder="Date"> + </div> + <div class="col-xl-6 col-md-6"> + <input id="timepicker" placeholder="time"> + </div> + <div class="col-xl-6 col-md-6"> + <select class="form-select wide"> + <option data-display="Choose services">Choose services 1</option> + <option value="1">Choose services 2</option> + <option value="2">Choose services 3</option> + <option value="3">Choose services 4</option> + </select> + </div> + <div class="col-xl-6 col-md-6"> + <select class="form-select wide"> + <option data-display="Choose Barbers">Choose Barbers</option> + <option value="1">Zaki</option> + <option value="2">Ronky</option> + <option value="3">kalu</option> + </select> + </div> + <div class="col-xl-6 col-md-6"> + <input type="text" placeholder="Your name"> + </div> + <div class="col-xl-6 col-md-6"> + <input type="text" placeholder="Phone no"> + </div> + <div class="col-xl-12"> + <input type="email" placeholder="Your email"> + </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 |