114 lines
5.1 KiB
HTML
114 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html data-bs-theme="light" lang="en" style="width: 100%;height: 100%;">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
|
<title>Untitled</title>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
|
|
|
|
<style>
|
|
body {
|
|
background-color: #222831;
|
|
}
|
|
|
|
#search:active{
|
|
border: none;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body style="height: 100%;width: 100%;">
|
|
<nav class="navbar navbar-expand-md sticky-top bg-body border-bottom">
|
|
<div class="container">
|
|
<a class="navbar-brand fw-bold" href="#">Photo Gallery</a>
|
|
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navMain">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="collapse navbar-collapse" id="navMain">
|
|
<ul class="navbar-nav ms-auto align-items-md-center gap-md-2">
|
|
<li class="nav-item">
|
|
<div>
|
|
<i class="bi bi-search"></i>
|
|
<input style="border: none;" type="search" name="search" id="search" placeholder="Search Photos...">
|
|
</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<button class="btn btn-outline-dark dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
|
|
Dropdown
|
|
</button>
|
|
<ul class="dropdown-menu dropdown-menu-dark">
|
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<div class="container ps-0 pe-0">
|
|
<div class="carousel slide" data-bs-ride="carousel" data-bs-interval="2500" data-bs-pause="false"
|
|
id="carousel-1">
|
|
<div class="carousel-inner">
|
|
<div th:each="carouselImage, iterStat : ${carouselImages}" class="carousel-item"
|
|
th:classappend="${iterStat.first} ? active : ''">
|
|
<img class="object-fit-cover w-100 d-block" alt="Slide Image" th:src="@{${carouselImage.filePath}}"
|
|
height="500" loading="eager" width="1080">
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<a class="carousel-control-prev" href="#carousel-1" role="button" data-bs-slide="prev"><span
|
|
class="carousel-control-prev-icon"></span>
|
|
<span class="visually-hidden">Previous</span>
|
|
</a>
|
|
<a class="carousel-control-next" href="#carousel-1" role="button" data-bs-slide="next">
|
|
<span class="carousel-control-next-icon"></span>
|
|
<span class="visually-hidden">Next</span>
|
|
</a>
|
|
</div>
|
|
<div class="carousel-indicators">
|
|
<button th:each="carouselImage,iterStat : ${carouselImages}" th:class="${iterStat.first} ? active : ''"
|
|
type="button" data-bs-target="#carousel-1"
|
|
th:attr="data-bs-slide-to=${iterStat.count - 1}"></button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<section class="pt-5 pb-0 my-0 py-xl-5" style="padding: 0;">
|
|
|
|
<div class="container">
|
|
<div id="image-row" class="row gx-1 gy-1 row-cols-1 row-cols-md-2 row-cols-xl-5 mt-0"
|
|
data-bss-baguettebox="">
|
|
|
|
<div th:fragment="images" class="col" th:each="image : ${images}">
|
|
<span th:text="${images.number}"></span>
|
|
<a th:href="@{${image.filePath}}">
|
|
<img class="bg-black img-fluid aspect-ratio-4x3 object-fit-cover w-100 h-100"
|
|
style="padding: 1px;"
|
|
alt="Replace with image description" th:src="@{${image.thumbnailPath}}"
|
|
loading="lazy">
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
style="height: 1px;"
|
|
hx-get="/loadMoreImages"
|
|
hx-trigger="intersect"
|
|
hx-target="#image-row"
|
|
hx-swap="beforeend">
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
</div>
|
|
</div>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="https://unpkg.com/htmx.org@1.9.12"></script>
|
|
</body>
|
|
|
|
</html> |