"box"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/Shasix/pen/obaEmJ" /> <style class="cp-pen-styles">::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-button { width: 0px; height: 0px; } ::-webkit-scrollbar-thumb { background: #ffffff; border: 13px none #ffffff; border-radius: 100px; } ::-webkit-scrollbar-thumb:hover { background: #dfdfdf; } ::-webkit-scrollbar-thumb:active { background: #e6e6e6; } ::-webkit-scrollbar-track { background: #156899; border: 15px none #ffffff; border-radius: 50px; } ::-webkit-scrollbar-track:hover { background: #165faf; } ::-webkit-scrollbar-track:active { background: #0e6996; } ::-webkit-scrollbar-corner { background: transparent; } .nav { -webkit-transition: 2s; transition: 2s; } .back { -webkit-transition: 1s; transition: 1s; } .nav a div, .back { cursor: pointer; } body { position: relative; background-color: #0f222b; overflow: hidden; } * { margin: 0; padding: 0; border: 0; outline: none; font-weight: 200; -webkit-font-smoothing: antialiased; color: white; font-family: segoe ui, helvetica neue, helvetica, arial, sans-serif; -webkit-user-select: none; -moz-user-select: moz-none; -ms-user-select: none; user-select: none; } #home .content { position: relative; margin: 0 auto; margin-top: 60px; width: 100%; background: transparent; height: 100%; overflow-y: auto; overflow-x: hidden; } #home { position: relative; margin: 0 auto; padding-bottom: 20px; text-align: center; width: 100%; overflow: hidden; background: #004363; border-radius: 2px; } #home .back { position: fixed; margin-top: -80px; margin-left: 6px; background: #1E5282; width: 40px; height: 40px; z-index: 50; } #home .back::after { content: "\21b6"; line-height: 45px; font-size: 40px; color: white; } #home.hide .back { margin-top: 6px; } #home.hide .nav:not(.home-menu3):not(.home-menu4) { margin-top: -170%; } #home.hide .nav:not(.home-menu1):not(.home-menu2) { margin-top: -150%; } .home-menu1 { position: relative; float: left; width: 50%; height: 50% } .home-menu2 { position: relative; float: left; width: 50%; height: 50% } .home-menu3 { position: relative; float: left; width: 50%; height: 50% } .home-menu4 { position: relative; float: left; width: 50%; height: 50% } .home-menu1 .home-menu-but1 { position: absolute; overflow: hidden; bottom: 2px; right: 2px; background: #000022; width: 150px; height: 150px; z-index: 10; -webkit-transition: all 300ms linear; transition: all 300ms linear } .home-menu1:hover .home-menu-but1 { box-shadow: 0 0 0 5px rgba(91, 96, 115, .5); z-index: 1001; -webkit-transform: scale(1.1); transform: scale(1.1) } .home-menu2 .home-menu-but2 { position: absolute; overflow: hidden; bottom: 2px; left: 2px; background: #2F79A7; width: 150px; height: 150px; z-index: 10; -webkit-transition: all 300ms linear; transition: all 300ms linear } .home-menu2:hover .home-menu-but2 { box-shadow: 0 0 0 5px rgba(91, 96, 115, .5); z-index: 1001; -webkit-transform: scale(1.1); transform: scale(1.1) } .home-menu3 .home-menu-but3 { position: absolute; overflow: hidden; top: 2px; right: 2px; background: #001242; width: 150px; height: 150px; z-index: 10; -webkit-transition: all 300ms linear; transition: all 300ms linear } .home-menu3:hover .home-menu-but3 { box-shadow: 0 0 0 5px rgba(91, 96, 115, .5); z-index: 1001; -webkit-transform: scale(1.1); transform: scale(1.1) } .home-menu4 .home-menu-but4 { position: absolute; overflow: hidden; top: 2px; left: 2px; background: #005E7C; width: 150px; height: 150px; z-index: 10; -webkit-transition: all 300ms linear; transition: all 300ms linear } .home-menu4:hover .home-menu-but4 { box-shadow: 0 0 0 5px rgba(91, 96, 115, .5); z-index: 1001; -webkit-transform: scale(1.1); transform: scale(1.1) } .home-menu-text1 { font-family: 'OpenSans-Light-webfont'; font-weight: 100; width: 90%; height: 20px; font-size: 26px; line-height: 24px; color: rgba(255, 255, 255, 1); text-align: right; margin-top: 115px; margin-left: 10px; -webkit-transition: all 300ms linear; transition: all 300ms linear } .home-menu-text2 { font-family: 'OpenSans-Light-webfont'; font-weight: 100; width: 100%; height: 20px; font-size: 26px; line-height: 24px; color: rgba(255, 255, 255, 1); text-align: left; margin-top: 115px; margin-left: 10px; -webkit-transition: all 300ms linear; transition: all 300ms linear } .home-menu-text3 { font-family: 'OpenSans-Light-webfont'; font-weight: 100; width: 90%; height: 20px; font-size: 26px; line-height: 24px; color: rgba(255, 255, 255, 1); text-align: right; margin-top: 10px; margin-left: 10px; -webkit-transition: all 300ms linear; transition: all 300ms linear } .home-menu-text4 { font-family: 'OpenSans-Light-webfont'; font-weight: 100; width: 100%; height: 20px; font-size: 26px; line-height: 24px; color: rgba(255, 255, 255, 1); text-align: left; margin-top: 10px; margin-left: 10px; -webkit-transition: all 300ms linear; transition: all 300ms linear } @media only screen and (min-width: 320px) and (max-width: 479px) { .home-menu1 .home-menu-but1 { width: 110px; height: 110px } .home-menu2 .home-menu-but2 { width: 110px; height: 110px } .home-menu3 .home-menu-but3 { width: 110px; height: 110px } .home-menu4 .home-menu-but4 { width: 110px; height: 110px } .home-menu1 .hi-icon1 { width: 110px; height: 110px } .home-menu2 .hi-icon2 { width: 110px; height: 110px } .home-menu3 .hi-icon3 { width: 110px; height: 110px } .home-menu4 .hi-icon4 { width: 120px; height: 120px } .home-menu-text1 { font-size: 22px; line-height: 24px; margin-top: 75px } .home-menu-text2 { font-size: 22px; line-height: 24px; margin-top: 75px } .home-menu-text3 { font-size: 22px; line-height: 24px; margin-top: 75px } .home-menu-text4 { font-size: 22px; line-height: 24px; margin-top: 75px } } .tmp { display: none; } /* ================================= LOADING ================================= */ .loader { width: 100px; height: 100px; -webkit-perspective: 100px; perspective: 100px; position: relative; left: 50%; margin-left: -50px; } .loader__tile { display: block; float: left; width: 50%; height: 50%; -webkit-animation-name: flip; animation-name: flip; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); z-index: 0; } .loader__tile__1 { background-color: #000022; -webkit-animation-delay: 0.15s; animation-delay: 0.15s; } .loader__tile__2 { background-color: #001242; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .loader__tile__3 { background-color: #0094C6; -webkit-animation-delay: 0.45s; animation-delay: 0.45s; } .loader__tile__4 { background-color: #005E7C; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } @-webkit-keyframes flip { 0% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } 11% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } } @keyframes flip { 0% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } 11% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } } /* ================================ TABLES ================================ */ table { position: relative; border: 1px solid #ccc; left: 50%; transform: translateX(-50%); -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); width: 98%; max-width: 1200px; margin: 0; padding: 0; border-collapse: collapse; border-spacing: 0; } table tr { border: 1px solid rgba(255, 255, 255, .3); padding: 5px; } table th, table td { padding: 10px; text-align: center; } table th { text-transform: uppercase; font-size: 14px; letter-spacing: 1px; background: rgba(0, 70, 165, .3); } @media screen and (max-width: 600px) { table { border: 0; } table thead { display: none; } table tr { margin-bottom: 10px; display: block; border-bottom: 2px solid #ddd; } table tbody tr:last-child { margin-bottom: 20px; } table td { display: block; text-align: right; font-size: 13px; border-bottom: 1px dotted #ccc; padding-left: 80px; } table td:last-child { border-bottom: 0; } table td:before { content: attr(data-label); float: left; text-transform: uppercase; font-weight: bold; margin-left: -75px; } } tr:hover { background: rgba(255, 255, 255, .1); } td[data-label="Items"] img { height: 32px; width: 32px; -webkit-transform: translate(0%, 8%); transform: translate(0%, 8%); } td[data-label="Items"] img.her { box-shadow: inset 0 0 10px 2px #005BAF; border: 1px solid #005BAF; } td[data-label="Items"] img.leg { box-shadow: inset 0 0 10px 2px #B08; border: 1px solid #B08; } td[data-label="Group"] .team { width: 32px; height: 32px; -webkit-transform: translate(6%, 0%); transform: translate(6%, 0%); border-bottom: 2px dotted rgba(0, 200, 255, .6); border-radius: 6px; } .potworek[src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAED0lEQVRYR82YeYhNURzHPWQrUbaU+IchJEXKP2YI/1jiDxpTZhCTMQwpW4qhZN/+sKbMYGYskTUxSESMJWWrKUshWw1CytL4fF/nvs7cufe9m/ve8259uu+de+49n3uW3znnRppk+BEJ6ldfX7+SvJ0jkUhx0HuSkS+QIHJrKGwhNIcKJKclo/Agz0goaMl95oHvoB9UpksyrqAlV4fUErgPu2EwbEVyeZBaCJPHV9Ath8whFUT6CE4H4BuMJ702jECiez0FLblWPOAhFCJyywi25VwDOueTfiVRIWGuNxJ01dxlHj4JXsICuAnrYTo8hWwEv4YRSHRvA0GvZiVNQiXQEn6a82vOy6xm78v/PMknWzgm6NfnTLNe4tzL1N57zhcdEe6TXCVodF+AKcmUjApSiPrTCRgOx2GmXQjXV5M2HzaTrt/RwyUn8U5QnUxJuwYdyRwKOAJFkjTyJ/k/FEpJ2+Ahp5qbDQpBo+AU+SY7LxLm7O6DjqRCyWN4AD1hiPmv5nvi16zWyyj/EvLuDCOne71GsSR3wURoo5aER1BCgVctuQGkXYNxHt1BQb0qGbNNoplkDAV9oKA7Hs2qEf0H1C9XOTXFC+jlCuFgygXt5vFo1j1cVxN2kAzsgwLIh19QjODhpDex1wPj9LlN5J9nuoHipI5PsM4ZTOkSVLNp9lA8jMU5E340w2wHDSgdsRgZVk73J1xuKZMZneP4ecY1IMpIUziJhZ94UqYlBvEMdYlARyBBvydR4D2udYUCClWA9jzIl8OFxZANLaCc/DODGP6zoLXsqqMwhZxGB3lmkVgEuq4RrwVvF9jGPUtTLagaKYXTFJbrFGa6g6ZF1VB3+AGaaapgo8mX6yzfEkmGqcHNPFzTm+LgCsS68VsbqwnQEb7AOVhjZh/l14ZrP/9Vq4GOMIKacTRjaGU9DNS/WoMCeDOw5/Ms1TS0h+kIng9kR6Z/FlQB1ipIc/cb2AtlqiXIcSQ5LzIvU43cWLdcvC1tKEFLciAFX3cKtsQleRS0ZuwBc8mntWPssNahH0nU7HPGvh5a0K+pXLWrbDcoXF3BSy66a+R6dGOWFkGrdlWzvWE1AmutWnY+BvjKKW/KatAIKg5qgfsCYhuseNsL6wWyeKHaVAuepcDRsMUJzJacPqO8Au0KFby19mxqzvL6DRUpE0REC15tAb5DngKzq+Y0q/SHZ6Dl2Qd4a2pQoeoufEyloOLkMXiO3Bx3s5I+DfpA3M1/ygSdvqSzV58jTXuedv9d0Ao3ioWxUGIEtbIZo8Fgv5D9O101qOZuh4i+SNgfoL6Qpg2/75EWQXfp1J72zuXwKVMFpyK3A2oQHJmJNTgDKe1jbmeqoPMF4xuCipeZ1QfNQGkwcPwM/wJq2tElrh06zgAAAABJRU5ErkJggg=="] { width: 40px; height: 40px; border: 1px solid white; } .potworek[src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAED0lEQVRYR82YeYhNURzHPWQrUbaU+IchJEXKP2YI/1jiDxpTZhCTMQwpW4qhZN/+sKbMYGYskTUxSESMJWWrKUshWw1CytL4fF/nvs7cufe9m/ve8259uu+de+49n3uW3znnRppk+BEJ6ldfX7+SvJ0jkUhx0HuSkS+QIHJrKGwhNIcKJKclo/Agz0goaMl95oHvoB9UpksyrqAlV4fUErgPu2EwbEVyeZBaCJPHV9Ath8whFUT6CE4H4BuMJ702jECiez0FLblWPOAhFCJyywi25VwDOueTfiVRIWGuNxJ01dxlHj4JXsICuAnrYTo8hWwEv4YRSHRvA0GvZiVNQiXQEn6a82vOy6xm78v/PMknWzgm6NfnTLNe4tzL1N57zhcdEe6TXCVodF+AKcmUjApSiPrTCRgOx2GmXQjXV5M2HzaTrt/RwyUn8U5QnUxJuwYdyRwKOAJFkjTyJ/k/FEpJ2+Ahp5qbDQpBo+AU+SY7LxLm7O6DjqRCyWN4AD1hiPmv5nvi16zWyyj/EvLuDCOne71GsSR3wURoo5aER1BCgVctuQGkXYNxHt1BQb0qGbNNoplkDAV9oKA7Hs2qEf0H1C9XOTXFC+jlCuFgygXt5vFo1j1cVxN2kAzsgwLIh19QjODhpDex1wPj9LlN5J9nuoHipI5PsM4ZTOkSVLNp9lA8jMU5E340w2wHDSgdsRgZVk73J1xuKZMZneP4ecY1IMpIUziJhZ94UqYlBvEMdYlARyBBvydR4D2udYUCClWA9jzIl8OFxZANLaCc/DODGP6zoLXsqqMwhZxGB3lmkVgEuq4RrwVvF9jGPUtTLagaKYXTFJbrFGa6g6ZF1VB3+AGaaapgo8mX6yzfEkmGqcHNPFzTm+LgCsS68VsbqwnQEb7AOVhjZh/l14ZrP/9Vq4GOMIKacTRjaGU9DNS/WoMCeDOw5/Ms1TS0h+kIng9kR6Z/FlQB1ipIc/cb2AtlqiXIcSQ5LzIvU43cWLdcvC1tKEFLciAFX3cKtsQleRS0ZuwBc8mntWPssNahH0nU7HPGvh5a0K+pXLWrbDcoXF3BSy66a+R6dGOWFkGrdlWzvWE1AmutWnY+BvjKKW/KatAIKg5qgfsCYhuseNsL6wWyeKHaVAuepcDRsMUJzJacPqO8Au0KFby19mxqzvL6DRUpE0REC15tAb5DngKzq+Y0q/SHZ6Dl2Qd4a2pQoeoufEyloOLkMXiO3Bx3s5I+DfpA3M1/ygSdvqSzV58jTXuedv9d0Ao3ioWxUGIEtbIZo8Fgv5D9O101qOZuh4i+SNgfoL6Qpg2/75EWQXfp1J72zuXwKVMFpyK3A2oQHJmJNTgDKe1jbmeqoPMF4xuCipeZ1QfNQGkwcPwM/wJq2tElrh06zgAAAABJRU5ErkJggg=="]:before { content: "BRAK"; font-size: 18px; -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); position: absolute; margin-top: 9px; } .team.none:before { content: "BRAK"; font-size: 13px; -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); position: absolute; margin-top: 10px; margin-left: -1px; } .tip { position:absolute; display:none; color:white; background: rgb(10, 100, 180); border: 3px double rgb(0, 29, 53); padding: 3px; padding-bottom: 4px; font-family: Verdana, Arial, sans-serif; font-size: 11px; z-index: 501; max-width: 280px; } .tip B, .tip I { display:block; text-align:center; } .improve.unique { color: #DAA520 } .improve.heroic { color: #2090FE } .tip B { color: #cc7 } .tip B.upgraded { color: #FD0 } .tip B.unique { color: #DAA520 } .tip B.heroic { color: #2090FE } .tip B.legendary { color: #FA9A20 } .tip B.artefact { color: #f0032a } .tip B.expires { color: red } .tip B.att { color: #ec0; display: inline; } .tip B.noreq { color: red } .tip I.idesc { color: #FFC; margin: 3px 0; text-align: left; } .tip I.legbon { color: #FA9A20; margin: 3px 0; text-align: left; max-width: 300px; } .tip I.looter { color: lime; margin: 3px 0; text-align: left; } .track3 { width: 10px; background: rgba(0, 0, 0, 0); margin-right: 2px; border-radius: 10px; -webkit-transition: background 250ms linear; transition: background 250ms linear; margin-top: 61px; } .track3:hover, .track3.dragging { background: #d9d9d9; /* Browsers without rgba support */ background: rgba(0, 0, 0, 0.15); } .handle3 { width: 7px; right: 0; background: #999; background: rgba(0, 0, 0, 0.4); border-radius: 7px; -webkit-transition: width 250ms; transition: width 250ms; } .track3:hover .handle3, .track3.dragging .handle3 { width: 10px; } .banner { position: relative; margin-bottom: 3px; width: 728px; background: whitesmoke; height: 90px; border-radius: 2px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } @media screen and (max-width: 750px) { .banner { width: 468px; height: 60px; } } tr.legtr { background: rgba(255, 0, 0, .15); } tr.legtr:hover { background: rgba(255, 60, 60, .2); }</style></head><body> <script src="https://shasix.pl/js/adsbygoogle.js"></script> <div id="home" onselectstart="return false" style="height: 100%; background-position: 50% 0px;"> <div class="back"></div> <div class="home-menu1 nav"> <a class="loots"> <div class="home-menu-but1"> <div class="home-menu-text1">Loots</div> </div> </a> </div> <div class="home-menu2 nav"> <a class="heroes"> <div class="home-menu-but2"> <div class="home-menu-text2">Heroes</div> </div> </a> </div> <div class="home-menu3 nav"> <a class="currency"> <div class="home-menu-but3"> <div class="home-menu-text3">Currency</div> </div> </a> </div> <div class="home-menu4 nav"> <a class="penalties"> <div class="home-menu-but4"> <div class="home-menu-text4">Penalties</div> </div> </a> </div> <div class="content"> </div> </div> <div class="tip"></div> <div class="tmp"> <div class="loader"><i class="loader__tile loader__tile__1"></i><i class="loader__tile loader__tile__2"></i><i class="loader__tile loader__tile__3"></i><i class="loader__tile loader__tile__4"></i></div> </div> <script> if(typeof adsDisplayed == "undefined") alert("You've got AdBlock enabled... Please... Turn disable it! ;c"); </script> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script><script src='https://pastebin.com/raw/81HcARGh'></script><script src="https://enscrollplugin.com/releases/enscroll-0.6.1.min.js"></script> <script >String.prototype.capitalize = function () { return this.charAt(0) .toUpperCase() + this.slice(1); } function initCustomScrollbar(selector) { if (!$.isWebkit && !$.isMobile) { $(selector) .enscroll({ showOnHover: true , verticalTrackClass: 'track3' , verticalHandleClass: 'handle3' , easingDuration: 500 , scrollIncrement: 90 }); } } function strip_tags(a, e) { e = (((e || "") + "") .toLowerCase() .match(/<[a-z][a-z0-9]*>/g) || []) .join(""); var r = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi , t = /<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi; return a.replace(t, "") .replace(r, function (a, r) { return e.indexOf("<" + r.toLowerCase() + ">") > -1 ? a : "" }) } function timeConverter(UNIX_timestamp) { var a = new Date(UNIX_timestamp * 1000) , year = a.getFullYear() , month = a.getMonth() , date = a.getDate() , hour = a.getHours() , min = a.getMinutes() , sec = a.getSeconds() , time = hour + ':' + min + ':' + sec + '<br>' + year + '-' + month + '-' + date; return time; } $("#home") .height(window.innerHeight); $(".content") .height(window.innerHeight - 90); $(window) .resize(function () { $("#home") .height(window.innerHeight); $(".content") .height(window.innerHeight - 90); }); $(document) .ready(function () { var tooltip = $(".tip"); $.isMobile = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase())); $.isWebkit = 'WebkitAppearance' in document.documentElement.style; if ($.isMobile) { var curDown = false , curYPos = 0 , curXPos = 0; $(".content") .mousemove(function (m) { if (curDown === true) { $(".content") .scrollTop($(".content") .scrollTop() + (curYPos - m.pageY)); $(".content") .scrollLeft($(".content") .scrollLeft() + (curXPos - m.pageX)); } }); $(".content") .mousedown(function (m) { curDown = true; curYPos = m.pageY; curXPos = m.pageX; }); $(".content") .mouseup(function () { curDown = false; }); } $("body") .on("mouseover mouseout", "*[tip]", function (e) { if (e.type == "mouseover") { tooltip .stop() .html($(this) .attr("tip")); var m = [e.clientX + window.scrollX, e.clientY + window.scrollY]; tooltip.css("right", "") .css("left", "") .css("bottom", "") .css("top", ""); if (m[0] > window.scrollX + window.innerWidth / 2) { tooltip.css("right", ($("body") .outerWidth() - m[0] + 16) + "px"); } else { tooltip.css("left", (m[0] + 16) + "px"); } if (m[1] > window.scrollY + window.innerHeight / 2) { tooltip.css("bottom", ($("body") .outerHeight() - m[1] + 16) + "px"); } else { tooltip.css("top", (m[1] + 16) + "px"); } tooltip.fadeTo(200, 0.9); } else { tooltip .stop() .fadeOut(200, function () { tooltip .empty(); }); } }); $(".back") .click(function () { Loader.Clear(); tooltip .fadeOut(200); $(".content") .fadeOut(function () { $(this) .empty(); /*$(this).mCustomScrollbar("destroy");*/ }); $("#home") .toggleClass("hide"); }); $(".nav") .click(function () { tooltip .fadeOut(200); var x = $(this) .children("a") .attr("class") .capitalize(); Loader[x]['Load'](); }); }); var Loader = new(function () { var self = this , Socket = new WebSocket("ws://51.254.36.154:9600/"); Socket.onopen = function () { //console.log("Okay"); }; Socket.onmessage = function (d) { var data = JSON.parse(d.data); switch (data.type) { case "loots": self.Loots.CreateTable(data.array); break; case "heroses": self.Heroes.CreateTable(data); break; case "currency": self.Currency.CreateTable(data.array); break; } } LoadAnim = function () { $(".content") .html($(".tmp .loader") .clone()) .fadeIn(); $("#home") .toggleClass("hide"); } this.Clear = function () { self.Loots.Limit = [0, 0, 0]; self.Loots.Loaded = [0, 0, 0]; self.Heroes.Limit = [0, 0]; self.Heroes.Loaded = [0, 0]; self.Loots.Interval = self.Heroes.Interval = null; }; this.Loots = { Limit: [0, 0, 0] , Loaded: [0, 0, 0] , Interval: null , Load: function () { LoadAnim(); Socket.send(JSON.stringify({ "type": "load" , "what": "loots" })); } , CreateTable: function (d) { var ret = $("<table></table>") , tmp = $("<tbody></tbody>") , arr = ["noob", "spec", "paid", "clan", "crimson", "vip"]; ret.append("<thead><tr><th>Items</th><th>Enemies</th><th>Group</th><th>Date</th></thead>"); console.log(d); for (var i in d) { var x = tmp.append("<tr></tr>") .find("tr") .eq(i) , td = x.append("<td data-label='Items'></td><td data-label='Enemies'></td><td data-label='Group'></td><td data-label='Date'></td>") .find("td"); for (var j in d[i]['items']) { Loader.Loots.Limit[0]++; var x = new Image(); x.src = d[i]['items'][j].img; x.onload = x.onerror = function () { Loader.Loots.Loaded[0]++; } if(d[i]['items'][j].type == 2) { td.parent().addClass("legtr"); } td.eq(0) .append("<div style=\"box-shadow: 0px 0px 10px 2px " + d[i]['items'][j].color + " inset;border: 1px solid " + d[i]['items'][j].color + ";border-radius: 3px;width:40px;height:40px;display:inline-block;margin:1px\"><img class='" + (d[i]['items'][j].type == 1 ? 'her' : 'leg') + "' tip='" + d[i]['items'][j].tip + (d[i]['items'][j].color == "gray" ? "<br><i>Nikt nie chciał łupu." : "") + "' src='" + d[i]['items'][j].img + "'></div>"); } td.eq(0) .append("<br style='clear:both'>"); for (var j in d[i]['enemies']) { Loader.Loots.Limit[1]++; var x = new Image(); x.src = d[i]['enemies'][j].img; x.onload = x.onerror = function () { Loader.Loots.Loaded[1]++; } td.eq(1) .append((!$.isMobile ? '<img class="potworek ' + ((d[i]['enemies'][j].img == 'https://www.margonem.pl/obrazki/npc/') ? 'none' : '') + '" ctip="t_npc" tip="' + ((!d[i]['enemies'][j].name) ? ('<b>Brak danych...</b>') : ('<b>' + strip_tags(d[i]['enemies'][j].name) + '</b><center>' + d[i]['enemies'][j].lvl + ' lvl</center>')) + '" src="' + ((d[i]['enemies'][j].img == 'https://www.margonem.pl/obrazki/npc/') ? 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAED0lEQVRYR82YeYhNURzHPWQrUbaU+IchJEXKP2YI/1jiDxpTZhCTMQwpW4qhZN/+sKbMYGYskTUxSESMJWWrKUshWw1CytL4fF/nvs7cufe9m/ve8259uu+de+49n3uW3znnRppk+BEJ6ldfX7+SvJ0jkUhx0HuSkS+QIHJrKGwhNIcKJKclo/Agz0goaMl95oHvoB9UpksyrqAlV4fUErgPu2EwbEVyeZBaCJPHV9Ath8whFUT6CE4H4BuMJ702jECiez0FLblWPOAhFCJyywi25VwDOueTfiVRIWGuNxJ01dxlHj4JXsICuAnrYTo8hWwEv4YRSHRvA0GvZiVNQiXQEn6a82vOy6xm78v/PMknWzgm6NfnTLNe4tzL1N57zhcdEe6TXCVodF+AKcmUjApSiPrTCRgOx2GmXQjXV5M2HzaTrt/RwyUn8U5QnUxJuwYdyRwKOAJFkjTyJ/k/FEpJ2+Ahp5qbDQpBo+AU+SY7LxLm7O6DjqRCyWN4AD1hiPmv5nvi16zWyyj/EvLuDCOne71GsSR3wURoo5aER1BCgVctuQGkXYNxHt1BQb0qGbNNoplkDAV9oKA7Hs2qEf0H1C9XOTXFC+jlCuFgygXt5vFo1j1cVxN2kAzsgwLIh19QjODhpDex1wPj9LlN5J9nuoHipI5PsM4ZTOkSVLNp9lA8jMU5E340w2wHDSgdsRgZVk73J1xuKZMZneP4ecY1IMpIUziJhZ94UqYlBvEMdYlARyBBvydR4D2udYUCClWA9jzIl8OFxZANLaCc/DODGP6zoLXsqqMwhZxGB3lmkVgEuq4RrwVvF9jGPUtTLagaKYXTFJbrFGa6g6ZF1VB3+AGaaapgo8mX6yzfEkmGqcHNPFzTm+LgCsS68VsbqwnQEb7AOVhjZh/l14ZrP/9Vq4GOMIKacTRjaGU9DNS/WoMCeDOw5/Ms1TS0h+kIng9kR6Z/FlQB1ipIc/cb2AtlqiXIcSQ5LzIvU43cWLdcvC1tKEFLciAFX3cKtsQleRS0ZuwBc8mntWPssNahH0nU7HPGvh5a0K+pXLWrbDcoXF3BSy66a+R6dGOWFkGrdlWzvWE1AmutWnY+BvjKKW/KatAIKg5qgfsCYhuseNsL6wWyeKHaVAuepcDRsMUJzJacPqO8Au0KFby19mxqzvL6DRUpE0REC15tAb5DngKzq+Y0q/SHZ6Dl2Qd4a2pQoeoufEyloOLkMXiO3Bx3s5I+DfpA3M1/ygSdvqSzV58jTXuedv9d0Ao3ioWxUGIEtbIZo8Fgv5D9O101qOZuh4i+SNgfoL6Qpg2/75EWQXfp1J72zuXwKVMFpyK3A2oQHJmJNTgDKe1jbmeqoPMF4xuCipeZ1QfNQGkwcPwM/wJq2tElrh06zgAAAABJRU5ErkJggg==' : d[i]['enemies'][j].img) + '">' : ((!d[i]['enemies'][j].name) ? ('Brak danych...') : (strip_tags(d[i]['enemies'][j].name) + ' (' + d[i]['enemies'][j].lvl + ')')) + '<br>')); } for (var j in d[i]['group']) { Loader.Loots.Limit[2]++; if (d[i]['group'][j].img != "https://i.imgur.com/0pU0Q0a.gif") { var img = d[i]['group'][j].img.split("/"); img.splice(0, img.length - ((arr.indexOf(img[img.length - 2]) != -1) ? 2 : 3)); img = 'https://www.margonem.pl/obrazki/postacie/' + img.join("/"); } else { img = "data:image/gif;base64,R0lGODlhIAAgAPMAAP///ykxSmFVWUpCTk4xSnBWYHl7eIeAgHFpZ2Nmb4RnX1pGVjU+UgAAAAAAAAAAACH5BAEAAAAALAAAAAAgACAAAAT/EMhJZbgY181rEAMREkLQnVtQDGxYmGgMBMZh2wgsdwFhIEBEQkDQ7SgBFkKRKCSGLGMsMygcDAqQIFFbZaQegdaQWIYGZS5xIAYjC6ADAo0QERArxIEleKFoN3JXCwILNXqBOX9kZQoIBgZbApBLjk9+JwFCQnxAZQggbGkli2UhC2VaQgsiTkNuEwFPnKJnUKJPpJlCCo6PoGy/vZ66PHBiLFebNSwLhG1/GHY/knh2X0cBC3oIhNsFBQuwMh9yLXjFRx4HCnav6jzsBPMJ4vAcAfL0A+OZX3LzCCTgB+8Coj0D8Njix6Ahgyl6fgDZI0aVOIcPdynDYyVUs0IBQTCKXMcNz54kckAQCinSoYc53A6UGCCngMKLLRu+BKEHhCYccy7o3JEk4UlNoEKxHEouSQ6HwBhiLLiUQQamKCIAADs="; } var x = new Image(); x.src = d[i]['group'][j].img; x.onload = x.onerror = function () { Loader.Loots.Loaded[2]++; } var loot = (!d[i]['group'][j].trophies ? '' : '<br><font color=white>Zdobył(a):</font> ' + d[i]['group'][j].trophies); td.eq(2) .append((!$.isMobile ? '<div style="box-shadow: 0px 0px 10px 2px ' + (typeof d[i]['group'][j]['color'] != "undefined" ? d[i]['group'][j]['color'] : 'transparent') + ' inset;border: 1px solid ' + (typeof d[i]['group'][j]['color'] != "undefined" ? d[i]['group'][j]['color'] : 'transparent') + ';border-radius: 10px;width:35px;display: inline-block;margin:1px;"><div class="team ' + ((img == '') ? 'none' : '') + '" ctip="t_other" tip="<b>' + d[i]['group'][j].name + '</b><center>Lvl: ' + d[i]['group'][j].lvl + d[i]['group'][j].prof + '</center>' + loot + '" style="background:url(' + img + ')"></div></div>' : '<div style="box-shadow: 0px 0px 10px 2px ' + (typeof d[i]['group'][j]['color'] != "undefined" ? d[i]['group'][j]['color'] : 'transparent') + ' inset;border: 1px solid ' + (typeof d[i]['group'][j]['color'] != "undefined" ? d[i]['group'][j]['color'] : 'transparent') + ';border-radius: 10px;margin:1px;float:right;padding:2px;">' + d[i]['group'][j].name + ' (' + d[i]['group'][j].lvl + d[i]['group'][j].prof + ')</div><br><br>')); } td.eq(3) .append('<b>' + d[i]['date'] + '</b>'); } Loader.Loots.Interval = setInterval(function () { if (Loader.Loots.Loaded[0] == Loader.Loots.Limit[0] && Loader.Loots.Loaded[1] == Loader.Loots.Limit[1] && Loader.Loots.Loaded[2] == Loader.Loots.Limit[2] && Loader.Loots.Limit != [0, 0, 0]) { clearInterval(Loader.Loots.Interval); ret.append(tmp); $(".content") .fadeOut(function () { $(this) .html(ret); $(this).prepend("<div class='banner'></div>"); initCustomScrollbar(".content"); $(this) .fadeIn(); }); } }, 50); } }; this.Heroes = { Limit: [0, 0] , Loaded: [0, 0] , Interval: null , Load: function () { LoadAnim(); Socket.send(JSON.stringify({ "type": "load" , "what": "heroses" })); } , CreateTable: function (e) { var ret = $("<table></table>") , tmp = $("<tbody></tbody>") , arr = ["noob", "spec", "paid", "clan", "crimson", "vip"] , d = e.array , s = e.srcs; console.log(d); ret.append("<thead><tr><th>Enemy</th><th>Group</th><th>Map</th><th>Date</th></thead>"); for (var i in d) { var x = tmp.append("<tr></tr>") .find("tr") .eq(i) , td = x.append("<td data-label='Enemy'></td>\ <td data-label='Group'></td>\ <td data-label='Map'></td>\ <td data-label='Date'><b>" + d[i]['date'] + "</b></td>") .find("td"); d[i]['enemies'] = JSON.parse(d[i]['enemies']); Loader.Heroes.Limit[0]++; var src = s[d[i]['enemies'][0]] + ""; console.log(src, d[i]['enemies'][0], i); if (src.indexOf('grafik') > -1) { src = "https://ataentsic.fadeusz.pl/" + src; } var enemy = new Image(); enemy.src = src; enemy.onload = enemy.onerror = function () { Loader.Heroes.Loaded[0]++; } td.eq(0) .append((!$.isMobile ? '<img class="potworek" ctip="t_npc" tip="' + ((!d[i]['enemies'][0]) ? ('<b>Brak danych...</b>') : ('<b>' + d[i]['enemies'][0] + '</b><center>' + d[i]['enemies'][1] + d[i]['enemies'][2] + ' lvl</center>') ) + '" src="' + ((src == 'https://www.margonem.pl/obrazki/npc/' || src == 'undefined') ? 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAED0lEQVRYR82YeYhNURzHPWQrUbaU+IchJEXKP2YI/1jiDxpTZhCTMQwpW4qhZN/+sKbMYGYskTUxSESMJWWrKUshWw1CytL4fF/nvs7cufe9m/ve8259uu+de+49n3uW3znnRppk+BEJ6ldfX7+SvJ0jkUhx0HuSkS+QIHJrKGwhNIcKJKclo/Agz0goaMl95oHvoB9UpksyrqAlV4fUErgPu2EwbEVyeZBaCJPHV9Ath8whFUT6CE4H4BuMJ702jECiez0FLblWPOAhFCJyywi25VwDOueTfiVRIWGuNxJ01dxlHj4JXsICuAnrYTo8hWwEv4YRSHRvA0GvZiVNQiXQEn6a82vOy6xm78v/PMknWzgm6NfnTLNe4tzL1N57zhcdEe6TXCVodF+AKcmUjApSiPrTCRgOx2GmXQjXV5M2HzaTrt/RwyUn8U5QnUxJuwYdyRwKOAJFkjTyJ/k/FEpJ2+Ahp5qbDQpBo+AU+SY7LxLm7O6DjqRCyWN4AD1hiPmv5nvi16zWyyj/EvLuDCOne71GsSR3wURoo5aER1BCgVctuQGkXYNxHt1BQb0qGbNNoplkDAV9oKA7Hs2qEf0H1C9XOTXFC+jlCuFgygXt5vFo1j1cVxN2kAzsgwLIh19QjODhpDex1wPj9LlN5J9nuoHipI5PsM4ZTOkSVLNp9lA8jMU5E340w2wHDSgdsRgZVk73J1xuKZMZneP4ecY1IMpIUziJhZ94UqYlBvEMdYlARyBBvydR4D2udYUCClWA9jzIl8OFxZANLaCc/DODGP6zoLXsqqMwhZxGB3lmkVgEuq4RrwVvF9jGPUtTLagaKYXTFJbrFGa6g6ZF1VB3+AGaaapgo8mX6yzfEkmGqcHNPFzTm+LgCsS68VsbqwnQEb7AOVhjZh/l14ZrP/9Vq4GOMIKacTRjaGU9DNS/WoMCeDOw5/Ms1TS0h+kIng9kR6Z/FlQB1ipIc/cb2AtlqiXIcSQ5LzIvU43cWLdcvC1tKEFLciAFX3cKtsQleRS0ZuwBc8mntWPssNahH0nU7HPGvh5a0K+pXLWrbDcoXF3BSy66a+R6dGOWFkGrdlWzvWE1AmutWnY+BvjKKW/KatAIKg5qgfsCYhuseNsL6wWyeKHaVAuepcDRsMUJzJacPqO8Au0KFby19mxqzvL6DRUpE0REC15tAb5DngKzq+Y0q/SHZ6Dl2Qd4a2pQoeoufEyloOLkMXiO3Bx3s5I+DfpA3M1/ygSdvqSzV58jTXuedv9d0Ao3ioWxUGIEtbIZo8Fgv5D9O101qOZuh4i+SNgfoL6Qpg2/75EWQXfp1J72zuXwKVMFpyK3A2oQHJmJNTgDKe1jbmeqoPMF4xuCipeZ1QfNQGkwcPwM/wJq2tElrh06zgAAAABJRU5ErkJggg==' : s[d[i]['enemies'][0]] ) + '">' : ((!d[i]['enemies'][0]) ? ('Brak danych...') : (d[i]['enemies'][0] + ' (' + d[i]['enemies'][1] + d[i]['enemies'][2] + ')') ) + '<br>')); d[i]['grp'] = JSON.parse(d[i]['grp']); for (var j in d[i]['grp']) { Loader.Heroes.Limit[2]++; if (d[i]['grp'][j][2] != "https://i.imgur.com/0pU0Q0a.gif" && d[i]['grp'][j][2].indexOf('rip') == -1) { var img = 'https://www.margonem.pl/' + d[i]['grp'][j][2]; //.split("/"); /*img.splice(0, img.length - ((arr.indexOf(img[img.length - 2]) != -1) ? 2 : 3)); img = 'https://www.margonem.pl/obrazki/postacie/' + img.join("/");*/ } else { img = "data:image/gif;base64,R0lGODlhIAAgAPMAAP///ykxSmFVWUpCTk4xSnBWYHl7eIeAgHFpZ2Nmb4RnX1pGVjU+UgAAAAAAAAAAACH5BAEAAAAALAAAAAAgACAAAAT/EMhJZbgY181rEAMREkLQnVtQDGxYmGgMBMZh2wgsdwFhIEBEQkDQ7SgBFkKRKCSGLGMsMygcDAqQIFFbZaQegdaQWIYGZS5xIAYjC6ADAo0QERArxIEleKFoN3JXCwILNXqBOX9kZQoIBgZbApBLjk9+JwFCQnxAZQggbGkli2UhC2VaQgsiTkNuEwFPnKJnUKJPpJlCCo6PoGy/vZ66PHBiLFebNSwLhG1/GHY/knh2X0cBC3oIhNsFBQuwMh9yLXjFRx4HCnav6jzsBPMJ4vAcAfL0A+OZX3LzCCTgB+8Coj0D8Njix6Ahgyl6fgDZI0aVOIcPdynDYyVUs0IBQTCKXMcNz54kckAQCinSoYc53A6UGCCngMKLLRu+BKEHhCYccy7o3JEk4UlNoEKxHEouSQ6HwBhiLLiUQQamKCIAADs="; } var x = new Image(); x.src = d[i]['grp'][j][2]; x.onload = x.onerror = function () { Loader.Heroes.Loaded[2]++; } td.eq(1) .append((!$.isMobile ? '<div style="box-shadow: 0px 0px 10px 2px transparent inset;border: 1px solid transparent;border-radius: 10px;width:35px;display: inline-block;margin:1px;"><div class="team ' + ((img == '') ? 'none' : '') + '" ctip="t_other" tip="<b>' + d[i]['grp'][j][0] + '</b><center>Lvl: ' + d[i]['grp'][j][1] + d[i]['grp'][j][3] + '</center>" style="background:url(' + img + ')"></div></div>' : '<div style="box-shadow: 0px 0px 10px 2px transparent inset;border: 1px solid transparent;border-radius: 10px;margin:1px;float:right;padding:2px;">' + d[i]['grp'][j][0] + ' (' + d[i]['grp'][j][1] + d[i]['grp'][j][3] + ')</div><br><br>' )); } d[i].map = JSON.parse(d[i].map); td.eq(2) .html(d[i].map[0] + " (" + d[i].map[1] + ", " + d[i].map[2] + ")"); } console.log(d); Loader.Heroes.Interval = setInterval(function () { //console.log(Loader.Heroes.Limit, Loader.Heroes.Loaded, 1); if (Loader.Heroes.Loaded[0] == Loader.Heroes.Limit[0] && Loader.Heroes.Loaded[1] == Loader.Heroes.Limit[1] && Loader.Heroes.Limit != [0, 0]) { clearInterval(Loader.Heroes.Interval); ret.append(tmp); $(".content") .fadeOut(function () { $(this) .html(ret); $(this).prepend("<div class='banner'></div>"); initCustomScrollbar(".content"); $(this) .fadeIn(); }); } }, 50); } }; this.Currency = { Load: function () { LoadAnim(); Socket.send(JSON.stringify({ "type": "load" , "what": "currency" })); } , CreateTable: function (d) { var ret = $("<table></table>") , tmp = $("<tbody></tbody>"); ret.append("<thead><tr><th>Account</th><th>Currency amount</th></thead>"); for (var i in d) { var x = tmp.append("<tr></tr>") .find("tr") .eq(i) , td = x.append("<td data-label='Account'></td>\ <td data-label='Currency amount'></td>") .find("td"); td.eq(0) .html("<a href='http://www.margonem.pl/?task=profile&id=" + d[i].aid + "' target='_blank'>" + (d[i].nick != "" ? d[i].nick : "BRAK") + "</a>"); td.eq(1) .html(d[i].money); } ret.append(tmp); $(".content") .fadeOut(function () { $(this) .html(ret); $(this).prepend("<div class='banner'></div>"); initCustomScrollbar(".content"); $(this) .fadeIn(); }); } } })(); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: