timeline.3dd489de.js 48 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483
  1. import{_ as a}from"./profile-16.a5dcf128.js";import{_ as w,o,c as x,a as e,d as y,u as M,j as r,f as l,g as i,W as f,w as b,l as p,s as n,$ as j}from"./index.c685e846.js";import{_}from"./carousel1.01799c1e.js";import{_ as L,a as z,b as $}from"./profile-3.c1326cdf.js";import{c as q,_ as m,I as c}from"./icon-code.6d7a3662.js";const v="/assets/images/drag-1.jpeg",C="/assets/images/drag-2.jpeg",g="/assets/images/drag-4.jpg",k="/assets/images/menu-heade.jpg",Z="/assets/images/profile-4.jpeg",H={},V={width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},F=e("path",{opacity:"0.5",d:"M2 12H22M16 12C16 13.3132 15.8965 14.6136 15.6955 15.8268C15.4945 17.0401 15.1999 18.1425 14.8284 19.0711C14.457 19.9997 14.016 20.7362 13.5307 21.2388C13.0454 21.7413 12.5253 22 12 22C11.4747 22 10.9546 21.7413 10.4693 21.2388C9.98396 20.7362 9.54301 19.9997 9.17157 19.0711C8.80014 18.1425 8.5055 17.0401 8.30448 15.8268C8.10346 14.6136 8 13.3132 8 12C8 10.6868 8.10346 9.38642 8.30448 8.17316C8.5055 6.95991 8.80014 5.85752 9.17157 4.92893C9.54301 4.00035 9.98396 3.26375 10.4693 2.7612C10.9546 2.25866 11.4747 2 12 2C12.5253 2 13.0454 2.25866 13.5307 2.76121C14.016 3.26375 14.457 4.00035 14.8284 4.92893C15.1999 5.85752 15.4945 6.95991 15.6955 8.17317C15.8965 9.38642 16 10.6868 16 12Z",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round"},null,-1),S=e("path",{d:"M22 12C22 13.3132 21.7413 14.6136 21.2388 15.8268C20.7362 17.0401 19.9997 18.1425 19.0711 19.0711C18.1425 19.9997 17.0401 20.7362 15.8268 21.2388C14.6136 21.7413 13.3132 22 12 22C10.6868 22 9.38642 21.7413 8.17317 21.2388C6.95991 20.7362 5.85752 19.9997 4.92893 19.0711C4.00035 18.1425 3.26375 17.0401 2.7612 15.8268C2.25866 14.6136 2 13.3132 2 12C2 10.6868 2.25866 9.38642 2.76121 8.17316C3.26375 6.95991 4.00035 5.85752 4.92893 4.92893C5.85752 4.00035 6.95991 3.26375 8.17317 2.7612C9.38642 2.25866 10.6868 2 12 2C13.3132 2 14.6136 2.25866 15.8268 2.76121C17.0401 3.26375 18.1425 4.00035 19.0711 4.92893C19.9997 5.85752 20.7362 6.95991 21.2388 8.17317C21.7413 9.38642 22 10.6868 22 12L22 12Z",stroke:"currentColor","stroke-width":"1.5"},null,-1),D=[F,S];function B(h,s){return o(),x("svg",V,D)}const P=w(H,[["render",B]]),R={},T={width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},U=e("path",{d:"M2 12C2 7.28595 2 4.92893 3.46447 3.46447C4.92893 2 7.28595 2 12 2C16.714 2 19.0711 2 20.5355 3.46447C22 4.92893 22 7.28595 22 12C22 16.714 22 19.0711 20.5355 20.5355C19.0711 22 16.714 22 12 22C7.28595 22 4.92893 22 3.46447 20.5355C2 19.0711 2 16.714 2 12Z",stroke:"currentColor","stroke-width":"1.5"},null,-1),E=e("circle",{opacity:"0.5",cx:"16",cy:"8",r:"2",stroke:"currentColor","stroke-width":"1.5"},null,-1),N=e("path",{opacity:"0.5",d:"M2 12.5001L3.75159 10.9675C4.66286 10.1702 6.03628 10.2159 6.89249 11.0721L11.1822 15.3618C11.8694 16.0491 12.9512 16.1428 13.7464 15.5839L14.0446 15.3744C15.1888 14.5702 16.7369 14.6634 17.7765 15.599L21 18.5001",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round"},null,-1),I=[U,E,N];function O(h,s){return o(),x("svg",T,I)}const W=w(R,[["render",O]]),A={},G={width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},J=e("path",{d:"M15.3929 4.05365L14.8912 4.61112L15.3929 4.05365ZM19.3517 7.61654L18.85 8.17402L19.3517 7.61654ZM21.654 10.1541L20.9689 10.4592V10.4592L21.654 10.1541ZM3.17157 20.8284L3.7019 20.2981H3.7019L3.17157 20.8284ZM20.8284 20.8284L20.2981 20.2981L20.2981 20.2981L20.8284 20.8284ZM14 21.25H10V22.75H14V21.25ZM2.75 14V10H1.25V14H2.75ZM21.25 13.5629V14H22.75V13.5629H21.25ZM14.8912 4.61112L18.85 8.17402L19.8534 7.05907L15.8947 3.49618L14.8912 4.61112ZM22.75 13.5629C22.75 11.8745 22.7651 10.8055 22.3391 9.84897L20.9689 10.4592C21.2349 11.0565 21.25 11.742 21.25 13.5629H22.75ZM18.85 8.17402C20.2034 9.3921 20.7029 9.86199 20.9689 10.4592L22.3391 9.84897C21.9131 8.89241 21.1084 8.18853 19.8534 7.05907L18.85 8.17402ZM10.0298 2.75C11.6116 2.75 12.2085 2.76158 12.7405 2.96573L13.2779 1.5653C12.4261 1.23842 11.498 1.25 10.0298 1.25V2.75ZM15.8947 3.49618C14.8087 2.51878 14.1297 1.89214 13.2779 1.5653L12.7405 2.96573C13.2727 3.16993 13.7215 3.55836 14.8912 4.61112L15.8947 3.49618ZM10 21.25C8.09318 21.25 6.73851 21.2484 5.71085 21.1102C4.70476 20.975 4.12511 20.7213 3.7019 20.2981L2.64124 21.3588C3.38961 22.1071 4.33855 22.4392 5.51098 22.5969C6.66182 22.7516 8.13558 22.75 10 22.75V21.25ZM1.25 14C1.25 15.8644 1.24841 17.3382 1.40313 18.489C1.56076 19.6614 1.89288 20.6104 2.64124 21.3588L3.7019 20.2981C3.27869 19.8749 3.02502 19.2952 2.88976 18.2892C2.75159 17.2615 2.75 15.9068 2.75 14H1.25ZM14 22.75C15.8644 22.75 17.3382 22.7516 18.489 22.5969C19.6614 22.4392 20.6104 22.1071 21.3588 21.3588L20.2981 20.2981C19.8749 20.7213 19.2952 20.975 18.2892 21.1102C17.2615 21.2484 15.9068 21.25 14 21.25V22.75ZM21.25 14C21.25 15.9068 21.2484 17.2615 21.1102 18.2892C20.975 19.2952 20.7213 19.8749 20.2981 20.2981L21.3588 21.3588C22.1071 20.6104 22.4392 19.6614 22.5969 18.489C22.7516 17.3382 22.75 15.8644 22.75 14H21.25ZM2.75 10C2.75 8.09318 2.75159 6.73851 2.88976 5.71085C3.02502 4.70476 3.27869 4.12511 3.7019 3.7019L2.64124 2.64124C1.89288 3.38961 1.56076 4.33855 1.40313 5.51098C1.24841 6.66182 1.25 8.13558 1.25 10H2.75ZM10.0298 1.25C8.15538 1.25 6.67442 1.24842 5.51887 1.40307C4.34232 1.56054 3.39019 1.8923 2.64124 2.64124L3.7019 3.7019C4.12453 3.27928 4.70596 3.02525 5.71785 2.88982C6.75075 2.75158 8.11311 2.75 10.0298 2.75V1.25Z",fill:"currentColor"},null,-1),K=e("path",{opacity:"0.5",d:"M6 14.5H14",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round"},null,-1),Q=e("path",{opacity:"0.5",d:"M6 18H11.5",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round"},null,-1),X=e("path",{opacity:"0.5",d:"M13 2.5V5C13 7.35702 13 8.53553 13.7322 9.26777C14.4645 10 15.643 10 18 10H22",stroke:"currentColor","stroke-width":"1.5"},null,-1),Y=[J,K,Q,X];function ee(h,s){return o(),x("svg",G,Y)}const te=w(A,[["render",ee]]),re=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,"Timeline")])],-1),oe={class:"pt-5 grid grid-cols-1 xl:grid-cols-2 gap-6"},ae={class:"panel"},se={class:"flex items-center justify-between mb-5"},le=e("h5",{class:"font-semibold text-lg dark:text-white-light"},"Profile",-1),ne={class:"flex items-center"},de={class:"mb-5"},ie=e("p",{class:"text-white-dark font-bold mb-5 text-base"},"Today",-1),fe={class:"sm:flex"},be=e("div",{class:"relative mx-auto mb-5 sm:mb-0 ltr:sm:mr-8 rtl:sm:ml-8 z-[2] before:absolute before:top-12 before:left-1/2 before:-bottom-[15px] before:-translate-x-1/2 before:border-l-2 before:border-[#ebedf2] before:w-0 before:h-auto before:-z-[1] dark:before:border-[#191e3a] before:hidden sm:before:block"},[e("img",{src:a,alt:"",class:"w-12 h-12 mx-auto rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)]"})],-1),pe={class:"flex-1"},me=e("h4",{class:"text-primary text-xl font-bold text-center ltr:sm:text-left rtl:sm:text-right"},"Laurie Fox",-1),ce=e("p",{class:"text-center ltr:sm:text-left rtl:sm:text-right"},"5 sec",-1),xe={class:"mt-4 sm:mt-7 mb-16"},he=n('<h6 class="inline-block font-bold mb-2 text-lg">Trending Style</h6><p class="ltr:pl-8 rtl:pr-8 text-white-dark font-semibold"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p><div class="ltr:pl-8 rtl:pr-8 flex space-x-1 rtl:space-x-reverse mt-6"><img src="'+a+'" alt="" class="w-10 h-10 rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none"><img src="'+v+'" alt="" class="w-10 h-10 rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none"><img src="'+C+'" alt="" class="w-10 h-10 rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none"><img src="'+a+'" alt="" class="w-10 h-10 rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none"><img src="'+g+'" alt="" class="w-10 h-10 rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none"></div>',3),ue={class:"sm:flex"},we=e("div",{class:"relative mx-auto mb-5 sm:mb-0 ltr:sm:mr-8 rtl:sm:ml-8 z-[2] before:absolute before:top-12 before:left-1/2 before:-bottom-[15px] before:-translate-x-1/2 before:border-l-2 before:border-[#ebedf2] before:w-0 before:h-auto before:-z-[1] dark:before:border-[#191e3a] before:hidden sm:before:block"},[e("img",{src:j,alt:"",class:"w-12 h-12 mx-auto rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)]"})],-1),ve={class:"flex-1"},ge=e("h4",{class:"text-primary text-xl font-bold text-center ltr:sm:text-left rtl:sm:text-right"},"Justin Cross",-1),_e=e("p",{class:"text-center ltr:sm:text-left rtl:sm:text-right"},"45 min",-1),ke={class:"mt-4 sm:mt-7 mb-16"},Ce=n('<h6 class="inline-block font-bold mb-2 text-lg">Nature Photography</h6><p class="ltr:pl-8 rtl:pr-8 text-white-dark font-semibold"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p><div class="ltr:pl-8 rtl:pr-8 grid grid-cols-3 sm:grid-cols-5 lg:grid-cols-8 gap-3 mt-6"><img src="'+v+'" alt="" class="w-full rounded-md shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none"><img src="'+a+'" alt="" class="w-full rounded-md shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none"><img src="'+g+'" alt="" class="w-full rounded-md shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none"></div>',3),ye={class:"sm:flex"},Me=e("div",{class:"relative mx-auto mb-5 sm:mb-0 ltr:sm:mr-8 rtl:sm:ml-8 z-[2] before:absolute before:top-12 before:left-1/2 before:-bottom-[15px] before:-translate-x-1/2 before:border-l-2 before:border-[#ebedf2] before:w-0 before:h-auto before:-z-[1] dark:before:border-[#191e3a] before:hidden sm:before:block"},[e("img",{src:a,alt:"",class:"w-12 h-12 mx-auto rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)]"})],-1),je={class:"flex-1"},Le=e("h4",{class:"text-primary text-xl font-bold text-center ltr:sm:text-left rtl:sm:text-right"},"Laurie Fox",-1),ze=e("p",{class:"text-center ltr:sm:text-left rtl:sm:text-right"},"5 sec",-1),$e={class:"mt-4 sm:mt-7 mb-16"},qe=n('<h6 class="inline-block font-bold mb-2 text-lg">Create new Project</h6><p class="ltr:pl-8 rtl:pr-8 text-white-dark font-semibold"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p><div class="ltr:pl-8 rtl:pr-8 flex space-x-1 rtl:space-x-reverse mt-6"><img src="'+a+'" alt="" class="w-10 h-10 rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none"><img src="'+v+'" alt="" class="w-10 h-10 rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none"><img src="'+C+'" alt="" class="w-10 h-10 rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none"><img src="'+a+'" alt="" class="w-10 h-10 rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none"><img src="'+g+'" alt="" class="w-10 h-10 rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none"></div>',3),Ze=e("pre",null,`<!-- profile -->
  2. <div class="mb-5">
  3. <p class="text-white-dark font-bold mb-5 text-base">Today</p>
  4. <div class="sm:flex">
  5. <div
  6. class="
  7. relative
  8. mx-auto
  9. mb-5
  10. sm:mb-0
  11. ltr:sm:mr-8
  12. rtl:sm:ml-8
  13. z-[2]
  14. before:absolute before:top-12 before:left-1/2 before:-bottom-[15px] before:-translate-x-1/2 before:border-l-2 before:border-[#ebedf2] before:w-0 before:h-auto before:-z-[1]
  15. dark:before:border-[#191e3a]
  16. before:hidden
  17. sm:before:block
  18. "
  19. >
  20. <img src="/assets/images/profile-16.jpeg" alt="" class="w-12 h-12 mx-auto rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)]" />
  21. </div>
  22. <div class="flex-1">
  23. <h4 class="text-primary text-xl font-bold text-center ltr:sm:text-left rtl:sm:text-right">Laurie Fox</h4>
  24. <p class="text-center ltr:sm:text-left rtl:sm:text-right">5 sec</p>
  25. <div class="mt-4 sm:mt-7 mb-16">
  26. <svg> ... </svg>
  27. <h6 class="inline-block font-bold mb-2 text-lg">Trending Style</h6>
  28. <p class="ltr:pl-8 rtl:pr-8 text-white-dark font-semibold">
  29. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
  30. ullamco laboris nisi ut aliquip ex ea commodo consequat.
  31. </p>
  32. <div class="ltr:pl-8 rtl:pr-8 flex space-x-1 rtl:space-x-reverse mt-6">
  33. <img
  34. src="/assets/images/profile-16.jpeg"
  35. alt=""
  36. class="w-10 h-10 rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none"
  37. />
  38. <img
  39. src="/assets/images/drag-1.jpeg"
  40. alt=""
  41. class="w-10 h-10 rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none"
  42. />
  43. <img
  44. src="/assets/images/drag-2.jpeg"
  45. alt=""
  46. class="w-10 h-10 rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none"
  47. />
  48. <img
  49. src="/assets/images/profile-16.jpeg"
  50. alt=""
  51. class="w-10 h-10 rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none"
  52. />
  53. <img
  54. src="/assets/images/drag-4.jpg"
  55. alt=""
  56. class="w-10 h-10 rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none"
  57. />
  58. </div>
  59. </div>
  60. </div>
  61. </div>
  62. <div class="sm:flex">
  63. <div
  64. class="
  65. relative
  66. mx-auto
  67. mb-5
  68. sm:mb-0
  69. ltr:sm:mr-8
  70. rtl:sm:ml-8
  71. z-[2]
  72. before:absolute before:top-12 before:left-1/2 before:-bottom-[15px] before:-translate-x-1/2 before:border-l-2 before:border-[#ebedf2] before:w-0 before:h-auto before:-z-[1]
  73. dark:before:border-[#191e3a]
  74. before:hidden
  75. sm:before:block
  76. "
  77. >
  78. <img src="/assets/images/profile-7.jpeg" alt="" class="w-12 h-12 mx-auto rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)]" />
  79. </div>
  80. <div class="flex-1">
  81. <h4 class="text-primary text-xl font-bold text-center ltr:sm:text-left rtl:sm:text-right">Justin Cross</h4>
  82. <p class="text-center ltr:sm:text-left rtl:sm:text-right">45 min</p>
  83. <div class="mt-4 sm:mt-7 mb-16">
  84. <svg> ... </svg>
  85. <h6 class="inline-block font-bold mb-2 text-lg">Nature Photography</h6>
  86. <p class="ltr:pl-8 rtl:pr-8 text-white-dark font-semibold">
  87. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
  88. ullamco laboris nisi ut aliquip ex ea commodo consequat.
  89. </p>
  90. <div class="ltr:pl-8 rtl:pr-8 grid grid-cols-3 sm:grid-cols-5 lg:grid-cols-8 gap-3 mt-6">
  91. <img
  92. src="/assets/images/drag-1.jpeg"
  93. alt=""
  94. class="w-full rounded-md shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none"
  95. />
  96. <img
  97. src="/assets/images/profile-16.jpeg"
  98. alt=""
  99. class="w-full rounded-md shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none"
  100. />
  101. <img
  102. src="/assets/images/drag-4.jpg"
  103. alt=""
  104. class="w-full rounded-md shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none"
  105. />
  106. </div>
  107. </div>
  108. </div>
  109. </div>
  110. <div class="sm:flex">
  111. <div
  112. class="
  113. relative
  114. mx-auto
  115. mb-5
  116. sm:mb-0
  117. ltr:sm:mr-8
  118. rtl:sm:ml-8
  119. z-[2]
  120. before:absolute before:top-12 before:left-1/2 before:-bottom-[15px] before:-translate-x-1/2 before:border-l-2 before:border-[#ebedf2] before:w-0 before:h-auto before:-z-[1]
  121. dark:before:border-[#191e3a]
  122. before:hidden
  123. sm:before:block
  124. "
  125. >
  126. <img src="/assets/images/profile-16.jpeg" alt="" class="w-12 h-12 mx-auto rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)]" />
  127. </div>
  128. <div class="flex-1">
  129. <h4 class="text-primary text-xl font-bold text-center ltr:sm:text-left rtl:sm:text-right">Laurie Fox</h4>
  130. <p class="text-center ltr:sm:text-left rtl:sm:text-right">5 sec</p>
  131. <div class="mt-4 sm:mt-7 mb-16">
  132. <svg> ... </svg>
  133. <h6 class="inline-block font-bold mb-2 text-lg">Create new Project</h6>
  134. <p class="ltr:pl-8 rtl:pr-8 text-white-dark font-semibold">
  135. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
  136. ullamco laboris nisi ut aliquip ex ea commodo consequat.
  137. </p>
  138. <div class="ltr:pl-8 rtl:pr-8 flex space-x-1 rtl:space-x-reverse mt-6">
  139. <img
  140. src="/assets/images/profile-16.jpeg"
  141. alt=""
  142. class="w-10 h-10 rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none"
  143. />
  144. <img
  145. src="/assets/images/drag-1.jpeg"
  146. alt=""
  147. class="w-10 h-10 rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none"
  148. />
  149. <img
  150. src="/assets/images/drag-2.jpeg"
  151. alt=""
  152. class="w-10 h-10 rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none"
  153. />
  154. <img
  155. src="/assets/images/profile-16.jpeg"
  156. alt=""
  157. class="w-10 h-10 rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none"
  158. />
  159. <img
  160. src="/assets/images/drag-4.jpg"
  161. alt=""
  162. class="w-10 h-10 rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none"
  163. />
  164. </div>
  165. </div>
  166. </div>
  167. </div>
  168. </div>
  169. `,-1),He={class:"panel"},Ve={class:"flex items-center justify-between mb-5"},Fe=e("h5",{class:"font-semibold text-lg dark:text-white-light"},"Modern",-1),Se={class:"flex items-center"},De=n('<div class="mb-5 inline-block w-full"><ul class="relative py-12 before:absolute before:bg-[#ebedf2] dark:before:bg-[#191e3a] before:bottom-0 before:left-1/2 before:top-0 before:w-[3px] before:-ml-[1.5px] max-w-[900px] mx-auto table"><li class="relative mb-12 before:clear-both before:table after:clear-both after:table"><div class="hidden sm:block absolute bg-info border-[3px] border-[#ebedf2] dark:border-[#191e3a] w-5 h-5 rounded-full left-1/2 top-[32px] -ml-2.5 z-[1]"></div><div class="relative border border-[#ebedf2] dark:border-[#191e3a] max-w-[320px] mx-auto sm:max-w-full w-full sm:w-[46%] shadow-[0_20px_20px_rgba(126,142,177,0.12)] rounded-md bg-white dark:bg-[#191e3a] ltr:sm:float-left rtl:sm:float-right before:absolute before:bg-[#ebedf2] dark:before:bg-[#191e3a] before:w-[37px] before:h-[3px] before:rounded-full ltr:before:-right-[37px] rtl:before:-left-[37px] before:top-10 sm:before:block before:hidden"><div><img src="'+_+'" alt="timeline" class="w-full rounded-t-md"></div><div class="p-5"><h4 class="mb-3 text-info text-lg font-semibold">Front-End Framework</h4><p class="mb-3 text-white-dark"> Map where your photos were taken and discover local points of interest. Map where your photos. Map where your photos were taken and discover. </p><p><button type="button" class="btn btn-info">Read more</button></p></div></div></li><li class="relative mb-12 before:clear-both before:table after:clear-both after:table"><div class="hidden sm:block absolute bg-primary border-[3px] border-[#ebedf2] dark:border-[#191e3a] w-5 h-5 rounded-full left-1/2 top-[32px] -ml-2.5 z-[1]"></div><div class="relative border border-[#ebedf2] dark:border-[#191e3a] max-w-[320px] mx-auto sm:max-w-full w-full sm:w-[46%] shadow-[0_20px_20px_rgba(126,142,177,0.12)] rounded-md bg-white dark:bg-[#191e3a] ltr:sm:float-right rtl:sm:float-left before:absolute before:bg-[#ebedf2] dark:before:bg-[#191e3a] before:w-[37px] before:h-[3px] before:rounded-full ltr:before:-left-[37px] rtl:before:-right-[37px] before:top-10 sm:before:block before:hidden"><div><img src="'+k+'" alt="timeline" class="w-full rounded-t-md"></div><div class="p-5"><h4 class="mb-3 text-primary text-lg font-semibold">Web Development</h4><p class="mb-3 text-white-dark"> Map where your photos were taken and discover local points of interest. Map where your photos. Map where your photos were taken and discover. </p><p><button type="button" class="btn btn-primary">Read more</button></p></div></div></li><li class="relative mb-12 before:clear-both before:table after:clear-both after:table"><div class="hidden sm:block absolute bg-success border-[3px] border-[#ebedf2] dark:border-[#191e3a] w-5 h-5 rounded-full left-1/2 top-[32px] -ml-2.5 z-[1]"></div><div class="relative border border-[#ebedf2] dark:border-[#191e3a] max-w-[320px] mx-auto sm:max-w-full w-full sm:w-[46%] shadow-[0_20px_20px_rgba(126,142,177,0.12)] rounded-md bg-white dark:bg-[#191e3a] ltr:sm:float-left rtl:sm:float-right before:absolute before:bg-[#ebedf2] dark:before:bg-[#191e3a] before:w-[37px] before:h-[3px] before:rounded-full ltr:before:-right-[37px] rtl:before:-left-[37px] before:top-10 sm:before:block before:hidden"><div><img src="'+_+'" alt="timeline" class="w-full rounded-t-md"></div><div class="p-5"><h4 class="mb-3 text-success text-lg font-semibold">Theme Development</h4><p class="mb-3 text-white-dark"> Map where your photos were taken and discover local points of interest. Map where your photos. Map where your photos were taken and discover. </p><p><button type="button" class="btn btn-success">Read more</button></p></div></div></li><li class="relative mb-12 before:clear-both before:table after:clear-both after:table"><div class="hidden sm:block absolute bg-danger border-[3px] border-[#ebedf2] dark:border-[#191e3a] w-5 h-5 rounded-full left-1/2 top-[32px] -ml-2.5 z-[1]"></div><div class="relative border border-[#ebedf2] dark:border-[#191e3a] max-w-[320px] mx-auto sm:max-w-full w-full sm:w-[46%] shadow-[0_20px_20px_rgba(126,142,177,0.12)] rounded-md bg-white dark:bg-[#191e3a] ltr:sm:float-right rtl:sm:float-left before:absolute before:bg-[#ebedf2] dark:before:bg-[#191e3a] before:w-[37px] before:h-[3px] before:rounded-full ltr:before:-left-[37px] rtl:before:-right-[37px] before:top-10 sm:before:block before:hidden"><div><img src="'+k+'" alt="timeline" class="w-full rounded-t-md"></div><div class="p-5"><h4 class="mb-3 text-danger text-lg font-semibold">Plugin Development</h4><p class="mb-3 text-white-dark"> Map where your photos were taken and discover local points of interest. Map where your photos. Map where your photos were taken and discover. </p><p><button type="button" class="btn btn-danger">Read more</button></p></div></div></li></ul></div>',1),Be=e("pre",null,`<!-- modern -->
  170. <ul
  171. class="
  172. relative
  173. py-12
  174. before:absolute before:bg-[#ebedf2]
  175. dark:before:bg-[#191e3a]
  176. before:bottom-0 before:left-1/2 before:top-0 before:w-[3px] before:-ml-[1.5px]
  177. max-w-[900px]
  178. mx-auto
  179. table
  180. "
  181. >
  182. <li class="relative mb-12 before:clear-both before:table after:clear-both after:table">
  183. <div class="hidden sm:block absolute bg-info border-[3px] border-[#ebedf2] dark:border-[#191e3a] w-5 h-5 rounded-full left-1/2 top-[32px] -ml-2.5 z-[1]"></div>
  184. <div
  185. class="
  186. relative
  187. border border-[#ebedf2]
  188. dark:border-[#191e3a]
  189. max-w-[320px]
  190. mx-auto
  191. sm:max-w-full
  192. w-full
  193. sm:w-[46%]
  194. shadow-[0_20px_20px_rgba(126,142,177,0.12)]
  195. rounded-md
  196. bg-white
  197. dark:bg-[#191e3a]
  198. ltr:sm:float-left
  199. rtl:sm:float-right
  200. before:absolute before:bg-[#ebedf2]
  201. dark:before:bg-[#191e3a]
  202. before:w-[37px] before:h-[3px] before:rounded-full
  203. ltr:before:-right-[37px]
  204. rtl:before:-left-[37px]
  205. before:top-10
  206. sm:before:block
  207. before:hidden
  208. "
  209. >
  210. <div>
  211. <img src="/assets/images/carousel1.jpeg" alt="timeline" class="w-full rounded-t-md" />
  212. </div>
  213. <div class="p-5">
  214. <h4 class="mb-3 text-info text-lg font-semibold">Front-End Framework</h4>
  215. <p class="mb-3 text-white-dark">Map where your photos were taken and discover local points of interest. Map where your photos. Map where your photos were taken and discover.</p>
  216. <p><button type="button" class="btn btn-info">Read more</button></p>
  217. </div>
  218. </div>
  219. </li>
  220. <li class="relative mb-12 before:clear-both before:table after:clear-both after:table">
  221. <div class="hidden sm:block absolute bg-primary border-[3px] border-[#ebedf2] dark:border-[#191e3a] w-5 h-5 rounded-full left-1/2 top-[32px] -ml-2.5 z-[1]"></div>
  222. <div
  223. class="
  224. relative
  225. border border-[#ebedf2]
  226. dark:border-[#191e3a]
  227. max-w-[320px]
  228. mx-auto
  229. sm:max-w-full
  230. w-full
  231. sm:w-[46%]
  232. shadow-[0_20px_20px_rgba(126,142,177,0.12)]
  233. rounded-md
  234. bg-white
  235. dark:bg-[#191e3a]
  236. ltr:sm:float-right
  237. rtl:sm:float-left
  238. before:absolute before:bg-[#ebedf2]
  239. dark:before:bg-[#191e3a]
  240. before:w-[37px] before:h-[3px] before:rounded-full
  241. ltr:before:-left-[37px]
  242. rtl:before:-right-[37px]
  243. before:top-10
  244. sm:before:block
  245. before:hidden
  246. "
  247. >
  248. <div>
  249. <img src="/assets/images/menu-heade.jpg" alt="timeline" class="w-full rounded-t-md" />
  250. </div>
  251. <div class="p-5">
  252. <h4 class="mb-3 text-primary text-lg font-semibold">Web Development</h4>
  253. <p class="mb-3 text-white-dark">Map where your photos were taken and discover local points of interest. Map where your photos. Map where your photos were taken and discover.</p>
  254. <p><button type="button" class="btn btn-primary">Read more</button></p>
  255. </div>
  256. </div>
  257. </li>
  258. <li class="relative mb-12 before:clear-both before:table after:clear-both after:table">
  259. <div class="hidden sm:block absolute bg-success border-[3px] border-[#ebedf2] dark:border-[#191e3a] w-5 h-5 rounded-full left-1/2 top-[32px] -ml-2.5 z-[1]"></div>
  260. <div
  261. class="
  262. relative
  263. border border-[#ebedf2]
  264. dark:border-[#191e3a]
  265. max-w-[320px]
  266. mx-auto
  267. sm:max-w-full
  268. w-full
  269. sm:w-[46%]
  270. shadow-[0_20px_20px_rgba(126,142,177,0.12)]
  271. rounded-md
  272. bg-white
  273. dark:bg-[#191e3a]
  274. ltr:sm:float-left
  275. rtl:sm:float-right
  276. before:absolute before:bg-[#ebedf2]
  277. dark:before:bg-[#191e3a]
  278. before:w-[37px] before:h-[3px] before:rounded-full
  279. ltr:before:-right-[37px]
  280. rtl:before:-left-[37px]
  281. before:top-10
  282. sm:before:block
  283. before:hidden
  284. "
  285. >
  286. <div>
  287. <img src="/assets/images/carousel1.jpeg" alt="timeline" class="w-full rounded-t-md" />
  288. </div>
  289. <div class="p-5">
  290. <h4 class="mb-3 text-success text-lg font-semibold">Theme Development</h4>
  291. <p class="mb-3 text-white-dark">Map where your photos were taken and discover local points of interest. Map where your photos. Map where your photos were taken and discover.</p>
  292. <p><button type="button" class="btn btn-success">Read more</button></p>
  293. </div>
  294. </div>
  295. </li>
  296. <li class="relative mb-12 before:clear-both before:table after:clear-both after:table">
  297. <div class="hidden sm:block absolute bg-danger border-[3px] border-[#ebedf2] dark:border-[#191e3a] w-5 h-5 rounded-full left-1/2 top-[32px] -ml-2.5 z-[1]"></div>
  298. <div
  299. class="
  300. relative
  301. border border-[#ebedf2]
  302. dark:border-[#191e3a]
  303. max-w-[320px]
  304. mx-auto
  305. sm:max-w-full
  306. w-full
  307. sm:w-[46%]
  308. shadow-[0_20px_20px_rgba(126,142,177,0.12)]
  309. rounded-md
  310. bg-white
  311. dark:bg-[#191e3a]
  312. ltr:sm:float-right
  313. rtl:sm:float-left
  314. before:absolute before:bg-[#ebedf2]
  315. dark:before:bg-[#191e3a]
  316. before:w-[37px] before:h-[3px] before:rounded-full
  317. ltr:before:-left-[37px]
  318. rtl:before:-right-[37px]
  319. before:top-10
  320. sm:before:block
  321. before:hidden
  322. "
  323. >
  324. <div>
  325. <img src="/assets/images/menu-heade.jpg" alt="timeline" class="w-full rounded-t-md" />
  326. </div>
  327. <div class="p-5">
  328. <h4 class="mb-3 text-danger text-lg font-semibold">Plugin Development</h4>
  329. <p class="mb-3 text-white-dark">Map where your photos were taken and discover local points of interest. Map where your photos. Map where your photos were taken and discover.</p>
  330. <p><button type="button" class="btn btn-danger">Read more</button></p>
  331. </div>
  332. </div>
  333. </li>
  334. </ul>
  335. `,-1),Pe={class:"panel"},Re={class:"flex items-center justify-between mb-5"},Te=e("h5",{class:"font-semibold text-lg dark:text-white-light"},"Basic",-1),Ue={class:"flex items-center"},Ee=n('<div class="mb-5"><div class="max-w-[900px] mx-auto"><div class="flex"><p class="text-[#3b3f5c] dark:text-white-light min-w-[58px] max-w-[100px] text-base font-semibold py-2.5">10:00</p><div class="relative before:absolute before:left-1/2 before:-translate-x-1/2 before:top-[15px] before:w-2.5 before:h-2.5 before:border-2 before:border-primary before:rounded-full after:absolute after:left-1/2 after:-translate-x-1/2 after:top-[25px] after:-bottom-[15px] after:w-0 after:h-auto after:border-l-2 after:border-primary after:rounded-full"></div><div class="p-2.5 self-center ltr:ml-2.5 rtl:ltr:mr-2.5 rtl:ml-2.5"><p class="text-[#3b3f5c] dark:text-white-light font-semibold text-[13px]">Updated Server Logs</p><p class="text-white-dark text-xs font-bold self-center min-w-[100px] max-w-[100px]">25 mins ago</p></div></div><div class="flex"><p class="text-[#3b3f5c] dark:text-white-light min-w-[58px] max-w-[100px] text-base font-semibold py-2.5">12:45</p><div class="relative before:absolute before:left-1/2 before:-translate-x-1/2 before:top-[15px] before:w-2.5 before:h-2.5 before:border-2 before:border-secondary before:rounded-full after:absolute after:left-1/2 after:-translate-x-1/2 after:top-[25px] after:-bottom-[15px] after:w-0 after:h-auto after:border-l-2 after:border-secondary after:rounded-full"></div><div class="p-2.5 self-center ltr:ml-2.5 rtl:ltr:mr-2.5 rtl:ml-2.5"><p class="text-[#3b3f5c] dark:text-white-light font-semibold text-[13px]">Backup Files EOD</p><p class="text-white-dark text-xs font-bold self-center min-w-[100px] max-w-[100px]">2 hrs ago</p></div></div><div class="flex"><p class="text-[#3b3f5c] dark:text-white-light min-w-[58px] max-w-[100px] text-base font-semibold py-2.5">14:00</p><div class="relative before:absolute before:left-1/2 before:-translate-x-1/2 before:top-[15px] before:w-2.5 before:h-2.5 before:border-2 before:border-success before:rounded-full after:absolute after:left-1/2 after:-translate-x-1/2 after:top-[25px] after:-bottom-[15px] after:w-0 after:h-auto after:border-l-2 after:border-success after:rounded-full"></div><div class="p-2.5 self-center ltr:ml-2.5 rtl:ltr:mr-2.5 rtl:ml-2.5"><p class="text-[#3b3f5c] dark:text-white-light font-semibold text-[13px]">Send Mail to HR and Admin</p><p class="text-white-dark text-xs font-bold self-center min-w-[100px] max-w-[100px]">4 hrs ago</p></div></div><div class="flex"><p class="text-[#3b3f5c] dark:text-white-light min-w-[58px] max-w-[100px] text-base font-semibold py-2.5">16:00</p><div class="relative before:absolute before:left-1/2 before:-translate-x-1/2 before:top-[15px] before:w-2.5 before:h-2.5 before:border-2 before:border-danger before:rounded-full after:absolute after:left-1/2 after:-translate-x-1/2 after:top-[25px] after:-bottom-[15px] after:w-0 after:h-auto after:border-l-2 after:border-danger after:rounded-full"></div><div class="p-2.5 self-center ltr:ml-2.5 rtl:ltr:mr-2.5 rtl:ml-2.5"><p class="text-[#3b3f5c] dark:text-white-light font-semibold text-[13px]">Conference call with Marketing Manager.</p><p class="text-white-dark text-xs font-bold self-center min-w-[100px] max-w-[100px]">6 hrs ago</p></div></div><div class="flex"><p class="text-[#3b3f5c] dark:text-white-light min-w-[58px] max-w-[100px] text-base font-semibold py-2.5">17:00</p><div class="relative before:absolute before:left-1/2 before:-translate-x-1/2 before:top-[15px] before:w-2.5 before:h-2.5 before:border-2 before:border-warning before:rounded-full after:absolute after:left-1/2 after:-translate-x-1/2 after:top-[25px] after:-bottom-[15px] after:w-0 after:h-auto after:border-l-2 after:border-warning after:rounded-full"></div><div class="p-2.5 self-center ltr:ml-2.5 rtl:ltr:mr-2.5 rtl:ml-2.5"><p class="text-[#3b3f5c] dark:text-white-light font-semibold text-[13px]"> Collected documents from <a href="javascript:void(0);">Sara</a></p><p class="text-white-dark text-xs font-bold self-center min-w-[100px] max-w-[100px]">9 hrs ago</p></div></div><div class="flex"><p class="text-[#3b3f5c] dark:text-white-light min-w-[58px] max-w-[100px] text-base font-semibold py-2.5">16:00</p><div class="relative before:absolute before:left-1/2 before:-translate-x-1/2 before:top-[15px] before:w-2.5 before:h-2.5 before:border-2 before:border-info before:rounded-full"></div><div class="p-2.5 self-center ltr:ml-2.5 rtl:ltr:mr-2.5 rtl:ml-2.5"><p class="text-[#3b3f5c] dark:text-white-light font-semibold text-[13px]">Server rebooted successfully</p><p class="text-white-dark text-xs font-bold self-center min-w-[100px] max-w-[100px]">8 hrs ago</p></div></div></div></div>',1),Ne=e("pre",null,`<!-- basic -->
  336. <div class="max-w-[900px] mx-auto">
  337. <div class="flex">
  338. <p class="text-[#3b3f5c] dark:text-white-light min-w-[58px] max-w-[100px] text-base font-semibold py-2.5">10:00</p>
  339. <div
  340. class="
  341. relative
  342. before:absolute before:left-1/2 before:-translate-x-1/2 before:top-[15px] before:w-2.5 before:h-2.5 before:border-2 before:border-primary before:rounded-full
  343. after:absolute after:left-1/2 after:-translate-x-1/2 after:top-[25px] after:-bottom-[15px] after:w-0 after:h-auto after:border-l-2 after:border-primary after:rounded-full
  344. "
  345. ></div>
  346. <div class="p-2.5 self-center ltr:ml-2.5 rtl:ltr:mr-2.5 rtl:ml-2.5">
  347. <p class="text-[#3b3f5c] dark:text-white-light font-semibold text-[13px]">Updated Server Logs</p>
  348. <p class="text-white-dark text-xs font-bold self-center min-w-[100px] max-w-[100px]">25 mins ago</p>
  349. </div>
  350. </div>
  351. <div class="flex">
  352. <p class="text-[#3b3f5c] dark:text-white-light min-w-[58px] max-w-[100px] text-base font-semibold py-2.5">12:45</p>
  353. <div
  354. class="
  355. relative
  356. before:absolute before:left-1/2 before:-translate-x-1/2 before:top-[15px] before:w-2.5 before:h-2.5 before:border-2 before:border-secondary before:rounded-full
  357. after:absolute after:left-1/2 after:-translate-x-1/2 after:top-[25px] after:-bottom-[15px] after:w-0 after:h-auto after:border-l-2 after:border-secondary after:rounded-full
  358. "
  359. ></div>
  360. <div class="p-2.5 self-center ltr:ml-2.5 rtl:ltr:mr-2.5 rtl:ml-2.5">
  361. <p class="text-[#3b3f5c] dark:text-white-light font-semibold text-[13px]">Backup Files EOD</p>
  362. <p class="text-white-dark text-xs font-bold self-center min-w-[100px] max-w-[100px]">2 hrs ago</p>
  363. </div>
  364. </div>
  365. <div class="flex">
  366. <p class="text-[#3b3f5c] dark:text-white-light min-w-[58px] max-w-[100px] text-base font-semibold py-2.5">14:00</p>
  367. <div
  368. class="
  369. relative
  370. before:absolute before:left-1/2 before:-translate-x-1/2 before:top-[15px] before:w-2.5 before:h-2.5 before:border-2 before:border-success before:rounded-full
  371. after:absolute after:left-1/2 after:-translate-x-1/2 after:top-[25px] after:-bottom-[15px] after:w-0 after:h-auto after:border-l-2 after:border-success after:rounded-full
  372. "
  373. ></div>
  374. <div class="p-2.5 self-center ltr:ml-2.5 rtl:ltr:mr-2.5 rtl:ml-2.5">
  375. <p class="text-[#3b3f5c] dark:text-white-light font-semibold text-[13px]">Send Mail to HR and Admin</p>
  376. <p class="text-white-dark text-xs font-bold self-center min-w-[100px] max-w-[100px]">4 hrs ago</p>
  377. </div>
  378. </div>
  379. <div class="flex">
  380. <p class="text-[#3b3f5c] dark:text-white-light min-w-[58px] max-w-[100px] text-base font-semibold py-2.5">16:00</p>
  381. <div
  382. class="
  383. relative
  384. before:absolute before:left-1/2 before:-translate-x-1/2 before:top-[15px] before:w-2.5 before:h-2.5 before:border-2 before:border-danger before:rounded-full
  385. after:absolute after:left-1/2 after:-translate-x-1/2 after:top-[25px] after:-bottom-[15px] after:w-0 after:h-auto after:border-l-2 after:border-danger after:rounded-full
  386. "
  387. ></div>
  388. <div class="p-2.5 self-center ltr:ml-2.5 rtl:ltr:mr-2.5 rtl:ml-2.5">
  389. <p class="text-[#3b3f5c] dark:text-white-light font-semibold text-[13px]">Conference call with Marketing Manager.</p>
  390. <p class="text-white-dark text-xs font-bold self-center min-w-[100px] max-w-[100px]">6 hrs ago</p>
  391. </div>
  392. </div>
  393. <div class="flex">
  394. <p class="text-[#3b3f5c] dark:text-white-light min-w-[58px] max-w-[100px] text-base font-semibold py-2.5">17:00</p>
  395. <div
  396. class="
  397. relative
  398. before:absolute before:left-1/2 before:-translate-x-1/2 before:top-[15px] before:w-2.5 before:h-2.5 before:border-2 before:border-warning before:rounded-full
  399. after:absolute after:left-1/2 after:-translate-x-1/2 after:top-[25px] after:-bottom-[15px] after:w-0 after:h-auto after:border-l-2 after:border-warning after:rounded-full
  400. "
  401. ></div>
  402. <div class="p-2.5 self-center ltr:ml-2.5 rtl:ltr:mr-2.5 rtl:ml-2.5">
  403. <p class="text-[#3b3f5c] dark:text-white-light font-semibold text-[13px]">Collected documents from <a href="javascript:void(0);">Sara</a></p>
  404. <p class="text-white-dark text-xs font-bold self-center min-w-[100px] max-w-[100px]">9 hrs ago</p>
  405. </div>
  406. </div>
  407. <div class="flex">
  408. <p class="text-[#3b3f5c] dark:text-white-light min-w-[58px] max-w-[100px] text-base font-semibold py-2.5">16:00</p>
  409. <div class="relative before:absolute before:left-1/2 before:-translate-x-1/2 before:top-[15px] before:w-2.5 before:h-2.5 before:border-2 before:border-info before:rounded-full"></div>
  410. <div class="p-2.5 self-center ltr:ml-2.5 rtl:ltr:mr-2.5 rtl:ml-2.5">
  411. <p class="text-[#3b3f5c] dark:text-white-light font-semibold text-[13px]">Server rebooted successfully</p>
  412. <p class="text-white-dark text-xs font-bold self-center min-w-[100px] max-w-[100px]">8 hrs ago</p>
  413. </div>
  414. </div>
  415. </div>
  416. `,-1),Ie={class:"panel"},Oe={class:"flex items-center justify-between mb-5"},We=e("h5",{class:"font-semibold text-lg dark:text-white-light"},"With Images",-1),Ae={class:"flex items-center"},Ge=n('<div class="mb-5"><div class="max-w-[900px] mx-auto text-center ltr:sm:text-left rtl:sm:text-right space-y-3 sm:space-y-0"><div class="sm:flex items-center"><p class="text-[#3b3f5c] dark:text-white-light text-base font-semibold p-2.5">09:00</p><div class="p-2.5 relative after:absolute after:left-1/2 after:-translate-x-1/2 after:top-[25px] after:-bottom-[15px] after:w-0 after:h-auto after:border-l-2 after:border-white-dark/20 after:rounded-full"><img src="'+a+'" alt="" class="w-11 h-11 rounded-full relative z-[1] mx-auto"></div><p class="text-white-dark text-xs font-bold self-center sm:min-w-[100px] sm:max-w-[100px] p-2.5 mt-5 sm:mt-0">25 mins ago</p><p class="text-[#3b3f5c] dark:text-white-light font-semibold text-[13px] p-2.5">Conference call with Marketing Manager.</p></div><div class="sm:flex items-center"><p class="text-[#3b3f5c] dark:text-white-light text-base font-semibold p-2.5">10:00</p><div class="p-2.5 relative after:absolute after:left-1/2 after:-translate-x-1/2 after:top-[25px] after:-bottom-[15px] after:w-0 after:h-auto after:border-l-2 after:border-white-dark/20 after:rounded-full"><img src="'+L+'" alt="" class="w-11 h-11 rounded-full relative z-[1] mx-auto"></div><p class="text-white-dark text-xs font-bold self-center sm:min-w-[100px] sm:max-w-[100px] p-2.5 mt-5 sm:mt-0">2 hrs ago</p><p class="text-[#3b3f5c] dark:text-white-light font-semibold text-[13px] p-2.5">Server rebooted successfully</p></div><div class="sm:flex items-center"><p class="text-[#3b3f5c] dark:text-white-light text-base font-semibold p-2.5">11:00</p><div class="p-2.5 relative after:absolute after:left-1/2 after:-translate-x-1/2 after:top-[25px] after:-bottom-[15px] after:w-0 after:h-auto after:border-l-2 after:border-white-dark/20 after:rounded-full"><img src="'+z+'" alt="" class="w-11 h-11 rounded-full relative z-[1] mx-auto"></div><p class="text-white-dark text-xs font-bold self-center sm:min-w-[100px] sm:max-w-[100px] p-2.5 mt-5 sm:mt-0">4 hrs ago</p><p class="text-[#3b3f5c] dark:text-white-light font-semibold text-[13px] p-2.5">Backup Files EOD</p></div><div class="sm:flex items-center"><p class="text-[#3b3f5c] dark:text-white-light text-base font-semibold p-2.5">12:00</p><div class="p-2.5 relative after:absolute after:left-1/2 after:-translate-x-1/2 after:top-[25px] after:-bottom-[15px] after:w-0 after:h-auto after:border-l-2 after:border-white-dark/20 after:rounded-full"><img src="'+$+'" alt="" class="w-11 h-11 rounded-full relative z-[1] mx-auto"></div><p class="text-white-dark text-xs font-bold self-center sm:min-w-[100px] sm:max-w-[100px] p-2.5 mt-5 sm:mt-0">6 hrs ago</p><p class="text-[#3b3f5c] dark:text-white-light font-semibold text-[13px] p-2.5">Collected documents from Sara</p></div><div class="sm:flex items-center"><p class="text-[#3b3f5c] dark:text-white-light text-base font-semibold p-2.5">01:00</p><div class="p-2.5 relative"><img src="'+Z+'" alt="" class="w-11 h-11 rounded-full relative z-[1] mx-auto"></div><p class="text-white-dark text-xs font-bold self-center sm:min-w-[100px] sm:max-w-[100px] p-2.5 mt-5 sm:mt-0">9 hrs ago</p><p class="text-[#3b3f5c] dark:text-white-light font-semibold text-[13px] p-2.5">PDF file Download</p></div></div></div>',1),Je=e("pre",null,`<!-- images -->
  417. <div class="max-w-[900px] mx-auto text-center ltr:sm:text-left rtl:sm:text-right space-y-3 sm:space-y-0">
  418. <div class="sm:flex items-center">
  419. <p class="text-[#3b3f5c] dark:text-white-light text-base font-semibold p-2.5">09:00</p>
  420. <div
  421. class="
  422. p-2.5
  423. relative
  424. after:absolute after:left-1/2 after:-translate-x-1/2 after:top-[25px] after:-bottom-[15px] after:w-0 after:h-auto after:border-l-2 after:border-white-dark/20 after:rounded-full
  425. "
  426. >
  427. <img src="/assets/images/profile-16.jpeg" alt="" class="w-11 h-11 rounded-full relative z-[1] mx-auto" />
  428. </div>
  429. <p class="text-white-dark text-xs font-bold self-center sm:min-w-[100px] sm:max-w-[100px] p-2.5 mt-5 sm:mt-0">25 mins ago</p>
  430. <p class="text-[#3b3f5c] dark:text-white-light font-semibold text-[13px] p-2.5">Conference call with Marketing Manager.</p>
  431. </div>
  432. <div class="sm:flex items-center">
  433. <p class="text-[#3b3f5c] dark:text-white-light text-base font-semibold p-2.5">10:00</p>
  434. <div
  435. class="
  436. p-2.5
  437. relative
  438. after:absolute after:left-1/2 after:-translate-x-1/2 after:top-[25px] after:-bottom-[15px] after:w-0 after:h-auto after:border-l-2 after:border-white-dark/20 after:rounded-full
  439. "
  440. >
  441. <img src="/assets/images/profile-1.jpeg" alt="" class="w-11 h-11 rounded-full relative z-[1] mx-auto" />
  442. </div>
  443. <p class="text-white-dark text-xs font-bold self-center sm:min-w-[100px] sm:max-w-[100px] p-2.5 mt-5 sm:mt-0">2 hrs ago</p>
  444. <p class="text-[#3b3f5c] dark:text-white-light font-semibold text-[13px] p-2.5">Server rebooted successfully</p>
  445. </div>
  446. <div class="sm:flex items-center">
  447. <p class="text-[#3b3f5c] dark:text-white-light text-base font-semibold p-2.5">11:00</p>
  448. <div
  449. class="
  450. p-2.5
  451. relative
  452. after:absolute after:left-1/2 after:-translate-x-1/2 after:top-[25px] after:-bottom-[15px] after:w-0 after:h-auto after:border-l-2 after:border-white-dark/20 after:rounded-full
  453. "
  454. >
  455. <img src="/assets/images/profile-2.jpeg" alt="" class="w-11 h-11 rounded-full relative z-[1] mx-auto" />
  456. </div>
  457. <p class="text-white-dark text-xs font-bold self-center sm:min-w-[100px] sm:max-w-[100px] p-2.5 mt-5 sm:mt-0">4 hrs ago</p>
  458. <p class="text-[#3b3f5c] dark:text-white-light font-semibold text-[13px] p-2.5">Backup Files EOD</p>
  459. </div>
  460. <div class="sm:flex items-center">
  461. <p class="text-[#3b3f5c] dark:text-white-light text-base font-semibold p-2.5">12:00</p>
  462. <div
  463. class="
  464. p-2.5
  465. relative
  466. after:absolute after:left-1/2 after:-translate-x-1/2 after:top-[25px] after:-bottom-[15px] after:w-0 after:h-auto after:border-l-2 after:border-white-dark/20 after:rounded-full
  467. "
  468. >
  469. <img src="/assets/images/profile-3.jpeg" alt="" class="w-11 h-11 rounded-full relative z-[1] mx-auto" />
  470. </div>
  471. <p class="text-white-dark text-xs font-bold self-center sm:min-w-[100px] sm:max-w-[100px] p-2.5 mt-5 sm:mt-0">6 hrs ago</p>
  472. <p class="text-[#3b3f5c] dark:text-white-light font-semibold text-[13px] p-2.5">Collected documents from Sara</p>
  473. </div>
  474. <div class="sm:flex items-center">
  475. <p class="text-[#3b3f5c] dark:text-white-light text-base font-semibold p-2.5">01:00</p>
  476. <div class="p-2.5 relative">
  477. <img src="/assets/images/profile-4.jpeg" alt="" class="w-11 h-11 rounded-full relative z-[1] mx-auto" />
  478. </div>
  479. <p class="text-white-dark text-xs font-bold self-center sm:min-w-[100px] sm:max-w-[100px] p-2.5 mt-5 sm:mt-0">9 hrs ago</p>
  480. <p class="text-[#3b3f5c] dark:text-white-light font-semibold text-[13px] p-2.5">PDF file Download</p>
  481. </div>
  482. </div>
  483. `,-1),rt=y({__name:"timeline",setup(h){M({title:"Timeline"});const{codeArr:s,toggleCode:d}=q();return(Ke,t)=>(o(),x("div",null,[re,e("div",oe,[e("div",ae,[e("div",se,[le,e("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:t[0]||(t[0]=u=>r(d)("code1"))},[e("span",ne,[l(c,{class:"me-2"}),i(" Code ")])])]),e("div",de,[ie,e("div",fe,[be,e("div",pe,[me,ce,e("div",xe,[l(P,{class:"w-5 h-5 text-white-dark ltr:mr-2.5 rtl:ml-2.5 inline-block align-text-bottom"}),he])])]),e("div",ue,[we,e("div",ve,[ge,_e,e("div",ke,[l(W,{class:"text-white-dark ltr:mr-2.5 rtl:ml-2.5 inline-block align-text-bottom"}),Ce])])]),e("div",ye,[Me,e("div",je,[Le,ze,e("div",$e,[l(te,{class:"w-4.5 h-4.5 text-white-dark ltr:mr-2.5 rtl:ml-2.5 inline-block align-text-bottom"}),qe])])])]),r(s).includes("code1")?(o(),f(m,{key:0},{default:b(()=>[Ze]),_:1})):p("",!0)]),e("div",He,[e("div",Ve,[Fe,e("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:t[1]||(t[1]=u=>r(d)("code2"))},[e("span",Se,[l(c,{class:"me-2"}),i(" Code ")])])]),De,r(s).includes("code2")?(o(),f(m,{key:0},{default:b(()=>[Be]),_:1})):p("",!0)]),e("div",Pe,[e("div",Re,[Te,e("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:t[2]||(t[2]=u=>r(d)("code3"))},[e("span",Ue,[l(c,{class:"me-2"}),i(" Code ")])])]),Ee,r(s).includes("code3")?(o(),f(m,{key:0},{default:b(()=>[Ne]),_:1})):p("",!0)]),e("div",Ie,[e("div",Oe,[We,e("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:t[3]||(t[3]=u=>r(d)("code4"))},[e("span",Ae,[l(c,{class:"me-2"}),i(" Code ")])])]),Ge,r(s).includes("code4")?(o(),f(m,{key:0},{default:b(()=>[Je]),_:1})):p("",!0)])])]))}});export{rt as default};