-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
134 lines (110 loc) · 5.64 KB
/
index.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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Signup flow</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<style>
.btn:not(.is-loading) .spinner-border {
display: none;
}
</style>
</head>
<body>
<main style="max-width: 600px; margin: 20px auto">
<h1>Join today!</h1>
<form class="js-form">
<div class="mb-3">
<label class="form-label">Period</label>
<div>
<input class="btn-check" type="radio" name="period" value="monthly" id="p_monthly" checked required />
<label class="btn btn-outline-secondary" for="p_monthly">Monthly</label>
<input class="btn-check" type="radio" name="period" value="annually" id="p_annually" required />
<label class="btn btn-outline-secondary" for="p_annually">Annually</span>
</div>
</div>
<fieldset class="mb-3 js-period-amounts" data-period="monthly">
<label class="form-label">Monthly amount</label>
<div class="mb-2">
<input class="btn-check" type="radio" name="amount_monthly" value="5" id="a_m_1" checked required />
<label class="btn btn-outline-secondary" for="a_m_1">5€</label>
<input class="btn-check" type="radio" name="amount_monthly" value="10" id="a_m_2" required />
<label class="btn btn-outline-secondary" for="a_m_2">10€</label>
<input class="btn-check" type="radio" name="amount_monthly" value="15" id="a_m_3" required />
<label class="btn btn-outline-secondary" for="a_m_3">15€</label>
<input class="btn-check" type="radio" name="amount_monthly" value="custom" id="a_m_4" required />
<label class="btn btn-outline-secondary" for="a_m_4">Custom amount</label>
</div>
<input type="number" name="custom_amount_monthly" class="form-control mb-2 d-none" min="1" required />
</fieldset>
<fieldset class="mb-3 js-period-amounts" data-period="annually">
<label class="form-label">Annual amount</label>
<div class="mb-2">
<input class="btn-check" type="radio" name="amount_annually" value="60" id="a_a_1" checked required />
<label class="btn btn-outline-secondary" for="a_a_1">60€</label>
<input class="btn-check" type="radio" name="amount_annually" value="120" id="a_a_2" required />
<label class="btn btn-outline-secondary" for="a_a_2">120€</label>
<input class="btn-check" type="radio" name="amount_annually" value="180" id="a_a_3" required />
<label class="btn btn-outline-secondary" for="a_a_3">180€</label>
<input class="btn-check" type="radio" name="amount_annually" value="custom" id="a_a_4" required />
<label class="btn btn-outline-secondary" for="a_a_4">Custom amount</label>
</div>
<input type="number" name="custom_amount_annually" class="form-control mb-2 d-none" min="12" required />
</fieldset>
<button class="btn btn-primary" style="width: 100%">
Continue
</button>
</form>
<form class="js-form d-none">
<p class="mb-3">
<button class="btn btn-sm btn-outline-dark js-back" type="button">← Back</button>
</p>
<div class="mb-3">
<label class="form-label" id="email">Email address</label>
<input class="form-control" type="email" name="email" id="email" required />
</div>
<div class="mb-3">
<label class="form-label">Payment method</label>
<div>
<input class="btn-check" type="radio" name="payment_method" value="gc_direct-debit" id="pm_dd" checked required />
<label class="btn btn-outline-secondary" for="pm_dd">Direct debit</label>
<input class="btn-check" type="radio" name="payment_method" value="s_card" id="pm_card" checked required />
<label class="btn btn-outline-secondary" for="pm_card">Credit/debit card</label>
<input class="btn-check" type="radio" name="payment_method" value="s_paypal" id="pm_paypal" checked required />
<label class="btn btn-outline-secondary" for="pm_paypal">PayPal</label>
</div>
</div>
<fieldset class="mb-3 js-fee">
<label>
<input type="checkbox" name="pay_fee" value="1" checked />
<span class="js-fee-opt-in">Yes, I'll absorb the £<span class="js-fee-amount"></span> fee</span>
<span class="d-none js-fee-required">£1 contributions must absorb the fee</span>
</label>
</fieldset>
<button class="btn btn-primary" style="width: 100%">
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Proceed to payment
</button>
</form>
<form class="js-form d-none">
<p class="mb-3">
<button class="btn btn-sm btn-outline-dark js-back" type="button">← Back</button>
</p>
<div class="mb-3">
<label class="form-label" for="first_name">First name</label>
<input class="form-control" type="text" name="first_name" id="first_name" required />
</div>
<div class="mb-3">
<label class="form-label" for="last_name">Last name</label>
<input class="form-control" type="text" name="last_name" id="last_name" required />
</div>
<div class="mb-3 js-stripe"></div>
<button class="btn btn-primary" style="width: 100%">
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Confirm payment details
</button>
</form>
</main>
<script src="./main.js"></script>
</body>
</html>