Open Source
Preline Pro
Sign in
Get all access
Home
Examples
Templates
Pricing
Docs
Preline UI (Open Source)
Back to Examples
All examples
Custom Date & Time Modals
Custom Date & Time description goes here.
Custom Recurrence Event
Preview
Get the code
Existing accounts: Sign in to your account to access the source code.
<!DOCTYPE html> <html lang="en" dir="" class="relative y56xt lcvuk"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Preline UI</title> <link rel="shortcut icon" href="../../favicon.ico"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="../../assets/css/obfuscated.min.css"> </head> <body> <div class="hg6qz ojv0p"> <button type="button" class="kun15 sr7qy jqzvs t2j25 items-center syne5 cbt59 tnyk8 aesap fj5mz i3pem ibyb7 mwwf4 klofg peu41 beds1 v8f9l wh5re r65g7 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-200 dark:focus:bg-neutral-200" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-pro-clcre" data-hs-overlay="#hs-pro-clcre"> Open </button> </div><!-- Custom Recurrence Modal --> <div id="hs-pro-clcre" class="hs-overlay hidden te00u fixed ztbkf y3vpw rcifr u3q5j zlsid [--close-when-click-inside:true] mqcpk" role="dialog" tabindex="-1" aria-labelledby="hs-pro-clcre-label"> <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 b0dx2 opacity-0 nxaac dfzne wgrg8 jr0wy cuome j2zu5 h-[calc(100%-3.5rem)] min-h-[calc(100%-3.5rem)] flex items-center"> <div class="q0mum zvkpk flex egjkw lx3ar xfco6 pzeh7 shadow-[0_10px_40px_10px_rgba(0,0,0,0.08)] dark:shadow-[0_10px_40px_10px_rgba(0,0,0,0.2)] dark:bg-neutral-800"> <!-- Header --> <div class="s8h7v dzc0w flex qj8qf items-center hxiry dark:border-neutral-700"> <h3 id="hs-pro-clcre-label" class="mwwf4 i6scm dark:text-neutral-200"> Custom recurrence </h3> <button type="button" class="xuwx7 jqzvs t2j25 items-center syne5 drtn2 aesap r0r2c i2ex5 i6scm jh54z wh5re zpuyt j01y2 otank dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:text-neutral-400 dark:focus:bg-neutral-600" aria-label="Close" data-hs-overlay="#hs-pro-clcre"> <span class="l14y8">Close</span> <svg class="ylm2u yaf2e" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg> </button> </div> <!-- End Header --> <!-- Body --> <div id="hs-modal-custom-recurrence-event" class="zlsid msslc qdwom gjvdb r21b7 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500"> <div class="dbwuq qdufi"> <div class="bd993 bh1rn"> <!-- Item --> <div> <label for="hs-pro-ccremre" class="gx64a block z0lld xuytq dark:text-neutral-500"> Repeat every: </label> <div class="flex items-center syne5"> <input id="hs-pro-ccremre" type="text" class="jm5y8 yrsq6 block gj9rb i2ex5 r0r2c ownkk z0lld p1nwo omm64 jh54z tf235 j01y2 otank zpuyt kgkor ursxm dark:text-neutral-400 dark:bg-neutral-700 dark:text-neutral-300 dark:placeholder:text-neutral-500 dark:hover:bg-neutral-600 dark:focus:bg-neutral-600" value="1"> <!-- Select --> <div class="relative q0mum"> <select data-hs-select='{ "placeholder": "Start time", "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>", "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative jm5y8 s7ghx ga36g q0mum flex syne5 q9qvy p1nwo cursor-pointer i2ex5 aesap r0r2c ownkk cbt59 z0lld jh54z hover:focus:border-transparent wh5re zpuyt dark:bg-neutral-700 dark:text-neutral-400 dark:focus:outline-none dark:hover:bg-neutral-600 dark:focus:bg-neutral-600", "dropdownClasses": "huvyz xywim q0mum lctdr bsjk7 rnyto ca7mt zlsid lx3ar xfco6 shadow-[0_10px_40px_10px_rgba(0,0,0,0.08)] msslc qdwom gjvdb r21b7 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900", "optionClasses": "hs-selected:bg-gray-100 dark:hs-selected:bg-neutral-800 ik3sx sr7qy q0mum z0lld i6scm cursor-pointer s1xgi ownkk wh5re lug43 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800", "optionTemplate": "<div class=\"flex qj8qf items-center q0mum \"><span data-title></span><span class=\"hidden hs-selected:block \"><svg class=\"ylm2u enx0e i6scm dark:text-neutral-200 \" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>", "viewport": "#hs-modal-custom-recurrence-event" }' class="hidden"> <option value="">Choose</option> <option>Daily</option> <option selected>Weekly</option> <option>Monthly</option> <option>Yearly</option> </select> <div class="absolute tcywf ld9rw -translate-y-1/2"> <svg class="ylm2u enx0e xuytq dark:text-neutral-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg> </div> </div> <!-- End Select --> </div> </div> <!-- End Item --> <!-- Item --> <div> <label class="gx64a block z0lld xuytq dark:text-neutral-500"> Repeats on: </label> <div class="flex ft088 items-center rz3p9"> <!-- Checkbox --> <label for="hs-pro-clcreromo" class="group c4vh9 flex t2j25 items-center ownkk cursor-pointer z0lld i6scm i2ex5 jh54z zpuyt has-[:checked]:bg-blue-600 has-[:checked]:text-white dark:text-neutral-300 dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:focus:bg-neutral-600 dark:has-[:checked]:bg-blue-500 dark:has-[:checked]:text-white"> <input type="radio" class="hidden" id="hs-pro-clcreromo" name="hs-pro-cremd" checked> Mo </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-clcrerotu" class="group c4vh9 flex t2j25 items-center ownkk cursor-pointer z0lld i6scm i2ex5 jh54z zpuyt has-[:checked]:bg-blue-600 has-[:checked]:text-white dark:text-neutral-300 dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:focus:bg-neutral-600 dark:has-[:checked]:bg-blue-500 dark:has-[:checked]:text-white"> <input type="radio" class="hidden" id="hs-pro-clcrerotu" name="hs-pro-cremd"> Tu </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-clcrerowe" class="group c4vh9 flex t2j25 items-center ownkk cursor-pointer z0lld i6scm i2ex5 jh54z zpuyt has-[:checked]:bg-blue-600 has-[:checked]:text-white dark:text-neutral-300 dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:focus:bg-neutral-600 dark:has-[:checked]:bg-blue-500 dark:has-[:checked]:text-white"> <input type="radio" class="hidden" id="hs-pro-clcrerowe" name="hs-pro-cremd"> We </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-clcreroth" class="group c4vh9 flex t2j25 items-center ownkk cursor-pointer z0lld i6scm i2ex5 jh54z zpuyt has-[:checked]:bg-blue-600 has-[:checked]:text-white dark:text-neutral-300 dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:focus:bg-neutral-600 dark:has-[:checked]:bg-blue-500 dark:has-[:checked]:text-white"> <input type="radio" class="hidden" id="hs-pro-clcreroth" name="hs-pro-cremd"> Th </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-clcrerofr" class="group c4vh9 flex t2j25 items-center ownkk cursor-pointer z0lld i6scm i2ex5 jh54z zpuyt has-[:checked]:bg-blue-600 has-[:checked]:text-white dark:text-neutral-300 dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:focus:bg-neutral-600 dark:has-[:checked]:bg-blue-500 dark:has-[:checked]:text-white"> <input type="radio" class="hidden" id="hs-pro-clcrerofr" name="hs-pro-cremd"> Fr </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-clcrerosa" class="group c4vh9 flex t2j25 items-center ownkk cursor-pointer z0lld i6scm i2ex5 jh54z zpuyt has-[:checked]:bg-blue-600 has-[:checked]:text-white dark:text-neutral-300 dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:focus:bg-neutral-600 dark:has-[:checked]:bg-blue-500 dark:has-[:checked]:text-white"> <input type="radio" class="hidden" id="hs-pro-clcrerosa" name="hs-pro-cremd"> Sa </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-clcrerosu" class="group c4vh9 flex t2j25 items-center ownkk cursor-pointer z0lld i6scm i2ex5 jh54z zpuyt has-[:checked]:bg-blue-600 has-[:checked]:text-white dark:text-neutral-300 dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:focus:bg-neutral-600 dark:has-[:checked]:bg-blue-500 dark:has-[:checked]:text-white"> <input type="radio" class="hidden" id="hs-pro-clcrerosu" name="hs-pro-cremd"> Su </label> <!-- End Checkbox --> </div> </div> <!-- End Item --> <!-- Item --> <div> <label class="gx64a block z0lld xuytq dark:text-neutral-500"> Ends: </label> <!-- Radio --> <div class="flex"> <input type="radio" name="hs-pro-clcree" class="ylm2u m457n drtn2 w3gzo z0jdx jml8c j01y2 otank dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-neutral-800" id="hs-pro-clcreen" checked> <label for="hs-pro-clcreen" class="zlgt1 daned qupk7 dark:text-neutral-400">Never</label> </div> <!-- End Radio --> <div class="nsgfh flex items-center syne5"> <!-- Radio --> <div class="twr4n flex"> <input type="radio" name="hs-pro-clcree" class="ylm2u m457n drtn2 w3gzo z0jdx jml8c j01y2 otank dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-neutral-800" id="hs-pro-clcreeo"> <label for="hs-pro-clcreeo" class="zlgt1 daned qupk7 dark:text-neutral-400">On</label> </div> <!-- End Radio --> <div class="q0mum"> <!-- Input --> <input type="text" class="ik3sx yrsq6 block q0mum i2ex5 r0r2c ownkk z0lld p1nwo omm64 jh54z tf235 j01y2 otank zpuyt kgkor ursxm dark:text-neutral-400 dark:bg-neutral-700 dark:text-neutral-300 dark:placeholder:text-neutral-500 dark:hover:bg-neutral-600 dark:focus:bg-neutral-600" value="Jan 7, 2024"> <!-- End Input --> </div> </div> <div class="k8or9 flex items-center syne5"> <!-- Radio --> <div class="twr4n flex"> <input type="radio" name="hs-pro-clcree" class="ylm2u m457n drtn2 w3gzo z0jdx jml8c j01y2 otank dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-neutral-800" id="hs-pro-clcreea"> <label for="hs-pro-clcreea" class="zlgt1 daned qupk7 dark:text-neutral-400">After</label> </div> <!-- End Radio --> <div class="q0mum flex items-center syne5"> <!-- Input --> <input type="text" class="ik3sx yrsq6 block gj9rb i2ex5 r0r2c ownkk z0lld p1nwo omm64 jh54z tf235 j01y2 otank zpuyt kgkor ursxm dark:text-neutral-400 dark:bg-neutral-700 dark:text-neutral-300 dark:placeholder:text-neutral-500 dark:hover:bg-neutral-600 dark:focus:bg-neutral-600" value="7"> <!-- End Input --> <span class="zlgt1 xuytq dark:text-neutral-500">Times</span> </div> </div> </div> <!-- End Item --> </div> </div> </div> <!-- End Body --> <!-- Footer --> <div class="kun15 dzc0w p0niu m457n dark:border-neutral-700"> <div class="t6c0i flex flex-wrap zmyke items-center rhvax"> <button type="button" class="kun15 sr7qy jqzvs t2j25 items-center cbt59 lx3ar aesap m457n i6scm zlgt1 mwwf4 klofg peu41 beds1 dobbe j01y2 otank dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" data-hs-overlay="#hs-pro-clcre"> Cancel </button> <button type="button" class="kun15 sr7qy jqzvs t2j25 items-center syne5 cbt59 riqyd aesap vany4 i3pem zlgt1 mwwf4 klofg peu41 beds1 tj91j j01y2 otank wh5re g2cgi l9pmj dark:focus:ring-blue-500" data-hs-overlay="#hs-pro-clcre"> Save </button> </div> </div> <!-- End Footer --> </div> </div> </div> <!-- End Custom Recurrence Modal --> <script src="../../assets/vendor/preline/dist/index.js?v=1.0.0"></script> </body> </html> <script src="../../scripts/js/open-modals-on-init.js"></script>
<!-- Custom Recurrence Modal --> <div id="hs-pro-clcre" class="hs-overlay hidden te00u fixed ztbkf y3vpw rcifr u3q5j zlsid [--close-when-click-inside:true] mqcpk" role="dialog" tabindex="-1" aria-labelledby="hs-pro-clcre-label"> <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 b0dx2 opacity-0 nxaac dfzne wgrg8 jr0wy cuome j2zu5 h-[calc(100%-3.5rem)] min-h-[calc(100%-3.5rem)] flex items-center"> <div class="q0mum zvkpk flex egjkw lx3ar xfco6 pzeh7 shadow-[0_10px_40px_10px_rgba(0,0,0,0.08)] dark:shadow-[0_10px_40px_10px_rgba(0,0,0,0.2)] dark:bg-neutral-800"> <!-- Header --> <div class="s8h7v dzc0w flex qj8qf items-center hxiry dark:border-neutral-700"> <h3 id="hs-pro-clcre-label" class="mwwf4 i6scm dark:text-neutral-200"> Custom recurrence </h3> <button type="button" class="xuwx7 jqzvs t2j25 items-center syne5 drtn2 aesap r0r2c i2ex5 i6scm jh54z wh5re zpuyt j01y2 otank dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:text-neutral-400 dark:focus:bg-neutral-600" aria-label="Close" data-hs-overlay="#hs-pro-clcre"> <span class="l14y8">Close</span> <svg class="ylm2u yaf2e" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg> </button> </div> <!-- End Header --> <!-- Body --> <div id="hs-modal-custom-recurrence-event" class="zlsid msslc qdwom gjvdb r21b7 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500"> <div class="dbwuq qdufi"> <div class="bd993 bh1rn"> <!-- Item --> <div> <label for="hs-pro-ccremre" class="gx64a block z0lld xuytq dark:text-neutral-500"> Repeat every: </label> <div class="flex items-center syne5"> <input id="hs-pro-ccremre" type="text" class="jm5y8 yrsq6 block gj9rb i2ex5 r0r2c ownkk z0lld p1nwo omm64 jh54z tf235 j01y2 otank zpuyt kgkor ursxm dark:text-neutral-400 dark:bg-neutral-700 dark:text-neutral-300 dark:placeholder:text-neutral-500 dark:hover:bg-neutral-600 dark:focus:bg-neutral-600" value="1"> <!-- Select --> <div class="relative q0mum"> <select data-hs-select='{ "placeholder": "Start time", "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>", "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative jm5y8 s7ghx ga36g q0mum flex syne5 q9qvy p1nwo cursor-pointer i2ex5 aesap r0r2c ownkk cbt59 z0lld jh54z hover:focus:border-transparent wh5re zpuyt dark:bg-neutral-700 dark:text-neutral-400 dark:focus:outline-none dark:hover:bg-neutral-600 dark:focus:bg-neutral-600", "dropdownClasses": "huvyz xywim q0mum lctdr bsjk7 rnyto ca7mt zlsid lx3ar xfco6 shadow-[0_10px_40px_10px_rgba(0,0,0,0.08)] msslc qdwom gjvdb r21b7 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900", "optionClasses": "hs-selected:bg-gray-100 dark:hs-selected:bg-neutral-800 ik3sx sr7qy q0mum z0lld i6scm cursor-pointer s1xgi ownkk wh5re lug43 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800", "optionTemplate": "<div class=\"flex qj8qf items-center q0mum \"><span data-title></span><span class=\"hidden hs-selected:block \"><svg class=\"ylm2u enx0e i6scm dark:text-neutral-200 \" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>", "viewport": "#hs-modal-custom-recurrence-event" }' class="hidden"> <option value="">Choose</option> <option>Daily</option> <option selected>Weekly</option> <option>Monthly</option> <option>Yearly</option> </select> <div class="absolute tcywf ld9rw -translate-y-1/2"> <svg class="ylm2u enx0e xuytq dark:text-neutral-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg> </div> </div> <!-- End Select --> </div> </div> <!-- End Item --> <!-- Item --> <div> <label class="gx64a block z0lld xuytq dark:text-neutral-500"> Repeats on: </label> <div class="flex ft088 items-center rz3p9"> <!-- Checkbox --> <label for="hs-pro-clcreromo" class="group c4vh9 flex t2j25 items-center ownkk cursor-pointer z0lld i6scm i2ex5 jh54z zpuyt has-[:checked]:bg-blue-600 has-[:checked]:text-white dark:text-neutral-300 dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:focus:bg-neutral-600 dark:has-[:checked]:bg-blue-500 dark:has-[:checked]:text-white"> <input type="radio" class="hidden" id="hs-pro-clcreromo" name="hs-pro-cremd" checked> Mo </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-clcrerotu" class="group c4vh9 flex t2j25 items-center ownkk cursor-pointer z0lld i6scm i2ex5 jh54z zpuyt has-[:checked]:bg-blue-600 has-[:checked]:text-white dark:text-neutral-300 dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:focus:bg-neutral-600 dark:has-[:checked]:bg-blue-500 dark:has-[:checked]:text-white"> <input type="radio" class="hidden" id="hs-pro-clcrerotu" name="hs-pro-cremd"> Tu </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-clcrerowe" class="group c4vh9 flex t2j25 items-center ownkk cursor-pointer z0lld i6scm i2ex5 jh54z zpuyt has-[:checked]:bg-blue-600 has-[:checked]:text-white dark:text-neutral-300 dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:focus:bg-neutral-600 dark:has-[:checked]:bg-blue-500 dark:has-[:checked]:text-white"> <input type="radio" class="hidden" id="hs-pro-clcrerowe" name="hs-pro-cremd"> We </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-clcreroth" class="group c4vh9 flex t2j25 items-center ownkk cursor-pointer z0lld i6scm i2ex5 jh54z zpuyt has-[:checked]:bg-blue-600 has-[:checked]:text-white dark:text-neutral-300 dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:focus:bg-neutral-600 dark:has-[:checked]:bg-blue-500 dark:has-[:checked]:text-white"> <input type="radio" class="hidden" id="hs-pro-clcreroth" name="hs-pro-cremd"> Th </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-clcrerofr" class="group c4vh9 flex t2j25 items-center ownkk cursor-pointer z0lld i6scm i2ex5 jh54z zpuyt has-[:checked]:bg-blue-600 has-[:checked]:text-white dark:text-neutral-300 dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:focus:bg-neutral-600 dark:has-[:checked]:bg-blue-500 dark:has-[:checked]:text-white"> <input type="radio" class="hidden" id="hs-pro-clcrerofr" name="hs-pro-cremd"> Fr </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-clcrerosa" class="group c4vh9 flex t2j25 items-center ownkk cursor-pointer z0lld i6scm i2ex5 jh54z zpuyt has-[:checked]:bg-blue-600 has-[:checked]:text-white dark:text-neutral-300 dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:focus:bg-neutral-600 dark:has-[:checked]:bg-blue-500 dark:has-[:checked]:text-white"> <input type="radio" class="hidden" id="hs-pro-clcrerosa" name="hs-pro-cremd"> Sa </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-clcrerosu" class="group c4vh9 flex t2j25 items-center ownkk cursor-pointer z0lld i6scm i2ex5 jh54z zpuyt has-[:checked]:bg-blue-600 has-[:checked]:text-white dark:text-neutral-300 dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:focus:bg-neutral-600 dark:has-[:checked]:bg-blue-500 dark:has-[:checked]:text-white"> <input type="radio" class="hidden" id="hs-pro-clcrerosu" name="hs-pro-cremd"> Su </label> <!-- End Checkbox --> </div> </div> <!-- End Item --> <!-- Item --> <div> <label class="gx64a block z0lld xuytq dark:text-neutral-500"> Ends: </label> <!-- Radio --> <div class="flex"> <input type="radio" name="hs-pro-clcree" class="ylm2u m457n drtn2 w3gzo z0jdx jml8c j01y2 otank dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-neutral-800" id="hs-pro-clcreen" checked> <label for="hs-pro-clcreen" class="zlgt1 daned qupk7 dark:text-neutral-400">Never</label> </div> <!-- End Radio --> <div class="nsgfh flex items-center syne5"> <!-- Radio --> <div class="twr4n flex"> <input type="radio" name="hs-pro-clcree" class="ylm2u m457n drtn2 w3gzo z0jdx jml8c j01y2 otank dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-neutral-800" id="hs-pro-clcreeo"> <label for="hs-pro-clcreeo" class="zlgt1 daned qupk7 dark:text-neutral-400">On</label> </div> <!-- End Radio --> <div class="q0mum"> <!-- Input --> <input type="text" class="ik3sx yrsq6 block q0mum i2ex5 r0r2c ownkk z0lld p1nwo omm64 jh54z tf235 j01y2 otank zpuyt kgkor ursxm dark:text-neutral-400 dark:bg-neutral-700 dark:text-neutral-300 dark:placeholder:text-neutral-500 dark:hover:bg-neutral-600 dark:focus:bg-neutral-600" value="Jan 7, 2024"> <!-- End Input --> </div> </div> <div class="k8or9 flex items-center syne5"> <!-- Radio --> <div class="twr4n flex"> <input type="radio" name="hs-pro-clcree" class="ylm2u m457n drtn2 w3gzo z0jdx jml8c j01y2 otank dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-neutral-800" id="hs-pro-clcreea"> <label for="hs-pro-clcreea" class="zlgt1 daned qupk7 dark:text-neutral-400">After</label> </div> <!-- End Radio --> <div class="q0mum flex items-center syne5"> <!-- Input --> <input type="text" class="ik3sx yrsq6 block gj9rb i2ex5 r0r2c ownkk z0lld p1nwo omm64 jh54z tf235 j01y2 otank zpuyt kgkor ursxm dark:text-neutral-400 dark:bg-neutral-700 dark:text-neutral-300 dark:placeholder:text-neutral-500 dark:hover:bg-neutral-600 dark:focus:bg-neutral-600" value="7"> <!-- End Input --> <span class="zlgt1 xuytq dark:text-neutral-500">Times</span> </div> </div> </div> <!-- End Item --> </div> </div> </div> <!-- End Body --> <!-- Footer --> <div class="kun15 dzc0w p0niu m457n dark:border-neutral-700"> <div class="t6c0i flex flex-wrap zmyke items-center rhvax"> <button type="button" class="kun15 sr7qy jqzvs t2j25 items-center cbt59 lx3ar aesap m457n i6scm zlgt1 mwwf4 klofg peu41 beds1 dobbe j01y2 otank dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" data-hs-overlay="#hs-pro-clcre"> Cancel </button> <button type="button" class="kun15 sr7qy jqzvs t2j25 items-center syne5 cbt59 riqyd aesap vany4 i3pem zlgt1 mwwf4 klofg peu41 beds1 tj91j j01y2 otank wh5re g2cgi l9pmj dark:focus:ring-blue-500" data-hs-overlay="#hs-pro-clcre"> Save </button> </div> </div> <!-- End Footer --> </div> </div> </div> <!-- End Custom Recurrence Modal -->
Snooze
New
Preview
Get the code
Existing accounts: Sign in to your account to access the source code.
<!DOCTYPE html> <html lang="en" dir="" class="relative y56xt lcvuk"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Preline UI</title> <link rel="shortcut icon" href="../../favicon.ico"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="../../assets/css/obfuscated.min.css"> </head> <body><!-- Archive Message Modal --> <div id="hs-pro-chhsn" class="hs-overlay hidden te00u fixed ztbkf y3vpw cfnf9 u3q5j zlsid [--close-when-click-inside:true] mqcpk" role="dialog" tabindex="-1" aria-labelledby="hs-pro-chhsn-label"> <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 b0dx2 opacity-0 nxaac dfzne ip0ho jr0wy cuome j2zu5 h-[calc(100%-3.5rem)] min-h-[calc(100%-3.5rem)] flex items-center"> <div class="q0mum zvkpk ca7mt flex egjkw lx3ar xfco6 pzeh7 shadow-[0_10px_40px_10px_rgba(0,0,0,0.08)] dark:shadow-[0_10px_40px_10px_rgba(0,0,0,0.2)] dark:bg-neutral-800"> <!-- Header --> <div class="s8h7v dzc0w flex qj8qf items-center hxiry dark:border-neutral-700"> <h3 id="hs-pro-chhsn-label" class="mwwf4 i6scm dark:text-neutral-200"> Snooze </h3> <button type="button" class="xuwx7 jqzvs t2j25 items-center syne5 drtn2 aesap r0r2c i2ex5 i6scm jh54z wh5re zpuyt j01y2 otank dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:text-neutral-400 dark:focus:bg-neutral-600" aria-label="Close" data-hs-overlay="#hs-pro-chhsn"> <span class="l14y8">Close</span> <svg class="ylm2u yaf2e" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg> </button> </div> <!-- End Header --> <!-- Body --> <div class="bsjk7 zlsid msslc qdwom gjvdb r21b7 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500"> <fieldset class="bd993 okfj9"> <legend class="l14y8"> Snooze </legend> <!-- Checkbox --> <label for="hs-pro-chhsnrt1" class="kun15 sr7qy flex items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsnrt1" class="hidden" value="Today" name="hs-pro-chhsnrt" checked> <span class="v6j3t"> <span class="block mwwf4 ibyb7 i6scm dark:text-neutral-200"> Today </span> </span> <span class="block nvusg zlgt1 dqobv daned dark:text-neutral-500"> 5:05 PM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsnrt2" class="kun15 sr7qy flex items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsnrt2" class="hidden" value="Tomorrow" name="hs-pro-chhsnrt" > <span class="v6j3t"> <span class="block mwwf4 ibyb7 i6scm dark:text-neutral-200"> Tomorrow </span> </span> <span class="block nvusg zlgt1 dqobv daned dark:text-neutral-500"> Wed 9:00 AM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsnrt3" class="kun15 sr7qy flex items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsnrt3" class="hidden" value="This week" name="hs-pro-chhsnrt" > <span class="v6j3t"> <span class="block mwwf4 ibyb7 i6scm dark:text-neutral-200"> This week </span> </span> <span class="block nvusg zlgt1 dqobv daned dark:text-neutral-500"> Thu, May 8, 9:00 AM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsnrt4" class="kun15 sr7qy flex items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsnrt4" class="hidden" value="Next week" name="hs-pro-chhsnrt" > <span class="v6j3t"> <span class="block mwwf4 ibyb7 i6scm dark:text-neutral-200"> Next week </span> </span> <span class="block nvusg zlgt1 dqobv daned dark:text-neutral-500"> Mon, May 13, 9:00 AM </span> </label> <!-- End Checkbox --> </fieldset> <div class="sunl2"> <!-- Button --> <button type="button" class="q0mum flex qj8qf items-center u4mmg kun15 sr7qy cbt59 mwwf4 ibyb7 i6scm jh54z ownkk j01y2 otank wh5re lug43 dark:text-neutral-200 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:hover:text-neutral-200 dark:focus:text-neutral-200" data-hs-overlay="#hs-pro-chhsncs"> Custom <svg class="ylm2u yaf2e" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg> </button> <!-- End Button --> </div> </div> <!-- End Body --> </div> </div> </div> <!-- End Archive Message Modal --> <script src="../../assets/vendor/preline/dist/index.js?v=1.0.0"></script> </body> </html> <script src="../../scripts/js/open-modals-on-init.js"></script>
<!-- Archive Message Modal --> <div id="hs-pro-chhsn" class="hs-overlay hidden te00u fixed ztbkf y3vpw cfnf9 u3q5j zlsid [--close-when-click-inside:true] mqcpk" role="dialog" tabindex="-1" aria-labelledby="hs-pro-chhsn-label"> <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 b0dx2 opacity-0 nxaac dfzne ip0ho jr0wy cuome j2zu5 h-[calc(100%-3.5rem)] min-h-[calc(100%-3.5rem)] flex items-center"> <div class="q0mum zvkpk ca7mt flex egjkw lx3ar xfco6 pzeh7 shadow-[0_10px_40px_10px_rgba(0,0,0,0.08)] dark:shadow-[0_10px_40px_10px_rgba(0,0,0,0.2)] dark:bg-neutral-800"> <!-- Header --> <div class="s8h7v dzc0w flex qj8qf items-center hxiry dark:border-neutral-700"> <h3 id="hs-pro-chhsn-label" class="mwwf4 i6scm dark:text-neutral-200"> Snooze </h3> <button type="button" class="xuwx7 jqzvs t2j25 items-center syne5 drtn2 aesap r0r2c i2ex5 i6scm jh54z wh5re zpuyt j01y2 otank dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:text-neutral-400 dark:focus:bg-neutral-600" aria-label="Close" data-hs-overlay="#hs-pro-chhsn"> <span class="l14y8">Close</span> <svg class="ylm2u yaf2e" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg> </button> </div> <!-- End Header --> <!-- Body --> <div class="bsjk7 zlsid msslc qdwom gjvdb r21b7 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500"> <fieldset class="bd993 okfj9"> <legend class="l14y8"> Snooze </legend> <!-- Checkbox --> <label for="hs-pro-chhsnrt1" class="kun15 sr7qy flex items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsnrt1" class="hidden" value="Today" name="hs-pro-chhsnrt" checked> <span class="v6j3t"> <span class="block mwwf4 ibyb7 i6scm dark:text-neutral-200"> Today </span> </span> <span class="block nvusg zlgt1 dqobv daned dark:text-neutral-500"> 5:05 PM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsnrt2" class="kun15 sr7qy flex items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsnrt2" class="hidden" value="Tomorrow" name="hs-pro-chhsnrt" > <span class="v6j3t"> <span class="block mwwf4 ibyb7 i6scm dark:text-neutral-200"> Tomorrow </span> </span> <span class="block nvusg zlgt1 dqobv daned dark:text-neutral-500"> Wed 9:00 AM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsnrt3" class="kun15 sr7qy flex items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsnrt3" class="hidden" value="This week" name="hs-pro-chhsnrt" > <span class="v6j3t"> <span class="block mwwf4 ibyb7 i6scm dark:text-neutral-200"> This week </span> </span> <span class="block nvusg zlgt1 dqobv daned dark:text-neutral-500"> Thu, May 8, 9:00 AM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsnrt4" class="kun15 sr7qy flex items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsnrt4" class="hidden" value="Next week" name="hs-pro-chhsnrt" > <span class="v6j3t"> <span class="block mwwf4 ibyb7 i6scm dark:text-neutral-200"> Next week </span> </span> <span class="block nvusg zlgt1 dqobv daned dark:text-neutral-500"> Mon, May 13, 9:00 AM </span> </label> <!-- End Checkbox --> </fieldset> <div class="sunl2"> <!-- Button --> <button type="button" class="q0mum flex qj8qf items-center u4mmg kun15 sr7qy cbt59 mwwf4 ibyb7 i6scm jh54z ownkk j01y2 otank wh5re lug43 dark:text-neutral-200 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:hover:text-neutral-200 dark:focus:text-neutral-200" data-hs-overlay="#hs-pro-chhsncs"> Custom <svg class="ylm2u yaf2e" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg> </button> <!-- End Button --> </div> </div> <!-- End Body --> </div> </div> </div> <!-- End Archive Message Modal -->
Custom Snooze Date & Time
New
Preview
Get the code
Existing accounts: Sign in to your account to access the source code.
<!DOCTYPE html> <html lang="en" dir="" class="relative y56xt lcvuk"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Preline UI</title> <link rel="shortcut icon" href="../../favicon.ico"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="../../assets/css/obfuscated.min.css"> </head> <body><!-- Archive Message Modal --> <div id="hs-pro-chhsncs" class="hs-overlay hidden te00u fixed ztbkf y3vpw cfnf9 u3q5j zlsid [--close-when-click-inside:true] mqcpk" role="dialog" tabindex="-1" aria-labelledby="hs-pro-chhsncs-label"> <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 b0dx2 opacity-0 nxaac dfzne ip0ho jr0wy cuome j2zu5 h-[calc(100%-3.5rem)] min-h-[calc(100%-3.5rem)] flex items-center"> <div class="q0mum zvkpk ca7mt flex egjkw lx3ar xfco6 pzeh7 shadow-[0_10px_40px_10px_rgba(0,0,0,0.08)] dark:shadow-[0_10px_40px_10px_rgba(0,0,0,0.2)] dark:bg-neutral-800"> <!-- Header --> <div class="gtgfz dzc0w flex qj8qf items-center hxiry m457n dark:border-neutral-700"> <button type="button" class="uiima jqzvs t2j25 items-center syne5 drtn2 aesap r0r2c lx3ar i6scm s1xgi wh5re lug43 j01y2 otank dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:text-neutral-400 dark:focus:bg-neutral-700" data-hs-overlay="#hs-pro-chhsn"> <span class="l14y8">Back</span> <svg class="ylm2u yaf2e" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg> </button> <h3 id="hs-pro-chhsncs-label" class="a66ko i6scm dark:text-neutral-200"> Custom date & time </h3> <button type="button" class="uiima jqzvs t2j25 items-center syne5 drtn2 aesap r0r2c i2ex5 i6scm jh54z wh5re zpuyt j01y2 otank dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:text-neutral-400 dark:focus:bg-neutral-600" aria-label="Close" data-hs-overlay="#hs-pro-chhsncs"> <svg class="ylm2u yaf2e" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg> <span class="l14y8">Close</span> </button> </div> <!-- End Header --> <!-- Body --> <div class="bsjk7 lqw7g zlsid msslc qdwom gjvdb r21b7 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500"> <div class="flex qj8qf rz3p9"> <fieldset class="q0mum bd993 okfj9"> <legend class="l14y8"> Custom date & time </legend> <!-- Checkbox --> <label for="hs-pro-chhsncsramt1" class="kun15 sr7qy flex t2j25 items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt1" class="hidden" value="01:00 AM" name="hs-pro-chhsncsramt" checked> <span class="block z0lld i6scm dark:text-neutral-200"> 01:00 AM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt2" class="kun15 sr7qy flex t2j25 items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt2" class="hidden" value="02:00 AM" name="hs-pro-chhsncsramt" > <span class="block z0lld i6scm dark:text-neutral-200"> 02:00 AM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt3" class="kun15 sr7qy flex t2j25 items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt3" class="hidden" value="03:00 AM" name="hs-pro-chhsncsramt" > <span class="block z0lld i6scm dark:text-neutral-200"> 03:00 AM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt4" class="kun15 sr7qy flex t2j25 items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt4" class="hidden" value="04:00 AM" name="hs-pro-chhsncsramt" > <span class="block z0lld i6scm dark:text-neutral-200"> 04:00 AM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt5" class="kun15 sr7qy flex t2j25 items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt5" class="hidden" value="05:00 AM" name="hs-pro-chhsncsramt" > <span class="block z0lld i6scm dark:text-neutral-200"> 05:00 AM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt6" class="kun15 sr7qy flex t2j25 items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt6" class="hidden" value="06:00 AM" name="hs-pro-chhsncsramt" > <span class="block z0lld i6scm dark:text-neutral-200"> 06:00 AM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt7" class="kun15 sr7qy flex t2j25 items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt7" class="hidden" value="07:00 AM" name="hs-pro-chhsncsramt" > <span class="block z0lld i6scm dark:text-neutral-200"> 07:00 AM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt8" class="kun15 sr7qy flex t2j25 items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt8" class="hidden" value="08:00 AM" name="hs-pro-chhsncsramt" > <span class="block z0lld i6scm dark:text-neutral-200"> 08:00 AM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt9" class="kun15 sr7qy flex t2j25 items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt9" class="hidden" value="09:00 AM" name="hs-pro-chhsncsramt" > <span class="block z0lld i6scm dark:text-neutral-200"> 09:00 AM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt10" class="kun15 sr7qy flex t2j25 items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt10" class="hidden" value="010:00 AM" name="hs-pro-chhsncsramt" > <span class="block z0lld i6scm dark:text-neutral-200"> 010:00 AM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt11" class="kun15 sr7qy flex t2j25 items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt11" class="hidden" value="011:00 AM" name="hs-pro-chhsncsramt" > <span class="block z0lld i6scm dark:text-neutral-200"> 011:00 AM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt12" class="kun15 sr7qy flex t2j25 items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt12" class="hidden" value="012:00 AM" name="hs-pro-chhsncsramt" > <span class="block z0lld i6scm dark:text-neutral-200"> 012:00 AM </span> </label> <!-- End Checkbox --> </fieldset> <fieldset class="q0mum bd993 okfj9"> <legend class="l14y8"> Custom date & time </legend> <!-- Checkbox --> <label for="hs-pro-chhsncsramt13" class="kun15 sr7qy flex t2j25 items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt13" class="hidden" value="01:00 PM" name="hs-pro-chhsncsramt" > <span class="block z0lld i6scm dark:text-neutral-200"> 01:00 PM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt14" class="kun15 sr7qy flex t2j25 items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt14" class="hidden" value="02:00 PM" name="hs-pro-chhsncsramt" > <span class="block z0lld i6scm dark:text-neutral-200"> 02:00 PM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt15" class="kun15 sr7qy flex t2j25 items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt15" class="hidden" value="03:00 PM" name="hs-pro-chhsncsramt" > <span class="block z0lld i6scm dark:text-neutral-200"> 03:00 PM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt16" class="kun15 sr7qy flex t2j25 items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt16" class="hidden" value="04:00 PM" name="hs-pro-chhsncsramt" > <span class="block z0lld i6scm dark:text-neutral-200"> 04:00 PM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt17" class="kun15 sr7qy flex t2j25 items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt17" class="hidden" value="05:00 PM" name="hs-pro-chhsncsramt" > <span class="block z0lld i6scm dark:text-neutral-200"> 05:00 PM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt18" class="kun15 sr7qy flex t2j25 items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt18" class="hidden" value="06:00 PM" name="hs-pro-chhsncsramt" > <span class="block z0lld i6scm dark:text-neutral-200"> 06:00 PM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt19" class="kun15 sr7qy flex t2j25 items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt19" class="hidden" value="07:00 PM" name="hs-pro-chhsncsramt" > <span class="block z0lld i6scm dark:text-neutral-200"> 07:00 PM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt20" class="kun15 sr7qy flex t2j25 items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt20" class="hidden" value="08:00 PM" name="hs-pro-chhsncsramt" > <span class="block z0lld i6scm dark:text-neutral-200"> 08:00 PM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt21" class="kun15 sr7qy flex t2j25 items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt21" class="hidden" value="09:00 PM" name="hs-pro-chhsncsramt" > <span class="block z0lld i6scm dark:text-neutral-200"> 09:00 PM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt22" class="kun15 sr7qy flex t2j25 items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt22" class="hidden" value="010:00 PM" name="hs-pro-chhsncsramt" > <span class="block z0lld i6scm dark:text-neutral-200"> 010:00 PM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt23" class="kun15 sr7qy flex t2j25 items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt23" class="hidden" value="011:00 PM" name="hs-pro-chhsncsramt" > <span class="block z0lld i6scm dark:text-neutral-200"> 011:00 PM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt24" class="kun15 sr7qy flex t2j25 items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt24" class="hidden" value="012:00 PM" name="hs-pro-chhsncsramt" > <span class="block z0lld i6scm dark:text-neutral-200"> 012:00 PM </span> </label> <!-- End Checkbox --> </fieldset> </div> </div> <!-- End Body --> <!-- Footer --> <div class="nblgz"> <div class="gtgfz dzc0w np1k4 flex qj8qf items-center syne5 wx7ib m457n dark:border-neutral-700"> <div class="q0mum"> <span class="qupk7 gx64a block zlgt1 hjfyg dark:text-neutral-400"> Date </span> <!-- Calendar Dropdown --> <div class="hs-dropdown [--auto-close:inside] jqzvs q0mum"> <button id="hs-pro-dnic" type="button" class="etcw0 q0mum jqzvs items-center zlgt1 mwwf4 klofg aesap r0r2c i2ex5 i6scm jh54z j01y2 otank wh5re zpuyt dark:bg-neutral-700 dark:border-transparent dark:text-neutral-300 dark:hover:bg-neutral-600 dark:focus:bg-neutral-600" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown"> <svg class="ylm2u icspj enx0e" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="4" rx="2" ry="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/><path d="M8 14h.01"/><path d="M12 14h.01"/><path d="M16 14h.01"/><path d="M8 18h.01"/><path d="M12 18h.01"/><path d="M16 18h.01"/></svg> 07/05/2024 </button> <div class="hs-dropdown-menu hs-dropdown-open:opacity-100 p2mfi transition-[opacity,margin] duration opacity-0 hidden xywim lx3ar xfco6 shadow-[0_10px_40px_10px_rgba(0,0,0,0.08)] dark:shadow-[0_10px_40px_10px_rgba(0,0,0,0.2)] dark:bg-neutral-900" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-dnic"> <!-- Calendar --> <div class="jeqo2 rnyto"> <!-- Months --> <div class="bd993 x8hew items-center u4mmg b2wcu nblgz"> <!-- Prev Button --> <div class="qgtgq"> <button type="button" class="uiima flex t2j25 items-center i6scm s1xgi drtn2 j01y2 otank wh5re lug43 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" aria-label="Previous"> <svg class="ylm2u yaf2e" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg> </button> </div> <!-- End Prev Button --> <!-- Month / Year --> <div class="v5ybc flex t2j25 items-center rz3p9"> <div class="relative"> <select data-hs-select='{ "placeholder": "Select month", "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>", "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative flex q9qvy q0mum cursor-pointer cbt59 mwwf4 i6scm hfwmg wh5re t07yn etwkc zlj2b s4vql dark:text-neutral-200 dark:hover:text-blue-500 dark:focus:text-blue-500", "dropdownClasses": "huvyz xywim csg0j ng19c bsjk7 rnyto lx3ar aesap m457n klofg x3vl5 ca7mt zlsid msslc qdwom gjvdb r21b7 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900 dark:border-neutral-700", "optionClasses": "etcw0 q0mum ibyb7 i6scm cursor-pointer s1xgi klofg wh5re lug43 dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:text-neutral-200 dark:focus:bg-neutral-800", "optionTemplate": "<div class=\"flex qj8qf items-center q0mum \"><span data-title></span><span class=\"hidden hs-selected:block \"><svg class=\"ylm2u enx0e i6scm dark:text-neutral-200 \" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>" }' class="hidden"> <option value="0">January</option> <option value="1">February</option> <option value="2">March</option> <option value="3">April</option> <option value="4">May</option> <option value="5">June</option> <option value="6" selected>July</option> <option value="7">August</option> <option value="8">September</option> <option value="9">October</option> <option value="10">November</option> <option value="11">December</option> </select> </div> <span class="i6scm dark:text-neutral-200">/</span> <div class="relative"> <select data-hs-select='{ "placeholder": "Select year", "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>", "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative flex q9qvy q0mum cursor-pointer cbt59 mwwf4 i6scm hfwmg wh5re t07yn etwkc zlj2b s4vql dark:text-neutral-200 dark:hover:text-blue-500 dark:focus:text-blue-500", "dropdownClasses": "huvyz xywim twr4n ng19c bsjk7 rnyto lx3ar aesap m457n klofg x3vl5 ca7mt zlsid msslc qdwom gjvdb r21b7 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900 dark:border-neutral-700", "optionClasses": "etcw0 q0mum ibyb7 i6scm cursor-pointer s1xgi klofg wh5re lug43 dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:text-neutral-200 dark:focus:bg-neutral-800", "optionTemplate": "<div class=\"flex qj8qf items-center q0mum \"><span data-title></span><span class=\"hidden hs-selected:block \"><svg class=\"ylm2u enx0e i6scm dark:text-neutral-200 \" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>" }' class="hidden"> <option selected>2023</option> <option>2024</option> <option>2025</option> <option>2026</option> <option>2027</option> </select> </div> </div> <!-- End Month / Year --> <!-- Next Button --> <div class="qgtgq flex zmyke"> <button type="button" class=" uiima flex t2j25 items-center i6scm s1xgi drtn2 j01y2 otank wh5re lug43 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" aria-label="Next"> <svg class="ylm2u yaf2e" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg> </button> </div> <!-- End Next Button --> </div> <!-- Months --> <!-- Weeks --> <div class="flex l3luo"> <span class="p37dm axth2 block ojv0p ibyb7 daned dark:text-neutral-500"> Mo </span> <span class="p37dm axth2 block ojv0p ibyb7 daned dark:text-neutral-500"> Tu </span> <span class="p37dm axth2 block ojv0p ibyb7 daned dark:text-neutral-500"> We </span> <span class="p37dm axth2 block ojv0p ibyb7 daned dark:text-neutral-500"> Th </span> <span class="p37dm axth2 block ojv0p ibyb7 daned dark:text-neutral-500"> Fr </span> <span class="p37dm axth2 block ojv0p ibyb7 daned dark:text-neutral-500"> Sa </span> <span class="p37dm axth2 block ojv0p ibyb7 daned dark:text-neutral-500"> Su </span> </div> <!-- Weeks --> <!-- Days --> <div class="flex"> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200" disabled> 26 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200" disabled> 27 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200" disabled> 28 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200" disabled> 29 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200" disabled> 30 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 1 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 2 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 3 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 4 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 5 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 6 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 7 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 8 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 9 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 10 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 11 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 12 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 13 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 14 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 15 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 16 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 17 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 18 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 19 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center riqyd aesap r0r2c ibyb7 mwwf4 i3pem lldnv drtn2 dark:bg-blue-500 j01y2 otank wh5re lug43 dark:hover:border-neutral-700"> 20 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 21 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 22 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 23 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 24 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 25 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 26 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 27 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 28 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 29 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 30 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 31 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm lldnv hfwmg drtn2 j01y2 otank wh5re lug43 dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 1 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm lldnv hfwmg drtn2 j01y2 otank wh5re lug43 dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 2 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm lldnv hfwmg drtn2 j01y2 otank wh5re lug43 dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 3 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm lldnv hfwmg drtn2 j01y2 otank wh5re lug43 dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 4 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm lldnv hfwmg drtn2 j01y2 otank wh5re lug43 dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 5 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm lldnv hfwmg drtn2 j01y2 otank wh5re lug43 dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 6 </button> </div> </div> <!-- Days --> </div> </div> </div> </div> <!-- End Calendar Dropdown --> <!-- Input --> <div class="q0mum"> <label for="hs-pro-chhsncstm" class="qupk7 gx64a block zlgt1 hjfyg dark:text-neutral-400"> Time </label> <input type="text" class="jm5y8 yrsq6 block q0mum i2ex5 r0r2c ownkk zlgt1 p1nwo omm64 jh54z tf235 j01y2 otank zpuyt kgkor ursxm dark:text-neutral-400 dark:bg-neutral-700 dark:text-neutral-300 dark:placeholder:text-neutral-500 dark:hover:bg-neutral-600 dark:focus:bg-neutral-600" id="hs-pro-chhsncstm" value="9:00 AM"> </div> <!-- End Input --> </div> <div class="owzl6 dzc0w"> <div class="t6c0i flex flex-wrap zmyke items-center rhvax"> <button type="button" class="kun15 sr7qy jqzvs t2j25 items-center cbt59 lx3ar aesap m457n i6scm zlgt1 mwwf4 klofg peu41 beds1 dobbe j01y2 otank dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" data-hs-overlay="#hs-pro-chhsncs"> Cancel </button> <button type="button" class="kun15 sr7qy jqzvs t2j25 items-center syne5 cbt59 riqyd aesap vany4 i3pem zlgt1 mwwf4 klofg peu41 beds1 tj91j j01y2 otank wh5re g2cgi l9pmj dark:focus:ring-blue-500" data-hs-overlay="#hs-pro-chhsncs"> Snooze </button> </div> </div> </div> <!-- End Footer --> </div> </div> </div> <!-- End Archive Message Modal --> <script src="../../assets/vendor/preline/dist/index.js?v=1.0.0"></script> </body> </html> <script src="../../scripts/js/open-modals-on-init.js"></script>
<!-- Archive Message Modal --> <div id="hs-pro-chhsncs" class="hs-overlay hidden te00u fixed ztbkf y3vpw cfnf9 u3q5j zlsid [--close-when-click-inside:true] mqcpk" role="dialog" tabindex="-1" aria-labelledby="hs-pro-chhsncs-label"> <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 b0dx2 opacity-0 nxaac dfzne ip0ho jr0wy cuome j2zu5 h-[calc(100%-3.5rem)] min-h-[calc(100%-3.5rem)] flex items-center"> <div class="q0mum zvkpk ca7mt flex egjkw lx3ar xfco6 pzeh7 shadow-[0_10px_40px_10px_rgba(0,0,0,0.08)] dark:shadow-[0_10px_40px_10px_rgba(0,0,0,0.2)] dark:bg-neutral-800"> <!-- Header --> <div class="gtgfz dzc0w flex qj8qf items-center hxiry m457n dark:border-neutral-700"> <button type="button" class="uiima jqzvs t2j25 items-center syne5 drtn2 aesap r0r2c lx3ar i6scm s1xgi wh5re lug43 j01y2 otank dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:text-neutral-400 dark:focus:bg-neutral-700" data-hs-overlay="#hs-pro-chhsn"> <span class="l14y8">Back</span> <svg class="ylm2u yaf2e" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg> </button> <h3 id="hs-pro-chhsncs-label" class="a66ko i6scm dark:text-neutral-200"> Custom date & time </h3> <button type="button" class="uiima jqzvs t2j25 items-center syne5 drtn2 aesap r0r2c i2ex5 i6scm jh54z wh5re zpuyt j01y2 otank dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:text-neutral-400 dark:focus:bg-neutral-600" aria-label="Close" data-hs-overlay="#hs-pro-chhsncs"> <svg class="ylm2u yaf2e" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg> <span class="l14y8">Close</span> </button> </div> <!-- End Header --> <!-- Body --> <div class="bsjk7 lqw7g zlsid msslc qdwom gjvdb r21b7 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500"> <div class="flex qj8qf rz3p9"> <fieldset class="q0mum bd993 okfj9"> <legend class="l14y8"> Custom date & time </legend> <!-- Checkbox --> <label for="hs-pro-chhsncsramt1" class="kun15 sr7qy flex t2j25 items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt1" class="hidden" value="01:00 AM" name="hs-pro-chhsncsramt" checked> <span class="block z0lld i6scm dark:text-neutral-200"> 01:00 AM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt2" class="kun15 sr7qy flex t2j25 items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt2" class="hidden" value="02:00 AM" name="hs-pro-chhsncsramt" > <span class="block z0lld i6scm dark:text-neutral-200"> 02:00 AM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt3" class="kun15 sr7qy flex t2j25 items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt3" class="hidden" value="03:00 AM" name="hs-pro-chhsncsramt" > <span class="block z0lld i6scm dark:text-neutral-200"> 03:00 AM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt4" class="kun15 sr7qy flex t2j25 items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt4" class="hidden" value="04:00 AM" name="hs-pro-chhsncsramt" > <span class="block z0lld i6scm dark:text-neutral-200"> 04:00 AM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt5" class="kun15 sr7qy flex t2j25 items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt5" class="hidden" value="05:00 AM" name="hs-pro-chhsncsramt" > <span class="block z0lld i6scm dark:text-neutral-200"> 05:00 AM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt6" class="kun15 sr7qy flex t2j25 items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt6" class="hidden" value="06:00 AM" name="hs-pro-chhsncsramt" > <span class="block z0lld i6scm dark:text-neutral-200"> 06:00 AM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt7" class="kun15 sr7qy flex t2j25 items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt7" class="hidden" value="07:00 AM" name="hs-pro-chhsncsramt" > <span class="block z0lld i6scm dark:text-neutral-200"> 07:00 AM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt8" class="kun15 sr7qy flex t2j25 items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt8" class="hidden" value="08:00 AM" name="hs-pro-chhsncsramt" > <span class="block z0lld i6scm dark:text-neutral-200"> 08:00 AM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt9" class="kun15 sr7qy flex t2j25 items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt9" class="hidden" value="09:00 AM" name="hs-pro-chhsncsramt" > <span class="block z0lld i6scm dark:text-neutral-200"> 09:00 AM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt10" class="kun15 sr7qy flex t2j25 items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt10" class="hidden" value="010:00 AM" name="hs-pro-chhsncsramt" > <span class="block z0lld i6scm dark:text-neutral-200"> 010:00 AM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt11" class="kun15 sr7qy flex t2j25 items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt11" class="hidden" value="011:00 AM" name="hs-pro-chhsncsramt" > <span class="block z0lld i6scm dark:text-neutral-200"> 011:00 AM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt12" class="kun15 sr7qy flex t2j25 items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt12" class="hidden" value="012:00 AM" name="hs-pro-chhsncsramt" > <span class="block z0lld i6scm dark:text-neutral-200"> 012:00 AM </span> </label> <!-- End Checkbox --> </fieldset> <fieldset class="q0mum bd993 okfj9"> <legend class="l14y8"> Custom date & time </legend> <!-- Checkbox --> <label for="hs-pro-chhsncsramt13" class="kun15 sr7qy flex t2j25 items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt13" class="hidden" value="01:00 PM" name="hs-pro-chhsncsramt" > <span class="block z0lld i6scm dark:text-neutral-200"> 01:00 PM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt14" class="kun15 sr7qy flex t2j25 items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt14" class="hidden" value="02:00 PM" name="hs-pro-chhsncsramt" > <span class="block z0lld i6scm dark:text-neutral-200"> 02:00 PM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt15" class="kun15 sr7qy flex t2j25 items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt15" class="hidden" value="03:00 PM" name="hs-pro-chhsncsramt" > <span class="block z0lld i6scm dark:text-neutral-200"> 03:00 PM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt16" class="kun15 sr7qy flex t2j25 items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt16" class="hidden" value="04:00 PM" name="hs-pro-chhsncsramt" > <span class="block z0lld i6scm dark:text-neutral-200"> 04:00 PM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt17" class="kun15 sr7qy flex t2j25 items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt17" class="hidden" value="05:00 PM" name="hs-pro-chhsncsramt" > <span class="block z0lld i6scm dark:text-neutral-200"> 05:00 PM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt18" class="kun15 sr7qy flex t2j25 items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt18" class="hidden" value="06:00 PM" name="hs-pro-chhsncsramt" > <span class="block z0lld i6scm dark:text-neutral-200"> 06:00 PM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt19" class="kun15 sr7qy flex t2j25 items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt19" class="hidden" value="07:00 PM" name="hs-pro-chhsncsramt" > <span class="block z0lld i6scm dark:text-neutral-200"> 07:00 PM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt20" class="kun15 sr7qy flex t2j25 items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt20" class="hidden" value="08:00 PM" name="hs-pro-chhsncsramt" > <span class="block z0lld i6scm dark:text-neutral-200"> 08:00 PM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt21" class="kun15 sr7qy flex t2j25 items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt21" class="hidden" value="09:00 PM" name="hs-pro-chhsncsramt" > <span class="block z0lld i6scm dark:text-neutral-200"> 09:00 PM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt22" class="kun15 sr7qy flex t2j25 items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt22" class="hidden" value="010:00 PM" name="hs-pro-chhsncsramt" > <span class="block z0lld i6scm dark:text-neutral-200"> 010:00 PM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt23" class="kun15 sr7qy flex t2j25 items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt23" class="hidden" value="011:00 PM" name="hs-pro-chhsncsramt" > <span class="block z0lld i6scm dark:text-neutral-200"> 011:00 PM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt24" class="kun15 sr7qy flex t2j25 items-center lx3ar klofg cursor-pointer ownkk jh54z has-[:checked]:bg-gray-200 x0snr km04f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt24" class="hidden" value="012:00 PM" name="hs-pro-chhsncsramt" > <span class="block z0lld i6scm dark:text-neutral-200"> 012:00 PM </span> </label> <!-- End Checkbox --> </fieldset> </div> </div> <!-- End Body --> <!-- Footer --> <div class="nblgz"> <div class="gtgfz dzc0w np1k4 flex qj8qf items-center syne5 wx7ib m457n dark:border-neutral-700"> <div class="q0mum"> <span class="qupk7 gx64a block zlgt1 hjfyg dark:text-neutral-400"> Date </span> <!-- Calendar Dropdown --> <div class="hs-dropdown [--auto-close:inside] jqzvs q0mum"> <button id="hs-pro-dnic" type="button" class="etcw0 q0mum jqzvs items-center zlgt1 mwwf4 klofg aesap r0r2c i2ex5 i6scm jh54z j01y2 otank wh5re zpuyt dark:bg-neutral-700 dark:border-transparent dark:text-neutral-300 dark:hover:bg-neutral-600 dark:focus:bg-neutral-600" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown"> <svg class="ylm2u icspj enx0e" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="4" rx="2" ry="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/><path d="M8 14h.01"/><path d="M12 14h.01"/><path d="M16 14h.01"/><path d="M8 18h.01"/><path d="M12 18h.01"/><path d="M16 18h.01"/></svg> 07/05/2024 </button> <div class="hs-dropdown-menu hs-dropdown-open:opacity-100 p2mfi transition-[opacity,margin] duration opacity-0 hidden xywim lx3ar xfco6 shadow-[0_10px_40px_10px_rgba(0,0,0,0.08)] dark:shadow-[0_10px_40px_10px_rgba(0,0,0,0.2)] dark:bg-neutral-900" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-dnic"> <!-- Calendar --> <div class="jeqo2 rnyto"> <!-- Months --> <div class="bd993 x8hew items-center u4mmg b2wcu nblgz"> <!-- Prev Button --> <div class="qgtgq"> <button type="button" class="uiima flex t2j25 items-center i6scm s1xgi drtn2 j01y2 otank wh5re lug43 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" aria-label="Previous"> <svg class="ylm2u yaf2e" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg> </button> </div> <!-- End Prev Button --> <!-- Month / Year --> <div class="v5ybc flex t2j25 items-center rz3p9"> <div class="relative"> <select data-hs-select='{ "placeholder": "Select month", "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>", "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative flex q9qvy q0mum cursor-pointer cbt59 mwwf4 i6scm hfwmg wh5re t07yn etwkc zlj2b s4vql dark:text-neutral-200 dark:hover:text-blue-500 dark:focus:text-blue-500", "dropdownClasses": "huvyz xywim csg0j ng19c bsjk7 rnyto lx3ar aesap m457n klofg x3vl5 ca7mt zlsid msslc qdwom gjvdb r21b7 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900 dark:border-neutral-700", "optionClasses": "etcw0 q0mum ibyb7 i6scm cursor-pointer s1xgi klofg wh5re lug43 dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:text-neutral-200 dark:focus:bg-neutral-800", "optionTemplate": "<div class=\"flex qj8qf items-center q0mum \"><span data-title></span><span class=\"hidden hs-selected:block \"><svg class=\"ylm2u enx0e i6scm dark:text-neutral-200 \" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>" }' class="hidden"> <option value="0">January</option> <option value="1">February</option> <option value="2">March</option> <option value="3">April</option> <option value="4">May</option> <option value="5">June</option> <option value="6" selected>July</option> <option value="7">August</option> <option value="8">September</option> <option value="9">October</option> <option value="10">November</option> <option value="11">December</option> </select> </div> <span class="i6scm dark:text-neutral-200">/</span> <div class="relative"> <select data-hs-select='{ "placeholder": "Select year", "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>", "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative flex q9qvy q0mum cursor-pointer cbt59 mwwf4 i6scm hfwmg wh5re t07yn etwkc zlj2b s4vql dark:text-neutral-200 dark:hover:text-blue-500 dark:focus:text-blue-500", "dropdownClasses": "huvyz xywim twr4n ng19c bsjk7 rnyto lx3ar aesap m457n klofg x3vl5 ca7mt zlsid msslc qdwom gjvdb r21b7 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900 dark:border-neutral-700", "optionClasses": "etcw0 q0mum ibyb7 i6scm cursor-pointer s1xgi klofg wh5re lug43 dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:text-neutral-200 dark:focus:bg-neutral-800", "optionTemplate": "<div class=\"flex qj8qf items-center q0mum \"><span data-title></span><span class=\"hidden hs-selected:block \"><svg class=\"ylm2u enx0e i6scm dark:text-neutral-200 \" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>" }' class="hidden"> <option selected>2023</option> <option>2024</option> <option>2025</option> <option>2026</option> <option>2027</option> </select> </div> </div> <!-- End Month / Year --> <!-- Next Button --> <div class="qgtgq flex zmyke"> <button type="button" class=" uiima flex t2j25 items-center i6scm s1xgi drtn2 j01y2 otank wh5re lug43 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" aria-label="Next"> <svg class="ylm2u yaf2e" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg> </button> </div> <!-- End Next Button --> </div> <!-- Months --> <!-- Weeks --> <div class="flex l3luo"> <span class="p37dm axth2 block ojv0p ibyb7 daned dark:text-neutral-500"> Mo </span> <span class="p37dm axth2 block ojv0p ibyb7 daned dark:text-neutral-500"> Tu </span> <span class="p37dm axth2 block ojv0p ibyb7 daned dark:text-neutral-500"> We </span> <span class="p37dm axth2 block ojv0p ibyb7 daned dark:text-neutral-500"> Th </span> <span class="p37dm axth2 block ojv0p ibyb7 daned dark:text-neutral-500"> Fr </span> <span class="p37dm axth2 block ojv0p ibyb7 daned dark:text-neutral-500"> Sa </span> <span class="p37dm axth2 block ojv0p ibyb7 daned dark:text-neutral-500"> Su </span> </div> <!-- Weeks --> <!-- Days --> <div class="flex"> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200" disabled> 26 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200" disabled> 27 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200" disabled> 28 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200" disabled> 29 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200" disabled> 30 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 1 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 2 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 3 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 4 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 5 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 6 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 7 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 8 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 9 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 10 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 11 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 12 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 13 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 14 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 15 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 16 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 17 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 18 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 19 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center riqyd aesap r0r2c ibyb7 mwwf4 i3pem lldnv drtn2 dark:bg-blue-500 j01y2 otank wh5re lug43 dark:hover:border-neutral-700"> 20 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 21 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 22 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 23 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 24 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 25 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 26 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 27 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 28 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 29 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 30 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 lldnv hfwmg j01y2 otank wh5re s4z50 t07yn dark:text-neutral-200"> 31 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm lldnv hfwmg drtn2 j01y2 otank wh5re lug43 dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 1 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm lldnv hfwmg drtn2 j01y2 otank wh5re lug43 dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 2 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm lldnv hfwmg drtn2 j01y2 otank wh5re lug43 dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 3 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm lldnv hfwmg drtn2 j01y2 otank wh5re lug43 dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 4 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm lldnv hfwmg drtn2 j01y2 otank wh5re lug43 dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 5 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm lldnv hfwmg drtn2 j01y2 otank wh5re lug43 dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 6 </button> </div> </div> <!-- Days --> </div> </div> </div> </div> <!-- End Calendar Dropdown --> <!-- Input --> <div class="q0mum"> <label for="hs-pro-chhsncstm" class="qupk7 gx64a block zlgt1 hjfyg dark:text-neutral-400"> Time </label> <input type="text" class="jm5y8 yrsq6 block q0mum i2ex5 r0r2c ownkk zlgt1 p1nwo omm64 jh54z tf235 j01y2 otank zpuyt kgkor ursxm dark:text-neutral-400 dark:bg-neutral-700 dark:text-neutral-300 dark:placeholder:text-neutral-500 dark:hover:bg-neutral-600 dark:focus:bg-neutral-600" id="hs-pro-chhsncstm" value="9:00 AM"> </div> <!-- End Input --> </div> <div class="owzl6 dzc0w"> <div class="t6c0i flex flex-wrap zmyke items-center rhvax"> <button type="button" class="kun15 sr7qy jqzvs t2j25 items-center cbt59 lx3ar aesap m457n i6scm zlgt1 mwwf4 klofg peu41 beds1 dobbe j01y2 otank dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" data-hs-overlay="#hs-pro-chhsncs"> Cancel </button> <button type="button" class="kun15 sr7qy jqzvs t2j25 items-center syne5 cbt59 riqyd aesap vany4 i3pem zlgt1 mwwf4 klofg peu41 beds1 tj91j j01y2 otank wh5re g2cgi l9pmj dark:focus:ring-blue-500" data-hs-overlay="#hs-pro-chhsncs"> Snooze </button> </div> </div> </div> <!-- End Footer --> </div> </div> </div> <!-- End Archive Message Modal -->
Subscribe
Get all the latest Preline updates and news.
All examples
Close
Close