Skip to content

Instantly share code, notes, and snippets.

@kouphax

kouphax/index.html

Created April 28, 2014 10:14
Show Gist options
  • Save kouphax/11367640 to your computer and use it in GitHub Desktop.
Save kouphax/11367640 to your computer and use it in GitHub Desktop.
Download ZIP
Trigger Happy Design Thoughts
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Trigger Happy</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<link href="http://cdn.jsdelivr.net/flat-ui/2.0/css/flat-ui.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>
<style>
* {
font-family: 'Source Sans Pro', 'sans-serif';
}
</style>
<link rel="shortcut icon" href="images/favicon.ico">
</head>
<body>
<div class="container" style="margin-top: 50px;">
<!--
<div class="row" style="margin-top: 20px;">
<div class="col-md-3"></div>
<div class="col-md-6">
<button id="save" class="btn btn-hg btn-default" style="width:100%;" href="#fakelink">Login With Github</button>
</div>
<div class="col-md-3"></div>
</div>
-->
<div class="row" id="notification" style="margin-top: 20px;">
<div class="col-md-3"></div>
<div class="col-md-6">
<div class="btn btn-success" style="width:100%;text-align:left;">Mood successfuly recorded</div>
</div>
<div class="col-md-3"></div>
</div>
<div class="row" style="margin-top: 20px;">
<div class="col-md-3"></div>
<div class="col-md-6">
<div class="btn-group" style="width:100%;text-align:center;">
<a class="btn btn-hg btn-default" style="width:33.3%;font-weight:bold;" data-value="-1" href="#fakelink">:(</a>
<a class="btn btn-hg btn-default" style="width:33.4%;font-weight:bold;" data-value="0" href="#fakelink">:|</a>
<a class="btn btn-hg btn-default" style="width:33.3%;font-weight:bold;" data-value="1" href="#fakelink">:)</a>
</div>
</div>
<div class="col-md-3"></div>
</div>
<div class="row" style="margin-top: 20px;">
<div class="col-md-3"></div>
<div class="col-md-6">
<form method="POST">
<input type="hidden" name="mood" />
<button id="save" class="btn btn-hg btn-inverse" style="width:100%;" href="#fakelink">Save Entry</button>
</form>
</div>
<div class="col-md-3"></div>
</div>
</div>
<!-- /.container -->
<!-- Load JS here for greater good =============================-->
<script src="http://cdn.jsdelivr.net/jquery/2.1.0/jquery.js"></script>
<script type="text/javascript">
$(".btn-group").on('click', "a", function() {
$(this).siblings()
.removeClass("active")
.end()
.addClass("active");
toggleButtonAbility()
$('input[name=mood]').val($(this).data("value"))
});
function anySelectedMoods(){
return $(".btn-group a.active").length > 0
}
function toggleButtonAbility(){
$('#save').attr("disabled", !anySelectedMoods())
}
toggleButtonAbility()
setTimeout($('#notification').fadeOut.bind($('#notification')), 1500);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment