Merge pull request #18 from shiloholotu/nolan

Nolan
shiloholotu · Jun 23, 2024 · db81cc4 · db81cc4
2 parents fc9616a + ccae7a3
commit db81cc4
Show file tree

Hide file tree

Showing 9 changed files with 215 additions and 5 deletions.
diff --git a/app.py b/app.py
@@ -45,6 +45,10 @@ def sources():
 def aboutus():
     return render_template("aboutus.html")
 
+@app.route("/contact")
+def contact():
+    return render_template("contact.html")
+
 @app.route("/submit/<inp>/<rnd>")
 def submit(inp,rnd):
     data = ["job","firstname","lastname","email","phone","resume","outreach","startdate","immigration","workability","additionalinfo","profile","experience"]

diff --git a/static/scripts/contact.js b/static/scripts/contact.js
@@ -0,0 +1,5 @@
+document.getElementById('contactForm').addEventListener('submit', function(event) {
+    event.preventDefault(); 
+    document.getElementById('confirmationMessage').style.display = 'block'; // Show confirmation message
+    document.getElementById('contactForm').reset(); // Reset the form fields
+});
diff --git a/static/styles/contact.css b/static/styles/contact.css
@@ -0,0 +1,125 @@
+:root{
+    --main-purple:#9f30fd;
+    --font-color:rgb(42,41,85);
+    --transparent-border-color: rgb(0,0,50,0.15);
+    --background-color: rgb(255,255,255);
+    --navbar-color: rgb(255,255,255,0.85);
+    --footer-color: rgb(26,26,51);
+}
+
+.confirmation {
+    display: none;
+    width: 90%;
+    max-width: 800px;
+    margin: auto;
+    padding: 10px;
+    align-items: center;
+    text-align: center;
+    background-color: #d4edda;
+    color: #155724;
+    border: 1px solid #c3e6cb;
+    border-radius: 15px;
+}
+
+
+.contactHeader {
+    display: flex;
+    flex-direction: column;
+    width: 90%;
+    max-width: 800px;
+    margin: auto;
+    margin-top: 80px;
+}
+
+.contactHeader h1 {
+    font-family: 'Kanit';
+    font-size: min(80px,7vw);
+    line-height: 80%;
+    text-transform: uppercase;
+    color: var(--font-color);
+    margin: auto;
+    margin-bottom: 20px;
+}
+
+.contactHeader p {
+    opacity: 0.7;
+    margin-top: 0px;
+}
+
+.contactUs {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 90%;
+    margin: auto;
+    margin-top: 30px;
+    margin-bottom:30px;
+}
+
+#contactForm{
+    width: 100%;
+    max-width: 800px;
+    display: flex;
+    flex-direction: column;
+    margin: auto;
+    align-self: center;
+}
+
+.contactUs div {
+    width: min(800px,80%);
+}
+
+.contactUs input {
+    display: block;
+    font-family: "Poppins";
+    margin-bottom: 3vh;
+    width: 100%;
+    height: 20px;
+    padding: 10px;
+    border-radius: 12px;
+    border: 1px solid var(--transparent-border-color);
+    outline: none;
+}
+
+label {
+    display:block;
+    margin-bottom: 1vh;
+    line-height: 1.8;
+}
+
+textarea {
+    display: block;
+    font-family: "Poppins";
+    margin-bottom: 3vh;
+    width: 100%;
+    padding: 10px;
+    border-radius: 12px;
+    border: 1px solid var(--transparent-border-color);
+    outline: none;
+}
+
+input[type="submit"]{
+    margin:auto;
+    margin-top: 10px;
+    display: flex;
+    height: fit-content;
+    font-family: 'Poppins';
+    text-decoration: none;
+    padding: 12px;
+    width: fit-content;
+    font-size: 16px;
+    border-radius: 20px;
+    padding-left: 30px;
+    padding-right: 30px;
+    background: var(--font-color);
+    color: var(--background-color);
+    border:none;
+    outline:none;
+    cursor: pointer;
+    transition: 0.25s;
+}
+
+input[type="submit"]:hover {
+    transform: translate(0, -3px);
+    opacity: 0.8;
+}
diff --git a/templates/application.html b/templates/application.html
@@ -40,7 +40,7 @@
             <div class="application">
                 <div>
                     <h1>Apply to Singularity</h1>
-                    <p class="subtitle">Questions marked with a * are required.</p>
+                    <p class="subtitle">Fields marked with a * are required.</p>
                     <form>
                         <label for="joblist">What job are you applying to? *</label>
                         <input id="job" list="joblist" name="joblist" placeholder="Please select option" required>

diff --git a/templates/contact.html b/templates/contact.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+
+        <meta charset="UTF-8">
+
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1"/>
+        <meta http-equiv="X-UA-Compatible" content="ie=edge">
+
+        <link rel="preconnect" href="https://fonts.gstatic.com">
+		<link href="https://fonts.googleapis.com/css?family=Poppins:400,600,800" rel="stylesheet">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+
+        <link href="https://fonts.googleapis.com/css2?family=Kanit:wght@400;500&family=Share+Tech&display=swap" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
+
+        <link rel="stylesheet" href="static/styles/main.css">
+        <link rel="stylesheet" href="static/styles/contact.css">
+
+        <!-- Animate on Scroll -->
+        <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
+        <!-- Jquery -->
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+
+        <!-- Favicon -->
+        <link rel="icon" href="static/assets/logo.png">
+
+        <title>Contact Us | Singularity</title>
+
+    </head>
+
+    <body>
+
+        {% include 'navbar.html' %}
+
+
+        <div data-aos="fade-in" data-aos-duration="700">
+            <div class="contactHeader">
+                <h1>Contact <span class="purpText">Singularity</span></h1>
+                <p>Fields marked with a * are required.</p>
+            </div>
+
+            <div class="contactUs">
+                <form id="contactForm">
+                    <label for="name">Name *</label>
+                    <input type="text" id="cname" name="name" required>
+
+                    <label for="email">Email *</label>
+                    <input type="email" id="cemail" name="email" required>
+
+                    <label for="message">Message *</label>
+                    <textarea id="cmessage" name="message" rows="4" required></textarea>
+
+                    <input type="submit" value="Send">
+                </form>
+            </div>
+            <div class="confirmation" id="confirmationMessage">
+                Thank you for contacting us! We will get back to you soon.
+            </div>
+
+            <div class="gap"></div>
+        </div>
+
+
+        {% include 'footer.html' %}
+
+        {% include 'scripts.html' %}
+
+        <script src="static/scripts/contact.js"></script>
+
+    </body>
+
+</html>
diff --git a/templates/footer.html b/templates/footer.html
@@ -16,7 +16,7 @@
     <div>
         <p>Contact</p>
         <a>(000) 000-0000</a>
-        <a>[email protected]</a>
+        <a href="/contact">[email protected]</a>
     </div>
 
     <div>

diff --git a/templates/index.html b/templates/index.html
@@ -160,7 +160,9 @@ <h2>Enterprise</h2>
         </div>
 
         <a class="scroll-button" href="#anchor0" onclick="changeAnchor()">&darr;</a>
-
+
+
+
         <div class="gap"></div>
         <div class="gap"></div>
 

diff --git a/templates/navbar.html b/templates/navbar.html
@@ -6,7 +6,7 @@
         <a class="nav-link" href="/careers">Careers</a>
         <a class="nav-link" href="/application">Apply</a>
         <a class="nav-link" href="/aboutus">About</a>
-        <a class="nav-link" href="/sources">Sources</a> 
+        <a class="nav-link" href="/contact">Contact Us</a>
         <a class="material-icons-outlined" id="modeButton" onclick="switchMode()">dark_mode</a>
         <!--<button class="nav-link" onclick="showLoginForm()">Login</button>-->
     </div>
@@ -32,6 +32,6 @@
     <a class="nav-link" href="/careers">Careers</a>
     <a class="nav-link" href="/application">Apply</a>
     <a class="nav-link" href="/aboutus">About</a>
-    <a class="nav-link" href="/sources">Sources</a>
+    <a class="nav-link" href="/contact">Contact Us</a>
     <!--<button class="nav-link" onclick="showLoginForm()">Login</button>-->
 </div>
diff --git a/templates/scripts.html b/templates/scripts.html
@@ -7,6 +7,7 @@
 <script src="static/scripts/application.js"></script>
 <script src="static/scripts/scroll.js"></script>
 <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
+<script defer src="https://app.fastbots.ai/embed.js" data-bot-id="clxqqxysn03b0ohbc8hhkinzz"></script>
 <script>
   AOS.init();
 </script>
-Original file line number
+Diff line change
@@ Expand Up / @@ -160,7 +160,9 @@ <h2>Enterprise</h2> @@
             </div>
             <a class="scroll-button" href="#anchor0" onclick="changeAnchor()">&darr;</a>
             <div class="gap"></div>
             <div class="gap"></div>
@@ Expand Down @@