Add faucet pages to handlebars

Gruntfile.js

@@ -41,7 +41,7 @@ module.exports = function (grunt) {
          build: {
             files: {
                'build/js/vendors.min.js': ['./node_modules/jquery/dist/jquery.min.js'],
-               'build/js/bundle.min.js': ['./src/js/menu.js', './src/js/accordion.js', './src/js/mailChimp.js', './src/js/scroll.js']
+               'build/js/bundle.min.js': ['./src/js/faucet.js','./src/js/menu.js', './src/js/accordion.js', './src/js/mailChimp.js', './src/js/faucet.js', './src/js/scroll.js']
              }
          }
       },

sitemap.xml

@@ -17,6 +17,12 @@
         <lastmod>2023-08-24</lastmod>
         <changefreq>quarterly</changefreq>
         <priority>1.1.0</priority>
+    </url>
+       <url>
+        <loc>https://muzikie.com/faucet</loc>
+        <lastmod>2023-08-24</lastmod>
+        <changefreq>quarterly</changefreq>
+        <priority>1.1.0</priority>
     </url>
     <url>
         <loc>https://muzikie.com/privacy</loc>

src/js/faucet.js

@@ -0,0 +1,22 @@
+async function sendTokens (e) {
+    e.preventDefault();
+    const formBody = JSON.stringify(Object.fromEntries(new FormData(this)));
+    try {
+        const response = await fetch(this.action, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: formBody, // Send the data as JSON
+        });
+        const data = await response.json();
+        document.getElementById('faucet-feedback').textContent = data.success ? 'Sent. Check your wallet!' : 'Something went wrong. Try again later.';
+    } catch (error) {
+        document.getElementById('faucet-feedback').textContent = error.message;
+    }
+};
+
+document.addEventListener('DOMContentLoaded', () => {
+    const form = document.getElementById('faucet-form');
+    form.addEventListener('submit', sendTokens);
+});

src/pages/faucet.handlebars

@@ -0,0 +1,48 @@
+{{> head title="faucet" }}
+<section class="light-mode space_section_last">
+    <div class="container is--stage">
+        <div class="container__text is--stage">
+            <div class="container__16">
+                <div class="div-block artist form">
+                <div class="container__16 max">
+                    <h2 class="h2">All tokens are for testing purposes only</h2>
+                    <p class="is--small is--accordion">
+                        Please enter your address to receive 10 MZK tokens for free
+                    </p>
+                </div>
+                <form
+                  action="http://localhost:9902/faucet"
+                  id="faucet-form"
+                  class="form artist pioneer"
+                >
+                    <div class="scrollpane">
+                        <div class="container__16 is--form">
+                            <div class="text-field__container is--vertical">
+                            <div class="field">
+                                <div class="text-input custom">
+                                    <div class="html-field w-embed">
+                                        <input class="custom-input" placeholder="Address*" type="text" name="address" id="mce-ADDRESS" maxlength="42" required>
+                                        <label class="floating-label" for="mce-ADDRESS">Address*</label>
+                                    </div>
+                                </div>
+                            </div>
+                            </div>
+                            <div class="text-field__container is--button">
+                                <button type="submit" class="button is--small is--submit w-button">Submit</button>
+                            </div>
+                            <div class="text-field__container is--button">
+                                <div class="label" id="faucet-feedback"></div>
+                            </div>
+                        </div>
+                    </div>
+                </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+{{> footer}}
+{{> desktopNavigation}}
+{{> mobileNavigation}}
+{{> backToTop}}
+{{> closing}}

src/templates/footer.handlebars

@@ -15,6 +15,9 @@
             <div class="footer__text">
                 <a href="/terms" class="menu__link is--imprint">Terms of Use</a>
             </div>
+            <div class="footer__text">
+                <a href="/faucet" class="menu__link is--imprint">Faucet</a>
+            </div>
             </div>
         </div>
     </div>