Untitled

mail@pastecode.io avatar
unknown
plain_text
a year ago
21 kB
3
Indexable
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gym department details</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link rel="icon" th:href="@{/assets/img/icon.png}">
    <link rel="apple-touch-icon" th:href="@{assets/img/apple-touch-icon.png}">
<!--    <script src="https://kit.fontawesome.com/a59b9b09ab.js" crossorigin="anonymous"></script>-->
    <link rel="stylesheet" th:href="@{/https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css}">
<!--    <link-->
<!--            href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"-->
<!--            rel="stylesheet">-->
    <link th:href="@{/user-homepage-assets/assets/vendor/aos/aos.css}" rel="stylesheet">
    <link th:href="@{/user-homepage-assets/assets/vendor/bootstrap/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/user-homepage-assets/assets/vendor/bootstrap-icons/bootstrap-icons.css}" rel="stylesheet">
    <link th:href="@{/user-homepage-assets/assets/vendor/boxicons/css/boxicons.min.css}" rel="stylesheet">
    <link th:href="@{/user-homepage-assets/assets/vendor/glightbox/css/glightbox.min.css}" rel="stylesheet">
    <link th:href="@{/user-homepage-assets/assets/vendor/remixicon/remixicon.css}" rel="stylesheet">
    <link th:href="@{/user-homepage-assets/assets/vendor/swiper/swiper-bundle.min.css}" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/://www.w3schools.com/w3css/4/w3.css}">
    <link th:href="@{/user-homepage-assets/assets/css/MyStyle.css}" rel="stylesheet">
</head>

<body class="body-gym-details">
<header style=""id="header" >
    <div  class="container d-flex align-items-center justify-content-lg-between">
        <h1 class="logo me-auto me-lg-0"><a href="index.html">Fitpass<span>.</span></a></h1>
        <nav style="margin:auto" id="navbar" class="navbar order-last order-lg-0">
            <ul>
                <li><a class="nav-link scrollto active" href="#hero">Trang chủ</a></li>
                <li><a class="nav-link scrollto" href="#about">Giới thiệu</a></li>
                <li><a class="nav-link scrollto" href="#services">Dịch vụ</a></li>
                <li><a class="nav-link scrollto" href="#portfolio">Bộ sưu tập</a></li>
                <li><a class="nav-link scrollto" href="#team">Đội ngũ</a></li>
                <li class="dropdown">
                    <a href="#"><span>Danh mục</span> <i class="bi bi-chevron-down"></i></a>
                    <ul>
                        <li><a href="#">Danh mục 1</a></li>
                        <li class="dropdown">
                            <a href="#"><span>Danh mục con</span> <i class="bi bi-chevron-right"></i></a>
                            <ul>
                                <li><a href="#">Danh mục con 1</a></li>
                                <li><a href="#">Danh mục con 2</a></li>
                                <li><a href="#">Danh mục con 3</a></li>
                                <li><a href="#">Danh mục con 4</a></li>
                                <li><a href="#">Danh mục con 5</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Danh mục 2</a></li>
                        <li><a href="#">Danh mục 3</a></li>
                        <li><a href="#">Danh mục 4</a></li>
                    </ul>
                </li>
                <li><a class="nav-link scrollto" href="#contact">Liên hệ</a></li>
            </ul>
            <i class="bi bi-list mobile-nav-toggle"></i>

            <!-- <li class="dropdown">
              <a href="#"><img style="width: 30px;" src="https://cdn-icons-png.flaticon.com/128/3870/3870822.png"></a>
              <ul>
                <li><a href="#">Tài khoản người dùng</a></li>
                <li><a href="#">Lịch sử</a></li>
                <li><a href="#">Đăng xuất</a></li>
              </ul>
            </li> -->

        </nav>

        <div class="dropdown">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                <a href="#"><img style="width: 30px;" src="https://cdn-icons-png.flaticon.com/128/3870/3870822.png"></a>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                <li><a class="dropdown-item" href="#">Tài khoản người dùng</a></li>
                <li><a class="dropdown-item" href="#">Lịch sử</a></li>
                <li><a class="dropdown-item" href="#">Đăng xuất</a></li>
            </ul>
        </div>

    </div>
</header>

<div class="gym-first-info">
    <div class="gym-picture">
        <img style="width: 150px; border-radius: 50%;" th:src="${department.departmentLogoUrl}" alt="gym picture">
        <div class="gym-name-cover">
            <h3 style="margin: auto; color: rgb(255, 255, 255); font-weight: 600;" th:text="${department.departmentName}"></h3>
            <h5 style="color: white;">2000 người đã tham gia</h5>
        </div>
    </div>
</div>
<div class="gym-container">
    <h3 style="color: aliceblue; font-weight: 600;">Về phòng gym của chúng tôi</h3>
    <div style="background-color: rgb(255, 187, 0); height: 3px; width: 150px;"></div>
    <div class="about-our-gym">
        <div class="gym-intro">
            <p th:utext="${department.departmentDescription}"></p>
        </div>
        <hr style="margin-top: 20px;">
        <div class="gym-address">
            <img style="width: 22px;" src="https://cdn-icons-png.flaticon.com/128/463/463575.png">
            <div style="margin-left: 10px;" th:text="${department.departmentAddress}"></div>
        </div>
        <div class="gym-address">
            <img style="width: 22px;" src="https://cdn-icons-png.flaticon.com/128/463/463575.png">
            <div style="margin-left: 10px;" th:text="${department.departmentContactNumber}"></div>
        </div>
        <div class="gym-address">
            <img style="width: 22px;" src="https://cdn-icons-png.flaticon.com/128/463/463575.png">
            <div style="margin-left: 10px;">Cho nay de gio hoat dong</div>
            <div class="modal-content">
                <div class="schedule-modal-header">
                    <div style="display: flex;">
                        <h3>Giờ hoạt động</h3>
                    </div>
                    <span class="close">&times;</span>
                </div>
                <div class="week">
                    <!-- Iterate over the departmentSchedules list to display each schedule -->
                    <div th:each="schedule : ${departmentSchedules}" class="day-line">
                        <div class="day" th:text="${schedule.departmentScheduleDay}"></div>
                        <div class="time">
                            <span th:text="${schedule.departmentScheduleOpenTime}"></span>
                            <span>-</span>
                            <span th:text="${schedule.departmentScheduleCloseTime}"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>
<div class="gym-service">
    <div th:each="feature : ${departmentFeatures}" class="sub-service">
        <label class="switch">
            <input type="checkbox" th:checked="${feature.isSelected}" disabled>
            <span class="toggle-slider round"></span>
        </label>
        <div style="color: rgb(255, 255, 255); margin-left: 10px" th:text="${feature.featureName}"></div>
    </div>
</div>
</div>
<h3 style="color: aliceblue; margin-top: 80px; font-weight: 600">Danh sách gói tập</h3>
<div style="background-color: rgb(255, 187, 0); height: 3px; width: 150px;"></div>
<div class="list-plan-wrapper">
    <button class="left" onclick="leftScroll()">
        <img style="width: 30px;" src="https://cdn-icons-png.flaticon.com/128/892/892646.png"></img>
    </button>
    <div class="scroll-plans">
        <div th:each="gymPlan : ${gymPlans}" class="child" th:if="${gymPlan.gymPlanType.equalsIgnoreCase('Gói theo giờ')}">
            <div class="plan-description">
                <div class="gym-plan-name" th:text="${gymPlan.getGymPlanName()}"></div>
                <div class="gym-plan-price">
                    <div style="font-size: xxx-large; font-weight: 700;" th:text="${gymPlan.getGymPlanDescription()}"></div>
                    <div style="font-size: xxx-large; font-weight: 700;">
                        <span th:if="${gymPlan.gymPlanType.equalsIgnoreCase('Gói không theo giờ')}" th:text="${gymPlan.price}"></span>
                        <span th:if="${gymPlan.gymPlanType.equalsIgnoreCase('Gói theo giờ')}" th:text="${gymPlan.pricePerHours}"></span>
                    </div>
                    <div style=" padding-left: 10px; padding-top: 22px;">credits</div>
                </div>
                <div style="color: rgb(255, 255, 255);" th:text="${gymPlan.getGymPlanDescription()}"></div>
                <hr>
                <div th:text="'Thời hạn trước khi active : ' + ${gymPlan.planBeforeActiveValidity}"></div>
                <div th:text="'Thời hạn sau khi active : ' + ${gymPlan.planAfterActiveValidity}"></div>
            </div>
            <button type="button">
                Đăng ký ngay
            </button>
        </div>
    </div>
    <button class="right" onclick="rightScroll()">
        <img style="width: 30px;" src="https://cdn-icons-png.flaticon.com/128/892/892662.png"></img>
    </button>
</div>

<div style="align-items: center;">
    <h3 style="color: rgb(255, 255, 255); margin-top: 50px; font-weight: 600">Album ảnh</h3>
    <div style="background-color: rgb(255, 187, 0); height: 3px; width: 100px;"></div>

    <div class="image-scroll-wrapper squares">
        <!-- Iterate over the departmentAlbums list to display each album -->
        <div th:each="album : ${departmentAlbums}">
            <img th:src="${album.photoUrl}" />
        </div>
    </div>
</div>
        <h3 style="color: rgb(255, 255, 255); margin-top: -790px; font-weight: 600">Đánh giá từ người tập</h3>
        <div style="background-color: rgb(255, 187, 0); height: 3px; width: 150px;"></div>
        <div style="color: white; margin-top: 20px;">Chúng tôi đã giúp hàng trăm người như bạn, và tất nhiên nói có sách mách có chứng! Ẩn sau mỗi feedback dưới đây là những câu chuyện dài về sự nỗ lực để thay đổi bản thân, trở thành phiên bản tốt hơn, mạnh mẽ hơn, kỉ luật hơn của chính mình. Họ cũng đã từng gặp rất nhiều khó khăn khi tự giảm cân trong thời gian dài.
            Hãy liên hệ ngay để trở thành transform tiếp theo của chúng tôi!</div>
<div class="rating-feedback">
    <div class="rating-option">
        <div class="rating-point" th:text="${departmentFeedbacks.avgRating} + ' trên 5'"></div>
        <button type="button" class="btn btn-warning" style="margin-left: 70px;">
            Tất cả (<span th:text="${departmentFeedbacks.total}"></span>)
        </button>
        <button type="button" class="btn btn-warning">
            5 sao (<span th:text="${departmentFeedbacks.total5}"></span>)
        </button>
        <button type="button" class="btn btn-warning">
            4 sao (<span th:text="${departmentFeedbacks.total4}"></span>)
        </button>
        <button type="button" class="btn btn-warning">
            3 sao (<span th:text="${departmentFeedbacks.total3}"></span>)
        </button>
        <button type="button" class="btn btn-warning">
            2 sao (<span th:text="${departmentFeedbacks.total2}"></span>)
        </button>
        <button type="button" class="btn btn-warning">
            1 sao (<span th:text="${departmentFeedbacks.total1}"></span>)
        </button>
    </div>
</div>
            <div class="user-ratings">
                <!-- Iterate over the userFeedbacks list and generate the HTML for each feedback -->
                <div th:each="feedback : ${userFeedbacks}" class="user-rating">
                    <div class="user-rating-avatar">
                        <img style="width: 60px; margin: auto;" src="https://cdn-icons-png.flaticon.com/128/4333/4333609.png">
                    </div>
                    <div class="user-rating-description">
                        <div th:text="${feedback.userName}"></div>
                        <i style="height: 20px;" th:attr="data-star=${feedback.rating}"></i>
                        <div th:text="${feedback.feedbackTime}"></div>
                        <div th:text="${feedback.comments}"></div>
                    </div>
                </div>
            </div>
            <hr style="margin-top: 35px;">
            <div class="pagination-wrapper">
                <div class="pagination">
                    <a class="prev page-numbers" href="javascript:;">prev</a>
                    <span aria-current="page" class="page-numbers current">1</span>
                    <a class="page-numbers" href="javascript:;">2</a>
                    <a class="page-numbers" href="javascript:;">3</a>
                    <a class="page-numbers" href="javascript:;">4</a>
                    <a class="page-numbers" href="javascript:;">5</a>
                    <a class="page-numbers" href="javascript:;">6</a>
                    <a class="page-numbers" href="javascript:;">7</a>
                    <a class="page-numbers" href="javascript:;">8</a>
                    <a class="page-numbers" href="javascript:;">9</a>
                    <a class="page-numbers" href="javascript:;">10</a>
                    <a class="next page-numbers" href="javascript:;">next</a>
                </div>
            </div>
        </div>
    </div>


    <!-- ======= Footer ======= -->
    <footer id="footer">
        <div class="footer-top">
            <div class="container">
                <div class="row">

                    <div class="col-lg-3 col-md-6">
                        <div class="footer-info">
                            <h3>Gp<span>.</span></h3>
                            <p>
                                A108 Adam Street <br>
                                NY 535022, USA<br><br>
                                <strong>Phone:</strong> +1 5589 55488 55<br>
                                <strong>Email:</strong> info@example.com<br>
                            </p>
                            <div class="social-links mt-3">
                                <a href="#" class="twitter"><i class="bx bxl-twitter"></i></a>
                                <a href="#" class="facebook"><i class="bx bxl-facebook"></i></a>
                                <a href="#" class="instagram"><i class="bx bxl-instagram"></i></a>
                                <a href="#" class="google-plus"><i class="bx bxl-skype"></i></a>
                                <a href="#" class="linkedin"><i class="bx bxl-linkedin"></i></a>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-2 col-md-6 footer-links">
                        <h4>Useful Links</h4>
                        <ul>
                            <li><i class="bx bx-chevron-right"></i> <a href="#">Home</a></li>
                            <li><i class="bx bx-chevron-right"></i> <a href="#">About us</a></li>
                            <li><i class="bx bx-chevron-right"></i> <a href="#">Services</a></li>
                            <li><i class="bx bx-chevron-right"></i> <a href="#">Terms of service</a></li>
                            <li><i class="bx bx-chevron-right"></i> <a href="#">Privacy policy</a></li>
                        </ul>
                    </div>

                    <div class="col-lg-3 col-md-6 footer-links">
                        <h4>Our Services</h4>
                        <ul>
                            <li><i class="bx bx-chevron-right"></i> <a href="#">Web Design</a></li>
                            <li><i class="bx bx-chevron-right"></i> <a href="#">Web Development</a></li>
                            <li><i class="bx bx-chevron-right"></i> <a href="#">Product Management</a></li>
                            <li><i class="bx bx-chevron-right"></i> <a href="#">Marketing</a></li>
                            <li><i class="bx bx-chevron-right"></i> <a href="#">Graphic Design</a></li>
                        </ul>
                    </div>

                    <div class="col-lg-4 col-md-6 footer-newsletter">
                        <h4>Our Newsletter</h4>
                        <p>Tamen quem nulla quae legam multos aute sint culpa legam noster magna</p>
                        <form action="" method="post">
                            <input type="email" name="email"><input type="submit" value="Subscribe">
                        </form>

                    </div>

                </div>
            </div>
        </div>

        <div class="container">
            <div class="copyright">
                &copy; Copyright <strong><span>Gp</span></strong>. All Rights Reserved
            </div>
            <div class="credits">
                <!-- All the links in the footer should remain intact. -->
                <!-- You can delete the links only if you purchased the pro version. -->
                <!-- Licensing information: https://bootstrapmade.com/license/ -->
                <!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/gp-free-multipurpose-html-bootstrap-template/ -->
                Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a>
            </div>
        </div>
    </footer><!-- End Footer -->

    <div id="preloader"></div>
    <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i
            class="bi bi-arrow-up-short"></i></a>

<!-- Vendor JS Files -->
<script th:src="@{/user-homepage-assets/assets/vendor/purecounter/purecounter_vanilla.js}"></script>
<script th:src="@{/user-homepage-assets/assets/vendor/aos/aos.js}"></script>
<script th:src="@{/user-homepage-assets/assets/vendor/bootstrap/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/user-homepage-assets/assets/vendor/glightbox/js/glightbox.min.js}"></script>
<script th:src="@{/user-homepage-assets/assets/vendor/isotope-layout/isotope.pkgd.min.js}"></script>
<script th:src="@{/user-homepage-assets/assets/vendor/swiper/swiper-bundle.min.js}"></script>
<script th:src="@{/user-homepage-assets/assets/vendor/php-email-form/validate.js}"></script>

<!-- Template Main JS File -->
<script th:src="@{/user-homepage-assets/assets/js/main.js}"></script>
 <script>
        document.addEventListener("DOMContentLoaded", function () {
            const scrollImages = document.querySelector(".scroll-plans");
            const scrollLength = scrollImages.scrollWidth - scrollImages.clientWidth;
            const leftButton = document.querySelector(".left");
            const rightButton = document.querySelector(".right");

            function checkScroll() {
                const currentScroll = scrollImages.scrollLeft;
                if (currentScroll === 0) {
                    leftButton.setAttribute("disabled", "true");
                    rightButton.removeAttribute("disabled");
                } else if (currentScroll === scrollLength) {
                    rightButton.setAttribute("disabled", "true");
                    leftButton.removeAttribute("disabled");
                } else {
                    leftButton.removeAttribute("disabled");
                    rightButton.removeAttribute("disabled");
                }
            }

            scrollImages.addEventListener("scroll", checkScroll);
            window.addEventListener("resize", checkScroll);
            checkScroll();

            function leftScroll() {
                scrollImages.scrollBy({
                    left: -500,
                    behavior: "smooth"
                });
            }

            function rightScroll() {
                scrollImages.scrollBy({
                    left: 500,
                    behavior: "smooth"
                });
            }

            leftButton.addEventListener("click", leftScroll);
            rightButton.addEventListener("click", rightScroll);
        });
    </script>

</body>

</html>