Update templates/dashboard.html

templates/dashboard.html

@@ -47,7 +47,7 @@
   </section>
 
   <!-- 🔹 Iris Prediction Form -->
-  <section aria-labelledby="predict-title">
+  <section aria-labelledby="predict-title" id="predict-section">
     <h3 id="predict-title">Iris Flower Predictor</h3>
     <form method="POST" action="{{ url_for('predict') }}">
       <input type="number" step="0.1" name="sepal_length" placeholder="Sepal Length" required>
@@ -58,10 +58,14 @@
     </form>
 
     {% if prediction %}
-  <div class="prediction-box">
-    The predicted flower species is: <strong>{{ prediction }}</strong>
-  </div>
-  {% endif %}
+    <div class="prediction-box">
+      🌸 The predicted flower species is: <strong>{{ prediction }}</strong>
+    </div>
+    {% endif %}
+
+    {% if error %}
+    <div class="alert alert-danger">{{ error }}</div>
+    {% endif %}
   </section>
 
   <section class="contact">
@@ -73,8 +77,8 @@
     <button class="logout-btn">Logout</button>
   </a>
 </div>
+
 <style>
-  /* Copied inline styles from your uploaded dashboard */
   body {
     background: #f5f7fa;
     color: #333;
@@ -114,5 +118,14 @@
   .contact a:hover { background: #5a67ff; color: white; box-shadow: 0 8px 20px rgba(90,103,255,0.6); }
   .logout-btn { margin: 40px auto 0; display: block; background: #ff5c5c; color: white; font-weight: 700; border: none; padding: 14px 28px; border-radius: 30px; cursor: pointer; box-shadow: 0 6px 12px rgba(255,92,92,0.4); transition: background-color 0.3s ease; }
   .logout-btn:hover { background: #e04545; }
+  .prediction-box { margin-top: 20px; padding: 15px; background: #e8f0fe; border-left: 5px solid #5a67ff; border-radius: 8px; font-size: 1.1rem; }
+  .alert { margin-top: 15px; padding: 12px; border-radius: 8px; background: #ffe6e6; color: #cc0000; text-align: center; }
 </style>
+
+{% if scroll_to %}
+<script>
+  document.getElementById("{{ scroll_to }}-title")
+          .scrollIntoView({ behavior: "smooth" });
+</script>
+{% endif %}
 {% endblock %}