Hugging Face's logo

Spaces:
simran19
/
COINSIGHT-AI
Paused

App Files Community
simran19 commited on
Commit
13772a3
·
verified ·
1 Parent(s): cf0b878

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +163 -59
templates/index.html CHANGED
@@ -1,73 +1,177 @@
1
  <!DOCTYPE html>
2
- <html>
3
- <head>
 
4
  <title>COINSIGHT AI</title>
5
- <link rel='stylesheet' href="{{ url_for('static', filename='index.css') }}">
6
- <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
7
  </head>
8
 
9
- <body>
10
- <a href='/'>HOME</a>
11
- <!-- Background Video -->
 
12
  <div class="video-container">
13
  <video
14
  id="backgroundVideo"
15
  autoplay
16
  muted
17
  loop
18
- playsinline
19
  preload="metadata"
20
- aria-label="Background animation"
21
-
22
- >
23
  </video>
24
  </div>
25
-
26
- <!-- Video overlay for better text readability -->
27
  <div class="video-overlay"></div>
28
-
29
- <div class='page-container' style='flex:1;'>
30
- <h1 style="color:grey; font-weight: bold;text-shadow: 2px 2px 0 #000, 2px 2px 0 #555;">Forecast Your Crypto Future</h1>
31
-
32
- <div class='form-group'>
33
- <form action='/predict' method='post'>
34
-
35
- <label style='font-size:26px;color:navy;text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);'>Opening Price:</label>
36
- <input type='text' name='open' placeholder='Enter opening price' style='margin-bottom:15px;padding:8px;'><br>
37
-
38
- <label style='font-size:26px;color:navy;text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);'>Highest Price:</label>
39
- <input type='text' name='high' placeholder='Enter highest price' style='margin-bottom:15px;padding:8px;'><br>
40
-
41
- <label style='font-size:26px;color:navy;text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);'>Lowest Price:</label>
42
- <input type='text' name='low' placeholder='Enter lowest price' style='margin-bottom:15px;padding:8px;'><br>
43
-
44
- <label style='font-size:26px;color:navy;text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);'>Closing Price:</label>
45
- <input type='text' name='close' placeholder='Enter closing price' style='margin-bottom:15px;padding:8px;'><br>
46
-
47
- <label style='font-size:26px; color:navy ;text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);'>Volume:</label>
48
- <input type='text' name='volume' placeholder='Enter volume' style='margin-bottom:15px;padding:8px;'><br>
49
- </div>
50
-
51
- <div class="button-group">
52
- <button type="submit" class="btn btn-primary" id="submitBtn">
53
- <span>🔍</span> Predict
54
- </button><br><br>
55
- <button type="button" class="btn btn-secondary" >
56
- <span>🔄</span> Reset Form
57
- </button>
58
- <div class="footer">
59
- <p><i class="fas fa-heart" style="color: #ef4444;"></i> Made with love by Gursimranjot Kaur</p>
60
- </div>
61
- </div>
62
- </div>
63
- </form>
64
-
65
-
66
- {% if result%}
67
- <h2 style="color:rebeccapurple; font-weight: bold;text-shadow: 1px 1px 0 #000, 2px 2px 0 #555;">Nearest Predicted closing price for tomorrow : {{result}} </h2>
68
- {% endif%}
69
-
70
- </div>
71
-
72
- </body>
73
- </html>
 
 
1
  <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
  <title>COINSIGHT AI</title>
6
+ <!-- <link rel="stylesheet" href="{{ url_for('static', filename='index.css') }}"> -->
7
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
8
+
9
+ <style>
10
+ body, html {
11
+ margin: 0;
12
+ padding: 0;
13
+ height: 100%;
14
+ font-family: Arial, sans-serif;
15
+ text-align: center;
16
+ }
17
+
18
+ .page-container {
19
+ position: relative;
20
+ z-index: 2;
21
+ display: flex;
22
+ flex-direction: column;
23
+ align-items: center;
24
+ justify-content: center;
25
+ min-height: 100vh;
26
+ padding: 20px;
27
+ }
28
+
29
+ .form-group {
30
+ margin: 20px 0;
31
+ }
32
+
33
+ input {
34
+ width: 300px;
35
+ padding: 10px;
36
+ margin-bottom: 15px;
37
+ border-radius: 5px;
38
+ border: 1px solid #ccc;
39
+ }
40
+
41
+ .button-group {
42
+ margin-top: 20px;
43
+ }
44
+
45
+ .btn {
46
+ padding: 10px 20px;
47
+ border: none;
48
+ border-radius: 5px;
49
+ font-size: 18px;
50
+ cursor: pointer;
51
+ margin: 5px;
52
+ }
53
+
54
+ .btn-primary {
55
+ background-color: navy;
56
+ color: white;
57
+ }
58
+
59
+ .btn-secondary {
60
+ background-color: gray;
61
+ color: white;
62
+ }
63
+
64
+ .video-container {
65
+ position: fixed;
66
+ top: 0; left: 0;
67
+ width: 100%;
68
+ height: 100%;
69
+ z-index: -2;
70
+ overflow: hidden;
71
+ }
72
+
73
+ video {
74
+ width: 100%;
75
+ height: 100%;
76
+ object-fit: cover;
77
+ }
78
+
79
+ .video-overlay {
80
+ position: fixed;
81
+ top: 0; left: 0;
82
+ width: 100%;
83
+ height: 100%;
84
+ background: rgba(0, 0, 0, 0.4);
85
+ z-index: -1;
86
+ }
87
+
88
+ .footer {
89
+ margin-top: 40px;
90
+ font-size: 16px;
91
+ color: white;
92
+ }
93
+
94
+ h1, h2 {
95
+ text-align: center;
96
+ }
97
+
98
+ a {
99
+ position: absolute;
100
+ top: 10px;
101
+ left: 20px;
102
+ color: white;
103
+ text-decoration: none;
104
+ font-weight: bold;
105
+ background: rgba(0, 0, 0, 0.4);
106
+ padding: 8px 12px;
107
+ border-radius: 6px;
108
+ }
109
+ </style>
110
  </head>
111
 
112
+ <body>
113
+ <a href="/">HOME</a>
114
+
115
+ <!-- Background Video -->
116
  <div class="video-container">
117
  <video
118
  id="backgroundVideo"
119
  autoplay
120
  muted
121
  loop
122
+ playsinline
123
  preload="metadata"
124
+ aria-label="Background animation">
125
+ <source src="{{ url_for('static', filename='background.mp4') }}" type="video/mp4">
126
+ Your browser does not support the video tag.
127
  </video>
128
  </div>
129
+
 
130
  <div class="video-overlay"></div>
131
+
132
+ <!-- Page Content -->
133
+ <div class="page-container">
134
+ <h1 style="color:grey; font-weight: bold;text-shadow: 2px 2px 0 #000, 2px 2px 0 #555;">
135
+ Forecast Your Crypto Future
136
+ </h1>
137
+
138
+ <form action="/predict" method="post" id="predictionForm">
139
+ <div class="form-group">
140
+ <label style="font-size:26px;color:navy;text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);">Opening Price:</label><br>
141
+ <input type="text" name="open" placeholder="Enter opening price"><br>
142
+
143
+ <label style="font-size:26px;color:navy;">Highest Price:</label><br>
144
+ <input type="text" name="high" placeholder="Enter highest price"><br>
145
+
146
+ <label style="font-size:26px;color:navy;">Lowest Price:</label><br>
147
+ <input type="text" name="low" placeholder="Enter lowest price"><br>
148
+
149
+ <label style="font-size:26px;color:navy;">Closing Price:</label><br>
150
+ <input type="text" name="close" placeholder="Enter closing price"><br>
151
+
152
+ <label style="font-size:26px;color:navy;">Volume:</label><br>
153
+ <input type="text" name="volume" placeholder="Enter volume"><br>
154
+ </div>
155
+
156
+ <div class="button-group">
157
+ <button type="submit" class="btn btn-primary">
158
+ <span>🔍</span> Predict
159
+ </button>
160
+ <button type="button" class="btn btn-secondary" onclick="document.getElementById('predictionForm').reset();">
161
+ <span>🔄</span> Reset Form
162
+ </button>
163
+ </div>
164
+
165
+ {% if result %}
166
+ <h2 style="color:rebeccapurple; font-weight: bold; text-shadow: 1px 1px 0 #000, 2px 2px 0 #555;">
167
+ Nearest Predicted Closing Price for Tomorrow: {{ result }}
168
+ </h2>
169
+ {% endif %}
170
+ </form>
171
+
172
+ <div class="footer">
173
+ <p><i class="fas fa-heart" style="color: #ef4444;"></i> Made with love by Gursimranjot Kaur</p>
174
+ </div>
175
+ </div>
176
+ </body>
177
+ </html>