Hugging Face's logo

Spaces:
Logan-Mutant
/
My-Space
Sleeping

App Files Community
Logan-Mutant commited on
Commit
21c311e
·
verified ·
1 Parent(s): 894c3aa

Update templates/predictpage.html

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