contact page

aabdulk862 · Nov 9, 2023 · eee3db1 · eee3db1
1 parent 647a05f
commit eee3db1
Show file tree

Hide file tree

Showing 5 changed files with 143 additions and 95 deletions.
diff --git a/appointments.html b/appointments.html
@@ -46,13 +46,13 @@ <h1><a href="index.html">Jason's Enterprises</a></h1>
  <article class="box post">
  <header>
  <h2>Appointments</h2>
- <p>
- Experience the convenience of top-notch equipment installations
- brought right to your doorstep by Jason's Enterprises. Simply
- schedule your appointment and select a date and time that
- perfectly fits your schedule.
- </p>
  </header>
+ <p>
+ Experience the convenience of top-notch equipment installations
+ brought right to your doorstep by Jason's Enterprises. Simply
+ schedule your appointment and select a date and time that
+ perfectly fits your schedule.
+ </p>
  <!-- Google Calendar Appointment Scheduling begin -->
  <iframe
  src="https://calendar.google.com/calendar/appointments/schedules/AcZssZ2C32YY88lYe6XnZ9PbqNBKP_xNbK4SapTpOkwnR4vLjuUk5-PZ1LToamjSMrVFd0AD9R0kdbHB?gv=true"
@@ -169,6 +169,5 @@ <h3>Phone</h3>
  <script src="assets/js/breakpoints.min.js"></script>
  <script src="assets/js/util.js"></script>
  <script src="assets/js/main.js"></script>
- <script src="assets/js/appointment.js"></script>
  </body>
 </html>
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -178,6 +178,7 @@ textarea {
  padding-top: 1em;
 }
 
+
 html {
  box-sizing: border-box;
 }
@@ -1726,7 +1727,7 @@ header > p {
 header.major {
  position: relative;
  text-align: center;
- border-top: solid 1px #ccc;
+ border-top: solid 1px #827a7c;
  top: 1em;
  margin: 0 0 2em 0;
 }
@@ -1932,7 +1933,7 @@ button.large,
 
 .services li {
  display: flex;
- margin-top: 1.5em;
+ margin-top: 1em;
  font-weight: 500;
 }
 
@@ -1948,10 +1949,6 @@ button.large,
  margin: 0;
 }
 
-.services > p {
- border-bottom: 1px solid #dedede;
- font-weight: 700;
-}
 
 ul {
  list-style: disc;
@@ -2523,7 +2520,7 @@ ul.social li a.fa-google-plus:hover {
 
 #main {
  position: relative;
- background-color: #ececec;
+ background-color: #E5E4E2;
  padding: 4em 0 4em 0;
 }
 
@@ -2541,7 +2538,7 @@ ul.social li a.fa-google-plus:hover {
 
 #main .major h2 {
  border-radius: 5px;
- background-color: #ececec;
+ background-color: #E5E4E2;
 }
 
 /* Footer */

diff --git a/assets/js/contact.js b/assets/js/contact.js
@@ -0,0 +1,15 @@
+function sendMail() {
+ var templateParams = {
+ from_name: document.getElementById("fullname").value,
+ email_id: document.getElementById("email_id").value,
+ mesage: document.getElementById("message").value,
+ };
+ emailjs.send("service_4kisvpd", "template_q1s6fqp", templateParams).then(
+ function (response) {
+ alert("SUCCESS!", response.status, response.text);
+ },
+ function (error) {
+ alert("FAILED...", error);
+ }
+ );
+}
diff --git a/contact.html b/contact.html
@@ -17,6 +17,70 @@
  />
  <link rel="stylesheet" href="assets/css/main.css" />
  <link rel="icon" href="./images/logo1.svg" type="image/svg+xml" />
+ <!-- <script
+ type="text/javascript"
+ src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"
+ ></script>
+ <script type="text/javascript">
+ (function sendMail() {
+ emailjs.init("Vtq6uJ7v3Ju0JwmP2");
+ var templateParams = {
+ from_name: document.getElementById("fullname").value || " ",
+ email_id: document.getElementById("email_id").value || " ",
+ mesage: document.getElementById("message").value || " ",
+ };
+ emailjs
+ .send("service_4kisvpd", "template_q1s6fqp", templateParams)
+ .then(
+ function (response) {
+ alert("SUCCESS!", response.status, response.text);
+ },
+ function (error) {
+ alert("FAILED...", error);
+ }
+ );
+ })();
+ </script> -->
+ <script
+ type="text/javascript"
+ src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"
+ ></script>
+ <script type="text/javascript">
+ (function () {
+ // https://dashboard.emailjs.com/admin/account
+ emailjs.init("Vtq6uJ7v3Ju0JwmP2");
+ })();
+ </script>
+ <script type="text/javascript">
+ window.onload = function () {
+ document
+ .getElementById("contact-form")
+ .addEventListener("submit", function (event) {
+ event.preventDefault();
+ // Validate form fields
+ var name = document.getElementById("name").value.trim();
+ var email = document.getElementById("email").value.trim();
+ var message = document.getElementById("message").value.trim();
+
+ if (!name || !email || !message) {
+ alert("Please fill out all required fields.");
+ return;
+ }
+
+ emailjs.sendForm("service_4kisvpd", "template_q1s6fqp", this).then(
+ function () {
+ console.log("SUCCESS!");
+ document.getElementById("contact-form").reset(); // Clear the form
+ alert("Message sent!");
+ },
+ function (error) {
+ console.log("FAILED...", error);
+ alert("Something went wrong. Please try again later.");
+ }
+ );
+ });
+ };
+ </script>
  </head>
  <body class="no-sidebar is-preload">
  <div id="page-wrapper">
@@ -44,47 +108,26 @@ <h1><a href="index.html">Jason's Enterprises</a></h1>
  <article class="box post">
  <header>
  <h2>Contact Us</h2>
- <p>
- We're located in Northern Virginia and our operating hours are
- between 9:00 AM to 5:00 PM.
- </p>
  </header>
+ <p>
+ Connect with Jason's Enterprises! Our dedicated team at Jason's
+ Enterprises values open communication and is eager to provide the
+ information you need. Simply fill out the form below, and we'll
+ get back to you promptly. You can also connect with us through our
+ social media channels for the latest updates. Thank you for
+ considering Jason's Enterprises – where your convenience and
+ satisfaction are our top priorities.
+ </p>
  <section>
  <div class="container">
- <form action="contactus.php">
- <label for="fname">First Name</label>
- <input
- type="text"
- id="fname"
- name="firstname"
- placeholder="Your name.."
- />
-
- <label for="lname">Last Name</label>
- <input
- type="text"
- id="lname"
- name="lastname"
- placeholder="Your last name.."
- />
-
- <label for="eAddress">Email Address</label>
- <input
- type="text"
- id="eAddress"
- name="emailAddress"
- placeholder="Your email address.."
- />
-
- <label for="subject">Message</label>
- <textarea
- id="subject"
- name="subject"
- placeholder="Write something.."
- style="height: 200px"
- ></textarea>
- <br />
- <input type="submit" value="Submit" />
+ <form id="contact-form">
+ <label>Name</label>
+ <input type="text" name="user_name" id="name" />
+ <label>Email</label>
+ <input type="email" name="user_email" id="email" />
+ <label>Message</label>
+ <textarea name="message" id="message"></textarea>
+ <input style="margin-top: 1em" type="submit" value="Send" />
  </form>
  </div>
  </section>

diff --git a/services.html b/services.html
@@ -17,6 +17,10 @@
  />
  <link rel="stylesheet" href="assets/css/main.css" />
  <link rel="icon" href="./images/logo1.svg" type="image/svg+xml" />
+ <script
+ type="text/javascript"
+ src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"
+ ></script>
  </head>
  <body class="no-sidebar is-preload">
  <div id="page-wrapper">
@@ -40,48 +44,38 @@ <h1><a href="index.html">Jason's Enterprises</a></h1>
  <!-- Main -->
  <section id="main">
  <div class="container">
- <div class="row">
- <div class="col-8 col-12-medium">
- <!-- Content -->
- <article class="box post">
- <header>
- <h2>Services</h2>
- </header>
- <ul class="services">
- <p>We offer a wide range of installation services:</p>
- <li>Interior/Exterior TV mounts</li>
- <li>Wireless Security Cameras</li>
- <li>Wall/Ceiling Fixtures</li>
- <li>Odd Jobs, Repairs, Fixes, and Touch-Ups</li>
- </ul>
- <p>
- Choose Jason's Enterprises for a world of unmatched services,
- tailored to your needs. Our team’s top priority is customer
- satisfaction! Book your appointment today to receive a free
- estimate.
- </p>
- <a href="./appointments.html" class="button large">Book Now</a>
- </article>
- </div>
- <div class="col-4 col-12-medium">
- <!-- Sidebar -->
- <section class="box">
- <header>
- <h3>Leave a Review</h3>
- </header>
- <p>
- Have you recently utilized our services? We value your
- feedback and would love to hear about your experience.
- </p>
- <form action="">
- <textarea name="Review" id="review-text"></textarea>
- <footer>
- <a href="#" class="button alt">Send</a>
- </footer>
- </form>
- </section>
- </div>
- </div>
+ <!-- Content -->
+ <article class="box post">
+ <header>
+ <h2>Services</h2>
+ </header>
+ <p>
+ At Jason's Enterprises, we take pride in offering a diverse range
+ of installation services to enhance your living space. Our skilled
+ team is dedicated to providing top-notch solutions tailored to
+ your needs.
+ </p>
+ <p style="font-weight: 700;"><u>We offer a wide range of installation services</u>:</p>
+ <ul class="services">
+ <li>Interior/Exterior TV mounts</li>
+ <li>Wireless Security Cameras</li>
+ <li>Wall/Ceiling Fixtures</li>
+ <li>Odd Jobs, Repairs, Fixes, and Touch-Ups</li>
+ </ul>
+ <p>
+ Whether you're looking to transform your entertainment setup with
+ TV mounts, enhance security with wireless cameras, or spruce up
+ your living space with wall and ceiling fixtures, Jason's
+ Enterprises has you covered. Our team's commitment to excellence
+ ensures that each installation is completed with precision and
+ care.
+ </p>
+ <p>
+ Ready to Upgrade Your Space? Book your appointment today to
+ receive a free estimate.
+ </p>
+ <a href="./appointments.html" class="button">Book Now</a>
+ </article>
  </div>
  </section>