From 38f00597aea60bb3acf79b1b82bfff7362ad5b17 Mon Sep 17 00:00:00 2001
From: BenjaminToby <52448020+BenjaminToby@users.noreply.github.com>
Date: Sat, 19 Jun 2021 07:42:33 +0100
Subject: [PATCH] Add more features and form

---
 contact-form-process.php | 76 ++++++++++++++++++++++++++++++++++
 scripts/v3.js            | 74 ++++++++++++++++++++++++++++++++-
 v3.css                   | 44 ++++++++++++++++++++
 v3.html                  | 88 ++++++++++++++++++++++++++++++++++++++++
 4 files changed, 280 insertions(+), 2 deletions(-)
 create mode 100644 contact-form-process.php

diff --git a/contact-form-process.php b/contact-form-process.php
new file mode 100644
index 0000000..0421b5a
--- /dev/null
+++ b/contact-form-process.php
@@ -0,0 +1,76 @@
+<?php
+if (isset($_POST['Email'])) {
+
+    // EDIT THE 2 LINES BELOW AS REQUIRED
+    $email_to = "benoti.san@gmail.com";
+    $email_subject = "New form submissions";
+
+    function problem($error)
+    {
+        echo "We are very sorry, but there were error(s) found with the form you submitted. ";
+        echo "These errors appear below.<br><br>";
+        echo $error . "<br><br>";
+        echo "Please go back and fix these errors.<br><br>";
+        die();
+    }
+
+    // validation expected data exists
+    if (
+        !isset($_POST['Name']) ||
+        !isset($_POST['Email']) ||
+        !isset($_POST['Message'])
+    ) {
+        problem('We are sorry, but there appears to be a problem with the form you submitted.');
+    }
+
+    $name = $_POST['Name']; // required
+    $email = $_POST['Email']; // required
+    $message = $_POST['Message']; // required
+
+    $error_message = "";
+    $email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';
+
+    if (!preg_match($email_exp, $email)) {
+        $error_message .= 'The Email address you entered does not appear to be valid.<br>';
+    }
+
+    $string_exp = "/^[A-Za-z .'-]+$/";
+
+    if (!preg_match($string_exp, $name)) {
+        $error_message .= 'The Name you entered does not appear to be valid.<br>';
+    }
+
+    if (strlen($message) < 2) {
+        $error_message .= 'The Message you entered do not appear to be valid.<br>';
+    }
+
+    if (strlen($error_message) > 0) {
+        problem($error_message);
+    }
+
+    $email_message = "Form details below.\n\n";
+
+    function clean_string($string)
+    {
+        $bad = array("content-type", "bcc:", "to:", "cc:", "href");
+        return str_replace($bad, "", $string);
+    }
+
+    $email_message .= "Name: " . clean_string($name) . "\n";
+    $email_message .= "Email: " . clean_string($email) . "\n";
+    $email_message .= "Message: " . clean_string($message) . "\n";
+
+    // create email headers
+    $headers = 'From: ' . $email . "\r\n" .
+        'Reply-To: ' . $email . "\r\n" .
+        'X-Mailer: PHP/' . phpversion();
+    @mail($email_to, $email_subject, $email_message, $headers);
+?>
+
+    <!-- include your success message below -->
+
+    Thank you for contacting us. We will be in touch with you very soon.
+
+<?php
+}
+?>
\ No newline at end of file
diff --git a/scripts/v3.js b/scripts/v3.js
index cead544..3ae4e41 100644
--- a/scripts/v3.js
+++ b/scripts/v3.js
@@ -260,9 +260,9 @@ sections.forEach(item => {
 
 //############################################# -- Content intersection Observer
 
-var contents = document.querySelectorAll(".scroll-into-view-content");
+const contents = document.querySelectorAll(".scroll-into-view-content");
 
-var contentsIO = new IntersectionObserver(contentsObserverFn, windowRect2);
+const contentsIO = new IntersectionObserver(contentsObserverFn, windowRect2);
 
 function contentsObserverFn(entries) {
     
@@ -283,6 +283,76 @@ contents.forEach(item => {
 
 
 
+const myToolsIcons = document.querySelectorAll(".my-specialties-section > div > div");
+const myToolsHeader = document.querySelectorAll(".my-specialties-section h2");
+const myToolsParagraph = document.querySelector(".my-specialties-section p");
+
+let myToolsIO = new IntersectionObserver(myToolsFn, windowRect2);
+
+const myToolsIconsAnimated = anime({
+    targets: myToolsIcons,
+    translateX: [-20, 0],
+    translateY: [-20, 0],
+//        rotateY: [50, 0],
+    opacity: [0, 1],
+    easing: "easeOutQuad",
+    duration: 1200,
+    delay: anime.stagger(150, {start: 200}),
+    loop: false,
+    autoplay: false,
+    complete: function() { myToolsIconsAnimated.remove(myToolsIcons); },
+});
+
+function myToolsFn(entries) {
+    
+    if(entries[0].isIntersecting) {
+        myToolsIconsAnimated.play();
+    }
+   
+}
+
+
+myToolsIO.observe(myToolsParagraph);
+
+
+
+
+
+
+
+
+
+
+
+//############################################# -- Contact Form
+
+//var form = document.getElementById("my-form");
+//    
+//    async function handleSubmit(event) {
+//      event.preventDefault();
+//      var status = document.getElementById("my-form-status");
+//      var data = new FormData(event.target);
+//      fetch(event.target.action, {
+//        method: form.method,
+//        body: data,
+//        headers: {
+//            'Accept': 'application/json'
+//        }
+//      }).then(response => {
+//        status.innerHTML = "Thanks for your submission!";
+//        form.reset()
+//      }).catch(error => {
+//        status.innerHTML = "Oops! There was a problem submitting your form"
+//      });
+//    }
+//    form.addEventListener("submit", handleSubmit)
+
+
+
+
+
+
+
 
 
 
diff --git a/v3.css b/v3.css
index 932fea9..a54e7b7 100644
--- a/v3.css
+++ b/v3.css
@@ -507,6 +507,50 @@ input:focus {
 
 
 
+/*############################################################# -- About Me -- */
+
+.my-specialties-section {
+    justify-content: flex-start;
+    align-items: center;
+    flex-direction: column;    
+    background-color: var(--dark-color);
+    color: white;
+    text-align: center;
+    padding: 100px;
+}
+
+.my-specialties-section h2 {
+    
+}
+
+.my-specialties-section p {
+    color: rgba(255,255,255,0.70);
+    max-width: 800px;
+}
+
+.my-specialties-section > div {
+    max-width: 1140px;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    padding: 20px 0 0 0;
+}
+
+.my-specialties-section > div > div {
+    width: 100px;
+    height: 100px;
+    background-color: var(--main-color);
+    margin: 10px;
+    border-radius: 50%;
+    transform-style: preserve-3d;
+}
+
+
+
+
+
+
 
 
 
diff --git a/v3.html b/v3.html
index 285d9ae..7efa520 100644
--- a/v3.html
+++ b/v3.html
@@ -116,6 +116,94 @@
         </div>
         
         <div>
+            <h2 class="scroll-into-view-content">About Me</h2>
+            <p class="scroll-into-view-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p>
+        </div>
+    </section>
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    <!-- #################################################################################-- My Specialties -->
+    
+    <section class="my-specialties-section">
+        <h2 class="scroll-into-view-content">My Tools For Creating Awesomeness</h2>
+        <p class="scroll-into-view-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p>
+        
+        <div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+        </div>
+    </section>
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    <!-- #################################################################################-- Contact Me -->
+    
+    <section class="my-work-section">
+        <div>
+            <h2 class="scroll-into-view-content">So. Let's have a chat</h2>
+            <p class="scroll-into-view-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p>
+        </div>
+        
+        <div class="scroll-into-view">
+            
+            <form id="fcf-form-id" class="fcf-form-class" method="post" action="contact-form-process.php">
+        
+                <div class="fcf-form-group">
+                    <label for="Name" class="fcf-label">Your name</label>
+                    <div class="fcf-input-group">
+                        <input type="text" id="Name" name="Name" class="fcf-form-control" required>
+                    </div>
+                </div>
+
+                <div class="fcf-form-group">
+                    <label for="Email" class="fcf-label">Your email address</label>
+                    <div class="fcf-input-group">
+                        <input type="email" id="Email" name="Email" class="fcf-form-control" required>
+                    </div>
+                </div>
+
+                <div class="fcf-form-group">
+                    <label for="Message" class="fcf-label">Your message</label>
+                    <div class="fcf-input-group">
+                        <textarea id="Message" name="Message" class="fcf-form-control" rows="6" maxlength="3000" required></textarea>
+                    </div>
+                </div>
+
+                <div class="fcf-form-group">
+                    <button type="submit" id="fcf-button" class="fcf-btn fcf-btn-primary fcf-btn-lg fcf-btn-block">Send Message</button>
+                </div>
+
+                <div class="fcf-credit" id="fcf-credit">
+                Simple HTML email form provided by: <a href="https://www.freecontactform.com" target="_blank">FreeContactForm.com</a>
+                </div>
+
+            </form>
+            
         </div>
     </section>