76 lines
2.4 KiB
HTML
76 lines
2.4 KiB
HTML
<html>
|
|
<head>
|
|
<!-- <link rel="stylesheet" type="text/css" href="main.css" /> -->
|
|
<style>
|
|
|
|
.container {
|
|
display: grid;
|
|
grid-template-columns: auto auto auto;
|
|
padding: 10px;
|
|
}
|
|
.grid-item {
|
|
/* background-color: rgba(255, 255, 255, 0.8); */
|
|
border: 1px solid #ff8d1a;
|
|
padding: 20px;
|
|
/* font-size: 30px; */
|
|
text-align: center;
|
|
/* grid-column-start: 1;
|
|
grid-column-end: 3; */
|
|
}
|
|
|
|
</style>
|
|
|
|
<body style="background-color: black; color: white">
|
|
<h1 style='text-align: center; color: #ff8d1a'>{{ nrist }} </h1>
|
|
|
|
<!-- <form id="usernameForm">
|
|
<input type="text" id="prodottiAggiunti" placeholder="Enter your username" />
|
|
<button type="button" onclick="addUser()">Add User</button>
|
|
</form> -->
|
|
</head>
|
|
<br><br>
|
|
|
|
<div class="container">
|
|
{% for index in range(nome|length) %}
|
|
<div class="grid-item">
|
|
<h2 style='text-align: center;'>{{ nome[index] }}</h2>
|
|
|
|
<div class="spazio">
|
|
<p style='text-align: center;'>{{ desc[index] }}</p>
|
|
</div>
|
|
|
|
<p style='text-align: center;'>Npezzi: {{ npezzi[index] }}</p>
|
|
<p style='text-align: center;'>{{ prezzoN[index] }}€</p>
|
|
<div style='text-align: center;'><button style='font-size: 1.2em;' onclick="aggiungiProdotto('{{ nome[index] }}', '{{ prezzoN[index] }}')">+1</button></div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<br><hr><h2>Prodotti aggiunti</h2>
|
|
<div id="prodottiAggiunti"></div>
|
|
<div id="total">Total: €<span id="totalValue">0.00</span></div>
|
|
|
|
<script>
|
|
var totalValue = 0;
|
|
function aggiungiProdotto(nome, prezzoN) {
|
|
var prodotto = nome + ' (' + Number(prezzoN).toFixed(2) + '€)';
|
|
var box = document.getElementById('prodottiAggiunti');
|
|
box.innerHTML += '<p>' + prodotto + ' <button onclick="rimuoviProdotto(this, ' + prezzoN + ')">-1</button></p>';
|
|
totalValue += parseFloat(prezzoN);
|
|
updateTotal();
|
|
}
|
|
|
|
function updateTotal() {
|
|
document.getElementById('totalValue').innerText = totalValue.toFixed(2);
|
|
}
|
|
|
|
function rimuoviProdotto(element, prezzoN) {
|
|
totalValue -= parseFloat(prezzoN);
|
|
element.parentNode.remove();
|
|
updateTotal();
|
|
}
|
|
</script>
|
|
|
|
|
|
</body>
|
|
</html> |