-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
147 lines (139 loc) · 9.14 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
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Random User Generator</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header class="bg-dark text-white py-5">
<div class="container">
<div class="row pb-5">
<div class="header-inner-div col-md-12 text-center pb-5">
<h2 class="fs-1 fw-normal text-uppercase">Random User Generator</h2>
<p class="fw-lighter">Random user generator is a practice project made by random user api and
bootstrap 5. By this website you can<br> generate a random person info and use anywhere.</p>
<button type="button" class="btn btn-primary py-3 px-5 rounded-2 fw-semibold"
onclick="getNewUserInfo()">Generate New User</button>
</div>
</div>
</div>
</header>
<main>
<div class="container mb-5">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8" id="randomUserDisplaySection">
<div class="card text-center shadow-lg">
<div class="card-header pt-5 shadow-sm">
<img src="" class="user-rounded-image img-fluid" id="displayUserPhoto">
</div>
<div class="card-body mb-4 mt-5">
<h3 class="card-title pt-2 fs-2" id="displayUserName"></h3>
<table class="table table-bordered mt-4">
<tbody class="text-start" id="displayUserInfo">
<tr class="">
<td class="col-1 text-center"><i class="fa-solid fa-user fs-4 text-muted"></i>
</td>
<th scope="col-2">Full Name: </th>
<td class="col-6" id="displayUserFullName"></td>
<td class="col-2 text-center"><button type="button"
class="btn btn-outline-secondary" id="copyUserFullName"><i
class="fa-regular fa-clipboard me-2"></i>Copy</button></td>
</tr>
<tr>
<td class="col-1 text-center"><i
class="fa-solid fa-envelope fs-4 text-muted"></i></td>
<th scope="col-2">Email Address: </th>
<td class="col-6" id="displayUserEmail"></td>
<td class="col-2 text-center"><button type="button"
class="btn btn-outline-secondary" id="copyUserEmail"><i
class="fa-regular fa-clipboard me-2"></i>Copy</button></td>
</tr>
<tr>
<td class="col-1 text-center"><i class="fa-solid fa-phone fs-4 text-muted"></i>
</td>
<th scope="col-2">Phone Number: </th>
<td class="col-6" id="displayUserPhoneNumber"></td>
<td class="col-2 text-center"><button type="button"
class="btn btn-outline-secondary" id="copyUserPhoneNumber"><i
class="fa-regular fa-clipboard me-2"></i>Copy</button></td>
</tr>
<tr>
<td class="col-1 text-center"><i class="fa-solid fa-user fs-4 text-muted"></i>
</td>
<th scope="col-2">Gander: </th>
<td class="col-6 text-capitalize" id="displayUserGander"></td>
<td class="col-2 text-center"><button type="button"
class="btn btn-outline-secondary" id="copyUserGander"><i
class="fa-regular fa-clipboard me-2"></i>Copy</button></td>
</tr>
<tr>
<td class="col-1 text-center"><i
class="fa-regular fa-calendar fs-4 text-muted"></i></td>
<th scope="col-2">Date of Birth: </th>
<td class="col-6" id="displayUserDOB"></td>
<td class="col-2 text-center"><button type="button"
class="btn btn-outline-secondary" id="copyUserDOB"><i
class="fa-regular fa-clipboard me-2"></i>Copy</button></td>
</tr>
<tr>
<td class="col-1 text-center"><i
class="fa-solid fa-location-dot fs-4 text-muted"></i></td>
<th scope="col-2">Address: </th>
<td class="col-6" id="displayUserAddress"></td>
<td class="col-2 text-center"><button type="button"
class="btn btn-outline-secondary" id="copyUserAddress"><i
class="fa-regular fa-clipboard me-2"></i>Copy</button></td>
</tr>
<tr>
<td class="col-1 text-center"><i
class="fa-solid fa-map-location-dot fs-4 text-muted"></i></td>
<th scope="col-2">Post Code: </th>
<td class="col-6" id="displayUserPostcode"></td>
<td class="col-2 text-center"><button type="button"
class="btn btn-outline-secondary" id="copyUserPostcode"><i
class="fa-regular fa-clipboard me-2"></i>Copy</button></td>
</tr>
<tr>
<td class="col-1 text-center"><i
class="fa-solid fa-id-card fs-4 text-muted"></i></td>
<th scope="col-2">SSN Number: </th>
<td class="col-6" id="displayUserSSNNumber"></td>
<td class="col-2 text-center"><button type="button"
class="btn btn-outline-secondary" id="copyUserSSNNumber"><i
class="fa-regular fa-clipboard me-2"></i>Copy</button></td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-primary py-3 px-5 mt-3 rounded-2 fw-semibold"
onclick="getNewUserInfo()">Generate New User</button>
</div>
</div>
</div>
<div class="col-md-2"></div>
</div>
</div>
</main>
<footer class="bg-dark py-5">
<p class="text-white text-center mb-0">Copyright @ 2022. All Right Reserved Developed by Azhar Anowar</p>
</footer>
<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div id="copiedToClipboardToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto text-success"><i class="fa-regular fa-clipboard me-2"></i>Copied to clipboard!</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body text-secondary fw-normal" id="copiedToClipboardMessage">
<!-- Here will load dynamic toast message... -->>
</div>
</div>
</div>
<script src="https://kit.fontawesome.com/cdf319e764.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/app.js"></script>
</body>
</html>