ragingwind/flipclock.html

## flipclock.html
<!--
 * Copyright (c) 2010 devnight.net. All rights reserved.  Use of this
 * source code is governed by a MIT license that can be found in the
 * LICENSE file.
-->
<!DOCTYPE html>
<html>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
var flipclock = {
	dayofweek: ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"],
	monthofyear: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
	init: function() {
		// set font size, is base on the height of bounds.
		var targetsize = Math.max($(".leaves").height() / 2, $(".leaves").width());
		var fontsize = Math.floor(targetsize * 0.80);
		var font = fontsize + "px 'arial'";
		$(".leave-text").css("font", font);
		$(".leave-text").css("font-weight", 900);

		// relocate the number's position.
		var c = Math.floor(($(".leaves").height() / 2) - fontsize);
		var gap_top = fontsize * 0.05;
		var gap = fontsize * 0.08;
		$(".leave-inner-top").css("top", c + (fontsize / 2) - gap_top);
		$(".leave-inner-bottom").css("top", -(fontsize / 2) - gap);
	},
	flipAnimationStart: function(t, command, delegate) {
		$(t).css("-webkit-animation", "none");
		$(t)[0].addEventListener("webkitAnimationEnd", delegate, false);
		window.setTimeout(function() {
			$(t).css("-webkit-animation", command);
		}, 0);
	},
	flip: function(t, n) {
		var now_top = $(t).find(".now-top");
		var now_bottom = $(t).find(".now-bottom");
		var flip_top = $(t).find(".flip-top");
		var flip_bottom = $(t).find(".flip-bottom");

		// set previous time to flip-top-leave and show the leave for animation.
		$(flip_top).find(".leave-text").html($(now_top).find(".leave-text").html());
		$(flip_top).css("visibility", "visible");
		// set current time to now-leave
		$(now_top).find(".leave-text").html(n);

		var bottomflipAnimationDidStop = function(e) {
			$(flip_bottom)[0].removeEventListener("webkitAnimationEnd", bottomflipAnimationDidStop, false);
			// set current time to now-bottom-leave.
			$(now_bottom).find(".leave-text").html(n);
		};

		var topflipAnimationDidStop = function(e) {
			$(flip_top)[0].removeEventListener("webkitAnimationEnd", topflipAnimationDidStop, false);

			// hidding flip-top-leave when animation is endded.
			$(flip_top).css("visibility", "hidden");

			// WARNINNG. DON'T REMOVE.
			// hidding flip-bottom-leave for blink-proof in chrome.
			// this code creates a afterimage in safari
			$(flip_bottom).css("visibility", "hidden");

			$(flip_bottom).find(".leave-text").html(n);
			flipclock.flipAnimationStart($(flip_bottom), "flip-down 0.5s 0 ease-out", bottomflipAnimationDidStop);
		};

		flipclock.flipAnimationStart($(flip_top), "flip-top 0.5s 0 linear", topflipAnimationDidStop);
	},
	date: function(l, dt) {
		console.log($(l).find(".leave-bottom").find(".datetime"));
		var t = $(l).find(".leave-bottom").find(".datetime").html(dt);
	},
	adjustHours: function(t) {
		return (t > 12) ? (t - 12) : ((t == 0) ? 12 : t) ;
	},
	adjustMinutes: function(t) {
		return (t < 10) ? t = "0" + t : t;
	},
	adjustDigit: function(t) {
		return (t < 10) ? t = "0" + t : t;
	},
	tick: function() {
		var now = new Date();
		var hour = flipclock.adjustHours(now.getHours());
		var min = flipclock.adjustMinutes(now.getMinutes());
		var sec = flipclock.adjustDigit(now.getSeconds());

		if ($("#hh-leaves").find(".now-top").find(".leave-text").text() != hour.toString())  {
			flipclock.flip("#hh-leaves", hour);
			var dt = flipclock.dayofweek[now.getDay()] + ", " + now.getDate() + " " + flipclock.monthofyear[now.getMonth()];
			flipclock.date("#hh-leaves", dt);
		}

		if ($("#mm-leaves").find(".now-top").find(".leave-text").text() != min)
			flipclock.flip("#mm-leaves", min);

		flipclock.flip("#ss-leaves", sec);
	},
	start: function() {
		window.setInterval(flipclock.tick, 1000);
	},
	resize:function() {
		$("#flipclock").css("top", ((window.innerHeight - $("#flipclock").height()) / 2));
		$("#flipclock").css("left", ((window.innerWidth - $("#flipclock").width()) / 2));
	}
};

$(document).ready(function() {
	flipclock.init();
	flipclock.start();
	flipclock.resize();
});

$(window).resize(function() {
	flipclock.resize();
});
</script>
<style>

@-webkit-keyframes flip-top {
	0% {-webkit-transform: rotateX(0deg);}
	50% {-webkit-transform: rotateX(0deg);}
	75% {}
	100% {-webkit-transform: rotateX(-90deg);}
}

@-webkit-keyframes flip-down {
	0% {visibility:visible;-webkit-transform: rotateX(90deg);}
	50% {webkit-transform: rotateX(45deg);}
	75% {}
	100% {-webkit-transform: rotateX(0deg);}
}

.leaves {
	float: left;
	position: relative;
	width:200px;
	height:225px;
	margin:5px 2px 5px 4px;
	border-radius: 12px;
}

.wheel-box {
	float: left;
	position: relative;
}
.wheel-box-inner {
	top:100px;
	width:18px;
	height:35px;
	padding:0px 0px 0px 0px;
}

.wheel-box-outter {
	top:109px;
	width:5px;
	height:20px;
	padding:0px 0px 0px 0px;
}

.wheel {
	position:absolute;
	border-radius:5px;
	width:100%;
	height:100%;
	border:2px solid rgba(40,40,40,0.5);
	background-color: #1f1f1f;
}

.wheel-inner {
	background-image:-webkit-gradient(linear,
		left top, left bottom,
		from(rgba(0,0,0,1)),
		color-stop(0.0, rgba(0,0,0,0)),
		color-stop(0.4, rgba(0,0,0,0)),
		to(rgba(0,0,0,1))),
		-webkit-gradient(radial, 0 0, 10, 10 10, 8,
			from(rgba(0,0,0,1)), to(rgba(100,100,100,0.8)));
}

.wheel-outter {
	background-image:-webkit-gradient(linear,
		left top, left bottom,
		from(rgba(0,0,0,1)),
		color-stop(0.0, rgba(0,0,0,0)),
		color-stop(0.4, rgba(0,0,0,0)),
		to(rgba(0,0,0,1))),
		-webkit-gradient(radial, 0 0, 10, 10 10, 10,
			from(rgba(0,0,0,1)), to(rgba(255,255,255,0.8)));
}

.leave {
	width: 100%;
	height: 50%;
	float: left;
	overflow:hidden;
}

.leave-top {
	position: absolute;
	top: 0px;
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
	background-color: #1f1f1f;
	background-image: -webkit-gradient(linear,
		left top, left bottom,
		from(rgba(0,0,0,1)),
		to(rgba(50,50,50,1)));
	border-top:1px solid #000;
}

.leave-bottom {
	margin-top:0px;
	position: absolute;
	top:52%;
	border-bottom-right-radius:12px;
	border-bottom-left-radius:12px;
	background-color: #1f1f1f;
	background-image: -webkit-gradient(linear,
		left bottom, left top,
		from(rgba(0,0,0,1)),
		to(rgba(50,50,50,1)));
	text-shadow: 0.0em 0.1em 0.1em rgb(191,191,191);
	border-bottom:1px solid #000;
	-webkit-box-shadow:0em -0.1em 0em #888;
}

.now-top {
}

.now-bottom {
}

.flip-top {
	-webkit-transform-origin: bottom;
	z-index:1;
}

.flip-bottom {

	-webkit-transform-origin: top;
	z-index:1;
}

.leave-inner {
	text-align: center;
	position: relative;
}

.leave-text {
	padding:0px;
	margin:0px;
	color:#ffffff;
	-webkit-mask-image: -webkit-gradient(linear,
		left top, left bottom,
		from(rgba(0,0,0,0)),
		color-stop(0.3, rgba(0,0,0,1)),
		color-stop(0.7, rgba(0,0,0,1)),
		to(rgba(0,0,0,0)));
	position:relative;
}

.leave-back {
	position:absolute;
	left:0px;
	width:100%;
}

.leave-back-1 {
	height:103%;
	top:-4px;
	border-radius:12px;
	background-color: #1f1f1f;
	border-bottom:1px solid #999;
	border-top:1px solid #999;
	-webkit-box-shadow:0em 1.0px 0.1em #111;
}

.leave-back-2 {
	height:103%;
	top:-3px;
	border-radius:12px;
	background-color: #1f1f1f;
	border-bottom:1px solid #333;
	border-top:1px solid #333;
	-webkit-box-shadow:0em -1.0px 0.8em #111;
}

.leave-back-3 {
	height:103%;
	top:-1px;
	border-radius:12px;
	background-color: #1f1f1f;
	border-bottom:1px solid #666;
	border-top:1px solid #222;
}

.datetime {
	text-shadow: 0.0em 0.1em 0.0em rgb(200,200,200);
	position:absolute;
	color:#fff;
	z-index:100000;
	top:100%;
	left:10px;
	font:0.8em "arial";
	font-weight:500;
	-webkit-mask-image: -webkit-gradient(linear,
		left top, left bottom,
		from(rgba(0,0,0,0)),
		color-stop(0.3, rgba(0,0,0,1)),
		color-stop(0.7, rgba(0,0,0,1)),
		to(rgba(0,0,0,0)));
}

#flipclock {
	position:absolute;
	border:0px solid lightgray;
}

.doc {
	position:absolute;
	width:100%;
	height:100%;
	background-image:-webkit-gradient(radial,
		50% 50%, 20, 50% 50%, 2000,
		from(rgba(15,15,15,0.9)), color-stop(14%, rgba(0,0,0,1)), to(rgba(5,5,5,1)))
}
</style>
</head>
<body style="padding:0px;margin:0px">
<dic class="doc">
<div id="flipclock">
	<div class="wheel-box wheel-box-outter"><div class="wheel wheel-outter"></div></div>
	<div id="hh-leaves" class="leaves">
		<div class="leave-back leave-back-1"></div>
		<div class="leave-back leave-back-2"></div>
		<div class="leave-back leave-back-3"></div>
		<div class="leave leave-top now-top"><div class="leave-inner leave-inner-top"><span class="leave-text"></span></div></div>
		<div class="leave leave-bottom now-bottom"><div class="leave-inner leave-inner-bottom"><span class="leave-text"></span><div class="datetime"></div></div></div>
		<div class="leave leave-top flip-top"><div class="leave-inner leave-inner-top"><span class="leave-text"></span></div></div>
		<div class="leave leave-bottom flip-bottom"><div class="leave-inner leave-inner-bottom"><span class="leave-text"></span></div></div>
	</div>
	<div class="wheel-box wheel-box-inner"><div class="wheel wheel-inner"></div></div>
	<div id="mm-leaves" class="leaves">
		<div class="leave-back leave-back-1"></div>
		<div class="leave-back leave-back-2"></div>
		<div class="leave-back leave-back-3"></div>
		<div class="leave leave-top now-top"><div class="leave-inner leave-inner-top"><span class="leave-text"></span></div></div>
		<div class="leave leave-bottom now-bottom"><div class="leave-inner leave-inner-bottom"><span class="leave-text"></span></div></div>
		<div class="leave leave-top flip-top"><div class="leave-inner leave-inner-top"><span class="leave-text"></span></div></div>
		<div class="leave leave-bottom flip-bottom"><div class="leave-inner leave-inner-bottom"><span class="leave-text"></span></div></div>
	</div>
	<div class="wheel-box wheel-box-inner"><div class="wheel wheel-inner"></div></div>
	<div id="ss-leaves" class="leaves">
		<div class="leave-back leave-back-1"></div>
		<div class="leave-back leave-back-2"></div>
		<div class="leave-back leave-back-3"></div>
		<div class="leave leave-top now-top"><div class="leave-inner leave-inner-top"><span class="leave-text"></span></div></div>
		<div class="leave leave-bottom now-bottom"><div class="leave-inner leave-inner-bottom"><span class="leave-text"></span></div></div>
		<div class="leave leave-top flip-top"><div class="leave-inner leave-inner-top"><span class="leave-text"></span></div></div>
		<div class="leave leave-bottom flip-bottom"><div class="leave-inner leave-inner-bottom"><span class="leave-text"></span></div></div>
	</div>
	<div class="wheel-box wheel-box-outter"><div class="wheel wheel-outter"></div></div>
</div>
</div>
</body>
</html>
	<!--
	* Copyright (c) 2010 devnight.net. All rights reserved. Use of this
	* source code is governed by a MIT license that can be found in the
	* LICENSE file.
	-->
	<!DOCTYPE html>
	<html>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<head>
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<script>
	var flipclock = {
	dayofweek: ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"],
	monthofyear: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
	init: function() {
	// set font size, is base on the height of bounds.
	var targetsize = Math.max($(".leaves").height() / 2, $(".leaves").width());
	var fontsize = Math.floor(targetsize * 0.80);
	var font = fontsize + "px 'arial'";
	$(".leave-text").css("font", font);
	$(".leave-text").css("font-weight", 900);

	// relocate the number's position.
	var c = Math.floor(($(".leaves").height() / 2) - fontsize);
	var gap_top = fontsize * 0.05;
	var gap = fontsize * 0.08;
	$(".leave-inner-top").css("top", c + (fontsize / 2) - gap_top);
	$(".leave-inner-bottom").css("top", -(fontsize / 2) - gap);
	},
	flipAnimationStart: function(t, command, delegate) {
	$(t).css("-webkit-animation", "none");
	$(t)[0].addEventListener("webkitAnimationEnd", delegate, false);
	window.setTimeout(function() {
	$(t).css("-webkit-animation", command);
	}, 0);
	},
	flip: function(t, n) {
	var now_top = $(t).find(".now-top");
	var now_bottom = $(t).find(".now-bottom");
	var flip_top = $(t).find(".flip-top");
	var flip_bottom = $(t).find(".flip-bottom");

	// set previous time to flip-top-leave and show the leave for animation.
	$(flip_top).find(".leave-text").html($(now_top).find(".leave-text").html());
	$(flip_top).css("visibility", "visible");
	// set current time to now-leave
	$(now_top).find(".leave-text").html(n);

	var bottomflipAnimationDidStop = function(e) {
	$(flip_bottom)[0].removeEventListener("webkitAnimationEnd", bottomflipAnimationDidStop, false);
	// set current time to now-bottom-leave.
	$(now_bottom).find(".leave-text").html(n);
	};

	var topflipAnimationDidStop = function(e) {
	$(flip_top)[0].removeEventListener("webkitAnimationEnd", topflipAnimationDidStop, false);

	// hidding flip-top-leave when animation is endded.
	$(flip_top).css("visibility", "hidden");

	// WARNINNG. DON'T REMOVE.
	// hidding flip-bottom-leave for blink-proof in chrome.
	// this code creates a afterimage in safari
	$(flip_bottom).css("visibility", "hidden");

	$(flip_bottom).find(".leave-text").html(n);
	flipclock.flipAnimationStart($(flip_bottom), "flip-down 0.5s 0 ease-out", bottomflipAnimationDidStop);
	};

	flipclock.flipAnimationStart($(flip_top), "flip-top 0.5s 0 linear", topflipAnimationDidStop);
	},
	date: function(l, dt) {
	console.log($(l).find(".leave-bottom").find(".datetime"));
	var t = $(l).find(".leave-bottom").find(".datetime").html(dt);
	},
	adjustHours: function(t) {
	return (t > 12) ? (t - 12) : ((t == 0) ? 12 : t) ;
	},
	adjustMinutes: function(t) {
	return (t < 10) ? t = "0" + t : t;
	},
	adjustDigit: function(t) {
	return (t < 10) ? t = "0" + t : t;
	},
	tick: function() {
	var now = new Date();
	var hour = flipclock.adjustHours(now.getHours());
	var min = flipclock.adjustMinutes(now.getMinutes());
	var sec = flipclock.adjustDigit(now.getSeconds());

	if ($("#hh-leaves").find(".now-top").find(".leave-text").text() != hour.toString()) {
	flipclock.flip("#hh-leaves", hour);
	var dt = flipclock.dayofweek[now.getDay()] + ", " + now.getDate() + " " + flipclock.monthofyear[now.getMonth()];
	flipclock.date("#hh-leaves", dt);
	}

	if ($("#mm-leaves").find(".now-top").find(".leave-text").text() != min)
	flipclock.flip("#mm-leaves", min);

	flipclock.flip("#ss-leaves", sec);
	},
	start: function() {
	window.setInterval(flipclock.tick, 1000);
	},
	resize:function() {
	$("#flipclock").css("top", ((window.innerHeight - $("#flipclock").height()) / 2));
	$("#flipclock").css("left", ((window.innerWidth - $("#flipclock").width()) / 2));
	}
	};

	$(document).ready(function() {
	flipclock.init();
	flipclock.start();
	flipclock.resize();
	});

	$(window).resize(function() {
	flipclock.resize();
	});
	</script>
	<style>

	@-webkit-keyframes flip-top {
	0% {-webkit-transform: rotateX(0deg);}
	50% {-webkit-transform: rotateX(0deg);}
	75% {}
	100% {-webkit-transform: rotateX(-90deg);}
	}

	@-webkit-keyframes flip-down {
	0% {visibility:visible;-webkit-transform: rotateX(90deg);}
	50% {webkit-transform: rotateX(45deg);}
	75% {}
	100% {-webkit-transform: rotateX(0deg);}
	}

	.leaves {
	float: left;
	position: relative;
	width:200px;
	height:225px;
	margin:5px 2px 5px 4px;
	border-radius: 12px;
	}

	.wheel-box {
	float: left;
	position: relative;
	}
	.wheel-box-inner {
	top:100px;
	width:18px;
	height:35px;
	padding:0px 0px 0px 0px;
	}

	.wheel-box-outter {
	top:109px;
	width:5px;
	height:20px;
	padding:0px 0px 0px 0px;
	}

	.wheel {
	position:absolute;
	border-radius:5px;
	width:100%;
	height:100%;
	border:2px solid rgba(40,40,40,0.5);
	background-color: #1f1f1f;
	}

	.wheel-inner {
	background-image:-webkit-gradient(linear,
	left top, left bottom,
	from(rgba(0,0,0,1)),
	color-stop(0.0, rgba(0,0,0,0)),
	color-stop(0.4, rgba(0,0,0,0)),
	to(rgba(0,0,0,1))),
	-webkit-gradient(radial, 0 0, 10, 10 10, 8,
	from(rgba(0,0,0,1)), to(rgba(100,100,100,0.8)));
	}

	.wheel-outter {
	background-image:-webkit-gradient(linear,
	left top, left bottom,
	from(rgba(0,0,0,1)),
	color-stop(0.0, rgba(0,0,0,0)),
	color-stop(0.4, rgba(0,0,0,0)),
	to(rgba(0,0,0,1))),
	-webkit-gradient(radial, 0 0, 10, 10 10, 10,
	from(rgba(0,0,0,1)), to(rgba(255,255,255,0.8)));
	}

	.leave {
	width: 100%;
	height: 50%;
	float: left;
	overflow:hidden;
	}

	.leave-top {
	position: absolute;
	top: 0px;
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
	background-color: #1f1f1f;
	background-image: -webkit-gradient(linear,
	left top, left bottom,
	from(rgba(0,0,0,1)),
	to(rgba(50,50,50,1)));
	border-top:1px solid #000;
	}

	.leave-bottom {
	margin-top:0px;
	position: absolute;
	top:52%;
	border-bottom-right-radius:12px;
	border-bottom-left-radius:12px;
	background-color: #1f1f1f;
	background-image: -webkit-gradient(linear,
	left bottom, left top,
	from(rgba(0,0,0,1)),
	to(rgba(50,50,50,1)));
	text-shadow: 0.0em 0.1em 0.1em rgb(191,191,191);
	border-bottom:1px solid #000;
	-webkit-box-shadow:0em -0.1em 0em #888;
	}

	.now-top {
	}

	.now-bottom {
	}

	.flip-top {
	-webkit-transform-origin: bottom;
	z-index:1;
	}

	.flip-bottom {

	-webkit-transform-origin: top;
	z-index:1;
	}

	.leave-inner {
	text-align: center;
	position: relative;
	}

	.leave-text {
	padding:0px;
	margin:0px;
	color:#ffffff;
	-webkit-mask-image: -webkit-gradient(linear,
	left top, left bottom,
	from(rgba(0,0,0,0)),
	color-stop(0.3, rgba(0,0,0,1)),
	color-stop(0.7, rgba(0,0,0,1)),
	to(rgba(0,0,0,0)));
	position:relative;
	}

	.leave-back {
	position:absolute;
	left:0px;
	width:100%;
	}

	.leave-back-1 {
	height:103%;
	top:-4px;
	border-radius:12px;
	background-color: #1f1f1f;
	border-bottom:1px solid #999;
	border-top:1px solid #999;
	-webkit-box-shadow:0em 1.0px 0.1em #111;
	}

	.leave-back-2 {
	height:103%;
	top:-3px;
	border-radius:12px;
	background-color: #1f1f1f;
	border-bottom:1px solid #333;
	border-top:1px solid #333;
	-webkit-box-shadow:0em -1.0px 0.8em #111;
	}

	.leave-back-3 {
	height:103%;
	top:-1px;
	border-radius:12px;
	background-color: #1f1f1f;
	border-bottom:1px solid #666;
	border-top:1px solid #222;
	}

	.datetime {
	text-shadow: 0.0em 0.1em 0.0em rgb(200,200,200);
	position:absolute;
	color:#fff;
	z-index:100000;
	top:100%;
	left:10px;
	font:0.8em "arial";
	font-weight:500;
	-webkit-mask-image: -webkit-gradient(linear,
	left top, left bottom,
	from(rgba(0,0,0,0)),
	color-stop(0.3, rgba(0,0,0,1)),
	color-stop(0.7, rgba(0,0,0,1)),
	to(rgba(0,0,0,0)));
	}

	#flipclock {
	position:absolute;
	border:0px solid lightgray;
	}

	.doc {
	position:absolute;
	width:100%;
	height:100%;
	background-image:-webkit-gradient(radial,
	50% 50%, 20, 50% 50%, 2000,
	from(rgba(15,15,15,0.9)), color-stop(14%, rgba(0,0,0,1)), to(rgba(5,5,5,1)))
	}
	</style>
	</head>
	<body style="padding:0px;margin:0px">
	<dic class="doc">
	<div id="flipclock">
	<div class="wheel-box wheel-box-outter"><div class="wheel wheel-outter"></div></div>
	<div id="hh-leaves" class="leaves">
	<div class="leave-back leave-back-1"></div>
	<div class="leave-back leave-back-2"></div>
	<div class="leave-back leave-back-3"></div>
	<div class="leave leave-top now-top"><div class="leave-inner leave-inner-top"><span class="leave-text"></span></div></div>
	<div class="leave leave-bottom now-bottom"><div class="leave-inner leave-inner-bottom"><span class="leave-text"></span><div class="datetime"></div></div></div>
	<div class="leave leave-top flip-top"><div class="leave-inner leave-inner-top"><span class="leave-text"></span></div></div>
	<div class="leave leave-bottom flip-bottom"><div class="leave-inner leave-inner-bottom"><span class="leave-text"></span></div></div>
	</div>
	<div class="wheel-box wheel-box-inner"><div class="wheel wheel-inner"></div></div>
	<div id="mm-leaves" class="leaves">
	<div class="leave-back leave-back-1"></div>
	<div class="leave-back leave-back-2"></div>
	<div class="leave-back leave-back-3"></div>
	<div class="leave leave-top now-top"><div class="leave-inner leave-inner-top"><span class="leave-text"></span></div></div>
	<div class="leave leave-bottom now-bottom"><div class="leave-inner leave-inner-bottom"><span class="leave-text"></span></div></div>
	<div class="leave leave-top flip-top"><div class="leave-inner leave-inner-top"><span class="leave-text"></span></div></div>
	<div class="leave leave-bottom flip-bottom"><div class="leave-inner leave-inner-bottom"><span class="leave-text"></span></div></div>
	</div>
	<div class="wheel-box wheel-box-inner"><div class="wheel wheel-inner"></div></div>
	<div id="ss-leaves" class="leaves">
	<div class="leave-back leave-back-1"></div>
	<div class="leave-back leave-back-2"></div>
	<div class="leave-back leave-back-3"></div>
	<div class="leave leave-top now-top"><div class="leave-inner leave-inner-top"><span class="leave-text"></span></div></div>
	<div class="leave leave-bottom now-bottom"><div class="leave-inner leave-inner-bottom"><span class="leave-text"></span></div></div>
	<div class="leave leave-top flip-top"><div class="leave-inner leave-inner-top"><span class="leave-text"></span></div></div>
	<div class="leave leave-bottom flip-bottom"><div class="leave-inner leave-inner-bottom"><span class="leave-text"></span></div></div>
	</div>
	<div class="wheel-box wheel-box-outter"><div class="wheel wheel-outter"></div></div>
	</div>
	</div>
	</body>
	</html>