@junixlabs/uxcli 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +81 -0
- package/VISION.md +71 -0
- package/bin/uxcli.js +31 -0
- package/examples/sylius-guest-checkout.json +11 -0
- package/package.json +16 -0
- package/src/browser.js +103 -0
- package/src/card.js +27 -0
- package/src/gate.js +33 -0
- package/src/journey.js +13 -0
- package/src/probes/consistent-navigation/must-fail/review.html +76 -0
- package/src/probes/consistent-navigation/pair.json +23 -0
- package/src/probes/consistent-navigation/probe.js +40 -0
- package/src/probes/consistent-navigation/spec.md +24 -0
- package/src/probes/error-prevention/must-fail/review.html +67 -0
- package/src/probes/error-prevention/pair.json +23 -0
- package/src/probes/error-prevention/probe.js +90 -0
- package/src/probes/error-prevention/spec.md +35 -0
- package/src/probes/redundant-entry/must-fail/review.html +78 -0
- package/src/probes/redundant-entry/pair.json +23 -0
- package/src/probes/redundant-entry/probe.js +59 -0
- package/src/probes/redundant-entry/spec.md +37 -0
- package/src/refute.js +23 -0
- package/src/run.js +58 -0
- package/src/util.js +6 -0
- package/test/fixtures/checkout/account.html +36 -0
- package/test/fixtures/checkout/cart.html +46 -0
- package/test/fixtures/checkout/contact.html +36 -0
- package/test/fixtures/checkout/details.html +77 -0
- package/test/fixtures/checkout/done.html +46 -0
- package/test/fixtures/checkout/help.html +36 -0
- package/test/fixtures/checkout/home.html +36 -0
- package/test/fixtures/checkout/privacy.html +36 -0
- package/test/fixtures/checkout/review.html +76 -0
- package/test/fixtures/checkout/shop.html +36 -0
- package/test/fixtures/checkout/style.css +28 -0
- package/test/fixtures/checkout/terms.html +36 -0
- package/test/journeys/checkout.json +10 -0
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
|
+
<title>Contact us – Fixture Shop</title>
|
|
7
|
+
<link rel="stylesheet" href="style.css">
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<header>
|
|
11
|
+
<div class="wrap">
|
|
12
|
+
<a class="brand" href="home.html">Fixture Shop</a>
|
|
13
|
+
<nav aria-label="Main">
|
|
14
|
+
<ul>
|
|
15
|
+
<li><a href="home.html">Home</a></li>
|
|
16
|
+
<li><a href="shop.html">Shop</a></li>
|
|
17
|
+
<li><a href="cart.html">Cart <span class="badge">2<span class="sr"> items</span></span></a></li>
|
|
18
|
+
<li><a href="account.html">Account</a></li>
|
|
19
|
+
<li><a href="help.html">Help</a></li>
|
|
20
|
+
</ul>
|
|
21
|
+
</nav>
|
|
22
|
+
</div>
|
|
23
|
+
</header>
|
|
24
|
+
<main class="wrap">
|
|
25
|
+
<h1>Contact us</h1>
|
|
26
|
+
<p>Contact page placeholder.</p>
|
|
27
|
+
</main>
|
|
28
|
+
<footer>
|
|
29
|
+
<div class="wrap">
|
|
30
|
+
<a href="privacy.html">Privacy</a>
|
|
31
|
+
<a href="terms.html">Terms</a>
|
|
32
|
+
<a href="contact.html">Contact</a>
|
|
33
|
+
</div>
|
|
34
|
+
</footer>
|
|
35
|
+
</body>
|
|
36
|
+
</html>
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
|
+
<title>Your details – Fixture Shop</title>
|
|
7
|
+
<link rel="stylesheet" href="style.css">
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<header>
|
|
11
|
+
<div class="wrap">
|
|
12
|
+
<a class="brand" href="home.html">Fixture Shop</a>
|
|
13
|
+
<nav aria-label="Main">
|
|
14
|
+
<ul>
|
|
15
|
+
<li><a href="home.html">Home</a></li>
|
|
16
|
+
<li><a href="shop.html">Shop</a></li>
|
|
17
|
+
<li><a href="cart.html">Cart <span class="badge">2<span class="sr"> items</span></span></a></li>
|
|
18
|
+
<li><a href="account.html">Account</a></li>
|
|
19
|
+
<li><a href="help.html">Help</a></li>
|
|
20
|
+
</ul>
|
|
21
|
+
</nav>
|
|
22
|
+
</div>
|
|
23
|
+
</header>
|
|
24
|
+
<main class="wrap">
|
|
25
|
+
<h1>Your details</h1>
|
|
26
|
+
<form id="details-form" action="review.html" method="get" novalidate>
|
|
27
|
+
<label for="name">Full name</label>
|
|
28
|
+
<input id="name" name="name" type="text" autocomplete="name">
|
|
29
|
+
|
|
30
|
+
<label for="email">Email address</label>
|
|
31
|
+
<input id="email" name="email" type="email" autocomplete="email">
|
|
32
|
+
|
|
33
|
+
<label for="address">Street address</label>
|
|
34
|
+
<input id="address" name="address" type="text" autocomplete="street-address">
|
|
35
|
+
|
|
36
|
+
<label for="postcode">Postcode</label>
|
|
37
|
+
<input id="postcode" name="postcode" type="text" autocomplete="postal-code">
|
|
38
|
+
|
|
39
|
+
<label for="country">Country</label>
|
|
40
|
+
<select id="country" name="country" autocomplete="country-name">
|
|
41
|
+
<option value="">Choose a country</option>
|
|
42
|
+
<option>United Kingdom</option>
|
|
43
|
+
<option>Ireland</option>
|
|
44
|
+
<option>France</option>
|
|
45
|
+
<option>Germany</option>
|
|
46
|
+
</select>
|
|
47
|
+
|
|
48
|
+
<button type="submit">Continue</button>
|
|
49
|
+
</form>
|
|
50
|
+
<script>
|
|
51
|
+
(function () {
|
|
52
|
+
var form = document.getElementById('details-form');
|
|
53
|
+
var fields = ['name', 'email', 'address', 'postcode', 'country'];
|
|
54
|
+
var saved = {};
|
|
55
|
+
try { saved = JSON.parse(sessionStorage.getItem('checkout') || '{}'); } catch (e) {}
|
|
56
|
+
fields.forEach(function (f) {
|
|
57
|
+
if (saved[f]) { document.getElementById(f).value = saved[f]; }
|
|
58
|
+
});
|
|
59
|
+
form.addEventListener('submit', function (ev) {
|
|
60
|
+
ev.preventDefault();
|
|
61
|
+
var data = {};
|
|
62
|
+
fields.forEach(function (f) { data[f] = document.getElementById(f).value; });
|
|
63
|
+
sessionStorage.setItem('checkout', JSON.stringify(data));
|
|
64
|
+
location.href = 'review.html';
|
|
65
|
+
});
|
|
66
|
+
})();
|
|
67
|
+
</script>
|
|
68
|
+
</main>
|
|
69
|
+
<footer>
|
|
70
|
+
<div class="wrap">
|
|
71
|
+
<a href="privacy.html">Privacy</a>
|
|
72
|
+
<a href="terms.html">Terms</a>
|
|
73
|
+
<a href="contact.html">Contact</a>
|
|
74
|
+
</div>
|
|
75
|
+
</footer>
|
|
76
|
+
</body>
|
|
77
|
+
</html>
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
|
+
<title>Order placed – Fixture Shop</title>
|
|
7
|
+
<link rel="stylesheet" href="style.css">
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<header>
|
|
11
|
+
<div class="wrap">
|
|
12
|
+
<a class="brand" href="home.html">Fixture Shop</a>
|
|
13
|
+
<nav aria-label="Main">
|
|
14
|
+
<ul>
|
|
15
|
+
<li><a href="home.html">Home</a></li>
|
|
16
|
+
<li><a href="shop.html">Shop</a></li>
|
|
17
|
+
<li><a href="cart.html">Cart <span class="badge">2<span class="sr"> items</span></span></a></li>
|
|
18
|
+
<li><a href="account.html">Account</a></li>
|
|
19
|
+
<li><a href="help.html">Help</a></li>
|
|
20
|
+
</ul>
|
|
21
|
+
</nav>
|
|
22
|
+
</div>
|
|
23
|
+
</header>
|
|
24
|
+
<main class="wrap">
|
|
25
|
+
<h1>Order placed</h1>
|
|
26
|
+
<p>Thank you, <span id="out-name"></span>. Your order number is <strong>FS-10042</strong>.</p>
|
|
27
|
+
<p>We have sent a receipt to <span id="out-email"></span>.</p>
|
|
28
|
+
<a class="btn" href="cart.html">Back to shop</a>
|
|
29
|
+
<script>
|
|
30
|
+
(function () {
|
|
31
|
+
var saved = {};
|
|
32
|
+
try { saved = JSON.parse(sessionStorage.getItem('checkout') || '{}'); } catch (e) {}
|
|
33
|
+
document.getElementById('out-name').textContent = saved.name || '';
|
|
34
|
+
document.getElementById('out-email').textContent = saved.email || '';
|
|
35
|
+
})();
|
|
36
|
+
</script>
|
|
37
|
+
</main>
|
|
38
|
+
<footer>
|
|
39
|
+
<div class="wrap">
|
|
40
|
+
<a href="privacy.html">Privacy</a>
|
|
41
|
+
<a href="terms.html">Terms</a>
|
|
42
|
+
<a href="contact.html">Contact</a>
|
|
43
|
+
</div>
|
|
44
|
+
</footer>
|
|
45
|
+
</body>
|
|
46
|
+
</html>
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
|
+
<title>Help – Fixture Shop</title>
|
|
7
|
+
<link rel="stylesheet" href="style.css">
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<header>
|
|
11
|
+
<div class="wrap">
|
|
12
|
+
<a class="brand" href="home.html">Fixture Shop</a>
|
|
13
|
+
<nav aria-label="Main">
|
|
14
|
+
<ul>
|
|
15
|
+
<li><a href="home.html">Home</a></li>
|
|
16
|
+
<li><a href="shop.html">Shop</a></li>
|
|
17
|
+
<li><a href="cart.html">Cart <span class="badge">2<span class="sr"> items</span></span></a></li>
|
|
18
|
+
<li><a href="account.html">Account</a></li>
|
|
19
|
+
<li><a href="help.html">Help</a></li>
|
|
20
|
+
</ul>
|
|
21
|
+
</nav>
|
|
22
|
+
</div>
|
|
23
|
+
</header>
|
|
24
|
+
<main class="wrap">
|
|
25
|
+
<h1>Help</h1>
|
|
26
|
+
<p>Help centre placeholder.</p>
|
|
27
|
+
</main>
|
|
28
|
+
<footer>
|
|
29
|
+
<div class="wrap">
|
|
30
|
+
<a href="privacy.html">Privacy</a>
|
|
31
|
+
<a href="terms.html">Terms</a>
|
|
32
|
+
<a href="contact.html">Contact</a>
|
|
33
|
+
</div>
|
|
34
|
+
</footer>
|
|
35
|
+
</body>
|
|
36
|
+
</html>
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
|
+
<title>Home – Fixture Shop</title>
|
|
7
|
+
<link rel="stylesheet" href="style.css">
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<header>
|
|
11
|
+
<div class="wrap">
|
|
12
|
+
<a class="brand" href="home.html">Fixture Shop</a>
|
|
13
|
+
<nav aria-label="Main">
|
|
14
|
+
<ul>
|
|
15
|
+
<li><a href="home.html">Home</a></li>
|
|
16
|
+
<li><a href="shop.html">Shop</a></li>
|
|
17
|
+
<li><a href="cart.html">Cart <span class="badge">2<span class="sr"> items</span></span></a></li>
|
|
18
|
+
<li><a href="account.html">Account</a></li>
|
|
19
|
+
<li><a href="help.html">Help</a></li>
|
|
20
|
+
</ul>
|
|
21
|
+
</nav>
|
|
22
|
+
</div>
|
|
23
|
+
</header>
|
|
24
|
+
<main class="wrap">
|
|
25
|
+
<h1>Home</h1>
|
|
26
|
+
<p>Welcome to Fixture Shop. <a href="cart.html">Go to your cart</a>.</p>
|
|
27
|
+
</main>
|
|
28
|
+
<footer>
|
|
29
|
+
<div class="wrap">
|
|
30
|
+
<a href="privacy.html">Privacy</a>
|
|
31
|
+
<a href="terms.html">Terms</a>
|
|
32
|
+
<a href="contact.html">Contact</a>
|
|
33
|
+
</div>
|
|
34
|
+
</footer>
|
|
35
|
+
</body>
|
|
36
|
+
</html>
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
|
+
<title>Privacy policy – Fixture Shop</title>
|
|
7
|
+
<link rel="stylesheet" href="style.css">
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<header>
|
|
11
|
+
<div class="wrap">
|
|
12
|
+
<a class="brand" href="home.html">Fixture Shop</a>
|
|
13
|
+
<nav aria-label="Main">
|
|
14
|
+
<ul>
|
|
15
|
+
<li><a href="home.html">Home</a></li>
|
|
16
|
+
<li><a href="shop.html">Shop</a></li>
|
|
17
|
+
<li><a href="cart.html">Cart <span class="badge">2<span class="sr"> items</span></span></a></li>
|
|
18
|
+
<li><a href="account.html">Account</a></li>
|
|
19
|
+
<li><a href="help.html">Help</a></li>
|
|
20
|
+
</ul>
|
|
21
|
+
</nav>
|
|
22
|
+
</div>
|
|
23
|
+
</header>
|
|
24
|
+
<main class="wrap">
|
|
25
|
+
<h1>Privacy policy</h1>
|
|
26
|
+
<p>Privacy policy placeholder.</p>
|
|
27
|
+
</main>
|
|
28
|
+
<footer>
|
|
29
|
+
<div class="wrap">
|
|
30
|
+
<a href="privacy.html">Privacy</a>
|
|
31
|
+
<a href="terms.html">Terms</a>
|
|
32
|
+
<a href="contact.html">Contact</a>
|
|
33
|
+
</div>
|
|
34
|
+
</footer>
|
|
35
|
+
</body>
|
|
36
|
+
</html>
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
|
+
<title>Review your order – Fixture Shop</title>
|
|
7
|
+
<link rel="stylesheet" href="style.css">
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<header>
|
|
11
|
+
<div class="wrap">
|
|
12
|
+
<a class="brand" href="home.html">Fixture Shop</a>
|
|
13
|
+
<nav aria-label="Main">
|
|
14
|
+
<ul>
|
|
15
|
+
<li><a href="home.html">Home</a></li>
|
|
16
|
+
<li><a href="shop.html">Shop</a></li>
|
|
17
|
+
<li><a href="cart.html">Cart <span class="badge">2<span class="sr"> items</span></span></a></li>
|
|
18
|
+
<li><a href="account.html">Account</a></li>
|
|
19
|
+
<li><a href="help.html">Help</a></li>
|
|
20
|
+
</ul>
|
|
21
|
+
</nav>
|
|
22
|
+
</div>
|
|
23
|
+
</header>
|
|
24
|
+
<main class="wrap">
|
|
25
|
+
<h1>Review your order</h1>
|
|
26
|
+
<p>Check everything is correct before you place your order.</p>
|
|
27
|
+
|
|
28
|
+
<h2>Items</h2>
|
|
29
|
+
<table>
|
|
30
|
+
<thead>
|
|
31
|
+
<tr><th scope="col">Item</th><th scope="col" class="num">Qty</th><th scope="col" class="num">Price</th></tr>
|
|
32
|
+
</thead>
|
|
33
|
+
<tbody>
|
|
34
|
+
<tr><td>Ceramic mug</td><td class="num">1</td><td class="num">£12.00</td></tr>
|
|
35
|
+
<tr><td>Notebook, A5, dotted</td><td class="num">1</td><td class="num">£8.50</td></tr>
|
|
36
|
+
</tbody>
|
|
37
|
+
</table>
|
|
38
|
+
<p class="total">Total: £20.50</p>
|
|
39
|
+
|
|
40
|
+
<h2>Your details</h2>
|
|
41
|
+
<dl id="summary">
|
|
42
|
+
<div><dt>Full name</dt><dd><span id="out-name"></span><a href="details.html#name">Change<span class="sr"> full name</span></a></dd></div>
|
|
43
|
+
<div><dt>Email address</dt><dd><span id="out-email"></span><a href="details.html#email">Change<span class="sr"> email address</span></a></dd></div>
|
|
44
|
+
<div><dt>Street address</dt><dd><span id="out-address"></span><a href="details.html#address">Change<span class="sr"> street address</span></a></dd></div>
|
|
45
|
+
<div><dt>Postcode</dt><dd><span id="out-postcode"></span><a href="details.html#postcode">Change<span class="sr"> postcode</span></a></dd></div>
|
|
46
|
+
<div><dt>Country</dt><dd><span id="out-country"></span><a href="details.html#country">Change<span class="sr"> country</span></a></dd></div>
|
|
47
|
+
</dl>
|
|
48
|
+
|
|
49
|
+
<form id="order-form" action="done.html" method="get">
|
|
50
|
+
<button type="submit">Place order</button>
|
|
51
|
+
</form>
|
|
52
|
+
<script>
|
|
53
|
+
(function () {
|
|
54
|
+
var fields = ['name', 'email', 'address', 'postcode', 'country'];
|
|
55
|
+
var saved = {};
|
|
56
|
+
try { saved = JSON.parse(sessionStorage.getItem('checkout') || '{}'); } catch (e) {}
|
|
57
|
+
fields.forEach(function (f) {
|
|
58
|
+
document.getElementById('out-' + f).textContent = saved[f] || '';
|
|
59
|
+
});
|
|
60
|
+
document.getElementById('order-form').addEventListener('submit', function (ev) {
|
|
61
|
+
ev.preventDefault();
|
|
62
|
+
sessionStorage.setItem('orderPlaced', '1');
|
|
63
|
+
location.href = 'done.html';
|
|
64
|
+
});
|
|
65
|
+
})();
|
|
66
|
+
</script>
|
|
67
|
+
</main>
|
|
68
|
+
<footer>
|
|
69
|
+
<div class="wrap">
|
|
70
|
+
<a href="privacy.html">Privacy</a>
|
|
71
|
+
<a href="terms.html">Terms</a>
|
|
72
|
+
<a href="contact.html">Contact</a>
|
|
73
|
+
</div>
|
|
74
|
+
</footer>
|
|
75
|
+
</body>
|
|
76
|
+
</html>
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
|
+
<title>Shop – Fixture Shop</title>
|
|
7
|
+
<link rel="stylesheet" href="style.css">
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<header>
|
|
11
|
+
<div class="wrap">
|
|
12
|
+
<a class="brand" href="home.html">Fixture Shop</a>
|
|
13
|
+
<nav aria-label="Main">
|
|
14
|
+
<ul>
|
|
15
|
+
<li><a href="home.html">Home</a></li>
|
|
16
|
+
<li><a href="shop.html">Shop</a></li>
|
|
17
|
+
<li><a href="cart.html">Cart <span class="badge">2<span class="sr"> items</span></span></a></li>
|
|
18
|
+
<li><a href="account.html">Account</a></li>
|
|
19
|
+
<li><a href="help.html">Help</a></li>
|
|
20
|
+
</ul>
|
|
21
|
+
</nav>
|
|
22
|
+
</div>
|
|
23
|
+
</header>
|
|
24
|
+
<main class="wrap">
|
|
25
|
+
<h1>Shop</h1>
|
|
26
|
+
<p>Product listing placeholder.</p>
|
|
27
|
+
</main>
|
|
28
|
+
<footer>
|
|
29
|
+
<div class="wrap">
|
|
30
|
+
<a href="privacy.html">Privacy</a>
|
|
31
|
+
<a href="terms.html">Terms</a>
|
|
32
|
+
<a href="contact.html">Contact</a>
|
|
33
|
+
</div>
|
|
34
|
+
</footer>
|
|
35
|
+
</body>
|
|
36
|
+
</html>
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
*, *::before, *::after { box-sizing: border-box; }
|
|
2
|
+
html { color-scheme: light; }
|
|
3
|
+
body { margin: 0; font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #1a1a1a; background: #ffffff; }
|
|
4
|
+
header, footer { background: #f2f2f2; border-bottom: 1px solid #c8c8c8; }
|
|
5
|
+
footer { border-bottom: 0; border-top: 1px solid #c8c8c8; margin-top: 3rem; }
|
|
6
|
+
.wrap { max-width: 720px; margin: 0 auto; padding: 0.75rem 1rem; }
|
|
7
|
+
header .wrap, footer .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
|
|
8
|
+
.brand { font-weight: 700; margin-right: auto; color: #1a1a1a; text-decoration: none; }
|
|
9
|
+
nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem; }
|
|
10
|
+
nav a, footer a { color: #0b4fa8; }
|
|
11
|
+
.badge { display: inline-block; min-width: 1.4em; padding: 0 0.35em; border-radius: 1em; background: #0b4fa8; color: #ffffff; font-size: 0.8em; text-align: center; }
|
|
12
|
+
main { padding: 1.5rem 1rem; }
|
|
13
|
+
h1 { font-size: 1.6rem; margin: 0 0 1rem; }
|
|
14
|
+
h2 { font-size: 1.15rem; margin: 1.5rem 0 0.5rem; }
|
|
15
|
+
table { border-collapse: collapse; width: 100%; }
|
|
16
|
+
th, td { text-align: left; padding: 0.5rem; border-bottom: 1px solid #c8c8c8; }
|
|
17
|
+
td.num, th.num { text-align: right; }
|
|
18
|
+
label { display: block; font-weight: 600; margin-top: 1rem; }
|
|
19
|
+
input, select { display: block; width: 100%; max-width: 28rem; margin-top: 0.25rem; padding: 0.5rem; font: inherit; border: 1px solid #6b6b6b; border-radius: 4px; background: #ffffff; color: #1a1a1a; }
|
|
20
|
+
input:focus, select:focus, a:focus, button:focus { outline: 3px solid #0b4fa8; outline-offset: 2px; }
|
|
21
|
+
button, .btn { display: inline-block; margin-top: 1.5rem; padding: 0.6rem 1.2rem; font: inherit; font-weight: 600; color: #ffffff; background: #0b4fa8; border: 0; border-radius: 4px; cursor: pointer; text-decoration: none; }
|
|
22
|
+
dl { margin: 0; }
|
|
23
|
+
dl div { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; padding: 0.5rem 0; border-bottom: 1px solid #c8c8c8; }
|
|
24
|
+
dt { font-weight: 600; flex: 0 0 8rem; }
|
|
25
|
+
dd { margin: 0; flex: 1 1 12rem; }
|
|
26
|
+
dd a { color: #0b4fa8; margin-left: 0.5rem; }
|
|
27
|
+
.total { font-weight: 700; font-size: 1.15rem; margin-top: 1rem; }
|
|
28
|
+
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
|
+
<title>Terms and conditions – Fixture Shop</title>
|
|
7
|
+
<link rel="stylesheet" href="style.css">
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<header>
|
|
11
|
+
<div class="wrap">
|
|
12
|
+
<a class="brand" href="home.html">Fixture Shop</a>
|
|
13
|
+
<nav aria-label="Main">
|
|
14
|
+
<ul>
|
|
15
|
+
<li><a href="home.html">Home</a></li>
|
|
16
|
+
<li><a href="shop.html">Shop</a></li>
|
|
17
|
+
<li><a href="cart.html">Cart <span class="badge">2<span class="sr"> items</span></span></a></li>
|
|
18
|
+
<li><a href="account.html">Account</a></li>
|
|
19
|
+
<li><a href="help.html">Help</a></li>
|
|
20
|
+
</ul>
|
|
21
|
+
</nav>
|
|
22
|
+
</div>
|
|
23
|
+
</header>
|
|
24
|
+
<main class="wrap">
|
|
25
|
+
<h1>Terms and conditions</h1>
|
|
26
|
+
<p>Terms placeholder.</p>
|
|
27
|
+
</main>
|
|
28
|
+
<footer>
|
|
29
|
+
<div class="wrap">
|
|
30
|
+
<a href="privacy.html">Privacy</a>
|
|
31
|
+
<a href="terms.html">Terms</a>
|
|
32
|
+
<a href="contact.html">Contact</a>
|
|
33
|
+
</div>
|
|
34
|
+
</footer>
|
|
35
|
+
</body>
|
|
36
|
+
</html>
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "checkout fixture",
|
|
3
|
+
"checkedPass": true,
|
|
4
|
+
"steps": [
|
|
5
|
+
{ "url": "{{base}}cart.html", "click": "a[href='details.html']" },
|
|
6
|
+
{ "url": "{{base}}details.html", "fill": { "#name": "Jane Doe", "#email": "jane@example.org", "#address": "12 High Street", "#postcode": "SW1A 1AA", "#country": "Ireland" }, "submit": "#details-form button" },
|
|
7
|
+
{ "url": "{{base}}review.html", "commit": true, "submit": "button:has-text('Place order')" },
|
|
8
|
+
{ "url": "{{base}}done.html" }
|
|
9
|
+
]
|
|
10
|
+
}
|