ziongospelministry.org/contact.html at master · jvinodraj/ziongospelministry.org · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contact | Zion Gospel Ministry</title>
  <meta name="description" content="Contact Zion Gospel Ministry for prayer, service details, visitor support, and ministry information.">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Source+Sans+3:wght@400;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="assets/css/style.css">
  <script defer src="assets/js/site.js"></script>
</head>
<body>
  <a class="skip-link" href="#main-content">Skip to content</a>
  <header class="site-header">
    <div class="container nav">
      <a class="brand" href="index.html"><span class="cross-mark"></span><span class="brand-name">Zion Gospel Ministry</span></a>
      <button class="menu-btn" type="button" data-menu-toggle aria-expanded="false" aria-controls="main-nav">Menu</button>
      <nav id="main-nav" class="nav-links" aria-label="Main Navigation">
        <a href="index.html">Home</a>
        <a href="bible-reader.html">Bible</a>
        <a class="active" href="contact.html">Contact</a>
      </nav>
      <div class="top-actions"><button class="theme-btn" type="button" data-theme-toggle>Dark Mode</button></div>
    </div>
  </header>

  <main id="main-content">
    <div class="container">
      <section class="card reveal" id="visit">
        <h1>Contact & Visit</h1>
        <p class="muted">We would be honored to welcome you and pray with you.</p>
      </section>

      <section class="section reveal">
        <div class="grid grid-2">
          <article class="card">
            <h3>Service Information</h3>
            <div class="service-info">
              <section class="service-item" aria-label="Sunday Services">
                <h4>Sunday Services</h4>
                <p class="service-subline">1st Service: 6:00 AM - 8:00 AM</p>
                <p class="service-subline">2nd Service: 8:15 AM - 10:00 AM</p>
                <p class="service-subline">3rd Service: 10:30 AM - 12:00 PM</p>
              </section>
              <section class="service-item" aria-label="Fasting Prayer">
                <h4>Fasting Prayer</h4>
                <p class="service-subline">Friday 10:30 AM - 12:00 PM</p>
              </section>
              <section class="service-item" aria-label="Junior Sunday Class">
                <h4>Junior Sunday Class</h4>
                <p class="service-subline">Sunday 4:00 PM - 5:30 PM</p>
              </section>
            </div>
            <h3>Location</h3>
            <p>Chennai, Tamil Nadu, India</p>
            <div style="border-radius: 12px; overflow: hidden; margin: 0.75rem 0;">
              <a href="https://maps.app.goo.gl/DefDBPsvYjo8B8f46" target="_blank" rel="noopener" style="display: block; text-decoration: none; cursor: pointer; pointer-events: auto; width: 100%;">
              <iframe
                title="Zion Gospel Ministry Location"
                src="https://www.google.com/maps?q=13.0640071,80.2112303&z=17&output=embed"
                width="100%"
                height="280"
                style="border:0; pointer-events: none; display: block;"
                loading="lazy"
                referrerpolicy="no-referrer-when-downgrade"
                allowfullscreen>
              </iframe>
              </a>
            </div>
            <p>
              <a href="https://maps.app.goo.gl/DefDBPsvYjo8B8f46" target="_blank" rel="noopener">
                Get Directions in Google Maps
              </a>
            </p>
          </article>

          <article class="card">
            <h3>Message Us</h3>
            <form data-generic-form data-email-submit data-api-dev="http://127.0.0.1:8787" data-api-prod="https://api.ziongospelministry.org" action="/api/contact" method="POST">
              <div class="form-grid">
                <label>Name<input name="name" required></label>
                <label>Email<input type="email" name="email" required></label>
                <label>Subject<input name="subject"></label>
                <label>Message<textarea name="message" required></textarea></label>
              </div>
              <div class="hero-cta"><button class="btn" type="submit">Send Message</button></div>
              <p class="muted" data-form-message></p>
            </form>
          </article>
        </div>
      </section>

      <section class="section reveal" id="small-groups">
        <div class="grid grid-2">
          <article class="card">
            <h3>Small Group Registration</h3>
            <form data-generic-form data-email-submit data-api-dev="http://127.0.0.1:8787" data-api-prod="https://api.ziongospelministry.org" action="/api/small-group" method="POST">
              <div class="form-grid">
                <label>Name<input name="name" required></label>
                <label>Preferred Area<input name="area"></label>
                <label>Phone<input name="phone"></label>
                <label>Comments<textarea name="message"></textarea></label>
              </div>
              <div class="hero-cta"><button class="btn" type="submit">Register Interest</button></div>
              <p class="muted" data-form-message></p>
            </form>
          </article>

          <article class="card" id="volunteer">
            <h3>Volunteer Signup</h3>
            <form data-generic-form data-email-submit data-api-dev="http://127.0.0.1:8787" data-api-prod="https://api.ziongospelministry.org" action="/api/volunteer" method="POST">
              <div class="form-grid">
                <label>Name<input name="name" required></label>
                <label>Email<input type="email" name="email" required></label>
                <label>Ministry Interest<select name="ministry"><option>Children</option><option>Youth</option><option>Worship</option><option>Outreach</option><option>Prayer Team</option></select></label>
                <label>Notes<textarea name="message"></textarea></label>
              </div>
              <div class="hero-cta"><button class="btn" type="submit">Join Team</button></div>
              <p class="muted" data-form-message></p>
            </form>
          </article>
        </div>
      </section>
    </div>
  </main>

  <footer class="footer"><div class="container"><p><span id="year"></span> Zion Gospel Ministry</p></div></footer>
</body>
</html>