Hugging Face's logo

Spaces:
AITestingWorkSpace
/
dataanalysis
Sleeping

App Files Community
1
Ansaribinhyder commited on
Commit
16e58e0
·
1 Parent(s): cdc2048

Enhanced UI

Browse files
Files changed (1) hide show
  1. templates/index.html +135 -89
templates/index.html CHANGED
@@ -1,96 +1,142 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
- <title>IPM Golden vs Test Data Visualizer</title>
6
- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
7
- <style>
8
- body {
9
- background: #f6f8fa;
10
- font-family: "Segoe UI", Arial, sans-serif;
11
- }
12
- .main-container {
13
- max-width: 600px;
14
- margin: 70px auto;
15
- text-align: center;
16
- }
17
- .card {
18
- border: none;
19
- box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
20
- border-radius: 12px;
21
- }
22
- .btn-primary {
23
- background-color: #0078d7;
24
- border: none;
25
- }
26
- .btn-primary:hover {
27
- background-color: #005fa3;
28
- }
29
- .btn-danger {
30
- background-color: #dc3545;
31
- border: none;
32
- }
33
- .btn-danger:hover {
34
- background-color: #b22a37;
35
- }
36
- h2 {
37
- margin-bottom: 30px;
38
- font-weight: 600;
39
- color: #333;
40
- }
41
- .file-label {
42
- font-weight: 600;
43
- margin-bottom: 10px;
44
- }
45
- .message, .error {
46
- margin-bottom: 20px;
47
- font-weight: 500;
48
- }
49
- .message {
50
- color: #28a745;
51
- }
52
- .error {
53
- color: #dc3545;
54
- }
55
- </style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
56
  </head>
57
  <body>
58
- <div class="main-container">
59
- <h2>📊 IPM Golden vs Test Data Visualizer</h2>
60
-
61
- {% if error %}
62
- <div class="alert alert-danger">{{ error }}</div>
63
- {% endif %}
64
- {% if message %}
65
- <div class="alert alert-success">{{ message }}</div>
66
- {% endif %}
67
-
68
- {% if not golden_loaded %}
69
- <!-- Step 1: Upload Golden -->
70
- <div class="card p-4 mb-4">
71
- <h4 class="mb-3">Step 1️⃣: Upload Golden Data (.xlsx)</h4>
72
- <form method="POST" enctype="multipart/form-data">
73
- <input class="form-control mb-3" type="file" name="golden_file" accept=".xlsx" required>
74
- <button type="submit" class="btn btn-primary w-100">Upload Golden Data</button>
75
- </form>
76
- </div>
77
- {% else %}
78
- <!-- Step 2: Upload Test -->
79
- <div class="card p-4 mb-4">
80
- <h4 class="mb-3">Step 2️⃣: Upload New Test Data (.xlsx)</h4>
81
- <form method="POST" enctype="multipart/form-data">
82
- <input class="form-control mb-3" type="file" name="test_file" accept=".xlsx" required>
83
- <button type="submit" class="btn btn-primary w-100">Upload Test Data</button>
84
- </form>
85
- </div>
86
-
87
- <!-- Reset Golden -->
88
- <div class="card p-3 bg-light">
89
- <form action="/reset_golden">
90
- <button type="submit" class="btn btn-danger w-100">Reset Golden Data</button>
91
- </form>
92
- </div>
93
- {% endif %}
94
- </div>
95
  </body>
96
  </html>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>IPM Golden vs Test Data Visualizer</title>
7
+ <style>
8
+ body {
9
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
10
+ background: linear-gradient(135deg, #e3f2fd, #ffffff);
11
+ display: flex;
12
+ flex-direction: column;
13
+ align-items: center;
14
+ justify-content: center;
15
+ height: 100vh;
16
+ margin: 0;
17
+ color: #333;
18
+ }
19
+
20
+ h1 {
21
+ color: #1e88e5;
22
+ font-size: 28px;
23
+ margin-bottom: 30px;
24
+ }
25
+
26
+ .card {
27
+ background: white;
28
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
29
+ border-radius: 12px;
30
+ padding: 30px 40px;
31
+ width: 400px;
32
+ text-align: center;
33
+ transition: all 0.3s ease;
34
+ }
35
+
36
+ .card:hover {
37
+ transform: translateY(-3px);
38
+ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
39
+ }
40
+
41
+ input[type="file"] {
42
+ margin: 15px 0;
43
+ padding: 10px;
44
+ border: 2px dashed #1e88e5;
45
+ border-radius: 8px;
46
+ background: #f9fbfc;
47
+ cursor: pointer;
48
+ width: 100%;
49
+ }
50
+
51
+ button {
52
+ background-color: #1e88e5;
53
+ color: white;
54
+ border: none;
55
+ border-radius: 8px;
56
+ padding: 12px 20px;
57
+ margin-top: 10px;
58
+ font-size: 15px;
59
+ cursor: pointer;
60
+ width: 100%;
61
+ transition: background-color 0.3s ease;
62
+ }
63
+
64
+ button:hover {
65
+ background-color: #1565c0;
66
+ }
67
+
68
+ .reset-btn {
69
+ background-color: #e53935;
70
+ margin-top: 20px;
71
+ }
72
+
73
+ .reset-btn:hover {
74
+ background-color: #c62828;
75
+ }
76
+
77
+ .message {
78
+ color: #2e7d32;
79
+ margin-bottom: 15px;
80
+ font-weight: 500;
81
+ }
82
+
83
+ .error {
84
+ color: #c62828;
85
+ margin-bottom: 15px;
86
+ font-weight: 500;
87
+ }
88
+
89
+ footer {
90
+ position: absolute;
91
+ bottom: 10px;
92
+ font-size: 13px;
93
+ color: #777;
94
+ }
95
+
96
+ @media (max-width: 480px) {
97
+ .card {
98
+ width: 85%;
99
+ padding: 25px;
100
+ }
101
+ }
102
+ </style>
103
  </head>
104
  <body>
105
+
106
+ <h1>📊 IPM Golden vs Test Data Visualizer</h1>
107
+
108
+ {% if error %}
109
+ <div class="error">{{ error }}</div>
110
+ {% endif %}
111
+ {% if message %}
112
+ <div class="message">{{ message }}</div>
113
+ {% endif %}
114
+
115
+ {% if not golden_loaded %}
116
+ <div class="card">
117
+ <h3>Step 1: Upload Golden Data (.xlsx)</h3>
118
+ <form method="POST" enctype="multipart/form-data">
119
+ <input type="file" name="golden_file" accept=".xlsx" required>
120
+ <button type="submit">Upload Golden Data</button>
121
+ </form>
122
+ </div>
123
+ {% else %}
124
+ <div class="card">
125
+ <h3>Step 2: Upload New Test Data (.xlsx)</h3>
126
+ <form method="POST" enctype="multipart/form-data">
127
+ <input type="file" name="test_file" accept=".xlsx" required>
128
+ <button type="submit">Upload Test Data</button>
129
+ </form>
130
+ </div>
131
+
132
+ <div class="card" style="width: 250px; margin-top: 20px;">
133
+ <form action="/reset_golden">
134
+ <button class="reset-btn" type="submit">Reset Golden Data</button>
135
+ </form>
136
+ </div>
137
+ {% endif %}
138
+
139
+ <footer>© 2025 IPM Data Visualizer</footer>
140
+
 
141
  </body>
142
  </html>