forked from marcoscaceres/web-payments-proto
-
Notifications
You must be signed in to change notification settings - Fork 0
/
headphone.html
56 lines (54 loc) · 1.69 KB
/
headphone.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!doctype html>
<meta charset="utf-8">
<script src="build/bundle.js"></script>
<link rel="stylesheet" href="css/payment-sheet.css">
<link rel="stylesheet" href="css/headphone.css">
<title>Headphones.com</title>
<body>
<div id="shop">
<header>
<h1>Headphones</h1>
<nav>
<ul>
<li><a href="#">Headphones</a></li>
<li><a href="#">Speakers</a></li>
<li><a href="#">Better with headphone.com</a></li>
<li><a href="#">Local shop</a></li>
<li><a href="#">Support</a></li>
</ul>
</nav>
</header>
<main>
<section id="inventory-table" class="main-stuff">
<h1>Cart Items</h1>
<!-- dynamically filled -->
</section>
<aside id="order-summary" class="main-stuff">
<!-- dynamically filled -->
</aside>
<section id="payment-complete" hidden>
<h1>Thank you for your order</h1>
<p>Your order number is: 00482156131</p>
<ul>
<li><a href="#">View receipt</a></li>
<li><a href="#">Print receipt</a></li>
<li><a href="#">Keep shopping</a></li>
</ul>
</section>
</main>
</div>
<p style="position: absolute; bottom: 0px">
<small>Please use credit card number: 4111 1111 1111 1111 or 3782 8224 6310 005 or 3852 0000 0232 37 (<button id="killswitch">clear db</button>)</small>
</p>
<script>
document.querySelector("#killswitch").addEventListener("click", async () => {
try {
await db.delete();
console.log("Database successfully deleted");
} catch (err) {
console.error("Could not delete database");
} finally {
window.location.reload();
}
})
</script>