API tools faq
paste
Advertisement
RyukiChan

B

RyukiChan
Jun 1st, 2020
137
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 26.26 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>Somebody to You</title>
  5.         <meta charset="utf-8">
  6.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.         <link rel="icon" href="https://gamepedia.cursecdn.com/minecraft_gamepedia/a/a7/Heart.svg?version=dac1a46352ab4c25ad78a3cef0ceea86">
  8.         <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  9.         <style type="text/css">
  10. /** Regular */
  11. @font-face {
  12.   font-family: "SF Display";
  13.   font-weight: 400;
  14.   src: url("https://sf.abarba.me/SF-UI-Display-Regular.otf");
  15. }
  16. /** Semibold */
  17. @font-face {
  18.   font-family: "SF Display";
  19.   font-weight: 600;
  20.   src: url("https://sf.abarba.me/SF-UI-Display-Semibold.otf");
  21. }
  22.  
  23. /** Thin */
  24. @font-face {
  25.   font-family: "SF Display";
  26.   font-weight: 300;
  27.   src: url("https://sf.abarba.me/SF-UI-Display-Thin.otf");
  28. }
  29. /** Bold */
  30. @font-face {
  31.   font-family: "SF Display";
  32.   font-weight: 700;
  33.   src: url("https://sf.abarba.me/SF-UI-Display-Bold.otf");
  34. }
  35.         *{
  36.             font-family: SF Display;
  37.             cursor: default;
  38.             -webkit-user-select: none;
  39.             -khtml-user-select: none;
  40.             -moz-user-select: none;
  41.             -ms-user-select: none;
  42.             -o-user-select: none;
  43.             user-select: none;
  44.         }
  45.         body{
  46.             overflow: hidden;
  47.             background-image: url();
  48.             background-size: 100%;
  49.             margin: 0;
  50.             padding: 0;
  51.         }
  52.         .cc{
  53.             position: fixed;
  54.             color: #FFFFFF30;
  55.             z-index: 10;
  56.             top: 0;
  57.             right: 0;
  58.             font-size: 10pt;
  59.             font-weight: lighter;
  60.         }
  61.         img{
  62.             width: 100vw;
  63.             height: 100vh;
  64.             object-fit: cover;
  65.             position: absolute;
  66.         }
  67.         .preload{
  68.             position: absolute;
  69.             height: 100vh;
  70.             line-height: 100vh;
  71.             width: 100vw;
  72.             background: #000000E0;
  73.             backdrop-filter: blur(10px);
  74.             font-weight: lighter;
  75.             font-size: 20pt;
  76.             z-index: 100;
  77.             text-align: center;
  78.             color: #FFFFFF;
  79.             opacity: 1;
  80.             transition: all ease 1s;
  81.             font-family: monospace;
  82.         }
  83.         .container{
  84.             position: absolute;
  85.             width: 100vw;
  86.             height: 100vh;
  87.         }
  88.         .myoverlay{
  89.             backdrop-filter: blur(7px);
  90.         }
  91.         .mywindow{
  92.             background: #ECECEC;
  93.             position: absolute;
  94.             left: calc(50% - 250px);
  95.             top: calc(50% - 120px);
  96.             font-size: 12pt;
  97.             border-radius: 10px;
  98.             border: 1px solid #C6C6C6;
  99.             box-shadow: 0px 0px 10px #00000020;
  100.            
  101.         }
  102.         .myanimated{
  103.             transition: all ease 0.3s;
  104.         }
  105.         .mycontrol{
  106.             position: absolute;
  107.             display: inline-block; 
  108.             height: 30px;
  109.             left: 10px;
  110.             padding: 0px 5px;
  111.         }
  112.         @media all and (max-width: 1024px){
  113.         .myheader{
  114.             color: #767676;
  115.             text-align: center;
  116.             font-weight: bold;
  117.             display: inline-block;
  118.             width: 100%;
  119.             height: 30px;
  120.             line-height: 30px;
  121.             border-radius: 10px 10px 0 0;
  122.             background: rgb(209,209,209);
  123.             background: linear-gradient(0deg, rgba(209,209,209,1) 0%, rgba(229,229,232,1) 100%);
  124.             border-bottom: 1px solid #C6C6C6;
  125.  
  126.         }
  127.         .myclose, .mymini, .mymax{
  128.             display: inline-block;
  129.             width: 12px;
  130.             height: 12px;
  131.             margin-top: 8px;
  132.             border-radius: 10px;
  133.             margin-right: 2px;
  134.         }
  135.         .myclose{
  136.             background: #FE5D56;
  137.             border: 1px solid #EA3E4A;
  138.         }
  139.         .myclose:hover{
  140.             background: #EA3E4A;
  141.         }
  142.         .mymini{
  143.             background: #F6BD28;
  144.             border: 1px solid #F8AE1C;
  145.         }
  146.         .mymini:hover{
  147.             background: #F8AE1C;
  148.         }
  149.         .mymax{
  150.             background: #26CD3C;
  151.             border: 1px solid #4BBA54;
  152.         }
  153.         .mymax:hover{
  154.             background: #4BBA54;
  155.         }
  156.         .mybody{
  157.             padding: 30px;
  158.             padding-bottom: 100px;
  159.         }
  160.         .mytitle{
  161.             font-weight: bold;
  162.             font-size: 14pt;
  163.             margin-bottom: 10px;
  164.         }
  165.         .mycontent{
  166.  
  167.         }
  168.         .mytext{
  169.             width: 350px;
  170.             border-radius: 7px;
  171.             padding: 5px;
  172.             margin-left: 10px;
  173.             box-sizing: border-box;
  174.             border: 3px solid #dcdcdca0;
  175.             -webkit-transition: 0.3s;
  176.             transition: 0.3s;
  177.             outline: none;
  178.         }
  179.         .mytext:focus{
  180.             border: 3px solid rgba(10,107,254,0.5);
  181.             /*transform: translateY(-2px);*/
  182.         }
  183.         .mytext:hover{
  184.             cursor: text;
  185.         }
  186.         .mybutton{
  187.             position: absolute;
  188.             height: 30px;
  189.             line-height: 30px;
  190.             bottom: 20px;
  191.             right: 20px;
  192.         }
  193.         .mybuttonyes, .mybuttonno{
  194.             display: inline-block;
  195.             width: 80px;
  196.             background: cyan;
  197.             height: 30px;
  198.             line-height: 30px;
  199.             margin-top: 0px;
  200.             text-align: center;
  201.             border-radius: 5px;
  202.             margin-left: 10px;
  203.             font-weight:  600;
  204.         }
  205.         .mybuttonyes{
  206.             background: rgb(10,107,254);
  207.             background: linear-gradient(0deg, rgba(10,107,254,1) 0%, rgba(106,163,252,1) 100%);
  208.             color: #FFFFFF;
  209.             border: 1px solid #015FFC;
  210.         }
  211.         .mybuttonyes:hover{
  212.             background: rgb(10,107,254);
  213.         }
  214.         .mybuttonno{
  215.             background: #FFFFFF;
  216.             border: 1px solid #C6C6C6;
  217.         }
  218.         .mybuttonno:hover{
  219.             background: #EDEDED;
  220.         }
  221.         .myresize{
  222.             width: 15px;
  223.             height: 15px;
  224.             position: absolute;
  225.             right: 0;
  226.             bottom: 0;
  227.             cursor: se-resize;
  228.         }
  229.         .vidcont{
  230.             width: 100vw;
  231.             height: 100vh;
  232.             position: absolute;
  233.             display: none;
  234.             background: #000000A0;
  235.             z-index: 2;
  236.         }
  237.         .myhide{
  238.             display: none;
  239.         }
  240.         .vidcont:hover{
  241.             cursor: none;
  242.         }
  243.         video:hover{
  244.             cursor: none;
  245.         }
  246.         video{
  247.             position: relative;
  248.             left: 0;
  249.             top: 0;
  250.             opacity: 1;
  251.         }
  252.         .divvideo{
  253.             width: 688px;
  254.             height: 576px;
  255.             border-radius: 20px;
  256.             overflow: hidden;
  257.             position: relative;
  258.             top: 50%;
  259.             left: 50%;
  260.             transform: translate(-50%,-50%);
  261.             z-index: 10;
  262.         }
  263.         .myclock{
  264.             display: none;
  265.             position: absolute;
  266.             z-index: 2;
  267.             color: #FFFFFF;
  268.             text-align: center;
  269.             width: calc(100vw - 50px);
  270.             padding: 25px;
  271.         }
  272.         .contjam{
  273.             position: absolute;
  274.             width: 100%;
  275.             top: 50vh;
  276.             left: 0;
  277.             transform: translateY(-50%);
  278.             text-align: center;
  279.             margin: 0;
  280.             padding: 0;
  281.         }
  282.         .jam{
  283.             position: relative;
  284.             font-size: 100px;
  285.             font-weight: 300;
  286.         }
  287.         .tanggal{
  288.             position: relative;
  289.             font-size: 20px;
  290.             margin-top: 15px;
  291.         }
  292.         .ucapan{
  293.             position: relative;
  294.             color: #000000;
  295.             font-size: 20px;
  296.             margin-top: 50px;
  297.             background: #EAEAEA90;
  298.             left: calc(50% - 220px - 20px);
  299.             width: 440px;
  300.             padding: 30px 20px;
  301.             border-radius: 25px;
  302.             transition: all ease 0.3s;
  303.         }
  304.         .ucapan:active{
  305.             transform: scale(1.02);
  306.         }
  307.         .ucapan:hover, .ucapan *:hover{
  308.             cursor: pointer;
  309.         }
  310.         .ucapan::before{
  311.             content: 'ketuk untuk mencari';
  312.             font-size: 12pt;
  313.             width: 200px;
  314.             height: 50px;
  315.             line-height: 50px;
  316.             left: 50%;
  317.             bottom: -80px;
  318.             background: #FFFFFFB0;
  319.             position: absolute;
  320.             z-index: 99;
  321.             border-radius: 10px;
  322.             transform: translateX(-50%);
  323.             opacity: 0;
  324.             transition: all ease 0.3s;
  325.             pointer-events: none;
  326.         }
  327.         .ucapan:hover::before{
  328.             bottom: -60px;
  329.             opacity: 1;
  330.         }
  331.         .myakun{
  332.             color: #FFFFFF;
  333.             background: #00000080;
  334.             transform: translateY(0px);
  335.             width: 200px;
  336.             height: 30px;
  337.             line-height: 30px;
  338.             border-radius: 5px;
  339.             display: inline-block;
  340.             margin: 3px 2px;
  341.             transition: background ease 0.3s;
  342.             backdrop-filter: blur(10px);
  343.         }
  344.         .myakun:hover{
  345.             background: #000000E0;
  346.             cursor: pointer;
  347.         }
  348.         #nama *{
  349.             transition: all ease 0.3s;
  350.         }
  351.         #nama:hover{
  352.             cursor: default;
  353.         }
  354.         #nama::before{
  355.             content: 'ketuk untuk mengubah';
  356.             width: 200px;
  357.             height: 50px;
  358.             line-height: 50px;
  359.             left: 0;
  360.             top: 45px;
  361.             background: #00000090;
  362.             position: absolute;
  363.             z-index: 99;
  364.             border-radius: 10px;
  365.             transition: all ease 0.3s;
  366.             opacity: 0;
  367.             pointer-events: none;
  368.         }
  369.         #nama:hover::before{
  370.             top: 35px;
  371.             opacity: 1;
  372.         }
  373.         #nama *:hover, #textcari:hover{
  374.             cursor: text;
  375.             color: #FFFFFFA0;
  376.         }
  377.         #oke:hover{
  378.             background: #FFFFFF30;
  379.             cursor: pointer;
  380.         }
  381.         .tombolcari:hover{
  382.             background: rgb(10,107,254);
  383.             color: #FFFFFF;
  384.         }
  385.         .shortcut{
  386.             position: fixed;
  387.             bottom: 0;
  388.             width: 100px;
  389.             height: 70px;
  390.             line-height: 70px;
  391.             background: #FFFFFF10;
  392.             margin: 10px;
  393.             border-radius: 20px;
  394.             cursor: pointer;
  395.             transition: transform ease 0.3s;
  396.             backdrop-filter: blur(3px);
  397.         }
  398.         .shortcut:hover{
  399.             transform: scale(1.1);
  400.             backdrop-filter: blur(5px);
  401.         }
  402.         .shortcut:active{
  403.             transform: scale(0.9);
  404.             backdrop-filter: blur(5px);
  405.         }
  406.         .kiri{
  407.             left: 0;
  408.         }
  409.         .kanan{
  410.             right: 0;
  411.         }
  412.       }
  413.         @media all and (max-width: 438px){
  414.             body *{
  415.                 display: none;
  416.             }
  417.             body:after{
  418.                 content: 'Tidak Bisa Menampilkan Halaman Ubah Situs Desktop Dulu Yang:V';
  419.                 text-align: center;
  420.                 position: absolute;
  421.                 height: 100vh;
  422.                 font-size: 20px;
  423.                 top: calc(50% - 10px);
  424.             }
  425.           }
  426.       </style>
  427.     </head>
  428.     <body onload="init()">
  429.         <audio id="myAudio">
  430.             <source src="music.mp3" type="audio/mpeg">
  431.             Your browser does not support the audio element.
  432.         </audio>
  433.         <audio id="myOpening">
  434.             <source src="opening.mp3" type="audio/mpeg">
  435.             Your browser does not support the audio element.
  436.         </audio>
  437.         <div class="preload">PLEASE WAIT</div>
  438.         <div class="vidcont myoverlay">
  439.             <div class="divvideo">
  440.                 <video id="myVideo" width="100%" height="100%">
  441.                   <source src="video.mp4" type="video/mp4">
  442.                   Your browser doe`s not support HTML5 video.
  443.                 </video>
  444.             </div>
  445.         </div>
  446.         <img src="wp2.png">
  447.         <div class="container">
  448.             <div class="myclock">
  449.                 <div class="myakun" id="nama">
  450.                     <span id="spannama3" onclick="gantinama()"></span>
  451.                 </div>
  452.                 <div class="myakun" onclick="kembali()">Kembali</div>
  453.                 <div class="myakun" onclick="reverse()">Reset</div>
  454.                 <div class="contjam">
  455.                     <div class="jam">-:-</div>
  456.                     <div class="tanggal">-</div>
  457.                     <div class="ucapan myoverlay" onclick="carigoogle()"><span id="spannama2"></span></div>
  458.                 </div>
  459.                 <div class="shortcut kanan" onclick="toggleFullscreen()">fullscreen</div>
  460.                 <div class="shortcut kiri" onclick="wpblur()">blur</div>
  461.             </div>
  462.             <div class="mywindow" id="myform" style="width: 500px; height: 240px">
  463.                 <div class="myheader">
  464.                     Registrasi
  465.                 </div>
  466.                 <div class="mybody">
  467.                     <div class="mytitle">
  468.                         Isi identitas anda terlebih dahulu
  469.                     </div>
  470.                     <div class="mycontent">
  471.                         Tekan tombol merah untuk reset nama.<br><br>
  472.                         Nama :
  473.                         <input class="mytext" type="text" id="mynama" name="nama">
  474.                     </div>
  475.                     <div class="mybutton">
  476.                         <div class="mybuttonyes" onclick="mywrite()">oke</div>
  477.                     </div>
  478.                 </div> 
  479.             </div>
  480.             <div class="mywindow myanimated myhide" id="mywindow" style="width: 500px; height: 240px">
  481.                 <div class="mycontrol">
  482.                     <div class="myclose" onclick="reverse()"></div>
  483.                     <div class="mymini"></div>
  484.                     <div class="mymax"></div>
  485.                 </div>
  486.                 <div class="myheader" id="mywindowheader">
  487.                     halo <span id="spannama"></span>
  488.                 </div>
  489.                 <div class="mybody">
  490.                     <div class="mytitle">
  491.                         Aku sejak lama suka padamu.
  492.                     </div>
  493.                     <div class="mycontent">
  494.                         Maukah kau menjadi orang yang selalu ada disisiku, yang selalu ada disaat senang ataupun susah, yang selalu ada sampai akhir hayatku?
  495.                     </div>
  496.                     <div class="mybutton">
  497.                         <div class="mybuttonno" onmouseover="move()" onclick="move2()" >tidak</div>
  498.                         <div class="mybuttonyes" onclick="playVid()">iya</div>
  499.                     </div>
  500.                 </div>
  501.                 <div class="myresize"></div>
  502.             </div>
  503.         </div>
  504.         <span style="position: absolute; text-align: center; line-height: 100vh; width: 100vw; z-index:-10;">jangan dijual bos</span>
  505.         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  506.         <script type="text/javascript">
  507.             /*
  508.  
  509.             referensi
  510.  
  511.             https://www.w3schools.com/howto/howto_js_draggable.asp
  512.             https://stackoverflow.com/questions/2310734/how-to-make-html-text-unselectable
  513.             http://stackoverflow.com/questions/8960193/how-to-make-html-element-resizable-using-pure-javascript/33523184
  514.  
  515.             */
  516.             namaku=localStorage.getItem("nama");
  517.             blur="true";
  518.             $(window).on('load',function(){
  519.                 $('.preload').css('background','#00000000').css('color','#FFFFFF00').css('backdrop-filter','blur(0px)').text('SELESAI').css('z-index','-2');
  520.             });
  521.             function init(){
  522.                 startTime();
  523.                 stopOpening();
  524.                 add='<div class="cc">Uwu:V</div>';
  525.                 $('body').append(add);
  526.                 if(localStorage.getItem("nama") != null && localStorage.getItem("checked") == "yoi"){
  527.                     namaku=localStorage.getItem("nama");
  528.                     myclock();
  529.                 }else if(localStorage.getItem("nama") != null){
  530.                     mystart();
  531.                 }
  532.                 if(localStorage.getItem("blur")=="true"){
  533.                     wpblur();
  534.                 }
  535.  
  536.             }
  537.             $('img').on('dragstart', function(event) { event.preventDefault(); });
  538.             dragElement(document.getElementById("mywindow"));
  539.             function dragElement(elmnt) {
  540.               var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  541.               if (document.getElementById(elmnt.id + "header")) {
  542.                 document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  543.               } else {
  544.                 elmnt.onmousedown = dragMouseDown;
  545.               }
  546.  
  547.               function dragMouseDown(e) {
  548.                 animasi();
  549.                 e = e || window.event;
  550.                 e.preventDefault();
  551.                 pos3 = e.clientX;
  552.                 pos4 = e.clientY;
  553.                 document.onmouseup = closeDragElement;
  554.                 document.onmousemove = elementDrag;
  555.               }
  556.  
  557.               function elementDrag(e) {
  558.                 e = e || window.event;
  559.                 e.preventDefault();
  560.                 pos1 = pos3 - e.clientX;
  561.                 pos2 = pos4 - e.clientY;
  562.                 pos3 = e.clientX;
  563.                 pos4 = e.clientY;
  564.                 elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
  565.                 elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  566.               }
  567.  
  568.               function closeDragElement() {
  569.                 document.onmouseup = null;
  570.                 document.onmousemove = null;
  571.                 animasi();
  572.               }
  573.             }
  574.  
  575.             var mywindow = document.querySelector('#mywindow');
  576.             var myresize = document.querySelector('.myresize');
  577.             myresize.addEventListener('mousedown', initDrag, false);
  578.             var startX, startY, startWidth, startHeight;
  579.             function initDrag(e) {
  580.                startX = e.clientX;
  581.                startY = e.clientY;
  582.                startWidth = parseInt(document.defaultView.getComputedStyle(mywindow).width, 10);
  583.                startHeight = parseInt(document.defaultView.getComputedStyle(mywindow).height, 10);
  584.                document.documentElement.addEventListener('mousemove', doDrag, false);
  585.                document.documentElement.addEventListener('mouseup', stopDrag, false);
  586.             }
  587.  
  588.             function doDrag(e) {
  589.                mywindow.style.width = (startWidth + e.clientX - startX) + 'px';
  590.                mywindow.style.height = (startHeight + e.clientY - startY) + 'px';
  591.                 animasi();
  592.             }
  593.  
  594.             function stopDrag(e) {
  595.                 document.documentElement.removeEventListener('mousemove', doDrag, false);
  596.                 document.documentElement.removeEventListener('mouseup', stopDrag, false);
  597.                 animasi();
  598.             }
  599.             var elem = document.documentElement;
  600.             function openFullscreen() {
  601.               if (elem.requestFullscreen) {
  602.                 elem.requestFullscreen();
  603.               } else if (elem.mozRequestFullScreen) { /* Firefox */
  604.                 elem.mozRequestFullScreen();
  605.               } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
  606.                 elem.webkitRequestFullscreen();
  607.               } else if (elem.msRequestFullscreen) { /* IE/Edge */
  608.                 elem.msRequestFullscreen();
  609.               }
  610.             }
  611.             function move(){
  612.                 kali=20;
  613.                 addanimation();
  614.                 random1=(mywindow.offsetTop+(Math.floor(Math.random() * 10)-5)*kali);
  615.                 random2=(mywindow.offsetLeft+(Math.floor(Math.random() * 10)-5)*kali);
  616.                 if(random1>0 && random1<33)random1=33+20;
  617.                 if(random1<0 && random1>-33)random1=-33-20;
  618.                 if(random2>0 && random2<83)random2=83+20;
  619.                 if(random2<0 && random2>-83)random2=-83-20;
  620.                 if(random1==0 && random2==0)random1=-100;
  621.                 mywindow.style.top  = random1 + 'px';
  622.                 mywindow.style.left = random2 + 'px';
  623.                 if(random1<0 || ((random1+mywindow.clientHeight)>window.innerHeight)){
  624.                     mywindow.style.top = "calc(50% - "+mywindow.clientHeight/2+"px)";
  625.                 }
  626.                 if(random2<0  || ((random2+mywindow.clientWidth)>window.innerWidth)){
  627.                     mywindow.style.left = "calc(50% - "+mywindow.clientWidth/2+"px)";
  628.                 }
  629.             }
  630.             function move2(){
  631.                 kali=50;
  632.                 addanimation();
  633.                 random1=(mywindow.offsetTop+(Math.floor(Math.random() * 10)-5)*kali);
  634.                 random2=(mywindow.offsetLeft+(Math.floor(Math.random() * 10)-5)*kali);
  635.                 if(random1>0 && random1<33)random1=33+20;
  636.                 if(random1<0 && random1>-33)random1=-33-20;
  637.                 if(random2>0 && random2<83)random2=83+20;
  638.                 if(random2<0 && random2>-83)random2=-83-20;
  639.                 if(random1==0 && random2==0)random1=-100;
  640.                 mywindow.style.top  = random1 + 'px';
  641.                 mywindow.style.left = random2 + 'px';
  642.                 if(random1<0 || ((random1+mywindow.clientHeight)>window.innerHeight)){
  643.                     mywindow.style.top = "calc(50% - "+mywindow.clientHeight/2+"px)";
  644.                 }
  645.                 if(random2<0  || ((random2+mywindow.clientWidth)>window.innerWidth)){
  646.                     mywindow.style.left = "calc(50% - "+mywindow.clientWidth/2+"px)";
  647.                 }
  648.             }
  649.             function addanimation(){
  650.                var element = document.getElementById("mywindow");
  651.                element.classList.add("myanimated");
  652.             }
  653.             function animasi() {
  654.                var element = document.getElementById("mywindow");
  655.                element.classList.toggle("myanimated");
  656.             }
  657.             var vid = document.getElementById("myVideo");
  658.             function playVid() {
  659.                 stopOpening();
  660.                 openFullscreen();
  661.                 $('#myVideo').show();
  662.                 $('.vidcont').fadeIn();
  663.                 localStorage.setItem("checked", "yoi");
  664.                 $('#mywindow').fadeOut(300);
  665.                 vid.play();
  666.             }
  667.             vid.onended = function() {
  668.                 playAudio();
  669.                 $('.vidcont').fadeOut();
  670.                 myclock();
  671.             }
  672.             function capital_letter(str)
  673.             {
  674.                 if (!str){
  675.                     str='noname';
  676.                 }
  677.                 str = str.split(" ");
  678.                 for (var i = 0, x = str.length; i < x; i++) {
  679.                     str[i] = str[i][0].toUpperCase() + str[i].substr(1);
  680.                 }
  681.                 return str.join(" ").substr(0, 20);
  682.             }
  683.             function mywrite(){
  684.                 openFullscreen();
  685.                 playOpening();
  686.                 nama = $('#mynama').val();
  687.                 $('#mynama').val('');
  688.                 nama = capital_letter(nama);
  689.                 localStorage.setItem("nama", nama);
  690.                 namaku=localStorage.getItem("nama");
  691.                 mystart();
  692.             }
  693.             function mystart(){
  694.                 $('#spannama').text(localStorage.getItem("nama"));
  695.                 $('#myform').hide();
  696.                 $('#mywindow').show();
  697.                 resetposisi();
  698.             }
  699.             function reverse(){
  700.                 stopOpening();
  701.                 $('#myform').fadeIn();
  702.                 $('#mywindow').hide();
  703.                 $('.myclock').hide();
  704.                 if(blur=="false"){
  705.                     wpblur();
  706.                 }
  707.                 localStorage.clear();
  708.             }
  709.             function kembali(){
  710.                 stopOpening();
  711.                 localStorage.removeItem("checked");
  712.                 if(blur=="false"){
  713.                     wpblur();
  714.                 }
  715.                 $('#myform').hide();
  716.                 $('#mywindow').fadeIn();
  717.                 $('.myclock').hide();
  718.             }
  719.             function gantinama(){
  720.                 nama=$('#spannama3').text();
  721.                 $("#nama *").remove();
  722.                 $("#nama").append("<input type='text' id='textnama' value='"+nama+"' style='background:#00000000; color:#FFF; outline: none; box-sizing:border-box; border: 0px solid #000;' placeholder='nama' autofocus></input><span id='oke' style='transition: all ease 0.3s; border-radius:5px; width:30px; height:25px; margin-top:2.5px; line-height:25px; position:absolute; right:3px;' onclick='gantinamaok()'>oke</span>");
  723.                 textnama=document.querySelector('#textnama');
  724.                 textnama.autofocus = true;
  725.                 textnama.setSelectionRange(0, textnama.value.length);
  726.                 textnama.addEventListener('keypress', function (e) {
  727.                     if (e.key === 'Enter') {
  728.                       gantinamaok();
  729.                     }
  730.                 });
  731.             }
  732.             function gantinamaok(){
  733.                 textnama=document.querySelector('#textnama');
  734.                 textnama.autofocus = false;
  735.                 nama=$('#textnama').val();
  736.                 nama = capital_letter(nama);
  737.                 localStorage.setItem("nama", nama);
  738.                 $("#nama *").remove();
  739.                 $("#nama").append('<span id="spannama3" onclick="gantinama()">'+localStorage.getItem("nama")+'</span>')
  740.             }
  741.             cari=true;
  742.             selesai=false;
  743.             function carigoogle(){
  744.                 if (cari){
  745.                     cari=false;
  746.                     selesai=false;
  747.                     $('.ucapan').text('');
  748.                     $('.ucapan *').remove();
  749.                     $(".ucapan").append("<input type='text' id='textcari' style='background:#00000000; width:300px; transform:translateX(-70px); color:#000; outline: none; box-sizing:border-box; border: 0px solid #000; font-size:20px' placeholder='cari di sini' autofocus></input><span class='tombolcari'; style='transition: all ease 0.3s; border-radius:10px; width:60px; height:50px; top:calc(50% - 25px); right:90px; line-height:50px; position:absolute;' onclick='cariok()'>cari</span><span class='tombolcari'; style='transition: all ease 0.3s; border-radius:10px; width:60px; height:50px; top:calc(50% - 25px); right:20px; line-height:50px; position:absolute;' onclick='caribatal()'>batal</span>");
  750.                     document.querySelector('#textcari').addEventListener('keyup', function (e) {
  751.                         if (e.key === 'Enter') {
  752.                             cariok();
  753.                         }
  754.                         if(e.key === "Escape") {
  755.                             caribatal();
  756.                         }
  757.                     });
  758.                     document.querySelector('body').addEventListener('keyup', function (e) {
  759.                         if(e.key === "Escape") {
  760.                             caribatal();
  761.                         }
  762.                     });
  763.                 }
  764.                 if(selesai){
  765.                     cari=true;
  766.                 }
  767.             }
  768.             function cariok(){
  769.                 window.open("https://www.google.com/search?q="+$('#textcari').val());
  770.                 caribatal();
  771.             }
  772.             function caribatal(){
  773.                 $('.ucapan *').remove();
  774.                 $(".ucapan").append('<span id="spannama2"></span>');
  775.                 var today = new Date();
  776.                 var h = today.getHours();
  777.                 if(h>23)tulis('malam','seharusnya kamu sudah tidur');
  778.                 else if(h>19)tulis('malam','waktunya mengisi energi');
  779.                 else if(h>18)tulis('petang','selamat menikmati senja');
  780.                 else if(h>14)tulis('sore','selamat menjalani hari');
  781.                 else if(h>13)tulis('siang','tetap semangat')
  782.                 else if(h>9)tulis('siang','selamat bekerja')
  783.                 else if(h>4)tulis('pagi','selamat beraktivitas');
  784.                 else tulis('malam','seharusnya kamu sudah tidur');
  785.                 selesai=true;
  786.             }
  787.             function resetposisi(){
  788.                 mywindow.style.top = "calc(50% - "+mywindow.clientHeight/2+"px)";
  789.                 mywindow.style.left = "calc(50% - "+mywindow.clientWidth/2+"px)";
  790.             }
  791.             document.querySelector('#mynama').addEventListener('keypress', function (e) {
  792.                 if (e.key === 'Enter') {
  793.                   mywrite();
  794.                 }
  795.             });
  796.             function myclock(){
  797.                 $('#spannama3').text(localStorage.getItem("nama"));
  798.                 localStorage.setItem("checked", "yoi");
  799.                 $('#myform').hide();
  800.                 $('#mywindow').hide();
  801.                 $('#myVideo').hide();
  802.                 $('.myclock').show();
  803.             }
  804.             jalan=false;
  805.             function startTime(){
  806.                 var today = new Date();
  807.                 var h = today.getHours();
  808.                 var m = today.getMinutes();
  809.                 var s = today.getSeconds();
  810.                 h = checkTime(h);
  811.                 m = checkTime(m);
  812.                 s = checkTime(s);
  813.                 document.querySelector('.jam').innerHTML =  h + ":" + m;
  814.                 var t = setTimeout(startTime, 500);
  815.                 mytanggal();
  816.                 if(cari){
  817.                     if(h>23)tulis('malam','seharusnya kamu sudah tidur');
  818.                     else if(h>18)tulis('malam','waktunya mengisi energi');
  819.                     else if(h>17)tulis('petang','selamat menikmati senja');
  820.                     else if(h>14)tulis('sore','selamat menjalani hari');
  821.                     else if(h>13)tulis('siang','tetap semangat')
  822.                     else if(h>9)tulis('siang','selamat bekerja')
  823.                     else if(h>4)tulis('pagi','selamat beraktivitas');
  824.                     else tulis('malam','seharusnya kamu sudah tidur');
  825.                     if(h>18)     document.querySelector('img').src="wp1.png";
  826.                     else if(h>4) document.querySelector('img').src="wp2.png";
  827.                     else         document.querySelector('img').src="wp1.png";
  828.                 }
  829.                 if(window.btoa($('.cc').text())!='VXd1OlY='){
  830.                     if(jalan) $('.container').remove();
  831.                     if(jalan) $('img').remove();
  832.                     jalan=true;
  833.                 }
  834.             }
  835.             function tulis(waktu,ucapan){
  836.                 $("#spannama2").text('Selamat '+waktu+' '+localStorage.getItem("nama")+', '+ucapan+'.');
  837.             }
  838.             function checkTime(i) {
  839.                 if (i < 10) {i = "0" + i};
  840.                 return i;
  841.             }
  842.             var elem = document.documentElement;
  843.             fs=false;
  844.             function openFullscreen() {
  845.                 fs=true;
  846.                 if (elem.requestFullscreen) {
  847.                     elem.requestFullscreen();
  848.                 } else if (elem.mozRequestFullScreen) { /* Firefox */
  849.                     elem.mozRequestFullScreen();
  850.                 } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
  851.                     elem.webkitRequestFullscreen();
  852.                 } else if (elem.msRequestFullscreen) { /* IE/Edge */
  853.                     elem.msRequestFullscreen();
  854.                 }
  855.             }
  856.             function toggleFullscreen() {
  857.                 if( window.innerHeight == screen.height){
  858.                     fs=true;
  859.                 }
  860.                 else{
  861.                     fs=false;
  862.                 }
  863.                 if(fs){
  864.                     fs=false;
  865.                     if (document.exitFullscreen) {
  866.                         document.exitFullscreen();
  867.                     } else if (document.mozCancelFullScreen) {
  868.                         document.mozCancelFullScreen();
  869.                     } else if (document.webkitExitFullscreen) {
  870.                         document.webkitExitFullscreen();
  871.                     } else if (document.msExitFullscreen) {
  872.                         document.msExitFullscreen();
  873.                     }
  874.                 }
  875.                 else{
  876.                     openFullscreen();
  877.                 }
  878.              
  879.             }
  880.             function mytanggal(){
  881.                 var hari = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];
  882.                 var bulan = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'Nopember', 'Desember'];
  883.                 var d = new Date();
  884.                 var dayName = hari[d.getDay()];
  885.                 var monthName = bulan[d.getMonth()];
  886.                 tanggal=(dayName+', '+d.getDate()+' '+monthName);
  887.                 $('.tanggal').text(tanggal);
  888.             }
  889.             function wpblur(){
  890.                 $('.container').toggleClass("myoverlay");
  891.                 localStorage.setItem("blur", blur);
  892.                 if(blur=="true"){
  893.                     blur="false";
  894.                 }
  895.                 else{
  896.                     blur="true";
  897.                 }
  898.             }
  899.             function playAudio() {
  900.                 var x = document.getElementById("myAudio");
  901.                 x.volume = 0.15;
  902.                 x.play();
  903.             }
  904.             function playOpening() {
  905.                 var x = document.getElementById("myOpening");
  906.                 x.volume = 0.3;
  907.                 x.play();
  908.                 x.addEventListener("ended",function() {
  909.                     stopOpening();
  910.                 });
  911.             }
  912.             function stopOpening(){
  913.                 var x = document.getElementById("myOpening");
  914.                 x.pause();
  915.                 x.currentTime = 0;
  916.                 var x = document.getElementById("myAudio");
  917.                 x.pause();
  918.                 x.currentTime = 0;
  919.             }
  920.         </script>
  921.     </body>
  922. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!