-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathpost.html
More file actions
326 lines (322 loc) · 22.9 KB
/
post.html
File metadata and controls
326 lines (322 loc) · 22.9 KB
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
<!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">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="./css/main.css"media = "screen">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/fontawesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src = "./js/header.js" defer></script>
<script type = "module" src = "./js/post.js" defer></script>
<title>NGO | POST</title>
</head>
<body>
<div class = "grid--three-row" id = "wrapper">
<header id="header">
<nav class="navbar navbar-expand-md navbar-dark">
<div class="container d-flex justify-content-between">
<a href = "dashboard.html" class="navbar-brand logo" href="#"><img src= "image/logo3.svg" alt="logo image" class="img-fluid logo-img"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ms-auto text-center main-navbar justify-content-md-end">
<li class="nav-item dropdown view-link" disabled>
<a class="nav-link dropdown-toggle text-capitalize text-white" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
view
</a>
<div class="dropdown-menu mt-lg-3 p-lg-4" aria-labelledby="navbarDropdown">
<a class="dropdown-item mb-md-4 text-capitalize view-post" href="viewPost.html"><i class="fa fa-eye" aria-hidden="true"></i> view post</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item mt-md-4 text-capitalize view-user" href="viewUsers.html"><i class="fa fa-eye" aria-hidden="true"></i> view users</a>
</li>
<li class="nav-item active create-link">
<a class="nav-link text-capitalize text-white" href="createPost.html">create post</a>
</li>
<li class="nav-item dropdown username-link">
<a class="nav-link dropdown-toggle text-capitalize text-white" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
username
</a>
<div class="dropdown-menu mt-lg-3 p-lg-4" aria-labelledby="navbarDropdown">
<a class="dropdown-item text-capitalize mb-md-4" href="profileEdit.html"><i class="fas fa-edit"></i> edit account</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item text-capitalize mt-md-4 logout-btn"><i class = "fas fa-sign-out" aria-hidden="true"></i> logout</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main id ="main-container" class = "comment-container pos-relative">
<div class="bg-overlay"></div>
<div class="container">
<div class="row d-flex justify-content-center pb-md-3 pb-lg-5">
<div class="col-lg-5 col-md-4 img-banner">
<img alt="post image" class="post-img img-fluid">
</div>
<div class="col-lg-6 col-md-7 d-flex flex-column align-items-center">
<div class="post-description-div col-lg-11 mb-md-4 mb-lg-4">
<div class="d-flex mb-lg-3">
<h3 class="view-post-title text-uppercase"></h3>
<button class="btn update-post-btn ms-auto" data-toggle="modal" data-target="#update-post">Update post</button>
</div>
<p class="post-description-text"></p>
</div>
<div class="box-shadow activity-container col-lg-11">
<div class="cta-box col-lg-11">
<h4 class="cta-text text-uppercase mb-lg-3">
make donations
</h4>
<div class="d-flex justify-content-between">
<button class="btn btn-success text-white btn-lg donation-btn py-lg-3" disabled data-toggle="modal" data-target="#money-donation" value = "money"><i class="fa-solid fa-money-bill"></i>money</button>
<button class="btn btn-success text-white btn-lg donation-btn py-lg-3" disabled data-toggle="modal" data-target="#blood-donation" value = "blood"><i class="fa-solid fa-droplet"></i>blood</button>
<button class="btn btn-success text-white btn-lg donation-btn py-lg-3" disabled data-toggle="modal" data-target="#material-donation" value = "material"><i class="fa-solid fa-tshirt"></i>material</button>
</div>
</div>
<div class="comment-div col-lg-11 coml-md-11 mt-lg-4">
<form method = "post" id="post-comment" class = "d-flex flex-column">
<textarea maxlength="256" class="comment mb-lg-2" placeholder="Enter your comments"></textarea>
<button type = "submit" class="comment-btn ms-auto btn btn-success btn-lg py-lg-3"><i class="fa-solid fa-comment"></i>comment</button>
</form>
<ul class="show-comment mt-lg-3 list-group rounded-0"></ul>
</div>
</div>
</div>
</div>
</div>
<!-- update post modal -->
<div class="modal fade" id="update-post" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header d-flex">
<button type="button" class="close ms-auto" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class = "text-danger">×</span>
</button>
</div>
<div class="modal-body">
<form method="post" id="update-post-form" class="py-lg-4 px-lg-3">
<div class="form-group col-lg-12">
<label for="post-title" class = "text-uppercase form-label">post title</label>
<input type = "text" class = "form-control" id="post-title" placeholder="Enter the post name"></input>
<div class="invalid-feedback">
<p class="error font-weight-bold">Post title must contain only alphabets</p>
</div>
</div>
<div class="form-group col-lg-12 mt-md-2">
<label for="post-type" class = "text-uppercase form-label">post type</label>
<select id="post-type" class="form-select text-capitalize">
<option value="" disabled selected hidden>select post type</option>
<option value="money">money donation</option>
<option value="blood">blood donation</option>
<option value="material">material donation</option>
</select>
</div>
<div class="form-group col-lg-12 mt-md-2">
<label for="post-description" class = "text-uppercase form-label">post description</label>
<textarea id="post-description" class = "form-control" placeholder="Enter post description"></textarea>
</div>
<div class="form-group col-lg-12 mt-md-2">
<label class = "text-uppercase form-label" for="post-img">select post image</label>
<input type="file" class = "form-control" id="post-img" >
<div class="invalid-feedback mt-md-3">
<p class="error font-weight-bold"></p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success" id = "update-post-btn" data-toggle="modal">Update post</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- money donation modal -->
<div class="modal fade" id="money-donation" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header d-flex">
<button type="button" class="close ms-auto" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class = "text-danger">×</span>
</button>
</div>
<div class="modal-body">
<form method="post" id="money-donation-form" class="py-lg-4 px-lg-3">
<div class="form-group">
<label class = "form-label" for="cash-amount">Enter amount of money to be donated</label>
<div class="d-flex">
<input type="number" id="cash-amount" class="form-control"placeholder = "Enter amount">
</div>
</div>
<div class="form-group">
<label class = "form-label" for="currency">Select desired currency</label>
<select id="currency" class="form-select text-capitalize mb-lg-3">
<option value = "" disabled selected hidden>select desired currency</option>
<option value="pound">Pound</option>
<option value="euro">Euro</option>
<option value="dollar">Dollar</option>
<option value="naira">Naira</option>
</select>
</div>
<div class="form-group">
<label class = "form-label">Select preferred meduim of payment</label>
<div class="d-flex justify-content-evenly">
<button type = "button" class="btn btn-success btn-payment text-uppercase bank text-white" value = "bank"><i class="fa fa-bank"></i> bank</button>
<button type = "button" class="btn btn-success btn-payment text-uppercase mobile-transfer text-white"><i class="fa-solid fa-money-bill-transfer"></i> mobile transfer</button>
</div>
</div>
<div class="form-group hidden-field bank-transaction">
<label class = "form-label" for="bankslip">Select the bank deposit slip</label>
<input type="file" class = "form-control" id="bankslip" >
<div class="invalid-feedback pt-lg-2 ">
<p class="error font-weight-bold"></p>
</div>
</div>
<div class="form-group hidden-field transfer-transaction">
<label class = "form-label" for="bank-name">Select designated bank</label>
<select id="bank-name" class="form-select text-capitalize mb-lg-3">
<option value = "" disabled selected hidden>select designated bank</option>
<option value="access">access bank</option>
<option value="uba">UBA bank</option>
<option value="firstbank">first bank</option>
</select>
<input type="text" inputmode="numeric" id="bank-number" class="form-control bank-number text-capitalize"
data-toggle="tooltip" data-placement="bottom" title="Click to copy text" disabled>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success send-donation-btn" id = "money-donation-btn" data-toggle="modal">Make donation</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- blood donation modal -->
<div class="modal fade" id="blood-donation" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header d-flex">
<button type="button" class="close ms-auto" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class = "text-danger">×</span>
</button>
</div>
<div class="modal-body">
<form method="post" id="blood-donation-form" class="py-lg-4 px-lg-3">
<div class="form-group">
<label class = "form-label" for="genotype">Blood genotype</label>
<select id="blood-genotype" class="form-select text-uppercase mb-lg-3 genotype">
<option value="" disabled selected hidden>select your blood genotype</option>
<option value="aa" class = "text-uppercase">aa</option>
<option value="as" class = "text-uppercase">as</option>
<option value="ac" class = "text-uppercase">ac</option>
<option value="ss" class = "text-uppercase">ss</option>
</select>
<div class="invalid-feedback">
<p class="error font-weight-bold">Sorry SS genotype is not allowed to donate</p>
</div>
</div>
<div class="form-group">
<label class = "form-label" for="blood-group">Blood group</label>
<select id="blood-group" class="form-select text-uppercase mb-lg-3 group">
<option value="" disabled selected hidden>select your blood group</option>
<option value="a" class = "text-uppercase">a</option>
<option value="b" class = "text-uppercase">b</option>
<option value="ab" class = "text-uppercase">ab</option>
<option value="o+" class = "text-uppercase">o+</option>
<option value="o-" class = "text-uppercase">o-</option>
</select>
</div>
<div class="form-group blood-pile-field">
<label for="blood-pile">Pile of blood</label>
<div class="d-flex">
<input type = "number" name="pile" class="blood-pile form-control">
<p class="pile-description align-self-center">pile of blood</p>
</div>
</div>
<div class="radio-options">
<p class="questions mb-lg-4">
Do you have life threaten diseases or infections
</p>
<div class="form-check form-check-inline">
<input class="form-check-input disease-check" type="radio" value="response-yes">
<label class="form-check-label align-self-center" for="response-yes">Yes</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input disease-check" type="radio" value="response-no">
<label class="form-check-label align-self-center" for="response-no">No</label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success send-donation-btn" id = "blood-donation-btn">make donation</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- material donation -->
<div class="modal fade" id="material-donation" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close ms-auto" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class = "text-danger">×</span>
</button>
</div>
<div class="modal-body">
<form method="post" id="material-donation-form" class="py-lg-4 px-lg-3">
<div class="form-group">
<label class = "form-label" for="material-type">Type of material</label>
<select id="material-type" class="form-select text-capitalize mb-lg-3 group">
<option value="" disabled selected hidden>select material type</option>
<option value="consumables">consumables</option>
<option value="clothing">clothing</option>
<option value="cosmetics">cosmetics</option>
<option value="stationery">stationery</option>
</select>
</div>
<div class="form-group">
<label for="material-name" class="form-label">Name of material</label>
<input type="text" class="form-control" id = "material-name" placeholder="Name of material">
<div class="invalid-feedback">
<p class="error font-weight-bold">Only alphabets allowed</p>
</div>
</div>
<div class="form-group">
<label for="material-quantity" class="form-label">Quantity of material</label>
<input type="text" class="form-control" id = "material-quantity" placeholder="Quantity of material">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success donation-btn" id = "material-donation-btn">Make donation</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- congratulation modal -->
<div class="modal fade" id = "congrat-modal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div style="width:100%;height:100%">
<img src="./image/congrats.gif" alt="thank you banner" class="img-fluid">
</div>
</div>
</div>
</div>
</main>
<footer id="footer" class = "d-flex align-items-center justify-content-center">
<h4 class="copy text-uppercase text-white">copyright © 2023</h4>
</footer>
</div>
</body>
</html>