Merge pull request #4 from Rajaravi99/beta

Adding form data collection

index.html

@@ -191,10 +191,11 @@ <h1 class="title link">Contact Me</h1>
                 </div>
                 <div class="contact-right">
                     <h1 class="title link">Any Message For Me?</h1>
-                    <form action="">
-                        <input type="text" name="Name" placeholder="Your Name" required>
-                        <input type="text" name="email" placeholder="Your Email" required>
-                        <textarea name="Message" rows="6" placeholder="Your Message"></textarea>
+                    <form onsubmit="collectData(); reset(); return false;">
+                        <input type="text" id="Name" placeholder="Your Name" required>
+                        <input type="text" id="Email" placeholder="Your Email" required>
+                        <input type="number" id="Number" placeholder="Your Contact Number" required>
+                        <textarea id="Message" rows="6" placeholder="Your Message"></textarea>
                         <button type="submit" class="btn btn2">Submit</button>
                     </form>
                 </div>
@@ -206,17 +207,19 @@ <h1 class="title link">Any Message For Me?</h1>
         <p>Created and Copyright @ Ravi Nandan Ray</p>
     </div>
     <!-- popup -->
-    <div class="lightbox">
+    <!-- <div class="lightbox">
         <div class="iframeContainer">
             <div class="toolbarLB">
                 <span class="closeLB" onclick="lightBoxClose()"><i class="fa-solid fa-xmark"></i></span>
             </div>
-          <p>Not Optimized for Smartphones Yet</p>
-          <p>If opened on any other device, please close popup</p>
-          <p class="welcome">WELCOME!!</p>
-          <iframe width="800vw" height="100vh" frameborder="0"></iframe>
+            <p>Not Optimized for Smartphones Yet</p>
+            <p>If opened on any other device, please close popup</p>
+            <p class="welcome">WELCOME!!</p>
+            <iframe width="800vw" height="100vh" frameborder="0"></iframe>
         </div>
-      </div>
+    </div> -->
+    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
+    <script src="https://smtpjs.com/v3/smtp.js"></script>
     <script src="index.js"></script>
     <script src="https://kit.fontawesome.com/9d517f31da.js" crossorigin="anonymous"></script>
 </body>

index.js

@@ -12,4 +12,30 @@ function  openTab(tabName){
 }
 lightBoxClose = function() {
     document.querySelector(".lightbox").classList.add("closed");
+}
+let userName = document.getElementById('Name').value;
+let phone = document.getElementById('Number').value;
+let email = document.getElementById('Email').value;
+let message = document.getElementById('Message').value;
+let messageBody = "Name " + userName + "<br/> Phone " + phone + "<br/> Email " + email;
+console.log(messageBody);
+function collectData(){
+    Email.send({
+        Host : "smtp.elasticemail.com",
+        Username : "ravinandanray99@gmail.com",
+        Password : "2561EFA946BA99D8DDCDE91C2B135C7B6689",
+        To : 'ravinandanray99@gmail.com',
+        From : "ravinandanray99@gmail.com",
+        Subject : "This is the subject",
+        Body : messageBody
+    }).then(
+      message => {
+        if(message=='OK'){
+            swal("Secussfuly sent", "You clicked the button!", "success");
+        }
+        else{
+            swal("Error", "You clicked the button!", "error");
+        }
+      }
+    );
 }

smtp server password.txt

@@ -0,0 +1,5 @@
+password for smtp server API
+2561EFA946BA99D8DDCDE91C2B135C7B6689
+
+backup code
+640357

style.css

@@ -383,7 +383,7 @@ form input, form textarea{
     outline: #f32a07;
     padding: 15px;
     margin: 15px 0;
-    background: #f8f8fa;
+    background: #e7e7f6;
     color: #040404;
     font-size: 15px;
     border-radius: 20px;