| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <title>Inspiration Console for Young Coders</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <style> |
| |
| .console { |
| background-color: #1f2937; |
| color: #10B981; |
| font-family: 'Courier New', Courier, monospace; |
| padding: 1rem; |
| border-radius: 0.5rem; |
| } |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(10px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| .fade-in { |
| animation: fadeIn 0.7s ease-in-out; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-200 flex items-center justify-center min-h-screen"> |
| <div class="bg-white p-8 rounded shadow-md w-full max-w-lg"> |
| <h1 class="text-3xl font-bold mb-6 text-center"> |
| Inspiration Console for Young Coders & Roboticists |
| </h1> |
| |
| {% if fortune %} |
| |
| <div id="console-output" class="console text-lg h-32 flex items-center justify-center"> |
| |
| </div> |
| <script> |
| document.addEventListener("DOMContentLoaded", function() { |
| const consoleOutput = document.getElementById("console-output"); |
| const fortuneMessage = `{{ fortune | escapejs }}`; |
| const messages = ["Analyzing...", "Thinking...", "Improving..."]; |
| let delay = 0; |
| |
| |
| messages.forEach((msg, index) => { |
| setTimeout(() => { |
| consoleOutput.textContent = msg; |
| consoleOutput.classList.add("fade-in"); |
| }, delay); |
| delay += 1500; |
| }); |
| |
| |
| setTimeout(() => { |
| consoleOutput.textContent = fortuneMessage; |
| consoleOutput.classList.add("fade-in"); |
| }, delay); |
| }); |
| </script> |
| |
| {% else %} |
| |
| <form action="/fortune" method="post" class="space-y-4"> |
| <div> |
| <label for="name" class="block text-sm font-medium text-gray-700">Name</label> |
| <input type="text" name="name" id="name" required |
| class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded" /> |
| </div> |
| <div> |
| <label for="roll_number" class="block text-sm font-medium text-gray-700">Roll Number</label> |
| <input type="text" name="roll_number" id="roll_number" required |
| class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded" /> |
| </div> |
| <div> |
| <label for="standard" class="block text-sm font-medium text-gray-700">Standard</label> |
| <select name="standard" id="standard" required |
| class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded"> |
| <option value="1st">1st</option> |
| <option value="2nd">2nd</option> |
| <option value="3rd">3rd</option> |
| <option value="4th">4th</option> |
| <option value="5th">5th</option> |
| <option value="6th">6th</option> |
| <option value="7th">7th</option> |
| <option value="8th">8th</option> |
| <option value="9th">9th</option> |
| <option value="10th">10th</option> |
| </select> |
| </div> |
| <div> |
| <button type="submit" |
| class="w-full bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-300"> |
| Reveal My Fortune |
| </button> |
| </div> |
| </form> |
| {% endif %} |
| </div> |
| </body> |
| </html> |
|
|
