Java-BookShop/src/main/resources/templates/index.html at master · artingo/Java-BookShop · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html lang="en">
<head>
	<title>Overview</title>
	<meta name="keywords" content="">
	<meta name="description" content="">
	{{> partials/htmlHead }}
	<script>
	function triggerSorting(element) {
		const searchParams = new URLSearchParams(location.search)
		searchParams.set('sort', element.value)
		searchParams.set('page', "1")
		location.search = searchParams.toString()
	}
	</script>
</head>
<body>
{{> partials/header }}

<section class="hero-section position-relative padding-small"
				 style="background-image: url(/images/banner-image-bg-1.jpg); background-size: cover; background-repeat: no-repeat; background-position: center;">
	<div class="hero-content">
		<div class="container">
			<div class="row">
				<div class="text-center">
					<h1>Shop</h1>
					<div class="breadcrumbs">
						<span class="item">
							<a href="index.html">Home</a>
						</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

<div class="shopify-grid padding-small">
	<div class="container">
		<div class="row flex-row-reverse g-md-5">
			<main class="col-md-12">
				{{#showMessage}}
					<div class="alert alert-success alert-dismissible fade show" role="alert">
						{{message}}
						<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
					</div>
				{{/showMessage}}

				<div class="filter-shop d-flex flex-wrap justify-content-between mb-5">
					<div class="showing-product">
						<p>Showing {{from}}-{{to}} of {{numOfArticles}} results</p>
					</div>
					<div class="sort-by">
						{{> partials/sorting }}
					</div>
				</div>

				<div class="product-content product-store row row-cols-lg-5 row-cols-md-3 row-cols-sm-2 row-cols-1">
					{{#articles}}
						<div class="col">
							<div class="card position-relative p-4 border rounded-3">
								<img src="{{image}}" class="card-img shadow-sm" alt="product item">
								<h6 class="mt-4 mb-0 fw-bold">
									<a href="details.html?id={{articleNo}}">{{title}}</a>
								</h6>
								<div class="review-content d-flex">
									<p class="my-2 me-2 fs-6 text-black-50">{{author}}</p>
								</div>
								<span class="price mb-2 text-primary">{{price}}$</span>
								<div class="card-concern position-absolute start-0 end-0 d-flex gap-2">
									<a href="/cart/add/{{articleNo}}" role="button" class="btn btn-dark"
										 data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">
										<svg class="cart">
											<use xlink:href="#cart"></use>
										</svg>
									</a>
								</div>
							</div>
						</div>
					{{/articles}}
				</div>

				{{> partials/pagination }}
			</main>
		</div>
	</div>
</div>

{{> partials/footer }}

</body>
</html>