Merge pull request #1179 from singhcoder694/contactNaruto

Contact naruto
vikhyatsingh123 · Dec 18, 2023 · 2b39a3a · 2b39a3a
2 parents 7d9c23c + 1a42305
commit 2b39a3a
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 25 deletions.
diff --git a/contact.css b/contact.css
@@ -10,14 +10,14 @@ body {
 }
 
 h1 {
-  color:rgb(94, 92, 92);
+  color:aqua;
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
   padding-top: 30px;
   font-size: 50px;
   font-weight: 700;
   text-align: center;
   font-family: 'Source Sans Pro', sans-serif;
-  margin: 0px;
+  margin: 10px;
 }
 
 form {
@@ -36,7 +36,7 @@ form {
 }
 
 textarea {
-  background: rgba(0, 0, 0, 0.4);
+  background: white;
   width: 894px;
   height: 110px;
   border: none;
@@ -49,7 +49,7 @@ textarea {
   display: block;
   font-family: 'Source Sans Pro', sans-serif;
   font-size: 18px;
-  color: #fff;
+  color: black;
   padding-left: 45px;
   padding-right: 20px;
   padding-top: 12px;
@@ -73,7 +73,7 @@ textarea {
   display: block;
   font-family: 'Source Sans Pro', sans-serif;
   font-size: 18px;
-  color: #fff;
+  color: black;
   padding-left: 20px;
   padding-right: 20px;
   margin-bottom: 20px;
@@ -84,24 +84,24 @@ input[type=submit] {
 }
 
 input.nameinput {
-  background: rgba(0, 0, 0, 0.4);
+  background: white;
   padding-left: 45px;
 }
 
 input.emailinput {
-  background: rgba(0, 0, 0, 0.4);
+  background: white;
   padding-left: 45px;
 }
 
 input.message {
-  background: rgba(0, 0, 0, 0.4);
+  background: white;
   padding-left: 45px;
 }
 
 
 
 ::-webkit-input-placeholder {
-  color: #fff;
+  color: rgb(167, 166, 166);
 }
 
 :-moz-placeholder {
@@ -118,27 +118,30 @@ input.message {
 
 input:focus,
 textarea:focus {
-  background-color: rgba(0, 0, 0, 0.2);
-  -moz-box-shadow: 0 0 5px 1px rgba(255, 255, 255, .5);
-  -webkit-box-shadow: 0 0 5px 1px rgba(255, 255, 255, .5);
-  box-shadow: 0 0 5px 1px rgba(255, 255, 255, .5);
+  -moz-box-shadow: 0 0 10px 10px rgb(3, 213, 245);
+  -webkit-box-shadow: 0 0 10px 10px rgb(3, 213, 245);
+  box-shadow: 0 0 10px 10px rgb(3, 213, 245);
   overflow: hidden;
+  border:none;
+}
+input:focus::placeholder,
+textarea:focus::placeholder{
+  color:transparent;
 }
-
 .btn {
   border: none;
   font-family: 'Source Sans Pro', sans-serif;
   font-size: 18px;
   width: 200px;
   height: 48px;
-  color: #000;
-  background: #fff;
+  color: white;
+  background: black;
   cursor: pointer;
   display: inline-block;
   font-weight: 700;
   position: relative;
   outline: none;
-  box-shadow: 0 6px #cecece;
+  box-shadow: 0 6px rgb(120, 118, 118);
   border-radius: 5px;
   float: right;
   margin-right: 6px;

diff --git a/contact.html b/contact.html
@@ -19,7 +19,8 @@
     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital@1&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="index.css">
     <link href="translate.css" rel="stylesheet" type="text/css" media="all" />
-               <link rel="stylesheet" href="contact.css" />
+    <link rel="stylesheet" href="contact.css" />
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
     <title>Contact Form</title>
   </head>
   <body>

diff --git a/contact.js b/contact.js
@@ -25,13 +25,21 @@ async function handleFormSubmit(event) {
     };
 
     await fetch(url, fetchOptions);
-
-    msgStatus.innerHTML = "Your message has been sent.";
-    msgStatus.style.display = "block";
-    msgStatus.style.textAlign = "center";
-    setTimeout(() => {
-      msgStatus.style.display = "none";
-    }, 4000);
+    console.log(url);
+    if (url=="https://formsubmit.co/[email protected]"){
+        await Swal.fire({
+            title: "Success!",
+            text: "Message Sent Successfully!",
+            icon: "success"
+        });
+    }
+    else{
+        await Swal.fire({
+            icon: "error",
+            title: "Oops...",
+            text: "Something went wrong!"
+        });
+  }
     form.reset();
   } catch (err) {
     msgStatus.innerHTML =