ndfjay

DeadlySin Homepage

Jul 19th, 2017
111
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 13.99 KB | None | 0 0
  1. <script>
  2. var username = "DeadlySin";
  3. var links = {
  4.     facebook: "https://www.facebook.com/Deadlysin0/",
  5.     website: "http://deadlysintut.weebly.com/",
  6. }
  7.  
  8. </script>
  9.  
  10. <link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
  11. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  12. <style>
  13.       .imvustylez_products_marquee{margin:0px auto; width: 960px; height: 180px; overflow: hidden;}
  14.     .imvustylez_products_marquee [id$="_panel_header"] {display: none !important; font-size: 1px} .imvustylez_products_marquee [id$="_panel_body"] {line-height: 1px;}
  15.     .imvustylez_products_marquee .productbox,.imvustylez_products_marquee .productbox img{width:100px !important;height:80px !important; border-radius: 5px;}
  16.  
  17.   #prods{
  18.     position: absolute;
  19.     bottom: 20px;
  20.     left: calc(50vw - 480px);
  21.   }
  22.  
  23.     #mediabtnsCont{
  24.     background: #121212;
  25.     width:280px;
  26.     height: 28px;
  27.     opacity: 1;
  28.     position: absolute;
  29.     float:left;
  30.     z-index: 900;
  31.     margin-left: 50px;
  32.     margin-top: 13px;
  33.     border-radius: 15px;
  34.     transition: opacity .4s ease-out;
  35.     -moz-transition: opacity .4s ease-out;
  36.     -webkit-transition: opacity .4s ease-out;
  37.     -o-transition: opacity .4s ease-out;
  38. }
  39.  
  40. #mediabtnsCont:hover{
  41.     opacity: 1;
  42.     transition: opacity .4s ease-in;
  43.     -moz-transition: opacity .4s ease-in;
  44.     -webkit-transition: opacity .4s ease-in;
  45.     -o-transition: opacity .4s ease-in;
  46. }
  47.  
  48. #mediabtnp {
  49.     background: url(http://userimages-akm.imvu.com/userdata/11/70/33/56/userpics/Snap_7Tr7FJN8Cu574473056.png);
  50.     width: 28px;
  51.     height: 28px;
  52.     cursor: pointer;
  53.     opacity: .4;
  54.     float: left;
  55.     position: relative;
  56.     margin-right: 28px;
  57.     transition: opacity .4s ease-in;
  58.     -moz-transition: opacity .4s ease-in;
  59.     -webkit-transition: opacity .4s ease-in;
  60.     -o-transition: opacity .4s ease-in;
  61. }
  62.  
  63. #mediabtnp:hover{
  64.     opacity: 1;
  65.     transition: opacity .4s ease-in;
  66.     -moz-transition: opacity .4s ease-in;
  67.     -webkit-transition: opacity .4s ease-in;
  68.     -o-transition: opacity .4s ease-in;
  69. }
  70.  
  71. #mediabtnp2 {
  72.     background: url(http://userimages-akm.imvu.com/userdata/11/70/33/56/userpics/Snap_7Tr7FJN8Cu574473056.png);
  73.     width: 28px;
  74.     height: 28px;
  75.     cursor: pointer;
  76.     opacity: .4;
  77.     float: left;
  78.     position: relative;
  79.     margin-right: 28px;
  80.     transition: opacity .4s ease-in;
  81.     -moz-transition: opacity .4s ease-in;
  82.     -webkit-transition: opacity .4s ease-in;
  83.     -o-transition: opacity .4s ease-in;
  84. }
  85.  
  86. #mediabtnp2:hover{
  87.     opacity: 1;
  88.     transition: opacity .4s ease-in;
  89.     -moz-transition: opacity .4s ease-in;
  90.     -webkit-transition: opacity .4s ease-in;
  91.     -o-transition: opacity .4s ease-in;
  92. }
  93.  
  94. #mediabtns {
  95.     background: url(http://userimages-akm.imvu.com/userdata/11/70/33/56/userpics/Snap_7Tr7FJN8Cu574473056.png);
  96.     width: 28px;
  97.     height: 28px;
  98.     z-index: 901;
  99.     margin-right: 28px;
  100.     float: left;
  101.     cursor: pointer;
  102.     position: relative;
  103.     opacity: .4;
  104.     transition: opacity .4s ease-in;
  105.     -moz-transition: opacity .4s ease-in;
  106.     -webkit-transition: opacity .4s ease-in;
  107.     -o-transition: opacity .4s ease-in;
  108. }
  109.  
  110. #mediabtns:hover{
  111.     opacity: 1;
  112.     transition: opacity .4s ease-in;
  113.     -moz-transition: opacity .4s ease-in;
  114.     -webkit-transition: opacity .4s ease-in;
  115.     -o-transition: opacity .4s ease-in;
  116. }
  117. .mediaPlayerContainer{
  118.   height: 42px;
  119.   position: relative;
  120.   left: -25px;
  121.   top: -15px;
  122. }
  123. #mediaPlayer{
  124.   height: 42px;
  125.   width: 950px;
  126.   float: left;
  127. }
  128.  
  129. #badges_panel{
  130.     width: 150px !important;
  131.     position: absolute !important;
  132.     top: 50px !important;
  133.     left:20px !important;
  134.   }
  135.    
  136.    #aboutme_panel, #contact_panel, #dev_panel, #wishlist_panel, #visitors_panel,
  137.    #messages_panel, #tagcloud_panel, #stickers_panel, #collect_panel,
  138.    #room_panel, #rankings_panel, #cool_panel, #gallery_panel, #friends_panel,
  139.    #streetteam_panel, #blog_panel, #video_panel_header, #music_panel, #rss_panel, #outfits_panel {
  140.       display: none !important;
  141.    }
  142.    #rightColumn {
  143.       display:none !important;
  144.    }
  145.  .imvustylez_products_marquee{margin:0px auto}
  146.  .imvustylez_products_marquee [id$="_panel_header"] {display: none !important; font-size: 1px}
  147.  .imvustylez_products_marquee [id$="_panel_body"] {line-height: 1px;} .imvustylez_products_marquee
  148.  .productbox,
  149.  .imvustylez_products_marquee
  150.  .productbox img{width:100px !important;height:80px !important;}
  151.  #headerbox { display: none !important; }
  152.   #footerBanner { display: none !important; }
  153.   #footer_style { display: none !important; }
  154.   #footer_panel { display: none !important; }
  155.   #ad_panel { display: none !important; }
  156.   #dev_panel{display:none !important;}
  157.   #imvuTopNav{display:none !important;}
  158.   #ccpheader_leaderboard{display: none !important;}
  159.  
  160. #url_panel_colRow, .imvucodes_net { display:none !important; }
  161. .paneltitle, .panelmenu, .imvucodes_net { display:none !important; }
  162.  
  163. </style>
  164. <div id="contentArea" style="min-width: 960px; width: 100vw; position: absolute; top: 0px; left: 0px"></div>
  165. <div id="prods" style="display: none" class='imvustylez_products_marquee'><div style='width:960px'><script type="text/javascript" src="https://gaf210.imvustylez.net/newprodsbanner/filtered_dev_panel.js.php?dev_id=27917016&pn=new&q=25"></script></div></div>
  166. <script>
  167. function createElement(s){
  168.     this.def = {
  169.         width: (s.width ? s.width : "100%"),
  170.         height: (s.height ? s.height : "500px"),
  171.         background: (s.background ? s.background : "background-color: rgba(0,0,0,1)"),
  172.         yPos: (s.yOff ? s.yOff : "top: 0px"),
  173.         xPos: (s.xOff ? s.xOff : "left: 0px"),
  174.         content: (s.content ? s.content : ''),
  175.         align: (s.align ? s.align : "center"),
  176.         zIndex: (s.zIndex ? s.zIndex : '1'),
  177.         position: (s.position ? s.position : 'relative'),
  178.         float: (s.float ? s.float : 'left'),
  179.         id: (s.id ? s.id : 'div'),
  180.         backgroundAttach: (s.backgroundAttachment ? s.backgroundAttachment : "initial"),
  181.         backgroundPos: (s.backgroundPosition ? s.backgroundPosition : "initial"),
  182.         backgroundRep: (s.backgroundRepeat ? s.backgroundRepeat : "initial"),
  183.         backgroundSize: (s.backgroundSize ? s.backgroundSize : "initial"),
  184.     }
  185.  
  186.     this.style = 'width: '+this.def.width
  187.     +'; height: '+this.def.height
  188.     +'; '+this.def.yPos
  189.     +'; '+this.def.xPos
  190.     +'; text-align: '+this.def.align
  191.     +'; position: '+this.def.position
  192.     +'; float: '+this.def.float
  193.     +'; background-attachment: '+this.def.backgroundAttach
  194.     +'; background-position: '+this.def.backgroundPos
  195.     +'; background-repeat: '+this.def.backgroundRep
  196.     +'; background-size: '+this.def.backgroundSize
  197.     +'; '+this.def.background;
  198.  
  199.     this.template = `<div id='`+this.def.id+`' style='`+this.style+`'>
  200.     `+this.def.content+`
  201.     </div>`;
  202.  
  203.     this.init = function(){
  204.             $('#contentArea').append(this.template);
  205.         }
  206. }
  207.  
  208. new createElement({
  209.     height: 'calc(100vh - 150px)',
  210.     id: 'home',
  211.     background: 'background: radial-gradient(rgba(0,0,0,.4), rgba(255,255,255,.2))',
  212.     content: `
  213.         <div id="urect" style="background: rgba(54,54,54,.7); border-radius: 5px; width: 250px; height: 70px; position: absolute; top: calc(50% - 35px); left: calc(50% - 125px);">
  214.             <div style="border-style: dotted; border-width: 5px; border-color: #f2f2f2; width: 230px; height: 50px; position: absolute; top: 5px; left: 5px;">
  215.                 <div id="userName" style="font-size: 40px; font-family: 'Poiret One'; font-weight: bold; color: #f2f2f2">
  216.                     `+username+`
  217.                 </div>
  218.             </div>
  219.        
  220.         </div>
  221.     `
  222. }).init();
  223.  
  224. new createElement({
  225.     height: '150px',
  226.     id: 'custmesh',
  227.     background: 'background: #363639',
  228.     content: `
  229.         <div style="width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; background: rgba(0,0,0,.4)">
  230.     <div style="border-style: dashed none dashed none; border-width: 5px; border-color: #f2f2f2; width: 100%; height: 140px; position: absolute; top: 0px; left: 0px">
  231.  
  232.         <div style="position: absolute; top: calc(50% - 20px); width: 100%; left: 0px; height: 40px; font-size: 40px; font-family: 'Poiret One'; font-weight: bold; color: #f2f2f2">
  233.             <center>
  234.             Want a custom mesh? message me with your requests!
  235.             </center>
  236.         </div>
  237.     </div>
  238.     </div>
  239.     `
  240. }).init();
  241.  
  242. new createElement({
  243.     height: '150px',
  244.     id: 'credit',
  245.     background: 'background-image: url(http://imvu.riedesign.tk/Homepages/Rieno/Parallax/foliage.jpg)',
  246.     backgroundRepeat: 'no-repeat',
  247.     backgroundSize: 'cover',
  248.     backgroundPosition: 'center',
  249.     backgroundAttachment: 'fixed',
  250.     content: `
  251.         <div style="width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; background: rgba(0,0,0,.4)">
  252.     <div style="border-style: dashed none dashed none; border-width: 5px; border-color: #f2f2f2; width: 100%; height: 140px; position: absolute; top: 0px; left: 0px">
  253.  
  254.         <div style="position: absolute; top: calc(50% - 20px); width: 100%; left: 0px; height: 40px; font-size: 40px; font-family: 'Poiret One'; font-weight: bold; color: #f2f2f2">
  255.             <center>
  256.             Homepage Code and Design By <a href="http://avatars.imvu.com/Rieno" style="text-decoration: none; color: #FFF">&regieno</a>
  257.             </center>
  258.         </div>
  259.     </div>
  260.     </div>
  261.     `
  262. }).init();
  263.  
  264. new createElement({
  265.     height: '35px',
  266.     position: 'fixed',
  267.     background: 'background: #363639',
  268.     content: `
  269.     <center style="font-family: 'Poiret One'; color: #FFF">
  270.     <div style="margin-top: 10px">
  271.     <a target="_new" href="`+links.facebook+`" style="text-decoration: none; color: #FFF">Facebook</a> | <a target="_new" href="`+links.website+`" style="text-decoration: none; color: #FFF">Mesh Tutorials</a> | <a href="javascript:void(0)" onclick="IMVU.messagePopupShow({force_recipient_id:27917016}); return false;" style="text-decoration: none; color: #FFF">Message</a>
  272.     </div>
  273.     </center>
  274.  
  275.                 <div id="mediabtnsCont" class="footCTRL" style="background: rgba(0,0,0,0); position: absolute; right: 5px; bottom: 2px; display: block;">
  276.                       <div style="height: 28px; width: 42px; float: left; position: relative;"> </div>
  277.                       <div id="mediabtns" onclick="player.previousVideo()"></div>
  278.                       <div id="mediabtnp" onclick="switchplaystate()"></div>
  279.                       <div style="background-position: -56px" id="mediabtns" onclick="player.nextVideo()"></div>
  280.                       <div style="background-position: -84px" id="mediabtns" onclick="setVolume()"></div>
  281.                 </div>
  282.  
  283.                 <div id="footerTitle" style="display: block; position: absolute; bottom: 7px; left: 15px; max-height:20px; width: 250px; z-index: 11; color: #FFF; font-size: 12px; text-align: center; overflow-x: hidden; overflow-y: hidden;">
  284.                     <marquee id="songTitle" style="font-family: 'Poiret One'; width: 250px" scrollamount='1' direction='left' behavior='scroll'>
  285.                     </marquee>
  286.                 </div>
  287.     `
  288. }).init();
  289.  
  290. $(document).ready(function(){
  291.     lAlign()
  292.     setTimeout(function(){
  293.         $('#contentArea').fadeOut('slow', function(){
  294.             $('#contentArea').fadeIn('slow');
  295.             $('body').prepend('<iframe onload="onYouTubePlayerAPIReady()" id="video" style="position: fixed; z-index: -1 !important; width: 100vw; height: 200vh; top: calc(50% - 100vh); left: 0px; filter: blur(1px) saturate(120%) brightness(110%) contrast(105%) grayscale(15%); overflow: hidden !important;" src="//www.youtube.com/embed/videoseries?list=PLnjmKq713yuLW9AsnW6eV9Q65uMEHWWG_&enablejsapi=1&html5=1&autoplay=1" frameboarder="0" allowfullscreen></iframe>');
  296.             $('#home').append($('#prods'));
  297.             document.getElementById('prods').style.display = "block";
  298.             $('#custmesh').append($('#badges_panel'));
  299.            
  300.         })
  301.     }, 250)
  302. })
  303.  
  304.  
  305.  
  306. // YOUTUBE PLAYER API AND SETTINGS
  307.  
  308.  
  309. if (!window['YT']) {var YT = {loading: 0,loaded: 0};}if (!window['YTConfig']) {var YTConfig = {'host': 'http://www.youtube.com'};}if (!YT.loading) {YT.loading = 1;(function(){var l = [];YT.ready = function(f) {if (YT.loaded) {f();} else {l.push(f);}};window.onYTReady = function() {YT.loaded = 1;for (var i = 0; i < l.length; i++) {try {l[i]();} catch (e) {}}};YT.setConfig = function(c) {for (var k in c) {if (c.hasOwnProperty(k)) {YTConfig[k] = c[k];}}};var a = document.createElement('script');a.type = 'text/javascript';a.id = 'www-widgetapi-script';a.src = 'https:' + '//s.ytimg.com/yts/jsbin/www-widgetapi-vfl1Omgyb/www-widgetapi.js';a.async = true;var b = document.getElementsByTagName('script')[0];b.parentNode.insertBefore(a, b);})();}
  310. var player;
  311. function onYouTubePlayerAPIReady() {
  312.  player = new YT.Player('video', {
  313.    events: {
  314.            'onReady': onPlayerReady,
  315.            'onStateChange': onPlayerStateChange
  316.    }
  317.  });
  318. }
  319. function onPlayerReady(event) {
  320.      player.playVideo();
  321. }
  322.  
  323. function onPlayerStateChange(event) {
  324. if ( player ) {
  325.  
  326.        if ( player.getPlayerState() != 2 ) {
  327.          document.getElementById( "songTitle" ).innerText = player.getVideoData().title;
  328.          document.getElementById('mediabtnp').style = "background-position: -112px 0px";
  329.          
  330.        } else {
  331.          document.getElementById( "songTitle" ).innerText = 'Press Play ►';
  332.          document.getElementById('mediabtnp').style = "background-position: -28px 0px";
  333.        }
  334.    }
  335. }
  336.  
  337. function switchplaystate(){
  338.  (player.getPlayerState() == 1 ? player.pauseVideo() : player.playVideo());
  339. }
  340.  
  341. function setVolume(){
  342.     if(player.getVolume() >=76 && player.getVolume() <= 100){
  343.         player.setVolume(75);
  344.     }else if(player.getVolume() >=51 && player.getVolume() <= 75){
  345.         player.setVolume(50);
  346.     }else if(player.getVolume() >=26 && player.getVolume() <= 50){
  347.         player.setVolume(25);
  348.     }if(player.getVolume() >=16 && player.getVolume() <= 25){
  349.         player.setVolume(15);
  350.     }if(player.getVolume() >=1 && player.getVolume() <= 15){
  351.         player.setVolume(0);
  352.     }if(player.getVolume() == 0){
  353.         player.setVolume(100);
  354.     }
  355. }
  356.  
  357. function lAlign(){
  358. if(document.getElementById('url_panel')){
  359.   document.getElementById('url_panel').style = "left: 0px; top: 0px; width: 100wv !important;"
  360.   document.getElementById('imvuContent').align = "left";
  361.     var links = document.getElementsByTagName("a");
  362.     for(var i=0;i<links.length;i++)
  363.    {
  364.        if(links[i].href)
  365.        {
  366.            links[i].style.color = '#FFF';  
  367.        }
  368.    }
  369. }
  370. }
  371.  
  372. </script>
Advertisement
Add Comment
Please, Sign In to add comment