-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsettings.html
330 lines (324 loc) · 9.93 KB
/
settings.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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=2, user-scalable=yes"
/>
<title>Paypal</title>
<link rel="stylesheet" href="./style.css" />
<link
rel="stylesheet"
href="https://unpkg.com/[email protected]/css/tachyons.min.css"
/>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous"
/>
<script>
let alertShown = false;
function checkScreenSize() {
if (window.matchMedia("(max-width: 700px)").matches && !alertShown) {
alert("Zoom out for better view");
alertShown = true;
} else if (!window.matchMedia("(max-width: 700px)").matches) {
alertShown = false;
}
}
window.addEventListener("resize", checkScreenSize);
checkScreenSize();
</script>
</head>
<body style="min-height: fit-content">
<header
class="bg-dark-blue pt3 pa2 z-1 fixed navigation w-100 flex flex-row justify-between"
>
<div class="navigation-l flex flex-row justify-between w-50">
<p class="f3 fw4 link dim white b dib mr3 pointer">
<i style="letter-spacing: -10px"
><span class="white">P</span><span class="light-blue">P</span></i
>
</p>
<a href="./home.html" class="f4 fw4 link dim white b dib mr3 pointer"
>Home</a
>
<a href="./send.html" class="f4 fw4 link dim white b dib mr3 pointer"
>Send</a
>
<a href="./wallet.html" class="f4 fw4 link dim white b dib mr3 pointer"
>Wallet</a
>
<a
href="./activity.html"
class="f4 fw4 link dim white b dib mr3 pointer"
>Activity</a
>
<a href="./help.html" class="f4 fw4 link dim white b dib mr3 pointer"
>Help</a
>
</div>
<div class="navigation-l flex flex-row justify-around w-30">
<a href="#" class="f4 fw4 link dim white b dib mr3 pointer"
><img src="./Icons/bell.svg" alt="bell"
/></a>
<a
href="./settings.html"
class="f4 fw4 link dim white b dib mr3 pointer"
><img src="./Icons/settings.svg" alt="settings"
/></a>
<a href="./index.html" class="f4 fw4 link dim white b dib mr3 pointer"
>Log Out</a
>
</div>
<button
class="bn bg-transparent pa2 navigation-ms"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#offcanvasWithBothOptions"
aria-controls="offcanvasWithBothOptions"
>
<img src="./Icons/menu.svg" alt="menu" class="navigation-ms ml2" />
</button>
<div
class="offcanvas offcanvas-start"
data-bs-scroll="true"
tabindex="-1"
id="offcanvasWithBothOptions"
aria-labelledby="offcanvasWithBothOptionsLabel"
style="background-color: #00449e; height: 50%"
>
<div class="offcanvas-header">
<a href="./index.html" class="link white"
><h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">
Log Out
</h5></a
>
<a
href="./settings.html"
class="f4 fw4 link dim white b dib mr3 pointer"
><img src="./Icons/settings.svg" alt="settings"
/></a>
<button
type="button"
class="btn-close bg-white"
data-bs-dismiss="offcanvas"
aria-label="Close"
></button>
</div>
<div class="offcanvas-body">
<div class="flex flex-column">
<a
href="./home.html"
class="f4 fw4 link in-links white b dib mr3 pointer"
>Home</a
>
<a
href="./send.html"
class="f4 fw4 link in-links white b dib mr3 pointer"
>Send</a
>
<a href="#" class="f4 fw4 link in-links white b dib mr3 pointer"
>Wallet</a
>
<a
href="./activity.html"
class="f4 fw4 link in-links white b dib mr3 pointer"
>Activity</a
>
<a
href="./help.html"
class="f4 fw4 link in-links white b dib mr3 pointer"
>Help</a
>
</div>
</div>
</div>
<h1 class="pa2 tc mb2 navigation-ms" style="letter-spacing: -10px">
<i><span class="white">P</span><span class="light-blue">P</span></i>
</h1>
<img src="./Icons/bell.svg" alt="bl" class="navigation-ms mr2" />
</header>
<div class="pa4 mb3 w-100"></div>
<nav class="w-100 pa3 shadow">
<div class="w-70 center flex flex-row justify-between overflow-auto">
<a
href="#"
class="flex-shrink-0 link dark-blue mr1 flex-grow-0 br-pill pa2 bg-light-blue"
>Account</a
>
<a href="#" class="flex-shrink-0 link black mr1 flex-grow-0 br-pill pa2"
>Security</a
>
<a href="#" class="flex-shrink-0 link black mr1 flex-grow-0 br-pill pa2"
>Data & Privacy</a
>
<a href="#" class="flex-shrink-0 link black mr1 flex-grow-0 br-pill pa2"
>Payments</a
>
<a href="#" class="flex-shrink-0 link black mr1 flex-grow-0 br-pill pa2"
>Notifications</a
>
<a href="#" class="flex-shrink-0 link black mr1 flex-grow-0 br-pill pa2"
>Seller Tools</a
>
</div>
</nav>
<section
class="pa2 pl3 pt3 accountSection pr2 flex justify-between w-100 bg-light-gray"
>
<div class="account pa2 flex flex-column">
<div
class="profile shadow mb4 w-100 pa3 br3 white pl4 flex flex-column justify-between"
>
<p class="inline-flex pb2 justify-between">
<span class="f3">Profile</span> <span class="f7">Joined 2023</span>
</p>
<div class="pa2 w-100">
<img
src="./Images/Rick.jpg"
alt=""
class="w-20 br-100 ba b--white"
/>
</div>
<p class="inline-flex justify-between">
<span class="f3 black b">User Name</span>
<span class="f7 blue">Change name</span>
</p>
</div>
<div
class="accountOptions mb2 shadow pa4 w-100 bg-white br3 flex flex-column justify-between"
>
<h3 class="w-100 mb3">Account options</h3>
<div class="pa2 ba flex mb3 br2 flex-column">
<p class="gray">Language</p>
<select class="w-100 black f4 bn bg-transparent">
<option>English</option>
<option>Arabic</option>
<option>German</option>
</select>
</div>
<div class="pa2 ba flex mb4 br2 flex-column">
<p class="gray">Time zone</p>
<select class="w-100 black f4 bn bg-transparent">
<option>(GMT +00:00) African Time (Lagos)</option>
<option>(GMT +02:00) African Time (Kandahar)</option>
</select>
</div>
<div class="pa2 mb3 flex br2 flex-column">
<p class="gray">Nationality</p>
<p class="b">Nigerian</p>
</div>
<div class="pa2 mb3 flex br2 flex-column">
<p class="gray">Merchant ID</p>
<p class="b">OREDCVBJK5IA2M3J</p>
</div>
<p class="b blue f4">Add Passport</p>
<div class="pa1 grow pl3 br3 ba b--gray inline-flex justify-between">
<img src="./Icons/user.svg" alt="" />
<p class="w-90 pt3 f4">Close your account</p>
</div>
</div>
</div>
<div class="contacts pa2 flex flex-column">
<div
class="shadow bg-white mb4 br3 pa3 flex flex-column justify-between"
>
<p class="inline-flex justify-between">
<span class="b f4">Email</span>
<span class="blue b f6">Add</span>
</p>
<p class="br-pill pl2 pr2 bg-light-blue" style="width: fit-content">
Primary
</p>
<p class="inline-flex justify-between">
<span class="black">[email protected]</span>
<span class="blue f7">Change</span>
</p>
<p class="gray">
To update an email address, you must have at least two email
addresses on file.
</p>
</div>
<div
class="shadow bg-white mb4 br3 pa3 flex flex-column justify-between"
>
<p class="inline-flex justify-between">
<span class="b f4">Phone Numbers</span>
<span class="blue b f6">Add</span>
</p>
<div class="inline-flex">
<p class="mr1">Mobile</p>
<p class="br-pill pl2 pr2 bg-light-blue">Primary</p>
</div>
<p class="inline-flex justify-between">
<span>12** *** 8900</span>
<span class="blue f7">Change</span>
</p>
<div class="inline-flex"><p class="pa2">Mobile</p></div>
<p class="inline-flex justify-between">
<span>12** *** 8900</span>
<span class="blue f7">Change</span>
</p>
</div>
<div
class="shadow bg-white mb4 br3 pa3 flex flex-column justify-between"
>
<p class="inline-flex justify-between">
<span class="b f4">Addresses</span>
<span class="blue b f6">Add</span>
</p>
<p class="br-pill pl2 pr2 bg-light-blue" style="width: fit-content">
Primary
</p>
<p class="">
City resided <br />
State <br />
Postal Code
</p>
<p class="blue b">View your addresses</p>
</div>
</div>
</section>
<footer class="shadow-lg w-100 pa2 flex flex-column">
<div class="justify-between actualFooter ml3-m">
<h2 class="pa2 fw-bolder mb2">
<i style="letter-spacing: -10px"
><span class="dark-blue">P</span
><span class="light-blue">P</span></i
>
<i
><span class="dark-blue">Pay</span
><span class="light-blue">Pal</span></i
>
</h2>
<a href="./help.html" class="link black dib mr3 pointer pt2"
><h4>Help</h4></a
>
<a href="./help.html" class="link black dib mr3 pointer pt2"
><h4>Contact Us</h4></a
>
<a href="#" class="link black dib mr3 pointer pt2"><h4>Security</h4></a>
</div>
<hr class="w-100" />
<div class="justify-between actualFooter">
<p>c 1999-2023 All rights reserved.</p>
<p>Privacy</p>
<p>Cookies</p>
<p>Legal</p>
</div>
<p class="moon-gray w-100 license">
PayPal Pte. Ltd. is licensed by the Monetary Authority of Singapore as a
Major Payment Institution under the Payment Services Act 2019.
</p>
</footer>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"
></script>
</body>
</html>