Repository navigation
Expand file tree
/
Copy pathget-involved.html
More file actions
505 lines (481 loc) · 32.1 KB
/
Copy pathget-involved.html
File metadata and controls
505 lines (481 loc) · 32.1 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
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
<!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, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
<meta name="author" content="Ashraya Trust">
<title>Get Involved - Volunteer & Support Ashraya Trust</title>
<meta name="description" content="Join Ashraya Trust as a volunteer or find other ways to support our mission. Help us serve the needy in Kurnool through your time, skills, or resources.">
<script defer src="https://kit.fontawesome.com/bc406c0a10.js" crossorigin="anonymous"></script>
<link rel="shortcut icon" href="images/favicon.webp">
<link href="app.min.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- ② fetch the CSS file ASAP, but don’t block render -->
<link rel="preload"
href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600&display=swap"
as="style"
onload="this.rel='stylesheet'">
<noscript>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600&display=swap">
</noscript>
<link rel="preload" href="images/Ashraya-logo.webp" as="image" fetchpriority="high">
<link rel="preload" href="images/about-guriji.webp" as="image" fetchpriority="high">
<link rel="preload" href="images/mobile.webp" as="image" fetchpriority="high">
<style>
body { font-family: "Nunito", sans-serif; }
/* Add specific get-involved page styles */
.page-header { height: 40vh; min-height: 250px; background: url('images/about-guriji.webp') no-repeat center center; background-size: cover; display: flex; align-items: center; justify-content: center; text-align: center; color: white; position: relative; }
.page-header-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 1; }
.page-header-content { position: relative; z-index: 2; }
.volunteer-section, .other-ways-section { padding: 4rem 0; }
.volunteer-section { background-color: #f8f9fa; }
.volunteer-form iframe { width: 100%; min-height: 800px; border: 1px solid #ccc; border-radius: 8px; }
.way-to-help-card { text-align: center; margin-bottom: 2rem; }
.way-to-help-card .icon { font-size: 3em; color: #A70D17; margin-bottom: 1rem; }
/* Re-use blink from index.html if needed */
.marquee-container {
background: #A70D17; /* Original background color */
color: white; /* Original text color */
overflow: hidden; /* Crucial: Hides the text outside the container */
position: relative; /* Needed for absolute positioning if used, good practice */
width: 100%; /* Take full width of its parent space */
box-sizing: border-box; /* Include padding in width calculations */
padding: 0.2em 0; /* Original padding */
/* Ensure it aligns correctly within the flex container if needed */
display: flex; /* Use flex to vertically center content if padding isn't enough */
align-items: center; /* Vertically center text */
}
.marquee-content {
display: inline-block; /* Treat as a block, but inline for width calculation */
white-space: nowrap; /* Prevent text from wrapping */
font-family: sans-serif; /* Or inherit from body */
font-weight: 600; /* Original font weight */
will-change: transform; /* Performance hint for the browser */
/* Animation properties */
animation: scroll-left 15s linear infinite; /* Name, Duration, Timing, Iteration */
/* Start the text off-screen to the right */
padding-left: 100%;
box-sizing: border-box;
}
/* Pause animation on hover (optional but good UX) */
.marquee-container:hover .marquee-content {
animation-play-state: paused;
}
/* Define the scrolling animation */
@keyframes scroll-left {
0% {
transform: translateX(0); /* Start position (respecting padding-left) */
}
100% {
/* Move left by its own calculated width (content + padding-left) */
transform: translateX(-100%);
}
}
/* Style for the generic share button */
#share-button {
/* Add any specific styling if needed, otherwise relies on btn classes */
}
@media (max-width: 768px) {
/* Adjust breakpoint if needed */
.page-header{
/* Your hero image */
height: 60vh;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: white;
position: relative;
min-height: 400px;
background: url('images/mobile.webp') no-repeat center top;
}
}
</style>
</head>
<body>
<div id="app" class="get-involved-page">
<!-- Header -->
<!-- <header>-->
<!-- <div id="top-nav" class="text-white text-uppercase px-3 d-flex flex-row-reverse1 py-1 py-md-2">-->
<!-- <div class="marquee-container flex-grow-1">-->
<!-- <div class="marquee-content">80G Tax Benefits For Donations</div>-->
<!-- </div>-->
<!-- <div class="social d-flex align-items-center">-->
<!-- <a target="_blank" href="https://www.facebook.com/TARASHRAYA" class="text-white d-inline-block mr-3" style="font-size: 1.5em;" aria-label="Facebook"> <i class="fab fa-facebook-f"></i> </a>-->
<!-- <a target="_blank" href="https://www.youtube.com/@ashrayatrust" class="text-white d-inline-block mr-3" style="font-size: 1.5em;" aria-label="YouTube"> <i class="fab fa-youtube"></i> </a>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="site-navigation w-100 text-uppercase pb-3 text-red position-relative alt-nav" style="background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">-->
<!-- <div class="container-fluid d-flex align-items-center">-->
<!-- <div class="main-nav d-flex align-items-center mr-auto">-->
<!-- <nav class="navbar navbar-expand-lg">-->
<!-- <a class="navbar-brand" href="index.html"><img src="images/Ashraya-logo.webp" class="main-logo img-fluid" alt="Ashraya Trust Logo" fetchpriority="high"/></a>-->
<!-- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">-->
<!-- <i class="fas fa-bars text-dark"></i>-->
<!-- </button>-->
<!-- <div class="collapse navbar-collapse ml-2" id="navbarText">-->
<!-- <ul class='navbar-nav mr-auto d-flex align-items-center'>-->
<!-- <li class='nav-item px-2'><a class="nav-link demi text-dark" href="index.html">Home</a></li>-->
<!-- <li class='nav-item px-2'><a class="nav-link demi text-dark" href="about.html">About Us</a></li>-->
<!-- <li class='nav-item px-2'><a class="nav-link demi text-dark" href="our-work.html">Our Work</a></li>-->
<!-- <li class='nav-item px-2'><a class="nav-link demi text-dark" href="get-involved.html">Get Involved</a></li>-->
<!-- <li class='nav-item px-2'><a class="nav-link demi text-dark" href="contact.html">Contact</a></li>-->
<!-- </ul>-->
<!-- </div>-->
<!-- </nav>-->
<!-- </div>-->
<!-- <div class="second-nav d-flex align-items-center">-->
<!-- <nav class="navbar p-0 navbar-expand-lg">-->
<!-- <!– **** ADDED DESKTOP SHARE BUTTON **** –>-->
<!-- <a href="#" class="py-2 px-4 btn btn-outline-danger demi mr-3 share-trigger" style="border-radius: 20px; display: none;">-->
<!-- <i class="fas fa-share-alt mr-1"></i> Share-->
<!-- </a>-->
<!-- <a class="py-2 px-4 btn pulse demi text-white" href="donate.html" style="border-radius: 20px;">DONATE</a>-->
<!-- </nav>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <!– Mobile Nav –>-->
<!-- <div id="mobile-nav" class="d-lg-none">-->
<!-- <div class="wrapper" style="background: #fff; padding: 10px; border-bottom: 1px solid #eee;">-->
<!-- <div class="mobile-top d-flex align-items-center justify-content-between">-->
<!-- <a class="" href="index.html"><img src="images/Ashraya-logo.webp" class="w-50 img-fluid" alt="Ashraya Trust Logo" fetchpriority="high"/></a>-->
<!-- <i class="fas fa-bars navbar-toggle collapsed" data-target="#sidebar-nav" style="font-size: 1.5em; cursor: pointer; color: #404041;"></i>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="" id="sidebar-nav" style="display: none; position: fixed; top: 0; left: 0; height: 100%; width: 80%; background: #404041; z-index: 9999; padding-top: 60px; overflow-y: auto;">-->
<!-- <i class="fas fa-times navbar-toggle" style="position: absolute; top: 20px; right: 20px; font-size: 1.8em; color: white; cursor: pointer;"></i>-->
<!-- <div class="sidebar-wrapper px-3">-->
<!-- <ul class='navbar-nav mr-auto'>-->
<!-- <li class='nav-item py-2'><a class="nav-link demi text-white" href="index.html">Home</a></li>-->
<!-- <li class='nav-item py-2'><a class="nav-link demi text-white" href="about.html">About Us</a></li>-->
<!-- <li class='nav-item py-2'><a class="nav-link demi text-white" href="our-work.html">Our Work</a></li>-->
<!-- <li class='nav-item py-2'><a class="nav-link demi text-white" href="get-involved.html">Get Involved</a></li>-->
<!-- <li class='nav-item py-2'><a class="nav-link demi text-white" href="contact.html">Contact</a></li>-->
<!-- <!– **** ADDED MOBILE SHARE LINK **** –>-->
<!-- <li class='nav-item py-2'>-->
<!-- <a class="nav-link demi text-white share-trigger" href="#" style="display: none;">-->
<!-- <i class="fas fa-share-alt mr-2"></i>Share Our Work-->
<!-- </a>-->
<!-- </li>-->
<!-- <li class='nav-item mt-3'><a class="btn btn-donate d-block text-center text-white" href="donate.html">Donate Now</a></li>-->
<!-- </ul>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </header>-->
<header>
<div id="top-nav" class="text-white text-uppercase px-3 d-flex flex-row-reverse1 py-1 py-md-2">
<div class="marquee-container flex-grow-1"> <!-- Added flex-grow-1 -->
<div class="marquee-content">80G Tax Benefits For Donations</div>
</div>
<div class="social d-flex align-items-center">
<a target="_blank" href="https://www.facebook.com/TARASHRAYA" class="text-white d-inline-block mr-3" style="font-size: 1.5em;" aria-label="Facebook"> <i class="fab fa-facebook-f"></i> </a>
<a target="_blank" href="https://www.youtube.com/@ashrayatrust" class="text-white d-inline-block mr-3" style="font-size: 1.5em;" aria-label="YouTube"> <i class="fab fa-youtube"></i> </a>
</div>
</div>
<div class="site-navigation w-100 text-uppercase pb-3 text-red position-relative alt-nav" style="background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
<div class="container-fluid d-flex align-items-center">
<div class="main-nav d-flex align-items-center mr-auto">
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="index.html"><img src="images/Ashraya-logo.webp" class="main-logo img-fluid" alt="Ashraya Trust Logo" fetchpriority="high"/></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars text-dark"></i>
</button>
<div class="collapse navbar-collapse ml-2" id="navbarText">
<ul class='navbar-nav mr-auto d-flex align-items-center'>
<li class='nav-item px-2'><a class="nav-link demi text-dark" href="index.html">Home</a></li>
<li class='nav-item px-2'><a class="nav-link demi text-dark" href="about.html">About Us</a></li>
<li class='nav-item px-2'><a class="nav-link demi text-dark" href="our-work.html">Our Work</a></li>
<li class='nav-item px-2'><a class="nav-link demi text-dark" href="get-involved.html">Get Involved</a></li>
<!-- NEW LINK ADDED HERE -->
<li class='nav-item px-2'><a class="nav-link demi text-red" href="https://pravachanam.ashrayatrust.org/">Pravachanam</a></li>
<li class='nav-item px-2'><a class="nav-link demi text-dark" href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</div>
<div class="second-nav d-flex align-items-center">
<nav class="navbar p-0 navbar-expand-lg">
<a href="#" class="py-2 px-4 btn btn-outline-danger demi mr-3 share-trigger" style="border-radius: 20px; display: none;">
<i class="fas fa-share-alt mr-1"></i> Share
</a>
<a class="py-2 px-4 btn pulse demi text-white" href="donate.html" style="border-radius: 20px;">DONATE</a>
</nav>
</div>
</div>
</div>
<!-- Mobile Nav -->
<div id="mobile-nav" class="d-lg-none">
<div class="wrapper" style="background: #fff; padding: 10px; border-bottom: 1px solid #eee;">
<div class="mobile-top d-flex align-items-center justify-content-between">
<a class="" href="index.html"><img src="images/Ashraya-logo.webp" class="w-50 img-fluid" alt="Ashraya Trust Logo" fetchpriority="high"/></a>
<i class="fas fa-bars navbar-toggle collapsed" data-target="#sidebar-nav" style="font-size: 1.5em; cursor: pointer; color: #404041;"></i>
</div>
</div>
<div class="" id="sidebar-nav" style="display: none; position: fixed; top: 0; left: 0; height: 100%; width: 80%; max-width: 80%; background: #404041; z-index: 9999; padding-top: 60px; overflow-y: auto; overflow-x: hidden;">
<i class="fas fa-times navbar-toggle" style="position: absolute; top: 20px; right: 20px; font-size: 1.8em; color: white; cursor: pointer;"></i>
<div class="sidebar-wrapper px-3">
<ul class='navbar-nav mr-auto'>
<li class='nav-item py-2'><a class="nav-link demi text-white" href="index.html">Home</a></li>
<li class='nav-item py-2'><a class="nav-link demi text-white" href="about.html">About Us</a></li>
<li class='nav-item py-2'><a class="nav-link demi text-white" href="our-work.html">Our Work</a></li>
<li class='nav-item py-2'><a class="nav-link demi text-white" href="get-involved.html">Get Involved</a></li>
<!-- NEW LINK ADDED HERE -->
<li class='nav-item py-2'><a class="nav-link demi" href="https://pravachanam.ashrayatrust.org/" style="color: #ffc107;">Pravachanam</a></li>
<li class='nav-item py-2'><a class="nav-link demi text-white" href="contact.html">Contact</a></li>
<li class='nav-item py-2'>
<a class="nav-link demi text-white share-trigger" href="#" style="display: none;">
<i class="fas fa-share-alt mr-2"></i>Share Our Work
</a>
</li>
<li class='nav-item mt-3'><a class="btn btn-donate d-block text-center text-white" href="donate.html">Donate Now</a></li>
</ul>
</div>
</div>
</div>
</header>
<!-- Page Header -->
<section class="page-header">
<div class="page-header-overlay"></div>
<div class="page-header-content">
<h1>Get Involved</h1>
<p class="lead">Your time and support are invaluable to our mission.</p>
</div>
</section>
<!-- Volunteer Section -->
<section class="volunteer-section">
<div class="container">
<h2 class="text-center demi text-red mb-4">Volunteer With Us</h2>
<p class="text-center lite mb-5">Become a part of the Ashraya family and experience the joy of selfless service. We welcome volunteers for various activities, especially during events like Ugadi Seva.</p>
<div class="row">
<div class="col-lg-6 mb-4 mb-lg-0">
<h3 class="demi mb-3">Why Volunteer?</h3>
<ul>
<li class="lite mb-2"><i class="fas fa-heart text-red mr-2"></i>Make a direct impact on the lives of the needy.</li>
<li class="lite mb-2"><i class="fas fa-users text-red mr-2"></i>Be part of a compassionate and dedicated community.</li>
<li class="lite mb-2"><i class="fas fa-hands-helping text-red mr-2"></i>Experience the fulfillment of Seva (selfless service).</li>
<li class="lite mb-2"><i class="fas fa-calendar-alt text-red mr-2"></i>Contribute during special events like Ugadi Yatri Seva.</li>
</ul>
<h4 class="demi mt-4">Current Opportunities</h4>
<p class="lite">Teaching support on Sundays, help with food packing, medical professionals for camps, event support for Ugadi Seva.</p>
<h4 class="demi mt-5 mb-3">More Volunteer Voices</h4>
<div class="card testimonial-card mb-3" style="background-color: #fff; border-left: 4px solid var(--brand-red);">
<div class="card-body">
<blockquote class="mb-0 lite">
"Helping pack food parcels might seem small, but knowing it reaches someone hungry makes my days meaningful."
</blockquote>
<cite class="d-block text-right demi mt-2">– SriLakshmi</cite>
</div>
</div>
<div class="card testimonial-card mb-3" style="background-color: #fff; border-left: 4px solid var(--brand-red);">
<div class="card-body">
<blockquote class="mb-0 lite">
"Volunteering at Ashraya changed my perspective. It's more than charity; it's connecting with humanity."
</blockquote>
<cite class="d-block text-right demi mt-2">– Vishnu Kaza</cite>
</div>
</div>
<div class="card testimonial-card mb-3" style="background-color: #fff; border-left: 4px solid var(--brand-green);">
<div class="card-body">
<blockquote class="mb-0 lite">
"I assisted during a medical camp. Seeing the relief on patients' faces after getting checked and receiving free medicines was truly humbling. Ashraya fills a critical gap."
</blockquote>
<cite class="d-block text-right demi mt-2">– Srujana</cite>
</div>
</div>
</div>
<div class="col-lg-6">
<h3 class="demi mb-3">Volunteer Sign-up Form</h3>
<div class="volunteer-form">
<iframe src="https://forms.gle/Yx67iKxU7rg9ifF96">Loading…</iframe>
</div>
</div>
</div>
</div>
</section>
<!-- Other Ways to Help Section -->
<section class="other-ways-section">
<div class="container">
<h2 class="text-center demi text-red mb-5">More Ways to Contribute</h2>
<div class="row">
<div class="col-md-4">
<div class="way-to-help-card">
<div class="icon"><i class="fas fa-donate"></i></div>
<h4 class="demi">Donate</h4>
<p class="lite">Financial contributions are vital for sustaining our daily operations and expanding our reach.</p>
<a href="donate.html" class="btn btn-donate demi text-white">Donate Now</a>
</div>
</div>
<div class="col-md-4">
<div class="way-to-help-card">
<div class="icon"><i class="fas fa-bullhorn"></i></div>
<h4 class="demi">Spread the Word</h4>
<p class="lite">Share our mission and work with your friends, family, and social networks.</p>
<!-- **** MODIFIED SHARE BUTTON - Added 'share-trigger' class **** -->
<button id="share-button" class="btn btn-outline-danger demi share-trigger" style="display: none;">
<i class="fas fa-share-alt mr-2"></i>Share Our Work
</button>
</div>
</div>
<div class="col-md-4">
<div class="way-to-help-card">
<div class="icon"><i class="fas fa-box-open"></i></div>
<h4 class="demi">Donate Goods (In-Kind)</h4>
<p class="lite">Your in-kind contributions directly support our Annadanam (food distribution) and educational programs. We welcome donations of essential items in good condition.</p>
<!-- <h6 class="demi mt-3">Items Currently Needed:</h6>-->
<!-- <ul class="list-unstyled text-left lite" style="padding-left: 20%; text-align: left; display: inline-block;"> <!– Adjust padding/text-align as needed –>-->
<!-- <li><i class="fas fa-caret-right text-red mr-1"></i> Rice, Dal, Cooking Oil</li>-->
<!-- <li><i class="fas fa-caret-right text-red mr-1"></i> Wheat Flour (Atta), Sugar, Salt</li>-->
<!-- <li><i class="fas fa-caret-right text-red mr-1"></i> Spices, Tea Powder</li>-->
<!-- <li><i class="fas fa-caret-right text-red mr-1"></i> Notebooks, Pens, Pencils</li>-->
<!-- <li><i class="fas fa-caret-right text-red mr-1"></i> School Bags, Geometry Boxes</li>-->
<!-- <li><i class="fas fa-caret-right text-red mr-1"></i> Blankets (especially in winter)</li>-->
<!-- <li><i class="fas fa-caret-right text-red mr-1"></i> New/Gently Used Clothing</li>-->
<!-- </ul>-->
<!-- <p class="lite mt-3">Please ensure food items are well within their expiry date and other items are clean and usable.</p>-->
<a href="contact.html" class="btn btn-outline-danger demi mt-2">Arrange Drop-off</a>
</div>
</div>
<div class="col-md-4">
<div class="way-to-help-card">
<div class="icon"><i class="fas fa-birthday-cake"></i></div>
<h4 class="demi">Fundraise for Us</h4>
<p class="lite">Dedicate your birthday, anniversary, or run a campaign to support Ashraya Trust's activities.</p>
<a href="contact.html" class="btn btn-outline-danger demi">Get Started</a>
</div>
</div>
<div class="col-md-4">
<div class="way-to-help-card">
<div class="icon"><i class="fas fa-handshake"></i></div>
<h4 class="demi">Corporate Partnership</h4>
<p class="lite">Partner with Ashraya Trust through your company's Corporate Social Responsibility (CSR) initiatives, organize employee volunteering days, or explore program sponsorships.</p>
<a target="_blank" href="https://forms.gle/HXCWCZhCj13bvQH36" class="btn btn-outline-danger demi">Enquire Now</a>
</div>
</div>
</div>
</div>
</section>
<footer class="footer text-white">
<div class="container py-4">
<div class="row">
<div class="col-lg-4 col-md-5 mb-4">
<h5 class="demi mb-3">Contact Us</h5>
<p class="lite mb-1"><strong>Address:</strong> Ashraya Trust, Plot No. 294, Vishnu Township, NH-44, Kurnool, AP 518003</p>
<p class="lite mb-0"><strong>Phone:</strong> <a href="tel:+919494508160" class="text-white">+91 9494508160(Shiv Charan)</a></p>
<p class="lite mb-0"><strong>Phone:</strong> <a href="tel:+918885321888" class="text-white">+91 918885321888(Ram Manikanta)</a></p>
<p class="lite mb-1"><strong>Email:</strong> <a href="mailto:jaimaa@ashrayatrust.org" class="text-white">jaimaa@ashrayatrust.org</a></p>
<div class="social-icons">
<strong>Follow Us:</strong>
<a target="_blank" href="https://www.facebook.com/TARASHRAYA" class="text-white d-inline-block ml-2 mr-2" style="font-size: 1.4em;" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
<a target="_blank" href="https://www.youtube.com/@ashrayatrust" class="text-white d-inline-block mr-2" style="font-size: 1.4em;" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
</div>
</div>
<div class="col-lg-2 col-md-3 mb-4">
<h5 class="demi mb-3">Quick Links</h5>
<ul class="list-unstyled">
<li><a href="about.html" class="text-white lite">About Us</a></li>
<li><a href="our-work.html" class="text-white lite">Our Work</a></li>
<li><a href="get-involved.html" class="text-white lite">Get Involved</a></li>
<li><a href="donate.html" class="text-white lite">Donate</a></li>
<li><a href="contact.html" class="text-white lite">Contact</a></li>
</ul>
</div>
<div class="col-lg-3 col-md-4 mb-4">
<h5 class="demi mb-3">Legal</h5>
<ul class="list-unstyled">
<li><a href="terms-conditions.html" class="text-white lite">Terms & Conditions</a></li>
<li><a href="privacy-policy.html" class="text-white lite">Privacy Policy</a></li>
<li><a href="cancellation-refund.html" class="text-white lite">Cancellation & Refund</a></li>
<li><a href="shipping-policy.html" class="text-white lite">Shipping & Delivery</a></li>
</ul>
</div>
</div>
<hr style="border-top: 1px solid rgba(255,255,255,0.2);">
<div class="text-center lite" style="font-size: 0.9em;">
© <span id="copyright-year"></span> Ashraya Trust. All Rights Reserved.
</div>
</div>
</footer>
</div>
<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Mobile nav toggle
$('.navbar-toggle').on('click', function(event){
event.stopPropagation();
var target = $(this).data('target');
$(target).slideToggle(200);
});
// Close mobile nav if clicked outside
$(document).on('click', function(event) {
if (!$(event.target).closest('#sidebar-nav, .navbar-toggle').length) {
if ($('#sidebar-nav').is(":visible")) {
$('#sidebar-nav').slideUp(200);
}
}
});
// Close mobile nav using the close icon inside
$('#sidebar-nav .fa-times').on('click', function(){
$('#sidebar-nav').slideUp(200);
});
// Dynamic Copyright Year
document.getElementById('copyright-year').textContent = new Date().getFullYear();
// **** REVISED Web Share API Logic for all share triggers ****
document.addEventListener('DOMContentLoaded', (event) => {
const shareTriggers = document.querySelectorAll('.share-trigger');
const shareAction = async (e) => {
// For <a> tags, prevent default navigation if event object 'e' is passed
if (e && typeof e.preventDefault === 'function') {
e.preventDefault();
}
const shareData = {
title: 'Ashraya Trust - Serving the Needy', // Customize title
text: 'Support Ashraya Trust in their mission to provide food, medical aid, and education to the needy in Kurnool.', // Customize text
url: window.location.origin // Shares the main website URL (e.g., https://www.yourngo.org)
};
try {
// Check navigator.share again inside the async function, in case support changed
if (navigator.share) {
await navigator.share(shareData);
console.log('Ashraya Trust page shared successfully');
} else {
console.log('Web Share API became unavailable or was not supported when trying to share.');
// Optionally hide the trigger if it was somehow clicked without API support
if (e && e.currentTarget) {
e.currentTarget.style.display = 'none';
}
}
} catch (err) {
console.error('Share failed:', err.message);
// Errors can happen if user cancels, or if sharing is not possible (e.g. no apps)
}
};
if (shareTriggers.length > 0 && navigator.share) {
shareTriggers.forEach(trigger => {
// Set display based on context. 'inline-block' is a good general choice.
// For <a> inside <li> (mobile nav), Bootstrap's .nav-link usually handles block display.
// Explicitly setting it here ensures visibility.
trigger.style.display = 'inline-block';
trigger.addEventListener('click', shareAction);
});
} else {
shareTriggers.forEach(trigger => {
trigger.style.display = 'none'; // Ensure all share triggers are hidden if API not supported
});
if (shareTriggers.length > 0 && !navigator.share) {
console.log('Web Share API not supported. Share buttons/links are hidden.');
} else if (shareTriggers.length === 0) {
// This case should ideally not happen if elements are correctly added with 'share-trigger' class
console.log('No elements with class "share-trigger" found.');
}
}
});
// **** END REVISED Web Share API Logic ****
</script>
</body>
</html>