Diff of /templates/GI result.html [000000] .. [b018ba]

Switch to unified view

a b/templates/GI result.html
1
<!DOCTYPE html>
2
<html lang="en">
3
4
<head>
5
    <meta charset="UTF-8">
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
    <title>Prediction Result</title>
8
    <style>
9
        body {
10
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
11
            height: 100vh;
12
            margin: 0;
13
            display: flex;
14
            flex-direction: column;
15
            justify-content: center;
16
            align-items: center;
17
            background-image: linear-gradient(to right, #8e2de2, #4a00e0);
18
            color: #fff;
19
        }
20
21
        .result-box {
22
            background-color: rgba(200, 240, 196, 0.85);
23
            color: #040404;
24
            padding: 20px 50px;
25
            border-radius: 10px;
26
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
27
            text-align: center;
28
            max-width: 600px;
29
            margin: 40px;
30
        }
31
32
        .result-box h2 {
33
            margin-bottom: 15px;
34
            font-size: 2rem;
35
            color: #333;
36
        }
37
38
        .result-message {
39
            font-size: 20px;
40
            font-weight: bold;
41
            margin-bottom: 20px;
42
            color: #444;
43
        }
44
45
        .additional-details {
46
            font-size: 18px;
47
            color: #555;
48
            margin-top: 10px;
49
        }
50
51
        .logo {
52
            width: 150px;
53
            height: auto;
54
            margin-bottom: 20px;
55
        }
56
57
        .back-to-home-btn {
58
            background-color: hsl(286, 64%, 80%);
59
            color: #000000;
60
            font-size: 18px;
61
            font-weight: bold;
62
            padding: 12px 25px;
63
            border-radius: 8px;
64
            text-decoration: none;
65
            transition: background-color 0.3s ease;
66
            margin-top: 20px;
67
        }
68
69
        .back-to-home-btn:hover {
70
            background-color: #f0f0f0;
71
            color: #333;
72
        }
73
        .btn-home {
74
    background-color: #000000; /* Black color */
75
    color: white;
76
    height: 50px;
77
    width: 100px;
78
    padding: 4px 4px; /* Smaller padding */
79
    font-size: 26px; /* Smaller font size */
80
    border-radius: 5px;
81
    margin-top: 1px;
82
    margin-bottom: -32px;
83
    display: block;
84
    margin-left: auto;
85
    margin-right: auto;
86
    text-decoration: none; /* Remove underline */
87
    text-align: center;
88
}
89
90
.btn-home:hover {
91
    background-color: #333333; /* Darker shade of black on hover */
92
    color: white; /* Keep text white on hover */
93
    text-decoration: none; /* Remove underline on hover */
94
}
95
    </style>
96
</head>
97
98
<body>
99
    <header>
100
        <img src="../images/NEWLOGO.png" alt="Logo" class="logo">
101
    </header>
102
    <div>
103
        <a href="/" class="btn-home">Home</a> <!-- Link to the home page -->
104
    </div>
105
106
    <div class="result-box">
107
        <h2>Prediction Result</h2>
108
        {% if prediction_result == 0 %}
109
        <div class="result-message">The predicted class is: <strong>dyed-lifted-polyps</strong></div>
110
        {% elif prediction_result == 1 %}
111
        <div class="result-message">The predicted class is: <strong>dyed-resection-margins</strong></div>
112
        {% elif prediction_result == 2 %}
113
        <div class="result-message">The predicted class is: <strong>esophagitis</strong></div>
114
        {% elif prediction_result == 3 %}
115
        <div class="result-message">The predicted class is: <strong>normal-cecum</strong></div>
116
        {% elif prediction_result == 4 %}
117
        <div class="result-message">The predicted class is: <strong>normal-pylorus</strong></div>
118
        {% elif prediction_result == 5 %}
119
        <div class="result-message">The predicted class is: <strong>normal-z-line</strong></div>
120
        {% elif prediction_result == 6 %}
121
        <div class="result-message">The predicted class is: <strong>polyps</strong></div>
122
        {% elif prediction_result == 7 %}
123
        <div class="result-message">The predicted class is: <strong>ulcerative-colitis</strong></div>
124
        {% else %}
125
        <div class="result-message">Invalid result. Please try again.</div>
126
        {% endif %}
127
        <p class="additional-details">
128
            Predicted class ID: <strong>{{ prediction_result }}</strong><br>
129
            Suggested action: Consult a gastroenterologist if required.
130
        </p>
131
    </div>
132
133
    <div>
134
        <a href="GI diseases.html" class="back-to-home-btn">Upload Another Image</a>
135
    </div>
136
</body>
137
138
</html>