mirror of
https://github.com/DerTyp7/shop-ejs-expressjs.git
synced 2025-10-31 21:37:09 +01:00
103 lines
3.5 KiB
Plaintext
103 lines
3.5 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en" style="">
|
|
<head>
|
|
<%- include('partials/head'); %>
|
|
</head>
|
|
<body style="">
|
|
<%- include('partials/header'); %>
|
|
<style>
|
|
html {
|
|
height: 100%;
|
|
overflow-x: auto;
|
|
overflow-y: scroll;
|
|
margin: 0;
|
|
background-color: white;
|
|
}
|
|
body {
|
|
min-height: 100%;
|
|
}
|
|
.grid-container {
|
|
display: flex;
|
|
gap: 20px;
|
|
margin: 0 auto;
|
|
grid-template-columns: auto auto auto auto;
|
|
padding: 20px;
|
|
}
|
|
.grid-item {
|
|
background-color: white;
|
|
border: 10px;
|
|
border-color: rgba(111,111,111,0.2) transparent transparent;
|
|
padding: 20px;
|
|
font-size: 20px;
|
|
height: 320px;
|
|
width: 280px;
|
|
text-align: left;
|
|
|
|
}
|
|
|
|
.grid-item p{
|
|
display:block;
|
|
height: 50px;
|
|
}
|
|
.middle-content {
|
|
background: linear-gradient(to bottom left, #313c48, white);
|
|
background-repeat: no-repeat;
|
|
width: 80%;
|
|
margin: auto;
|
|
margin-top: 50px;
|
|
}
|
|
</style>
|
|
<div class="middle-content">
|
|
<div id="headlineTop">
|
|
<h2 style="padding-left:20px; padding-top:50px">Top Angebote</h2>
|
|
</div>
|
|
<div class="grid-container" >
|
|
<% for (let i=0; i < products.length && i <=4; i++){ %>
|
|
<div class="grid-item">
|
|
<p><%= products[i].name %></p>
|
|
|
|
<img src="https://m.media-amazon.com/images/I/815eDw--FQS._AC_SL1500_.jpg" style='height: 100%; width: 100%; object-fit: contain' onclick="window.open('/product/<%- products[i].id%>','_self')">
|
|
</div>
|
|
<%}%>
|
|
</div>
|
|
<div id="headlineTop">
|
|
<h2 style="padding-left:20px;">Unsere Empfehlungen für Sie</h2>
|
|
</div>
|
|
<div class="grid-container">
|
|
<div class="grid-item">
|
|
<% let randomNr = Math.floor(Math.random() * products.length); %>
|
|
<%= products[randomNr].name %>
|
|
<img src="https://m.media-amazon.com/images/I/815eDw--FQS._AC_SL1500_.jpg" style='height: 100%; width: 100%; object-fit: contain' onclick="window.open('/product/<%- products[randomNr].id%>','_self')">
|
|
</div>
|
|
<div class="grid-item">
|
|
<% let randomNr2 = Math.floor(Math.random() * products.length); %>
|
|
<%= products[randomNr2].name %>
|
|
<img src="https://m.media-amazon.com/images/I/815eDw--FQS._AC_SL1500_.jpg" style='height: 100%; width: 100%; object-fit: contain' onclick="window.open('/product/"<%- products[randomNr2].id%>','_self')">
|
|
|
|
</div>
|
|
<div class="grid-item">
|
|
<% let randomNr3 = Math.floor(Math.random() * products.length); %>
|
|
<%= products[randomNr3].name %>
|
|
<img src="https://m.media-amazon.com/images/I/815eDw--FQS._AC_SL1500_.jpg" style='height: 100%; width: 100%; object-fit: contain' onclick="window.open('/product/"<%- products[randomNr3].id%>','_self')">
|
|
|
|
</div>
|
|
<div class="grid-item">
|
|
<% let randomNr4 = Math.floor(Math.random() * products.length); %>
|
|
<%= products[randomNr4].name %>
|
|
<img src="https://m.media-amazon.com/images/I/815eDw--FQS._AC_SL1500_.jpg" style='height: 100%; width: 100%; object-fit: contain' onclick="window.open('/product/"<%- products[randomNr4].id%>','_self')">
|
|
|
|
</div>
|
|
</div>
|
|
<div class="grid-container" style="margin-bottom: 100px;">
|
|
<% for (let i=0; i < products.length && i <=4; i++){ %>
|
|
<div class="grid-item">
|
|
<%= products[i].name %>
|
|
<img src="https://m.media-amazon.com/images/I/815eDw--FQS._AC_SL1500_.jpg" style='height: 100%; width: 100%; object-fit: contain' onclick="window.open('/product/<%- products[i].id%>','_self')">
|
|
|
|
</div>
|
|
<%}%>
|
|
</div>
|
|
</div>
|
|
<%- include('partials/footer'); %>
|
|
</body>
|
|
</html> |