-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
42 lines (39 loc) · 5.41 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>
<head>
<title lang='en'>Bike Index lookup</title>
<meta name="charset" content="utf-8"/>
<meta name="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="description" content="Bike Index URL shortener and quick code lookup. View this page on github at https://github.com/bikeindex/binx"/>
<link rel="shortcut icon" href="fav.ico"/>
<style>.clearfix{*zoom:1}.clearfix:before,.clearfix:after{display:table;content:"";line-height:0}.clearfix:after{clear:both}h1{font-size:35px}p,input{font-size:16px}@media (min-width: 650px){h1{font-size:50px}p,input{font-size:20px}}*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;text-rendering:optimizeLegibility}body{width:100%;height:100%;position:relative;font-size:16px;font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:200;padding:20px;margin:0}html{background:url(mosaics/mosaic_small.jpg) no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;padding:0;margin:0}@media (min-width: 700px){html{background:url(mosaics/mosaic_medium.jpg) no-repeat center center fixed}}@media (min-width: 1500px){html{background:url(mosaics/mosaic_large.jpg) no-repeat center center fixed}}form{-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:1px 1px 3px rgba(0,0,0,0.5);-moz-box-shadow:1px 1px 3px rgba(0,0,0,0.5);box-shadow:1px 1px 3px rgba(0,0,0,0.5);*zoom:1;display:block;position:relative;padding:30px 10px 40px;margin:30px auto 0;width:100%;max-width:600px;background:rgba(53,73,94,0.82);border:1px solid rgba(90,124,159,0.1)}form:before,form:after{display:table;content:"";line-height:0}form:after{clear:both}@media (min-width: 760px){form{margin-top:150px;padding:60px 20px}}h1{margin:0 0 1em;padding:0;text-align:center;color:#f8f8f8;font-weight:200;text-shadow:0 1px 1px rgba(255,255,255,0.2)}h1 a{color:#f8f8f8;text-decoration:none}h1 a:hover{text-decoration:underline}p{display:none;position:absolute;bottom:30px;left:0px;width:100%;margin:3em 0 0;padding:0 20px;text-align:left;color:#cacaca;font-weight:400;text-shadow:0 0 5px rgba(192,57,43,0.9)}@media (max-width: 759px){p{bottom:10px}}input[type="text"]{-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;border:1px solid #cacaca;height:auto;line-height:1.3em;padding:.25em .5em;display:block;margin:0;width:70%;float:left}input[type="text"]:focus{border-color:rgba(82,168,236,0.8);outline:0;outline:thin dotted \9;-webkit-box-shadow:inset 0 1px 4px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);-moz-box-shadow:inset 0 1px 4px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);box-shadow:inset 0 1px 4px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6)}.btn{-webkit-box-shadow:inset 0 0 3px rgba(0,0,0,0.2);-moz-box-shadow:inset 0 0 3px rgba(0,0,0,0.2);box-shadow:inset 0 0 3px rgba(0,0,0,0.2);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;border:1px solid #565759;cursor:pointer;display:block;width:25%;margin:0 0 0 5%;padding:.25em .5em;float:left;background:#3498db;border-color:#217dbb;line-height:1.3em;font-weight:normal;text-decoration:none;text-align:center;color:white}.btn:hover{-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.4);-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.4);box-shadow:1px 1px 2px rgba(0,0,0,0.4);color:white;-webkit-transform:translate(-1px, -1px);-moz-transform:translate(-1px, -1px);-ms-transform:translate(-1px, -1px);-o-transform:translate(-1px, -1px);transform:translate(-1px, -1px);text-decoration:none}.btn:active{-webkit-box-shadow:0 0 1px rgba(0,0,0,0.4);-moz-box-shadow:0 0 1px rgba(0,0,0,0.4);box-shadow:0 0 1px rgba(0,0,0,0.4);-webkit-transform:translate(1px, 1px);-moz-transform:translate(1px, 1px);-ms-transform:translate(1px, 1px);-o-transform:translate(1px, 1px);transform:translate(1px, 1px)}.mosaic-zoom{-webkit-border-radius:1em;-moz-border-radius:1em;border-radius:1em;-webkit-box-shadow:1px 1px 3px rgba(0,0,0,0.5);-moz-box-shadow:1px 1px 3px rgba(0,0,0,0.5);box-shadow:1px 1px 3px rgba(0,0,0,0.5);background:rgba(53,73,94,0.82);border:1px solid rgba(90,124,159,0.1);display:block;position:fixed;bottom:30px;right:2%;padding:.5em;opacity:.85;text-decoration:none;-webkit-transition:all .15s linear;-moz-transition:all .15s linear;-o-transition:all .15s linear;transition:all .15s linear}.mosaic-zoom img{display:block;width:1.2em;height:auto}.mosaic-zoom:hover{opacity:1}</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<form id='form'>
<h1><a href="https://bikeindex.org">Bike Index</a> code lookup</h1>
<input id='code_field' name='code_field' placeholder='Code or number' type='text'>
<input class="btn" name="search" type="submit" value="Go" />
<p class='alert'>Please enter a shortcode</p>
</form>
<a href="https://raw.github.com/bikeindex/binx/gh-pages/mosaics/mosaic.jpg" class="mosaic-zoom">
<img src="magnifying_glass.svg">
</a>
<script type="text/javascript">
$( document ).ready(function() {
$("#form").submit(function(e) {
var code;
code = void 0;
e.preventDefault();
code = $("#code_field").val();
if (code.length > 0) {
return window.location.href = "https://bikeindex.org/bikes/" + code;
} else {
return $('.alert').fadeIn(100);
}
});
});
</script>
</body>
</html>