<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Prediction Result</title> <style> /* Set up font and body background */ body { font-family: 'Lato', sans-serif; display: flex; justify-content: center; align-items: center; background: linear-gradient(135deg, #e0eafc, #cfdef3); height: 100vh; margin: 0; background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1)), url('https://www.kateandlaurel.com/cdn/shop/products/qnecvkpyteyiqd0qfvat.jpg?v=1663828398') no-repeat center center / cover; color: #fff; } /* Card style for result */ .result-card { background: #fff; padding: 40px; border-radius: 12px; box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15); text-align: center; max-width: 400px; width: 90%; } /* Title and text styling */ .result-card h1 { font-size: 2em; color: #333; margin-bottom: 10px; } .result-card p { font-size: 1.2em; margin: 15px 0; color: #555; } /* Highlight the diagnosis result */ .diagnosis { font-weight: bold; font-size: 1.5em; color: #ff5252; } /* Button to go back */ .back-btn { margin-top: 20px; display: inline-block; padding: 10px 20px; border: none; border-radius: 5px; background: #007bff; color: white; text-decoration: none; font-size: 1em; } .back-btn:hover { background: #0056b3; } </style> </head> <body> <div class="result-card"> <h1>Prediction Result</h1> <p>The X-ray analysis indicates:</p> <p class="diagnosis">{{ result }}</p> <p>Confidence Level: <strong>{{ probability }}%</strong></p> <a href="/" class="back-btn">Try another image</a> </div> </body> </html>