Skip to content

Instantly share code, notes, and snippets.

/index.html

Created October 9, 2014 02:34
Show Gist options
  • Save anonymous/ef342a6db842228f18f9 to your computer and use it in GitHub Desktop.
Save anonymous/ef342a6db842228f18f9 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<style>
.card {
height: 100%;
width: 100%;
position: relative;
perspective: 800px;
}
.card-container {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transition: transform 1s;
}
.sides {
display: block;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.front {
background: white !important;
}
.back {
background: white !important;
transform: rotateY( 180deg );
}
.flipped {
transform: rotateY( 180deg );
}
</style>
<div class="container">
<div class="row">
<div class="col-md-12">
<section class="card">
<div class="row">
<div class="col-xs-offset-8 col-xs-4">
<button data-turn-card="" class="btn btn-primary btn-xs">Turn</button>
</div>
</div>
<div class="card-container">
<figure class="sides front">
<div class="row">
<div class="col-xs-12">
<h4>Baboon
<br>
<small>Small Beast, unaligned</small>
</h4>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-12">
<strong>Armor Class: </strong> 12
</div>
</div>
<div class="row">
<div class="col-xs-12">
<strong>Hit Points: </strong> 3 (1d6)
</div>
</div>
<div class="row">
<div class="col-xs-12">
<strong>Speed: </strong> 30Ft.,Climb 30Ft.
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-2">
<strong>STR</strong>
</div>
<div class="col-xs-2">
<strong>DEX</strong>
</div>
<div class="col-xs-2">
<strong>CON</strong>
</div>
<div class="col-xs-2">
<strong>INT</strong>
</div>
<div class="col-xs-2">
<strong>WIS</strong>
</div>
<div class="col-xs-2">
<strong>CHA</strong>
</div>
</div>
<div class="row" style="text-align:left">
<div class="col-xs-2">
<span>4(-3)</span>
</div>
<div class="col-xs-2">
<span>11(+0)</span>
</div>
<div class="col-xs-2">
<span>12(+0)</span>
</div>
<div class="col-xs-2">
<span>2(-4)</span>
</div>
<div class="col-xs-2">
<span>12(+1)</span>
</div>
<div class="col-xs-2">
<span>5(-3)</span>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-12"><strong>Senses: </strong>Passive</div>
</div>
<div class="row">
<div class="col-xs-12"><strong>Languages: </strong>-</div>
</div>
<div class="row">
<div class="col-xs-12"><strong>Challenge: </strong>0 (10 xp)</div>
</div>
<hr>
<div class="row">
<div class="col-xs-12">
<h5><strong>Actions</strong></h5>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<strong>Bite: </strong> <i>Melee Weapon Attack:</i> <span>+1 to hit, reach 5 ft, one target.</span>
</div>
</div>
<div class="row">
<div class="col-xs-12"><i>Hit:</i><span>(1d4 - 1) piercing damage.</span></div>
</div>
</figure>
<figure class="sides back">2</figure>
</div>
</section>
</div>
</div>
</div>
<script>
$(document).on("click","[data-turn-card]", function(e){
$(this).closest(".card").find(".card-container").toggleClass("flipped");
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"><\/script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"><\/script>
<script src="//code.jquery.com/jquery-2.1.1.min.js"><\/script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"><\/script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<style>
.card {
height: 100%;
width: 100%;
position: relative;
perspective: 800px;
}
.card-container {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transition: transform 1s;
}
.sides {
display: block;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.front {
background: white !important;
}
.back {
background: white !important;
transform: rotateY( 180deg );
}
.flipped {
transform: rotateY( 180deg );
}
</style>
<div class="container">
<div class="row">
<div class="col-md-12">
<section class="card">
<div class="row">
<div class="col-xs-offset-8 col-xs-4">
<button data-turn-card="" class="btn btn-primary btn-xs">Turn</button>
</div>
</div>
<div class="card-container">
<figure class="sides front">
<div class="row">
<div class="col-xs-12">
<h4>Baboon
<br>
<small>Small Beast, unaligned</small>
</h4>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-12">
<strong>Armor Class: </strong> 12
</div>
</div>
<div class="row">
<div class="col-xs-12">
<strong>Hit Points: </strong> 3 (1d6)
</div>
</div>
<div class="row">
<div class="col-xs-12">
<strong>Speed: </strong> 30Ft.,Climb 30Ft.
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-2">
<strong>STR</strong>
</div>
<div class="col-xs-2">
<strong>DEX</strong>
</div>
<div class="col-xs-2">
<strong>CON</strong>
</div>
<div class="col-xs-2">
<strong>INT</strong>
</div>
<div class="col-xs-2">
<strong>WIS</strong>
</div>
<div class="col-xs-2">
<strong>CHA</strong>
</div>
</div>
<div class="row" style="text-align:left">
<div class="col-xs-2">
<span>4(-3)</span>
</div>
<div class="col-xs-2">
<span>11(+0)</span>
</div>
<div class="col-xs-2">
<span>12(+0)</span>
</div>
<div class="col-xs-2">
<span>2(-4)</span>
</div>
<div class="col-xs-2">
<span>12(+1)</span>
</div>
<div class="col-xs-2">
<span>5(-3)</span>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-12"><strong>Senses: </strong>Passive</div>
</div>
<div class="row">
<div class="col-xs-12"><strong>Languages: </strong>-</div>
</div>
<div class="row">
<div class="col-xs-12"><strong>Challenge: </strong>0 (10 xp)</div>
</div>
<hr>
<div class="row">
<div class="col-xs-12">
<h5><strong>Actions</strong></h5>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<strong>Bite: </strong> <i>Melee Weapon Attack:</i> <span>+1 to hit, reach 5 ft, one target.</span>
</div>
</div>
<div class="row">
<div class="col-xs-12"><i>Hit:</i><span>(1d4 - 1) piercing damage.</span></div>
</div>
</figure>
<figure class="sides back">2</figure>
</div>
</section>
</div>
</div>
</div>
<script>
$(document).on("click","[data-turn-card]", function(e){
$(this).closest(".card").find(".card-container").toggleClass("flipped");
});
<\/script>
</body>
</html></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment