crazyrohila/dabblet.css

## dabblet.css
/**
 * CSS3 watch.
 */

#clock {
	background:url(http://www.paulrhayes.com/experiments/clock/images/clockFace.png) no-repeat;
	width: 376px;
	height: 378px;
	border: 10px solid gray;
	border-radius:50%;
	position: relative;
	top: 200px;
	left:35%;
}

input.cbox {display:none;}
.label {
	cursor:pointer;
	position: absolute;
	top: -25%;
	left: 40%;
	color: #008080;
	font-size: 200%;
	padding: 5px 10px;
	border: 2px solid #008080;
	border-radius: 10px;
	box-shadow: 2px 2px 10px gray;
}
.label:after{content:"Start"}
.label:hover {color:white;background:#008080;}

#clock > div {position: absolute;transform-origin: bottom;}

@keyframes rotate {
	from {transform: rotate(0deg);}
	to {transform: rotate(360deg);}
}

#start:checked ~ div {
	animation-name: rotate;
	animation-iteration-count:infinite;
	animation-timing-function:linear;
}

#hour {
	width: 10px;
	height: 120px;
	background: #ff0000;
	top: 67.5px;
	left: 183px;
	animation-duration:43200s;
}

#min {
	width: 6px;
	height: 150px;
	background: #cc0000;
	top: 37.8px;
	left: 185.5px;
	animation-duration: 3600s;
}

#sec {
	width: 2px;
	height: 160px;
	background: #990000;
	top: 29.3px;
	left: 187.5px;
	animation-duration:60s;
}

## dabblet.html
<!-- content to be placed inside <body>…</body> -->
	<div id="clock">
<label for="start" class="label" id="labelstart"></label>
<input type="checkbox" id="start" class="cbox" value="start" />
		<div id="hour"></div>
		<div id="min"></div>
		<div id="sec"></div>
	</div>

## dabblet.js
// alert('Hello world!');

## settings.json
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
	/**
	* CSS3 watch.
	*/

	#clock {
	background:url(http://www.paulrhayes.com/experiments/clock/images/clockFace.png) no-repeat;
	width: 376px;
	height: 378px;
	border: 10px solid gray;
	border-radius:50%;
	position: relative;
	top: 200px;
	left:35%;
	}

	input.cbox {display:none;}
	.label {
	cursor:pointer;
	position: absolute;
	top: -25%;
	left: 40%;
	color: #008080;
	font-size: 200%;
	padding: 5px 10px;
	border: 2px solid #008080;
	border-radius: 10px;
	box-shadow: 2px 2px 10px gray;
	}
	.label:after{content:"Start"}
	.label:hover {color:white;background:#008080;}

	#clock > div {position: absolute;transform-origin: bottom;}

	@keyframes rotate {
	from {transform: rotate(0deg);}
	to {transform: rotate(360deg);}
	}

	#start:checked ~ div {
	animation-name: rotate;
	animation-iteration-count:infinite;
	animation-timing-function:linear;
	}

	#hour {
	width: 10px;
	height: 120px;
	background: #ff0000;
	top: 67.5px;
	left: 183px;
	animation-duration:43200s;
	}

	#min {
	width: 6px;
	height: 150px;
	background: #cc0000;
	top: 37.8px;
	left: 185.5px;
	animation-duration: 3600s;
	}

	#sec {
	width: 2px;
	height: 160px;
	background: #990000;
	top: 29.3px;
	left: 187.5px;
	animation-duration:60s;
	}
	<!-- content to be placed inside <body>…</body> -->
	<div id="clock">
	<label for="start" class="label" id="labelstart"></label>
	<input type="checkbox" id="start" class="cbox" value="start" />
	<div id="hour"></div>
	<div id="min"></div>
	<div id="sec"></div>
	</div>