web/views/pages/products.ejs
2021-11-19 10:45:28 +07:00

74 lines
No EOL
2.6 KiB
Text
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<html lang="en">
<%- include('../layouts/header.ejs', {title: 'Products', state: 'products'}); %>
<body class="bg-color">
<%- include('../layouts/navbar.ejs', {types: 'v1', state: 'products'}); %>
<div class="container mt-4">
<div class="row">
<div class="col">
<p class="text-white">Type</p>
</div>
<div class="col">
<p class="text-white">Gender</p>
</div>
<div class="col">
<p class="text-white">Color</p>
</div>
<div class="col col-md-auto">
<p></p>
</div>
</div>
<div class="row">
<div class="col">
<select class="form-control">
<option>All</option>
<option>NMD</option>
<option>Galaxy</option>
</select>
</div>
<div class="col">
<select class="form-control">
<option>All</option>
<option>Men</option>
<option>Women</option>
</select>
</div>
<div class="col">
<select class="form-control">
<option>All</option>
<option>Black</option>
<option>White</option>
<option>Blue</option>
</select>
</div>
<div class="col col-md-auto">
<button class="btn btn-primary btn-product-card" type="button">Filter</button>
</div>
</div>
</div>
<div class="container-fluid mt-3">
<div class="row justify-content-around">
<% for(let i=0; i < data.length; i++) { %>
<div class="col-lg-3 col-md-6 p-3">
<div class="card">
<img alt="Item Image" class="img-fluid lazyload product-image" src="./img/<%= data[i].IMAGE %>">
<div class="card-body">
<h5 class="card-title"><%= data[i].TITLE %></h5>
<p class="card-text"><%= data[i].DESCRIPTION.substring(0, 150) + "..." %></p>
<a href="product/<%= data[i].ID %>">
<button class="btn btn-info btn-product-card" type="button">View Detail</button>
</a>
</div>
</div>
</div>
<% } %>
</div>
</div>
<%- include('../layouts/footer.ejs', {state: 'products'}); %>
</body>
</html>