countdown.54e10ada.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  1. import{c as D,_ as p,I as _}from"./icon-code.6d7a3662.js";import{d as j,u as M,e as n,B as C,c as T,a as e,j as x,f,g as b,t as l,W as v,w,l as y,o as c}from"./index.c685e846.js";const I=e("ul",{class:"flex space-x-2 rtl:space-x-reverse"},[e("li",null,[e("a",{href:"javascript:;",class:"text-primary hover:underline"},"Components")]),e("li",{class:"before:content-['/'] ltr:before:mr-2 rtl:before:ml-2"},[e("span",null,"Countdown")])],-1),S={class:"pt-5 grid grid-cols-1 xl:grid-cols-2 gap-6"},B={class:"panel"},F={class:"flex items-center justify-between mb-5"},H=e("h5",{class:"font-semibold text-lg dark:text-white-light"},"Simple Countdown",-1),N={class:"flex items-center"},V={class:"mb-5 grid grid-cols-4 justify-items-center gap-3"},Y={class:"w-16 h-16 sm:w-[100px] sm:h-[100px] shadow-[1px_2px_12px_0_rgba(31,45,61,0.10)] rounded border border-[#e0e6ed] dark:border-[#1b2e4b] flex justify-center flex-col"},$={class:"text-primary sm:text-3xl text-xl text-center"},A=e("h4",{class:"text-[#3b3f5c] text-[15px] mt-4 text-center dark:text-white-dark font-semibold"},"Days",-1),E={class:"w-16 h-16 sm:w-[100px] sm:h-[100px] shadow-[1px_2px_12px_0_rgba(31,45,61,0.10)] rounded border border-[#e0e6ed] dark:border-[#1b2e4b] flex justify-center flex-col"},P={class:"text-primary sm:text-3xl text-xl text-center"},W=e("h4",{class:"text-[#3b3f5c] text-[15px] mt-4 text-center dark:text-white-dark font-semibold"},"Hours",-1),q={class:"w-16 h-16 sm:w-[100px] sm:h-[100px] shadow-[1px_2px_12px_0_rgba(31,45,61,0.10)] rounded border border-[#e0e6ed] dark:border-[#1b2e4b] flex justify-center flex-col"},z={class:"text-primary sm:text-3xl text-xl text-center"},G=e("h4",{class:"text-[#3b3f5c] text-[15px] mt-4 text-center dark:text-white-dark font-semibold"},"Mins",-1),J={class:"w-16 h-16 sm:w-[100px] sm:h-[100px] shadow-[1px_2px_12px_0_rgba(31,45,61,0.10)] rounded border border-[#e0e6ed] dark:border-[#1b2e4b] flex justify-center flex-col"},K={class:"text-primary sm:text-3xl text-xl text-center"},L=e("h4",{class:"text-[#3b3f5c] text-[15px] mt-4 text-center dark:text-white-dark font-semibold"},"Sec",-1),O=e("pre",null,`<!-- simple countdown -->
  2. <div class="mb-5 grid grid-cols-4 justify-items-center gap-3">
  3. <div>
  4. <div class="w-16 h-16 sm:w-[100px] sm:h-[100px] shadow-[1px_2px_12px_0_rgba(31,45,61,0.10)] rounded border border-[#e0e6ed] dark:border-[#1b2e4b] flex justify-center flex-col">
  5. <h1 class="text-primary sm:text-3xl text-xl text-center">{{ demo1.days }}</h1>
  6. </div>
  7. <h4 class="text-[#3b3f5c] text-[15px] mt-4 text-center dark:text-white-dark font-semibold">Days</h4>
  8. </div>
  9. <div>
  10. <div class="w-16 h-16 sm:w-[100px] sm:h-[100px] shadow-[1px_2px_12px_0_rgba(31,45,61,0.10)] rounded border border-[#e0e6ed] dark:border-[#1b2e4b] flex justify-center flex-col">
  11. <h1 class="text-primary sm:text-3xl text-xl text-center">{{ demo1.hours }}</h1>
  12. </div>
  13. <h4 class="text-[#3b3f5c] text-[15px] mt-4 text-center dark:text-white-dark font-semibold">Hours</h4>
  14. </div>
  15. <div>
  16. <div class="w-16 h-16 sm:w-[100px] sm:h-[100px] shadow-[1px_2px_12px_0_rgba(31,45,61,0.10)] rounded border border-[#e0e6ed] dark:border-[#1b2e4b] flex justify-center flex-col">
  17. <h1 class="text-primary sm:text-3xl text-xl text-center">{{ demo1.minutes }}</h1>
  18. </div>
  19. <h4 class="text-[#3b3f5c] text-[15px] mt-4 text-center dark:text-white-dark font-semibold">Mins</h4>
  20. </div>
  21. <div>
  22. <div class="w-16 h-16 sm:w-[100px] sm:h-[100px] shadow-[1px_2px_12px_0_rgba(31,45,61,0.10)] rounded border border-[#e0e6ed] dark:border-[#1b2e4b] flex justify-center flex-col">
  23. <h1 class="text-primary sm:text-3xl text-xl text-center">{{ demo1.seconds }}</h1>
  24. </div>
  25. <h4 class="text-[#3b3f5c] text-[15px] mt-4 text-center dark:text-white-dark font-semibold">Sec</h4>
  26. </div>
  27. </div>
  28. <!-- script -->
  29. <script lang="ts" setup>
  30. import { ref, onMounted } from 'vue';
  31. const timer1: any = ref(null);
  32. const demo1: any = ref({
  33. days: null,
  34. hours: null,
  35. minutes: null,
  36. seconds: null,
  37. });
  38. onMounted(() => {
  39. setTimerDemo1();
  40. });
  41. const setTimerDemo1 = () => {
  42. let date = new Date();
  43. date.setDate(date.getDate() + 3);
  44. let countDownDate = date.getTime();
  45. timer1.value = setInterval(() => {
  46. let now = new Date().getTime();
  47. let distance = countDownDate - now;
  48. demo1.value.days = Math.floor(distance / (1000 * 60 * 60 * 24));
  49. demo1.value.hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  50. demo1.value.minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  51. demo1.value.seconds = Math.floor((distance % (1000 * 60)) / 1000);
  52. if (distance < 0) {
  53. clearInterval(timer1.value);
  54. }
  55. }, 500);
  56. };
  57. <\/script>
  58. `,-1),Q={class:"panel"},R={class:"flex items-center justify-between mb-5"},U=e("h5",{class:"font-semibold text-lg dark:text-white-light"},"Circle Countdown",-1),X={class:"flex items-center"},Z={class:"mb-5 grid grid-cols-4 justify-items-center gap-3"},ee={class:"w-16 h-16 sm:w-[100px] sm:h-[100px] shadow-[1px_2px_12px_0_rgba(31,45,61,0.10)] rounded-full border border-[#e0e6ed] dark:border-[#1b2e4b] flex justify-center flex-col"},te={class:"text-primary sm:text-3xl text-xl text-center"},se=e("h4",{class:"text-[#3b3f5c] text-[15px] mt-4 text-center dark:text-white-dark font-semibold"},"Days",-1),re={class:"w-16 h-16 sm:w-[100px] sm:h-[100px] shadow-[1px_2px_12px_0_rgba(31,45,61,0.10)] rounded-full border border-[#e0e6ed] dark:border-[#1b2e4b] flex justify-center flex-col"},oe={class:"text-primary sm:text-3xl text-xl text-center"},de=e("h4",{class:"text-[#3b3f5c] text-[15px] mt-4 text-center dark:text-white-dark font-semibold"},"Hours",-1),le={class:"w-16 h-16 sm:w-[100px] sm:h-[100px] shadow-[1px_2px_12px_0_rgba(31,45,61,0.10)] rounded-full border border-[#e0e6ed] dark:border-[#1b2e4b] flex justify-center flex-col"},ae={class:"text-primary sm:text-3xl text-xl text-center"},ne=e("h4",{class:"text-[#3b3f5c] text-[15px] mt-4 text-center dark:text-white-dark font-semibold"},"Mins",-1),xe={class:"w-16 h-16 sm:w-[100px] sm:h-[100px] shadow-[1px_2px_12px_0_rgba(31,45,61,0.10)] rounded-full border border-[#e0e6ed] dark:border-[#1b2e4b] flex justify-center flex-col"},ce={class:"text-primary sm:text-3xl text-xl text-center"},ie=e("h4",{class:"text-[#3b3f5c] text-[15px] mt-4 text-center dark:text-white-dark font-semibold"},"Sec",-1),me=e("pre",null,`<!-- circle countdown -->
  59. <div class="mb-5 grid grid-cols-4 justify-items-center gap-3">
  60. <div>
  61. <div class="w-16 h-16 sm:w-[100px] sm:h-[100px] shadow-[1px_2px_12px_0_rgba(31,45,61,0.10)] rounded-full border border-[#e0e6ed] dark:border-[#1b2e4b] flex justify-center flex-col">
  62. <h1 class="text-primary sm:text-3xl text-xl text-center">{{ demo2.days }}</h1>
  63. </div>
  64. <h4 class="text-[#3b3f5c] text-[15px] mt-4 text-center dark:text-white-dark font-semibold">Days</h4>
  65. </div>
  66. <div>
  67. <div class="w-16 h-16 sm:w-[100px] sm:h-[100px] shadow-[1px_2px_12px_0_rgba(31,45,61,0.10)] rounded-full border border-[#e0e6ed] dark:border-[#1b2e4b] flex justify-center flex-col">
  68. <h1 class="text-primary sm:text-3xl text-xl text-center">{{ demo2.hours }}</h1>
  69. </div>
  70. <h4 class="text-[#3b3f5c] text-[15px] mt-4 text-center dark:text-white-dark font-semibold">Hours</h4>
  71. </div>
  72. <div>
  73. <div class="w-16 h-16 sm:w-[100px] sm:h-[100px] shadow-[1px_2px_12px_0_rgba(31,45,61,0.10)] rounded-full border border-[#e0e6ed] dark:border-[#1b2e4b] flex justify-center flex-col">
  74. <h1 class="text-primary sm:text-3xl text-xl text-center">{{ demo2.minutes }}</h1>
  75. </div>
  76. <h4 class="text-[#3b3f5c] text-[15px] mt-4 text-center dark:text-white-dark font-semibold">Mins</h4>
  77. </div>
  78. <div>
  79. <div class="w-16 h-16 sm:w-[100px] sm:h-[100px] shadow-[1px_2px_12px_0_rgba(31,45,61,0.10)] rounded-full border border-[#e0e6ed] dark:border-[#1b2e4b] flex justify-center flex-col">
  80. <h1 class="text-primary sm:text-3xl text-xl text-center">{{ demo2.seconds }}</h1>
  81. </div>
  82. <h4 class="text-[#3b3f5c] text-[15px] mt-4 text-center dark:text-white-dark font-semibold">Sec</h4>
  83. </div>
  84. </div>
  85. <!-- script -->
  86. <script lang="ts" setup>
  87. import { ref, onMounted } from 'vue';
  88. const timer2: any = ref(null);
  89. const demo2: any = ref({
  90. days: null,
  91. hours: null,
  92. minutes: null,
  93. seconds: null,
  94. });
  95. onMounted(() => {
  96. setTimerDemo2();
  97. });
  98. const setTimerDemo2 = () => {
  99. let date = new Date();
  100. date.setFullYear(date.getFullYear() + 1);
  101. let countDownDate = date.getTime();
  102. timer2.value = setInterval(() => {
  103. let now = new Date().getTime();
  104. let distance = countDownDate - now;
  105. demo2.value.days = Math.floor(distance / (1000 * 60 * 60 * 24));
  106. demo2.value.hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  107. demo2.value.minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  108. demo2.value.seconds = Math.floor((distance % (1000 * 60)) / 1000);
  109. if (distance < 0) {
  110. clearInterval(timer2.value);
  111. }
  112. }, 500);
  113. };
  114. <\/script>
  115. `,-1),_e=j({__name:"countdown",setup(he){M({title:"Countdown"});const{codeArr:i,toggleCode:m}=D(),h=n(null),s=n({days:null,hours:null,minutes:null,seconds:null}),u=n(null),r=n({days:null,hours:null,minutes:null,seconds:null});C(()=>{k(),g()});const k=()=>{let o=new Date;o.setDate(o.getDate()+3);let d=o.getTime();h.value=setInterval(()=>{let a=new Date().getTime(),t=d-a;s.value.days=Math.floor(t/(1e3*60*60*24)),s.value.hours=Math.floor(t%(1e3*60*60*24)/(1e3*60*60)),s.value.minutes=Math.floor(t%(1e3*60*60)/(1e3*60)),s.value.seconds=Math.floor(t%(1e3*60)/1e3),t<0&&clearInterval(h.value)},500)},g=()=>{let o=new Date;o.setFullYear(o.getFullYear()+1);let d=o.getTime();u.value=setInterval(()=>{let a=new Date().getTime(),t=d-a;r.value.days=Math.floor(t/(1e3*60*60*24)),r.value.hours=Math.floor(t%(1e3*60*60*24)/(1e3*60*60)),r.value.minutes=Math.floor(t%(1e3*60*60)/(1e3*60)),r.value.seconds=Math.floor(t%(1e3*60)/1e3),t<0&&clearInterval(u.value)},500)};return(o,d)=>(c(),T("div",null,[I,e("div",S,[e("div",B,[e("div",F,[H,e("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:d[0]||(d[0]=a=>x(m)("code1"))},[e("span",N,[f(_,{class:"me-2"}),b(" Code ")])])]),e("div",V,[e("div",null,[e("div",Y,[e("h1",$,l(s.value.days),1)]),A]),e("div",null,[e("div",E,[e("h1",P,l(s.value.hours),1)]),W]),e("div",null,[e("div",q,[e("h1",z,l(s.value.minutes),1)]),G]),e("div",null,[e("div",J,[e("h1",K,l(s.value.seconds),1)]),L])]),x(i).includes("code1")?(c(),v(p,{key:0},{default:w(()=>[O]),_:1})):y("",!0)]),e("div",Q,[e("div",R,[U,e("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:d[1]||(d[1]=a=>x(m)("code2"))},[e("span",X,[f(_,{class:"me-2"}),b(" Code ")])])]),e("div",Z,[e("div",null,[e("div",ee,[e("h1",te,l(r.value.days),1)]),se]),e("div",null,[e("div",re,[e("h1",oe,l(r.value.hours),1)]),de]),e("div",null,[e("div",le,[e("h1",ae,l(r.value.minutes),1)]),ne]),e("div",null,[e("div",xe,[e("h1",ce,l(r.value.seconds),1)]),ie])]),x(i).includes("code2")?(c(),v(p,{key:0},{default:w(()=>[me]),_:1})):y("",!0)])])]))}});export{_e as default};