← back to Handbag Authentication
handbag_data/github_datasets/Pursearch/src/templates/index.html
152 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Handbag Identifier</title>
<!-- Font Awesome Icons -->
<link href="/static/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Merriweather+Sans:400,700" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic' rel='stylesheet' type='text/css'>
<!-- Plugin CSS -->
<link href="/static/vendor/magnific-popup/magnific-popup.css" rel="stylesheet">
<!-- Theme CSS - Includes Bootstrap -->
<link href="/static/css/creative.min.css" rel="stylesheet">
</head>
<!--<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<link rel="stylesheet" href="/static/style.css">
<title>Handbag Identifier</title>
</head>-->
<body id="page-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top py-3" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">Data Insight</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto my-2 my-lg-0">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="/#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="/#approach">Approach</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="/#portfolio">Prediction</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="/#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- -->
<section class="page-section bg-dark text-white">
<!--<body class="text-center">-->
<div class="container text-center">
<form class="form-signin" method=post enctype=multipart/form-data>
<select id="options" name="options">
<option value="yes"> Crop Image </option>
<option value="no"> No Crop </option>
</select>
<p></p>
<select id="price" name="price">
<option value="all"> All Price </option>
<option value="less 50"> Less Than $50 </option>
<option value="less 250"> Less Than $250 </option>
<option value="less 500"> Less Than $500 </option>
<option value="less 750"> Less Than $750 </option>
<option value="less 1000"> Less Than $1000 </option>
</select>
<p></p>
<select id="company" name="company">
<option value="both"> Both </option>
<option value="saks"> Saks Fifth Avenue </option>
<option value="shein"> Shein </option>
</select>
<p></p>
<input type="radio" name="test" value="test" checked> Use Test Image </input>
<input type="radio" name="test" value="user"> Use Your Image
<!--<input type="radio" name="prices" value="all" checked> All<br>
<input type="radio" name="prices" value="less 50"> Less Than $50<br>
<input type="radio" name="prices" value="less 250"> Less Than $250<br>
<input type="radio" name="prices" value="less 500"> Less Than $500<br>
<input type="radio" name="prices" value="less 750"> Less Than $750<br>
<input type="radio" name="prices" value="less 1000"> Less Than $1000<br>-->
<!--<img class="mb-4" src="/static/pytorch.png" alt="" width="72">-->
<!--<h1 class="h3 mb-3 font-weight-normal">Handbag Identifier</h1>-->
<!--<input type="file" name="file" class="form-control-file" id="inputfile">-->
<input type="file" name="file" id="inputfile"><br>
<p></p>
<button type="submit">Upload</button>
<!--<button class="btn btn-lg btn-primary btn-block" type="submit">Upload</button>-->
</form>
</div>
<script src="//code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script type="text/javascript">
$('#inputfile').bind('change', function() {
let fileSize = this.files[0].size/1024/1024; // this gives in MB
if (fileSize > 1) {
$("#inputfile").val(null);
alert('file is too big. images more than 1MB are not allowed')
return
}
let ext = $('#inputfile').val().split('.').pop().toLowerCase();
if($.inArray(ext, ['jpg','jpeg']) == -1) {
$("#inputfile").val(null);
alert('only jpeg/jpg files are allowed!');
}
});
</script>
</section>
<!-- Github Ribbon Start-->
<!--<a href="https://github.com/avinassh/pytorch-flask-api-heroku" class="github-corner"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#0E2E3B; color:#FFFFFF; position: absolute; top: 0; border: 0; right: 0;"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
<!-- Github Ribbon End-->
<!-- Footer -->
</body>
<footer class="bg-light py-5">
<div class="container">
<div class="small text-center text-muted">Copyright © 2020 - Jianing Lu</div>
</div>
</footer>
</html>