-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
60 lines (60 loc) · 9.87 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html lang="en">
<!-- manifest="./cache.manifest" -->
<head>
<meta charset="utf-8" />
<title>Sticky Thing</title>
<meta name="description" content="Interactive HTML5 experiment for desktop and mobiles" />
<meta name="keywords" content="experiment,html5,javascript,canvas,css3,interactive,physics,demo,mobile,web-based,iphone,android" />
<meta name="viewport" content="height=device-height,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon.png" />
<link rel="apple-touch-startup-image" href="img/apple-touch-startup-image.png" />
<style>
.sliderBoard{position :absolute;left :0px;top :0px;width :242px;color :#808080;font-size :12px;-webkit-user-select:none;-webkit-font-smoothing:antialiased}.sliderBoardTitleBar{width :220px;height :18px;top :0px;left :0px;padding-top :10px;padding-left:22px;font-weight :bold;background-color:#f00;visibility:hidden}.sliderBoardBG{position:absolute;width: 100%;height:106%;-webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px;background-color:#F2F2F2;opacity:0.92;background-image:-moz-linear-gradient(100% 100% 90deg,#EBEBEB,#F7F7F7);background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(#F7F7F7),to(#EBEBEB))}.sliderItem{margin-left :20px;width :10px;height :44px;display :block;float :left;cursor :default;clear :both}.sliderContainer{position :absolute;margin-top :16px}.sliderLabel{position :absolute}.sliderOutput{position:absolute;margin:0;padding:0;left: 186px;top: 1px;width: 28px}.sliderBoardCloseButton{position :absolute;top :9px;color :#666;font-size :12px;cursor :pointer;padding :0;margin :0;text-align :center;opacity :1;-webkit-user-select:none}.sliderBoardCloseButtonHit{position :absolute;width :34px;height :34px;left :-3px;top :-8px; background-color:#00F;opacity:0.0}.sliderBoardCloseButtonBG{position :absolute;width :27px;height :27px;top :-0px;left :-1px;-webkit-border-radius:16px;background-color:#CDCDCD;margin:0;padding:0;display:none}.sliderBoardCloseButtonIcon{position :absolute;font-weight :normal;text-shadow :0px 1px 1px #FFF;margin :0;padding:0px 0px;background-color:rgba(0,0,0,0);-webkit-border-radius:20px}.sliderBoardCloseButton:hover{opacity:0.65;-webkit-transition:opacity,0.2s ease-out;*/}.sliderThumb{position :absolute;width :16px;height :16px;-moz-border-radius :8px;-webkit-border-radius:8px;border-radius :8px;background-color :#484848;background-image :-moz-linear-gradient(100% 100% 90deg,#2D2D2D,#828282);background-image :-webkit-gradient(linear,0% 0%,0% 100%,from(#828282),to(#2D2D2D));opacity :1;-webkit-transition-property:opacity;-webkit-transition-duration:0.25s}.sliderThumbActive{position :absolute;width :16px;height :16px;-moz-border-radius :8px;-webkit-border-radius:8px;border-radius :8px;background-color :#393939;background-image :-moz-linear-gradient(100% 100% 90deg,#000,#A6A6A6);background-image :-webkit-gradient(linear,0% 0%,0% 100%,from(#A6A6A6),to(#000));opacity :1}.sliderThumbOver{position :absolute;width :16px;height :16px;-moz-border-radius :8px;-webkit-border-radius:8px;border-radius :8px;background-color :#484848;background-image :-moz-linear-gradient(100% 100% 90deg,#2D2D2D,#828282);background-image :-webkit-gradient(linear,0% 0%,0% 100%,from(#828282),to(#2D2D2D));opacity :0.85;-webkit-transition-property:opacity;-webkit-transition-duration:0.2s}.sliderThumbHit{position :absolute;background-color :#0F0;width :25px;height :25px;left :-4px;top :-4px;opacity :0.0}.sliderTrack{position :absolute;top :0px;width :175px;height :16px;-moz-border-radius :8px;-webkit-border-radius:8px;border-radius :8px;opacity :0.9;background-color :#CECECE;background-image :-moz-linear-gradient(100% 100% 90deg,#DCDCDC,#BBB);background-image :-webkit-gradient(linear,0% 0%,0% 100%,from(#BABABA),to(#DCDCDC));-webkit-transition-property:opacity;-webkit-transition-duration:0.25s}.sliderTrackActive{position :absolute;top :0px;width :175px;height :16px;-moz-border-radius :8px;-webkit-border-radius:8px;border-radius :8px;opacity :0.7;background-color :#CCC;background-image :-moz-linear-gradient(100% 100% 90deg,#DCDCDC,#BABABA);background-image :-webkit-gradient(linear,0% 0%,0% 100%,from(#BABABA),to(#DCDCDC));-webkit-transition-property:opacity;-webkit-transition-duration:0.175s; -moz-transition-property:opacity; -moz-transition-duration:0.175s; transition-property:opacity; transition-duration:0.175s}@media screen and (max-device-width:1024px){.sliderBoard{font-size:16px;color :#545454}.sliderBoardBG{-webkit-border-radius:12px;background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(#F6F6F6),to(#EBEBEB))}.sliderItem{height:58px}.sliderContainer{margin-top:22px}.sliderBoardCloseButton{font-size :23px;top :5px}.sliderBoardCloseButtonHit{width :54px;height :54px;left :-18px;top :-14px}.sliderBoardCloseButton:hover{opacity:1}.sliderTrack{height :24px;-webkit-border-radius:12px;opacity :0.6;background-image :-webkit-gradient(linear,0% 0%,0% 100%,from(#9d9d9d),to(#CFCFCF))}.sliderTrackActive{height :24px;-webkit-border-radius:12px;opacity :1;background-image :-webkit-gradient(linear,0% 0%,0% 100%,from(#9d9d9d),to(#CDCDCD))}.sliderThumb{width :24px;height :24px;-webkit-border-radius:12px;background-image :-webkit-gradient(linear,0% 0%,0% 100%,from(#696969),to(#202020))}.sliderThumbActive{width :24px;height :24px;-webkit-border-radius:12px;background-image :-webkit-gradient(linear,0% 0%,0% 100%,from(#777),to(#000))}.sliderThumbHit{width :74px;height :60px;top :-17px;left :-23px}}@media screen and (max-height:320px){.sliderBoard{font-size:16px}.sliderItem{height:50px}.sliderContainer{margin-top:21px}}#iconBar{display :none;opacity :0;position:absolute;width :200px;height :44px;left :0px;top :0px}.ico-btn{margin:18px 22px 0px -4px;position:relative;width:27px;height:27px;float:right;-webkit-tap-highlight-color:rgba(255,255,255,0);background-color:#444;-webkit-border-radius:25px}.ico-hit{position:absolute;left:-16px;top:-16px;width:56px;height:56px;background-color:#0F0;opacity:0.0}.ico-ico-info{position :absolute;overflow :hidden;width :27px;height :27px}.ico-ico-gears{position :absolute;overflow :hidden;width :27px;height :27px}#aboutOverlay{display:none;opacity:0;position:absolute;top:0px;left:0px;width:100%;height:100%;background-color:rgba(255,255,255,0.75);text-align:center;z-index:100}#aboutOverlayInner{-webkit-font-smoothing:antialiased;top:50%;position:absolute;width:100%;font-size:28px;font-weight:bold;letter-spacing:-2px}#aboutLabLink{padding:2px 3px;-webkit-tap-highlight-color:rgba(255,0,153,0)}#aboutOverlayInner a{color:#262626;background-color:rgba(255,0,153,0)}#aboutOverlayInner a:focus{color:#262626;background-color:rgba(255,0,153,1)}#aboutOverlayInner a:hover{color:#262626;background-color:rgba(255,0,153,1)}#aboutOverlayInner a:active{color:#262626;background-color:rgba(255,0,153,1)}body{margin: 0;padding: 0;overflow:hidden;background-color:#FFF;font-family: Arial,Helvetiva,sans-serif;-webkit-tap-highlight-color:#F09}a{text-decoration:none}#navContainer a{color:#444;-webkit-transition-property:color;-webkit-transition-duration:0.25s}#navContainer a:hover{color:#F09;-webkit-transition-property:color;-webkit-transition-duration:0.15s}#navContainer{position:absolute;width: 100%;left: 0px;top: 0px;display: none}#nav{font-size: 0.75em;color: #777;text-align: right;margin-top: 10px;margin-right:80px}#bigCanvas{position:absolute;left: 0px;top: 0px}#stickyContainer{position:absolute;left: 0px;top: 0px}.pipe{font-size:1.2em;color: #CCC;margin: 0px 6px}.slashWithSpace{padding:0px 1px}#out{position: absolute;margin: 0px 0px;font-family: monospace;font-size: 11px;color: #900;border: 1px solid #FFF;width: 100%;height: 100%;display: none}@media screen and (max-device-width:1024px){body{font-family:Helvetica,Arial,sans}#out{font-size: 9px}}
</style>
</head>
<body>
<div id="out"> </div>
<canvas id="bigCanvas">Throw it around and see if it sticks.<br /><br />You need a newer browser.<br />In the meantime please try the <a href="http://spielzeugz.de/lab/sticky-thing/flash">Flash version</a>.</canvas>
<div id="iconBar">
<div class="ico-btn" id="infoBTN">
<div class="ico-hit"></div>
<div class="ico-ico-info">
<img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAA2CAMAAAC7m5rvAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF////////VXz1bAAAAAJ0Uk5T/wDltzBKAAAAT0lEQVR42uzUuw0AMAhDwZf9l44yQEBGKQIy/RWYD6tUmJn1YZySGQTuF1bsbeq4IczxwqixdGwjmBoJfZi6kwxm2RFky4VfkJnZM7YFGACj+QrIDs75qgAAAABJRU5ErkJggg=="
width="27"
height="27"
/>
</div>
</div>
<div class="ico-btn" id="optionsBTN">
<div class="ico-hit"></div>
<div class="ico-ico-gears">
<img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAA2CAMAAAC7m5rvAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAxQTFRF/v7+/f39////////uwDIMAAAAAR0Uk5T////AEAqqfQAAABvSURBVHja7NVLCsAgDATQSbz/nUsoUmxjSSyKhZmNijyQ+EMZCsjIyO5RS9OJM73aFKvZj2knmzMgx2zWiARYaVdlBE410au+M5jA1GMa3+7nKMLOuqeYYGy7ZdHh+sU1/fwE5R88fh1kZO85BBgAUbsgdHGHgrIAAAAASUVORK5CYII="
width="27"
height="27"
/>
</div>
</div>
</div>
<div id="stickyContainer"></div>
<div id="navContainer">
<div id="nav">
<a href="javascript:void(0)" id="options">options</a>
<span class="pipe" id="navPipe">|</span>
<span id="homeLink"
><a href="http://www.spielzeugz.de/lab">spielzeugz.de<span class="slashWithSpace">/</span>lab</a></span
>
</div>
</div>
<div id="aboutOverlay">
<div id="aboutOverlayInner">
<a href="http://www.spielzeugz.de/lab" id="aboutLabLink">spielzeugz.de<span class="slashWithSpace">/</span>lab</a>
</div>
</div>
<script src="index.js"></script>
</body>
</html>