62 lines
1.9 KiB
HTML
62 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="it">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Carrello Ordini</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
|
|
<body>
|
|
<!-- Sezione Login -->
|
|
<div id="login-section">
|
|
<h2>Login</h2>
|
|
<form id="login-form">
|
|
<label for="user-id">ID Utente:</label>
|
|
<input type="text" id="user-id" name="user-id" required>
|
|
<button type="submit">Accedi</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Sezione per scegliere il metodo di pagamento -->
|
|
<div id="payment-method-section" style="display: none;">
|
|
<h3>Seleziona metodo di pagamento:</h3>
|
|
<label class="payment-option">
|
|
<input type="radio" name="payment-method" value="Cash" checked>
|
|
<span class="radio-custom"></span>
|
|
<div class="payment-text">Cash</div>
|
|
</label>
|
|
<label class="payment-option">
|
|
<input type="radio" name="payment-method" value="PayPal">
|
|
<span class="radio-custom"></span>
|
|
<div class="payment-text">PayPal</div>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Sezione Carrello (visibile dopo il login) -->
|
|
<div id="order-section" style="display:none;">
|
|
<h2>Prodotti Disponibili</h2>
|
|
<div id="product-list"></div>
|
|
|
|
<h3>Carrello</h3>
|
|
<div id="order-items"></div>
|
|
<p>Totale: \u20ac <span id="total-price">0</span></p>
|
|
|
|
<button id="show-summary-btn">Mostra Riepilogo</button>
|
|
</div>
|
|
|
|
<!-- Riepilogo Ordine -->
|
|
<div id="order-summary" style="display:none;">
|
|
<h2>Riepilogo Ordine</h2>
|
|
<p><strong>Metodo di pagamento:</strong> <span id="summary-payment-method"></span></p>
|
|
<p><strong>Totale:</strong> <span id="summary-total-price"></span> EUR</p>
|
|
<ul id="summary-products"></ul>
|
|
<button id="confirm-order-btn">Conferma Ordine</button>
|
|
<button id="cancel-order-btn">Annulla</button>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
|
|
</html>
|