-
Notifications
You must be signed in to change notification settings - Fork 278
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #355 from Aditijainnn/feedback
added feedback option
- Loading branch information
Showing
6 changed files
with
274 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,264 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Feedback - AmbuFlow</title> | ||
|
|
||
| <link rel="stylesheet" href="src/css/index.css"> | ||
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"> | ||
|
|
||
| <style> | ||
| body { | ||
| font-family: "Poppins", sans-serif; | ||
| background-color: #f4f4f4; | ||
| margin: 0; | ||
| padding: 0; | ||
| color: #333; | ||
| display: flex; | ||
| flex-direction: column; | ||
| min-height: 100vh; | ||
| } | ||
|
|
||
| .content { | ||
| margin: 20px; | ||
| padding: 20px; | ||
| background-color: #fff; | ||
| border-radius: 5px; | ||
| flex-grow: 1; | ||
| } | ||
|
|
||
| h1 { | ||
| text-align: center; | ||
| color: #2c3e50; | ||
| } | ||
|
|
||
| .feedback-form { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
|
|
||
| } | ||
|
|
||
| .star-rating { | ||
| display: flex; | ||
| justify-content: center; | ||
| margin-bottom: 20px; | ||
| } | ||
|
|
||
| .star-rating input { | ||
| display: none; /* Hide radio inputs */ | ||
| } | ||
|
|
||
| .star-rating label { | ||
| font-size: 40px; /* Increased size for better visibility */ | ||
| color: #ddd; | ||
| cursor: pointer; | ||
| transition: color 0.2s; | ||
| } | ||
|
|
||
| /* Color the stars based on the selected rating */ | ||
| .star-rating input:checked ~ label { | ||
| color: #ffdd00; /* Color for selected stars */ | ||
| } | ||
|
|
||
| /* Color on hover */ | ||
| .star-rating label:hover, | ||
| .star-rating label:hover ~ label { | ||
| color: #ffdd00; /* Color on hover */ | ||
| } | ||
|
|
||
| button { | ||
| padding: 10px 20px; | ||
| background-color: #ff5733; | ||
| color: white; | ||
| border: none; | ||
| cursor: pointer; | ||
| font-size: 16px; | ||
| transition: background-color 0.3s; /* Smooth transition */ | ||
| } | ||
|
|
||
| button:hover { | ||
| background-color: #e64a19; | ||
| } | ||
|
|
||
| textarea { | ||
| width: 100%; /* Full width for better usability */ | ||
| max-width: 500px; /* Limiting max width */ | ||
| padding: 10px; | ||
| margin-top: 10px; | ||
| border: 1px solid #ccc; | ||
| border-radius: 4px; | ||
|
|
||
| } | ||
|
|
||
| @keyframes logoAnimation { | ||
| 0% { | ||
| opacity: 0; | ||
| transform: translateX(-100px); /* Start from the left */ | ||
| } | ||
| 50% { | ||
| transform: translateX(10px); /* Move slightly to the right */ | ||
| } | ||
| 100% { | ||
| opacity: 1; | ||
| transform: translateX(0); /* End at original position */ | ||
| } | ||
| } | ||
|
|
||
| /* Letter Drop Animation */ | ||
| @keyframes letterDrop { | ||
| 0% { | ||
| transform: translateY(-100%); | ||
| opacity: 0; | ||
| } | ||
| 50% { | ||
| transform: translateY(10px); /* Slight bounce */ | ||
| opacity: 1; | ||
| } | ||
| 100% { | ||
| transform: translateY(0); | ||
| } | ||
| } | ||
|
|
||
| .logo { | ||
| display: flex; | ||
| align-items: center; | ||
| animation: logoAnimation 1s ease forwards; | ||
| } | ||
|
|
||
| .brand-name { | ||
| display: flex; | ||
| flex-direction: row; | ||
| align-items: center; | ||
| margin-right: 10px; /* Space between the text and the logo image */ | ||
| } | ||
|
|
||
| .letter { | ||
| display: inline-block; | ||
| font-size: 2rem; | ||
| animation: letterDrop 0.5s ease forwards; | ||
| animation-delay: calc(var(--letter-index) * 0.1s); | ||
| } | ||
|
|
||
| .red { | ||
| color: red; | ||
| } | ||
| </style> | ||
| </head> | ||
|
|
||
|
|
||
|
|
||
| <header> | ||
| <div class="container"> | ||
| <div class="logo"> | ||
| <div class="brand-name"> | ||
| <span class="letter red" style="--letter-index: 1;">A</span> | ||
| <span class="letter red" style="--letter-index: 2;">m</span> | ||
| <span class="letter red" style="--letter-index: 3;">b</span> | ||
| <span class="letter red" style="--letter-index: 4;">u</span> | ||
| <span class="letter" style="--letter-index: 5;">F</span> | ||
| <span class="letter" style="--letter-index: 6;">l</span> | ||
| <span class="letter" style="--letter-index: 7;">o</span> | ||
| <span class="letter" style="--letter-index: 8;">w</span> | ||
| </div> | ||
| <img src="images/logo2-w.webp" alt="Ambulance Monitoring System Logo" style="width: 50px; height: auto" /> | ||
| </div> | ||
| <nav class="menu"> | ||
| <ul> | ||
| <li><a href="index.html" id="home-link" onclick="changeContent('home')"><i class="fa-solid fa-house"></i> Home</a></li> | ||
| <li><a href="features.html" id="features-link" onclick="changeContent('features')"><i class="fa-solid fa-file"></i> Features</a></li> | ||
| <li><a href="team.html" id="team-link" onclick="changeContent('team')"><i class="fa-solid fa-user-group"></i> Team</a></li> | ||
| <li><a href="contact.html" id="contact-link" onclick="changeContent('contact')"><i class="fa-solid fa-phone"></i> Contact</a></li> | ||
| <li><a href="Feedback.html" id="Feedback-link" onclick="changeContent('Feedback')"><i class="fa-solid fa-clipboard"></i> Feedback</a></li> | ||
| </ul> | ||
| </nav> | ||
| <div class="buttons"> | ||
| <a href="login.html" class="login">Log in</a> | ||
| <a href="up.html" class="get-started">Get started</a> | ||
| </div> | ||
| </div> | ||
| </header> | ||
|
|
||
|
|
||
| <body> | ||
| <header> | ||
| <a href="index.html"> | ||
| <h1>AmbuFlow Feedback</h1> | ||
| </a> | ||
| </header> | ||
|
|
||
| <div class="content"> | ||
| <h1>We Value Your Feedback</h1> | ||
| <div class="feedback-form"> | ||
| <form id="feedback-form" action="#" method="post"> | ||
| <div class="star-rating" aria-label="Rating" role="radiogroup"> | ||
| <input type="radio" id="star1" name="rating" value="1" /> | ||
| <label for="star1" title="1 star">★</label> | ||
| <input type="radio" id="star2" name="rating" value="2" /> | ||
| <label for="star2" title="2 stars">★</label> | ||
| <input type="radio" id="star3" name="rating" value="3" /> | ||
| <label for="star3" title="3 stars">★</label> | ||
| <input type="radio" id="star4" name="rating" value="4" /> | ||
| <label for="star4" title="4 stars">★</label> | ||
| <input type="radio" id="star5" name="rating" value="5" /> | ||
| <label for="star5" title="5 stars">★</label> | ||
| </div> | ||
| <textarea rows="4" placeholder="Your comments..." required></textarea><br /> | ||
| <div style="text-align: center; margin-top: 20px;"><button type="submit">Submit Feedback</button></div> | ||
| </form> | ||
| </div> | ||
| <div id="thank-you-message" style="display: none; text-align: center; margin-top: 20px; font-size: 18px; color: green;"> | ||
| Thank you for your response! | ||
| </div> | ||
| </div> | ||
|
|
||
|
|
||
| <footer> | ||
| <div style="text-align: center; margin-top: 20px;"> | ||
| <p>© 2024 AmbuFlow. All rights reserved.</p> | ||
| </div> | ||
| </footer> | ||
|
|
||
| <script> | ||
| // Add event listeners to each star label for toggling the selection | ||
| const stars = document.querySelectorAll('.star-rating input'); | ||
| stars.forEach(star => { | ||
| star.addEventListener('change', function () { | ||
| // Remove the checked state from all stars | ||
| stars.forEach(s => { | ||
| const label = document.querySelector(`label[for="${s.id}"]`); | ||
| label.style.color = '#ddd'; // Reset color for unselected stars | ||
| }); | ||
| // Highlight the selected star and all previous stars | ||
| this.checked = true; | ||
| const currentStarValue = this.value; | ||
| for (let i = 1; i <= currentStarValue; i++) { | ||
| const label = document.querySelector(`label[for="star${i}"]`); | ||
| label.style.color = '#ffdd00'; // Highlight selected stars | ||
| } | ||
| }); | ||
| }); | ||
|
|
||
| // Handle form submission | ||
| const form = document.getElementById('feedback-form'); | ||
| const thankYouMessage = document.getElementById('thank-you-message'); | ||
|
|
||
| form.addEventListener('submit', function (event) { | ||
| event.preventDefault(); // Prevent the default form submission | ||
|
|
||
| // Show the thank-you message | ||
| thankYouMessage.style.display = 'block'; | ||
|
|
||
| // Hide the form to avoid further submissions | ||
| form.style.display = 'none'; | ||
|
|
||
| // Redirect to the home page after 2 seconds | ||
| setTimeout(function () { | ||
| window.location.href = 'index.html'; | ||
| }, 2000); // Adjust the delay as needed | ||
| }); | ||
| </script> | ||
|
|
||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters