From f5f8f6e54c774f04aa48a0ddb6558cb9b2a0bf98 Mon Sep 17 00:00:00 2001
From: aryat <aryatalathi24@gmail.com>
Date: Wed, 22 Mar 2023 11:12:46 +0530
Subject: [PATCH] added help UI

---
 assets/css/help.css | 260 ++++++++++++++++++++++++++++++++++++++
 pages/help.html     | 301 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 561 insertions(+)
 create mode 100644 assets/css/help.css
 create mode 100644 pages/help.html

diff --git a/assets/css/help.css b/assets/css/help.css
new file mode 100644
index 00000000..f3dc0f81
--- /dev/null
+++ b/assets/css/help.css
@@ -0,0 +1,260 @@
+/*jumbotron-------------------------------------------*/
+.jumbotron {
+    padding-top: 30px;
+    padding-bottom: 30px;
+    margin-bottom: 120px;
+    color: inherit;
+    background-color: #217de6;
+    text-align: center;
+    color: #fff;
+  }
+  
+  /* Color ---------------------------------------------- */
+  
+  :root {
+      --color-input: #68c8ee;
+    }
+    
+    /* Box Sizing ----------------------------------------- */
+    
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+    
+    /* Text, Tag Style ------------------------------------ */
+    
+    h1 {
+      font-size: 2rem;
+      font-weight: 500;
+      line-height: 1.3;
+    }
+    a,
+    li {
+      text-decoration: none;
+      list-style: none;
+    }
+    p,
+    span {
+      font-weight: 300;
+      font-size: clamp(0.8rem, 4vw, 1.4rem);
+    }
+    body {
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+      background-color: rgb(253, 249, 249);
+      color: rgb(255, 255, 255);
+      min-height: 100vh;
+      display: grid;
+    }
+    
+    /* Spacing -------------------------------------------- */
+    
+    .margin-bottom {
+      margin-bottom: 1rem;
+    }
+    
+    /* Text Style ----------------------------------------- */
+    
+    .text-lg {
+      font-size: clamp(1.2rem, 8.8vw, 2.8rem);
+      font-weight: 600;
+      color: rgb(0, 0, 0);
+    }
+    .text-md {
+      font-size: clamp(0.8rem, 5vw, 1.6rem);
+      font-weight: 400;
+      line-height: 1.3;
+    }
+    .text-center {
+      text-align: center;
+    }
+    .btn{
+      
+      background-color: #217de6; 
+      border: none;
+      color: white;
+      padding: 15px 32px;
+      text-align: center;
+      text-decoration: none;
+      display: inline-block;
+      font-size: 16px;
+      box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
+      text-align: center;
+    }
+    
+      
+  
+    
+    
+    /* FAQ styles */
+    .faq-container {
+      margin: 0 auto;
+      max-width: 800px;
+      margin-top: 16px;
+    margin-top: 1rem;
+    }
+    .faq {
+      margin-bottom: 0px;
+    }
+    .question-container {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      background-color: #33CEFF;
+      padding: 10px 20px;
+      cursor: pointer;
+      transition: background-color 0.7s ease;
+    }
+    .question-container:hover {
+      background-color: #33CEFF;
+    }
+    .question-container:hover .toggle-btn {
+      background-color: #3368FF;
+    }
+    .answer {
+      padding: 0px 20px;
+      background-color: #3368FF;
+      color: #fff;
+      overflow: hidden;
+      transition: 0.3s ease, opacity 0.3s ease;
+      max-height: 0;
+    }
+    .toggle-btn {
+      min-width: 30px;
+      min-height: 30px;
+      border-radius: 50%;
+      background-color: transparent;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      transition: 0.6s ease;
+    }
+    .toggle-btn p {
+      margin: 0;
+      font-size: 25px;
+      color: #fff;
+      transition: transform 0.3s ease, opacity 0.3s 300ms;
+    }
+    .toggle-btn p.rotate {
+      transform: rotate(45deg);
+    }
+    .answer.visible {
+      max-height: 200px;
+      opacity: 1;
+      margin: 0;
+      padding: 20px 20px;
+    }
+    
+    /* Media Query --------------------------------------- */
+    
+    @media (320px <= width <= 940px) {
+      .faq-content p {
+        margin: 1rem;
+      }
+    }
+    
+    @media (320px <= width <= 480px) {
+      .container {
+        padding: 1rem;
+      }
+    }
+    
+    @media (min-width: 2048px) {
+      .container {
+        zoom:2;
+      }
+    }
+    
+  
+  
+    /* A simple reset. */
+  *,::before,::after {
+    margin: 0;
+    box-sizing: border-box;
+  }
+    
+  /* Heydon Pickering’s lobotomized owl. Details: https://bit.ly/1H7MXUD */
+  
+  /* Set up fonts, colors and all that jazz. */
+  body {
+    font-family: 'Open Sans', sans-serif;
+    font-size: 18px;
+    line-height: 1.75;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  
+  /* Headings use a different font because they’re hipsters. */
+  h1,h2 {
+    color: white;
+    font-family: Lato, sans-serif;
+    font-weight: 300;
+    line-height: 1.125;
+  }
+  h3{
+    color: black;
+  }
+  .demo {font-size: 12px; font-family: Lato, sans-serif; color:black;}
+  /* Set up general layout rules for outer containers. */
+  .content,.results {
+    width: 90vw;
+    max-width: 550px;
+    margin: 8vh auto;
+  }
+  
+  .content__heading {font-size: 125%;
+  }
+  
+  .content__lede {margin-top: 8px;margin-top: 8px;margin-top: 0.5rem;font-size: 87.5%;
+  }
+  
+  .results__heading {font-size: 110%;
+  }
+  
+  .results__display-wrapper {margin-top: 16px;margin-top: 16px;margin-top: 1rem;padding: 8px 16px;padding: 8px 16px;padding: 0.5rem 1rem;background: #f9fdfe;border: 1px solid #cdcfcf;overflow-x: scroll;
+  }
+  
+  .contact-form {
+    position: relative;
+    display: block;
+    margin: 0;
+    padding: 16px 0 32px;
+    padding: 16px 0 32px;
+    padding: 1rem 0 2rem;
+    border-top: 1px solid #cdcfcf;
+    border-bottom: 1px solid #cdcfcf;
+    overflow: hidden;
+  }
+  
+  .contact-form__input-group {margin-top: 4px;margin-top: 4px;margin-top: 0.25rem;padding: 8px 16px;padding: 8px 16px;padding: 0.5rem 1rem;
+  }
+  
+  .contact-form__label {display: block;color: #414643;font-family: Lato, sans-serif;font-size: 75%;line-height: 1.125;
+  }
+  
+  .contact-form__label--checkbox-group {display: inline-block;margin-right: 16px;margin-right: 16px;margin-right: 1rem;font-size: 75%;
+  }
+  
+  .contact-form__label--checkbox,.contact-form__label--radio {display: inline-block;margin-left: 4px;margin-left: 4px;margin-left: 0.25rem;
+  }
+  
+  .contact-form__input {display: block;margin-top: 0;padding: 8px 12px;padding: 8px 12px;padding: 0.5rem 0.75rem;border: 1px solid #cdcfcf;width: 100%;font-family: 'Open Sans', sans-serif;font-size: 16px;font-size: 16px;font-size: 1rem;-webkit-transition: 150ms border-color linear;transition: 150ms border-color linear;
+  }
+  
+  .contact-form__input--checkbox,.contact-form__input--radio {display: inline-block;width: auto;
+  }
+  
+  .contact-form__input--checkbox~.contact-form__input--checkbox, .contact-form__input--radio~.contact-form__input--radio {margin-left: 16px;margin-left: 16px;margin-left: 1rem;
+  }
+  
+  .contact-form__input:focus,.contact-form__input:active {border-color: #686a69;outline: 0;
+  }
+  
+  .contact-form__button {display: block;margin: 8px 16px 0;margin: 8px 16px 0;margin: 0.5rem 1rem 0;padding: 0 16px 2px;padding: 0 16px 2px;padding: 0 1rem 0.125rem;background-color: #686a69;border: 0;color: #f9fdfe;font-family: lato, sans-serif;font-size: 100%;letter-spacing: 0.05em;line-height: 1.5;text-transform: uppercase;-webkit-transition: 150ms all linear;transition: 150ms all linear;
+  }
+  .contact-form__button:hover,.contact-form__button:active,.contact-form__button:focus {background: #2a2f2c;cursor: pointer;outline: 0;
+  }
\ No newline at end of file
diff --git a/pages/help.html b/pages/help.html
new file mode 100644
index 00000000..b30b9ee8
--- /dev/null
+++ b/pages/help.html
@@ -0,0 +1,301 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Help Page</title>
+    <link rel="stylesheet"  type="text/css" href="../assets/css/help.css">
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
+      integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+    <link rel="stylesheet" href="faq-accordion.css" />
+  </head>
+  
+  <body>
+
+    <div class="jumbotron jumbotron-fluid">
+      <div class="container">
+        <h1 class="display-4">HELP PAGE</h1>
+        <p class="lead">Frequently Asked Questions</p>
+      </div>
+    </div>
+    
+
+    <div class="faq-container">      
+      <div class="faq">
+        <div class="question-container">
+          <h2>Q. What is KwickerHub?</h2>
+          <div class="toggle-btn">
+            <p>+</p>
+          </div>
+        </div>
+        <div class="answer">
+          <p>A. KwickerHub is a platform where you cancreate UI templates easily.</p>
+        </div>
+      </div>
+
+      <div class="faq">
+        <div class="question-container">
+          <h2>Q. Is it free?</h2>
+          <div class="toggle-btn">
+            <p>+</p>
+          </div>
+        </div>
+        <div class="answer">
+          <p>A.Yes. It is free.</p>
+        </div>
+      </div>
+
+      <div class="faq">
+        <div class="question-container">
+          <h2>Q. Is it useful for any type of UI/UX?</h2>
+          <div class="toggle-btn">
+            <p>+</p>
+          </div>
+        </div>
+        <div class="answer">
+          <p>A. Yes.</p>
+        </div>
+      </div>
+
+      <div class="faq">
+        <div class="question-container">
+          <h2>Q. How to use KwickerHub?</h2>
+          <div class="toggle-btn">
+            <p>+</p>
+          </div>
+        </div>
+        <div class="answer">
+          <p>A. Follow the steps to use KwickerHub efficiently : </p>
+        </div>
+      </div>
+      
+      <div class="faq">
+        <div class="question-container">
+          <h2>Q. How can I add tags?</h2>
+          <div class="toggle-btn">
+            <p>+</p>
+          </div>
+        </div>
+        <div class="answer">
+          <p>A. Follow the steps to add tags :</p>
+        </div>
+      </div>
+    </div>
+    
+
+   
+    
+  </body>
+</html>
+
+<script>
+  const questionContainers = document.querySelectorAll('.question-container');
+const answers = document.querySelectorAll('.answer');
+let activeAnswer = answers[0];
+
+// Adds the visible class to the first answer and rotate class to the first toggle button
+questionContainers[0].querySelector('.toggle-btn p').classList.add('rotate');
+activeAnswer.classList.add('visible');
+
+questionContainers.forEach((container, index) => {
+  container.addEventListener('click', () => {
+    const answer = answers[index];
+    const toggleBtn = container.querySelector('.toggle-btn p');
+
+    if (activeAnswer !== null && activeAnswer !== answer) {
+      const activeToggleBtn = activeAnswer.previousElementSibling.querySelector('.toggle-btn p');
+      activeToggleBtn.classList.remove('rotate');
+      activeAnswer.classList.remove('visible');
+    }
+
+    toggleBtn.classList.toggle('rotate');
+
+    if (answer.classList.contains('visible')) {
+      answer.classList.remove('visible');
+      activeAnswer = null;
+    } else {
+      answers.forEach(a => {
+        a.classList.remove('visible');
+      });
+      answer.classList.add('visible');
+      activeAnswer = answer;
+    }
+  });
+});
+
+</script>
+
+
+
+
+
+
+<section class="content">
+  <h3 class="content__heading">Ask a question</h1>
+  <form class="content__form contact-form">
+    <div class="testing">
+      <p>Does this do anything?</p>
+    </div>
+    <div class="contact-form__input-group">
+      <label class="contact-form__label" for="name">Name*</label>
+      <input class="contact-form__input contact-form__input--text" id="name" name="name" type="text"/>
+    </div>
+    <div class="contact-form__input-group">
+      <label class="contact-form__label" for="email">Email Address*</label>
+      <input class="contact-form__input contact-form__input--email" id="email" name="email" type="email"/>
+    </div>
+  
+    <div class="contact-form__input-group">
+      <label class="contact-form__label" for="message">Enter a question</label>
+      <textarea class="contact-form__input contact-form__input--textarea" id="message" name="message" rows="6" cols="65"></textarea>
+    </div>
+   
+    <input name="authentication" type="hidden" value="Token 1b3a9374-1a8e-434e-90ab-21aa7b9b80e7"/>
+    <div>
+    <input name:"query" type="hidden" id="demo" value="query:{}"/>
+    </div>
+    
+    <button class="contact-form__button" type="submit">Submit</button>
+  </form>
+</section>
+<!-- <div class="results">
+  <h2 class="results__heading">Form Data</h2>
+  <pre class="results__display-wrapper"><code class="results__display"></code></pre>
+</div> -->
+
+<script>
+
+const isValidElement = element => {
+  return element.name && element.value;
+};
+
+
+const getSelectValues = options =>
+  [].reduce.call(
+    options,
+    (values, option) => {
+      return option.selected ? values.concat(option.value) : values;
+    },
+    []
+  );
+
+ */
+const formToJSON_deconstructed = elements => {
+  // This is the function that is called on each element of the array.
+  const reducerFunction = (data, element) => {
+    // Add the current field to the object.
+    data[element.name] = element.value;
+
+    // For the demo only: show each step in the reducer’s progress.
+    console.log(JSON.stringify(data));
+
+    return data;
+  };
+
+  // This is used as the initial value of `data` in `reducerFunction()`.
+  const reducerInitialValue = {};
+
+  // To help visualize what happens, log the inital value, which we know is `{}`.
+  console.log("Initial `data` value:", JSON.stringify(reducerInitialValue));
+
+  // Now we reduce by `call`-ing `Array.prototype.reduce()` on `elements`.
+  const formData = [].reduce.call(
+    elements,
+    reducerFunction,
+    reducerInitialValue
+  );
+
+  // The result is then returned for use elsewhere.
+  return formData;
+};
+
+/**
+ * Retrieves input data from a form and returns it as a JSON object.
+ * @param  {HTMLFormControlsCollection} elements  the form elements
+ * @return {Object}                               form data as an object literal
+ */
+const formToJSON = elements =>
+  [].reduce.call(
+    elements,
+    (data, element) => {
+      // Make sure the element has the required properties and should be added.
+      if (isValidElement(element) && isValidValue(element)) {
+        /*
+     * Some fields allow for more than one value, so we need to check if this
+     * is one of those fields and, if so, store the values as an array.
+     */
+        if (isCheckbox(element)) {
+          data[element.name] = (data[element.name] || []).concat(element.value);
+        } else if (isMultiSelect(element)) {
+          data[element.name] = getSelectValues(element);
+        } else {
+          data[element.name] = element.value;
+        }
+      }
+
+      return data;
+    },
+    {}
+  );
+
+/**
+ * A handler function to prevent default submission and run our custom script.
+ * @param  {Event} event  the submit event triggered by the user
+ * @return {void}
+ */
+const handleFormSubmit = event => {
+  // Stop the form from submitting since we’re handling that with AJAX.
+  event.preventDefault();
+
+  // Call our function to get the form data.
+  const data = formToJSON(form.elements);
+
+  // Demo only: print the form data onscreen as a formatted JSON object.
+  const dataContainer = document.getElementsByClassName("results__display")[0];
+
+  // Use `JSON.stringify()` to make the output valid, human-readable JSON.
+  dataContainer.textContent = JSON.stringify(data, null, "  ");
+
+  // ...this is where we’d actually do something with the form data...
+};
+
+/*
+ * This is where things actually get started. We find the form element using
+ * its class name, then attach the `handleFormSubmit()` function to the 
+ * `submit` event.
+ */
+var form = document.getElementsByClassName("contact-form")[0];
+if (form){
+	form.addEventListener("submit", handleFormSubmit, false);
+}
+
+/* adding more background info to grab from user */
+function myFunction() {
+	var z = document.getElementById("query").value;
+  var x = navigator.userAgent;
+	var y = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    var obj = {"browser_timezone" : String(y),"user_agent" : String(x),"query": String(z)};
+    var myJSON = JSON.stringify(obj);
+    document.getElementById("demo").innerHTML = myJSON;
+}
+if(window.attachEvent) {
+    window.attachEvent('onload', myFunction);
+} else {
+    if(window.onload) {
+        var curronload = window.onload;
+        var newonload = function(evt) {
+            curronload(evt);
+            myFunction(evt);
+        };
+        window.onload = newonload;
+    } else {
+        window.onload = myFunction;
+    }
+}
+</script>
\ No newline at end of file