site

my website
git clone https://xfnw.ttm.sh/git/site.git
Log | Files | Refs

countdown.html (3815B)

      1 
      2 <!DOCTYPE HTML>
      3 <html>
      4 <head>
      5 <meta name="viewport" content="width=device-width, initial-scale=1">
      6 <style>
      7 h1, h2 {
      8 	font-weight: 100
      9 }
     10 
     11 @keyframes flash {
     12 50% { opacity: 0; }
     13 }
     14 h1::after {
     15 content: "\2588";
     16 animation: flash 0.7s step-end infinite;
     17 }
     18 h1 {
     19   text-align: center;
     20   font-size: 110px;
     21   margin:0;
     22   margin-top: 50px;
     23   margin-bottom: 0px;
     24   font-family: monospace;
     25   color: #5d5;
     26   font-weight: 100;
     27 }
     28 h2 {
     29   text-align: center;
     30   font-family: monospace;
     31   color: #5d5;
     32   font-size: 40px;
     33   margin:0;
     34   margin-top: 60px;
     35   font-weight: 100;
     36 }
     37 body {
     38   background-image: url('https://xfnw.ttm.sh/fox.png');
     39   background-color: #121213;
     40   background-size:256px;
     41   border-radius:32px;
     42   background-repeat: no-repeat;
     43   background-attachment: fixed;
     44   background-position: center; 
     45   overflow: hidden;
     46   margin:0;
     47   padding:0;
     48 }
     49 
     50 
     51 .blur {
     52         -webkit-filter: url(#blur-filter);
     53         filter: url(#blur-filter);
     54         filter: blur(10px);
     55         animation: blur 2s linear infinite;
     56     }
     57 .blur-svg {
     58         display: none;
     59     }
     60 @keyframes blur {
     61         50% { filter: blur(0px) }
     62        }
     63 
     64 
     65 
     66 .blink {
     67         //animation: blinker 2s linear infinite;
     68         position: fixed;
     69         width: 100%;
     70         opacity: 1;
     71        }
     72       @keyframes blinker {  
     73         0% {transform: translateX(100%);}
     74         50% { opacity: 1; }
     75         100% {transform: translateX(-100%);}
     76        }
     77 
     78 .blinkb {
     79         background: #121213;
     80         animation: blinkers 2s linear infinite;
     81         position: fixed;
     82         margin: 0px;
     83         top: 0px;
     84         left: 0px;
     85         width: 100%;
     86         height: 100%;
     87         opacity: 0;
     88         z-index: 1;
     89        }
     90       @keyframes blinkers {
     91         50% { opacity: 0; }
     92        }
     93 
     94 
     95 </style>
     96 
     97 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="blur-svg">
     98     <defs>
     99         <filter id="blur-filter">
    100             <feGaussianBlur stdDeviation="3"></feGaussianBlur>
    101         </filter>
    102     </defs>
    103 </svg>
    104 
    105 </head>
    106 <body>
    107 
    108 <h1 id="timer" class="blink"></h1>
    109 <h2 id="message"></h2>
    110 
    111 <div class="blinkb"></div>
    112 
    113 <script>
    114 // get the query string
    115 function getQueryVariable(variable) {
    116        var query = window.location.search.substring(1);
    117        var vars = query.split("&");
    118        for (var i=0;i<vars.length;i++) {
    119                var pair = vars[i].split("=");
    120                if(pair[0] == variable){return pair[1];}
    121        }
    122        return(false);
    123 }
    124 
    125 // better replacing
    126 String.prototype.replaceAll = function(search, replacement) {
    127     var target = this;
    128     return target.replace(new RegExp(search, 'g'), replacement);
    129 };
    130 
    131 // Set the date were counting down to
    132 var countDownDate = new Date(decodeURI(getQueryVariable("time"))).getTime();
    133 
    134 // set the text
    135 document.getElementById('message').innerHTML = getQueryVariable("text").replaceAll("%20", " ");
    136 
    137 // Update the count down every 1 second
    138 var x = setInterval(function() {
    139 
    140   // Get todays date and time
    141   var now = new Date().getTime();
    142     
    143   // Find the distance between now and the count down date
    144   var distance = countDownDate - now;
    145     
    146   // Time calculations for days, hours, minutes and seconds
    147   var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    148   var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    149   var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    150   var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    151     
    152   // Output the result in an element with id="demo"
    153   document.getElementById("timer").innerHTML = days + "d " + hours + "h "
    154   + minutes + "m " + seconds + "s";
    155     
    156   // If the count down is over, write some text 
    157   if (distance < 0) {
    158     clearInterval(x);
    159     document.getElementById("timer").innerHTML = "Stream Starting... Please Wait...";
    160   }
    161 }, 1000);
    162 </script>
    163 
    164 </body>
    165 </html>
    166