Skip to content

Instantly share code, notes, and snippets.

@agate

agate/drawer.html

Last active December 22, 2015 10:16
Show Gist options
  • Save agate/d8ea52686f089b9d533e to your computer and use it in GitHub Desktop.
Save agate/d8ea52686f089b9d533e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
drawer.html
<!DOCTYPE html>
<html ng-app="Drawer">
<head>
<meta charset="utf-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Drawer</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<style media="screen">
li {
padding-top: 0px;
padding-bottom: 0px;
background-color: #eee;
margin-top: 20px;
}
button.btn {
padding: 18px 16px;
font-size: 20px;
line-height: 1.3333333;
border-radius: 6px;
}
img {
height: 64px;
}
#wrapper {
position: relative;
width: 200px;
margin: 0 auto;
}
#platform {
margin-top:100px;
}
@keyframes spin {
0% { transform: translateZ(-100px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
16% { transform: translateZ(-100px) rotateX(180deg) rotateY(180deg) rotateZ(0deg); }
33% { transform: translateZ(-100px) rotateX(360deg) rotateY(90deg) rotateZ(180deg); }
50% { transform: translateZ(-100px) rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
66% { transform: translateZ(-100px) rotateX(180deg) rotateY(360deg) rotateZ(270deg); }
83% { transform: translateZ(-100px) rotateX(270deg) rotateY(180deg) rotateZ(180deg); }
100% { transform: translateZ(-100px) rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
}
@keyframes spin-duplicate {
0% { transform: translateZ(-100px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
16% { transform: translateZ(-100px) rotateX(180deg) rotateY(180deg) rotateZ(0deg); }
33% { transform: translateZ(-100px) rotateX(360deg) rotateY(90deg) rotateZ(180deg); }
50% { transform: translateZ(-100px) rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
66% { transform: translateZ(-100px) rotateX(180deg) rotateY(360deg) rotateZ(270deg); }
83% { transform: translateZ(-100px) rotateX(270deg) rotateY(180deg) rotateZ(180deg); }
100% { transform: translateZ(-100px) rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
}
@keyframes roll {
0% { transform: translate3d(-200px,-50px,-400px) }
12% { transform: translate3d(0px,0,-100px) }
25% { transform: translate3d(200px,-50px,-400px) }
37% { transform: translate3d(0px,-100px,-800px) }
50% { transform: translate3d(-200px,-50px,-400px) }
62% { transform: translate3d(0px,0,-100px) }
75% { transform: translate3d(200px,-50px,-400px) }
87% { transform: translate3d(0px,-100px,-800px) }
100% { transform: translate3d(-200px,-50px,-400px) }
}
#dice span {
position:absolute;
margin:100px 0 0 100px;
display: block;
font-size: 2.5em;
padding: 10px;
}
#dice {
position: absolute;
width: 200px;
height: 200px;
transform-style: preserve-3d;
animation: spin 5s infinite linear;
}
.side {
position: absolute;
width: 200px;
height: 200px;
background: #fff;
box-shadow:inset 0 0 40px #ccc;
border-radius: 40px;
}
#dice .cover, #dice .inner {
background: #e0e0e0;
box-shadow: none;
}
#dice .cover {
border-radius: 0;
transform: translateZ(0px);
}
#dice .cover.x {
transform: rotateY(90deg);
}
#dice .cover.z {
transform: rotateX(90deg);
}
#dice .front {
transform: translateZ(100px);
}
#dice .front.inner {
transform: translateZ(98px);
}
#dice .back {
transform: rotateX(-180deg) translateZ(100px);
}
#dice .back.inner {
transform: rotateX(-180deg) translateZ(98px);
}
#dice .right {
transform: rotateY(90deg) translateZ(100px);
}
#dice .right.inner {
transform: rotateY(90deg) translateZ(98px);
}
#dice .left {
transform: rotateY(-90deg) translateZ(100px);
}
#dice .left.inner {
transform: rotateY(-90deg) translateZ(98px);
}
#dice .top {
transform: rotateX(90deg) translateZ(100px);
}
#dice .top.inner {
transform: rotateX(90deg) translateZ(98px);
}
#dice .bottom {
transform: rotateX(-90deg) translateZ(100px);
}
#dice .bottom.inner {
transform: rotateX(-90deg) translateZ(98px);
}
.dot {
position:absolute;
width:46px;
height:46px;
border-radius:23px;
background:#444;
box-shadow:inset 5px 0 10px #000;
}
.dot.center {
margin:77px 0 0 77px;
}
.dot.dtop {
margin-top:20px;
}
.dot.dleft {
margin-left:134px;
}
.dot.dright {
margin-left:20px;
}
.dot.dbottom {
margin-top:134px;
}
.dot.center.dleft {
margin:77px 0 0 20px;
}
.dot.center.dright {
margin:77px 0 0 134px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var Drawer = angular.module('Drawer', []);
Drawer.controller('DrawController', function($scope) {
$scope.ITEMS = [
"https://cdn1.iconfinder.com/data/icons/hawcons/32/700451-icon-38-sunglasses-128.png",
"https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/mustache.png",
"http://shops.clubpenguinwiki.info/static/images/shops/thumb/5/59/FunkyClownWig.png/120px-FunkyClownWig.png"
];
$scope.number = '?';
$scope.draw = function () {
$scope.running = setInterval(function () {
$scope.number = Math.floor((Math.random() * 3) + 1);
$scope.$apply();
}, 50);
};
$scope.stop = function () {
clearInterval($scope.running);
$scope.running = null;
$scope.selected = selectItems($scope.number);
};
$scope.reset = function () {
$scope.number = '?';
}
function selectItems(number) {
var selected = [];
for (var i=0; i<number; i++) {
while (true) {
var index = Math.floor(Math.random() * 3);
if (selected.indexOf(index) < 0) {
selected.push(index);
break;
}
}
}
return selected;
}
})
</script>
</head>
<body ng-controller="DrawController">
<div class="container">
<button class="btn btn-primary btn-block" ng-click="draw()" ng-show="!running && number == '?'">Roll</button>
<button class="btn btn-danger btn-block" ng-click="stop()" ng-show="running">Stop</button>
<button class="btn btn-success btn-block" ng-click="reset()" ng-show="!running && number != '?'">Reset</button>
<div id="wrapper" ng-show="running">
<div id="platform">
<div id="dice">
<div class="side front">
<div class="dot center"></div>
</div>
<div class="side front inner"></div>
<div class="side top">
<div class="dot dtop dleft"></div>
<div class="dot dbottom dright"></div>
</div>
<div class="side top inner"></div>
<div class="side right">
<div class="dot dtop dleft"></div>
<div class="dot center"></div>
<div class="dot dbottom dright"></div>
</div>
<div class="side right inner"></div>
<div class="side left">
<div class="dot dtop dleft"></div>
<div class="dot dtop dright"></div>
<div class="dot dbottom dleft"></div>
<div class="dot dbottom dright"></div>
</div>
<div class="side left inner"></div>
<div class="side bottom">
<div class="dot center"></div>
<div class="dot dtop dleft"></div>
<div class="dot dtop dright"></div>
<div class="dot dbottom dleft"></div>
<div class="dot dbottom dright"></div>
</div>
<div class="side bottom inner"></div>
<div class="side back">
<div class="dot dtop dleft"></div>
<div class="dot dtop dright"></div>
<div class="dot dbottom dleft"></div>
<div class="dot dbottom dright"></div>
<div class="dot center dleft"></div>
<div class="dot center dright"></div>
</div>
<div class="side back inner"></div>
<div class="side cover x"></div>
<div class="side cover y"></div>
<div class="side cover z"></div>
</div>
</div>
</div>
<ul ng-show="!running && number != '?'" class="list-unstyled">
<li ng-repeat="idx in selected" class="text-center">
<img src="{{ITEMS[idx]}}" alt="" />
</li>
</ul>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment