The Toaster Feedback Page</br> <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> <style> body { background-color: #ff00ff; font-family: monospace; } #content { background: linear-gradient(90deg, #000, #000); padding: 2px; } #feedback_form { background: linear-gradient(0deg, #fff, #fff); border: 1px solid #000; padding: 4px; } #hate_form { background: linear-gradient(90deg, #000, #000); border: 1px solid #000; padding: 4px; margin: 0 0 0 -2px; } #submit { background: linear-gradient(0deg, #000, #000); border: 4px solid #000; padding: 4px; } </style> </head> <body> <div id="content"> <div id="feedback_form"> <form> <label for="reason">Reason for hating Toaster:</br> <textarea id="reason" style="font-family: Courier; width: 200; height: 100; background-color: #f00;"></textarea> </label> <button id="submit" type="submit"><a href="/toaster/feedback/hate">Submit Your Hate</a></button> </form> </div> <div id="hate_form" style="position: absolute; right: 0; top: 20px; z-index: 1;"> <form> <label for="hate">Your Hate Level:</br> <select id="hate" style="font-family: Courier; width: 100px;"> <option value="1">1/5</option> <option value="2">2/5</option> <option value="3">3/5</option> <option value="4">4/5</option> <option value="5">5/5</option> </select> </label> <button id="submit" type="submit"><a href="/toaster/feedback/hatedetails">Submit Your Hate</a></button> </form> </div> <p id="hatecounter">Total Hate: <span id="hatecounter_value">5</span></p> <p id="reasoncounter">Reasons for Hate: <span id="reasoncounter_value">0</span></p> <div id="hatecounter"> <a href="/toaster/feedback/hatelist">View Hate List</a> </div> </div> </body> </html>