|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta charset=utf-8> |
|
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1"> |
|
<title></title> |
|
<link rel="stylesheet" href="index.css"> |
|
<style> |
|
@font-face { |
|
font-family: 'pacfontregular'; |
|
src: url('pac-font-webfont.eot'); |
|
src: url('pac-font-webfont.eot?#iefix') format('embedded-opentype'), |
|
url('pac-font-webfont.woff') format('woff'), |
|
url('pac-font-webfont.ttf') format('truetype'), |
|
url('pac-font-webfont.svg#pacfontregular') format('svg'); |
|
font-weight: normal; |
|
font-style: normal; |
|
|
|
} |
|
body {width:320px; margin:0 auto;background:#1919A9; text-align:center; color:white; text-shadow:1px 1px 1px black; font-size:200%;} |
|
|
|
.pacss.big:after, |
|
.pacss:before {background:#FFFF00;} |
|
|
|
.dots:before, |
|
.dots:after {content:"∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ";} |
|
|
|
h1 {font-family:"pacfontregular", sans-serif; margin-bottom:0;} |
|
.tagline {font-size:50%; font-family:"Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;} |
|
|
|
.tagline {overflow:hidden; margin-top:.5em;} |
|
.tagline em {position:relative;} |
|
.tagline em:before, |
|
.tagline em:after {content:"";display:block;width:100%;border-top:1px solid; position:absolute; top:50%;left:100%;} |
|
.tagline em:after {left:auto;right:100%;} |
|
</style> |
|
</head> |
|
<body> |
|
|
|
<h1>PAC0SS</h1> |
|
<p class="tagline"><em>Pie charts with CSS</em></p> |
|
|
|
<p class="dots"> |
|
<span id="pie1" class="pie"></span> |
|
</p> |
|
|
|
|
|
<input type="range" name="val" value="270" min="0" max="360"> |
|
|
|
<p>see the <a href="minimal.html">minimal example</a> and the <a href="https://gist.github.com/abernier/4961058#file-README-md">README</a></p> |
|
|
|
<script src="http://code.jquery.com/jquery-latest.js"></script> |
|
<script src="index.js"></script> |
|
<script> |
|
var $input = $('input[name="val"]'); |
|
|
|
function midrotate(el, val) { |
|
$(el).css({transform: 'rotate(' + (-val/2 - 90) + 'deg)'}); |
|
} |
|
|
|
var mypie1 = new Pacss('#pie1', {val: $input.val()}); |
|
midrotate(mypie1.el, $input.val()); |
|
|
|
$input.change(function (e) { |
|
var val = $input.val(); |
|
|
|
mypie1.val = val; |
|
mypie1.paint(); |
|
|
|
midrotate(mypie1.el, val); |
|
}); |
|
</script> |
|
|
|
<script> |
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ |
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), |
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) |
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga'); |
|
|
|
ga('create', 'UA-13126287-1', 'abernier.name'); |
|
ga('send', 'pageview'); |
|
</script> |
|
|
|
</body> |
|
</html> |
http://bl.ocks.org/abernier/4961058