API tools faq
paste
Advertisement
Guest User

Counter webpage

a guest
Feb 21st, 2019
145
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 8.37 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Counter</title>
  5. <meta charset="utf-8" />
  6. <meta HTTP-EQUIV=Content-Language Content=hu>
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8. <meta name="theme-color" content="RoyalBlue">
  9.  
  10. <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
  11. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  12.  
  13. <style>
  14.  
  15. .footer {
  16.   position: fixed;
  17.   right: 3%;
  18.   bottom: 10%;
  19.   height: 5%;
  20.   width: 20%;
  21.   font-size: 2em;
  22.   background-color: dark;
  23.   color: white;
  24.   text-align: center;
  25. }
  26.  
  27. #counter {
  28.   text-align: center;
  29.   margin: 550px auto;
  30.   display: block;
  31.   font-size: 3em;
  32.   color: #282828;
  33. }
  34. @media (max-width: 500px) {
  35.   #counter {
  36.     font-size: 1.5em;
  37.   }
  38. }
  39. #counter span, #counter i {
  40.   display: inline-block;
  41.   vertical-align: middle;
  42. }
  43. #counter span {
  44.   font-family: sans-serif;
  45.   text-align: center;
  46.   min-width: 45px;
  47.   text-rendering: optimizeLegibility;
  48.   position: relative;
  49.   background-color: #353535;
  50.   margin: 0 2px;
  51.   padding: 5px;
  52.   color: white;
  53.   border-radius: 5px;
  54.   box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.4);
  55.   border: 1px solid black;
  56.   text-shadow: 0 0 2px black;
  57. }
  58. #counter span.days {
  59.   margin-right: 20px;
  60. }
  61. #counter span.days:before {
  62.   content: "NAP";
  63. }
  64. #counter span.hours:before {
  65.   content: "ÓRA";
  66. }
  67. #counter span.minutes:before {
  68.   content: "PERC";
  69. }
  70. #counter span.seconds:before {
  71.   content: "SEC";
  72. }
  73. #counter span:before {
  74.   top: -20px;
  75.   position: absolute;
  76.   left: 0;
  77.   right: 0;
  78.   display: block;
  79.   color: black;
  80.   font-size: 0.35em;
  81.   text-shadow: none;
  82. }
  83. #counter span:after {
  84.   content: "";
  85.   position: absolute;
  86.   top: 50%;
  87.   left: 0;
  88.   right: 0;
  89.   height: 1px;
  90.   margin-top: 0.5px;
  91.   background-color: black;
  92.   box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
  93. }
  94. #counter i {
  95.   font-style: normal;
  96. }
  97.  
  98. body {
  99.   width: 100%;
  100.   height: 100%;
  101.   position: fixed;
  102.   background-color: #34495e;
  103. }
  104.  
  105. .content {
  106.   position: absolute;
  107.   top: 30%;
  108.   left: 50%;
  109.   -webkit-transform: translate(-50%, -50%);
  110.           transform: translate(-50%, -50%);
  111.   height: 160px;
  112.   overflow: hidden;
  113.   font-family: 'Lato', sans-serif;
  114.   font-size: 35px;
  115.   line-height: 40px;
  116.   color: #ecf0f1;
  117. }
  118. .content__container {
  119.   font-weight: 600;
  120.   overflow: hidden;
  121.   height: 40px;
  122.   padding: 0 40px;
  123. }
  124. .content__container:before {
  125.   content: '[';
  126.   left: 0;
  127. }
  128. .content__container:after {
  129.   content: ']';
  130.   position: absolute;
  131.   right: 0;
  132. }
  133. .content__container:after, .content__container:before {
  134.   position: absolute;
  135.   top: 0;
  136.   color: #16a085;
  137.   font-size: 42px;
  138.   line-height: 40px;
  139.   -webkit-animation-name: opacity;
  140.   -webkit-animation-duration: 2s;
  141.   -webkit-animation-iteration-count: infinite;
  142.   animation-name: opacity;
  143.   animation-duration: 2s;
  144.   animation-iteration-count: infinite;
  145. }
  146. .content__container__text {
  147.   display: inline;
  148.   float: left;
  149.   margin: 0;
  150. }
  151. .content__container__list {
  152.   margin-top: 0;
  153.   padding-left: 10px;
  154.   text-align: left;
  155.   list-style: none;
  156.   -webkit-animation-name: change;
  157.   -webkit-animation-duration: 10s;
  158.   -webkit-animation-iteration-count: infinite;
  159.   animation-name: change;
  160.   animation-duration: 10s;
  161.   animation-iteration-count: infinite;
  162. }
  163. .content__container__list__item {
  164.   line-height: 40px;
  165.   margin: 0;
  166. }
  167.  
  168. @-webkit-keyframes opacity {
  169.   0%, 100% {
  170.     opacity: 0;
  171.   }
  172.   50% {
  173.     opacity: 1;
  174.   }
  175. }
  176. @-webkit-keyframes change {
  177.   0%, 12.66%, 100% {
  178.     -webkit-transform: translate3d(0, 0, 0);
  179.             transform: translate3d(0, 0, 0);
  180.   }
  181.   16.66%, 29.32% {
  182.     -webkit-transform: translate3d(0, -25%, 0);
  183.             transform: translate3d(0, -25%, 0);
  184.   }
  185.   33.32%,45.98% {
  186.     -webkit-transform: translate3d(0, -50%, 0);
  187.             transform: translate3d(0, -50%, 0);
  188.   }
  189.   49.98%,62.64% {
  190.     -webkit-transform: translate3d(0, -75%, 0);
  191.             transform: translate3d(0, -75%, 0);
  192.   }
  193.   66.64%,79.3% {
  194.     -webkit-transform: translate3d(0, -50%, 0);
  195.             transform: translate3d(0, -50%, 0);
  196.   }
  197.   83.3%,95.96% {
  198.     -webkit-transform: translate3d(0, -25%, 0);
  199.             transform: translate3d(0, -25%, 0);
  200.   }
  201. }
  202. @keyframes opacity {
  203.   0%, 100% {
  204.     opacity: 0;
  205.   }
  206.   50% {
  207.     opacity: 1;
  208.   }
  209. }
  210. @keyframes change {
  211.   0%, 12.66%, 100% {
  212.     -webkit-transform: translate3d(0, 0, 0);
  213.             transform: translate3d(0, 0, 0);
  214.   }
  215.   16.66%, 29.32% {
  216.     -webkit-transform: translate3d(0, -25%, 0);
  217.             transform: translate3d(0, -25%, 0);
  218.   }
  219.   33.32%,45.98% {
  220.     -webkit-transform: translate3d(0, -50%, 0);
  221.             transform: translate3d(0, -50%, 0);
  222.   }
  223.   49.98%,62.64% {
  224.     -webkit-transform: translate3d(0, -75%, 0);
  225.             transform: translate3d(0, -75%, 0);
  226.   }
  227.   66.64%,79.3% {
  228.     -webkit-transform: translate3d(0, -50%, 0);
  229.             transform: translate3d(0, -50%, 0);
  230.   }
  231.   83.3%,95.96% {
  232.     -webkit-transform: translate3d(0, -25%, 0);
  233.             transform: translate3d(0, -25%, 0);
  234.   }
  235. }
  236.  
  237. .btn {
  238.   background-color: #34495e;
  239.   border: none;
  240.   color: white;
  241.   padding: 12px 16px;
  242.   font-size: 25px;
  243.   cursor: pointer;
  244.   border-radius: 12px;
  245. }
  246.  
  247. .btn:hover {
  248.   background-color: RoyalBlue;
  249. }
  250. </style>
  251. </head>
  252. <body>
  253. <form action="/">
  254.     <button href="/" class="btn"><i class="fa fa-home"></i> Home</button>
  255. </form>
  256.  
  257. <div class="content">
  258.   <div class="content__container">
  259.     <ul class="content__container__list">
  260.       <li class="content__container__list__item">A doboz</li>
  261.       <li class="content__container__list__item">Kinyilásáig</li>
  262.       <li class="content__container__list__item">Hátralévő</li>
  263.       <li class="content__container__list__item">Idő</li>
  264.     </ul>
  265.   </div>
  266. </div>
  267.  
  268. <div id="counter"></div>
  269.  
  270. <div class="footer bg-dark">
  271. <dt>Doboz Ébren:</dt><span id="uptime">up</span>
  272. </div>
  273.  
  274. </body>
  275. <script>
  276.  
  277. function sendData(e){
  278.   var t=new XMLHttpRequest;t.onreadystatechange=function()
  279.   {4==this.readyState&&200==this.status&&(document.getElementById("LEDState").innerHTML=this.responseText)
  280.  },ledstate="setLED?LEDstate="+e,t.open("GET",ledstate,!0),t.send()}function getData()
  281.  {var e;
  282.   (e=new XMLHttpRequest).onreadystatechange=function(){4==this.readyState&&200==this.status&&(document.getElementById("uptime").innerHTML=this.responseText)},
  283.  e.open("GET","readtimestring",!0),e.send()
  284.  }setInterval(function(){getData()},1e3);
  285.  
  286. //counts up or down depending on date entered in //format at the bottom
  287.  
  288. function counter(date) {
  289.   var theDate = new Date(date);
  290.   var _second = 1000;
  291.   var _minute = _second * 60;
  292.   var _hour = _minute * 60;
  293.   var _day = _hour * 24;
  294.   var timer;
  295.  
  296.  
  297.   function count() {
  298.  
  299.     var now = new Date();
  300.     if (theDate > now) {
  301.       var distance = theDate - now;
  302.       if(distance  <= 1500){
  303.      //window.location.href = "motor";
  304.      }
  305.      
  306.      if (distance < 0) {
  307.        clearInterval(timer);
  308.        return;
  309.      }
  310.    } else {
  311.      var distance = now - theDate;
  312.      if (distance < 0) {
  313.        clearInterval(timer);
  314.        return;
  315.      }
  316.    }
  317.    var days = Math.floor(distance / _day);
  318.    var hours = Math.floor((distance % _day) / _hour);
  319.    if (hours < 10) {
  320.      hours = '0' + hours;
  321.      console.log(hours);
  322.    }
  323.    var minutes = Math.floor((distance % _hour) / _minute);
  324.    if (minutes < 10) {
  325.      minutes = '0' + minutes;
  326.      console.log(minutes);
  327.    }
  328.    var seconds = Math.floor((distance % _minute) / _second);
  329.    if (seconds < 10) {
  330.      seconds = '0' + seconds;
  331.      console.log(seconds);
  332.    }
  333.    var daytext = '';
  334.    if (days > 1) {
  335.       daytext = ' days ';
  336.     } else {
  337.       daytext = ' day ';
  338.     }
  339.     if (days > 0) {
  340.       document.getElementById('counter').innerHTML = '<span class="days">' + days + '</span>' + '<span class="hours">' + hours + '</span>' + '<i> : </i>' + '<span class="minutes">' + minutes + '</span>' + '<i> : </i>' + '<span class="seconds">' + seconds + '</span>';
  341.     } else {
  342.       document.getElementById('counter').innerHTML = '<span class="hours">' + hours + '</span>' + '<i> : </i>' + '<span class="minutes">' + minutes + '</span>' + '<i> : </i>' + '<span class="seconds">' + seconds + '</span>';
  343.     }
  344.   }
  345.   timer = setInterval(count, 1000);
  346. }
  347.  
  348. counter('03/21/2019 21:11:00 UTC+1 (CET)');
  349. </script>
  350. </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!