Hugging Face's logo

Spaces:
WebashalarForML
/
DiamRapo
Sleeping

App Files Community
WebashalarForML commited on
Commit
2336542
·
verified ·
1 Parent(s): 43c7e13

Update templates/output.html

Browse files
Files changed (1) hide show
  1. templates/output.html +116 -97
templates/output.html CHANGED
@@ -1,97 +1,116 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Prediction Result</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: 900px;
16
- margin: auto;
17
- background-color: #04293A;
18
- padding: 20px;
19
- border-radius: 8px;
20
- text-align: center;
21
- }
22
- h1 {
23
- color: #ECB365;
24
- }
25
- .result-box {
26
- padding: 20px;
27
- margin-top: 15px;
28
- border: 2px solid #ECB365;
29
- background-color: #064663;
30
- font-size: 1em;
31
- font-weight: normal;
32
- border-radius: 5px;
33
- }
34
- .btn {
35
- margin-top: 20px;
36
- padding: 10px 15px;
37
- background-color: #ECB365;
38
- color: #041C32;
39
- border: none;
40
- border-radius: 4px;
41
- cursor: pointer;
42
- font-weight: bold;
43
- display: inline-block;
44
- text-decoration: none;
45
- }
46
- /* Styles for the table container */
47
- .table-wrapper {
48
- overflow-x: auto;
49
- margin: auto;
50
- max-width: 100%;
51
- padding: 10px;
52
- background-color: #04293A;
53
- border-radius: 4px;
54
- }
55
- table {
56
- width: 100%;
57
- border-collapse: collapse;
58
- color: #ECB365;
59
- }
60
- th, td {
61
- border: 1px solid #ECB365;
62
- padding: 8px;
63
- text-align: center;
64
- }
65
- th {
66
- background-color: #064663;
67
- font-weight: bold;
68
- }
69
- </style>
70
- </head>
71
- <body>
72
- <!--Prediction Report-->
73
- <div class="container">
74
- <h1>Predicted Diamond Price</h1>
75
- <div class="result-box">
76
- <p>The Prediction on diamond:</p>
77
- <div class="table-wrapper">
78
- {{ df|safe }}
79
- </div>
80
- </div>
81
- <a href="{{ url_for('download_pred') }}" class="btn">Download CSV</a>
82
- <a href="/" class="btn">Go Back</a>
83
- </div>
84
- <!--Analysis Report-->
85
- <div class="container">
86
- <h1>Analysis Diamond Parameter changes</h1>
87
- <div class="result-box">
88
- <p>The analysis on diamond:</p>
89
- <div class="table-wrapper">
90
- {{ dx|safe }}
91
- </div>
92
- </div>
93
- <a href="{{ url_for('download_class') }}" class="btn">Download CSV</a>
94
- <a href="/" class="btn">Go Back</a>
95
- </div>
96
- </body>
97
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Prediction Result</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
+
15
+ .container {
16
+ max-width: 1000px;
17
+ margin: 30px auto;
18
+ background-color: #04293A;
19
+ padding: 25px;
20
+ border-radius: 10px;
21
+ text-align: center;
22
+ box-shadow: 0px 0px 15px rgba(236, 179, 101, 0.3);
23
+ }
24
+
25
+ h1 {
26
+ color: #ECB365;
27
+ margin-bottom: 15px;
28
+ }
29
+
30
+ .result-box {
31
+ padding: 20px;
32
+ margin-top: 20px;
33
+ border: 2px solid #ECB365;
34
+ background-color: #064663;
35
+ font-size: 1.1em;
36
+ font-weight: normal;
37
+ border-radius: 8px;
38
+ box-shadow: 0px 0px 10px rgba(236, 179, 101, 0.2);
39
+ }
40
+
41
+ .btn {
42
+ margin-top: 20px;
43
+ padding: 12px 18px;
44
+ background-color: #ECB365;
45
+ color: #041C32;
46
+ border: none;
47
+ border-radius: 6px;
48
+ cursor: pointer;
49
+ font-weight: bold;
50
+ text-decoration: none;
51
+ display: inline-block;
52
+ transition: 0.3s;
53
+ }
54
+
55
+ .btn:hover {
56
+ background-color: #d69f50;
57
+ }
58
+
59
+ .table-wrapper {
60
+ overflow-x: auto;
61
+ margin: auto;
62
+ max-width: 100%;
63
+ padding: 15px;
64
+ background-color: #04293A;
65
+ border-radius: 6px;
66
+ box-shadow: 0px 0px 10px rgba(236, 179, 101, 0.15);
67
+ }
68
+
69
+ table {
70
+ width: 100%;
71
+ border-collapse: collapse;
72
+ color: #ECB365;
73
+ }
74
+
75
+ th, td {
76
+ border: 1px solid #ECB365;
77
+ padding: 10px;
78
+ text-align: center;
79
+ }
80
+
81
+ th {
82
+ background-color: #064663;
83
+ font-weight: bold;
84
+ }
85
+ </style>
86
+ </head>
87
+ <body>
88
+
89
+ <!--Prediction Report-->
90
+ <div class="container">
91
+ <h1>Predicted Diamond Price</h1>
92
+ <div class="result-box">
93
+ <p>The Prediction on diamond:</p>
94
+ <div class="table-wrapper">
95
+ {{ df|safe }}
96
+ </div>
97
+ </div>
98
+ <a href="{{ url_for('download_pred') }}" class="btn">Download CSV</a>
99
+ <a href="/" class="btn">Go Back</a>
100
+ </div>
101
+
102
+ <!--Analysis Report-->
103
+ <div class="container">
104
+ <h1>Analysis of Diamond Parameter Changes</h1>
105
+ <div class="result-box">
106
+ <p>The analysis on diamond:</p>
107
+ <div class="table-wrapper">
108
+ {{ dx|safe }}
109
+ </div>
110
+ </div>
111
+ <a href="{{ url_for('download_class') }}" class="btn">Download CSV</a>
112
+ <a href="/" class="btn">Go Back</a>
113
+ </div>
114
+
115
+ </body>
116
+ </html>