<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Jimmy's Diner</title>
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Smythe&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,
GRAD@48,400,0,0"
/>
</head>
<body>
<div class="container">
<header>
<h1>Jimmy's Diner</h1>
<h2 class="sub-heading">The best burgers and pizzas in town.</h2>
</header>
<main>
<section>
<div id="menu-items">
<!-- display menu items here -->
</div>
<div id="order-summary">
<h2>Your order</h2>
<div id="order-items">
<!-- display order items here -->
</div>
<div class="total" id="total">
<div>Total price:</div>
<div class="total-amount" id="total-amount">
<!-- total summed in js -->
</div>
</div>
<button class="place-order" id="place-order">Complete Order</button>
</div>
<div id="thanks" class="thanks">
<!-- display the thank you message -->
</div>
</section>
</main>
<!-- payment modal -->
<dialog>
<h3>Enter card details</h3>
<form id="payment-form" method="dialog">
<label for="name">Name:*</label>
<input type="text" id="name" name="name" required />
<br />
<label for="card-number">Credit Card Number:*</label>
<input type="text" id="card-number" name="card-number" required />
<br />
<label for="cvv">CVV:*</label>
<input type="text" id="cvv" name="cvv" required />
<br />
<button id="pay" type="submit">Pay</button>
</form>
</dialog>
</div>
<script src="index.js" type="module"></script>
</body>
</html>
