Hugging Face's logo

Spaces:
Faizan15
/
movies_Analysis
Runtime error

App Files Community
Faizan15 commited on
Commit
322c296
·
1 Parent(s): 4bb81e1

Create review .html

Browse files
Files changed (1) hide show
  1. review .html +311 -0
review .html ADDED
@@ -0,0 +1,311 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <link rel="icon" href="/data/favicon.ico" type="image/vnd.microsoft.icon">
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
+ <title>Sentiment Analyzer</title>
9
+ <style>
10
+ @font-face {
11
+ font-family: 'HPSimplified';
12
+ src: url('/data/HPSimplified.ttf') format('truetype');
13
+ font-weight: normal;
14
+ font-style: normal;
15
+ }
16
+ ::-webkit-scrollbar {
17
+ width: 0.6vw;
18
+ }
19
+ ::-webkit-scrollbar-track {
20
+ background: #0000;
21
+ }
22
+ ::-webkit-scrollbar-thumb {
23
+ background: #eee;
24
+ border-radius: 0.5vw;
25
+ }
26
+ ::-webkit-scrollbar-thumb:hover {
27
+ background: #999;
28
+ }
29
+ body {
30
+ font-family: Arial, sans-serif;
31
+ background-size: cover;
32
+ background-attachment: fixed;
33
+ background-color: #000;
34
+ margin: 0;
35
+ padding: 0;
36
+ overflow: hidden;
37
+ font-family: 'HPSimplified';
38
+ color: white;
39
+ }
40
+ .bg {
41
+ position: fixed;
42
+ bottom: 0;
43
+ left: 50%;
44
+ transform: translate(-50%);
45
+ height: 100vh;
46
+ width: 100vw;
47
+ z-index: -1;
48
+ opacity: 0.2;
49
+ object-fit: cover;
50
+ }
51
+ a {
52
+ text-decoration: none;
53
+ color: white;
54
+ }
55
+ .header {
56
+ background-color: #111b;
57
+ border-bottom: white solid 0.4vh;
58
+ height: 10vh;
59
+ padding: 2vh;
60
+ text-align: left;
61
+ display: flex;
62
+ font-size: 6vh;
63
+ font-weight: bold;
64
+ }
65
+ .header > span {
66
+ margin: auto 0;
67
+ }
68
+ .header > span:hover {
69
+ text-decoration: underline;
70
+ }
71
+ #search-form {
72
+ display: block;
73
+ right: 0;
74
+ position: absolute;
75
+ margin: auto 1vw;
76
+ }
77
+ #search-form > input {
78
+ width: 30vw;
79
+ border: initial;
80
+ background-color: #000;
81
+ color:white;
82
+ height: 6vh;
83
+ font-size: 2vh;
84
+ border-radius: 0.5vw;
85
+ margin-right: 1vh;
86
+ padding-left: 2vh;
87
+ }
88
+ #search-form > button {
89
+ height: 6vh;
90
+ font-size: 2vh;
91
+ width: 11vh;
92
+ border: initial;
93
+ border-radius: 0.5vw;
94
+ background-color: #000;
95
+ color: white;
96
+ }
97
+
98
+ #search-form > input:hover {
99
+ background-color: #111;
100
+ }
101
+
102
+ #search-form > button:hover {
103
+ background-color: #111;
104
+ cursor: pointer;
105
+ }
106
+ input, button {
107
+ font-family: 'HPSimplified';
108
+ }
109
+ main {
110
+ padding: 1%;
111
+ }
112
+ #main {
113
+ display: block;
114
+ }
115
+ a {
116
+ text-decoration: none;
117
+ color: white;
118
+ }
119
+ #info {
120
+ width: 99%;
121
+ background-color: #000a;
122
+ border-radius: 0.5vw;
123
+ height: 15vh;
124
+ padding: 0.5%;
125
+ display: flex;
126
+ align-items: flex-end;
127
+ justify-content: space-between;
128
+ }
129
+ #info:hover{
130
+ background-color: #000d;
131
+ }
132
+ #info > img {
133
+ max-height: 98%;
134
+ border-radius: 0.5vw;
135
+ }
136
+ .info-text{
137
+ margin: auto;
138
+ margin-left: 2vw;
139
+ white-space: nowrap;
140
+ }
141
+ h2 {
142
+ margin: 0;
143
+ }
144
+ .logo {
145
+ display: flex;
146
+ height: 5vh;
147
+ position: absolute;
148
+ right: 0;
149
+ margin-right: 2vw;
150
+ }
151
+ h2, h1 {
152
+ white-space: nowrap;
153
+ text-align: center;
154
+ }
155
+ .logo > span{
156
+ vertical-align: bottom;
157
+ line-height: 8vh;
158
+ white-space: nowrap;
159
+ }
160
+ #reviews {
161
+ width: 100%;
162
+ height: 62vh;
163
+ overflow-y: scroll;
164
+ overflow-x: hidden;
165
+ background-color: #333a;
166
+ border-radius: 0.5vw;
167
+ margin-top: 3vh;
168
+ }
169
+ .charts {
170
+ display: flex;
171
+ }
172
+ .pie {
173
+ width: 40%;
174
+ margin: 1%;
175
+ }
176
+ .bar {
177
+ width:60%;
178
+ margin: 1%;
179
+ }
180
+ .pie img, .bar img{
181
+ max-width: 100%;
182
+ max-height: 100%;
183
+ display: block;
184
+ margin: auto;
185
+ border-radius: 0.5vw;
186
+ }
187
+ #user, #critic{
188
+ display: block;
189
+ margin: auto;
190
+ }
191
+ @media screen and (orientation: portrait) {
192
+ .header {
193
+ font-size: 10vw;
194
+ text-align: center;
195
+ display: block;
196
+ height: 25vw;
197
+ }
198
+ #search-form {
199
+ position: relative;
200
+ margin: auto;
201
+ }
202
+ #search-form > input {
203
+ width: 40vw;
204
+ height: 8vw;
205
+ font-size: 2.67vw;
206
+ }
207
+ #search-form > button {
208
+ height: 8vw;
209
+ width: 16vw;
210
+ font-size: 2.67vw;
211
+ }
212
+ main {
213
+ font-size: 3vw;
214
+ }
215
+ #info {
216
+ height: 18vw;
217
+ }
218
+ #info > img {
219
+ border-radius: 0.5vw;
220
+ max-height: 17.8vw;
221
+ }
222
+ .logo {
223
+ height: 2.5vw;
224
+ position: absolute;
225
+ }
226
+ .logo > span {
227
+ display: none;
228
+ }
229
+ #reviews {
230
+ height: calc(92vh - 25vw - 18vw - 3vh);
231
+ border-radius: 2vw;
232
+ }
233
+ .charts {
234
+ display: block;
235
+ }
236
+ .pie, .bar {
237
+ left: 50%;
238
+ transform: translate(-50%, 0);
239
+ position: relative;
240
+ width: 92%;
241
+ }
242
+ }
243
+ </style>
244
+ </head>
245
+ <body>
246
+ <img src="../data/bg.png" class="bg">
247
+ <div class="header">
248
+ <span><a href="/">Sentiment Analyzer</a></span>
249
+ <form id="search-form">
250
+ <input type="text" id="search-input" name="search-input" required placeholder="Search for a Movie">
251
+ <button type="submit">Search</button>
252
+ </form>
253
+ </div>
254
+ <main>
255
+ <div id="main">
256
+ <a href="{{url | safe}}" target="_blank">
257
+ <div id="info">
258
+ <img src="{{poster | safe}}" alt="Movie Poster">
259
+ <div class="info-text">
260
+ <h2>{{title | safe}}</h2>
261
+ </div>
262
+ <div class="logo">
263
+ <span>Click to view the reviews on</span> <img src="https://images.fandango.com/cms/assets/2d5a3340-be84-11ed-9d20-83ee649e98bd--rt25-logo-mainnav-161x50.svg" alt="Rotten tomatoes logo">
264
+ </div>
265
+ </div>
266
+ </a>
267
+ <div id="reviews">
268
+ <div id="user">
269
+ <h1>Users</h1>
270
+ <div class="charts">
271
+ <div class="pie">
272
+ {{user_pie | safe}}
273
+ </div>
274
+ <div class="bar">
275
+ {{user_bar | safe}}
276
+ </div>
277
+ </div>
278
+ </div>
279
+ <hr>
280
+ <div id="critic">
281
+ <h1>Critics</h1>
282
+ <div class="charts">
283
+ <div class="pie">
284
+ {{critic_pie | safe}}
285
+ </div>
286
+ <div class="bar">
287
+ {{critic_bar | safe}}
288
+ </div>
289
+ </div>
290
+ </div>
291
+ </div>
292
+ </div>
293
+ </main>
294
+
295
+ <script>
296
+ document.getElementById('search-form').addEventListener('submit', function (event) {
297
+ event.preventDefault();
298
+ var inputValue = document.getElementById('search-input').value;
299
+ var redirectURL = '/search?query=' + encodeURIComponent(inputValue);
300
+ window.location.href = redirectURL;
301
+ });
302
+ window.onload = function (){
303
+ element = document.getElementById('reviews')
304
+ element.scrollTo({ top: element.scrollHeight, behavior: 'smooth' });
305
+ setTimeout(function () {
306
+ element.scrollTo({ top: 0, behavior: 'smooth' });
307
+ }, 650);
308
+ }
309
+ </script>
310
+ </body>
311
+ </html>