API tools faq
paste
divinethm

chronos — misc page i: countdowns

divinethm
Feb 20th, 2019
939
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.33 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!--
  5.  
  6. chronos — misc page i: countdowns
  7. by divinethemes
  8.  
  9. › do not steal any part of this code
  10. › edit however you want, but only for personal use
  11. › send any questions to divinethemes.tumblr.com/ask
  12. › thank you for using! <3
  13.  
  14. -------
  15.  
  16. › find :root for changing accent and countdown background color
  17. › most colors are also labeled in case you want things to be different colors
  18. › pls read directions for setting up countdowns carefully
  19.  
  20. -->
  21.  
  22. <title>countdowns — {Name}</title>
  23. <link rel="shortcut icon" href="{Favicon}">
  24.  
  25. <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
  26.  
  27. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  28.  
  29. <!-- tooltips script-->
  30. <script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  31. <script>
  32. (function($){
  33. $(document).ready(function(){
  34. $("[title]").style_my_tooltips({
  35. tip_follows_cursor:true,
  36. tip_delay_time:200,
  37. tip_fade_speed:300
  38. }
  39. );
  40. });
  41. })(jQuery);
  42. </script>
  43.  
  44. <!--font awesome -->
  45. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
  46.  
  47. <!-- honeybee icons by @suiomi -->
  48. <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
  49.  
  50. <!--fonts-->
  51. <link href="https://fonts.googleapis.com/css?family=Fira+Sans:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
  52.  
  53. <link href="https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i" rel="stylesheet">
  54.  
  55. <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i" rel="stylesheet">
  56.  
  57. <style type="text/css">
  58.  
  59. @keyframes fadein {from {opacity:0;}to {opacity:1;}}
  60. @-moz-keyframes fadein {from {opacity:0;}to {opacity:1;}}
  61. @-webkit-keyframes fadein {from {opacity:0;}to {opacity:1;}}
  62. @-o-keyframes fadein {from {opacity:0;}to {opacity: 1;}}
  63.  
  64. /*-- scrollbar --*/
  65. ::-webkit-scrollbar {
  66. width:11px;
  67. background:var(--countdown);
  68. }
  69.  
  70. ::-webkit-scrollbar-thumb {
  71. background:var(--accent);
  72. }
  73.  
  74. ::-webkit-scrollbar,::-webkit-scrollbar-thumb {
  75. border:5px solid #fff;
  76. }
  77.  
  78. /*-- selection --*/
  79. ::-moz-selection { background:#eaeaea; color:#222; }
  80. ::selection { background:#eaeaea; color:#222; }
  81.  
  82. /*-- hide tumblr controls --*/
  83. .tmblr-iframe, .iframe-controls–desktop {display:none !important;}
  84.  
  85. /*-- tooltips --*/
  86. #s-m-t-tooltip {
  87. position:absolute;
  88. padding:0px 5px 0px 5px;
  89. margin-top:30px;
  90. color:#444;
  91. background-color:#f8f8f8;
  92. font-family:'Fira Sans', sans-serif;
  93. font-size:9.5px;
  94. font-style:italic;
  95. text-transform:lowercase;
  96. text-align:center;
  97. border:1px solid #eee;
  98. letter-spacing:0.5px;
  99. z-index:999999;
  100. }
  101.  
  102. /*--general--*/
  103. body {
  104. background-color:#fff;
  105. font-family:'Fira Sans', sans-serif;
  106. font-size:11px;
  107. font-weight:400;
  108. line-height:190%;
  109. text-decoration:none;
  110. color:#555; /* text color */
  111. -moz-osx-font-smoothing:grayscale;
  112. -webkit-font-smoothing:antialiased;
  113. font-smoothing:antialiased;
  114. animation: fadein 2s;
  115. -moz-animation: fadein 2s;
  116. -webkit-animation: fadein 2s;
  117. -o-animation: fadein 2s;
  118. }
  119.  
  120. /*-- change colors here! --*/
  121. :root {
  122. --accent:#d0cfed;
  123. --countdown:#f8f8f8; /* countdown background */
  124. }
  125.  
  126. body, * {
  127. cursor:auto;
  128. }
  129.  
  130. a {
  131. text-decoration:none;
  132. color:#999; /* link color */
  133. -webkit-transition:0.4s ease-in;
  134. -moz-transition:0.4s ease-in;
  135. -o-transition:0.4s ease-in;
  136. }
  137.  
  138. a:hover {
  139. color:var(--accent); /* link hover */
  140. text-decoration:none;
  141. cursor:pointer;
  142. -webkit-transition:0.4s ease-in;
  143. -moz-transition:0.4s ease-in;
  144. -o-transition:0.4s ease-in;
  145. }
  146.  
  147. b, strong {
  148. font-weight:700;
  149. color:#222;
  150. }
  151.  
  152. i, em {
  153. font-style:italic;
  154. }
  155.  
  156. blockquote {
  157. padding-left:10px;
  158. border-left:1px solid #eee;
  159. margin:0px;
  160. }
  161.  
  162. /*-- credit // don't touch --*/
  163. .c {
  164. position:fixed;
  165. bottom:15px;
  166. right:20px;
  167. font-size:10.5px;
  168. -webkit-transition:0.7s ease-in;
  169. -moz-transition:0.7s ease-in;
  170. -o-transition:0.7s ease-in;
  171. }
  172.  
  173. .c:hover {
  174. transform:rotate(540deg);
  175. -webkit-transition:0.7s ease-in;
  176. -moz-transition:0.7s ease-in;
  177. -o-transition:0.7s ease-in;
  178. }
  179.  
  180. .c i:hover {
  181. cursor:pointer;
  182. }
  183.  
  184. /*-- content --*/
  185. #cont {
  186. margin:5% auto;
  187. width:480px;
  188. }
  189.  
  190. /*-- header --*/
  191. #header {
  192. margin:60px 0 0 0;
  193. }
  194.  
  195. .icon {
  196. border-radius:50%;
  197. background:var(--countdown); /* clock icon background color */
  198. height:70px;
  199. width:70px;
  200. z-index:999999;
  201. font-size:40px;
  202. }
  203.  
  204. .icon span {
  205. margin:15px 15px;
  206. color:var(--accent); /* clock icon color */
  207. }
  208.  
  209. /* icon shaking hover effect from w3schools */
  210. #header:hover .icon span {
  211. animation: shake 0.7s;
  212. animation-iteration-count: infinite;
  213. }
  214.  
  215. @keyframes shake {
  216. 0% { transform: translate(1px, 1px) rotate(0deg); }
  217. 10% { transform: translate(-1px, -2px) rotate(-1deg); }
  218. 20% { transform: translate(-3px, 0px) rotate(1deg); }
  219. 30% { transform: translate(3px, 2px) rotate(0deg); }
  220. 40% { transform: translate(1px, -1px) rotate(1deg); }
  221. 50% { transform: translate(-1px, 2px) rotate(-1deg); }
  222. 60% { transform: translate(-3px, 1px) rotate(0deg); }
  223. 70% { transform: translate(3px, 1px) rotate(-1deg); }
  224. 80% { transform: translate(-1px, -1px) rotate(1deg); }
  225. 90% { transform: translate(1px, 2px) rotate(0deg); }
  226. 100% { transform: translate(1px, -2px) rotate(-1deg); }
  227. }
  228.  
  229. #header h1 {
  230. font-family:'Playfair Display', serif;
  231. font-size:16px;
  232. letter-spacing:1.5px;
  233. font-weight:600;
  234. color:#444;
  235. margin-left:100px;
  236. margin-top:-65px;
  237. float:left;
  238. }
  239.  
  240. .links {
  241. float:left;
  242. margin-left:100px;
  243. margin-top:-35px;
  244. }
  245.  
  246. .links a {
  247. padding:3px 4px;
  248. background:var(--countdown); /* header link color */
  249. margin:5px 8px 0 0;
  250. text-transform:lowercase;
  251. }
  252.  
  253. .links a:hover {
  254. background:var(--accent); /* header link hover color */
  255. color:#444;
  256. }
  257.  
  258. /*-- countdowns --*/
  259. .event {
  260. margin:60px 0;
  261. height:70px;
  262. width:400px;
  263. }
  264.  
  265. .date {
  266. background:var(--accent); /* date background color */
  267. text-transform:uppercase;
  268. height:60px;
  269. width:70px;
  270. padding-top:10px;
  271. text-align:center;
  272. float:left;
  273. line-height:170%;
  274. border-radius:50%;
  275. font-size:10px;
  276. }
  277.  
  278. .date:before {
  279. content:'';
  280. background:var(--accent);
  281. width:1px;
  282. height:60px;
  283. position:absolute;
  284. margin-top:-70px;
  285. margin-left:8px;
  286. }
  287.  
  288. .date b {
  289. font-size:21px;
  290. font-weight:400;
  291. display:block;
  292. }
  293.  
  294. .info {
  295. background:var(--countdown); /* countdown background color */
  296. width:calc((480px + 20px) - 160px);
  297. height:30px;
  298. padding:20px;
  299. margin-left:100px;
  300. }
  301.  
  302. .info:before {
  303. content:'';
  304. position:absolute;
  305. width:0;
  306. height:0;
  307. margin-top:5px;
  308. margin-left:-30px;
  309. border-top: 10px solid transparent;
  310. border-bottom: 10px solid transparent;
  311. border-right:10px solid var(--countdown);
  312. -webkit-transition:0.3s ease-in;
  313. -moz-transition:0.3s ease-in;
  314. -o-transition:0.3s ease-in;
  315. }
  316.  
  317. .event:hover .info:before {
  318. border-top: 10px solid transparent;
  319. border-bottom: 10px solid transparent;
  320. border-right:25px solid var(--countdown);
  321. margin-left:-45px;
  322. -webkit-transition:0.3s ease-in;
  323. -moz-transition:0.3s ease-in;
  324. -o-transition:0.3s ease-in;
  325. }
  326.  
  327. .event h1 {
  328. font-family:'Karla', sans-serif;
  329. font-style:italic;
  330. font-size:16px;
  331. font-weight:400;
  332. float:right;
  333. margin-top:65px;
  334. margin-right:-10px;
  335. background:2px var(--accent); /* date "highlight" color */
  336. line-height:50%;
  337. }
  338.  
  339. .countdown {
  340. font-size:13px;
  341. margin-top:5px;
  342. }
  343.  
  344. /*-- media queries --*/
  345. @media only screen
  346. and (max-width: 736px){
  347. .info {
  348. width:55vw;
  349. }
  350.  
  351. .countdown {
  352. margin-top:0;
  353. }
  354.  
  355. }
  356.  
  357. @media only screen
  358. and (max-width: 568px){
  359. .info {
  360. width:50vw;
  361. }
  362. }
  363.  
  364. @media only screen
  365. and (max-width: 667px){
  366. .info {
  367. height:50px;
  368. }
  369. .countdown {
  370. margin-top:0;
  371. }
  372. .event h1 {
  373. margin-top:85px;
  374. }
  375. }
  376.  
  377. </style>
  378. </head>
  379.  
  380. <body>
  381.  
  382. <!-- content start -->
  383. <div id="cont">
  384.  
  385.  
  386. <!-- header -->
  387. <div id="header">
  388.  
  389. <div class="icon"><span class="th th-alarm-clock-1-o"></span></div>
  390. <h1>countdowns</h1> <!-- page title -->
  391.  
  392. <div class="links"> <!-- add or remove as you please, links outside of your blog have to start with http:// -->
  393. <a href="/">index</a>
  394. <a href="/ask">ask</a>
  395. <a href="">link</a>
  396. <a href="http://divinethemes.tumblr.com">credit</a>
  397. </div>
  398.  
  399. </div>
  400. <!-- header end -->
  401.  
  402.  
  403. <!------------------------- countdowns start ----------------------------------
  404.  
  405. EVENT TEMPLATE
  406.  
  407. EVENT TEMPLATE
  408.  
  409. <div class="event">
  410. <div data-date="apr 15 2020" class="date">apr <b>15</b> 2020</div>
  411. <div class="info">
  412. <h1>event name</h1>
  413. <div class="countdown"></div>
  414. </div>
  415. </div>
  416.  
  417. › where it says "apr 15 2020," insert the date in either of the following formats
  418. ISO date : 2020-01-29
  419. short date : 01/29/20
  420. long date : jan 29 2020 OR january 29 2020
  421. with time : 2020-01-29T12:34:30Z (UTC time)
  422. › for the date that shows on this page, you must abbreviate write it as shown
  423. › you don't have time to put anything inside the "countdown" div - if you do it won't show up anyway
  424. › countdowns at least a day old will show "expired" and events that are today will show "today"
  425.  
  426. -->
  427.  
  428.  
  429. <div class="event">
  430. <div data-date="apr 15 2020" class="date">apr<b>15</b>2020</div>
  431. <div class="info">
  432. <h1>event name</h1>
  433. <div class="countdown"></div>
  434. </div>
  435. </div>
  436.  
  437.  
  438. </div>
  439. <!-------------------------- countdowns end ---------------------------------->
  440.  
  441.  
  442. <!-- do not touch thank you -->
  443. <div class="c"><a title="divine themes" target="_blank" href="http://divinethemes.tumblr.com"><i class="fas fa-crown"></i></a>
  444. </div>
  445.  
  446. </body>
  447.  
  448. <script>
  449. // get countdown dates
  450. var i;
  451. var countdowns = document.getElementsByClassName('date').length;
  452. var date;
  453.  
  454. // start loop
  455. for (i = 0; i < countdowns; i++) {
  456.  
  457. (function (i) {
  458.  
  459. // get each countdown date
  460. date = document.getElementsByClassName('date')[i].getAttribute('data-date');
  461. var countdownDate = new Date(date).getTime();
  462.  
  463. // update every 1 second
  464. setInterval(
  465. function countdown () {
  466.  
  467. // now
  468. var today = new Date().getTime();
  469. // get time difference
  470. var timeUntil = countdownDate - today;
  471.  
  472. var msDay = 1000 * 60 * 60 * 24;
  473. var msHour = 1000 * 60 * 60;
  474. var msMin = 1000 * 60;
  475.  
  476. // calculate times
  477. var days = Math.floor(timeUntil / msDay);
  478. var hours = Math.floor(timeUntil % msDay / msHour);
  479. var minutes = Math.floor(timeUntil % msHour / msMin);
  480. var seconds = Math.floor(timeUntil % msMin / 1000);
  481.  
  482. // plural or singular
  483. var daysTxt = ' day';
  484. var hoursTxt = ' hour';
  485. var minutesTxt = ' minute';
  486. var secondsTxt = ' second';
  487.  
  488. function plural (txt) {
  489. return txt += 's ';
  490. }
  491.  
  492. function singular (txt) {
  493. return txt += ' ';
  494. }
  495.  
  496. function which (time, txt) {
  497. if (time > 1) {
  498. return txt = plural(txt);
  499. } else {
  500. return txt = singular(txt);
  501. }
  502. }
  503.  
  504. daysTxt = which(days, daysTxt);
  505. hoursTxt = which(hours, hoursTxt);
  506. minutesTxt = which(minutes, minutesTxt);
  507. secondsTxt = which(seconds, secondsTxt);
  508.  
  509. if (days < -1) {
  510. document.getElementsByClassName('countdown')[i].innerHTML = 'expired';
  511. } else if (days === -1) {
  512. document.getElementsByClassName('countdown')[i].innerHTML = 'today';
  513. } else {
  514. document.getElementsByClassName('countdown')[i].innerHTML = days + daysTxt + hours + hoursTxt + minutes + minutesTxt + seconds + secondsTxt;
  515. }
  516.  
  517.  
  518. }, 1000); // end loop
  519. })(i); // end function (i)
  520. } // end for loop
  521.  
  522. </script>
  523.  
  524.  
  525. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!