Spaces:
Sleeping
Sleeping
Update templates/index.html
Browse files- templates/index.html +19 -5
templates/index.html
CHANGED
|
@@ -5,9 +5,9 @@
|
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
<title>Iris Prediction</title>
|
| 7 |
<link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='img/bird.png') }}">
|
| 8 |
-
<!-- Tailwind CSS
|
| 9 |
<script src="https://cdn.tailwindcss.com"></script>
|
| 10 |
-
<!-- Font Awesome
|
| 11 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
|
| 12 |
<style>
|
| 13 |
body {
|
|
@@ -21,11 +21,25 @@
|
|
| 21 |
background: rgba(255, 255, 255, 0.15);
|
| 22 |
border: 1px solid rgba(255, 255, 255, 0.25);
|
| 23 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 24 |
</style>
|
| 25 |
</head>
|
| 26 |
<body class="flex flex-col items-center justify-center min-h-screen text-white px-4">
|
| 27 |
|
| 28 |
-
<!-- Form
|
| 29 |
<form action="/predict" method="post"
|
| 30 |
class="glass w-full max-w-md p-6 rounded-2xl shadow-xl text-white space-y-4">
|
| 31 |
|
|
@@ -68,9 +82,9 @@
|
|
| 68 |
</a>
|
| 69 |
</form>
|
| 70 |
|
| 71 |
-
<!--
|
| 72 |
{% if data %}
|
| 73 |
-
<div class="glass mt-6 p-6 w-full max-w-md rounded-2xl text-center">
|
| 74 |
<h2 class="text-xl font-semibold mb-2"><i class="fa-solid fa-leaf mr-2"></i>Prediction Result</h2>
|
| 75 |
<p class="text-lg mb-4">The predicted flower species is:
|
| 76 |
<strong class="text-yellow-300">{{ data }}</strong>
|
|
|
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
<title>Iris Prediction</title>
|
| 7 |
<link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='img/bird.png') }}">
|
| 8 |
+
<!-- Tailwind CSS -->
|
| 9 |
<script src="https://cdn.tailwindcss.com"></script>
|
| 10 |
+
<!-- Font Awesome -->
|
| 11 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
|
| 12 |
<style>
|
| 13 |
body {
|
|
|
|
| 21 |
background: rgba(255, 255, 255, 0.15);
|
| 22 |
border: 1px solid rgba(255, 255, 255, 0.25);
|
| 23 |
}
|
| 24 |
+
/* Fade-in + slide-up animation */
|
| 25 |
+
@keyframes fadeSlide {
|
| 26 |
+
0% {
|
| 27 |
+
opacity: 0;
|
| 28 |
+
transform: translateY(20px);
|
| 29 |
+
}
|
| 30 |
+
100% {
|
| 31 |
+
opacity: 1;
|
| 32 |
+
transform: translateY(0);
|
| 33 |
+
}
|
| 34 |
+
}
|
| 35 |
+
.fade-slide {
|
| 36 |
+
animation: fadeSlide 0.8s ease-out forwards;
|
| 37 |
+
}
|
| 38 |
</style>
|
| 39 |
</head>
|
| 40 |
<body class="flex flex-col items-center justify-center min-h-screen text-white px-4">
|
| 41 |
|
| 42 |
+
<!-- Form -->
|
| 43 |
<form action="/predict" method="post"
|
| 44 |
class="glass w-full max-w-md p-6 rounded-2xl shadow-xl text-white space-y-4">
|
| 45 |
|
|
|
|
| 82 |
</a>
|
| 83 |
</form>
|
| 84 |
|
| 85 |
+
<!-- Animated Result -->
|
| 86 |
{% if data %}
|
| 87 |
+
<div class="glass mt-6 p-6 w-full max-w-md rounded-2xl text-center fade-slide">
|
| 88 |
<h2 class="text-xl font-semibold mb-2"><i class="fa-solid fa-leaf mr-2"></i>Prediction Result</h2>
|
| 89 |
<p class="text-lg mb-4">The predicted flower species is:
|
| 90 |
<strong class="text-yellow-300">{{ data }}</strong>
|