YouKnowZo · YouKnowZo · Apr 14, 2025
diff --git a/backend/server.js b/backend/server.js
@@ -2,6 +2,7 @@ const express = require('express');
 const fs = require('fs');
 const path = require('path');
 const bodyParser = require('body-parser');
+const nodemailer = require('nodemailer');
 
 const app = express();
 const PORT = process.env.PORT || 3000;
@@ -27,9 +28,30 @@ app.post('/contact', (req, res) => {
         return res.status(400).json({ error: 'All fields are required' });
     }
 
-    // Here you can add code to save the contact form data to a database or send an email
+    // Create a transporter object using the default SMTP transport
+    const transporter = nodemailer.createTransport({
+        service: 'gmail',
+        auth: {
+            user: 'your-email@gmail.com',
+            pass: 'your-email-password'
+        }
+    });
+
+    // Set up email data
+    const mailOptions = {
+        from: email,
+        to: 'your-email@gmail.com',
+        subject: 'New Contact Form Submission',
+        text: `Name: ${name}\nEmail: ${email}\nMessage: ${message}`
+    };
 
-    res.json({ success: 'Contact form submitted successfully' });
+    // Send email
+    transporter.sendMail(mailOptions, (error, info) => {
+        if (error) {
+            return res.status(500).json({ error: 'Failed to send email' });
+        }
+        res.json({ success: 'Contact form submitted successfully' });
+    });
 });
 
 app.listen(PORT, () => {

diff --git a/docs/README.md b/docs/README.md
@@ -6,6 +6,7 @@ A beautiful, responsive website for keto recipes with:
 - Mobile-friendly design
 - Countdown timer
 - Testimonials section
+- Contact form functionality
 
 ## Deployment
 1. Upload to GitHub
@@ -20,3 +21,6 @@ A beautiful, responsive website for keto recipes with:
 4. Run `npm install` to install dependencies
 5. Run `npm start` to start the backend server
 6. The backend API will be available at `http://localhost:3000`
+
+## Contact Form
+The website includes a contact form on the `index.html` and `about.html` pages. The form allows users to submit their name, email, and message. The form data is sent to the backend API, which handles the submission by sending an email with the form details.
diff --git a/docs/about.html b/docs/about.html
@@ -185,6 +185,30 @@ <h3 class="font-bold text-xl mb-3">Emily Johnson</h3>
         </div>
     </section>
 
+    <!-- Contact Form -->
+    <section class="py-16 bg-gray-100">
+        <div class="container mx-auto px-4 max-w-4xl">
+            <h2 class="font-serif text-3xl md:text-4xl font-bold text-center mb-12">
+                Contact <span class="text-accent">Us</span>
+            </h2>
+            <form id="contactForm" class="bg-white p-6 rounded-lg shadow-md">
+                <div class="mb-4">
+                    <label for="name" class="block text-gray-700 font-bold mb-2">Name</label>
+                    <input type="text" id="name" name="name" class="w-full p-3 border border-gray-300 rounded-lg" required>
+                </div>
+                <div class="mb-4">
+                    <label for="email" class="block text-gray-700 font-bold mb-2">Email</label>
+                    <input type="email" id="email" name="email" class="w-full p-3 border border-gray-300 rounded-lg" required>
+                </div>
+                <div class="mb-4">
+                    <label for="message" class="block text-gray-700 font-bold mb-2">Message</label>
+                    <textarea id="message" name="message" class="w-full p-3 border border-gray-300 rounded-lg" rows="5" required></textarea>
+                </div>
+                <button type="submit" class="btn-gold bg-accent text-primary font-bold py-3 px-6 rounded-lg">Submit</button>
+            </form>
+        </div>
+    </section>
+
     <!-- Footer -->
     <footer class="bg-primary text-white py-12">
         <div class="container mx-auto px-4">
@@ -309,6 +333,44 @@ <h4 class="font-bold text-lg mb-4">Connect With Us</h4>
                 }
             });
         });
+
+        // Backend API Endpoints
+        async function fetchRecipes() {
+            try {
+                const response = await fetch('https://api.ketoelite.tk/recipes');
+                const data = await response.json();
+                console.log(data);
+            } catch (error) {
+                console.error('Error fetching recipes:', error);
+            }
+        }
+
+        async function submitContactForm(formData) {
+            try {
+                const response = await fetch('https://api.ketoelite.tk/contact', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify(formData)
+                });
+                const data = await response.json();
+                console.log(data);
+            } catch (error) {
+                console.error('Error submitting contact form:', error);
+            }
+        }
+
+        // Contact Form Submission
+        document.getElementById('contactForm').addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const formData = {
+                name: document.getElementById('name').value,
+                email: document.getElementById('email').value,
+                message: document.getElementById('message').value
+            };
+            await submitContactForm(formData);
+        });
     </script>
 </body>
 </html>
diff --git a/docs/index.html b/docs/index.html
@@ -623,6 +623,41 @@ <h4 class="font-bold text-lg mb-4">Connect With Us</h4>
                 console.error('Error submitting contact form:', error);
             }
         }
+
+        // Contact Form Submission
+        document.getElementById('contactForm').addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const formData = {
+                name: document.getElementById('name').value,
+                email: document.getElementById('email').value,
+                message: document.getElementById('message').value
+            };
+            await submitContactForm(formData);
+        });
     </script>
+
+    <!-- Contact Form -->
+    <section class="py-16 bg-gray-100">
+        <div class="container mx-auto px-4 max-w-4xl">
+            <h2 class="font-serif text-3xl md:text-4xl font-bold text-center mb-12">
+                Contact <span class="text-accent">Us</span>
+            </h2>
+            <form id="contactForm" class="bg-white p-6 rounded-lg shadow-md">
+                <div class="mb-4">
+                    <label for="name" class="block text-gray-700 font-bold mb-2">Name</label>
+                    <input type="text" id="name" name="name" class="w-full p-3 border border-gray-300 rounded-lg" required>
+                </div>
+                <div class="mb-4">
+                    <label for="email" class="block text-gray-700 font-bold mb-2">Email</label>
+                    <input type="email" id="email" name="email" class="w-full p-3 border border-gray-300 rounded-lg" required>
+                </div>
+                <div class="mb-4">
+                    <label for="message" class="block text-gray-700 font-bold mb-2">Message</label>
+                    <textarea id="message" name="message" class="w-full p-3 border border-gray-300 rounded-lg" rows="5" required></textarea>
+                </div>
+                <button type="submit" class="btn-gold bg-accent text-primary font-bold py-3 px-6 rounded-lg">Submit</button>
+            </form>
+        </div>
+    </section>
 </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "nodemailer": "^6.10.1"
+  }
+}