dwyl · LimSongWei · Aug 9, 2022 · Sep 3, 2022 · Sep 3, 2022 · Sep 3, 2022
diff --git a/.github/workflows/Zap-Baseline-Scan.yml b/.github/workflows/Zap-Baseline-Scan.yml
@@ -0,0 +1,27 @@
+name: Zap-Baseline-Scan
+on:
+  push:
+    branches:
+      - master
+      - 'Chee-Yuan'
+      - 'Daniel-Heng'
+      - 'Johnny-Chuan'
+jobs:
+  check-vulneabilities:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '14'
+      - name: action-git-diff-suggestions
+        uses: getsentry/action-git-diff-suggestions@v1
+      - name: ZAP Scan
+        uses: zaproxy/[email protected]
+        with:
+          target: 'https://www.zaproxy.org'
+
+
+
+
+
diff --git a/.github/workflows/codacy-static-analysis.yaml b/.github/workflows/codacy-static-analysis.yaml
@@ -0,0 +1,34 @@
+name: Codacy Static Analysis
+
+on: 
+  push:
+    branches:
+      - master
+      - 'Chee-Yuan'
+      - 'Daniel-Heng'
+      - 'Johnny-Chuan'
+
+jobs:
+  codacy-static-scan:
+    name: Codacy Security Scan
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@main
+
+      - name: Run Codacy Analysis CLI
+        uses: codacy/codacy-analysis-cli-action@master
+        with:
+          output: results.sarif
+          format: sarif
+          # Adjust severity of non-security issues
+          gh-code-scanning-compat: true
+          # Force 0 exit code to allow SARIF file generation
+          # This will handover control about PR rejection to the GitHub side
+          max-allowed-issues: 2147483647
+
+      # Upload the SARIF file generated in the previous step
+      - name: Upload SARIF results file
+        uses: github/codeql-action/upload-sarif@main
+        with:
+          sarif_file: results.sarif
diff --git a/background-image.jpg b/background-image.jpg
diff --git a/dwyl_logo.png b/dwyl_logo.png
diff --git a/index.html b/index.html
@@ -1,75 +1,93 @@
 <!doctype html>
 <html lang="en">
+
 <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="contact form example">
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="contact form example">
   <title>Contact Form Example</title>
 </head>
 
-<body>
-  <h2 class="content-head is-center">Contact Us!</h2>
-  <aside>
-       <p>
-           We would <em>love</em> to hear from you! </p>
-           <p>Please use the <b><em>Contact Form</em></b>
-           to send us a message.
-       </p>
-   </aside>
-
-<!-- START HERE -->
-   <link rel="stylesheet" href="https://unpkg.com/[email protected]/build/pure-min.css">
-   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
-   <!-- Style The Contact Form How Ever You Prefer -->
-   <link rel="stylesheet" href="style.css">
+<body style="background-image: url('background-image.jpg'); background-size: cover;">
+  <div style="display:inline-block; width: 20%"> </div>
+  <div class="form-container">
+    <div class="header">
+      <img src="dwyl_logo.png" alt="dwyl_logo" />
+      <h2 class="content-head">Contact Us!</h2>
+    </div>
+    <aside>
+      <p>
+        We would <em>love</em> to hear from you! </p>
+      <p>Please use the <b><em>Contact Form</em></b>
+        to send us a message.
+      </p>
+      <p></p>
+    </aside>
 
-  <form class="gform pure-form pure-form-stacked" method="POST" data-email="[email protected]"
-  action="https://script.google.com/macros/s/AKfycbwMxYDrufp73bKdU8gMvxFDdHRuzcR4IKQUB33B7GqwyfyZS04/exec">
-    <!-- change the form action to your script url -->
+    <!-- START HERE -->
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/build/pure-min.css">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
+    <!-- Style The Contact Form How Ever You Prefer -->
+    <link rel="stylesheet" href="style.css">
 
-    <div class="form-elements">
-      <fieldset class="pure-group">
-        <label for="name">Name: </label>
-        <input id="name" name="name" placeholder="What your Mom calls you" />
-      </fieldset>
+    <form class="gform pure-form pure-form-stacked" method="POST" data-email="[email protected]"
+      action="https://script.google.com/macros/s/AKfycbwMxYDrufp73bKdU8gMvxFDdHRuzcR4IKQUB33B7GqwyfyZS04/exec">
+      <!-- change the form action to your script url -->
 
-      <fieldset class="pure-group">
-        <label for="message">Message: </label>
-        <textarea id="message" name="message" rows="10"
-        placeholder="Tell us what's on your mind..."></textarea>
-      </fieldset>
+      <div class="form-elements">
+        <fieldset class="pure-group">
+          <label for="name">Name: </label>
+          <input id="name" name="name" placeholder="What your Mom calls you" />
+        </fieldset>
 
-      <fieldset class="pure-group">
-        <label for="email"><em>Your</em> Email Address:</label>
-        <input id="email" name="email" type="email" value=""
-        required placeholder="[email protected]"/>
-      </fieldset>
+        <fieldset class="pure-group">
+          <label for="message">Message: </label>
+          <textarea id="message" name="message" rows="10" placeholder="Tell us what's on your mind..."></textarea>
+        </fieldset>
 
-      <fieldset class="pure-group">
-        <label for="color">Favourite Color: </label>
-        <input id="color" name="color" placeholder="green" />
-      </fieldset>
+        <fieldset class="pure-group">
+          <label for="email"><em>Your</em> Email Address:</label>
+          <input id="email" name="email" type="email" value="" required placeholder="[email protected]" />
+        </fieldset>
 
-      <fieldset class="pure-group honeypot-field">
-        <label for="honeypot">To help avoid spam, utilize a Honeypot technique with a hidden text field; must be empty to submit the form! Otherwise, we assume the user is a spam bot.</label>
-        <input id="honeypot" type="text" name="honeypot" value="" />
-      </fieldset>
+        <fieldset class="pure-group">
+          <label for="color">Favourite Color: </label>
+          <input id="color" name="color" placeholder="green" />
+        </fieldset>
 
-      <button class="button-success pure-button button-xlarge">
-        <i class="fa fa-paper-plane"></i>&nbsp;Send</button>
-    </div>
+        <fieldset class="pure-group honeypot-field">
+          <label for="honeypot">To help avoid spam, utilize a Honeypot technique with a hidden text field; must be empty
+            to submit the form! Otherwise, we assume the user is a spam bot.</label>
+          <input id="honeypot" type="text" name="honeypot" value="" />
+        </fieldset>
 
-    <!-- Customise the Thankyou Message People See when they submit the form: -->
-    <div class="thankyou_message" style="display:none;">
-      <h2><em>Thanks</em> for contacting us!
-        We will get back to you soon!</h2>
-    </div>
+        <button class="button-success pure-button button-xlarge" onclick="checker()">
+          <i class="fa fa-paper-plane"></i>&nbsp;Send
+          <span class="tooltiptext">Press this button after confirming all the information has been filled in
+            correctly.</span>
+        </button>
+      </div>
 
-  </form>
+      <!-- Customise the Thankyou Message People See when they submit the form: -->
+      <div class="thankyou_message" style="display:none;">
+        <h2><em>Thanks</em> for contacting us!
+          We will get back to you soon!</h2>
+      </div>
 
-  <!-- Submit the Form to Google Using "AJAX" -->
-  <script data-cfasync="false" src="form-submission-handler.js"></script>
-<!-- END -->
+    </form>
 
+    <!-- Submit the Form to Google Using "AJAX" -->
+    <script data-cfasync="false" src="form-submission-handler.js"></script>
+    <script>
+      function checker() {
+        var result = confirm('Are you sure?');
+        if (result = false) {
+          event.preventDefault();
+        }
+      }
+    </script>
+    <!-- END -->
+  </div>
 </body>
-</html>
+
+</html>
diff --git a/style.css b/style.css
@@ -1,40 +1,86 @@
 body {
   margin: 2em;
+  background-color: #44545c;
 }
+
+.header img {
+  float: left;
+  top: 10px;
+  width: 60px;
+  height: 60px;
+  padding-bottom: 40px;
+}
+
 aside {
-    background: #1f8dd6; /* same color as selected state on site menu */
-    padding: 0.3em 1em;
-    border-radius: 3px;
-    color: #fff;
-    margin-bottom: 2em;
+  background: #4dbfa9;
+  padding: 0.3em 1em;
+  border-radius: 3px;
+  color: #fff;
+  margin-bottom: 2em;
 }
+
 textarea {
   width: 100%;
 }
+
 .content-head {
   font-weight: 400;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   margin: 2em 0 1em;
 }
+
 .is-center {
   text-align: center;
 }
+
 .button-success {
   color: white;
   border-radius: 4px;
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-  background: rgb(28, 184, 65); /* this is a green */
+  background: rgb(28, 184, 65);
+  /* this is a green */
+}
+
+.tooltiptext {
+  visibility: hidden;
+  background-color: #4dbfa9;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px;
+  font-size: 15px;
+  right: 135px;
+
+  /* Position the tooltip */
+  position: absolute;
+  z-index: 1;
+}
+
+.button-success:hover .tooltiptext {
+  visibility: visible;
 }
+
 .button-xlarge {
   font-size: 125%;
 }
+
 button {
   float: right;
 }
-#name, #email {
+
+#name,
+#email {
   width: 50%;
 }
+
 .honeypot-field {
   display: none;
 }
+
+.form-container {
+  background: rgba(255, 255, 255, 0.8);
+  width: 700px;
+  display: inline-block;
+  padding: 0px 35px 20px 35px;
+}