Open BobTheFarmer opened 9 months ago
Popcorn Hacks
<!doctype html> <html xmlns:layout="http://www.w3.org/1999/xhtml" xmlns:th="http://www.w3.org/1999/xhtml" layout:decorate="~{layouts/base}" lang="en"> <head> <title>405 error</title> <style> body { background-color: #f8f9fa; } .error-container { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; } .error-container h1 { font-size: 5rem; font-weight: bold; margin-bottom: 0; } .error-container h2 { font-size: 2rem; font-weight: bold; margin-top: 0; } .error-container button { margin-top: 2rem; padding: 1rem 2rem; border-radius: 0.5rem; background-color: #007bff; color: #fff; font-size: 1.5rem; font-weight: bold; border: none; cursor: pointer; transition: all 0.3s ease-in-out; } .error-container button:hover { background-color: #0069d9; } </style> </head> <body> <div class="error-container"> <h1>405</h1> <h2>Method Not Allowed</h2> <p>You may have accidently used an unsupported method.</p> <button id="play-game">Leave Page</button> </div> <script> const playGameButton = document.querySelector('#play-game'); playGameButton.addEventListener('click', () => { window.close(); }); </script> </body> </html>
I created a 500 error with a ball that bounces around.
<!DOCTYPE HTML> <html> <head> <title>500 error</title> <style> body { background-color: #f8f9fa; font-family: Arial, sans-serif; } .container { margin: 0 auto; max-width: 800px; text-align: center; } h1 { color: #dc3545; font-size: 4rem; margin-top: 2rem; } p { font-size: 1.5rem; margin-bottom: 2rem; } button { background-color: #dc3545; border: none; border-radius: 5px; color: #fff; cursor: pointer; font-size: 1.5rem; padding: 1rem 2rem; transition: background-color 0.3s ease; } button:hover { background-color: #c82333; } canvas { border: 1px solid #dc3545; margin: 2rem auto; } </style> </head> <body> <div class="container"> <h1>500 Internal Server Error</h1> <p>The server failed to process your request.</p> <button onclick="startGame()">Start</button> <canvas id="myCanvas" width="480" height="320"></canvas> <script> function startGame() { var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var x = canvas.width/2; var y = canvas.height-30; var dx = 2; var dy = -2; var ballRadius = 10; function drawBall() { ctx.beginPath(); ctx.arc(x, y, ballRadius, 0, Math.PI*2); ctx.fillStyle = "#dc3545"; ctx.fill(); ctx.closePath(); } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); drawBall(); if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) { dx = -dx; } if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) { dy = -dy; } x += dx; y += dy; } setInterval(draw, 10); } </script> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <title>Intro</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; } .square { display: flex; justify-content: center; align-items: center; width: 50%; height: 50%; background-color: #f2f2f2; border: 2px solid #000; } h1 { text-align: center; } </style> </head> <body> <div class="square"> <h1>Welcome to the Stuidous Backend</h1> </div> </body> </html>
Thymeleaf for interacting with a dog buying api
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>Post about a Dog</title> <style> body { font-family: 'Arial', sans-serif; background-color: #f4f4f4; margin: 0; padding: 0; } .container { width: 80%; margin: auto; overflow: hidden; } .box { background: rgba(255, 255, 255, 0.8); color: #333; padding: 20px; margin-bottom: 20px; border-radius: 5px; box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.3); } h1 { color: #333; text-align: center; } form { display: flex; flex-direction: column; align-items: center; } input[type="text"], textarea { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input[type="submit"] { width: 100%; background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; } input[type="submit"]:hover { background-color: #45a049; } </style> </head> <body> <div class="container"> <h1 th:text="'Hello, ' + ${dogName} + '!'" /> <div class="box"> <form action="#" th:action="@{/post}" method="post"> <label for="dogName">Dog Name:</label><br> <input type="text" id="dogName" name="dogName" th:value="${dogName}"><br> <label for="post">Post:</label><br> <textarea id="post" name="post"></textarea><br> <input type="submit" value="Submit"> </form> </div> <div th:if="${!#lists.isEmpty(posts)}"> <h2>Posts:</h2> <ul> <li>Test: test</li> <li th:each="post : ${posts}" th:text="${post}"></li> </ul> </div> </div> </body> </html>
Popcorn Hacks
Popcorn Hacks
Thymeleaf Template Hacks
503 error with an interactive element
500 error - Extra
Change to home screen
Controller Hacks