Skip to content

Instantly share code, notes, and snippets.

@pr3ssh

pr3ssh/index.html

Last active December 4, 2015 08:37
Show Gist options
  • Save pr3ssh/59d1a6d9326dea573b74 to your computer and use it in GitHub Desktop.
Save pr3ssh/59d1a6d9326dea573b74 to your computer and use it in GitHub Desktop.
Download ZIP
bbqres
Raw
index.html
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>#BBQRES</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></link>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<style type="text/css" media="screen">
.outer {
background-image: url('http://hola.coreybyrnes.com/wp-content/uploads/2011/04/IMG_9645-800x533.jpg');
background-size: cover;
}
.device {
height: 780px;
width: 550px;
position: relative;
background-image: url("http://labodasideral.es/img/iphone.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
.iframe {
top: 138px;
left: 126px;
position: absolute;
width: 295px;
height: 498px;
background-color: yellow;
}
.selector {
margin-top: 150px;
}
</style>
<script>
$(document).ready(function() {
$('#cal').click(function() {
var c = $('select').val();
var cal = c * 24;
var img = "<img src='http://tienda.disnieto.com/prestashop/img/p/77-120-large.jpg' width='50' />";
var res = "";
$('#beer').html(res);
if (c < 5) {
for(i=0;i<cal;i++) {
res = res + img;
}
$('#beer').html(res + '<br/><small class="alert alert-warning">Ratio: 1 persona / 24 botellines</small>');
} else {
$('#beer').html('<br/><a class="alert alert-info" href="http://www.ratebeer.com/beer/steinburg-clasica/32675/" target="_blank">Creo que te resultará más rentable comprar Steinburg</a>')
}
});
});
</script>
</head>
<body class="outer">
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="device">
<image class="iframe" src="http://enreda.coop/wp-content/uploads/2015/12/bbqres.gif" />
</div>
</div>
<div class="col-sm-6 panel panel-default selector">
<h1>#BBQRES: BeerCal</h1>
<hr>
<h3>Cuántas personas vais a venir?</h3>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<a id="cal" href="#" class="btn btn-success">Calcula la birra!</a>
<br><br>
<div id="beer"></div>
<br><br>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment