From 6b381cf5b41b0ce1985b47c74b3f34129bba735b Mon Sep 17 00:00:00 2001
From: tinyforests <tyson@gardenerandson.com>
Date: Sun, 14 Sep 2025 18:50:05 +1000
Subject: [PATCH 1/4] Update evc-map.html

---
 evc-map.html | 75 ++++++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 70 insertions(+), 5 deletions(-)

diff --git a/evc-map.html b/evc-map.html
index 7394c98..471df4f 100644
--- a/evc-map.html
+++ b/evc-map.html
@@ -54,7 +54,7 @@ <h3 id="join-title">Join the Ecological Movement.</h3>
     <div id="map"></div>
   </div>
 
-  <!-- Modal with in-modal map -->
+  <!-- Modal -->
   <div id="evc-modal">
     <div class="modal-content">
       <div id="modal-map"></div>
@@ -68,10 +68,9 @@ <h3 id="join-title">Join the Ecological Movement.</h3>
         <p id="modal-evc-description"></p>
       </div>
 
-      <div id="modal-plants"></div>
-
+      <!-- EMAIL CAPTURE (Google Form as-is, can swap to Formspree later) -->
       <div id="email-section">
-        <p>Enter your email address to display your curated plant list.</p>
+        <p>Enter your email address and we’ll send a hand-picked plant list for your EVC.</p>
         <form
           id="gf-form"
           action="https://docs.google.com/forms/d/e/1_A5hwyk6EsMuE71yJp2TPed2THCnw3_6nfhE1qo5-Gc/formResponse"
@@ -87,10 +86,28 @@ <h3 id="join-title">Join the Ecological Movement.</h3>
             placeholder="you@example.com"
             required
           />
-          <button type="submit">Display plant list</button>
+          <button type="submit">Email me the list</button>
         </form>
         <iframe name="gf-iframe" style="display:none;"></iframe>
       </div>
+
+      <!-- EVC Tee Purchase -->
+      <section id="tee-section" class="card" style="margin-top:16px">
+        <h3>Buy your EVC Tee</h3>
+        <p class="muted">Printed with <strong id="tee-evc-text">Your EVC</strong> on the front.</p>
+        <div style="display:flex; gap:8px; align-items:center;">
+          <select id="tee-size" aria-label="Size" required>
+            <option value="" selected disabled>Choose size</option>
+            <option>XS</option><option>S</option><option>M</option>
+            <option>L</option><option>XL</option><option>XXL</option>
+          </select>
+          <button id="buy-tee-btn" type="button">Buy now</button>
+        </div>
+        <div id="tee-toast" role="status" aria-live="polite" style="margin-top:8px; display:none;"></div>
+        <div class="hint" style="margin-top:6px; color:#666;">
+          We’ll copy your EVC text automatically for checkout.
+        </div>
+      </section>
     </div>
   </div>
 
@@ -98,5 +115,53 @@ <h3 id="join-title">Join the Ecological Movement.</h3>
   <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
   <script src="https://unpkg.com/@turf/turf/turf.min.js"></script>
   <script src="evc-fetch.js"></script>
+
+  <!-- Tee + email helper -->
+  <script>
+  (function(){
+    // Grab EVC name once it’s been set by your evc-fetch.js logic
+    function updateTeeBlock(){
+      const evcName = (document.getElementById('modal-evc-name')?.textContent || '').trim() || 'Your EVC';
+      const teeLabel = document.getElementById('tee-evc-text');
+      if (teeLabel) teeLabel.textContent = evcName;
+    }
+
+    // Call whenever modal opens / evc is known
+    const observer = new MutationObserver(updateTeeBlock);
+    const target = document.getElementById('modal-evc-name');
+    if (target) observer.observe(target, { childList: true });
+
+    // Stripe link (replace with your real one)
+    const STRIPE_LINK = "https://buy.stripe.com/YOUR_PAYMENT_LINK";
+
+    const buyBtn  = document.getElementById('buy-tee-btn');
+    const sizeSel = document.getElementById('tee-size');
+    const toast   = document.getElementById('tee-toast');
+
+    function showToast(msg, ok=true){
+      toast.style.display = 'block';
+      toast.textContent = msg;
+      toast.style.color = ok ? 'inherit' : '#b00020';
+      setTimeout(()=> toast.style.display = 'none', 4000);
+    }
+
+    buyBtn?.addEventListener('click', async () => {
+      const size = sizeSel?.value;
+      if (!size) return showToast("Please choose a size.", false);
+
+      const evcText = (document.getElementById('modal-evc-name')?.textContent || '').trim() || 'Your EVC';
+
+      // Copy EVC name so user can paste it if Stripe field isn’t prefilled
+      try { await navigator.clipboard.writeText(evcText); } catch {}
+
+      if (!STRIPE_LINK.includes('YOUR_PAYMENT_LINK')) {
+        return showToast("Add your Stripe Payment Link URL in the code.", false);
+      }
+
+      const qs = new URLSearchParams({ evc: evcText, size }).toString();
+      window.location.href = `${STRIPE_LINK}?${qs}`;
+    });
+  })();
+  </script>
 </body>
 </html>

From a0285bdfea2098fb894cd35b0fbf4406ef419518 Mon Sep 17 00:00:00 2001
From: tinyforests <tyson@gardenerandson.com>
Date: Sun, 14 Sep 2025 19:12:53 +1000
Subject: [PATCH 2/4] Update evc-map.html

---
 evc-map.html | 127 +++++++++++++++------------------------------------
 1 file changed, 36 insertions(+), 91 deletions(-)

diff --git a/evc-map.html b/evc-map.html
index 471df4f..ed88aea 100644
--- a/evc-map.html
+++ b/evc-map.html
@@ -11,10 +11,33 @@
     rel="stylesheet"
   />
   <link rel="stylesheet" href="styles.css"/>
-  <link
-    rel="stylesheet"
-    href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
-  />
+  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
+
+  <!-- Tee preview minimal styles (safe to keep here; or move to styles.css) -->
+  <style>
+    /* Tee preview */
+    .tee-preview-wrap { margin-bottom: 12px; }
+    .tee-preview { display: grid; place-items: center; width: 100%; }
+    .tee-body {
+      position: relative; width: min(360px, 100%); aspect-ratio: 3 / 4;
+      background: #ffffff; border: 1px solid #e5e5e5; border-radius: 18px;
+      box-shadow: 0 6px 18px rgba(0,0,0,0.08); display: grid; place-items: center; overflow: hidden;
+    }
+    .tee-body::before, .tee-body::after {
+      content: ""; position: absolute; top: 12%; width: 28%; height: 22%;
+      background: inherit; border: 1px solid #e5e5e5; box-shadow: 0 6px 18px rgba(0,0,0,0.06);
+    }
+    .tee-body::before { left: -10%; transform: rotate(6deg); border-top-left-radius: 14px; }
+    .tee-body::after  { right: -10%; transform: rotate(-6deg); border-top-right-radius: 14px; }
+    .tee-print {
+      width: 78%; height: 38%; display: grid; place-items: center; text-align: center;
+      font-family: "Abril Fatface", serif; line-height: 1.05; padding: 8px;
+      font-size: clamp(18px, 5.2vw, 40px); color: #111111;
+    }
+    .tee-controls { display: flex; gap: 10px; margin-top: 10px; }
+    .tee-color { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; }
+    .tee-color input { accent-color: #111; }
+  </style>
 </head>
 <body>
   <div id="container">
@@ -29,15 +52,8 @@ <h2 id="page-title">Find Your Ecological Garden.</h2>
 
     <div id="search-container">
       <form id="address-form">
-        <input
-          type="text"
-          id="address-input"
-          placeholder="Enter your address"
-          required
-        />
-        <button id="search-button" type="submit">
-          Find My Garden
-        </button>
+        <input type="text" id="address-input" placeholder="Enter your address" required/>
+        <button id="search-button" type="submit">Find My Garden</button>
       </form>
     </div>
 
@@ -54,7 +70,7 @@ <h3 id="join-title">Join the Ecological Movement.</h3>
     <div id="map"></div>
   </div>
 
-  <!-- Modal -->
+  <!-- Modal with in-modal map -->
   <div id="evc-modal">
     <div class="modal-content">
       <div id="modal-map"></div>
@@ -68,7 +84,7 @@ <h3 id="join-title">Join the Ecological Movement.</h3>
         <p id="modal-evc-description"></p>
       </div>
 
-      <!-- EMAIL CAPTURE (Google Form as-is, can swap to Formspree later) -->
+      <!-- EMAIL CAPTURE (Google Form as-is) -->
       <div id="email-section">
         <p>Enter your email address and we’ll send a hand-picked plant list for your EVC.</p>
         <form
@@ -76,16 +92,11 @@ <h3 id="join-title">Join the Ecological Movement.</h3>
           action="https://docs.google.com/forms/d/e/1_A5hwyk6EsMuE71yJp2TPed2THCnw3_6nfhE1qo5-Gc/formResponse"
           method="POST"
           target="gf-iframe"
+          novalidate
         >
           <input type="hidden" name="entry.2031982455" id="gf-address"/>
           <input type="hidden" name="entry.1421103858" id="gf-evcCode"/>
-          <input
-            type="email"
-            name="entry.48659416"
-            id="gf-email"
-            placeholder="you@example.com"
-            required
-          />
+          <input type="email" name="entry.48659416" id="gf-email" placeholder="you@example.com" required/>
           <button type="submit">Email me the list</button>
         </form>
         <iframe name="gf-iframe" style="display:none;"></iframe>
@@ -95,73 +106,7 @@ <h3 id="join-title">Join the Ecological Movement.</h3>
       <section id="tee-section" class="card" style="margin-top:16px">
         <h3>Buy your EVC Tee</h3>
         <p class="muted">Printed with <strong id="tee-evc-text">Your EVC</strong> on the front.</p>
-        <div style="display:flex; gap:8px; align-items:center;">
-          <select id="tee-size" aria-label="Size" required>
-            <option value="" selected disabled>Choose size</option>
-            <option>XS</option><option>S</option><option>M</option>
-            <option>L</option><option>XL</option><option>XXL</option>
-          </select>
-          <button id="buy-tee-btn" type="button">Buy now</button>
-        </div>
-        <div id="tee-toast" role="status" aria-live="polite" style="margin-top:8px; display:none;"></div>
-        <div class="hint" style="margin-top:6px; color:#666;">
-          We’ll copy your EVC text automatically for checkout.
-        </div>
-      </section>
-    </div>
-  </div>
-
-  <!-- Leaflet, Turf & fetch logic -->
-  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
-  <script src="https://unpkg.com/@turf/turf/turf.min.js"></script>
-  <script src="evc-fetch.js"></script>
-
-  <!-- Tee + email helper -->
-  <script>
-  (function(){
-    // Grab EVC name once it’s been set by your evc-fetch.js logic
-    function updateTeeBlock(){
-      const evcName = (document.getElementById('modal-evc-name')?.textContent || '').trim() || 'Your EVC';
-      const teeLabel = document.getElementById('tee-evc-text');
-      if (teeLabel) teeLabel.textContent = evcName;
-    }
-
-    // Call whenever modal opens / evc is known
-    const observer = new MutationObserver(updateTeeBlock);
-    const target = document.getElementById('modal-evc-name');
-    if (target) observer.observe(target, { childList: true });
-
-    // Stripe link (replace with your real one)
-    const STRIPE_LINK = "https://buy.stripe.com/YOUR_PAYMENT_LINK";
-
-    const buyBtn  = document.getElementById('buy-tee-btn');
-    const sizeSel = document.getElementById('tee-size');
-    const toast   = document.getElementById('tee-toast');
-
-    function showToast(msg, ok=true){
-      toast.style.display = 'block';
-      toast.textContent = msg;
-      toast.style.color = ok ? 'inherit' : '#b00020';
-      setTimeout(()=> toast.style.display = 'none', 4000);
-    }
-
-    buyBtn?.addEventListener('click', async () => {
-      const size = sizeSel?.value;
-      if (!size) return showToast("Please choose a size.", false);
-
-      const evcText = (document.getElementById('modal-evc-name')?.textContent || '').trim() || 'Your EVC';
-
-      // Copy EVC name so user can paste it if Stripe field isn’t prefilled
-      try { await navigator.clipboard.writeText(evcText); } catch {}
-
-      if (!STRIPE_LINK.includes('YOUR_PAYMENT_LINK')) {
-        return showToast("Add your Stripe Payment Link URL in the code.", false);
-      }
 
-      const qs = new URLSearchParams({ evc: evcText, size }).toString();
-      window.location.href = `${STRIPE_LINK}?${qs}`;
-    });
-  })();
-  </script>
-</body>
-</html>
+        <!-- Tee mock preview -->
+        <div class="tee-preview-wrap">
+          <div class="t

From 126a4613f13dc0535902d45b784a02867da4c3f2 Mon Sep 17 00:00:00 2001
From: tinyforests <tyson@gardenerandson.com>
Date: Sun, 14 Sep 2025 19:20:08 +1000
Subject: [PATCH 3/4] Update evc-map.html

---
 evc-map.html | 74 +++++++++++++++++++++++-----------------------------
 1 file changed, 32 insertions(+), 42 deletions(-)

diff --git a/evc-map.html b/evc-map.html
index ed88aea..7394c98 100644
--- a/evc-map.html
+++ b/evc-map.html
@@ -11,33 +11,10 @@
     rel="stylesheet"
   />
   <link rel="stylesheet" href="styles.css"/>
-  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
-
-  <!-- Tee preview minimal styles (safe to keep here; or move to styles.css) -->
-  <style>
-    /* Tee preview */
-    .tee-preview-wrap { margin-bottom: 12px; }
-    .tee-preview { display: grid; place-items: center; width: 100%; }
-    .tee-body {
-      position: relative; width: min(360px, 100%); aspect-ratio: 3 / 4;
-      background: #ffffff; border: 1px solid #e5e5e5; border-radius: 18px;
-      box-shadow: 0 6px 18px rgba(0,0,0,0.08); display: grid; place-items: center; overflow: hidden;
-    }
-    .tee-body::before, .tee-body::after {
-      content: ""; position: absolute; top: 12%; width: 28%; height: 22%;
-      background: inherit; border: 1px solid #e5e5e5; box-shadow: 0 6px 18px rgba(0,0,0,0.06);
-    }
-    .tee-body::before { left: -10%; transform: rotate(6deg); border-top-left-radius: 14px; }
-    .tee-body::after  { right: -10%; transform: rotate(-6deg); border-top-right-radius: 14px; }
-    .tee-print {
-      width: 78%; height: 38%; display: grid; place-items: center; text-align: center;
-      font-family: "Abril Fatface", serif; line-height: 1.05; padding: 8px;
-      font-size: clamp(18px, 5.2vw, 40px); color: #111111;
-    }
-    .tee-controls { display: flex; gap: 10px; margin-top: 10px; }
-    .tee-color { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; }
-    .tee-color input { accent-color: #111; }
-  </style>
+  <link
+    rel="stylesheet"
+    href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+  />
 </head>
 <body>
   <div id="container">
@@ -52,8 +29,15 @@ <h2 id="page-title">Find Your Ecological Garden.</h2>
 
     <div id="search-container">
       <form id="address-form">
-        <input type="text" id="address-input" placeholder="Enter your address" required/>
-        <button id="search-button" type="submit">Find My Garden</button>
+        <input
+          type="text"
+          id="address-input"
+          placeholder="Enter your address"
+          required
+        />
+        <button id="search-button" type="submit">
+          Find My Garden
+        </button>
       </form>
     </div>
 
@@ -84,29 +68,35 @@ <h3 id="join-title">Join the Ecological Movement.</h3>
         <p id="modal-evc-description"></p>
       </div>
 
-      <!-- EMAIL CAPTURE (Google Form as-is) -->
+      <div id="modal-plants"></div>
+
       <div id="email-section">
-        <p>Enter your email address and we’ll send a hand-picked plant list for your EVC.</p>
+        <p>Enter your email address to display your curated plant list.</p>
         <form
           id="gf-form"
           action="https://docs.google.com/forms/d/e/1_A5hwyk6EsMuE71yJp2TPed2THCnw3_6nfhE1qo5-Gc/formResponse"
           method="POST"
           target="gf-iframe"
-          novalidate
         >
           <input type="hidden" name="entry.2031982455" id="gf-address"/>
           <input type="hidden" name="entry.1421103858" id="gf-evcCode"/>
-          <input type="email" name="entry.48659416" id="gf-email" placeholder="you@example.com" required/>
-          <button type="submit">Email me the list</button>
+          <input
+            type="email"
+            name="entry.48659416"
+            id="gf-email"
+            placeholder="you@example.com"
+            required
+          />
+          <button type="submit">Display plant list</button>
         </form>
         <iframe name="gf-iframe" style="display:none;"></iframe>
       </div>
+    </div>
+  </div>
 
-      <!-- EVC Tee Purchase -->
-      <section id="tee-section" class="card" style="margin-top:16px">
-        <h3>Buy your EVC Tee</h3>
-        <p class="muted">Printed with <strong id="tee-evc-text">Your EVC</strong> on the front.</p>
-
-        <!-- Tee mock preview -->
-        <div class="tee-preview-wrap">
-          <div class="t
+  <!-- Leaflet, Turf & fetch logic -->
+  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+  <script src="https://unpkg.com/@turf/turf/turf.min.js"></script>
+  <script src="evc-fetch.js"></script>
+</body>
+</html>

From 7e3782a2960e68b8db2793574c994afda7fbe9b0 Mon Sep 17 00:00:00 2001
From: tinyforests <tyson@gardenerandson.com>
Date: Sun, 14 Sep 2025 19:52:41 +1000
Subject: [PATCH 4/4] Update evc-map.html

---
 evc-map.html | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/evc-map.html b/evc-map.html
index 7394c98..d123e60 100644
--- a/evc-map.html
+++ b/evc-map.html
@@ -98,5 +98,33 @@ <h3 id="join-title">Join the Ecological Movement.</h3>
   <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
   <script src="https://unpkg.com/@turf/turf/turf.min.js"></script>
   <script src="evc-fetch.js"></script>
+
+  <!-- Loading state for search button -->
+  <script>
+    document.addEventListener("DOMContentLoaded", () => {
+      const form = document.getElementById("address-form");
+      const btn = document.getElementById("search-button");
+
+      if (form && btn) {
+        form.addEventListener("submit", () => {
+          // Change button to loading state
+          btn.disabled = true;
+          btn.textContent = "Finding…";
+
+          // Reset back once evc-fetch.js work finishes
+          // Listen for modal open as a signal
+          const modal = document.getElementById("evc-modal");
+          const observer = new MutationObserver(() => {
+            if (modal.style.display !== "none") {
+              btn.disabled = false;
+              btn.textContent = "Find My Garden";
+              observer.disconnect();
+            }
+          });
+          observer.observe(modal, { attributes: true, attributeFilter: ["style"] });
+        });
+      }
+    });
+  </script>
 </body>
 </html>