Spaces:
Sleeping
Sleeping
File size: 3,510 Bytes
894c3aa 21c311e 894c3aa 21c311e 894c3aa 21c311e 894c3aa 21c311e 894c3aa 21c311e 894c3aa 21c311e 894c3aa 21c311e 894c3aa 21c311e 894c3aa 21c311e 894c3aa 21c311e 894c3aa 21c311e 894c3aa 21c311e 894c3aa 21c311e 894c3aa 21c311e 894c3aa 21c311e 894c3aa 21c311e 894c3aa 21c311e 894c3aa 21c311e 894c3aa 21c311e 894c3aa 21c311e 894c3aa 21c311e 894c3aa 21c311e 894c3aa 21c311e 894c3aa 21c311e 894c3aa | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Iris Predictor</title>
<style>
/* Background GIF styling */
body {
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: url('https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExNHJueW9qZ2Z6Znh6Znh6Znh6Znh6Znh6Znh6Znh6Znh6Znh6Znh6JmVwPXYxX2ludGVybmFsX2dpZl9ieV9pZCZjdD1n/3o7TKMGpxxZBSqeL5u/giphy.gif') no-repeat center center fixed;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
/* Semi-transparent glass effect container */
.glass-card {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
padding: 30px;
border-radius: 20px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
width: 90%;
max-width: 400px;
text-align: center;
}
h1 {
color: #333;
font-size: 1.5rem;
margin-bottom: 25px;
}
/* Mobile-optimized inputs */
input[type="number"] {
width: 100%;
padding: 12px;
margin: 8px 0;
border: 2px solid #ddd;
border-radius: 10px;
font-size: 16px; /* Prevents iOS auto-zoom on focus */
box-sizing: border-box;
transition: border-color 0.3s;
}
input[type="number"]:focus {
border-color: #007bff;
outline: none;
}
input[type="submit"] {
width: 100%;
background: #007bff;
color: white;
border: none;
padding: 15px;
border-radius: 10px;
font-size: 1.1rem;
font-weight: bold;
margin-top: 15px;
cursor: pointer;
}
.prediction-result {
background: #d4edda;
color: #155724;
padding: 15px;
border-radius: 10px;
margin-top: 20px;
font-weight: bold;
}
.home-link {
display: inline-block;
margin-top: 20px;
color: #007bff;
text-decoration: none;
font-weight: 500;
}
</style>
</head>
<body>
<div class="glass-card">
<h1>Iris Flower Predictor</h1>
<form action="/predictiris" method="POST">
<input type="number" name="sepal_length" placeholder="Sepal Length (e.g. 5.1)"
step="0.1" min="0.1" max="15.0" required>
<input type="number" name="sepal_width" placeholder="Sepal Width (e.g. 3.5)"
step="0.1" min="0.1" max="15.0" required>
<input type="number" name="petal_length" placeholder="Petal Length (e.g. 1.4)"
step="0.1" min="0.1" max="15.0" required>
<input type="number" name="petal_width" placeholder="Petal Width (e.g. 0.2)"
step="0.1" min="0.1" max="15.0" required>
<input type="submit" value="Predict Species">
</form>
{% if prediction %}
<div class="prediction-result">
Result: {{ prediction }}
</div>
{% endif %}
<a href="/" class="home-link">← Back to Home</a>
</div>
</body>
</html> |