Repository navigation
Expand file tree
/
Copy pathcontact.html
More file actions
446 lines (416 loc) · 27.9 KB
/
Copy pathcontact.html
File metadata and controls
446 lines (416 loc) · 27.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
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
<!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>Contact Ashraya Trust</title>
<meta name="description" content="Get in touch with Ashraya Trust. Find our contact details, address, location map, and send us a message through our contact form.">
<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 contact 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; }
.contact-details { background-color: #f8f9fa; padding: 2rem; border-radius: 8px; }
.contact-details h4 { color: #A70D17; }
.contact-form { background-color: #fff; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
#map-placeholder { height: 400px; background-color: #eee; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #6c757d; border: 1px dashed #ccc; margin-top: 2rem;}
/* 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%);
}
}
@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;
}
}
/* Re-enable form that was hidden */
#contact-form-wrapper { display: block !important; }
</style>
<!-- Add reCAPTCHA script if using -->
<!-- <script defer src="https://www.google.com/recaptcha/api.js" async defer></script> -->
</head>
<body>
<div id="app" class="contact-page">
<!-- Header (Use the same header structure as about.html) -->
<!-- <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="#" class="text-white d-inline-block mr-3" style="font-size: 1.5em;" aria-label="Instagram"> <i class="fab fa-instagram"></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 (Use the same structure as index.html) –>-->
<!-- <div id="mobile-nav" class="d-lg-none"> <!– Show only on smaller screens –>-->
<!-- <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>Contact Us</h1>
<p class="lead">We'd love to hear from you.</p>
</div>
</section>
<!-- Main Content -->
<main class="container py-5">
<div class="row">
<div class="col-lg-5 mb-4 mb-lg-0">
<div class="contact-details h-100">
<h3 class="demi text-red mb-4">Get in Touch</h3>
<h4 class="demi"><i class="fas fa-phone-alt mr-2 text-red"></i>Telephone</h4>
<p class="lite ml-4">Shiv Charan: <a class="text-grey" href="tel:+919494508160">+919494508160</a></p>
<p class="lite ml-4">Ram Manikanta: <a class="text-grey" href="tel:+918885321888">+918885321888</a></p>
<h4 class="demi mt-4"><i class="fas fa-map-marker-alt mr-2 text-red"></i>Address</h4>
<p class="lite ml-4">The Ashraya Trust<br>
Plot No. 294, Vishnu Township,<br>
NH-44, Kurnool, AP 518003<br>
India
</p>
<h4 class="demi mt-4"><i class="fas fa-envelope mr-2 text-red"></i>Email</h4>
<p class="lite ml-4"><a href="mailto:jaimaa@ashrayatrust.org" class="text-grey">jaimaa@ashrayatrust.org</a></p>
<!-- Add Email if available -->
<h4 class="demi mt-4"><i class="fas fa-share-alt mr-2 text-red"></i>Social Media</h4>
<p class="lite ml-4">
<a target="_blank" href="https://www.facebook.com/TARASHRAYA" class="text-red d-inline-block mr-3" style="font-size: 1.5em;"><i class="fab fa-facebook-f" style="color: #173e7d;"></i></a>
<a target="_blank" href="https://www.youtube.com/@ashrayatrust" class="d-inline-block mr-3" style="font-size: 1.5em;" aria-label="YouTube"> <i class="fab fa-youtube" style="color: #f83044;"></i> </a>
<!-- Add other social links -->
</p>
<div id="map-placeholder" class="mt-4">
<!-- Placeholder for Google Maps Embed -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3838.4748751095376!2d78.0128673!3d15.8316196!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bb5e0ae91d39141%3A0x5f6feafb0ff60d9c!2sAshraya%20Trust!5e0!3m2!1sen!2sin!4v1744440927432!5m2!1sen!2sin" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
</div>
<div class="col-lg-7">
<div class="contact-form">
<h3 class="demi text-red mb-4">Send Us a Message</h3>
<div class="google-form-embed">
<iframe src="https://forms.gle/Ztrv11RMP8hyjQLY6" width="100%" height="950">Loading…</iframe>
</div>
</div>
</div>
</div>
</main>
<footer class="footer text-white">
<div class="container py-4">
<div class="row">
<!-- Contact Info + Social -->
<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>
<!-- **** REMOVED bottom margin from first phone number **** -->
<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>
<!-- Margin below second Phone (before Email) -->
<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>
<!-- Add other icons here if needed -->
</div>
</div>
<!-- Quick Links -->
<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>
<!-- Legal Links -->
<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(); // Prevent event bubbling
var target = $(this).data('target');
// Use slideToggle for a smoother effect, or just toggle
$(target).slideToggle(200); // Adjust speed as needed
});
// Close mobile nav if clicked outside
$(document).on('click', function(event) {
if (!$(event.target).closest('#sidebar-nav, .navbar-toggle').length) {
// Check if the sidebar is currently visible before hiding
if ($('#sidebar-nav').is(":visible")) {
$('#sidebar-nav').slideUp(200); // Use slideUp to match slideToggle
}
}
});
// Close mobile nav using the close icon inside
$('#sidebar-nav .fa-times').on('click', function(){
$('#sidebar-nav').slideUp(200); // Use slideUp
});
// 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>