Spaces:

AITestingWorkSpace
/

dataanalysis

Sleeping

App Files Files Community

Ansaribinhyder commited on Oct 29, 2025

Commit

cdc2048

1 Parent(s): 2546160

Updated UI

Browse files

Files changed (2) hide show

templates/index.html +79 -43
templates/plot.html +44 -30

templates/index.html CHANGED Viewed

@@ -1,60 +1,96 @@
 <!DOCTYPE html>
-<html>
 <head>
-    <title>IPM Data Visualizer</title>
     <style>
         body {
-            font-family: Arial, sans-serif;
-            text-align: center;
-            background: #f8f9fa;
-            padding: 40px;
         }
-        form {
-            background: white;
-            padding: 30px;
-            border-radius: 8px;
-            display: inline-block;
         }
-        input[type=file], button {
-            margin: 10px;
         }
-        button {
             background-color: #0078d7;
-            color: white;
-            padding: 10px 20px;
             border: none;
-            border-radius: 5px;
         }
-        .error { color: red; }
-        .message { color: green; }
     </style>
 </head>
 <body>
-    <h2>📊 IPM Golden vs Test Data Visualizer</h2>
-    {% if error %}
-    <p class="error">{{ error }}</p>
-    {% endif %}
-    {% if message %}
-    <p class="message">{{ message }}</p>
-    {% endif %}
-    {% if not golden_loaded %}
-    <form method="POST" enctype="multipart/form-data">
-        <h3>Step 1: Upload Golden Data (.xlsx)</h3>
-        <input type="file" name="golden_file" accept=".xlsx" required><br>
-        <button type="submit">Upload Golden</button>
-    </form>
-    {% else %}
-    <form method="POST" enctype="multipart/form-data">
-        <h3>Step 2: Upload New Test Data (.xlsx)</h3>
-        <input type="file" name="test_file" accept=".xlsx" required><br>
-        <button type="submit">Upload Test Data</button>
-    </form>
-    <br>
-    <form action="/reset_golden">
-        <button style="background-color:#d9534f;">Reset Golden Data</button>
-    </form>
-    {% endif %}
 </body>
 </html>

 <!DOCTYPE html>
+<html lang="en">
 <head>
+    <meta charset="UTF-8">
+    <title>IPM Golden vs Test Data Visualizer</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
     <style>
         body {
+            background: #f6f8fa;
+            font-family: "Segoe UI", Arial, sans-serif;
         }
+        .main-container {
+            max-width: 600px;
+            margin: 70px auto;
+            text-align: center;
         }
+        .card {
+            border: none;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
+            border-radius: 12px;
         }
+        .btn-primary {
             background-color: #0078d7;
             border: none;
         }
+        .btn-primary:hover {
+            background-color: #005fa3;
+        }
+        .btn-danger {
+            background-color: #dc3545;
+            border: none;
+        }
+        .btn-danger:hover {
+            background-color: #b22a37;
+        }
+        h2 {
+            margin-bottom: 30px;
+            font-weight: 600;
+            color: #333;
+        }
+        .file-label {
+            font-weight: 600;
+            margin-bottom: 10px;
+        }
+        .message, .error {
+            margin-bottom: 20px;
+            font-weight: 500;
+        }
+        .message {
+            color: #28a745;
+        }
+        .error {
+            color: #dc3545;
+        }
     </style>
 </head>
 <body>
+    <div class="main-container">
+        <h2>📊 IPM Golden vs Test Data Visualizer</h2>
+        {% if error %}
+        <div class="alert alert-danger">{{ error }}</div>
+        {% endif %}
+        {% if message %}
+        <div class="alert alert-success">{{ message }}</div>
+        {% endif %}
+        {% if not golden_loaded %}
+        <!-- Step 1: Upload Golden -->
+        <div class="card p-4 mb-4">
+            <h4 class="mb-3">Step 1️⃣: Upload Golden Data (.xlsx)</h4>
+            <form method="POST" enctype="multipart/form-data">
+                <input class="form-control mb-3" type="file" name="golden_file" accept=".xlsx" required>
+                <button type="submit" class="btn btn-primary w-100">Upload Golden Data</button>
+            </form>
+        </div>
+        {% else %}
+        <!-- Step 2: Upload Test -->
+        <div class="card p-4 mb-4">
+            <h4 class="mb-3">Step 2️⃣: Upload New Test Data (.xlsx)</h4>
+            <form method="POST" enctype="multipart/form-data">
+                <input class="form-control mb-3" type="file" name="test_file" accept=".xlsx" required>
+                <button type="submit" class="btn btn-primary w-100">Upload Test Data</button>
+            </form>
+        </div>
+        <!-- Reset Golden -->
+        <div class="card p-3 bg-light">
+            <form action="/reset_golden">
+                <button type="submit" class="btn btn-danger w-100">Reset Golden Data</button>
+            </form>
+        </div>
+        {% endif %}
+    </div>
 </body>
 </html>

templates/plot.html CHANGED Viewed

@@ -1,28 +1,47 @@
 <!DOCTYPE html>
-<html>
 <head>
     <title>IPM Data Plots</title>
     <style>
         body {
-            font-family: Arial, sans-serif;
             text-align: center;
-            background: #f4f4f4;
-            padding: 20px;
         }
         img {
             max-width: 90%;
-            border: 1px solid #ccc;
-            border-radius: 8px;
-            margin: 15px;
         }
         select {
             padding: 10px;
-            margin: 20px;
-            font-size: 16px;
         }
         .preview-title {
-            font-weight: bold;
-            margin-top: 20px;
         }
     </style>
     <script>
@@ -33,24 +52,19 @@
     </script>
 </head>
 <body>
-    <h2>📈 Golden vs Test Comparison</h2>
-    <h3>Preview (First few plots):</h3>
-    {% for c in preview_cols %}
-        <div class="preview-title">{{ c }}</div>
-        <img src="/plot_image/{{ c }}" alt="{{ c }}">
-    {% endfor %}
-    <hr>
-    <h3>View Other Columns</h3>
-    <select id="col-select" onchange="showPlot()">
-        <option disabled selected>Select a column</option>
-        {% for c in cols %}
-        <option value="{{ c }}">{{ c }}</option>
-        {% endfor %}
-    </select>
-    <br>
-    <img id="dynamic-plot" style="display:block; margin:auto; max-width:90%;">
-</body>
-</html>

 <!DOCTYPE html>
+<html lang="en">
 <head>
+    <meta charset="UTF-8">
     <title>IPM Data Plots</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
     <style>
         body {
+            background: #f6f8fa;
+            font-family: "Segoe UI", Arial, sans-serif;
+            padding: 30px;
+        }
+        h2 {
             text-align: center;
+            margin-bottom: 30px;
         }
         img {
             max-width: 90%;
+            border-radius: 10px;
+            box-shadow: 0 3px 12px rgba(0,0,0,0.1);
+            margin: 20px auto;
+            display: block;
+        }
+        .dropdown-container {
+            text-align: center;
+            margin-top: 20px;
         }
         select {
+            width: 60%;
             padding: 10px;
+            border-radius: 6px;
+            border: 1px solid #ccc;
+        }
+        .card {
+            border: none;
+            border-radius: 12px;
+            box-shadow: 0 3px 12px rgba(0,0,0,0.08);
+            background: #fff;
+            padding: 20px;
+            margin-bottom: 25px;
         }
         .preview-title {
+            font-weight: 600;
+            margin-top: 10px;
         }
     </style>
     <script>
     </script>
 </head>
 <body>
+    <div class="container">
+        <h2>📈 Golden vs Test Comparison</h2>
+        <div class="card">
+            <h4>Preview (First few plots)</h4>
+            {% for c in preview_cols %}
+                <div class="preview-title">{{ c }}</div>
+                <img src="/plot_image/{{ c }}" alt="{{ c }}">
+            {% endfor %}
+        </div>
+        <div class="card">
+            <h4>Select Another Column to View</h4>
+            <div class="dropdown-container">
+                <select id="col-select" onchange="showPlot()">
+                    <option