Hugging Face's logo

Spaces:
arithescientist
/
CauseofAccident
Sleeping

App Files Community
1
arithescientist commited on
Commit
58c447a
·
verified ·
1 Parent(s): 4f0480f

Upload carcrash.html

Browse files
Files changed (1) hide show
  1. templates/carcrash.html +271 -0
templates/carcrash.html ADDED
@@ -0,0 +1,271 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no">
7
+ <title>Accident Classifier</title>
8
+ <link rel="icon" type="image/x-icon" href="assets/img/favicon.ico"/>
9
+
10
+
11
+ <!-- BEGIN GLOBAL MANDATORY STYLES -->
12
+
13
+
14
+ <style>
15
+ html {
16
+ font-size: 14px;
17
+ }
18
+
19
+ .container {
20
+ max-width: 500px;
21
+ }
22
+
23
+ .pricing-header {
24
+ max-width: 700px;
25
+ }
26
+
27
+ .card-deck .card {
28
+ min-width: 150px;
29
+ }
30
+
31
+ .bd-placeholder-img {
32
+ font-size: 1.125rem;
33
+ text-anchor: middle;
34
+ -webkit-user-select: none;
35
+ -moz-user-select: none;
36
+ -ms-user-select: none;
37
+ user-select: none;
38
+ }
39
+
40
+ @media (min-width: 768px) {
41
+ html {
42
+ font-size: 16px;
43
+ }
44
+
45
+ .bd-placeholder-img-lg {
46
+ font-size: 3.5rem;
47
+ }
48
+ }
49
+ </style>
50
+ <style type="text/css">
51
+ *{margin:0;padding:0;box-sizing:border-box}body,html{height:100%;font-family:Poppins-Regular,sans-serif}a{font-family:Poppins-Regular;font-size:14px;line-height:1.7;color:#665;margin:0;transition:all .4s;-webkit-transition:all .4s;-o-transition:all .4s;-moz-transition:all .4s}a:focus{outline:0!important}a:hover{text-decoration:none}h1,h2,h3,h4,h5,h6{margin:0}input{outline:0;border:none}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}input:focus:-ms-input-placeholder{color:transparent}input::-webkit-input-placeholder{color:#adadad}input:-moz-placeholder{color:#adadad}input::-moz-placeholder{color:#adadad}input:-ms-input-placeholder{color:#adadad}button{outline:0!important;border:none;background:0 0}button:hover{cursor:pointer}.container{max-width:1200px}.container-contact100{width:100%;min-height:100vh;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;padding:15px;background:#19012e;background:-webkit-linear-gradient(45deg,#19012e,#19012e);background:-o-linear-gradient(45deg,#19012e,#19012e);background:-moz-linear-gradient(45deg,#19012e,#19012e);background:linear-gradient(45deg,#19012e,#19012e)}.wrap-contact100{width:500px;background:#fff;border-radius:10px;overflow:hidden;padding:42px 55px 45px 55px}.contact100-form{width:100%}.contact100-form-title{display:block;font-family:Poppins-Bold;font-size:39px;color:#333;line-height:1.2;text-align:center;padding-bottom:10px}.wrap-input100{width:100%;position:relative;border-bottom:2px solid #d9d9d9;padding-bottom:10px;margin-bottom:15px}.input100{display:block;width:100%;background:0 0;font-family:Poppins-Medium;font-size:18px;color:#333;line-height:1.2;padding:0 5px}.focus-input100{position:absolute;display:block;width:100%;height:100%;top:0;left:0;pointer-events:none}.focus-input100::before{content:"";display:block;position:absolute;bottom:-2px;left:0;width:0;height:2px;-webkit-transition:all .4s;-o-transition:all .4s;-moz-transition:all .4s;transition:all .4s;background:#7f7f7f}input.input100{height:40px}.input100:focus+.focus-input100::before{width:100%}.has-val.input100+.focus-input100::before{width:100%}.container-contact100-form-btn{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:wrap;justify-content:center;padding-top:13px}.wrap-contact100-form-btn{width:100%;display:block;position:relative;z-index:1;border-radius:25px;overflow:hidden;margin:0 auto}.contact100-form-bgbtn{position:absolute;z-index:-1;width:300%;height:100%;background:#19012e;background:-webkit-linear-gradient(left,#19012e,#19012e,#19012e,#19012e);background:-o-linear-gradient(left,#00dbde,#fc00ff,#00dbde,#fc00ff);background:-moz-linear-gradient(left,#00dbde,#fc00ff,#00dbde,#fc00ff);background:linear-gradient(left,#00dbde,#fc00ff,#00dbde,#fc00ff);top:0;left:-100%;-webkit-transition:all .4s;-o-transition:all .4s;-moz-transition:all .4s;transition:all .4s}.contact100-form-btn{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;justify-content:center;align-items:center;padding:0 20px;width:100%;height:50px;font-family:Poppins-Medium;font-size:16px;color:#fff;line-height:1.2}.wrap-contact100-form-btn:hover .contact100-form-bgbtn{left:0}.contact100-form-btn i{-webkit-transition:all .4s;-o-transition:all .4s;-moz-transition:all .4s;transition:all .4s}.contact100-form-btn:hover i{-webkit-transform:translateX(10px);-moz-transform:translateX(10px);-ms-transform:translateX(10px);-o-transform:translateX(10px);transform:translateX(10px)}@media (max-width:576px){.wrap-contact100{padding:72px 15px 65px 15px}}.wrap-contact100{width:800px;background:#fff;border-radius:10px;overflow:hidden;padding:42px 55px 45px 55px}.contact100-form-title{font-size:26px}
52
+ #pdf-viewer {
53
+ width: 100%;
54
+ height: 350px;
55
+ background: rgba(0, 0, 0, 0.1);
56
+ overflow: auto;
57
+ }
58
+
59
+ .pdf-page-canvas {
60
+ display: block;
61
+ margin: 5px auto;
62
+ border: 1px solid rgba(0, 0, 0, 0.2);
63
+ }
64
+
65
+ </style>
66
+ <style type="text/css">
67
+ #pdf-viewer {
68
+ width: 100%;
69
+ height: 450px;
70
+ background: rgba(0, 0, 0, 0.1);
71
+ overflow: auto;
72
+ }
73
+
74
+ .pdf-page-canvas {
75
+ display: block;
76
+ margin: 5px auto;
77
+ border: 1px solid rgba(0, 0, 0, 0.2);
78
+ }
79
+ </style>
80
+
81
+ </head>
82
+ <body>
83
+
84
+ <div id="content" class="main-content">
85
+
86
+ <div class="layout-px-spacing">
87
+ <div class="row layout-top-spacing">
88
+ <div class="container-contact100">
89
+
90
+ <br>
91
+ <div class="wrap-contact100">
92
+
93
+ <form class="contact100-form validate-form" action="/predict" method="GET">
94
+ <span class="contact100-form-title" style="font-size:32px">ACCIDENT CLASSIFIER</span>
95
+
96
+ <div>
97
+
98
+
99
+ </div>
100
+ <br>
101
+ <div class="wrap-input100">
102
+ <span class="contact100-form-title" style="color: #ff0000;" > {{ predictions }} </span>
103
+ </div>
104
+
105
+ <div class="wrap-input100">
106
+ <span class="label-input100">SPEED LIMIT</span>
107
+ <input class="input100" type="text" id="SPEED LIMIT" name="SPEED LIMIT"
108
+ placeholder="SPEED LIMIT (mph) ex: 24" required pattern="^\d+$"
109
+ oninvalid="this.setCustomValidity('Please enter a numeric speed limit')"
110
+ oninput="setCustomValidity('')">
111
+ <span class="focus-input100"></span>
112
+ </div>
113
+
114
+ <div class="wrap-input100">
115
+ <span class="label-input100">AGE</span>
116
+ <input class="input100" type="text" id="AGE" name="AGE"
117
+ placeholder="AGE ex: 24" required pattern="^\d+$"
118
+ oninvalid="this.setCustomValidity('Please enter a numeric age')"
119
+ oninput="setCustomValidity('')">
120
+ <span class="focus-input100"></span>
121
+ </div>
122
+
123
+
124
+
125
+ <div class="wrap-input100" style="border-bottom: 0px;" >
126
+ <span class="label-input100">DRIVER VISION</span>
127
+ <select class="input100" id="DRIVER VISION" name="DRIVER VISION" style="padding: 10px 5px;margin-top: 15px;border: 2px solid #d9d9d9;" required>
128
+ <option value="">SELECT DRIVER VISION</option>
129
+ <option value="BLINDED - SUNLIGHT">BLINDED - SUNLIGHT</option>
130
+ <option value="BLOWING MATERIALS">BLOWING MATERIALS</option>
131
+ <option value="BUILDINGS">BUILDINGS</option>
132
+ <option value="EMBANKMENT">EMBANKMENT</option>
133
+ <option value="HILLCREST">HILLCREST</option>
134
+ <option value="MOVING VEHICLES">MOVING VEHICLES</option>
135
+ <option value="NOT OBSCURED">NOT OBSCURED</option>
136
+ <option value="OTHER">OTHER</option>
137
+ <option value="PARKED VEHICLES">PARKED VEHICLES</option>
138
+ <option value="SIGNBOARD">SIGNBOARD</option>
139
+ <option value="TREES, PLANTS">TREES, PLANTS</option>
140
+ <option value="UNKNOWN">UNKNOWN</option>
141
+ <option value="WINDSHIELD (WATER/ICE)">WINDSHIELD (WATER/ICE)</option>
142
+ </select>
143
+ <span class="focus-input100"></span>
144
+ </div>
145
+ <div class="wrap-input100" style="border-bottom: 0px;" >
146
+ <span class="label-input100">DRIVER ACTION</span>
147
+ <select class="input100" id="DRIVER ACTION" name="DRIVER ACTION" style="padding: 10px 5px;margin-top: 15px;border: 2px solid #d9d9d9;" required>
148
+ <option value="">SELECT DRIVER ACTION</option>
149
+ <option value="DISREGARDED CONTROL DEVICES">DISREGARDED CONTROL DEVICES</option>
150
+ <option value="EMERGENCY VEHICLE ON CALL">EMERGENCY VEHICLE ON CALL</option>
151
+ <option value="EVADING POLICE VEHICLE">EVADING POLICE VEHICLE</option>
152
+ <option value="FAILED TO YIELD">FAILED TO YIELD</option>
153
+ <option value="FOLLOWED TOO CLOSELY">FOLLOWED TOO CLOSELY</option>
154
+ <option value="IMPROPER BACKING">IMPROPER BACKING</option>
155
+ <option value="IMPROPER LANE CHANGE">IMPROPER LANE CHANGE</option>
156
+ <option value="IMPROPER PARKING">IMPROPER PARKING</option>
157
+ <option value="IMPROPER PASSING">IMPROPER PASSING</option>
158
+ <option value="IMPROPER TURN">IMPROPER TURN</option>
159
+ <option value="LICENSE RESTRICTIONS">LICENSE RESTRICTIONS</option>
160
+ <option value="NONE">NONE</option>
161
+ <option value="OTHER">OTHER</option>
162
+ <option value="OVERCORRECTED">OVERCORRECTED</option>
163
+ <option value="STOPPED SCHOOL BUS">STOPPED SCHOOL BUS</option>
164
+ <option value="TEXTING">TEXTING</option>
165
+ <option value="TOO FAST FOR CONDITIONS">TOO FAST FOR CONDITIONS</option>
166
+ <option value="UNKNOWN">UNKNOWN</option>
167
+ <option value="WRONG WAY/SID">WRONG WAY/SID</option>
168
+
169
+ </select>
170
+ <span class="focus-input100"></span>
171
+ </div>
172
+ <div class="wrap-input100" style="border-bottom: 0px;" >
173
+ <span class="label-input100">PHYSICAL CONDITION</span>
174
+ <select class="input100" id="PHYSICAL CONDITION" name="PHYSICAL CONDITION" style="padding: 10px 5px;margin-top: 15px;border: 2px solid #d9d9d9;" required>
175
+ <option value="">SELECT PHYSICAL CONDITION</option>
176
+ <option value="FATIGUED/ASLEEP">FATIGUED/ASLEEP</option>
177
+ <option value="HAD BEEN DRINKING">HAD BEEN DRINKING</option>
178
+ <option value="ILLNESS/FAINTED">ILLNESS/FAINTED</option>
179
+ <option value="IMPAIRED - ALCOHOL">IMPAIRED - ALCOHOL</option>
180
+ <option value="IMPAIRED - ALCOHOL AND DRUGS">IMPAIRED - ALCOHOL AND DRUGS</option>
181
+ <option value="IMPAIRED - DRUGS">IMPAIRED - DRUGS</option>
182
+ <option value="MEDICATED">MEDICATED</option>
183
+ <option value="NORMAL">NORMAL</option>
184
+ <option value="OTHER">OTHER</option>
185
+ <option value="REMOVED BY EMS">REMOVED BY EMS</option>
186
+ <option value="UNKNOWN">UNKNOWN</option>
187
+
188
+ </select>
189
+ <span class="focus-input100"></span>
190
+ </div>
191
+
192
+ <div class="wrap-input100" style="border-bottom: 0px;" >
193
+ <span class="label-input100">ROADWAY CONDITION</span>
194
+ <select class="input100" id="ROADWAY CONDITION" name="ROADWAY CONDITION" style="padding: 10px 5px;margin-top: 15px;border: 2px solid #d9d9d9;" required>
195
+ <option value="">SELECT ROADWAY CONDITION</option>
196
+ <option value="ICE">ICE</option>
197
+ <option value="OTHER">OTHER</option>
198
+ <option value="SAND, MUD, DIRT">SAND, MUD, DIRT</option>
199
+ <option value="SNOW OR SLUSH">SNOW OR SLUSH</option>
200
+ <option value="UNKNOWN">UNKNOWN</option>
201
+ <option value="WET">WET</option>
202
+
203
+ </select>
204
+ <span class="focus-input100"></span>
205
+ </div>
206
+
207
+ <div class="wrap-input100" style="border-bottom: 0px;" >
208
+ <span class="label-input100">DEVICE CONDITION</span>
209
+ <select class="input100" id="DEVICE CONDITION" name="DEVICE CONDITION" style="padding: 10px 5px;margin-top: 15px;border: 2px solid #d9d9d9;" required>
210
+ <option value="">SELECT DEVICE CONDITION</option>
211
+ <option value="FUNCTIONING PROPERLY">FUNCTIONING PROPERLY</option>
212
+ <option value="MISSING">MISSING</option>
213
+ <option value="NO CONTROLS">NO CONTROLS</option>
214
+ <option value="NOT FUNCTIONING">NOT FUNCTIONING</option>
215
+ <option value="OTHER">OTHER</option>
216
+ <option value="UNKNOWN">UNKNOWN</option>
217
+ <option value="WORN REFLECTIVE MATERIAL">WORN REFLECTIVE MATERIAL</option>
218
+
219
+ </select>
220
+ <span class="focus-input100"></span>
221
+ </div>
222
+
223
+ <div class="wrap-input100" style="border-bottom: 0px;" >
224
+ <span class="label-input100">FIRST CRASH TYPE</span>
225
+ <select class="input100" id="FIRST CRASH TYPE" name="FIRST CRASH TYPE" style="padding: 10px 5px;margin-top: 15px;border: 2px solid #d9d9d9;" required>
226
+ <option value="">SELECT FIRST CRASH TYPE</option>
227
+ <option value="ANIMAL">ANIMAL</option>
228
+ <option value="FIXED OBJECT">FIXED OBJECT</option>
229
+ <option value="HEAD ON">HEAD ON</option>
230
+ <option value="OTHER NONCOLLISION">OTHER NONCOLLISION</option>
231
+ <option value="OTHER OBJECT">OTHER OBJECT</option>
232
+ <option value="OVERTURNED">OVERTURNED</option>
233
+ <option value="PARKED MOTOR VEHICLE">PARKED MOTOR VEHICLE</option>
234
+ <option value="PEDALCYCLIST">PEDALCYCLIST</option>
235
+ <option value="PEDESTRIAN">PEDESTRIAN</option>
236
+ <option value="REAR END">REAR END</option>
237
+ <option value="REAR TO FRONT">REAR TO FRONT</option>
238
+ <option value="REAR TO REAR">REAR TO REAR</option>
239
+ <option value="REAR TO SIDE">REAR TO SIDE</option>
240
+ <option value="SIDESWIPE OPPOSITE DIRECTION">SIDESWIPE OPPOSITE DIRECTION</option>
241
+ <option value="SIDESWIPE SAME DIRECTION">SIDESWIPE SAME DIRECTION</option>
242
+ <option value="TRAIN">TRAIN</option>
243
+ <option value="TURNING">TURNING</option>
244
+
245
+ </select>
246
+ <span class="focus-input100"></span>
247
+ </div>
248
+ <div class="container-contact100-form-btn">
249
+
250
+ <div class="wrap-contact100-form-btn">
251
+
252
+ <div class="contact100-form-bgbtn"></div>
253
+
254
+ <button class="contact100-form-btn" id='submit' type="submit" value="Upload" method="GET">Submit</button>
255
+
256
+ </div>
257
+ </div>
258
+ </form>
259
+ </div>
260
+ </div>
261
+ </div>
262
+
263
+ </div>
264
+ <!-- END MAIN CONTAINER -->
265
+
266
+ <!-- BEGIN GLOBAL MANDATORY SCRIPTS -->
267
+ <!-- {{ url_for('static', filename='assets/js/dashboard/papaparse.js') }} -->
268
+
269
+ </html>
270
+
271
+