Delete index.html
Browse files- index.html +0 -230
index.html
DELETED
@@ -1,230 +0,0 @@
|
|
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 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|