Skip to content

Instantly share code, notes, and snippets.

@kurtextrem
Created December 18, 2011 14:11
Show Gist options
  • Save kurtextrem/1493516 to your computer and use it in GitHub Desktop.
Save kurtextrem/1493516 to your computer and use it in GitHub Desktop.
Untitled
@import url('http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css');
@import url('http://fonts.googleapis.com/css?family=Handlee');
body {
background: url('img/noise.png');
}
#usermenu {
position: absolute;
right: 0;
left: auto !important;
border-radius: 4px;
}
.u {
font-size: 20px;
text-decoration: underline;
font-family: 'Handlee', cursive;
}
.failure {
background-color: red;
border-color: darkred;
}
<ul id="usermenu" class="topbar-inner nav" data-dropdown="dropdown">
<li class="dropdown"><a href='#' class="dropdown-toggle">kurtextrem</a>
<ul class="dropdown-menu">
<li>Test1</li>
<li class="divider"></li>
<li>Test2</li>
</ul>
</li>
</ul>
<div class="container">
<h1>S4 Event Plan</h1>
<div class="alert-message info">
<a class="close" href="#">×</a>
<p><em><span class="label success">Neu</span> Du hast keinen Plan und bist unorganisiert? Dann bist <strong>Du</strong> genau richtig hier!</em></p>
</div>
<form>
<fieldset>
<div class="clearfix">
<p class="u">Touchdown</p>
<label for="td1-counter">TD 1</label>
<div class="input">
<div class="input-prepend">
<label class="add-on"><input type="checkbox" class="failure"></label>
<input type="text" readonly class="small" value="Abgeschlossen">
</div>
</div>
</div>
<div class="clearfix">
<label for="dm-counter">Death Match</label>
<div class="input">
<div class="input-append">
<input class="mini count" id="dm-counter" type="number" min=0 value=0>
<label class="add-on">
<input type="checkbox" disabled>
</label>
</div>
</div>
</div>
<div class="clearfix">
<label for="chaser-counter">Chaser</label>
<div class="input">
<div class="input-append">
<input class="mini count" id="chaser-counter" type="number" min=0 value=0>
<label class="add-on">
<input type="checkbox" disabled>
</label>
</div>
</div>
</div>
<div class="clearfix">
<label for="siege-counter">Siege</label>
<div class="input">
<div class="input-append">
<input class="mini count" id="siege-counter" type="number" min=0 value=0>
<label class="add-on">
<input type="checkbox" disabled>
</label>
</div>
</div>
</div>
<div class="clearfix">
<label for="captain-counter">Captain</label>
<div class="input">
<div class="input-append">
<input class="mini count" id="captain-counter" type="number" min=0 value=0>
<label class="add-on">
<input type="checkbox" disabled>
</label>
</div>
</div>
</div>
<div class="clearfix">
<label for="br-counter">Battle Royal</label>
<div class="input">
<div class="input-append">
<input class="mini count" id="br-counter" type="number" min=0 value=0>
<label class="add-on">
<input type="checkbox" disabled>
</label>
</div>
</div>
</div>
</fieldset>
</form>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-alerts.js"></script>
<script src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-dropdown.js"></script>
<script>$(".alert-message").alert();$('.topbar-inner').dropdown();
$('.count').change(function(){
if($(this).val() >= 3)
$(this).prop('checked', true);
});
$('.add-on :checkbox').click(function () {
if ($(this).prop('checked')) {
$(this).parents('.add-on').addClass('active').removeClass('failure');
} else {
$(this).parents('.add-on').removeClass('active').addClass('failure');
}
})
</script>
{"page":"html","view":"split"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment