Hugging Face's logo

Spaces:
WebashalarForML
/
DIAM_DEMO_APP
Sleeping

App Files Community
vatsal-p-wa commited on
Commit
0b4e633
·
verified ·
1 Parent(s): 215b074

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +190 -70
templates/index.html CHANGED
@@ -1,70 +1,190 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Diamond Price Prediction</title>
6
- <style>
7
- body {
8
- background-color: #041C32;
9
- color: #ECB365;
10
- font-family: Arial, sans-serif;
11
- margin: 0;
12
- padding: 20px;
13
- }
14
- .container {
15
- max-width: 800px;
16
- margin: auto;
17
- background-color: #04293A;
18
- padding: 20px;
19
- border-radius: 8px;
20
- }
21
- h1 {
22
- color: #ECB365;
23
- text-align: center;
24
- }
25
- label {
26
- display: block;
27
- margin-top: 10px;
28
- color: #ECB365;
29
- }
30
- input, select {
31
- width: 100%;
32
- padding: 8px;
33
- margin-top: 5px;
34
- border: 1px solid #064663;
35
- border-radius: 4px;
36
- background-color: #064663;
37
- color: #ECB365;
38
- box-sizing: border-box;
39
- }
40
- .btn {
41
- margin-top: 20px;
42
- padding: 10px 15px;
43
- background-color: #ECB365;
44
- color: #041C32;
45
- border: none;
46
- border-radius: 4px;
47
- cursor: pointer;
48
- font-weight: bold;
49
- }
50
- .upload-section {
51
- margin-top: 20px;
52
- padding: 15px;
53
- border: 2px dashed #ECB365;
54
- text-align: center;
55
- }
56
- </style>
57
- </head>
58
- <body>
59
- <div class="container">
60
- <h1>Diamond Price Prediction</h1>
61
- <div class="upload-section">
62
- <h3>Upload CSV or Excel for Bulk Prediction</h3>
63
- <form action="{{ url_for('predict') }}" method="post" enctype="multipart/form-data">
64
- <input type="file" name="file" accept=".csv, .xlsx" required>
65
- <button type="submit" class="btn">Upload & Predict</button>
66
- </form>
67
- </div>
68
- </div>
69
- </body>
70
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!-- <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Diamond Price Prediction</title>
6
+ <style>
7
+ body {
8
+ background-color: #041C32;
9
+ color: #ECB365;
10
+ font-family: Arial, sans-serif;
11
+ margin: 0;
12
+ padding: 20px;
13
+ }
14
+ .container {
15
+ max-width: 800px;
16
+ margin: auto;
17
+ background-color: #04293A;
18
+ padding: 20px;
19
+ border-radius: 8px;
20
+ }
21
+ h1 {
22
+ color: #ECB365;
23
+ text-align: center;
24
+ }
25
+ label {
26
+ display: block;
27
+ margin-top: 10px;
28
+ color: #ECB365;
29
+ }
30
+ input, select {
31
+ width: 100%;
32
+ padding: 8px;
33
+ margin-top: 5px;
34
+ border: 1px solid #064663;
35
+ border-radius: 4px;
36
+ background-color: #064663;
37
+ color: #ECB365;
38
+ box-sizing: border-box;
39
+ }
40
+ .btn {
41
+ margin-top: 20px;
42
+ padding: 10px 15px;
43
+ background-color: #ECB365;
44
+ color: #041C32;
45
+ border: none;
46
+ border-radius: 4px;
47
+ cursor: pointer;
48
+ font-weight: bold;
49
+ }
50
+ .upload-section {
51
+ margin-top: 20px;
52
+ padding: 15px;
53
+ border: 2px dashed #ECB365;
54
+ text-align: center;
55
+ }
56
+ </style>
57
+ </head>
58
+ <body>
59
+ <div class="container">
60
+ <h1>Diamond Price Prediction</h1>
61
+ <div class="upload-section">
62
+ <h3>Upload CSV or Excel for Bulk Prediction</h3>
63
+ <form action="{{ url_for('predict') }}" method="post" enctype="multipart/form-data">
64
+ <input type="file" name="file" accept=".csv, .xlsx" required>
65
+ <button type="submit" class="btn">Upload & Predict</button>
66
+ </form>
67
+ </div>
68
+ </div>
69
+ </body>
70
+ </html>
71
+ -->
72
+
73
+
74
+ <!DOCTYPE html>
75
+ <html lang="en">
76
+ <head>
77
+ <meta charset="UTF-8">
78
+ <title>Diamond Price Prediction</title>
79
+ <style>
80
+ body {
81
+ background-color: #041C32;
82
+ color: #ECB365;
83
+ font-family: Arial, sans-serif;
84
+ margin: 0;
85
+ padding: 20px;
86
+ }
87
+
88
+ .container {
89
+ max-width: 800px;
90
+ margin: auto;
91
+ background-color: #04293A;
92
+ padding: 20px;
93
+ border-radius: 8px;
94
+ }
95
+
96
+ h1 {
97
+ color: #ECB365;
98
+ text-align: center;
99
+ }
100
+
101
+ label {
102
+ display: block;
103
+ margin-top: 10px;
104
+ color: #ECB365;
105
+ }
106
+
107
+ input, select {
108
+ width: 100%;
109
+ padding: 8px;
110
+ margin-top: 5px;
111
+ border: 1px solid #064663;
112
+ border-radius: 4px;
113
+ background-color: #064663;
114
+ color: #ECB365;
115
+ box-sizing: border-box;
116
+ }
117
+
118
+ .btn {
119
+ margin-top: 20px;
120
+ padding: 10px 15px;
121
+ background-color: #ECB365;
122
+ color: #041C32;
123
+ border: none;
124
+ border-radius: 4px;
125
+ cursor: pointer;
126
+ font-weight: bold;
127
+ }
128
+
129
+ .upload-section {
130
+ margin-top: 20px;
131
+ padding: 15px;
132
+ border: 2px dashed #ECB365;
133
+ text-align: center;
134
+ }
135
+
136
+ /* Loader styles */
137
+ .loader-overlay {
138
+ position: fixed;
139
+ top: 0;
140
+ left: 0;
141
+ height: 100%;
142
+ width: 100%;
143
+ background-color: rgba(0, 0, 0, 0.6);
144
+ display: none;
145
+ justify-content: center;
146
+ align-items: center;
147
+ z-index: 9999;
148
+ }
149
+
150
+ .loader {
151
+ border: 8px solid #f3f3f3;
152
+ border-top: 8px solid #ECB365;
153
+ border-radius: 50%;
154
+ width: 60px;
155
+ height: 60px;
156
+ animation: spin 1s linear infinite;
157
+ }
158
+
159
+ @keyframes spin {
160
+ 0% { transform: rotate(0deg); }
161
+ 100% { transform: rotate(360deg); }
162
+ }
163
+ </style>
164
+ </head>
165
+ <body>
166
+ <div class="loader-overlay" id="loader">
167
+ <div class="loader"></div>
168
+ </div>
169
+
170
+ <div class="container">
171
+ <h1>Diamond Price Prediction</h1>
172
+ <div class="upload-section">
173
+ <h3>Upload CSV or Excel for Bulk Prediction</h3>
174
+ <form id="uploadForm" action="{{ url_for('predict') }}" method="post" enctype="multipart/form-data">
175
+ <input type="file" name="file" accept=".csv, .xlsx" required>
176
+ <button type="submit" class="btn">Upload & Predict</button>
177
+ </form>
178
+ </div>
179
+ </div>
180
+
181
+ <script>
182
+ const form = document.getElementById('uploadForm');
183
+ const loader = document.getElementById('loader');
184
+
185
+ form.addEventListener('submit', function () {
186
+ loader.style.display = 'flex';
187
+ });
188
+ </script>
189
+ </body>
190
+ </html>