Upload index.html
Browse files- index.html +230 -0
index.html
ADDED
@@ -0,0 +1,230 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<!DOCTYPE html>
|
2 |
+
<html lang="en" >
|
3 |
+
|
4 |
+
<head>
|
5 |
+
|
6 |
+
<meta charset="UTF-8">
|
7 |
+
|
8 |
+
<link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" />
|
9 |
+
<meta name="apple-mobile-web-app-title" content="CodePen">
|
10 |
+
|
11 |
+
<link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />
|
12 |
+
|
13 |
+
<link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" />
|
14 |
+
|
15 |
+
|
16 |
+
<title>{{ appName }}</title>
|
17 |
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
|
18 |
+
|
19 |
+
|
20 |
+
|
21 |
+
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
|
22 |
+
|
23 |
+
<style>
|
24 |
+
/*just bg and body style*/
|
25 |
+
body{
|
26 |
+
background-color:#1e2832;
|
27 |
+
}
|
28 |
+
.container{
|
29 |
+
background-color:#1E2832;
|
30 |
+
padding-bottom:20px;
|
31 |
+
margin-top:10px;
|
32 |
+
border-radius:5px;
|
33 |
+
}
|
34 |
+
.center{
|
35 |
+
text-align:center;
|
36 |
+
}
|
37 |
+
#top{
|
38 |
+
margin-top:20px;
|
39 |
+
}
|
40 |
+
.btn-container{
|
41 |
+
background:#fff;
|
42 |
+
border-radius:5px;
|
43 |
+
padding-bottom:20px;
|
44 |
+
margin-bottom:20px;
|
45 |
+
}
|
46 |
+
.white{
|
47 |
+
color:white;
|
48 |
+
}
|
49 |
+
.imgupload{
|
50 |
+
color:#1E2832;
|
51 |
+
padding-top:40px;
|
52 |
+
font-size:7em;
|
53 |
+
}
|
54 |
+
#namefile{
|
55 |
+
color:black;
|
56 |
+
}
|
57 |
+
h4>strong{
|
58 |
+
color:#ff3f3f
|
59 |
+
}
|
60 |
+
.btn-primary{
|
61 |
+
border-color: #ff3f3f !important;
|
62 |
+
color: #ffffff;
|
63 |
+
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
64 |
+
background-color: #ff3f3f !important;
|
65 |
+
border-color: #ff3f3f !important;
|
66 |
+
}
|
67 |
+
|
68 |
+
/*these two are set to not display at start*/
|
69 |
+
.imgupload.ok{
|
70 |
+
display:none;
|
71 |
+
color:green;
|
72 |
+
}
|
73 |
+
.imgupload.stop{
|
74 |
+
display:none;
|
75 |
+
color:red;
|
76 |
+
}
|
77 |
+
|
78 |
+
|
79 |
+
/*this sets the actual file input to overlay our button*/
|
80 |
+
#fileup{
|
81 |
+
opacity: 0;
|
82 |
+
-moz-opacity: 0;
|
83 |
+
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
|
84 |
+
width:200px;
|
85 |
+
cursor: pointer;
|
86 |
+
position:absolute;
|
87 |
+
left: 50%;
|
88 |
+
transform: translateX(-50%);
|
89 |
+
bottom: 40px;
|
90 |
+
height: 50px;
|
91 |
+
}
|
92 |
+
|
93 |
+
/*switch between input and not active input*/
|
94 |
+
#submitbtn{
|
95 |
+
padding:5px 50px;
|
96 |
+
display:none;
|
97 |
+
}
|
98 |
+
#fakebtn{
|
99 |
+
padding:5px 40px;
|
100 |
+
}
|
101 |
+
|
102 |
+
|
103 |
+
/*www.emilianocostanzo.com*/
|
104 |
+
#sign{
|
105 |
+
color:#1E2832;
|
106 |
+
position:fixed;
|
107 |
+
right:10px;
|
108 |
+
bottom:10px;
|
109 |
+
text-shadow:0px 0px 0px #1E2832;
|
110 |
+
transition:all.3s;
|
111 |
+
}
|
112 |
+
#sign:hover{
|
113 |
+
color:#1E2832;
|
114 |
+
text-shadow:0px 0px 5px #1E2832;
|
115 |
+
}
|
116 |
+
</style>
|
117 |
+
|
118 |
+
<script>
|
119 |
+
window.console = window.console || function(t) {};
|
120 |
+
</script>
|
121 |
+
|
122 |
+
|
123 |
+
|
124 |
+
<script>
|
125 |
+
if (document.location.search.match(/type=embed/gi)) {
|
126 |
+
window.parent.postMessage("resize", "*");
|
127 |
+
}
|
128 |
+
</script>
|
129 |
+
|
130 |
+
|
131 |
+
</head>
|
132 |
+
|
133 |
+
<body translate="no" >
|
134 |
+
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
|
135 |
+
|
136 |
+
<div class="container center">
|
137 |
+
<div class="row">
|
138 |
+
<div class="col-md-12">
|
139 |
+
<h1 class="white">{{ appName }}</h1>
|
140 |
+
<p class="white">In this APP , submit is allowed only in case the user uploads a valid image file.</p>
|
141 |
+
</div>
|
142 |
+
</div>
|
143 |
+
|
144 |
+
<form name="upload" method="post" action="predict" enctype="multipart/form-data" accept-charset="utf-8">
|
145 |
+
<div class="row">
|
146 |
+
<div class="col-md-6 col-md-offset-3 center">
|
147 |
+
<div class="btn-container">
|
148 |
+
<!--the three icons: default, ok file (img), error file (not an img)-->
|
149 |
+
<h1 class="imgupload"><i class="fa fa-file-image-o"></i></h1>
|
150 |
+
<h1 class="imgupload ok"><i class="fa fa-check"></i></h1>
|
151 |
+
<h1 class="imgupload stop"><i class="fa fa-times"></i></h1>
|
152 |
+
<!--this field changes dinamically displaying the filename we are trying to upload-->
|
153 |
+
<p id="namefile">Only pics allowed! (jpg,jpeg,bmp,png)</p>
|
154 |
+
<!--our custom btn which which stays under the actual one-->
|
155 |
+
<button type="button" id="btnup" class="btn btn-primary btn-lg">Browse for your pic!</button>
|
156 |
+
<!--this is the actual file input, is set with opacity=0 beacause we wanna see our custom one-->
|
157 |
+
<input type="file" value="" name="fileup" id="fileup">
|
158 |
+
</div>
|
159 |
+
</div>
|
160 |
+
</div>
|
161 |
+
<!--additional fields-->
|
162 |
+
<div class="row">
|
163 |
+
<div class="col-md-12">
|
164 |
+
<!--the defauld disabled btn and the actual one shown only if the three fields are valid-->
|
165 |
+
<input type="submit" value="Submit!" class="btn btn-primary" id="submitbtn">
|
166 |
+
<button type="button" class="btn btn-default" disabled="disabled" id="fakebtn">Submit! <i class="fa fa-minus-circle"></i></button>
|
167 |
+
</div>
|
168 |
+
</div>
|
169 |
+
</form>
|
170 |
+
<br>
|
171 |
+
<br>
|
172 |
+
<br>
|
173 |
+
<div class="col-md-6 col-md-offset-3 center">
|
174 |
+
<div class="btn-container">
|
175 |
+
<div class="row">
|
176 |
+
<div class="col-md-12">
|
177 |
+
<h1 class="white" style="color:darkred;">{{prediction}}</h1>
|
178 |
+
<img src="{{ image }}">
|
179 |
+
</div>
|
180 |
+
</div>
|
181 |
+
</div>
|
182 |
+
|
183 |
+
|
184 |
+
</div>
|
185 |
+
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script>
|
186 |
+
|
187 |
+
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
|
188 |
+
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
|
189 |
+
<script id="rendered-js" >
|
190 |
+
$('#fileup').change(function () {
|
191 |
+
//here we take the file extension and set an array of valid extensions
|
192 |
+
var res = $('#fileup').val();
|
193 |
+
var arr = res.split("\\");
|
194 |
+
var filename = arr.slice(-1)[0];
|
195 |
+
filextension = filename.split(".");
|
196 |
+
filext = "." + filextension.slice(-1)[0];
|
197 |
+
valid = [".jpg", ".png", ".jpeg", ".bmp"];
|
198 |
+
//if file is not valid we show the error icon, the red alert, and hide the submit button
|
199 |
+
if (valid.indexOf(filext.toLowerCase()) == -1) {
|
200 |
+
$(".imgupload").hide("slow");
|
201 |
+
$(".imgupload.ok").hide("slow");
|
202 |
+
$(".imgupload.stop").show("slow");
|
203 |
+
|
204 |
+
$('#namefile').css({ "color": "red", "font-weight": 700 });
|
205 |
+
$('#namefile').html("File " + filename + " is not pic!");
|
206 |
+
|
207 |
+
$("#submitbtn").hide();
|
208 |
+
$("#fakebtn").show();
|
209 |
+
} else {
|
210 |
+
//if file is valid we show the green alert and show the valid submit
|
211 |
+
$(".imgupload").hide("slow");
|
212 |
+
$(".imgupload.stop").hide("slow");
|
213 |
+
$(".imgupload.ok").show("slow");
|
214 |
+
|
215 |
+
$('#namefile').css({ "color": "green", "font-weight": 700 });
|
216 |
+
$('#namefile').html(filename);
|
217 |
+
|
218 |
+
$("#submitbtn").show();
|
219 |
+
$("#fakebtn").hide();
|
220 |
+
}
|
221 |
+
});
|
222 |
+
//# sourceURL=pen.js
|
223 |
+
</script>
|
224 |
+
|
225 |
+
|
226 |
+
|
227 |
+
</body>
|
228 |
+
|
229 |
+
</html>
|
230 |
+
|