thoth-tech · CchristiNana · Apr 15, 2024 · Apr 15, 2024 · Apr 28, 2024 · May 5, 2024
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -470,6 +470,23 @@ export default defineConfig({
             },
           ],
         },
+        {
+          label: "Feedback",
+          items: [
+            {
+              label: "Feedback",
+              link: "feedback/feedback-form",
+            },
+            {
+              label: "Feedback form documentation",
+              link: "feedback/feedback-form-documentation",
+            },
+            {
+              label: "Feedback storage and access instructions",
+              link: "feedback/feedback-storage-and-access-instructions",
+            },
+          ],
+        },
       ],
     }),
   ],

diff --git a/public/feedbackform.html b/public/feedbackform.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Feedback Form</title>
+<style>
+    body {
+        font-family: Arial, sans-serif;
+        background: #f4f4f4;
+        margin: 0;
+        padding: 0;
+    }
+    .container {
+        max-width: 600px;
+        margin: 50px auto;
+        background: #fff;
+        padding: 20px;
+    }
+    h1, p {
+        text-align: center;
+    }
+    .star-rating {
+        text-align: center;
+        font-size: 0;
+        display: flex;
+        flex-direction: row-reverse; /* Reverse the order of children */
+        justify-content: center;
+    }
+    .star-rating input {
+        display: none;
+    }
+    .star-rating label {
+        font-size: 40px;
+        padding: 10px;
+        color: #d3d3d3;
+    }
+    .star-rating input:checked ~ label {
+        color: #ffd700;
+    }
+    .feedback-form {
+        text-align: center;
+    }
+    .feedback-form input[type="text"],
+    .feedback-form input[type="email"],
+    .feedback-form textarea {
+        width: 90%;
+        padding: 10px;
+        margin: 10px 0;
+        border: 1px solid #ddd;
+        border-radius: 5px;
+    }
+    .feedback-form input[type="submit"] {
+        background-color: #5f27cd;
+        color: white;
+        padding: 10px 20px;
+        border: none;
+        border-radius: 5px;
+        cursor: pointer;
+        font-size: 16px;
+    }
+    .feedback-form input[type="submit"]:hover {
+        background-color: #341f97;
+    }
+</style>
+</head>
+<body>
+<div class="container">
+    <h1>Feedback Page</h1>
+    <p>We would love your feedback</p>
+    <p>Our goal is to make a platform that simplifies your workday. You’ve been using Thoth Tech Documentation Website for a while now, and we’d love to know what you think about it. We really appreciate your feedback!</p>
+
+    <div class="star-rating">
+        <input type="radio" id="star5" name="rating" value="5" /><label for="star5">★</label>
+        <input type="radio" id="star4" name="rating" value="4" /><label for="star4">★</label>
+        <input type="radio" id="star3" name="rating" value="3" /><label for="star3">★</label>
+        <input type="radio" id="star2" name="rating" value="2" /><label for="star2">★</label>
+        <input type="radio" id="star1" name="rating" value="1" /><label for="star1">★</label>
+      </div>
+
+    <form class="feedback-form" action="https://api.web3forms.com/submit" method="post">
+        <input type="text" name="name" placeholder="Name" required>
+        <input type="email" name="email" placeholder="Email" required>
+        <div>
+          <input type="radio" id="suggestion" name="feedback_type" value="suggestion" checked />
+          <label for="suggestion">Suggestion</label>
+          <input type="radio" id="improvement" name="feedback_type" value="improvement" />
+          <label for="improvement">Improvement Idea</label>
+        </div>
+        <input type="hidden" name="access_key" value="2f6518a2-a330-4048-b003-4584019c7344">
+        <textarea name="comment" placeholder="Add your feedback" rows="4" required></textarea>
+        <input type="submit" value="SUBMIT" />
+      </form>
+    </div>
+</div>
+</body>
+</html>
diff --git a/public/submitsuccess.html b/public/submitsuccess.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Feedback Submitted</title>
+<style>
+    body {
+        font-family: Arial, sans-serif;
+        background: #f4f4f4;
+        margin: 0;
+        padding: 0;
+    }
+    .container {
+        max-width: 600px;
+        margin: 50px auto;
+        background: #fff;
+        padding: 20px;
+    }
+    h1, p {
+        text-align: center;
+    }
+    .feedback-message {
+        background-color: #ffc0cb; /* Light pink background */
+        color: #333;
+        padding: 20px;
+        margin: 30px 0;
+        border-radius: 8px;
+        text-align: center;
+    }
+</style>
+</head>
+<body>
+<div class="container">
+    <h1>Feedback Submitted</h1>
+    <p>We would love your feedback</p>
+    <p>Our goal is to make a platform that simplifies your workday. You’ve been using Thoth Tech Documentation Website for a while now, and we’d love to know what you think about it. We really appreciate your feedback!</p>
+
+    <div class="feedback-message">
+        <h2>Thanks for sharing your feedback with us</h2>
+        <p>Your feedback has been submitted successfully.</p>
+        <p>Your input is valuable to us and will help us improve our services.</p>
+    </div>
+</div>
+</body>
+</html>
diff --git a/src/content/docs/feedback/feedback form documentation.md b/src/content/docs/feedback/feedback form documentation.md
@@ -0,0 +1,52 @@
+---
+title: Feedback Form Implementation Documentation
+description: Documentation of the feedback form setup for future maintenance and enhancement.
+---
+
+## Feedback Form Implementation Documentation
+
+### Overview
+
+This document outlines the implementation and setup of the feedback form used on the Thoth Tech
+Documentation Website. It is intended to assist future students and developers in understanding the
+current system and to facilitate further development and maintenance.
+
+### Tools Used
+
+- **HTML/CSS** for structuring and styling the form.
+- **JavaScript** for front-end logic.
+- **Web3Forms** for handling form submissions without server-side code.
+- **Node.js** and **Express** for server-side logic in case of future custom backend integration.
+
+### Form Setup and Design
+
+The feedback form is designed to be simple yet functional, enabling users to quickly provide their
+feedback on the Thoth Tech Documentation Website. It includes fields for user identification,
+feedback content, and ratings:
+
+- **Name**: Allows the user to enter their name.
+- **Email**: Allows the user to enter their email for follow-ups.
+- **Feedback Type**: Users can select whether they are submitting a general suggestion or specific
+  improvement ideas.
+- **Rating**: Users can rate their experience using star ratings.
+- **Comments**: A textarea for additional comments.
+
+### Integration with Web3Forms
+
+Web3Forms is used to manage form submissions. This service was selected for its simplicity and the
+ability to handle form submissions without the need for additional backend code, making it ideal for
+projects with limited server-side interaction:
+
+#### How to Configure Web3Forms
+
+1. **API Key**: An API key is required from Web3Forms, which is included in the form's hidden input
+   field to authenticate requests.
+2. **Form Action**: The form's `action` attribute is set to the Web3Forms endpoint URL.
+3. **Method**: POST method is used to send data to the Web3Forms service.
+
+```html
+<form action="https://api.web3forms.com/submit" method="post">
+  <input type="hidden" name="access_key" value="your_access_key_here" />
+  <!-- Additional form fields -->
+</form>
+```
diff --git a/src/content/docs/feedback/feedback form.md b/src/content/docs/feedback/feedback form.md
@@ -0,0 +1,40 @@
+---
+title: Feedback Form
+description: a way to provide feedback
+---
+
+#### We Value Your Feedback
+
+Thank you for choosing to share your thoughts with us. Your feedback helps us improve and continue
+providing the best experience possible.
+
+#### How to Provide Feedback
+
+You have several options for sending us your feedback. Please choose the one that suits you best:
+
+##### Option 1: Fill Out Our Online Form
+
+Please fill out our detailed feedback form available at [Our Feedback Form](/feedbackform.html). It
+only take a few minutes!
+
+##### Option 2: Contact your team leader or senior students
+
+If you have specific feedback or concerns that require direct communication, please reach out to
+your team leader or seniro students. This ensures that your feedback is addressed promptly and
+personally.
+
+---
+
+#### What Happens Next?
+
+After you submit your feedback:
+
+- **We Review It:** All feedback is reviewed by our team to understand your needs and requirements.
+- **We Plan:** We plan improvements based on the feedback we receive from you and other users.
+- **We Implement:** We try out best to implement changes and improvements continuously to enhance
+  your experience.
+
+Your input is incredibly valuable to us, and we appreciate the time you take to help us improve. If
+you have any immediate concerns, please don't hesitate to contact our company operation team.
+
+Thank you for your contribution!
diff --git a/src/content/docs/feedback/feedback storage and access instructions.md b/src/content/docs/feedback/feedback storage and access instructions.md
@@ -0,0 +1,31 @@
+---
+title: Feedback Storage and Access Instructions
+description: Documentation of the feedback form setup for future maintenance and enhancement.
+---
+
+## Feedback Handling Documentation
+
+### Overview
+
+This document outlines how feedback submissions from our website are handled. The feedback is sent
+to a dedicated email address and stored securely for review by authorized personnel.
+
+### Feedback Submission Process
+
+1. **Form Submission**: When users submit feedback through the feedback form on our website, the
+   data is sent directly to a specified email address.
+2. **Email Storage**: The feedback is stored in the inbox of this email account for future reference
+   and review by the team.
+
+### Email Address Details
+
+The email address dedicated to receiving and storing feedback submissions is documented in our
+Trello board. Access details are as follows:
+
+- **Trello Board**: Company Operation Board
+- **List**: Company Website List
+
+```html
+##Another place to look up the email address and password There is also a document in conpamy
+operation channel which includes the email address and password.
+```