Last active
December 12, 2017 02:01
-
-
Save jubeenshah/35619bd1be7bdcf7cccdafea64f7bdc1 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Cosmos-Image Classifier</title> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<!-- Bootstrap --> | |
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"> | |
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" /> | |
<link href="./css/jumbotron-narrow.css" rel="stylesheet"> | |
</head> | |
<body> | |
<div class="container"> | |
<div class="container"> | |
<div class="header clearfix"> | |
<h3 class="text-muted">COSMOS - Image Classifier</h3> | |
</div> | |
<div class="jumbotron"> | |
<h1>Demo <img src ="https://quilonmobiles.com/home/wp-content/uploads/2017/10/facebook-5.png" width ="100" height = "100" </img></h1> | |
<p class="lead">A simple demo for the image classification service</p> | |
<p id='serviceForm' class='bg-info'> | |
<span>Loading services...</span> | |
<select id="service_select" class='hidden'><select/> | |
</p> | |
<p class='hidden' id='uploadForm'> | |
<label for="url">Image URL : </label> <input type="text" id="url"/><br> | |
<a id="urlSubmit" class="btn btn-lg btn-success" href="#" role="button">Classify <img src="./images/loading.gif" class="loading hidden"></a> | |
</p> | |
</div> | |
<div id="submitAlert" class="hidden fade in alert alert-danger" role="alert"> | |
<b>Error!</b> <span class='error'></span> | |
</div> | |
<div class="row marketing"> | |
<div class="col-lg-12"> | |
<div class="row text-center"> | |
<div class="col-lg-4"> | |
<h4>Images</h4> | |
</div> | |
<div class="col-lg-8"> | |
<h4>Predictions</h4> | |
</div> | |
</div> | |
<hr> | |
</div> | |
</div> | |
<div class="row marketing"> | |
<div class="col-lg-12" id="imageList"> | |
</div> | |
</div> | |
<div class="row hidden" id="emptyImage"> | |
<div class="col-lg-4"> | |
<img title="" src="" class="img-responsive"> | |
</div> | |
<div class="col-lg-8 predictions"></div> | |
</div> | |
<footer class="footer"> | |
<img src ="https://quilonmobiles.com/home/wp-content/uploads/2017/10/facebook-5.png" width ="50" height = "50" </img> | |
<p>Powered with <a href="http://deepdetect.com" target="_blank">DeepDetect</a></p> | |
</footer> | |
</div> <!-- /container --> | |
</div> | |
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> | |
<!-- Include all compiled plugins (below), or include individual files as needed --> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script> | |
<script src="./js/main.js"></script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
/* Space out content a bit */
body {
padding-top: 20px;
padding-bottom: 20px;
}
/* Everything but the jumbotron gets side spacing for mobile first views */
.header,
.marketing,
.footer {
padding-right: 15px;
padding-left: 15px;
}
/* Custom page header /
.header {
padding-bottom: 20px;
border-bottom: 1px solid #e5e5e5;
}
/ Make the masthead heading the same height as the navigation */
.header h3 {
margin-top: 0;
margin-bottom: 0;
line-height: 40px;
}
/* Custom page footer */
.footer {
padding-top: 19px;
color: #777;
border-top: 1px solid #e5e5e5;
}
/* Customize container */
@media (min-width: 768px) {
.container {
max-width: 730px;
}
}
.container-narrow > hr {
margin: 30px 0;
}
/* Main marketing message and sign up button */
.jumbotron {
text-align: center;
border-bottom: 1px solid #e5e5e5;
}
.jumbotron .btn {
padding: 14px 24px;
font-size: 21px;
}
/* Supporting marketing content */
.marketing {
margin: 40px 0;
}
.marketing p + h4 {
margin-top: 28px;
}
/* Responsive: Portrait tablets and up /
@media screen and (min-width: 768px) {
/ Remove the padding we set earlier /
.header,
.marketing,
.footer {
padding-right: 0;
padding-left: 0;
}
/ Space out the masthead /
.header {
margin-bottom: 30px;
}
/ Remove the bottom border on the jumbotron for visual effect */
.jumbotron {
border-bottom: 0;
}
}