Datasets
Models
Downloads: 1
Diff of
/templates/home.html
[000000]
..
[32b2c5]
Switch to side-by-side view
--- a +++ b/templates/home.html @@ -0,0 +1,179 @@ +<!DOCTYPE html> +<html> +<head> + <title>Brain Hemorrhage</title> + <style> + + body { + background: radial-gradient(ellipse at center, #81276f 0%, #090a0f 100%); + height: 100vh; + color: white; + font-family: 'Open Sans', sans-serif; + font-size: 16px; + + } + + h1 { + text-align: center; + font-weight: bold; + font-size: 36px; + margin-top: 50px; + margin-bottom: 30px; + text-shadow: 2px 2px #000000; + animation: pulse 1s ease-in-out infinite alternate; + } + + @keyframes pulse { + from {transform: scale(1);} + to {transform: scale(1.05);} + } + + .row { + display: flex; + padding: 10px; + justify-content: center; + align-items: center; + margin-top: 50px; + } + + .column { + width: 30%; + margin: 1%; + background-color: #1d1f24; + box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5); + border-radius: 10px; + padding: 20px; + transition: all 0.3s ease-in-out; + animation: slide-in 0.5s ease-in-out forwards; + } + + @keyframes slide-in { + from {transform: translateX(-100%);} + to {transform: translateX(0);} + } + + .column:hover { + transform: scale(1.05); + box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.7); + } + + input[type=submit], input[type=file]{ + width: 100%; + border:1px solid #ffffff; + color: white; + background-color: transparent; + padding:14px 0; + margin-top: 15px; + margin-bottom: 15px; + border: none; + border-radius: 4px; + cursor: pointer; + transition: all 0.3s ease-in-out; + } + + input[type=submit]{ + border:1px solid #ffffff; + } + + input[type=submit]:hover{ + background-color: #ffffff; + color: black; + transform: scale(1.1); + } + + h3{ + border-bottom:1px solid #ffffff; + padding-bottom: 10px; + text-align: center; + margin-bottom: 20px; + text-shadow: 2px 2px #000000; + } + + p { + margin-bottom: 5px; + font-size: 18px; + font-weight: bold; + text-align: center; + text-shadow: 2px 2px #000000; + } + + .status-healthy { + color: green; + } + + .status-unhealthy { + color: red; + } + + .img-wrapper { + position: relative; + width: 100%; + overflow: hidden; + border-radius: 10px; + } + + + .img-wrapper::before { + content: ""; + display: block; + padding-top: 56.25%; + } + + .img-wrapper img { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + transition: all 0.3s ease-in-out; + transform: scale(1); +} + +.img-wrapper img:hover { + transform: scale(1.1); +} + + + </style> + </head> + <body> + <h1>BRAIN HEMORRHAGE DETECTION</h1> + <div class="row"> + <div class="column"> + <h3>Select Image</h3> + <form action="{{url_for('image')}}" method="POST" style="display: flex;"> + <input type="file" id="file" name="filename" required> + <input type="submit" value="Analyse"> + </form> + </div> + <div class="column"> + <h3>Original</h3> + {% if (ImageDisplay) %} + <img src="{{ImageDisplay}}" width="100%"> + {% endif %} + </div> + <div class="column"> + <h3>Answer</h3> + {% if (status) %} + {% if status == "Healthy" %} + <p><b>Status: </b>Healthy</p> + {% else %} + <p><b>Status: </b>{{status}}</p> + <p><b>Accuracy:</b>{{accuracy}}</p> + <!-- <p><b>Disease Name: </b>{{disease}}</p> + <p><b>{{remedie}}</b></p> + {% for remedie in remedie1 %} + <ul> + <li>{{remedie}}</li> + </ul> + {% endfor %} --> + {% endif %} + {% endif %} + </div> + </div> + <script> + /* script goes here */ + </script> + </body> +</html> \ No newline at end of file