-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
184 lines (162 loc) · 9.39 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hope Link </title>
<link rel="stylesheet" href="assets/css/style.css">
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class=" font-lexend bg-[#F9F7F3] text-[#111111]">
<nav class="px-2 md:px-32 pb-4 sticky top-0 font-semibold text-xl z-50 shadow-md">
<div class="navbar bg-[#F9F7F3] pb-6">
<div class="navbar-start">
<div class="dropdown">
<div tabindex="0" role="button" class="btn btn-ghost btn-circle">
<a href="blog.html" class="btn bg-[#B4F461]">Blog</a>
</div>
</div>
</div>
<div class="navbar-center">
<a href="index.html" class=" text-xl flex items-center">
<img class="block" src="assets/img/logo.png" alt="Logo" class="w-1/5 " />
<span class="hidden md:block pl-5">HopeLink</span>
</a>
</div>
<div class="navbar-end flex items-center font-medium">
<img src="assets/img/coin.png" alt="Coin" class="w-6 h-6 mr-2" />
<p id="myBalance" class="mr-1">15000</p>BDT
</div>
</div>
<div class="flex justify-center gap-5 pb-4 backdrop-blur-xl">
<button id="donationBtn" class=" btn btn-outline rounded-lg bg-lime-300 ">Donation</button>
<button id="historyBtn" class="btn btn-outline rounded-lg ">History</button>
</div>
</nav>
<main class="bg-white pt-7">
<section id="DonatePage" class=" grid gap-5 md:px-32 px-2 py-4">
<div id="noakhali" class="card lg:card-side border ">
<div class="flex-1">
<figure>
<img class="p-5" src="assets/img/noakhali.png" alt="Album" />
</figure>
</div>
<div class="flex-1">
<div class="card-body">
<div class="card-actions">
<button class=" btn font-normal bg-[#1111110D]"><img class="w-5 h-5"
src="assets/img/coin.png" alt="" srcset=""> <span id="totalAmountNoakhali">0</span>
BDT</button>
</div>
<h2 id="titleN" class="card-title font-bold text-xl">Donate for Flood at Noakhali, Bangladesh</h2>
<p class="font-light text-base py-7"> The recent floods in Noakhali have caused significant
damage
to homes infrastructure. Your
donation will help provide essential supplies and to those affected by this disaster. Every
contribution, big or small, makes difference. Please join us in supporting the relief
efforts
and making a positive impact on the lives of those in need.</p>
<input id="amountN" type="text" placeholder="Write Donation Amount"
class="input input-bordered w-full" />
<button id="donationNoakhaliBtn"
class="btn text-xl font-semibold bg-[#B4F461] rounded-lg">Donate
Now</button>
</div>
</div>
</div>
<div id="fani" class="card lg:card-side border ">
<div class="flex-1">
<figure>
<img class="p-5" src="assets/img/feni.png" alt="Album" />
</figure>
</div>
<div class="flex-1">
<div class="card-body">
<div class="card-actions">
<button class=" btn font-normal bg-[#1111110D]"><img class="w-5 h-5"
src="assets/img/coin.png" alt="" srcset=""> <span id="totalAmountFani">990</span>
BDT</button>
</div>
<h2 id="titleF" class="card-title font-bold text-xl">Donate for Flood Relief in Feni,Bangladesh</h2>
<p class="font-light text-base py-7"> The recent floods in Feni have devastated local
communities, leading to severe disruption and loss. Your generous donation will help provide
immediate aid, including food, clean water, and medical supplies, to those affected by this
calamity. Together, we can offer crucial support and help rebuild lives in the aftermath of
this disaster. Every contribution counts towards making a real difference. Please consider
donating today to assist those in urgent need.</p>
<input id="amountF" type="text" placeholder="Write Donation Amount"
class="input input-bordered w-full" />
<button id="donationFaniBtn" class="btn text-xl font-semibold bg-[#B4F461] rounded-lg">Donate
Now</button>
</div>
</div>
</div>
<div id="quoata" class="card lg:card-side border ">
<div class="flex-1">
<figure>
<img class="p-5" src="assets/img/quota-protest.png" alt="Album" />
</figure>
</div>
<div class="flex-1">
<div class="card-body">
<div class="card-actions">
<button class=" btn font-normal bg-[#1111110D]"><img class="w-5 h-5"
src="assets/img/coin.png" alt="" srcset=""> <span id="totalAmountQuota">600</span>
BDT</button>
</div>
<h2 id="titleQ" class="card-title font-bold text-xl">Aid for Injured in the Quota Movement</h2>
<p class="font-light text-base py-7"> The recent Quota movement has resulted in numerous
injuries and significant hardship for many individuals. Your support is crucial in providing
medical assistance, rehabilitation, and necessary supplies to those affected. By
contributing, you help ensure that injured individuals receive the care and support they
need during this challenging time. Every donation plays a vital role in alleviating their
suffering and aiding in their recovery. Please consider making a donation to support these
brave individuals in their time of need.</p>
<input id="amountQ" type="text" placeholder="Write Donation Amount"
class="input input-bordered w-full" />
<button id="donationQuotaBtn" class="btn text-xl font-semibold bg-[#B4F461] rounded-lg">Donate
Now</button>
</div>
</div>
</div>
<div>
<dialog id="my_modal_1" class="modal ">
<div class="modal-box">
<h3 class="text-4xl font-extraboldbold text-center">Congratulations !</h3>
<P class="flex justify-center"><img class=" w-1/6" src="assets/img/coin.png" alt="" srcset="">
</P>
<p class="py-4 text-center">You Have Donated for <span id="cityName">City</span></p>
<p class="text-2xl font-semibold text-center">Successful</p>
<div class="modal-action flex justify-center">
<form method="dialog" class="">
<!-- if there is a button in form, it will close the modal -->
<button class="btn ">Close</button>
</form>
</div>
</div>
</dialog>
</div>
</section>
<section id="histroyPage" class="hidden grid gap-5 px-2 md:px-32 py-4">
<div class="border p-8 rounded-2xl">
<h2>96500 Taka is Donated for famine-2024 at Feni, Bangladesh</h2>
<h6>Date : Tue Sep 17 2024 08:39:11 GMT +0600 (Bangladesh Standard Time)</h6>
</div>
<div class="border p-8 rounded-2xl">
<h2>96500 Taka is Donated for famine-2024 at Feni, Bangladesh</h2>
<h6>Date : Tue Sep 17 2024 08:39:11 GMT +0600 (Bangladesh Standard Time)</h6>
</div>
</section>
</main>
<footer class="bg-[#111111] text-white text-center py-4">
<p>© 2024 HopeLink. All rights reserved.</p>
</footer>
<script src="assets/js/utility.js"></script>
<script src="assets/js/main.js"></script>
<script src="assets/js/histroy.js"></script>
<script src="assets/js/donateNoakhali.js"></script>
<script src="assets/js/donatefani.js"></script>
<script src="assets/js/donateQuota.js"></script>
</body>
</html>