-
Notifications
You must be signed in to change notification settings - Fork 27
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
d358fcd
commit 3878f48
Showing
4 changed files
with
255 additions
and
3 deletions.
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
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,195 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
|
|
||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Feedback</title> | ||
| <link rel="stylesheet" href="styles.css"> <!-- Link to your CSS file --> | ||
|
|
||
| <style> | ||
|
|
||
| .feedback-page{ | ||
|
|
||
| background: #ea1515; | ||
|
|
||
| } | ||
|
|
||
| /* Basic styles for the feedback box */ | ||
| .feedback-box { | ||
|
|
||
| max-width: 600px; | ||
| height: 470px; | ||
| margin: 50px auto; | ||
| padding: 20px; | ||
| border: 1px solid #ccc; | ||
| border-radius: 10px; | ||
| background-color: #042405; | ||
|
|
||
| } | ||
|
|
||
| .star-rating { | ||
|
|
||
| display: flex; | ||
| justify-content: center; | ||
| margin-top: 10px; | ||
| flex-direction: row-reverse; | ||
| font-size: 70px; | ||
|
|
||
| } | ||
|
|
||
| .star-rating input { | ||
|
|
||
| display: none; /* Hide the radio buttons */ | ||
|
|
||
| } | ||
|
|
||
| .star-rating label { | ||
|
|
||
| color: #026a06; /* Default star color */ | ||
| cursor: pointer; | ||
|
|
||
| } | ||
|
|
||
| .star-rating input:checked ~ label { | ||
|
|
||
| color: #5cd961; /* Color for selected stars */ | ||
|
|
||
| } | ||
|
|
||
| .star-rating label:hover, | ||
| .star-rating label:hover ~ label { | ||
|
|
||
| color: #5cd961; /* Hover effect */ | ||
|
|
||
| } | ||
|
|
||
| .feed-msg { | ||
|
|
||
| font-size: 20px; | ||
| width: 100%; | ||
| height: 200px; | ||
| width: 580px; | ||
| padding: 10px; | ||
| margin-top: 10px; | ||
| border-radius: 5px; | ||
| border: 1px solid #ccc; | ||
| background: #c5f1db; | ||
|
|
||
| } | ||
|
|
||
| button { | ||
|
|
||
| padding: 10px 20px; | ||
| background-color: #4caf50; | ||
| color: white; | ||
| border: none; | ||
| cursor: pointer; | ||
| font-size: 16px; | ||
| transition: background-color 0.3s; | ||
| margin-left: 220px; | ||
| margin-top: 50px; | ||
|
|
||
| } | ||
|
|
||
| </style> | ||
|
|
||
| </head> | ||
|
|
||
| <body style=" | ||
| background: #c5f1db; | ||
| "> | ||
|
|
||
| <header> | ||
|
|
||
| <h1 style=" | ||
| /* align-items: center; */ | ||
| text-align: center; | ||
| ">Feedback Page</h1> | ||
|
|
||
| </header> | ||
|
|
||
| <main> | ||
|
|
||
| <div class="feedback-box"> | ||
| <form id="feedback-form" action="#" method="post"> | ||
| <div class="star-rating" aria-label="Rating" role="radiogroup"> | ||
| <input type="radio" id="star5" name="rating" value="5"> | ||
| <label for="star5" title="5 stars">★</label> | ||
| <input type="radio" id="star4" name="rating" value="4"> | ||
| <label for="star4" title="4 stars">★</label> | ||
| <input type="radio" id="star3" name="rating" value="3"> | ||
| <label for="star3" title="3 stars">★</label> | ||
| <input type="radio" id="star2" name="rating" value="2"> | ||
| <label for="star2" title="2 stars">★</label> | ||
| <input type="radio" id="star1" name="rating" value="1"> | ||
| <label for="star1" title="1 star">★</label> | ||
| </div> | ||
|
|
||
| <textarea class="feed-msg" rows="7" cols="45" placeholder="Your Comments . . ." required></textarea><br> | ||
| <div class="feed-btn"> | ||
| <button style="border-radius: 10px;" type="submit">Submit Feedback</button> | ||
| </div> | ||
| </form> | ||
|
|
||
| </div> | ||
|
|
||
| </main> | ||
|
|
||
| <script> | ||
|
|
||
| document.getElementById('feedback-form').addEventListener('submit', function(event) { | ||
| event.preventDefault(); | ||
| alert('Thank you for your feedback!'); | ||
| // You can add more functionality here | ||
| }); | ||
|
|
||
| </script> | ||
|
|
||
| <script> | ||
| const coords = { x: 0, y: 0 }; | ||
| const circles = document.querySelectorAll(".circle"); | ||
|
|
||
|
|
||
| // Assign initial colors to the circles | ||
| circles.forEach(function (circle) { | ||
| circle.x = 0; | ||
| circle.y = 0; | ||
|
|
||
| }); | ||
|
|
||
| window.addEventListener("mousemove", function (e) { | ||
| coords.x = e.clientX; | ||
| coords.y = e.clientY; | ||
|
|
||
| }); | ||
|
|
||
| function animateCircles() { | ||
| let x = coords.x; | ||
| let y = coords.y; | ||
|
|
||
| circles.forEach(function (circle, index) { | ||
| circle.style.left = x - 12 + "px"; | ||
| circle.style.top = y - 12 + "px"; | ||
| circle.style.scale=(circles.length - index) / circles.length; | ||
|
|
||
| circle.x = x; | ||
| circle.y = y; | ||
|
|
||
| const nextCircle = circles[index + 1] || circles[0]; | ||
| x += (nextCircle.x - x) * 0.3; | ||
| y += (nextCircle.y - y) * 0.3; | ||
| }); | ||
|
|
||
| requestAnimationFrame(animateCircles); | ||
| } | ||
|
|
||
| animateCircles(); | ||
|
|
||
| </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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| #nextLevelMessage { | ||
|
|
||
| display: none; | ||
| position: absolute; | ||
| top: 40%; | ||
| left: 50%; | ||
| transform: translate(-50%, -50%); | ||
| font-size: 28px; | ||
| font-weight: bold; | ||
| color: white; | ||
| background-color: rgba(0, 0, 0, 0.7); | ||
| padding: 15px 20px; | ||
| border-radius: 10px; | ||
| box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); | ||
| text-align: center; | ||
| z-index: 1000; /* Make sure it's above other elements */ | ||
|
|
||
| } | ||
|
|
||
| .hidden { | ||
|
|
||
| display: none; | ||
|
|
||
| } | ||
|
|
||
| FeedbackPage | ||
| .feedback-button { | ||
|
|
||
| position: fixed; /* Fixes the button in place */ | ||
| bottom: 20px; /* Distance from the bottom */ | ||
| left: 20px; /* Distance from the left */ | ||
| padding: 10px 15px; /* Add some padding */ | ||
| border-radius: 10px; /* Rounded corners */ | ||
| background-color: #f39c12; /* Button color */ | ||
| color: white; /* Text color */ | ||
| border: none; /* No border */ | ||
| cursor: pointer; /* Pointer cursor on hover */ | ||
| z-index: 1000; /* Ensure it's above other elements */ | ||
| margin-left: 300px | ||
|
|
||
| } | ||
|
|
||
| .feedback-button:hover { | ||
|
|
||
| background-color: #e67e22; /* Darker shade on hover */ | ||
|
|
||
| } | ||
|
|
||
| .feedback-page{ | ||
|
|
||
| background: #000000; | ||
|
|
||
| } | ||
|
|