Add subscribe

assets/css/toastify.css

@@ -0,0 +1,38 @@
+/* Custom Toastify styling */
+.toastify {
+    font-family: Arial, sans-serif;
+    font-size: 16px;
+    font-weight: 500;
+    padding: 16px;
+    border-radius: 8px;
+    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
+    text-align: center;
+}
+
+.toastify-success {
+    background: linear-gradient(135deg, #4CAF50, #81C784); /* Green gradient */
+    color: #fff;
+}
+
+.toastify-error {
+    background: linear-gradient(135deg, #FF3D00, #FF6E40); /* Red gradient */
+    color: #fff;
+}
+
+.toastify-close {
+    color: #fff;
+    font-weight: bold;
+    font-size: 18px;
+    line-height: 16px;
+}
+
+.toastify .toastify-content {
+    display: flex;
+    align-items: center;
+}
+
+/* Icon Styling */
+.toastify .toastify-icon {
+    margin-right: 10px;
+    font-size: 20px;
+}

assets/js/subscribe.js

@@ -0,0 +1,51 @@
+document.getElementById('newsletter-form').addEventListener('submit', async function(event) {
+    event.preventDefault();
+
+    const email = document.getElementById('email').value;
+
+    try {
+        const response = await fetch('http://localhost:3000/subscribe', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ email })
+        });
+
+        if (response.ok) {
+            // Show Toastify success notification
+            Toastify({
+                text: "Subscription successful! A confirmation email has been sent.",
+                duration: 3000,
+                close: true,
+                gravity: "top",
+                position: "right",
+                className: "toastify toastify-success",
+                stopOnFocus: true,
+            }).showToast();
+
+            document.getElementById('newsletter-form').reset();
+        } else {
+            Toastify({
+                text: "Failed to subscribe. Please try again.",
+                duration: 3000,
+                close: true,
+                gravity: "top",
+                position: "right",
+                className: "toastify toastify-error",
+                stopOnFocus: true,
+            }).showToast();
+        }
+    } catch (error) {
+        Toastify({
+            text: "Error occurred. Please check your connection and try again.",
+            duration: 3000,
+            close: true,
+            gravity: "top",
+            position: "right",
+            className: "toastify toastify-error",
+            stopOnFocus: true,
+        }).showToast();
+        console.error('Error:', error);
+    }
+});

backend/.env.example

@@ -0,0 +1,2 @@
+EMAIL_USER="your_email_user"
+EMAIL_PASS="email_password"

backend/controllers/subscribe.js

@@ -0,0 +1,39 @@
+const nodemailer = require('nodemailer');
+const dotenv = require('dotenv');
+dotenv.config()
+
+
+const transporter = nodemailer.createTransport({
+  service: 'gmail', 
+
+
+  auth: {
+    user: process.env.EMAIL_USER, 
+    pass: process.env.EMAIL_PASS  
+  }
+});
+
+const subscribeUser = async (req, res) => {
+  const { email } = req.body;
+
+  try {
+
+    const mailOptions = {
+      from: process.env.EMAIL_USER,
+      to: email,
+      subject: 'Thank you for subscribing to Metaverse!',
+      html: `<h3>Welcome to our Newsletter!</h3>
+             <p>Thank you for subscribing to metavserse Stay tuned for the latest updates.</p>`
+    };
+
+
+    await transporter.sendMail(mailOptions);
+
+    res.status(201).json({ message: 'Subscription successful! A confirmation email has been sent.' });
+  } catch (error) {
+    console.error('Error in subscribing user:', error);
+    res.status(500).json({ message: 'Oops! Something went wrong. Please try again.' });
+  }
+};
+
+module.exports = { subscribeUser };

backend/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "body-parser": "^1.20.2",
     "cors": "^2.8.5",
+    "dotenv": "^16.4.5",
     "express": "^4.19.2",
     "mongodb": "^6.8.0",
     "mongoose": "^8.5.2",

backend/server.js

@@ -1,8 +1,15 @@
-const express = require("express");
-const nodemailer = require("nodemailer");
-const bodyParser = require("body-parser");
-const cors = require("cors");
-const mongoose = require("mongoose");
+
+const express = require('express');
+const nodemailer = require('nodemailer');
+const bodyParser = require('body-parser');
+const cors = require('cors');
+const mongoose = require('mongoose');
+const { subscribeUser } = require('./controllers/subscribe');
+const dotenv = require('dotenv');
+dotenv.config();
+
+
+
 
 // Initialize Express app
 const app = express();
@@ -24,6 +31,7 @@ const contactSchema = new mongoose.Schema({
   email: String,
   message: String,
   date: { type: Date, default: Date.now },
+
 });
 
 const Contact = mongoose.model("Contact", contactSchema);
@@ -94,6 +102,8 @@ app.post("/contact", async (req, res) => {
   }
 });
 
+app.post("/subscribe", subscribeUser)
+
 // Start the server
 app.listen(PORT, () => {
   console.log(`Server running on port ${PORT}`);

index.html

@@ -48,7 +48,10 @@
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
   integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
   crossorigin="anonymous" referrerpolicy="no-referrer" />
-
+
+<!--toastify css-->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css"> 
+<link rel="stylesheet" href="assets/css/toastify.css">
 <style>
   body {
     overflow-x: hidden;
@@ -531,6 +534,8 @@ <h3>Subscribe to our Newsletter</h3>
     <script src="./assets/js/contributors.js"></script>
     <!-- <script src="./assets/js/mouse_transition.js"></script> -->
     <script src="scrolldownprogressbar.js"></script>
+    <script src="./assets/js/subscribe.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
 
   </div>
 </body>

package.json

@@ -1,5 +1,6 @@
 {
   "dependencies": {
-    "firebase": "^10.12.2"
+    "firebase": "^10.12.2",
+    "nodemailer": "^6.9.15"
   }
 }