forked from moovweb/harlem_shaker
-
Notifications
You must be signed in to change notification settings - Fork 0
/
harlem-shake.html
77 lines (76 loc) · 4.21 KB
/
harlem-shake.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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE>
<html>
<head>
<link rel="shortcut icon" href="https://s3.amazonaws.com/moovweb-marketing/playground/favicon.ico">
<style>
body {
font-family: sans-serif;
}
#container {
padding: 20px;
border: 1px solid #eee;
margin: 20px auto;
width: 300px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
}
#container p{
display: block;
margin: 0px auto 20px auto;
text-align: center;
}
#bookmarklet {
display: block;
font-weight: bold;
text-tranform: uppercase;
color: white;
background: #f36721;
text-align: left;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
border-bottom: 2px solid #a53d09;
text-shadow: 0 1px 1px #752b06;
font-size: 16px;
overflow: hidden;
cursor: move;
padding: 10px;
-webkit-user-select: none;
text-decoration: none;
text-transform: uppercase;
text-align: center;
}
#bookmarklet:hover {
border-bottom: 2px solid #cc4b0b;
text-shadow: 0 1px 1px #a53d09;
}
#bookmarklet:active {
border-bottom: none;
border-top: 2px solid #bd460a;
text-shadow: 0 1px 1px #a53d09;
}
.powered {
font-size: 10px;
color: #ddd;
text-align: center;
}
.powered a {
color: #ddd;
}
</style>
</head>
<body>
<div id="container">
<p> Drag this button to your bookmarks bar </p>
<a id="bookmarklet" href='javascript:(function(){function c(){var e=document.createElement("link");e.setAttribute("type","text/css");e.setAttribute("rel","stylesheet");e.setAttribute("href",f);e.setAttribute("class",l);document.body.appendChild(e)}function h(){var e=document.getElementsByClassName(l);for(var t=0;t<e.length;t++){document.body.removeChild(e[t])}}function p(){var e=document.createElement("div");e.setAttribute("class",a);document.body.appendChild(e);setTimeout(function(){document.body.removeChild(e)},100)}function d(e){return{height:e.offsetHeight,width:e.offsetWidth}}function v(i){var s=d(i);return s.height>e&&s.height<n&&s.width>t&&s.width<r}function m(e){var t=e;var n=0;while(!!t){n+=t.offsetTop;t=t.offsetParent}return n}function g(){var e=document.documentElement;if(!!window.innerWidth){return window.innerHeight}else if(e&&!isNaN(e.clientHeight)){return e.clientHeight}return 0}function y(){if(window.pageYOffset){return window.pageYOffset}return Math.max(document.documentElement.scrollTop,document.body.scrollTop)}function E(e){var t=m(e);return t>=w&&t<=b+w}function S(){var e=document.createElement("audio");e.setAttribute("class",l);e.src=i;e.loop=false;e.addEventListener("canplay",function(){setTimeout(function(){x(k)},500);setTimeout(function(){N();p();for(var e=0;e<O.length;e++){T(O[e])}},15500)},true);e.addEventListener("ended",function(){N();h()},true);e.innerHTML="<p>If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.</p>";document.body.appendChild(e);e.play()}function x(e){e.className+=" "+s+" "+o}function T(e){e.className+=" "+s+" "+u[Math.floor(Math.random()*u.length)]}function N(){var e=document.getElementsByClassName(s);var t=new RegExp("\\b"+s+"\\b");for(var n=0;n<e.length;){e[n].className=e[n].className.replace(t,"")}}var e=30;var t=30;var n=350;var r=350;var i="//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake.mp3";var s="mw-harlem_shake_me";var o="im_first";var u=["im_drunk","im_baked","im_trippin","im_blown"];var a="mw-strobe_light";var f="//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake-style.css";var l="mw_added_css";var b=g();var w=y();var C=document.getElementsByTagName("*");var k=null;for(var L=0;L<C.length;L++){var A=C[L];if(v(A)){if(E(A)){k=A;break}}}if(A===null){console.warn("Could not find a node of the right size. Please try a different page.");return}c();S();var O=[];for(var L=0;L<C.length;L++){var A=C[L];if(v(A)){O.push(A)}}})()'>Harlem Shake</a>
</div>
<p class='powered'> Made by
<a href="https://twitter.com/MoovwebDev">devs at Moovweb </a>
</p>
</body>
</html>