Pinky - 1 of 111001100110110111

Developer
Tim Pietrusky
Size
8,739 Kb
Views
34,408
  1. Pinky - 1 of 111001100110110111 Previews
  2. Pinky - 1 of 111001100110110111 HTML Codes
  3. Pinky - 1 of 111001100110110111 CSS Codes
  4. Pinky - 1 of 111001100110110111 JS Codes

How do I make an pinky - 1 of 111001100110110111?

Pinky is a binary clock based on CSS3, HTML and oldschool JavaScript.https://github.com/TimPietrusky/Pinky. What is a pinky - 1 of 111001100110110111? How do you make a pinky - 1 of 111001100110110111? This script and codes were developed by Tim Pietrusky on 06 September 2022, Tuesday.

Pinky - 1 of 111001100110110111 Previews
IQ Test

Pinky - 1 of 111001100110110111 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pinky - 1 of 111001100110110111</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ /* * Pinky - 1 of 111001100110110111 * * Pinky is a binary clock based on CSS3, HTML and oldschool JavaScript. * https://github.com/TimPietrusky/Pinky * * 2012 by tim-pietrusky.de */
@import url(https://fonts.googleapis.com/css?family=Revalia);
* { /* http://paulirish.com/2012/box-sizing-border-box-ftw/ */ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body { height:100%; margin:0; padding:0; background:#000; font-family: 'Revalia', cursive; overflow:hidden;
}
.imabackground { position:fixed; top:0; left:0; width:100%; height:100%; background: url(https://github.com/TimPietrusky/Pinky/raw/master/img/bg_171717.png); opacity:.6;
}
.left, .right { position:fixed; z-index:1337;
}
.left { left:10px; bottom:10px;
}
.right { right: 10px; top: 10px;
}
.btn { background:#ededed; border:1px solid #dcdcdc; color:#777777; font-family:arial; font-size:18px; font-weight:bold; padding:3px 15px; text-decoration:none; text-shadow:1px 1px 0px #ffffff; opacity:.1; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff; -moz-box-shadow:inset 0px 1px 0px 0px #ffffff; box-shadow:inset 0px 1px 0px 0px #ffffff; -webkit-transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -ms-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; transition:all .4s ease-in-out;
}
.btn:hover {opacity:1;}
.btn[disabled]:hover {opacity:.1;}
.btn:active { position:relative; top:1px; opacity:1;
}
.center { width:300px; margin:0 auto;
}
#binary { height:100%; width: 300px; margin-left:-25px; z-index:2; -webkit-transition: all .7s ease-in; -moz-transition: all .7s ease-in; -ms-transition: all .7s ease-in; -o-transition: all .7s ease-in; transition: all .7s ease-in; -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; -ms-transform-origin: 50% 0; -o-transform-origin: 50% 0; transform-origin: 50% 0;
}
#binary.rotated { margin:60% 0 -80px -50px; -webkit-transform-origin: 50% 300px; -moz-transform-origin: 50% 300px; -ms-transform-origin: 50% 300px; -o-transform-origin: 50% 300px; transform-origin: 50% 300px; -webkit-transform: rotate(90deg) scale(1.65); -moz-transform: rotate(90deg) scale(1.65); -ms-transform: rotate(90deg) scale(1.65); -o-transform: rotate(90deg) scale(1.65); transform: rotate(90deg) scale(1.65);
}
.digital { color:rgb(0,0,0); font-size:2.4em; font-family:sans; margin:20px 55px 0 25px; text-shadow:0 0 45px rgba(255,255,255,.6); -webkit-animation: digital 4s infinite; -moz-animation: digital 4s infinite; -ms-animation: digital 4s infinite; -o-animation: digital 4s infinite;
}
.hours, .minutes, .seconds { float:left; margin-top:50px; margin-left:50px; width:50px; height:400px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d;
}
.hours { margin-top:125px;
}
.hours div, .minutes div, .seconds div { background:rgba(204,204,204,.5); border:5px solid #333; opacity:.85; display:block; height:25px; width:25px; margin-bottom:50px; -webkit-perspective: 300; -moz-perspective: 300; -ms-perspective: 300; perspective: 300; -webkit-transition: all .5s ease-in; -moz-transition: all .5s ease-in; -ms-transition: all .5s ease-in; -o-transition: all .5s ease-in; transition: all .5s ease-in; -webkit-box-shadow:10px 10px 15px -5px rgba(9, 9, 9, .3); -moz-box-shadow:10px 10px 15px -5px rgba(9, 9, 9, .3); box-shadow:10px 10px 15px -5px rgba(9, 9, 9, .3); -webkit-transform:rotateZ(90deg); -moz-transform:rotateZ(90deg); -o-transform:rotateZ(90deg); transform:rotateZ(90deg);
}
.hours .true, .minutes .true, .seconds .true { height:50px; width:50px; border-radius:50px; margin-left:-12px; margin-bottom:25px; -webkit-perspective: 800; -moz-perspective: 800; -ms-perspective: 800; perspective: 800; -webkit-transform:rotateZ(-90deg); -moz-transform:rotateZ(-90deg); -o-transform:rotateZ(-90deg); transform:rotateZ(-90deg); -webkit-animation: resize .4s 1 ease-in; -moz-animation: resize .4s 1 ease-in; -ms-animation: resize .4s 1 ease-in; -o-animation: resize .4s 1 ease-in;
/* -webkit-filter: blur(1px);*/
}
.hours .true { background:rgba(63, 63, 255, .8); border:5px solid rgba(63, 63, 255, 1); -webkit-box-shadow:0 0 25px rgba(63, 63, 255, .8); -moz-box-shadow:0 0 25px rgba(63, 63, 255, .8); box-shadow:0 0 25px rgba(63, 63, 255, .8); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(63,63,255,1)), color-stop(100%,rgba(63,63,255,0.8))); background: -webkit-radial-gradient(center, ellipse cover, rgba(63,63,255,1) 0%,rgba(63,63,255,0.8) 100%);
}
.minutes .true { background:rgba(63, 255, 63, .8); border:5px solid rgba(63, 255, 63, 1); -webkit-box-shadow:0 0 25px rgba(63, 255, 63, .8); -moz-box-shadow:0 0 25px rgba(63, 255, 63, .8); box-shadow:0 0 25px rgba(63, 255, 63, .8); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(63,255,63,1)), color-stop(100%,rgba(63,255,63,0.8))); background: -webkit-radial-gradient(center, ellipse cover, rgba(63,255,63,1) 0%,rgba(63,255,63,0.8) 100%);
}
.seconds .true { background:rgba(255, 63, 63, .8); border:5px solid rgba(255, 63, 63, 1); -webkit-box-shadow:0 0 25px rgba(255, 100, 100, .8); -moz-box-shadow:0 0 25px rgba(255, 100, 100, .8); box-shadow:0 0 25px rgba(255, 100, 100, .8); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,63,63,1)), color-stop(100%,rgba(255,63,63,0.8))); background: -webkit-radial-gradient(center, ellipse cover, rgba(255,63,63,1) 0%,rgba(255,63,63,0.8) 100%);
}
#active { float:left; width:380px; height:85px; font-size:45px; text-align:center; padding:20px 5x; opacity:.4; margin:-25px 0 0 -26px; -webkit-perspective: 400; -moz-perspective: 400; -ms-perspective: 400; perspective: 400; -webkit-transition: all .5s ease-in, color .2s ease-in; -moz-transition: all .5s ease-in, color .2s ease-in; -ms-transition: all .5s ease-in, color .2s ease-in; -o-transition: all .5s ease-in, color .2s ease-in; transition: all .5s ease-in, color .2s ease-in; -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; -ms-transform-origin: 50% 0; -o-transform-origin: 50% 0; transform-origin: 50% 0;
}
#binary.rotated #active { margin:65px 0 0 -10px; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; /* * @TODO: 20120324 [TimPietrusky] - Add -webkit-animation */ -webkit-transform: rotate(-90deg) scale(1.35) translate(50px, -40px); -moz-transform: rotate(-90deg) scale(1.35) translate(50px, -40px); -ms-transform: rotate(-90deg) scale(1.35) translate(50px, -40px); -o-transform: rotate(-90deg) scale(1.35) translate(50px, -40px); transform: rotate(-90deg) scale(1.35) translate(50px, -40px);
}
#active.secondsx, #active.minutesx, #active.hoursx { text-shadow:1px 0px 1px #222; text-shadow:1px 1px 1px rgba(40, 40, 40, .7);
}
#active.secondsx { color: #330000;
}
#active.minutesx { color: #003300;
}
#active.hoursx { color: #000033;
}
/** * * Animations * */
/** * resize */
@-webkit-keyframes resize { 0%, 100% { height:50px; width:50px; opacity:1; } 15% {opacity:.6;} 50% { height:80px; width:80px; border-radius:80px; margin-top:-15px; margin-left:-27px; margin-bottom:15px; opacity:.3; -webkit-transform:translate3d(0, -55%, 10px) scale(2) skew(5deg, 15deg); -moz-transform:translate(0, -55%) scale(2) skew(5deg, 15deg); -o-transform:translate3d(0, -55%, 10px) scale(2) skew(5deg, 15deg); transform:translate3d(0, -55%, 10px) scale(2) skew(5deg, 15deg); -webkit-box-shadow:0 0 45px rgba(255, 255, 255, .4); -moz-box-shadow:0 0 45px rgba(255, 255, 255, .4); box-shadow:0 0 45px rgba(255, 255, 255, .4); }
}
@-moz-keyframes resize { 0%, 100% { height:50px; width:50px; opacity:1; } 15% {opacity:.6;} 50% { height:80px; width:80px; border-radius:80px; margin-top:-15px; margin-left:-27px; margin-bottom:15px; opacity:.3; -webkit-transform:translate3d(0, -55%, 10px) scale(2) skew(5deg, 15deg); -moz-transform:translate(0, -55%) scale(2) skew(5deg, 15deg); -o-transform:translate3d(0, -55%, 10px) scale(2) skew(5deg, 15deg); transform:translate3d(0, -55%, 10px) scale(2) skew(5deg, 15deg); -webkit-box-shadow:0 0 45px rgba(255, 255, 255, .4); -moz-box-shadow:0 0 45px rgba(255, 255, 255, .4); box-shadow:0 0 45px rgba(255, 255, 255, .4); }
}
@-ms-keyframes resize { 0%, 100% { height:50px; width:50px; opacity:1; } 15% {opacity:.6;} 50% { height:80px; width:80px; border-radius:80px; margin-top:-15px; margin-left:-27px; margin-bottom:15px; opacity:.3; -webkit-transform:translate3d(0, -55%, 10px) scale(2) skew(5deg, 15deg); -moz-transform:translate(0, -55%) scale(2) skew(5deg, 15deg); -o-transform:translate3d(0, -55%, 10px) scale(2) skew(5deg, 15deg); transform:translate3d(0, -55%, 10px) scale(2) skew(5deg, 15deg); -webkit-box-shadow:0 0 45px rgba(255, 255, 255, .4); -moz-box-shadow:0 0 45px rgba(255, 255, 255, .4); box-shadow:0 0 45px rgba(255, 255, 255, .4); }
}
@-o-keyframes resize { 0%, 100% { height:50px; width:50px; opacity:1; } 15% {opacity:.6;} 50% { height:80px; width:80px; border-radius:80px; margin-top:-15px; margin-left:-27px; margin-bottom:15px; opacity:.3; -webkit-transform:translate3d(0, -55%, 10px) scale(2) skew(5deg, 15deg); -moz-transform:translate(0, -55%) scale(2) skew(5deg, 15deg); -o-transform:translate3d(0, -55%, 10px) scale(2) skew(5deg, 15deg); transform:translate3d(0, -55%, 10px) scale(2) skew(5deg, 15deg); -webkit-box-shadow:0 0 45px rgba(255, 255, 255, .4); -moz-box-shadow:0 0 45px rgba(255, 255, 255, .4); box-shadow:0 0 45px rgba(255, 255, 255, .4); }
}
/* * showhide */
@-webkit-keyframes _showhide { 0%, 100% {opacity: .4;} 50% {opacity: 1;}
}
@-moz-keyframes _showhide { 0%, 100% {opacity: .4;} 50% {opacity: 1;}
}
@-ms-keyframes _showhide { 0%, 100% {opacity: .4;} 50% {opacity: 1;}
}
@-o-keyframes _showhide { 0%, 100% {opacity: .4;} 50% {opacity: 1;}
}
/* * * MQ's * */
@media only screen and (max-width:480px) { #binary { -webkit-transform:scale(.85,.85); -moz-transform:scale(.85,.85); -o-transform:scale(.85,.85); transform:scale(.85,.85); } #binary.rotated { -webkit-transform:rotate(90deg) scale(.65,.65); -moz-transform:rotate(90deg) scale(.65,.65); -o-transform:rotate(90deg) scale(.65,.65); transform:rotate(90deg) scale(.65,.65); }
}
@media only screen and (min-width:481px) and (max-width:1023px) { #binary { -webkit-transform:scale(1.35); -moz-transform:scale(1.35); -o-transform:scale(1.35); transform:scale(1.35); } #binary.rotated { -webkit-transform:rotate(90deg) scale(1.2,1.2); -moz-transform:rotate(90deg) scale(1.2,1.2); -o-transform:rotate(90deg) scale(1.2,1.2); transform:rotate(90deg) scale(1.2,1.2); }
}
@media only screen and (min-width:1024px) and (max-width:1237px){ #binary { -webkit-transform:scale(1.55,1.55); -moz-transform:scale(1.55,1.55); -o-transform:scale(1.55,1.55); transform:scale(1.55,1.55); } #binary.rotated { -webkit-transform:rotate(90deg) scale(1.8,1.8); -moz-transform:rotate(90deg) scale(1.8,1.8); -o-transform:rotate(90deg) scale(1.8,1.8); transform:rotate(90deg) scale(1.8,1.8); }
}
@media only screen and (min-width:1238px) { #binary { -webkit-transform:scale(1.55,1.55); -moz-transform:scale(1.55,1.55); -o-transform:scale(1.55,1.55); transform:scale(1.55,1.55); } #binary.rotated { -webkit-transform:rotate(90deg) scale(2.15,2.15); -moz-transform:rotate(90deg) scale(2.15,2.15); -o-transform:rotate(90deg) scale(2.15,2.15); transform:rotate(90deg) scale(2.15,2.15); }
}
@media only screen and (min-height:980px) and (min-width:1238px) { #binary { -webkit-transform:scale(1.85,1.85); -moz-transform:scale(1.85,1.85); -o-transform:scale(1.85,1.85); transform:scale(1.85,1.85); } #binary.rotated { margin-top:80%; -webkit-transform:rotate(90deg) scale(2.65); -moz-transform:rotate(90deg) scale(2.65); -o-transform:rotate(90deg) scale(2.65); transform:rotate(90deg) scale(2.65); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="imabackground"></div>
<div class="center"> <div id="binary"> <div class="hours"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="minutes"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="seconds"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div id="active"></div> </div>
</div>​​
<div class="right"> <button class="btn button-digital"></button> <button class="btn button-timeformat" title="time format"></button> <button class="btn button-rotate" title="rotate"></button>
</div> <script src="js/index.js"></script>
</body>
</html>

Pinky - 1 of 111001100110110111 - Script Codes CSS Codes

/* * Pinky - 1 of 111001100110110111 * * Pinky is a binary clock based on CSS3, HTML and oldschool JavaScript. * https://github.com/TimPietrusky/Pinky * * 2012 by tim-pietrusky.de */
@import url(https://fonts.googleapis.com/css?family=Revalia);
* { /* http://paulirish.com/2012/box-sizing-border-box-ftw/ */ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body { height:100%; margin:0; padding:0; background:#000; font-family: 'Revalia', cursive; overflow:hidden;
}
.imabackground { position:fixed; top:0; left:0; width:100%; height:100%; background: url(https://github.com/TimPietrusky/Pinky/raw/master/img/bg_171717.png); opacity:.6;
}
.left, .right { position:fixed; z-index:1337;
}
.left { left:10px; bottom:10px;
}
.right { right: 10px; top: 10px;
}
.btn { background:#ededed; border:1px solid #dcdcdc; color:#777777; font-family:arial; font-size:18px; font-weight:bold; padding:3px 15px; text-decoration:none; text-shadow:1px 1px 0px #ffffff; opacity:.1; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff; -moz-box-shadow:inset 0px 1px 0px 0px #ffffff; box-shadow:inset 0px 1px 0px 0px #ffffff; -webkit-transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -ms-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; transition:all .4s ease-in-out;
}
.btn:hover {opacity:1;}
.btn[disabled]:hover {opacity:.1;}
.btn:active { position:relative; top:1px; opacity:1;
}
.center { width:300px; margin:0 auto;
}
#binary { height:100%; width: 300px; margin-left:-25px; z-index:2; -webkit-transition: all .7s ease-in; -moz-transition: all .7s ease-in; -ms-transition: all .7s ease-in; -o-transition: all .7s ease-in; transition: all .7s ease-in; -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; -ms-transform-origin: 50% 0; -o-transform-origin: 50% 0; transform-origin: 50% 0;
}
#binary.rotated { margin:60% 0 -80px -50px; -webkit-transform-origin: 50% 300px; -moz-transform-origin: 50% 300px; -ms-transform-origin: 50% 300px; -o-transform-origin: 50% 300px; transform-origin: 50% 300px; -webkit-transform: rotate(90deg) scale(1.65); -moz-transform: rotate(90deg) scale(1.65); -ms-transform: rotate(90deg) scale(1.65); -o-transform: rotate(90deg) scale(1.65); transform: rotate(90deg) scale(1.65);
}
.digital { color:rgb(0,0,0); font-size:2.4em; font-family:sans; margin:20px 55px 0 25px; text-shadow:0 0 45px rgba(255,255,255,.6); -webkit-animation: digital 4s infinite; -moz-animation: digital 4s infinite; -ms-animation: digital 4s infinite; -o-animation: digital 4s infinite;
}
.hours, .minutes, .seconds { float:left; margin-top:50px; margin-left:50px; width:50px; height:400px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d;
}
.hours { margin-top:125px;
}
.hours div, .minutes div, .seconds div { background:rgba(204,204,204,.5); border:5px solid #333; opacity:.85; display:block; height:25px; width:25px; margin-bottom:50px; -webkit-perspective: 300; -moz-perspective: 300; -ms-perspective: 300; perspective: 300; -webkit-transition: all .5s ease-in; -moz-transition: all .5s ease-in; -ms-transition: all .5s ease-in; -o-transition: all .5s ease-in; transition: all .5s ease-in; -webkit-box-shadow:10px 10px 15px -5px rgba(9, 9, 9, .3); -moz-box-shadow:10px 10px 15px -5px rgba(9, 9, 9, .3); box-shadow:10px 10px 15px -5px rgba(9, 9, 9, .3); -webkit-transform:rotateZ(90deg); -moz-transform:rotateZ(90deg); -o-transform:rotateZ(90deg); transform:rotateZ(90deg);
}
.hours .true, .minutes .true, .seconds .true { height:50px; width:50px; border-radius:50px; margin-left:-12px; margin-bottom:25px; -webkit-perspective: 800; -moz-perspective: 800; -ms-perspective: 800; perspective: 800; -webkit-transform:rotateZ(-90deg); -moz-transform:rotateZ(-90deg); -o-transform:rotateZ(-90deg); transform:rotateZ(-90deg); -webkit-animation: resize .4s 1 ease-in; -moz-animation: resize .4s 1 ease-in; -ms-animation: resize .4s 1 ease-in; -o-animation: resize .4s 1 ease-in;
/* -webkit-filter: blur(1px);*/
}
.hours .true { background:rgba(63, 63, 255, .8); border:5px solid rgba(63, 63, 255, 1); -webkit-box-shadow:0 0 25px rgba(63, 63, 255, .8); -moz-box-shadow:0 0 25px rgba(63, 63, 255, .8); box-shadow:0 0 25px rgba(63, 63, 255, .8); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(63,63,255,1)), color-stop(100%,rgba(63,63,255,0.8))); background: -webkit-radial-gradient(center, ellipse cover, rgba(63,63,255,1) 0%,rgba(63,63,255,0.8) 100%);
}
.minutes .true { background:rgba(63, 255, 63, .8); border:5px solid rgba(63, 255, 63, 1); -webkit-box-shadow:0 0 25px rgba(63, 255, 63, .8); -moz-box-shadow:0 0 25px rgba(63, 255, 63, .8); box-shadow:0 0 25px rgba(63, 255, 63, .8); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(63,255,63,1)), color-stop(100%,rgba(63,255,63,0.8))); background: -webkit-radial-gradient(center, ellipse cover, rgba(63,255,63,1) 0%,rgba(63,255,63,0.8) 100%);
}
.seconds .true { background:rgba(255, 63, 63, .8); border:5px solid rgba(255, 63, 63, 1); -webkit-box-shadow:0 0 25px rgba(255, 100, 100, .8); -moz-box-shadow:0 0 25px rgba(255, 100, 100, .8); box-shadow:0 0 25px rgba(255, 100, 100, .8); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,63,63,1)), color-stop(100%,rgba(255,63,63,0.8))); background: -webkit-radial-gradient(center, ellipse cover, rgba(255,63,63,1) 0%,rgba(255,63,63,0.8) 100%);
}
#active { float:left; width:380px; height:85px; font-size:45px; text-align:center; padding:20px 5x; opacity:.4; margin:-25px 0 0 -26px; -webkit-perspective: 400; -moz-perspective: 400; -ms-perspective: 400; perspective: 400; -webkit-transition: all .5s ease-in, color .2s ease-in; -moz-transition: all .5s ease-in, color .2s ease-in; -ms-transition: all .5s ease-in, color .2s ease-in; -o-transition: all .5s ease-in, color .2s ease-in; transition: all .5s ease-in, color .2s ease-in; -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; -ms-transform-origin: 50% 0; -o-transform-origin: 50% 0; transform-origin: 50% 0;
}
#binary.rotated #active { margin:65px 0 0 -10px; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; /* * @TODO: 20120324 [TimPietrusky] - Add -webkit-animation */ -webkit-transform: rotate(-90deg) scale(1.35) translate(50px, -40px); -moz-transform: rotate(-90deg) scale(1.35) translate(50px, -40px); -ms-transform: rotate(-90deg) scale(1.35) translate(50px, -40px); -o-transform: rotate(-90deg) scale(1.35) translate(50px, -40px); transform: rotate(-90deg) scale(1.35) translate(50px, -40px);
}
#active.secondsx, #active.minutesx, #active.hoursx { text-shadow:1px 0px 1px #222; text-shadow:1px 1px 1px rgba(40, 40, 40, .7);
}
#active.secondsx { color: #330000;
}
#active.minutesx { color: #003300;
}
#active.hoursx { color: #000033;
}
/** * * Animations * */
/** * resize */
@-webkit-keyframes resize { 0%, 100% { height:50px; width:50px; opacity:1; } 15% {opacity:.6;} 50% { height:80px; width:80px; border-radius:80px; margin-top:-15px; margin-left:-27px; margin-bottom:15px; opacity:.3; -webkit-transform:translate3d(0, -55%, 10px) scale(2) skew(5deg, 15deg); -moz-transform:translate(0, -55%) scale(2) skew(5deg, 15deg); -o-transform:translate3d(0, -55%, 10px) scale(2) skew(5deg, 15deg); transform:translate3d(0, -55%, 10px) scale(2) skew(5deg, 15deg); -webkit-box-shadow:0 0 45px rgba(255, 255, 255, .4); -moz-box-shadow:0 0 45px rgba(255, 255, 255, .4); box-shadow:0 0 45px rgba(255, 255, 255, .4); }
}
@-moz-keyframes resize { 0%, 100% { height:50px; width:50px; opacity:1; } 15% {opacity:.6;} 50% { height:80px; width:80px; border-radius:80px; margin-top:-15px; margin-left:-27px; margin-bottom:15px; opacity:.3; -webkit-transform:translate3d(0, -55%, 10px) scale(2) skew(5deg, 15deg); -moz-transform:translate(0, -55%) scale(2) skew(5deg, 15deg); -o-transform:translate3d(0, -55%, 10px) scale(2) skew(5deg, 15deg); transform:translate3d(0, -55%, 10px) scale(2) skew(5deg, 15deg); -webkit-box-shadow:0 0 45px rgba(255, 255, 255, .4); -moz-box-shadow:0 0 45px rgba(255, 255, 255, .4); box-shadow:0 0 45px rgba(255, 255, 255, .4); }
}
@-ms-keyframes resize { 0%, 100% { height:50px; width:50px; opacity:1; } 15% {opacity:.6;} 50% { height:80px; width:80px; border-radius:80px; margin-top:-15px; margin-left:-27px; margin-bottom:15px; opacity:.3; -webkit-transform:translate3d(0, -55%, 10px) scale(2) skew(5deg, 15deg); -moz-transform:translate(0, -55%) scale(2) skew(5deg, 15deg); -o-transform:translate3d(0, -55%, 10px) scale(2) skew(5deg, 15deg); transform:translate3d(0, -55%, 10px) scale(2) skew(5deg, 15deg); -webkit-box-shadow:0 0 45px rgba(255, 255, 255, .4); -moz-box-shadow:0 0 45px rgba(255, 255, 255, .4); box-shadow:0 0 45px rgba(255, 255, 255, .4); }
}
@-o-keyframes resize { 0%, 100% { height:50px; width:50px; opacity:1; } 15% {opacity:.6;} 50% { height:80px; width:80px; border-radius:80px; margin-top:-15px; margin-left:-27px; margin-bottom:15px; opacity:.3; -webkit-transform:translate3d(0, -55%, 10px) scale(2) skew(5deg, 15deg); -moz-transform:translate(0, -55%) scale(2) skew(5deg, 15deg); -o-transform:translate3d(0, -55%, 10px) scale(2) skew(5deg, 15deg); transform:translate3d(0, -55%, 10px) scale(2) skew(5deg, 15deg); -webkit-box-shadow:0 0 45px rgba(255, 255, 255, .4); -moz-box-shadow:0 0 45px rgba(255, 255, 255, .4); box-shadow:0 0 45px rgba(255, 255, 255, .4); }
}
/* * showhide */
@-webkit-keyframes _showhide { 0%, 100% {opacity: .4;} 50% {opacity: 1;}
}
@-moz-keyframes _showhide { 0%, 100% {opacity: .4;} 50% {opacity: 1;}
}
@-ms-keyframes _showhide { 0%, 100% {opacity: .4;} 50% {opacity: 1;}
}
@-o-keyframes _showhide { 0%, 100% {opacity: .4;} 50% {opacity: 1;}
}
/* * * MQ's * */
@media only screen and (max-width:480px) { #binary { -webkit-transform:scale(.85,.85); -moz-transform:scale(.85,.85); -o-transform:scale(.85,.85); transform:scale(.85,.85); } #binary.rotated { -webkit-transform:rotate(90deg) scale(.65,.65); -moz-transform:rotate(90deg) scale(.65,.65); -o-transform:rotate(90deg) scale(.65,.65); transform:rotate(90deg) scale(.65,.65); }
}
@media only screen and (min-width:481px) and (max-width:1023px) { #binary { -webkit-transform:scale(1.35); -moz-transform:scale(1.35); -o-transform:scale(1.35); transform:scale(1.35); } #binary.rotated { -webkit-transform:rotate(90deg) scale(1.2,1.2); -moz-transform:rotate(90deg) scale(1.2,1.2); -o-transform:rotate(90deg) scale(1.2,1.2); transform:rotate(90deg) scale(1.2,1.2); }
}
@media only screen and (min-width:1024px) and (max-width:1237px){ #binary { -webkit-transform:scale(1.55,1.55); -moz-transform:scale(1.55,1.55); -o-transform:scale(1.55,1.55); transform:scale(1.55,1.55); } #binary.rotated { -webkit-transform:rotate(90deg) scale(1.8,1.8); -moz-transform:rotate(90deg) scale(1.8,1.8); -o-transform:rotate(90deg) scale(1.8,1.8); transform:rotate(90deg) scale(1.8,1.8); }
}
@media only screen and (min-width:1238px) { #binary { -webkit-transform:scale(1.55,1.55); -moz-transform:scale(1.55,1.55); -o-transform:scale(1.55,1.55); transform:scale(1.55,1.55); } #binary.rotated { -webkit-transform:rotate(90deg) scale(2.15,2.15); -moz-transform:rotate(90deg) scale(2.15,2.15); -o-transform:rotate(90deg) scale(2.15,2.15); transform:rotate(90deg) scale(2.15,2.15); }
}
@media only screen and (min-height:980px) and (min-width:1238px) { #binary { -webkit-transform:scale(1.85,1.85); -moz-transform:scale(1.85,1.85); -o-transform:scale(1.85,1.85); transform:scale(1.85,1.85); } #binary.rotated { margin-top:80%; -webkit-transform:rotate(90deg) scale(2.65); -moz-transform:rotate(90deg) scale(2.65); -o-transform:rotate(90deg) scale(2.65); transform:rotate(90deg) scale(2.65); }
}

Pinky - 1 of 111001100110110111 - Script Codes JS Codes

/** * Pinky - 1 of 111001100110110111 * * Pinky is a binary clock based on CSS3, HTML and oldschool JavaScript. * * 2012 by Tim Pietrusky - www.tim-pietrusky.de * Free for all and everything. * */
var date, bin, body, active, navigation, binary;
body = document.body;
binary = document.getElementById('binary');
active = { domElement : document.getElementById('active'), secondsx : false, minutesx : false, hoursx : false, secondsxString : 'secondsx', minutesxString : 'minutesx', hoursxString : 'hoursx', secondsxDec : '', minutesxDec : '', hoursxDec : '', format : 24, afterElement : '', display : true, getActive : function() { if (active.secondsx) return active.secondsxString; if (active.minutesx) return active.minutesxString; if (active.hoursx) return active.hoursxString; }, setNext : function(elementString, bin) { active.reset(); active[elementString] = true; active[elementString + 'Dec'] = bin; }, reset : function() { active.secondsx = false; active.minutesx = false; active.hoursx = false; }, toggleFormat : function() { if (active.format == 24) { active.format = 12; } else { active.format = 24; } return active.format; }, toggleDisplay : function() { active.display = !active.display; if (active.display) { active.domElement.style.display = 'block'; } else { active.domElement.style.display = 'none'; } return active.display; }, /** * Add element after this. * * @param params * * @returns String afterElement */ after : function(params) { active.afterElement = ''; if (active.format == 12) { active.afterElement = ' am'; if (params._hours > 11) { active.afterElement = ' pm'; } } return active.afterElement; }
};
navigation = { init : function() { navigation.button.rotate.register(); navigation.button.timeformat.register(); navigation.button.digital.register(); }, /* * @TODO: 20120324 [TimPietrusky] - Button-Factory! Now! FUCK! */ button : { root : { domElement : document.getElementsByClassName('button-root')[0], register : function() { /* onclick */ document.getElementsByClassName('button-root')[0].onclick = function() { window.location.href = "http://www.tim-pietrusky.de"; }; } }, rotate : { domElement : '', register : function() { // Get navigation.button.rotate.domElement = document.getElementsByClassName('button-rotate')[0]; // Set content navigation.button.rotate.domElement.innerHTML = '&#8635;'; /* onclick */ document.getElementsByClassName('button-rotate')[0].onclick = function() { if (binary.className == 'rotated') { binary.className = ''; // Set content navigation.button.rotate.domElement.innerHTML = '&#8635;'; } else { binary.className = 'rotated'; // Set content navigation.button.rotate.domElement.innerHTML = '&#8634;'; } } } }, timeformat : { domElement : '', register : function() { // Get navigation.button.timeformat.domElement = document.getElementsByClassName('button-timeformat')[0]; // Set content navigation.button.timeformat.domElement.innerHTML = '24'; // click navigation.button.timeformat.domElement.onclick = function() { navigation.button.timeformat.domElement.innerHTML = active.toggleFormat(); }; } }, digital : { domElement : '', lg : { labelOn : '&#8801;', titleOn : 'digital on', labelOff : '&#8800;', titleOff : 'digital off' }, register : function() { // Get navigation.button.digital.domElement = document.getElementsByClassName('button-digital')[0], // Set content navigation.button.digital.domElement.innerHTML = navigation.button.digital.lg.labelOn; navigation.button.digital.domElement.title = navigation.button.digital.lg.titleOn; // click navigation.button.digital.domElement.onclick = function() { if (active.toggleDisplay()) { navigation.button.digital.domElement.innerHTML = navigation.button.digital.lg.labelOn; navigation.button.digital.domElement.title = navigation.button.digital.lg.titleOn; } else { navigation.button.digital.domElement.innerHTML = navigation.button.digital.lg.labelOff; navigation.button.digital.domElement.title = navigation.button.digital.lg.titleOff; } }; } } }
};
function toBin(dec, positions) { bin = parseInt(dec).toString(2); bin = fill(bin, positions); return bin;
};
function fill(value, positions) { value = value.toString(); while (value.length < positions) { value = '0' + value; } return value;
}
function updateClock() { date = new Date; var _hours = date.getHours(), _hoursDec = date.getHours(), _minutes = date.getMinutes(), _seconds = date.getSeconds(); // Timeformat: 24/12 if (active.format === 12) { if (_hours > 12) {_hoursDec = _hours - 12;} if (_hours == 0) {_hoursDec = 12;} } // To binary _hours = toBin(_hoursDec, 5), _minutes = toBin(date.getMinutes(), 6), _seconds = toBin(date.getSeconds(), 6); // Render toScreen('hours', _hours); toScreen('minutes', _minutes); toScreen('seconds', _seconds); if (active.getActive() == null) { active[active.secondsxString] = true; active.secondsxDec = _seconds; active.minutesxDec = _minutes; active.hoursxDec = _hours; } else { if (active.hoursxDec != _hours) { active.setNext(active.hoursxString, _hours); } else if (active.minutesxDec != _minutes) { active.setNext(active.minutesxString, _minutes); } else if (active.secondsxDec != _seconds) { active.setNext(active.secondsxString, _seconds); } } if (active.display) { active.domElement.className = active.getActive(); setTimeout(function() { active.domElement.innerHTML = fill(_hoursDec, 2) + ':' + fill(date.getMinutes(), 2) + ':' + fill(date.getSeconds(), 2); // Timeformat: 24/12 active.domElement.innerHTML += active.after({'_hours' : date.getHours()}); setTimeout(function() { active.domElement.className = ' '; }, 200); }, 50); }
};
/* * toScreen(selector, value) * * @param String selector * @param String value * * Display changes to the screen * */
function toScreen(selector, value) { var childs, element; childs = document.getElementsByClassName(selector)[0].getElementsByTagName('div'); for(var i = 0; i < value.length; i++) { element = childs[i]; element.className = ''; if (value.charAt(i) == 1) { element.className = 'true'; } }
};
/* * jQuery 1.7.3pre * 20120324 [TimPietrusky] - added * * @see http://james.padolsey.com/jquery/#v=git&fn=jQuery.fn.hasClass */
document.hasClass, active.hasClass = function (selector) { var className = " " + selector + " ", i = 0, l = this.length; for (; i < l; i++) { if (this[i].nodeType === 1 && (" " + this[i].className + " ").replace(rclass, " ").indexOf(className) > -1) { return true; } } return false;
};
/* http://stackoverflow.com/a/7088499 */
/*while (document.readyState !== 'complete') { navigation.init(); setInterval(updateClock, 1000); break;
}*/
function domLoaded_lab() { if (document.readyState === 'complete') { navigation.init(); setInterval(updateClock, 1000); } else { setTimeout(function() { domLoaded_lab(); }, 25); }
}
// DOM loaded
domLoaded_lab();
Pinky - 1 of 111001100110110111 - Script Codes
Pinky - 1 of 111001100110110111 - Script Codes
Home Page Home
Developer Tim Pietrusky
Username TimPietrusky
Uploaded September 06, 2022
Rating 3
Size 8,739 Kb
Views 34,408
Do you need developer help for Pinky - 1 of 111001100110110111?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tim Pietrusky (TimPietrusky) Script Codes
Name
Advanced Checkbox Hack
Kudos Please
Colorful stripes
Asdf
Off Canvas
Custom Dropdown
Bullshit Job Title Generator
Icon Fonts - CSS-Loader
Icon Fonts - Enhanced lists
Select
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!