|
<!DOCTYPE html> |
|
<html lang="en" > |
|
|
|
<head> |
|
|
|
<meta charset="UTF-8"> |
|
|
|
<link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" /> |
|
<meta name="apple-mobile-web-app-title" content="CodePen"> |
|
|
|
<link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" /> |
|
|
|
<link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" /> |
|
|
|
|
|
<title>{{ appName }}</title> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script> |
|
|
|
|
|
|
|
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> |
|
|
|
<style> |
|
|
|
body{ |
|
background-color:#1e2832; |
|
} |
|
.container{ |
|
background-color:#1E2832; |
|
padding-bottom:20px; |
|
margin-top:10px; |
|
border-radius:5px; |
|
} |
|
.center{ |
|
text-align:center; |
|
} |
|
#top{ |
|
margin-top:20px; |
|
} |
|
.btn-container{ |
|
background:#fff; |
|
border-radius:5px; |
|
padding-bottom:20px; |
|
margin-bottom:20px; |
|
} |
|
.white{ |
|
color:white; |
|
} |
|
.imgupload{ |
|
color:#1E2832; |
|
padding-top:40px; |
|
font-size:7em; |
|
} |
|
#namefile{ |
|
color:black; |
|
} |
|
h4>strong{ |
|
color:#ff3f3f |
|
} |
|
.btn-primary{ |
|
border-color: #ff3f3f !important; |
|
color: #ffffff; |
|
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); |
|
background-color: #ff3f3f !important; |
|
border-color: #ff3f3f !important; |
|
} |
|
|
|
|
|
.imgupload.ok{ |
|
display:none; |
|
color:green; |
|
} |
|
.imgupload.stop{ |
|
display:none; |
|
color:red; |
|
} |
|
|
|
|
|
|
|
#fileup{ |
|
opacity: 0; |
|
-moz-opacity: 0; |
|
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); |
|
width:200px; |
|
cursor: pointer; |
|
position:absolute; |
|
left: 50%; |
|
transform: translateX(-50%); |
|
bottom: 40px; |
|
height: 50px; |
|
} |
|
|
|
|
|
#submitbtn{ |
|
padding:5px 50px; |
|
display:none; |
|
} |
|
#fakebtn{ |
|
padding:5px 40px; |
|
} |
|
|
|
|
|
|
|
#sign{ |
|
color:#1E2832; |
|
position:fixed; |
|
right:10px; |
|
bottom:10px; |
|
text-shadow:0px 0px 0px #1E2832; |
|
transition:all.3s; |
|
} |
|
#sign:hover{ |
|
color:#1E2832; |
|
text-shadow:0px 0px 5px #1E2832; |
|
} |
|
</style> |
|
|
|
<script> |
|
window.console = window.console || function(t) {}; |
|
</script> |
|
|
|
|
|
|
|
<script> |
|
if (document.location.search.match(/type=embed/gi)) { |
|
window.parent.postMessage("resize", "*"); |
|
} |
|
</script> |
|
|
|
|
|
</head> |
|
|
|
<body translate="no" > |
|
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"> |
|
|
|
<div class="container center"> |
|
<div class="row"> |
|
<div class="col-md-12"> |
|
<h1 class="white">{{ appName }}</h1> |
|
<p class="white">In this APP , submit is allowed only in case the user uploads a valid image file.</p> |
|
</div> |
|
</div> |
|
|
|
<form name="upload" method="post" action="predict" enctype="multipart/form-data" accept-charset="utf-8"> |
|
<div class="row"> |
|
<div class="col-md-6 col-md-offset-3 center"> |
|
<div class="btn-container"> |
|
|
|
<h1 class="imgupload"><i class="fa fa-file-image-o"></i></h1> |
|
<h1 class="imgupload ok"><i class="fa fa-check"></i></h1> |
|
<h1 class="imgupload stop"><i class="fa fa-times"></i></h1> |
|
|
|
<p id="namefile">Only pics allowed! (jpg,jpeg,bmp,png)</p> |
|
|
|
<button type="button" id="btnup" class="btn btn-primary btn-lg">Browse for your pic!</button> |
|
|
|
<input type="file" value="" name="fileup" id="fileup"> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="row"> |
|
<div class="col-md-12"> |
|
|
|
<input type="submit" value="Submit!" class="btn btn-primary" id="submitbtn"> |
|
<button type="button" class="btn btn-default" disabled="disabled" id="fakebtn">Submit! <i class="fa fa-minus-circle"></i></button> |
|
</div> |
|
</div> |
|
</form> |
|
<br> |
|
<br> |
|
<br> |
|
<div class="col-md-6 col-md-offset-3 center"> |
|
<div class="btn-container"> |
|
<div class="row"> |
|
<div class="col-md-12"> |
|
<h1 class="white" style="color:darkred;">{{prediction}}</h1> |
|
<img src="{{ image }}"> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
</div> |
|
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script> |
|
|
|
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> |
|
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script> |
|
<script id="rendered-js" > |
|
$('#fileup').change(function () { |
|
|
|
var res = $('#fileup').val(); |
|
var arr = res.split("\\"); |
|
var filename = arr.slice(-1)[0]; |
|
filextension = filename.split("."); |
|
filext = "." + filextension.slice(-1)[0]; |
|
valid = [".jpg", ".png", ".jpeg", ".bmp"]; |
|
|
|
if (valid.indexOf(filext.toLowerCase()) == -1) { |
|
$(".imgupload").hide("slow"); |
|
$(".imgupload.ok").hide("slow"); |
|
$(".imgupload.stop").show("slow"); |
|
|
|
$('#namefile').css({ "color": "red", "font-weight": 700 }); |
|
$('#namefile').html("File " + filename + " is not pic!"); |
|
|
|
$("#submitbtn").hide(); |
|
$("#fakebtn").show(); |
|
} else { |
|
|
|
$(".imgupload").hide("slow"); |
|
$(".imgupload.stop").hide("slow"); |
|
$(".imgupload.ok").show("slow"); |
|
|
|
$('#namefile').css({ "color": "green", "font-weight": 700 }); |
|
$('#namefile').html(filename); |
|
|
|
$("#submitbtn").show(); |
|
$("#fakebtn").hide(); |
|
} |
|
}); |
|
|
|
</script> |
|
|
|
|
|
|
|
</body> |
|
|
|
</html> |
|
|
|
|
