Merge pull request #64 from taniya542/main

codingkatty · Oct 14, 2024 · eacf9b5 · eacf9b5
2 parents 40b4e0f + 6465b7e
commit eacf9b5
Show file tree

Hide file tree

Showing 4 changed files with 202 additions and 0 deletions.
diff --git a/feedback.css b/feedback.css
@@ -0,0 +1,146 @@
+/* Global styles */
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: 'Poppins', sans-serif;
+    background: linear-gradient(135deg, #f3f4f7 0%, #d7e2f2 100%);
+    background-attachment: fixed;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    padding: 20px;
+    color: #333;
+}
+
+/* Feedback form container */
+.feedback-container {
+    background-color: #ffffff;
+    border-radius: 16px;
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
+    padding: 30px;
+    max-width: 480px;
+    width: 100%;
+    text-align: center;
+    transition: transform 0.3s ease;
+    animation: slideIn 1s ease-in-out;
+}
+
+/* Slide-in animation */
+@keyframes slideIn {
+    0% { opacity: 0; transform: translateY(50px); }
+    100% { opacity: 1; transform: translateY(0); }
+}
+
+h2 {
+    font-size: 26px;
+    color: #34495e;
+    margin-bottom: 25px;
+    font-weight: 600;
+    letter-spacing: 1px;
+}
+
+/* Form styling */
+form {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+label {
+    margin: 10px 0 5px;
+    color: #2c3e50;
+    font-weight: 500;
+    font-size: 15px;
+}
+
+input, select, textarea {
+    width: 100%;
+    padding: 12px;
+    border: 1px solid #dfe6e9;
+    border-radius: 10px;
+    margin-bottom: 20px;
+    font-size: 16px;
+    background-color: #f7f9fc;
+    outline: none;
+    transition: border-color 0.3s ease;
+}
+
+input:focus, select:focus, textarea:focus {
+    border-color: #2980b9;
+}
+
+/* Textarea specifics */
+textarea {
+    resize: vertical;
+    min-height: 120px;
+}
+
+/* Button styling */
+button {
+    padding: 12px 20px;
+    width: 100%;
+    background-color: #2980b9;
+    color: #ffffff;
+    border: none;
+    border-radius: 12px;
+    font-size: 18px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background-color 0.3s ease, transform 0.2s ease;
+}
+
+button:hover {
+    background-color: #3498db;
+    transform: scale(1.05);
+}
+
+button:active {
+    background-color: #1f618d;
+    transform: scale(1);
+}
+
+/* Response message */
+.response-message {
+    margin-top: 20px;
+    font-size: 18px;
+    font-weight: 500;
+    color: #2ecc71;
+}
+
+.error {
+    color: #e74c3c;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .feedback-container {
+        padding: 25px;
+        max-width: 100%;
+    }
+
+    h2 {
+        font-size: 24px;
+    }
+
+    button {
+        font-size: 16px;
+    }
+}
+
+/* Subtle Background Pattern */
+body::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: url('https://www.transparenttextures.com/patterns/cubes.png');
+    opacity: 0.1;
+    z-index: -1;
+}
diff --git a/feedback.html b/feedback.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Math4Python Feedback Form</title>
+    <link rel="stylesheet" href="feedback.css">
+</head>
+<body>
+    <div class="feedback-container">
+        <h2>Feedback Form</h2>
+        <form id="feedbackForm" onsubmit="return handleSubmit()">
+            <label for="name">Name:</label>
+            <input type="text" id="name" name="name" required>
+
+            <label for="email">Email:</label>
+            <input type="email" id="email" name="email" required>
+
+            <label for="rating">Rating:</label>
+            <select id="rating" name="rating" required>
+                <option value="">--Select--</option>
+                <option value="5">Excellent</option>
+                <option value="4">Very Good</option>
+                <option value="3">Good</option>
+                <option value="2">Fair</option>
+                <option value="1">Poor</option>
+            </select>
+
+            <label for="comments">Comments:</label>
+            <textarea id="comments" name="comments" rows="4" placeholder="Your feedback..." required></textarea>
+
+            <button type="submit">Submit Feedback</button>
+        </form>
+        <div id="responseMessage" class="response-message"></div>
+    </div>
+    <script src="feedback.js"></script>
+</body>
+</html>
diff --git a/feedback.js b/feedback.js
@@ -0,0 +1,17 @@
+function handleSubmit() {
+    const name = document.getElementById('name').value;
+    const email = document.getElementById('email').value;
+    const rating = document.getElementById('rating').value;
+    const comments = document.getElementById('comments').value;
+    const responseMessage = document.getElementById('responseMessage');
+
+    if (!name || !email || !rating || !comments) {
+        responseMessage.textContent = 'Please fill in all the fields.';
+        responseMessage.classList.add('error');
+        return false;
+    }
+
+    responseMessage.textContent = `Thank you, ${name}, for your feedback!`;
+    responseMessage.classList.remove('error');
+    return false; // Prevents form submission for demo purposes
+}
diff --git a/index.html b/index.html
@@ -75,6 +75,7 @@ <h3>Quick Links</h3>
                     <li><a href="about.html">About</a></li>
                     <li><a href="learn.html">Learn</a></li>
                     <li><a href="challenge.html">Challenge</a></li>
+                    <li><a href="feedback.html">Feedback</a></li>
                     <li><a href="faq.html">FAQs</a></li>
                 </ul>
             </div>