w2.countingdownto.com
Open in
urlscan Pro
2606:4700:20::ac43:4b92
Public Scan
Submitted URL: http://w2.countingdownto.com/
Effective URL: https://w2.countingdownto.com/
Submission: On June 06 via api from US — Scanned from DE
Effective URL: https://w2.countingdownto.com/
Submission: On June 06 via api from US — Scanned from DE
Form analysis 1 forms found in the DOM
PUT
<form method="put" class="flex-grow flex flex-col" phx-change="validate" phx-submit="save">
<div class="flex-grow flex flex-col bg-gray-800xxx">
<div class="relative w-full overflow-x-hiddenxxx flex-grow" x-data="{navStack: ['root']}" style="height:50vh; min-height:40rem">
<style>
.nav-stack-item {
transition-duration: 300ms;
transition-property: transform, opacity;
opacity: 1;
}
.nav-stack-item-0 {}
.nav-stack-item-1 {
transform: translateY(-2.2rem) scale(0.9);
background-color: rgb(17, 22, 30);
}
.nav-stack-item-2 {
transform: translateY(-3.2rem) scale(0.8);
background-color: rgb(6, 7, 10);
}
.nav-stack-item.nav-stack-item--1 {
transform: translateX(400px);
opacity: 0;
pointer-events: none;
}
</style>
<div x-showxxx="navStack.includes('root')" class="absolute flex flex-col bg-gray-800 rounded-xl w-full origin-top shadow-xl nav-stack-item ring-1 ring-black/70 h-full pb-4 nav-stack-item-0"
style="transition-property: transform, opacity, margin-left;" x-bind:class="'nav-stack-item-' + navStack.indexOf('root')"
x-bind:stylexxx="'transition-duration: 200ms; transition-property: transform, opacity;' + (navStack.includes('root') ? 'transform: translateY(' + (-1 * navStack.indexOf('root')) + 'rem) scale(' + (1 - (0.1 * navStack.indexOf('root'))) + '); ' : 'transform: translateY(500px)')"
stylexxx="transition-duration: 200ms; transition-property: transform, opacity;transform: translateY(0rem) scale(1); ">
<div class="p-2 py-3 border-b border-b-gray-900 text-gray-500 flex items-center justify-end">
<div class="flex-grow">General Settings </div>
</div>
<div class="flex-grow px-2 " data-phx-component="3" id="phx-F9Z_3zU_CwTlCABC-3-0">
<input id="counter_page_counter_type" name="counter_page[counter_type]" type="hidden" value="countdown_to_datetime">
<div class="pt-3"></div>
<div>
<div phx-update="ignore" id="date_picker">
<label class="block text-sm font-medium leading-5 text-gray-400">Countdown to</label>
<div class="mt-1 relative rounded-md shadow-sm">
<input autocomplete="off" class="form-input block w-full sm:text-sm sm:leading-5 bg-gray-900 border-gray-900 text-gray-300 rounded-md flatpickr-input" id="datepicker-3u434879" name="counter_page[date]" phx-hook="DatePicker"
type="hidden" value="2024-06-13"><input class="form-input block w-full sm:text-sm sm:leading-5 bg-gray-900 border-gray-900 text-gray-300 rounded-md form-control input" placeholder="" tabindex="0" type="text">
</div>
</div>
</div>
<div class="pt-1">
<div class="text-gray-400">
<div class="mt-4">
<label class="block text-sm font-medium leading-5 text-gray-400" for="counter_page_time">Time</label>
<div class="mt-1 relative rounded-md shadow-sm">
<select
class="mt-1 form-select inline-block pl-3 pr-10 py-2 text-base leading-6 bg-gray-900 border-gray-900 text-gray-300 shadow-inset focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5 rounded-md"
id="counter_page_time_hour" name="counter_page[time][hour]">
<option selected="" value="0">12 AM</option>
<option value="1">1 AM</option>
<option value="2">2 AM</option>
<option value="3">3 AM</option>
<option value="4">4 AM</option>
<option value="5">5 AM</option>
<option value="6">6 AM</option>
<option value="7">7 AM</option>
<option value="8">8 AM</option>
<option value="9">9 AM</option>
<option value="10">10 AM</option>
<option value="11">11 AM</option>
<option value="12">12 PM</option>
<option value="13">1 PM</option>
<option value="14">2 PM</option>
<option value="15">3 PM</option>
<option value="16">4 PM</option>
<option value="17">5 PM</option>
<option value="18">6 PM</option>
<option value="19">7 PM</option>
<option value="20">8 PM</option>
<option value="21">9 PM</option>
<option value="22">10 PM</option>
<option value="23">11 PM</option>
</select> : <select
class="mt-1 form-select inline-block pl-3 pr-10 py-2 text-base leading-6 bg-gray-900 border-gray-900 text-gray-300 shadow-inset focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5 rounded-md"
id="counter_page_time_minute" name="counter_page[time][minute]">
<option selected="" value="0">00</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
</select>
</div>
</div>
</div>
</div>
<div class="mt-4">
<label class="block text-sm font-medium leading-5 text-gray-400" for="counter_page_timezone">Timezone</label>
<select
class="form-input block w-full sm:text-sm sm:leading-5 mt-1 form-select block w-full pl-3 pr-10 py-2 text-base leading-6 bg-gray-900 border-gray-900 text-gray-300 shadow-inset focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5 rounded-md rounder-md"
id="counter_page_timezone" name="counter_page[timezone]">
<option value=""></option>
<option value="Pacific/Pago_Pago">(GMT-11:00) American Samoa</option>
<option value="Pacific/Midway">(GMT-11:00) International Date Line West</option>
<option value="Pacific/Midway">(GMT-11:00) Midway Island</option>
<option value="Pacific/Honolulu">(GMT-10:00) Hawaii</option>
<option value="America/Juneau">(GMT-09:00) Alaska</option>
<option value="America/Los_Angeles">(GMT-08:00) Pacific Time (US & Canada)</option>
<option value="America/Tijuana">(GMT-08:00) Tijuana</option>
<option value="America/Phoenix">(GMT-07:00) Arizona</option>
<option value="America/Mazatlan">(GMT-07:00) Mazatlan</option>
<option value="America/Denver">(GMT-07:00) Mountain Time (US & Canada)</option>
<option value="America/Guatemala">(GMT-06:00) Central America</option>
<option value="America/Chicago">(GMT-06:00) Central Time (US & Canada)</option>
<option value="America/Chihuahua">(GMT-06:00) Chihuahua</option>
<option value="America/Mexico_City">(GMT-06:00) Guadalajara</option>
<option value="America/Mexico_City">(GMT-06:00) Mexico City</option>
<option value="America/Monterrey">(GMT-06:00) Monterrey</option>
<option value="America/Regina">(GMT-06:00) Saskatchewan</option>
<option value="America/Bogota">(GMT-05:00) Bogota</option>
<option value="America/New_York">(GMT-05:00) Eastern Time (US & Canada)</option>
<option value="America/Indiana/Indianapolis">(GMT-05:00) Indiana (East)</option>
<option value="America/Lima">(GMT-05:00) Lima</option>
<option value="America/Lima">(GMT-05:00) Quito</option>
<option value="America/Halifax">(GMT-04:00) Atlantic Time (Canada)</option>
<option value="America/Caracas">(GMT-04:00) Caracas</option>
<option value="America/Guyana">(GMT-04:00) Georgetown</option>
<option value="America/La_Paz">(GMT-04:00) La Paz</option>
<option value="America/Santiago">(GMT-04:00) Santiago</option>
<option value="America/St_Johns">(GMT-03:30) Newfoundland</option>
<option value="America/Sao_Paulo">(GMT-03:00) Brasilia</option>
<option value="America/Argentina/Buenos_Aires">(GMT-03:00) Buenos Aires</option>
<option value="America/Montevideo">(GMT-03:00) Montevideo</option>
<option value="America/Godthab">(GMT-02:00) Greenland</option>
<option value="Atlantic/South_Georgia">(GMT-02:00) Mid-Atlantic</option>
<option value="Atlantic/Azores">(GMT-01:00) Azores</option>
<option value="Atlantic/Cape_Verde">(GMT-01:00) Cape Verde Is.</option>
<option value="Europe/London">(GMT+00:00) Edinburgh</option>
<option value="Europe/Lisbon">(GMT+00:00) Lisbon</option>
<option value="Europe/London">(GMT+00:00) London</option>
<option value="Africa/Monrovia">(GMT+00:00) Monrovia</option>
<option value="Etc/UTC">(GMT+00:00) UTC</option>
<option value="Europe/Amsterdam">(GMT+01:00) Amsterdam</option>
<option value="Europe/Belgrade">(GMT+01:00) Belgrade</option>
<option value="Europe/Berlin">(GMT+01:00) Berlin</option>
<option value="Europe/Berlin" selected="">(GMT+01:00) Bern</option>
<option value="Europe/Bratislava">(GMT+01:00) Bratislava</option>
<option value="Europe/Brussels">(GMT+01:00) Brussels</option>
<option value="Europe/Budapest">(GMT+01:00) Budapest</option>
<option value="Africa/Casablanca">(GMT+01:00) Casablanca</option>
<option value="Europe/Copenhagen">(GMT+01:00) Copenhagen</option>
<option value="Europe/Dublin">(GMT+01:00) Dublin</option>
<option value="Europe/Ljubljana">(GMT+01:00) Ljubljana</option>
<option value="Europe/Madrid">(GMT+01:00) Madrid</option>
<option value="Europe/Paris">(GMT+01:00) Paris</option>
<option value="Europe/Prague">(GMT+01:00) Prague</option>
<option value="Europe/Rome">(GMT+01:00) Rome</option>
<option value="Europe/Sarajevo">(GMT+01:00) Sarajevo</option>
<option value="Europe/Skopje">(GMT+01:00) Skopje</option>
<option value="Europe/Stockholm">(GMT+01:00) Stockholm</option>
<option value="Europe/Vienna">(GMT+01:00) Vienna</option>
<option value="Europe/Warsaw">(GMT+01:00) Warsaw</option>
<option value="Africa/Algiers">(GMT+01:00) West Central Africa</option>
<option value="Europe/Zagreb">(GMT+01:00) Zagreb</option>
<option value="Europe/Athens">(GMT+02:00) Athens</option>
<option value="Europe/Bucharest">(GMT+02:00) Bucharest</option>
<option value="Africa/Cairo">(GMT+02:00) Cairo</option>
<option value="Africa/Harare">(GMT+02:00) Harare</option>
<option value="Europe/Helsinki">(GMT+02:00) Helsinki</option>
<option value="Asia/Jerusalem">(GMT+02:00) Jerusalem</option>
<option value="Europe/Kaliningrad">(GMT+02:00) Kaliningrad</option>
<option value="Europe/Kiev">(GMT+02:00) Kyiv</option>
<option value="Africa/Johannesburg">(GMT+02:00) Pretoria</option>
<option value="Europe/Riga">(GMT+02:00) Riga</option>
<option value="Europe/Sofia">(GMT+02:00) Sofia</option>
<option value="Europe/Tallinn">(GMT+02:00) Tallinn</option>
<option value="Europe/Vilnius">(GMT+02:00) Vilnius</option>
<option value="Asia/Baghdad">(GMT+03:00) Baghdad</option>
<option value="Europe/Istanbul">(GMT+03:00) Istanbul</option>
<option value="Asia/Kuwait">(GMT+03:00) Kuwait</option>
<option value="Europe/Minsk">(GMT+03:00) Minsk</option>
<option value="Europe/Moscow">(GMT+03:00) Moscow</option>
<option value="Africa/Nairobi">(GMT+03:00) Nairobi</option>
<option value="Asia/Riyadh">(GMT+03:00) Riyadh</option>
<option value="Europe/Moscow">(GMT+03:00) St. Petersburg</option>
<option value="Europe/Volgograd">(GMT+03:00) Volgograd</option>
<option value="Asia/Tehran">(GMT+03:30) Tehran</option>
<option value="Asia/Muscat">(GMT+04:00) Abu Dhabi</option>
<option value="Asia/Baku">(GMT+04:00) Baku</option>
<option value="Asia/Muscat">(GMT+04:00) Muscat</option>
<option value="Europe/Samara">(GMT+04:00) Samara</option>
<option value="Asia/Tbilisi">(GMT+04:00) Tbilisi</option>
<option value="Asia/Yerevan">(GMT+04:00) Yerevan</option>
<option value="Asia/Kabul">(GMT+04:30) Kabul</option>
<option value="Asia/Almaty">(GMT+05:00) Almaty</option>
<option value="Asia/Yekaterinburg">(GMT+05:00) Ekaterinburg</option>
<option value="Asia/Karachi">(GMT+05:00) Islamabad</option>
<option value="Asia/Karachi">(GMT+05:00) Karachi</option>
<option value="Asia/Tashkent">(GMT+05:00) Tashkent</option>
<option value="Asia/Kolkata">(GMT+05:30) Chennai</option>
<option value="Asia/Kolkata">(GMT+05:30) Kolkata</option>
<option value="Asia/Kolkata">(GMT+05:30) Mumbai</option>
<option value="Asia/Kolkata">(GMT+05:30) New Delhi</option>
<option value="Asia/Colombo">(GMT+05:30) Sri Jayawardenepura</option>
<option value="Asia/Kathmandu">(GMT+05:45) Kathmandu</option>
<option value="Asia/Dhaka">(GMT+06:00) Astana</option>
<option value="Asia/Dhaka">(GMT+06:00) Dhaka</option>
<option value="Asia/Urumqi">(GMT+06:00) Urumqi</option>
<option value="Asia/Rangoon">(GMT+06:30) Rangoon</option>
<option value="Asia/Bangkok">(GMT+07:00) Bangkok</option>
<option value="Asia/Bangkok">(GMT+07:00) Hanoi</option>
<option value="Asia/Jakarta">(GMT+07:00) Jakarta</option>
<option value="Asia/Krasnoyarsk">(GMT+07:00) Krasnoyarsk</option>
<option value="Asia/Novosibirsk">(GMT+07:00) Novosibirsk</option>
<option value="Asia/Shanghai">(GMT+08:00) Beijing</option>
<option value="Asia/Chongqing">(GMT+08:00) Chongqing</option>
<option value="Asia/Hong_Kong">(GMT+08:00) Hong Kong</option>
<option value="Asia/Irkutsk">(GMT+08:00) Irkutsk</option>
<option value="Asia/Kuala_Lumpur">(GMT+08:00) Kuala Lumpur</option>
<option value="Australia/Perth">(GMT+08:00) Perth</option>
<option value="Asia/Singapore">(GMT+08:00) Singapore</option>
<option value="Asia/Taipei">(GMT+08:00) Taipei</option>
<option value="Asia/Ulaanbaatar">(GMT+08:00) Ulaanbaatar</option>
<option value="Asia/Tokyo">(GMT+09:00) Osaka</option>
<option value="Asia/Tokyo">(GMT+09:00) Sapporo</option>
<option value="Asia/Seoul">(GMT+09:00) Seoul</option>
<option value="Asia/Tokyo">(GMT+09:00) Tokyo</option>
<option value="Asia/Yakutsk">(GMT+09:00) Yakutsk</option>
<option value="Australia/Adelaide">(GMT+09:30) Adelaide</option>
<option value="Australia/Darwin">(GMT+09:30) Darwin</option>
<option value="Australia/Brisbane">(GMT+10:00) Brisbane</option>
<option value="Australia/Melbourne">(GMT+10:00) Canberra</option>
<option value="Pacific/Guam">(GMT+10:00) Guam</option>
<option value="Australia/Hobart">(GMT+10:00) Hobart</option>
<option value="Australia/Melbourne">(GMT+10:00) Melbourne</option>
<option value="Pacific/Port_Moresby">(GMT+10:00) Port Moresby</option>
<option value="Australia/Sydney">(GMT+10:00) Sydney</option>
<option value="Asia/Vladivostok">(GMT+10:00) Vladivostok</option>
<option value="Asia/Magadan">(GMT+11:00) Magadan</option>
<option value="Pacific/Noumea">(GMT+11:00) New Caledonia</option>
<option value="Pacific/Guadalcanal">(GMT+11:00) Solomon Is.</option>
<option value="Asia/Srednekolymsk">(GMT+11:00) Srednekolymsk</option>
<option value="Pacific/Auckland">(GMT+12:00) Auckland</option>
<option value="Pacific/Fiji">(GMT+12:00) Fiji</option>
<option value="Asia/Kamchatka">(GMT+12:00) Kamchatka</option>
<option value="Pacific/Majuro">(GMT+12:00) Marshall Is.</option>
<option value="Pacific/Auckland">(GMT+12:00) Wellington</option>
<option value="Pacific/Chatham">(GMT+12:45) Chatham Is.</option>
<option value="Pacific/Tongatapu">(GMT+13:00) Nuku'alofa</option>
<option value="Pacific/Apia">(GMT+13:00) Samoa</option>
<option value="Pacific/Fakaofo">(GMT+13:00) Tokelau Is.</option>
</select>
</div>
<div class="-mt-2 -ml-1">
<div class="flex items-center ">
<input name="counter_page[show_date]" type="hidden" value="false"><input class=" ml-2 form-checkbox form-checkbox-dark h-4 w-4 text-cdt-600 transition duration-150 ease-in-out" id="897b6776-a8d5-45da-a5c8-ed44437112e1"
name="counter_page[show_date]" type="checkbox" value="true">
<label for="897b6776-a8d5-45da-a5c8-ed44437112e1" class="ml-3 block flex-grow py-2 cursor-pointer">
<span class="block text-xs font-medium leading-5 text-gray-500">Display date on countdown</span>
</label>
</div>
</div>
<div class="-mt-2 -ml-1">
<div class="flex items-center ">
<input name="counter_page[show_title]" type="hidden" value="false"><input class=" ml-2 form-checkbox form-checkbox-dark h-4 w-4 text-cdt-600 transition duration-150 ease-in-out" id="5c001526-5ca6-420b-a401-3a2f931eeaab"
name="counter_page[show_title]" type="checkbox" value="true">
<label for="5c001526-5ca6-420b-a401-3a2f931eeaab" class="ml-3 block flex-grow py-2 cursor-pointer">
<span class="block text-xs font-medium leading-5 text-gray-500">Display title on countdown</span>
</label>
</div>
</div>
<a class="mt-4 shadow-md hover:shadow-lg w-full flex items-center justify-between py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-gray-700 hover:bg-gray-600 focus:outline-none focus:border-cdt-700 focus:shadow-outline-cdt active:bg-cdt-700 transition duration-150 ease-in-out" href="#" x-on:click.prevent="navStack.unshift('background')">
<span>Customize background</span>
<!--
<div class="flex-grow"></div>
<div style={"#{CdtWeb.CounterPageView.background(@f.data)};width: 30px;height:24px"} class="flex-shrink mr-4 rounded-sm"></div>
-->
<span>
<svg xmlns="http://www.w3.org/2000/svg" class="text-white w-4 h-4" fill="currentColor" stroke="none" viewBox="0 0 20 20">
<path d="M13 11l1-1-6-6-1 2 4 4-4 4 1 2 5-5z"></path>
</svg>
</span>
</a>
<a class="mt-4 shadow-md hover:shadow-lg w-full flex items-center justify-between py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-gray-700 hover:bg-gray-600 focus:outline-none focus:border-cdt-700 focus:shadow-outline-cdt active:bg-cdt-700 transition duration-150 ease-in-out" href="#" x-on:click.prevent="navStack.unshift('text')">
<span>Customize text</span>
<!--
<div class="flex-grow"></div>
<div style={"#{CdtWeb.CounterPageView.background(@f.data)};width: 30px;height:24px"} class="flex-shrink mr-4 rounded-sm"></div>
-->
<span>
<svg xmlns="http://www.w3.org/2000/svg" class="text-white w-4 h-4" fill="currentColor" stroke="none" viewBox="0 0 20 20">
<path d="M13 11l1-1-6-6-1 2 4 4-4 4 1 2 5-5z"></path>
</svg>
</span>
</a>
<div class="pt-2">
<div class="mt-4">
<label class="block text-sm font-medium leading-5 text-gray-400" for="counter_page_embed_style">Embed location</label>
<select
class="form-input block w-full sm:text-sm sm:leading-5 mt-1 form-select block w-full pl-3 pr-10 py-2 text-base leading-6 bg-gray-900 border-gray-900 text-gray-300 shadow-inset focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5 rounded-md rounder-md"
id="counter_page_embed_style" name="counter_page[embed_style]">
<option selected="" value="in_content_iframe">Within page content</option>
<option value="fixed_top_iframe">Fixed at top of page</option>
<option value="fixed_bottom_iframe">Fixed at bottom of page</option>
<option value="full_page_iframe">Full page</option>
</select>
</div>
</div>
</div>
</div>
<style>
.nav-stack-item {
transition-duration: 300ms;
transition-property: transform, opacity;
opacity: 1;
}
.nav-stack-item-0 {}
.nav-stack-item-1 {
transform: translateY(-2.2rem) scale(0.9);
background-color: rgb(17, 22, 30);
}
.nav-stack-item-2 {
transform: translateY(-3.2rem) scale(0.8);
background-color: rgb(6, 7, 10);
}
.nav-stack-item.nav-stack-item--1 {
transform: translateX(400px);
opacity: 0;
pointer-events: none;
}
</style>
<div x-showxxx="navStack.includes('background')" class="absolute flex flex-col bg-gray-800 rounded-xl w-full origin-top shadow-xl nav-stack-item ring-1 ring-black/70 h-full pb-4 nav-stack-item--1"
style="transition-property: transform, opacity, margin-left;" x-bind:class="'nav-stack-item-' + navStack.indexOf('background')"
x-bind:stylexxx="'transition-duration: 200ms; transition-property: transform, opacity;' + (navStack.includes('background') ? 'transform: translateY(' + (-1 * navStack.indexOf('background')) + 'rem) scale(' + (1 - (0.1 * navStack.indexOf('background'))) + '); ' : 'transform: translateY(500px)')"
stylexxx="transition-duration: 200ms; transition-property: transform, opacity;transform: translateY(500px)">
<div class="p-2 py-3 border-b border-b-gray-900 text-gray-500 flex items-center justify-end">
<div class="flex-grow">Background Settings </div>
<div class="p-1">
<a class="flex items-center justify-center rounded-full hover:outline-none hover:bg-gray-600" href="#" x-on:click.prevent="navStack.shift()">
<svg class="h-6 w-6 text-white" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</a>
</div>
</div>
<div class="px-2 " data-phx-component="4" id="phx-F9Z_3zU_CwTlCABC-4-0">
<div>
<div class="mt-4">
<label class="block text-sm font-medium leading-5 text-gray-400" for="counter_page_background_background_type">Background type</label>
<div class="mt-2 grid grid-cols-1 border rounded overflow-hidden shadow bg-gray-700 border-gray-700">
<div class="flex items-center ">
<input class=" ml-2 form-radio form-radio-dark h-4 w-4 text-cdt-600 transition duration-150 ease-in-out" id="38528798-eb94-4886-9389-ea5b06dc0cdb" name="counter_page[background][background_type]" type="radio" value="gradient">
<label for="38528798-eb94-4886-9389-ea5b06dc0cdb" class="ml-3 block flex-grow py-2 cursor-pointer">
<span class="block text-sm font-medium leading-5 text-gray-400">Gradient</span>
</label>
</div>
<div class="flex items-center bg-gray-900 bg-opacity-25">
<input checked="" class=" ml-2 form-radio form-radio-dark h-4 w-4 text-cdt-600 transition duration-150 ease-in-out" id="9976f987-bcf7-4ded-9af1-f991f964e5d1" name="counter_page[background][background_type]" type="radio"
value="solid_color">
<label for="9976f987-bcf7-4ded-9af1-f991f964e5d1" class="ml-3 block flex-grow py-2 cursor-pointer">
<span class="block text-sm font-medium leading-5 text-gray-400">Solid color</span>
</label>
</div>
</div>
</div>
</div>
<div class="flex justify-between gap-2">
<div class="mt-4 max-h-24 flex-grow flex-1" id="bg-color-picker-wrappersolid_color">
<label class="block text-sm font-medium leading-5 text-gray-400" for="counter_page_background_gradient_color"> Color </label>
<a class=" mt-1 shadow-md hover:shadow-lg w-full flex items-center justify-between border border-transparent text-sm
font-medium rounded-md text-white bg-gray-700 hover:bg-gray-600 focus:outline-none focus:border-cdt-700 focus:shadow-outline-cdt
active:bg-cdt-700 transition duration-150 ease-in-out overflow-hidden" href="#" x-on:click.prevent="navStack.unshift('background_solid_color')">
<div style="background:#800040" class="h-full flex-1 py-2 px-4 ">
</div>
<span class="px-2">
<svg xmlns="http://www.w3.org/2000/svg" class="text-white w-4 h-4" fill="currentColor" stroke="none" viewBox="0 0 20 20">
<path d="M13 11l1-1-6-6-1 2 4 4-4 4 1 2 5-5z"></path>
</svg>
</span>
</a>
</div>
<div class="mt-4 hidden flex-grow flex-1" id="bg-color-picker-wrappergradient_color_begin">
<label class="block text-sm font-medium leading-5 text-gray-400" for="counter_page_background_gradient_color"> Color 1 </label>
<a class=" mt-1 shadow-md hover:shadow-lg w-full flex items-center justify-between border border-transparent text-sm
font-medium rounded-md text-white bg-gray-700 hover:bg-gray-600 focus:outline-none focus:border-cdt-700 focus:shadow-outline-cdt
active:bg-cdt-700 transition duration-150 ease-in-out overflow-hidden" href="#" x-on:click.prevent="navStack.unshift('background_gradient_color_begin')">
<div style="background:#FF8000" class="h-full flex-1 py-2 px-4 ">
</div>
<span class="px-2">
<svg xmlns="http://www.w3.org/2000/svg" class="text-white w-4 h-4" fill="currentColor" stroke="none" viewBox="0 0 20 20">
<path d="M13 11l1-1-6-6-1 2 4 4-4 4 1 2 5-5z"></path>
</svg>
</span>
</a>
</div>
<div class="mt-4 hidden flex-grow flex-1" id="bg-color-picker-wrappergradient_color_end">
<label class="block text-sm font-medium leading-5 text-gray-400" for="counter_page_background_gradient_color"> Color 2 </label>
<a class=" mt-1 shadow-md hover:shadow-lg w-full flex items-center justify-between border border-transparent text-sm
font-medium rounded-md text-white bg-gray-700 hover:bg-gray-600 focus:outline-none focus:border-cdt-700 focus:shadow-outline-cdt
active:bg-cdt-700 transition duration-150 ease-in-out overflow-hidden" href="#" x-on:click.prevent="navStack.unshift('background_gradient_color_end')">
<div style="background:#FF0000" class="h-full flex-1 py-2 px-4 ">
</div>
<span class="px-2">
<svg xmlns="http://www.w3.org/2000/svg" class="text-white w-4 h-4" fill="currentColor" stroke="none" viewBox="0 0 20 20">
<path d="M13 11l1-1-6-6-1 2 4 4-4 4 1 2 5-5z"></path>
</svg>
</span>
</a>
</div>
</div>
<div class="flex items-end" x-data="{corner_radius: '5'}" phx-update="ignore" id="corener_radius_wropper_980">
<div class="flex-grow">
<div class="mt-4">
<label class="block text-sm font-medium leading-5 text-gray-400" for="counter_page_background_corner_radius">Corner radius</label>
<div class="mt-1 relative rounded-md shadow-sm">
<input class="w-full custom-rangexxx" id="counter_page_background_corner_radius" max="301" min="0" name="counter_page[background][corner_radius]" phx-debounce="100" type="range" value="5"
x-on:input="corner_radius = $event.target.value">
</div>
</div>
</div>
<div class="flex-shrink px-2 py-1 w-12 text-right text-gray-500 mb-px" phx-update="ignore" id="corner_radius_display_7486">
<span x-text="corner_radius === '0' ? 'None' : (corner_radius === '301' ? 'Full' : (corner_radius + 'px'))">5px</span>
</div>
</div>
<div class="border-t border-gray-600 mt-4 pt-2">
<div>
<div class="mt-4">
<label class="block text-sm font-medium leading-5 text-gray-400" for="counter_page_background_counter_background_format">Counter background format</label>
<select
class="form-input block w-full sm:text-sm sm:leading-5 mt-1 form-select block w-full pl-3 pr-10 py-2 text-base leading-6 bg-gray-900 border-gray-900 text-gray-300 shadow-inset focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5 rounded-md rounder-md"
id="counter_page_background_counter_background_format" name="counter_page[background][counter_background_format]">
<option value="none">None</option>
<option selected="" value="digits">Each digit</option>
<option value="units">Each group of digits</option>
<option value="all">All</option>
</select>
</div>
</div>
<div class="mt-4 max-h-24 overflow-hidden">
<label class="block text-sm font-medium leading-5 text-gray-400" for="counter_page_background_gradient_color"> Counter background color </label>
<a class=" mt-1 shadow-md hover:shadow-lg w-full flex items-center justify-between border border-transparent text-sm
font-medium rounded-md text-white bg-gray-700 hover:bg-gray-600 focus:outline-none focus:border-cdt-700 focus:shadow-outline-cdt
active:bg-cdt-700 transition duration-150 ease-in-out overflow-hidden" href="#" x-on:click.prevent="navStack.unshift('counter_background_solid_color')">
<div style="background:#222222" class="h-full flex-1 py-2 px-4 ">
</div>
<span class="px-2">
<svg xmlns="http://www.w3.org/2000/svg" class="text-white w-4 h-4" fill="currentColor" stroke="none" viewBox="0 0 20 20">
<path d="M13 11l1-1-6-6-1 2 4 4-4 4 1 2 5-5z"></path>
</svg>
</span>
</a>
</div>
</div>
</div>
</div>
<style>
.nav-stack-item {
transition-duration: 300ms;
transition-property: transform, opacity;
opacity: 1;
}
.nav-stack-item-0 {}
.nav-stack-item-1 {
transform: translateY(-2.2rem) scale(0.9);
background-color: rgb(17, 22, 30);
}
.nav-stack-item-2 {
transform: translateY(-3.2rem) scale(0.8);
background-color: rgb(6, 7, 10);
}
.nav-stack-item.nav-stack-item--1 {
transform: translateX(400px);
opacity: 0;
pointer-events: none;
}
</style>
<div x-showxxx="navStack.includes('text')" class="absolute flex flex-col bg-gray-800 rounded-xl w-full origin-top shadow-xl nav-stack-item ring-1 ring-black/70 h-full pb-4 nav-stack-item--1"
style="transition-property: transform, opacity, margin-left;" x-bind:class="'nav-stack-item-' + navStack.indexOf('text')"
x-bind:stylexxx="'transition-duration: 200ms; transition-property: transform, opacity;' + (navStack.includes('text') ? 'transform: translateY(' + (-1 * navStack.indexOf('text')) + 'rem) scale(' + (1 - (0.1 * navStack.indexOf('text'))) + '); ' : 'transform: translateY(500px)')"
stylexxx="transition-duration: 200ms; transition-property: transform, opacity;transform: translateY(500px)">
<div class="p-2 py-3 border-b border-b-gray-900 text-gray-500 flex items-center justify-end">
<div class="flex-grow">Text Settings </div>
<div class="p-1">
<a class="flex items-center justify-center rounded-full hover:outline-none hover:bg-gray-600" href="#" x-on:click.prevent="navStack.shift()">
<svg class="h-6 w-6 text-white" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</a>
</div>
</div>
<div class="px-2 " data-phx-component="5" id="phx-F9Z_3zU_CwTlCABC-5-0">
<div>
<input id="counter_page_text_color_granularity" name="counter_page[text][color_granularity]" type="hidden" value="uniform">
</div>
<div class="max-h-24 mt-4 overflow-hidden" id="bg-color-picker-wrappercolor">
<label class="block text-sm font-medium leading-5 text-gray-400" for="counter_page_background_gradient_color">Text Color</label>
<a class=" mt-1 shadow-md hover:shadow-lg w-full flex items-center justify-between border border-transparent text-sm
font-medium rounded-md text-white bg-gray-700 hover:bg-gray-600 focus:outline-none focus:border-cdt-700 focus:shadow-outline-cdt
active:bg-cdt-700 transition duration-150 ease-in-out overflow-hidden h-10" href="#" x-on:click.prevent="navStack.unshift('text_color')">
<div style="background:#FFFFFF" class="h-full flex-1 py-2 px-4 ">
</div>
<span class="px-2">
<svg xmlns="http://www.w3.org/2000/svg" class="text-white w-4 h-4" fill="currentColor" stroke="none" viewBox="0 0 20 20">
<path d="M13 11l1-1-6-6-1 2 4 4-4 4 1 2 5-5z"></path></svg>
</span>
</a>
<!-- end live patch -->
</div>
<div class="max-h-0 mt-0 overflow-hidden" id="bg-color-picker-wrappertitle_color">
<label class="block text-sm font-medium leading-5 text-gray-400" for="counter_page_background_gradient_color">Title color</label>
<a class=" mt-1 shadow-md hover:shadow-lg w-full flex items-center justify-between border border-transparent text-sm
font-medium rounded-md text-white bg-gray-700 hover:bg-gray-600 focus:outline-none focus:border-cdt-700 focus:shadow-outline-cdt
active:bg-cdt-700 transition duration-150 ease-in-out overflow-hidden h-10" href="#" x-on:click.prevent="navStack.unshift('text_color')">
<div style="background:" class="h-full flex-1 py-2 px-4 ">
</div>
<span class="px-2">
<svg xmlns="http://www.w3.org/2000/svg" class="text-white w-4 h-4" fill="currentColor" stroke="none" viewBox="0 0 20 20">
<path d="M13 11l1-1-6-6-1 2 4 4-4 4 1 2 5-5z"></path></svg>
</span>
</a>
<!-- end live patch -->
</div>
<div class="max-h-0 mt-0 overflow-hidden" id="bg-color-picker-wrappercounter_digit_color">
<label class="block text-sm font-medium leading-5 text-gray-400" for="counter_page_background_gradient_color">Digit color</label>
<a class=" mt-1 shadow-md hover:shadow-lg w-full flex items-center justify-between border border-transparent text-sm
font-medium rounded-md text-white bg-gray-700 hover:bg-gray-600 focus:outline-none focus:border-cdt-700 focus:shadow-outline-cdt
active:bg-cdt-700 transition duration-150 ease-in-out overflow-hidden h-10" href="#" x-on:click.prevent="navStack.unshift('text_color')">
<div style="background:" class="h-full flex-1 py-2 px-4 ">
</div>
<span class="px-2">
<svg xmlns="http://www.w3.org/2000/svg" class="text-white w-4 h-4" fill="currentColor" stroke="none" viewBox="0 0 20 20">
<path d="M13 11l1-1-6-6-1 2 4 4-4 4 1 2 5-5z"></path></svg>
</span>
</a>
<!-- end live patch -->
</div>
<div class="max-h-0 mt-0 overflow-hidden" id="bg-color-picker-wrappercounter_seperator_color">
<label class="block text-sm font-medium leading-5 text-gray-400" for="counter_page_background_gradient_color">Seperator color</label>
<a class=" mt-1 shadow-md hover:shadow-lg w-full flex items-center justify-between border border-transparent text-sm
font-medium rounded-md text-white bg-gray-700 hover:bg-gray-600 focus:outline-none focus:border-cdt-700 focus:shadow-outline-cdt
active:bg-cdt-700 transition duration-150 ease-in-out overflow-hidden h-10" href="#" x-on:click.prevent="navStack.unshift('text_color')">
<div style="background:" class="h-full flex-1 py-2 px-4 ">
</div>
<span class="px-2">
<svg xmlns="http://www.w3.org/2000/svg" class="text-white w-4 h-4" fill="currentColor" stroke="none" viewBox="0 0 20 20">
<path d="M13 11l1-1-6-6-1 2 4 4-4 4 1 2 5-5z"></path></svg>
</span>
</a>
<!-- end live patch -->
</div>
<div class="max-h-0 mt-0 overflow-hidden" id="bg-color-picker-wrappercounter_unit_label_color">
<label class="block text-sm font-medium leading-5 text-gray-400" for="counter_page_background_gradient_color">Unit labels</label>
<a class=" mt-1 shadow-md hover:shadow-lg w-full flex items-center justify-between border border-transparent text-sm
font-medium rounded-md text-white bg-gray-700 hover:bg-gray-600 focus:outline-none focus:border-cdt-700 focus:shadow-outline-cdt
active:bg-cdt-700 transition duration-150 ease-in-out overflow-hidden h-10" href="#" x-on:click.prevent="navStack.unshift('text_color')">
<div style="background:" class="h-full flex-1 py-2 px-4 ">
</div>
<span class="px-2">
<svg xmlns="http://www.w3.org/2000/svg" class="text-white w-4 h-4" fill="currentColor" stroke="none" viewBox="0 0 20 20">
<path d="M13 11l1-1-6-6-1 2 4 4-4 4 1 2 5-5z"></path></svg>
</span>
</a>
<!-- end live patch -->
</div>
<div class="max-h-0 mt-0 overflow-hidden" id="bg-color-picker-wrappersubtitle_color">
<label class="block text-sm font-medium leading-5 text-gray-400" for="counter_page_background_gradient_color">Subtitle</label>
<a class=" mt-1 shadow-md hover:shadow-lg w-full flex items-center justify-between border border-transparent text-sm
font-medium rounded-md text-white bg-gray-700 hover:bg-gray-600 focus:outline-none focus:border-cdt-700 focus:shadow-outline-cdt
active:bg-cdt-700 transition duration-150 ease-in-out overflow-hidden h-10" href="#" x-on:click.prevent="navStack.unshift('text_color')">
<div style="background:" class="h-full flex-1 py-2 px-4 ">
</div>
<span class="px-2">
<svg xmlns="http://www.w3.org/2000/svg" class="text-white w-4 h-4" fill="currentColor" stroke="none" viewBox="0 0 20 20">
<path d="M13 11l1-1-6-6-1 2 4 4-4 4 1 2 5-5z"></path></svg>
</span>
</a>
<!-- end live patch -->
</div>
<div class="mt-4">
<label class="block text-sm font-medium leading-5 text-gray-400" for="counter_page_background_gradient_color">Font family</label>
<div class="mt-1 border rounded overflow-hidden shadow border-gray-700">
<a class="block flex items-center justify-between h-10 bg-gray-700 hover:bg-gray-600 hover:shadow-lg" href="#" phx-click="load_font_familiy_previews" title="Select font family" x-on:click.prevent="navStack.unshift('text_font_family')">
<div class="flex-1 px-4">
<!--svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="w-4 h-4 mr-2 flex-shrink-0 text-cdt-600" fill="currentColor"><path fill-rule="evenodd" d="M2.93 17.07A10 10 0 1017.07 2.93 10 10 0 002.93 17.07zm12.73-1.41A8 8 0 104.34 4.34a8 8 0 0011.32 11.32zM4 10l2-2 3 3 5-5 2 2-7 7-5-5z"/></svg-->
<img class="w-full" src="/countdown-pages/font-sample?family=Nunito">
</div>
<span class="px-2 ">
<svg xmlns="http://www.w3.org/2000/svg" class="text-white w-4 h-4" fill="currentColor" stroke="none" viewBox="0 0 20 20">
<path d="M13 11l1-1-6-6-1 2 4 4-4 4 1 2 5-5z"></path></svg>
</span>
</a>
<!-- end live patch -->
<!-- end for font_family -->
</div>
</div>
<div class="mt-4">
<label class="block text-sm font-medium leading-5 text-gray-400" for="counter_page_horizontal_alignment">Alignment</label>
<select
class="form-input block w-full sm:text-sm sm:leading-5 mt-1 form-select block w-full pl-3 pr-10 py-2 text-base leading-6 bg-gray-900 border-gray-900 text-gray-300 shadow-inset focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5 rounded-md rounder-md"
id="counter_page_horizontal_alignment" name="counter_page[horizontal_alignment]">
<option value="left">Left</option>
<option selected="" value="center">Center</option>
<option value="right">Right</option>
</select>
</div>
<!-- end inputs_for -->
</div>
</div>
<style>
.nav-stack-item {
transition-duration: 300ms;
transition-property: transform, opacity;
opacity: 1;
}
.nav-stack-item-0 {}
.nav-stack-item-1 {
transform: translateY(-2.2rem) scale(0.9);
background-color: rgb(17, 22, 30);
}
.nav-stack-item-2 {
transform: translateY(-3.2rem) scale(0.8);
background-color: rgb(6, 7, 10);
}
.nav-stack-item.nav-stack-item--1 {
transform: translateX(400px);
opacity: 0;
pointer-events: none;
}
</style>
<div x-showxxx="navStack.includes('text_font_family')" class="absolute flex flex-col bg-gray-800 rounded-xl w-full origin-top shadow-xl nav-stack-item ring-1 ring-black/70 h-full pb-4 nav-stack-item--1"
style="transition-property: transform, opacity, margin-left;" x-bind:class="'nav-stack-item-' + navStack.indexOf('text_font_family')"
x-bind:stylexxx="'transition-duration: 200ms; transition-property: transform, opacity;' + (navStack.includes('text_font_family') ? 'transform: translateY(' + (-1 * navStack.indexOf('text_font_family')) + 'rem) scale(' + (1 - (0.1 * navStack.indexOf('text_font_family'))) + '); ' : 'transform: translateY(500px)')"
stylexxx="transition-duration: 200ms; transition-property: transform, opacity;transform: translateY(500px)">
<div class="p-2 py-3 border-b border-b-gray-900 text-gray-500 flex items-center justify-end">
<div class="flex-grow">Font Family </div>
<div class="p-1">
<a class="flex items-center justify-center rounded-full hover:outline-none hover:bg-gray-600" href="#" x-on:click.prevent="navStack.shift()">
<svg class="h-6 w-6 text-white" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</a>
</div>
</div>
<div class="px-2 overflow-scroll" data-phx-component="6" id="phx-F9Z_3zU_CwTlCABC-6-0">
<div class="mt-4 border rounded overflow-hidden shadow border-gray-700">
</div>
<br><br>
</div>
</div>
<style>
.nav-stack-item {
transition-duration: 300ms;
transition-property: transform, opacity;
opacity: 1;
}
.nav-stack-item-0 {}
.nav-stack-item-1 {
transform: translateY(-2.2rem) scale(0.9);
background-color: rgb(17, 22, 30);
}
.nav-stack-item-2 {
transform: translateY(-3.2rem) scale(0.8);
background-color: rgb(6, 7, 10);
}
.nav-stack-item.nav-stack-item--1 {
transform: translateX(400px);
opacity: 0;
pointer-events: none;
}
</style>
<div x-showxxx="navStack.includes('text_color')" class="absolute flex flex-col bg-gray-800 rounded-xl w-full origin-top shadow-xl nav-stack-item ring-1 ring-black/70 h-full pb-4 nav-stack-item--1"
style="transition-property: transform, opacity, margin-left;" x-bind:class="'nav-stack-item-' + navStack.indexOf('text_color')"
x-bind:stylexxx="'transition-duration: 200ms; transition-property: transform, opacity;' + (navStack.includes('text_color') ? 'transform: translateY(' + (-1 * navStack.indexOf('text_color')) + 'rem) scale(' + (1 - (0.1 * navStack.indexOf('text_color'))) + '); ' : 'transform: translateY(500px)')"
stylexxx="transition-duration: 200ms; transition-property: transform, opacity;transform: translateY(500px)">
<div class="p-2 py-3 border-b border-b-gray-900 text-gray-500 flex items-center justify-end">
<div class="flex-grow">Text Color </div>
<div class="p-1">
<a class="flex items-center justify-center rounded-full hover:outline-none hover:bg-gray-600" href="#" x-on:click.prevent="navStack.shift()">
<svg class="h-6 w-6 text-white" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</a>
</div>
</div>
<div class="mb-2 p-4 flex flex-col" data-phx-component="7" id="phx-F9Z_3zU_CwTlCABC-7-0">
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#FFFFFF" title="#FFFFFF" class="border-xx w-full h-full block rounded p-1" style="background: #FFFFFF; border-color: #000; box-shadow: 0 0 0 4px #FFFFFF, 0 0 0 5px rgba(0,0,0,0.5)">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" style="width:16px; margin:auto; margin-top: 4px;" fill="#000">
<path fill-rule="evenodd" d="M0 11l2-2 5 5L18 3l2 2L7 18z"></path>
</svg>
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#E8E8E8" title="#E8E8E8" class=" w-full h-full block rounded p-1" style="background: #E8E8E8; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#CCCCCC" title="#CCCCCC" class=" w-full h-full block rounded p-1" style="background: #CCCCCC; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#AAAAAA" title="#AAAAAA" class=" w-full h-full block rounded p-1" style="background: #AAAAAA; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#888888" title="#888888" class=" w-full h-full block rounded p-1" style="background: #888888; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#666666" title="#666666" class=" w-full h-full block rounded p-1" style="background: #666666; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#444444" title="#444444" class=" w-full h-full block rounded p-1" style="background: #444444; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#222222" title="#222222" class=" w-full h-full block rounded p-1" style="background: #222222; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#000000" title="#000000" class=" w-full h-full block rounded p-1" style="background: #000000; border-color: #FFF; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#800040" title="#800040" class=" w-full h-full block rounded p-1" style="background: #800040; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#6A1540" title="#6A1540" class=" w-full h-full block rounded p-1" style="background: #6A1540; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#552B40" title="#552B40" class=" w-full h-full block rounded p-1" style="background: #552B40; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#FF0080" title="#FF0080" class=" w-full h-full block rounded p-1" style="background: #FF0080; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#D52A80" title="#D52A80" class=" w-full h-full block rounded p-1" style="background: #D52A80; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#AA5580" title="#AA5580" class=" w-full h-full block rounded p-1" style="background: #AA5580; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#FF80BF" title="#FF80BF" class=" w-full h-full block rounded p-1" style="background: #FF80BF; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#EA95BF" title="#EA95BF" class=" w-full h-full block rounded p-1" style="background: #EA95BF; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#D4AABF" title="#D4AABF" class=" w-full h-full block rounded p-1" style="background: #D4AABF; border-color: #FFF; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#80007F" title="#80007F" class=" w-full h-full block rounded p-1" style="background: #80007F; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#6A156A" title="#6A156A" class=" w-full h-full block rounded p-1" style="background: #6A156A; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#552B55" title="#552B55" class=" w-full h-full block rounded p-1" style="background: #552B55; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#FF00FF" title="#FF00FF" class=" w-full h-full block rounded p-1" style="background: #FF00FF; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#D52AD5" title="#D52AD5" class=" w-full h-full block rounded p-1" style="background: #D52AD5; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#AA55AA" title="#AA55AA" class=" w-full h-full block rounded p-1" style="background: #AA55AA; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#FF80FF" title="#FF80FF" class=" w-full h-full block rounded p-1" style="background: #FF80FF; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#EA95EA" title="#EA95EA" class=" w-full h-full block rounded p-1" style="background: #EA95EA; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#D4AAD4" title="#D4AAD4" class=" w-full h-full block rounded p-1" style="background: #D4AAD4; border-color: #FFF; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#400080" title="#400080" class=" w-full h-full block rounded p-1" style="background: #400080; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#40156A" title="#40156A" class=" w-full h-full block rounded p-1" style="background: #40156A; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#402B55" title="#402B55" class=" w-full h-full block rounded p-1" style="background: #402B55; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#7F00FF" title="#7F00FF" class=" w-full h-full block rounded p-1" style="background: #7F00FF; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#7F2AD5" title="#7F2AD5" class=" w-full h-full block rounded p-1" style="background: #7F2AD5; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#7F55AA" title="#7F55AA" class=" w-full h-full block rounded p-1" style="background: #7F55AA; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#BF80FF" title="#BF80FF" class=" w-full h-full block rounded p-1" style="background: #BF80FF; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#BF95EA" title="#BF95EA" class=" w-full h-full block rounded p-1" style="background: #BF95EA; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#BFAAD4" title="#BFAAD4" class=" w-full h-full block rounded p-1" style="background: #BFAAD4; border-color: #FFF; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#000080" title="#000080" class=" w-full h-full block rounded p-1" style="background: #000080; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#15156A" title="#15156A" class=" w-full h-full block rounded p-1" style="background: #15156A; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#2B2B55" title="#2B2B55" class=" w-full h-full block rounded p-1" style="background: #2B2B55; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#0000FF" title="#0000FF" class=" w-full h-full block rounded p-1" style="background: #0000FF; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#2A2AD5" title="#2A2AD5" class=" w-full h-full block rounded p-1" style="background: #2A2AD5; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#5555AA" title="#5555AA" class=" w-full h-full block rounded p-1" style="background: #5555AA; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#8080FF" title="#8080FF" class=" w-full h-full block rounded p-1" style="background: #8080FF; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#9595EA" title="#9595EA" class=" w-full h-full block rounded p-1" style="background: #9595EA; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#AAAAD4" title="#AAAAD4" class=" w-full h-full block rounded p-1" style="background: #AAAAD4; border-color: #FFF; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#004080" title="#004080" class=" w-full h-full block rounded p-1" style="background: #004080; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#15406A" title="#15406A" class=" w-full h-full block rounded p-1" style="background: #15406A; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#2B4055" title="#2B4055" class=" w-full h-full block rounded p-1" style="background: #2B4055; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#007FFF" title="#007FFF" class=" w-full h-full block rounded p-1" style="background: #007FFF; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#2A7FD5" title="#2A7FD5" class=" w-full h-full block rounded p-1" style="background: #2A7FD5; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#557FAA" title="#557FAA" class=" w-full h-full block rounded p-1" style="background: #557FAA; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#80BFFF" title="#80BFFF" class=" w-full h-full block rounded p-1" style="background: #80BFFF; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#95BFEA" title="#95BFEA" class=" w-full h-full block rounded p-1" style="background: #95BFEA; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#AABFD4" title="#AABFD4" class=" w-full h-full block rounded p-1" style="background: #AABFD4; border-color: #000; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#007F80" title="#007F80" class=" w-full h-full block rounded p-1" style="background: #007F80; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#156A6A" title="#156A6A" class=" w-full h-full block rounded p-1" style="background: #156A6A; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#2B5555" title="#2B5555" class=" w-full h-full block rounded p-1" style="background: #2B5555; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#00FFFF" title="#00FFFF" class=" w-full h-full block rounded p-1" style="background: #00FFFF; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#2AD5D5" title="#2AD5D5" class=" w-full h-full block rounded p-1" style="background: #2AD5D5; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#55AAAA" title="#55AAAA" class=" w-full h-full block rounded p-1" style="background: #55AAAA; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#80FFFF" title="#80FFFF" class=" w-full h-full block rounded p-1" style="background: #80FFFF; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#95EAEA" title="#95EAEA" class=" w-full h-full block rounded p-1" style="background: #95EAEA; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#AAD4D4" title="#AAD4D4" class=" w-full h-full block rounded p-1" style="background: #AAD4D4; border-color: #000; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#008040" title="#008040" class=" w-full h-full block rounded p-1" style="background: #008040; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#156A40" title="#156A40" class=" w-full h-full block rounded p-1" style="background: #156A40; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#2B5540" title="#2B5540" class=" w-full h-full block rounded p-1" style="background: #2B5540; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#00FF80" title="#00FF80" class=" w-full h-full block rounded p-1" style="background: #00FF80; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#2AD580" title="#2AD580" class=" w-full h-full block rounded p-1" style="background: #2AD580; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#55AA80" title="#55AA80" class=" w-full h-full block rounded p-1" style="background: #55AA80; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#80FFBF" title="#80FFBF" class=" w-full h-full block rounded p-1" style="background: #80FFBF; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#95EABF" title="#95EABF" class=" w-full h-full block rounded p-1" style="background: #95EABF; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#AAD4BF" title="#AAD4BF" class=" w-full h-full block rounded p-1" style="background: #AAD4BF; border-color: #000; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#008000" title="#008000" class=" w-full h-full block rounded p-1" style="background: #008000; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#156A15" title="#156A15" class=" w-full h-full block rounded p-1" style="background: #156A15; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#2B552B" title="#2B552B" class=" w-full h-full block rounded p-1" style="background: #2B552B; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#00FF00" title="#00FF00" class=" w-full h-full block rounded p-1" style="background: #00FF00; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#2AD52A" title="#2AD52A" class=" w-full h-full block rounded p-1" style="background: #2AD52A; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#55AA55" title="#55AA55" class=" w-full h-full block rounded p-1" style="background: #55AA55; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#80FF80" title="#80FF80" class=" w-full h-full block rounded p-1" style="background: #80FF80; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#95EA95" title="#95EA95" class=" w-full h-full block rounded p-1" style="background: #95EA95; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#AAD4AA" title="#AAD4AA" class=" w-full h-full block rounded p-1" style="background: #AAD4AA; border-color: #000; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#408000" title="#408000" class=" w-full h-full block rounded p-1" style="background: #408000; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#406A15" title="#406A15" class=" w-full h-full block rounded p-1" style="background: #406A15; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#40552B" title="#40552B" class=" w-full h-full block rounded p-1" style="background: #40552B; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#80FF00" title="#80FF00" class=" w-full h-full block rounded p-1" style="background: #80FF00; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#80D52A" title="#80D52A" class=" w-full h-full block rounded p-1" style="background: #80D52A; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#80AA55" title="#80AA55" class=" w-full h-full block rounded p-1" style="background: #80AA55; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#BFFF80" title="#BFFF80" class=" w-full h-full block rounded p-1" style="background: #BFFF80; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#BFEA95" title="#BFEA95" class=" w-full h-full block rounded p-1" style="background: #BFEA95; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#BFD4AA" title="#BFD4AA" class=" w-full h-full block rounded p-1" style="background: #BFD4AA; border-color: #000; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#7F8000" title="#7F8000" class=" w-full h-full block rounded p-1" style="background: #7F8000; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#6A6A15" title="#6A6A15" class=" w-full h-full block rounded p-1" style="background: #6A6A15; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#55552B" title="#55552B" class=" w-full h-full block rounded p-1" style="background: #55552B; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#FFFF00" title="#FFFF00" class=" w-full h-full block rounded p-1" style="background: #FFFF00; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#D5D52A" title="#D5D52A" class=" w-full h-full block rounded p-1" style="background: #D5D52A; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#AAAA55" title="#AAAA55" class=" w-full h-full block rounded p-1" style="background: #AAAA55; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#FFFF80" title="#FFFF80" class=" w-full h-full block rounded p-1" style="background: #FFFF80; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#EAEA95" title="#EAEA95" class=" w-full h-full block rounded p-1" style="background: #EAEA95; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#D4D4AA" title="#D4D4AA" class=" w-full h-full block rounded p-1" style="background: #D4D4AA; border-color: #000; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#804000" title="#804000" class=" w-full h-full block rounded p-1" style="background: #804000; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#6A4015" title="#6A4015" class=" w-full h-full block rounded p-1" style="background: #6A4015; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#55402B" title="#55402B" class=" w-full h-full block rounded p-1" style="background: #55402B; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#FF8000" title="#FF8000" class=" w-full h-full block rounded p-1" style="background: #FF8000; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#D5802A" title="#D5802A" class=" w-full h-full block rounded p-1" style="background: #D5802A; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#AA8055" title="#AA8055" class=" w-full h-full block rounded p-1" style="background: #AA8055; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#FFBF80" title="#FFBF80" class=" w-full h-full block rounded p-1" style="background: #FFBF80; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#EABF95" title="#EABF95" class=" w-full h-full block rounded p-1" style="background: #EABF95; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#D4BFAA" title="#D4BFAA" class=" w-full h-full block rounded p-1" style="background: #D4BFAA; border-color: #000; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#800000" title="#800000" class=" w-full h-full block rounded p-1" style="background: #800000; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#6A1515" title="#6A1515" class=" w-full h-full block rounded p-1" style="background: #6A1515; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#552B2B" title="#552B2B" class=" w-full h-full block rounded p-1" style="background: #552B2B; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#FF0000" title="#FF0000" class=" w-full h-full block rounded p-1" style="background: #FF0000; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#D52A2A" title="#D52A2A" class=" w-full h-full block rounded p-1" style="background: #D52A2A; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#AA5555" title="#AA5555" class=" w-full h-full block rounded p-1" style="background: #AA5555; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#FF8080" title="#FF8080" class=" w-full h-full block rounded p-1" style="background: #FF8080; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#EA9595" title="#EA9595" class=" w-full h-full block rounded p-1" style="background: #EA9595; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="7" phx-value-hex="#D4AAAA" title="#D4AAAA" class=" w-full h-full block rounded p-1" style="background: #D4AAAA; border-color: #FFF; ">
</a>
</div>
</div>
</div>
</div>
<style>
.nav-stack-item {
transition-duration: 300ms;
transition-property: transform, opacity;
opacity: 1;
}
.nav-stack-item-0 {}
.nav-stack-item-1 {
transform: translateY(-2.2rem) scale(0.9);
background-color: rgb(17, 22, 30);
}
.nav-stack-item-2 {
transform: translateY(-3.2rem) scale(0.8);
background-color: rgb(6, 7, 10);
}
.nav-stack-item.nav-stack-item--1 {
transform: translateX(400px);
opacity: 0;
pointer-events: none;
}
</style>
<div x-showxxx="navStack.includes('background_solid_color')" class="absolute flex flex-col bg-gray-800 rounded-xl w-full origin-top shadow-xl nav-stack-item ring-1 ring-black/70 h-full pb-4 nav-stack-item--1"
style="transition-property: transform, opacity, margin-left;" x-bind:class="'nav-stack-item-' + navStack.indexOf('background_solid_color')"
x-bind:stylexxx="'transition-duration: 200ms; transition-property: transform, opacity;' + (navStack.includes('background_solid_color') ? 'transform: translateY(' + (-1 * navStack.indexOf('background_solid_color')) + 'rem) scale(' + (1 - (0.1 * navStack.indexOf('background_solid_color'))) + '); ' : 'transform: translateY(500px)')"
stylexxx="transition-duration: 200ms; transition-property: transform, opacity;transform: translateY(500px)">
<div class="p-2 py-3 border-b border-b-gray-900 text-gray-500 flex items-center justify-end">
<div class="flex-grow">Background Color </div>
<div class="p-1">
<a class="flex items-center justify-center rounded-full hover:outline-none hover:bg-gray-600" href="#" x-on:click.prevent="navStack.shift()">
<svg class="h-6 w-6 text-white" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</a>
</div>
</div>
<div class="mb-2 p-4 flex flex-col" data-phx-component="8" id="phx-F9Z_3zU_CwTlCABC-8-0">
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#FFFFFF" title="#FFFFFF" class=" w-full h-full block rounded p-1" style="background: #FFFFFF; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#E8E8E8" title="#E8E8E8" class=" w-full h-full block rounded p-1" style="background: #E8E8E8; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#CCCCCC" title="#CCCCCC" class=" w-full h-full block rounded p-1" style="background: #CCCCCC; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#AAAAAA" title="#AAAAAA" class=" w-full h-full block rounded p-1" style="background: #AAAAAA; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#888888" title="#888888" class=" w-full h-full block rounded p-1" style="background: #888888; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#666666" title="#666666" class=" w-full h-full block rounded p-1" style="background: #666666; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#444444" title="#444444" class=" w-full h-full block rounded p-1" style="background: #444444; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#222222" title="#222222" class=" w-full h-full block rounded p-1" style="background: #222222; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#000000" title="#000000" class=" w-full h-full block rounded p-1" style="background: #000000; border-color: #FFF; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#800040" title="#800040" class="border-xx w-full h-full block rounded p-1" style="background: #800040; border-color: #FFF; box-shadow: 0 0 0 4px #800040, 0 0 0 5px rgba(0,0,0,0.5)">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" style="width:16px; margin:auto; margin-top: 4px;" fill="#FFF">
<path fill-rule="evenodd" d="M0 11l2-2 5 5L18 3l2 2L7 18z"></path>
</svg>
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#6A1540" title="#6A1540" class=" w-full h-full block rounded p-1" style="background: #6A1540; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#552B40" title="#552B40" class=" w-full h-full block rounded p-1" style="background: #552B40; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#FF0080" title="#FF0080" class=" w-full h-full block rounded p-1" style="background: #FF0080; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#D52A80" title="#D52A80" class=" w-full h-full block rounded p-1" style="background: #D52A80; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#AA5580" title="#AA5580" class=" w-full h-full block rounded p-1" style="background: #AA5580; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#FF80BF" title="#FF80BF" class=" w-full h-full block rounded p-1" style="background: #FF80BF; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#EA95BF" title="#EA95BF" class=" w-full h-full block rounded p-1" style="background: #EA95BF; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#D4AABF" title="#D4AABF" class=" w-full h-full block rounded p-1" style="background: #D4AABF; border-color: #FFF; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#80007F" title="#80007F" class=" w-full h-full block rounded p-1" style="background: #80007F; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#6A156A" title="#6A156A" class=" w-full h-full block rounded p-1" style="background: #6A156A; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#552B55" title="#552B55" class=" w-full h-full block rounded p-1" style="background: #552B55; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#FF00FF" title="#FF00FF" class=" w-full h-full block rounded p-1" style="background: #FF00FF; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#D52AD5" title="#D52AD5" class=" w-full h-full block rounded p-1" style="background: #D52AD5; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#AA55AA" title="#AA55AA" class=" w-full h-full block rounded p-1" style="background: #AA55AA; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#FF80FF" title="#FF80FF" class=" w-full h-full block rounded p-1" style="background: #FF80FF; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#EA95EA" title="#EA95EA" class=" w-full h-full block rounded p-1" style="background: #EA95EA; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#D4AAD4" title="#D4AAD4" class=" w-full h-full block rounded p-1" style="background: #D4AAD4; border-color: #FFF; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#400080" title="#400080" class=" w-full h-full block rounded p-1" style="background: #400080; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#40156A" title="#40156A" class=" w-full h-full block rounded p-1" style="background: #40156A; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#402B55" title="#402B55" class=" w-full h-full block rounded p-1" style="background: #402B55; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#7F00FF" title="#7F00FF" class=" w-full h-full block rounded p-1" style="background: #7F00FF; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#7F2AD5" title="#7F2AD5" class=" w-full h-full block rounded p-1" style="background: #7F2AD5; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#7F55AA" title="#7F55AA" class=" w-full h-full block rounded p-1" style="background: #7F55AA; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#BF80FF" title="#BF80FF" class=" w-full h-full block rounded p-1" style="background: #BF80FF; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#BF95EA" title="#BF95EA" class=" w-full h-full block rounded p-1" style="background: #BF95EA; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#BFAAD4" title="#BFAAD4" class=" w-full h-full block rounded p-1" style="background: #BFAAD4; border-color: #FFF; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#000080" title="#000080" class=" w-full h-full block rounded p-1" style="background: #000080; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#15156A" title="#15156A" class=" w-full h-full block rounded p-1" style="background: #15156A; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#2B2B55" title="#2B2B55" class=" w-full h-full block rounded p-1" style="background: #2B2B55; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#0000FF" title="#0000FF" class=" w-full h-full block rounded p-1" style="background: #0000FF; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#2A2AD5" title="#2A2AD5" class=" w-full h-full block rounded p-1" style="background: #2A2AD5; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#5555AA" title="#5555AA" class=" w-full h-full block rounded p-1" style="background: #5555AA; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#8080FF" title="#8080FF" class=" w-full h-full block rounded p-1" style="background: #8080FF; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#9595EA" title="#9595EA" class=" w-full h-full block rounded p-1" style="background: #9595EA; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#AAAAD4" title="#AAAAD4" class=" w-full h-full block rounded p-1" style="background: #AAAAD4; border-color: #FFF; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#004080" title="#004080" class=" w-full h-full block rounded p-1" style="background: #004080; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#15406A" title="#15406A" class=" w-full h-full block rounded p-1" style="background: #15406A; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#2B4055" title="#2B4055" class=" w-full h-full block rounded p-1" style="background: #2B4055; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#007FFF" title="#007FFF" class=" w-full h-full block rounded p-1" style="background: #007FFF; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#2A7FD5" title="#2A7FD5" class=" w-full h-full block rounded p-1" style="background: #2A7FD5; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#557FAA" title="#557FAA" class=" w-full h-full block rounded p-1" style="background: #557FAA; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#80BFFF" title="#80BFFF" class=" w-full h-full block rounded p-1" style="background: #80BFFF; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#95BFEA" title="#95BFEA" class=" w-full h-full block rounded p-1" style="background: #95BFEA; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#AABFD4" title="#AABFD4" class=" w-full h-full block rounded p-1" style="background: #AABFD4; border-color: #000; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#007F80" title="#007F80" class=" w-full h-full block rounded p-1" style="background: #007F80; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#156A6A" title="#156A6A" class=" w-full h-full block rounded p-1" style="background: #156A6A; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#2B5555" title="#2B5555" class=" w-full h-full block rounded p-1" style="background: #2B5555; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#00FFFF" title="#00FFFF" class=" w-full h-full block rounded p-1" style="background: #00FFFF; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#2AD5D5" title="#2AD5D5" class=" w-full h-full block rounded p-1" style="background: #2AD5D5; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#55AAAA" title="#55AAAA" class=" w-full h-full block rounded p-1" style="background: #55AAAA; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#80FFFF" title="#80FFFF" class=" w-full h-full block rounded p-1" style="background: #80FFFF; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#95EAEA" title="#95EAEA" class=" w-full h-full block rounded p-1" style="background: #95EAEA; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#AAD4D4" title="#AAD4D4" class=" w-full h-full block rounded p-1" style="background: #AAD4D4; border-color: #000; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#008040" title="#008040" class=" w-full h-full block rounded p-1" style="background: #008040; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#156A40" title="#156A40" class=" w-full h-full block rounded p-1" style="background: #156A40; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#2B5540" title="#2B5540" class=" w-full h-full block rounded p-1" style="background: #2B5540; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#00FF80" title="#00FF80" class=" w-full h-full block rounded p-1" style="background: #00FF80; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#2AD580" title="#2AD580" class=" w-full h-full block rounded p-1" style="background: #2AD580; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#55AA80" title="#55AA80" class=" w-full h-full block rounded p-1" style="background: #55AA80; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#80FFBF" title="#80FFBF" class=" w-full h-full block rounded p-1" style="background: #80FFBF; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#95EABF" title="#95EABF" class=" w-full h-full block rounded p-1" style="background: #95EABF; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#AAD4BF" title="#AAD4BF" class=" w-full h-full block rounded p-1" style="background: #AAD4BF; border-color: #000; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#008000" title="#008000" class=" w-full h-full block rounded p-1" style="background: #008000; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#156A15" title="#156A15" class=" w-full h-full block rounded p-1" style="background: #156A15; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#2B552B" title="#2B552B" class=" w-full h-full block rounded p-1" style="background: #2B552B; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#00FF00" title="#00FF00" class=" w-full h-full block rounded p-1" style="background: #00FF00; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#2AD52A" title="#2AD52A" class=" w-full h-full block rounded p-1" style="background: #2AD52A; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#55AA55" title="#55AA55" class=" w-full h-full block rounded p-1" style="background: #55AA55; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#80FF80" title="#80FF80" class=" w-full h-full block rounded p-1" style="background: #80FF80; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#95EA95" title="#95EA95" class=" w-full h-full block rounded p-1" style="background: #95EA95; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#AAD4AA" title="#AAD4AA" class=" w-full h-full block rounded p-1" style="background: #AAD4AA; border-color: #000; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#408000" title="#408000" class=" w-full h-full block rounded p-1" style="background: #408000; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#406A15" title="#406A15" class=" w-full h-full block rounded p-1" style="background: #406A15; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#40552B" title="#40552B" class=" w-full h-full block rounded p-1" style="background: #40552B; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#80FF00" title="#80FF00" class=" w-full h-full block rounded p-1" style="background: #80FF00; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#80D52A" title="#80D52A" class=" w-full h-full block rounded p-1" style="background: #80D52A; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#80AA55" title="#80AA55" class=" w-full h-full block rounded p-1" style="background: #80AA55; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#BFFF80" title="#BFFF80" class=" w-full h-full block rounded p-1" style="background: #BFFF80; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#BFEA95" title="#BFEA95" class=" w-full h-full block rounded p-1" style="background: #BFEA95; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#BFD4AA" title="#BFD4AA" class=" w-full h-full block rounded p-1" style="background: #BFD4AA; border-color: #000; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#7F8000" title="#7F8000" class=" w-full h-full block rounded p-1" style="background: #7F8000; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#6A6A15" title="#6A6A15" class=" w-full h-full block rounded p-1" style="background: #6A6A15; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#55552B" title="#55552B" class=" w-full h-full block rounded p-1" style="background: #55552B; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#FFFF00" title="#FFFF00" class=" w-full h-full block rounded p-1" style="background: #FFFF00; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#D5D52A" title="#D5D52A" class=" w-full h-full block rounded p-1" style="background: #D5D52A; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#AAAA55" title="#AAAA55" class=" w-full h-full block rounded p-1" style="background: #AAAA55; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#FFFF80" title="#FFFF80" class=" w-full h-full block rounded p-1" style="background: #FFFF80; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#EAEA95" title="#EAEA95" class=" w-full h-full block rounded p-1" style="background: #EAEA95; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#D4D4AA" title="#D4D4AA" class=" w-full h-full block rounded p-1" style="background: #D4D4AA; border-color: #000; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#804000" title="#804000" class=" w-full h-full block rounded p-1" style="background: #804000; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#6A4015" title="#6A4015" class=" w-full h-full block rounded p-1" style="background: #6A4015; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#55402B" title="#55402B" class=" w-full h-full block rounded p-1" style="background: #55402B; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#FF8000" title="#FF8000" class=" w-full h-full block rounded p-1" style="background: #FF8000; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#D5802A" title="#D5802A" class=" w-full h-full block rounded p-1" style="background: #D5802A; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#AA8055" title="#AA8055" class=" w-full h-full block rounded p-1" style="background: #AA8055; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#FFBF80" title="#FFBF80" class=" w-full h-full block rounded p-1" style="background: #FFBF80; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#EABF95" title="#EABF95" class=" w-full h-full block rounded p-1" style="background: #EABF95; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#D4BFAA" title="#D4BFAA" class=" w-full h-full block rounded p-1" style="background: #D4BFAA; border-color: #000; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#800000" title="#800000" class=" w-full h-full block rounded p-1" style="background: #800000; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#6A1515" title="#6A1515" class=" w-full h-full block rounded p-1" style="background: #6A1515; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#552B2B" title="#552B2B" class=" w-full h-full block rounded p-1" style="background: #552B2B; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#FF0000" title="#FF0000" class=" w-full h-full block rounded p-1" style="background: #FF0000; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#D52A2A" title="#D52A2A" class=" w-full h-full block rounded p-1" style="background: #D52A2A; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#AA5555" title="#AA5555" class=" w-full h-full block rounded p-1" style="background: #AA5555; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#FF8080" title="#FF8080" class=" w-full h-full block rounded p-1" style="background: #FF8080; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#EA9595" title="#EA9595" class=" w-full h-full block rounded p-1" style="background: #EA9595; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="8" phx-value-hex="#D4AAAA" title="#D4AAAA" class=" w-full h-full block rounded p-1" style="background: #D4AAAA; border-color: #FFF; ">
</a>
</div>
</div>
</div>
</div>
<style>
.nav-stack-item {
transition-duration: 300ms;
transition-property: transform, opacity;
opacity: 1;
}
.nav-stack-item-0 {}
.nav-stack-item-1 {
transform: translateY(-2.2rem) scale(0.9);
background-color: rgb(17, 22, 30);
}
.nav-stack-item-2 {
transform: translateY(-3.2rem) scale(0.8);
background-color: rgb(6, 7, 10);
}
.nav-stack-item.nav-stack-item--1 {
transform: translateX(400px);
opacity: 0;
pointer-events: none;
}
</style>
<div x-showxxx="navStack.includes('background_gradient_color_begin')" class="absolute flex flex-col bg-gray-800 rounded-xl w-full origin-top shadow-xl nav-stack-item ring-1 ring-black/70 h-full pb-4 nav-stack-item--1"
style="transition-property: transform, opacity, margin-left;" x-bind:class="'nav-stack-item-' + navStack.indexOf('background_gradient_color_begin')"
x-bind:stylexxx="'transition-duration: 200ms; transition-property: transform, opacity;' + (navStack.includes('background_gradient_color_begin') ? 'transform: translateY(' + (-1 * navStack.indexOf('background_gradient_color_begin')) + 'rem) scale(' + (1 - (0.1 * navStack.indexOf('background_gradient_color_begin'))) + '); ' : 'transform: translateY(500px)')"
stylexxx="transition-duration: 200ms; transition-property: transform, opacity;transform: translateY(500px)">
<div class="p-2 py-3 border-b border-b-gray-900 text-gray-500 flex items-center justify-end">
<div class="flex-grow">Background Gradient Begin </div>
<div class="p-1">
<a class="flex items-center justify-center rounded-full hover:outline-none hover:bg-gray-600" href="#" x-on:click.prevent="navStack.shift()">
<svg class="h-6 w-6 text-white" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</a>
</div>
</div>
<div class="mb-2 p-4 flex flex-col" data-phx-component="9" id="phx-F9Z_3zU_CwTlCABC-9-0">
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#FFFFFF" title="#FFFFFF" class=" w-full h-full block rounded p-1" style="background: #FFFFFF; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#E8E8E8" title="#E8E8E8" class=" w-full h-full block rounded p-1" style="background: #E8E8E8; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#CCCCCC" title="#CCCCCC" class=" w-full h-full block rounded p-1" style="background: #CCCCCC; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#AAAAAA" title="#AAAAAA" class=" w-full h-full block rounded p-1" style="background: #AAAAAA; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#888888" title="#888888" class=" w-full h-full block rounded p-1" style="background: #888888; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#666666" title="#666666" class=" w-full h-full block rounded p-1" style="background: #666666; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#444444" title="#444444" class=" w-full h-full block rounded p-1" style="background: #444444; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#222222" title="#222222" class=" w-full h-full block rounded p-1" style="background: #222222; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#000000" title="#000000" class=" w-full h-full block rounded p-1" style="background: #000000; border-color: #FFF; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#800040" title="#800040" class=" w-full h-full block rounded p-1" style="background: #800040; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#6A1540" title="#6A1540" class=" w-full h-full block rounded p-1" style="background: #6A1540; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#552B40" title="#552B40" class=" w-full h-full block rounded p-1" style="background: #552B40; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#FF0080" title="#FF0080" class=" w-full h-full block rounded p-1" style="background: #FF0080; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#D52A80" title="#D52A80" class=" w-full h-full block rounded p-1" style="background: #D52A80; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#AA5580" title="#AA5580" class=" w-full h-full block rounded p-1" style="background: #AA5580; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#FF80BF" title="#FF80BF" class=" w-full h-full block rounded p-1" style="background: #FF80BF; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#EA95BF" title="#EA95BF" class=" w-full h-full block rounded p-1" style="background: #EA95BF; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#D4AABF" title="#D4AABF" class=" w-full h-full block rounded p-1" style="background: #D4AABF; border-color: #FFF; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#80007F" title="#80007F" class=" w-full h-full block rounded p-1" style="background: #80007F; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#6A156A" title="#6A156A" class=" w-full h-full block rounded p-1" style="background: #6A156A; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#552B55" title="#552B55" class=" w-full h-full block rounded p-1" style="background: #552B55; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#FF00FF" title="#FF00FF" class=" w-full h-full block rounded p-1" style="background: #FF00FF; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#D52AD5" title="#D52AD5" class=" w-full h-full block rounded p-1" style="background: #D52AD5; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#AA55AA" title="#AA55AA" class=" w-full h-full block rounded p-1" style="background: #AA55AA; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#FF80FF" title="#FF80FF" class=" w-full h-full block rounded p-1" style="background: #FF80FF; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#EA95EA" title="#EA95EA" class=" w-full h-full block rounded p-1" style="background: #EA95EA; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#D4AAD4" title="#D4AAD4" class=" w-full h-full block rounded p-1" style="background: #D4AAD4; border-color: #FFF; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#400080" title="#400080" class=" w-full h-full block rounded p-1" style="background: #400080; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#40156A" title="#40156A" class=" w-full h-full block rounded p-1" style="background: #40156A; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#402B55" title="#402B55" class=" w-full h-full block rounded p-1" style="background: #402B55; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#7F00FF" title="#7F00FF" class=" w-full h-full block rounded p-1" style="background: #7F00FF; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#7F2AD5" title="#7F2AD5" class=" w-full h-full block rounded p-1" style="background: #7F2AD5; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#7F55AA" title="#7F55AA" class=" w-full h-full block rounded p-1" style="background: #7F55AA; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#BF80FF" title="#BF80FF" class=" w-full h-full block rounded p-1" style="background: #BF80FF; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#BF95EA" title="#BF95EA" class=" w-full h-full block rounded p-1" style="background: #BF95EA; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#BFAAD4" title="#BFAAD4" class=" w-full h-full block rounded p-1" style="background: #BFAAD4; border-color: #FFF; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#000080" title="#000080" class=" w-full h-full block rounded p-1" style="background: #000080; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#15156A" title="#15156A" class=" w-full h-full block rounded p-1" style="background: #15156A; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#2B2B55" title="#2B2B55" class=" w-full h-full block rounded p-1" style="background: #2B2B55; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#0000FF" title="#0000FF" class=" w-full h-full block rounded p-1" style="background: #0000FF; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#2A2AD5" title="#2A2AD5" class=" w-full h-full block rounded p-1" style="background: #2A2AD5; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#5555AA" title="#5555AA" class=" w-full h-full block rounded p-1" style="background: #5555AA; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#8080FF" title="#8080FF" class=" w-full h-full block rounded p-1" style="background: #8080FF; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#9595EA" title="#9595EA" class=" w-full h-full block rounded p-1" style="background: #9595EA; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#AAAAD4" title="#AAAAD4" class=" w-full h-full block rounded p-1" style="background: #AAAAD4; border-color: #FFF; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#004080" title="#004080" class=" w-full h-full block rounded p-1" style="background: #004080; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#15406A" title="#15406A" class=" w-full h-full block rounded p-1" style="background: #15406A; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#2B4055" title="#2B4055" class=" w-full h-full block rounded p-1" style="background: #2B4055; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#007FFF" title="#007FFF" class=" w-full h-full block rounded p-1" style="background: #007FFF; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#2A7FD5" title="#2A7FD5" class=" w-full h-full block rounded p-1" style="background: #2A7FD5; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#557FAA" title="#557FAA" class=" w-full h-full block rounded p-1" style="background: #557FAA; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#80BFFF" title="#80BFFF" class=" w-full h-full block rounded p-1" style="background: #80BFFF; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#95BFEA" title="#95BFEA" class=" w-full h-full block rounded p-1" style="background: #95BFEA; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#AABFD4" title="#AABFD4" class=" w-full h-full block rounded p-1" style="background: #AABFD4; border-color: #000; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#007F80" title="#007F80" class=" w-full h-full block rounded p-1" style="background: #007F80; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#156A6A" title="#156A6A" class=" w-full h-full block rounded p-1" style="background: #156A6A; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#2B5555" title="#2B5555" class=" w-full h-full block rounded p-1" style="background: #2B5555; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#00FFFF" title="#00FFFF" class=" w-full h-full block rounded p-1" style="background: #00FFFF; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#2AD5D5" title="#2AD5D5" class=" w-full h-full block rounded p-1" style="background: #2AD5D5; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#55AAAA" title="#55AAAA" class=" w-full h-full block rounded p-1" style="background: #55AAAA; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#80FFFF" title="#80FFFF" class=" w-full h-full block rounded p-1" style="background: #80FFFF; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#95EAEA" title="#95EAEA" class=" w-full h-full block rounded p-1" style="background: #95EAEA; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#AAD4D4" title="#AAD4D4" class=" w-full h-full block rounded p-1" style="background: #AAD4D4; border-color: #000; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#008040" title="#008040" class=" w-full h-full block rounded p-1" style="background: #008040; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#156A40" title="#156A40" class=" w-full h-full block rounded p-1" style="background: #156A40; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#2B5540" title="#2B5540" class=" w-full h-full block rounded p-1" style="background: #2B5540; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#00FF80" title="#00FF80" class=" w-full h-full block rounded p-1" style="background: #00FF80; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#2AD580" title="#2AD580" class=" w-full h-full block rounded p-1" style="background: #2AD580; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#55AA80" title="#55AA80" class=" w-full h-full block rounded p-1" style="background: #55AA80; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#80FFBF" title="#80FFBF" class=" w-full h-full block rounded p-1" style="background: #80FFBF; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#95EABF" title="#95EABF" class=" w-full h-full block rounded p-1" style="background: #95EABF; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#AAD4BF" title="#AAD4BF" class=" w-full h-full block rounded p-1" style="background: #AAD4BF; border-color: #000; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#008000" title="#008000" class=" w-full h-full block rounded p-1" style="background: #008000; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#156A15" title="#156A15" class=" w-full h-full block rounded p-1" style="background: #156A15; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#2B552B" title="#2B552B" class=" w-full h-full block rounded p-1" style="background: #2B552B; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#00FF00" title="#00FF00" class=" w-full h-full block rounded p-1" style="background: #00FF00; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#2AD52A" title="#2AD52A" class=" w-full h-full block rounded p-1" style="background: #2AD52A; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#55AA55" title="#55AA55" class=" w-full h-full block rounded p-1" style="background: #55AA55; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#80FF80" title="#80FF80" class=" w-full h-full block rounded p-1" style="background: #80FF80; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#95EA95" title="#95EA95" class=" w-full h-full block rounded p-1" style="background: #95EA95; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#AAD4AA" title="#AAD4AA" class=" w-full h-full block rounded p-1" style="background: #AAD4AA; border-color: #000; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#408000" title="#408000" class=" w-full h-full block rounded p-1" style="background: #408000; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#406A15" title="#406A15" class=" w-full h-full block rounded p-1" style="background: #406A15; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#40552B" title="#40552B" class=" w-full h-full block rounded p-1" style="background: #40552B; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#80FF00" title="#80FF00" class=" w-full h-full block rounded p-1" style="background: #80FF00; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#80D52A" title="#80D52A" class=" w-full h-full block rounded p-1" style="background: #80D52A; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#80AA55" title="#80AA55" class=" w-full h-full block rounded p-1" style="background: #80AA55; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#BFFF80" title="#BFFF80" class=" w-full h-full block rounded p-1" style="background: #BFFF80; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#BFEA95" title="#BFEA95" class=" w-full h-full block rounded p-1" style="background: #BFEA95; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#BFD4AA" title="#BFD4AA" class=" w-full h-full block rounded p-1" style="background: #BFD4AA; border-color: #000; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#7F8000" title="#7F8000" class=" w-full h-full block rounded p-1" style="background: #7F8000; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#6A6A15" title="#6A6A15" class=" w-full h-full block rounded p-1" style="background: #6A6A15; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#55552B" title="#55552B" class=" w-full h-full block rounded p-1" style="background: #55552B; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#FFFF00" title="#FFFF00" class=" w-full h-full block rounded p-1" style="background: #FFFF00; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#D5D52A" title="#D5D52A" class=" w-full h-full block rounded p-1" style="background: #D5D52A; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#AAAA55" title="#AAAA55" class=" w-full h-full block rounded p-1" style="background: #AAAA55; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#FFFF80" title="#FFFF80" class=" w-full h-full block rounded p-1" style="background: #FFFF80; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#EAEA95" title="#EAEA95" class=" w-full h-full block rounded p-1" style="background: #EAEA95; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#D4D4AA" title="#D4D4AA" class=" w-full h-full block rounded p-1" style="background: #D4D4AA; border-color: #000; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#804000" title="#804000" class=" w-full h-full block rounded p-1" style="background: #804000; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#6A4015" title="#6A4015" class=" w-full h-full block rounded p-1" style="background: #6A4015; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#55402B" title="#55402B" class=" w-full h-full block rounded p-1" style="background: #55402B; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#FF8000" title="#FF8000" class="border-xx w-full h-full block rounded p-1" style="background: #FF8000; border-color: #FFF; box-shadow: 0 0 0 4px #FF8000, 0 0 0 5px rgba(0,0,0,0.5)">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" style="width:16px; margin:auto; margin-top: 4px;" fill="#FFF">
<path fill-rule="evenodd" d="M0 11l2-2 5 5L18 3l2 2L7 18z"></path>
</svg>
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#D5802A" title="#D5802A" class=" w-full h-full block rounded p-1" style="background: #D5802A; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#AA8055" title="#AA8055" class=" w-full h-full block rounded p-1" style="background: #AA8055; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#FFBF80" title="#FFBF80" class=" w-full h-full block rounded p-1" style="background: #FFBF80; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#EABF95" title="#EABF95" class=" w-full h-full block rounded p-1" style="background: #EABF95; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#D4BFAA" title="#D4BFAA" class=" w-full h-full block rounded p-1" style="background: #D4BFAA; border-color: #000; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#800000" title="#800000" class=" w-full h-full block rounded p-1" style="background: #800000; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#6A1515" title="#6A1515" class=" w-full h-full block rounded p-1" style="background: #6A1515; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#552B2B" title="#552B2B" class=" w-full h-full block rounded p-1" style="background: #552B2B; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#FF0000" title="#FF0000" class=" w-full h-full block rounded p-1" style="background: #FF0000; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#D52A2A" title="#D52A2A" class=" w-full h-full block rounded p-1" style="background: #D52A2A; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#AA5555" title="#AA5555" class=" w-full h-full block rounded p-1" style="background: #AA5555; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#FF8080" title="#FF8080" class=" w-full h-full block rounded p-1" style="background: #FF8080; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#EA9595" title="#EA9595" class=" w-full h-full block rounded p-1" style="background: #EA9595; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="9" phx-value-hex="#D4AAAA" title="#D4AAAA" class=" w-full h-full block rounded p-1" style="background: #D4AAAA; border-color: #FFF; ">
</a>
</div>
</div>
</div>
</div>
<style>
.nav-stack-item {
transition-duration: 300ms;
transition-property: transform, opacity;
opacity: 1;
}
.nav-stack-item-0 {}
.nav-stack-item-1 {
transform: translateY(-2.2rem) scale(0.9);
background-color: rgb(17, 22, 30);
}
.nav-stack-item-2 {
transform: translateY(-3.2rem) scale(0.8);
background-color: rgb(6, 7, 10);
}
.nav-stack-item.nav-stack-item--1 {
transform: translateX(400px);
opacity: 0;
pointer-events: none;
}
</style>
<div x-showxxx="navStack.includes('background_gradient_color_end')" class="absolute flex flex-col bg-gray-800 rounded-xl w-full origin-top shadow-xl nav-stack-item ring-1 ring-black/70 h-full pb-4 nav-stack-item--1"
style="transition-property: transform, opacity, margin-left;" x-bind:class="'nav-stack-item-' + navStack.indexOf('background_gradient_color_end')"
x-bind:stylexxx="'transition-duration: 200ms; transition-property: transform, opacity;' + (navStack.includes('background_gradient_color_end') ? 'transform: translateY(' + (-1 * navStack.indexOf('background_gradient_color_end')) + 'rem) scale(' + (1 - (0.1 * navStack.indexOf('background_gradient_color_end'))) + '); ' : 'transform: translateY(500px)')"
stylexxx="transition-duration: 200ms; transition-property: transform, opacity;transform: translateY(500px)">
<div class="p-2 py-3 border-b border-b-gray-900 text-gray-500 flex items-center justify-end">
<div class="flex-grow">Background Gradient End </div>
<div class="p-1">
<a class="flex items-center justify-center rounded-full hover:outline-none hover:bg-gray-600" href="#" x-on:click.prevent="navStack.shift()">
<svg class="h-6 w-6 text-white" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</a>
</div>
</div>
<div class="mb-2 p-4 flex flex-col" data-phx-component="10" id="phx-F9Z_3zU_CwTlCABC-10-0">
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#FFFFFF" title="#FFFFFF" class=" w-full h-full block rounded p-1" style="background: #FFFFFF; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#E8E8E8" title="#E8E8E8" class=" w-full h-full block rounded p-1" style="background: #E8E8E8; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#CCCCCC" title="#CCCCCC" class=" w-full h-full block rounded p-1" style="background: #CCCCCC; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#AAAAAA" title="#AAAAAA" class=" w-full h-full block rounded p-1" style="background: #AAAAAA; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#888888" title="#888888" class=" w-full h-full block rounded p-1" style="background: #888888; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#666666" title="#666666" class=" w-full h-full block rounded p-1" style="background: #666666; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#444444" title="#444444" class=" w-full h-full block rounded p-1" style="background: #444444; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#222222" title="#222222" class=" w-full h-full block rounded p-1" style="background: #222222; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#000000" title="#000000" class=" w-full h-full block rounded p-1" style="background: #000000; border-color: #FFF; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#800040" title="#800040" class=" w-full h-full block rounded p-1" style="background: #800040; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#6A1540" title="#6A1540" class=" w-full h-full block rounded p-1" style="background: #6A1540; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#552B40" title="#552B40" class=" w-full h-full block rounded p-1" style="background: #552B40; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#FF0080" title="#FF0080" class=" w-full h-full block rounded p-1" style="background: #FF0080; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#D52A80" title="#D52A80" class=" w-full h-full block rounded p-1" style="background: #D52A80; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#AA5580" title="#AA5580" class=" w-full h-full block rounded p-1" style="background: #AA5580; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#FF80BF" title="#FF80BF" class=" w-full h-full block rounded p-1" style="background: #FF80BF; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#EA95BF" title="#EA95BF" class=" w-full h-full block rounded p-1" style="background: #EA95BF; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#D4AABF" title="#D4AABF" class=" w-full h-full block rounded p-1" style="background: #D4AABF; border-color: #FFF; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#80007F" title="#80007F" class=" w-full h-full block rounded p-1" style="background: #80007F; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#6A156A" title="#6A156A" class=" w-full h-full block rounded p-1" style="background: #6A156A; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#552B55" title="#552B55" class=" w-full h-full block rounded p-1" style="background: #552B55; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#FF00FF" title="#FF00FF" class=" w-full h-full block rounded p-1" style="background: #FF00FF; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#D52AD5" title="#D52AD5" class=" w-full h-full block rounded p-1" style="background: #D52AD5; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#AA55AA" title="#AA55AA" class=" w-full h-full block rounded p-1" style="background: #AA55AA; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#FF80FF" title="#FF80FF" class=" w-full h-full block rounded p-1" style="background: #FF80FF; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#EA95EA" title="#EA95EA" class=" w-full h-full block rounded p-1" style="background: #EA95EA; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#D4AAD4" title="#D4AAD4" class=" w-full h-full block rounded p-1" style="background: #D4AAD4; border-color: #FFF; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#400080" title="#400080" class=" w-full h-full block rounded p-1" style="background: #400080; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#40156A" title="#40156A" class=" w-full h-full block rounded p-1" style="background: #40156A; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#402B55" title="#402B55" class=" w-full h-full block rounded p-1" style="background: #402B55; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#7F00FF" title="#7F00FF" class=" w-full h-full block rounded p-1" style="background: #7F00FF; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#7F2AD5" title="#7F2AD5" class=" w-full h-full block rounded p-1" style="background: #7F2AD5; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#7F55AA" title="#7F55AA" class=" w-full h-full block rounded p-1" style="background: #7F55AA; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#BF80FF" title="#BF80FF" class=" w-full h-full block rounded p-1" style="background: #BF80FF; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#BF95EA" title="#BF95EA" class=" w-full h-full block rounded p-1" style="background: #BF95EA; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#BFAAD4" title="#BFAAD4" class=" w-full h-full block rounded p-1" style="background: #BFAAD4; border-color: #FFF; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#000080" title="#000080" class=" w-full h-full block rounded p-1" style="background: #000080; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#15156A" title="#15156A" class=" w-full h-full block rounded p-1" style="background: #15156A; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#2B2B55" title="#2B2B55" class=" w-full h-full block rounded p-1" style="background: #2B2B55; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#0000FF" title="#0000FF" class=" w-full h-full block rounded p-1" style="background: #0000FF; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#2A2AD5" title="#2A2AD5" class=" w-full h-full block rounded p-1" style="background: #2A2AD5; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#5555AA" title="#5555AA" class=" w-full h-full block rounded p-1" style="background: #5555AA; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#8080FF" title="#8080FF" class=" w-full h-full block rounded p-1" style="background: #8080FF; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#9595EA" title="#9595EA" class=" w-full h-full block rounded p-1" style="background: #9595EA; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#AAAAD4" title="#AAAAD4" class=" w-full h-full block rounded p-1" style="background: #AAAAD4; border-color: #FFF; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#004080" title="#004080" class=" w-full h-full block rounded p-1" style="background: #004080; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#15406A" title="#15406A" class=" w-full h-full block rounded p-1" style="background: #15406A; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#2B4055" title="#2B4055" class=" w-full h-full block rounded p-1" style="background: #2B4055; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#007FFF" title="#007FFF" class=" w-full h-full block rounded p-1" style="background: #007FFF; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#2A7FD5" title="#2A7FD5" class=" w-full h-full block rounded p-1" style="background: #2A7FD5; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#557FAA" title="#557FAA" class=" w-full h-full block rounded p-1" style="background: #557FAA; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#80BFFF" title="#80BFFF" class=" w-full h-full block rounded p-1" style="background: #80BFFF; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#95BFEA" title="#95BFEA" class=" w-full h-full block rounded p-1" style="background: #95BFEA; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#AABFD4" title="#AABFD4" class=" w-full h-full block rounded p-1" style="background: #AABFD4; border-color: #000; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#007F80" title="#007F80" class=" w-full h-full block rounded p-1" style="background: #007F80; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#156A6A" title="#156A6A" class=" w-full h-full block rounded p-1" style="background: #156A6A; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#2B5555" title="#2B5555" class=" w-full h-full block rounded p-1" style="background: #2B5555; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#00FFFF" title="#00FFFF" class=" w-full h-full block rounded p-1" style="background: #00FFFF; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#2AD5D5" title="#2AD5D5" class=" w-full h-full block rounded p-1" style="background: #2AD5D5; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#55AAAA" title="#55AAAA" class=" w-full h-full block rounded p-1" style="background: #55AAAA; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#80FFFF" title="#80FFFF" class=" w-full h-full block rounded p-1" style="background: #80FFFF; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#95EAEA" title="#95EAEA" class=" w-full h-full block rounded p-1" style="background: #95EAEA; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#AAD4D4" title="#AAD4D4" class=" w-full h-full block rounded p-1" style="background: #AAD4D4; border-color: #000; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#008040" title="#008040" class=" w-full h-full block rounded p-1" style="background: #008040; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#156A40" title="#156A40" class=" w-full h-full block rounded p-1" style="background: #156A40; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#2B5540" title="#2B5540" class=" w-full h-full block rounded p-1" style="background: #2B5540; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#00FF80" title="#00FF80" class=" w-full h-full block rounded p-1" style="background: #00FF80; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#2AD580" title="#2AD580" class=" w-full h-full block rounded p-1" style="background: #2AD580; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#55AA80" title="#55AA80" class=" w-full h-full block rounded p-1" style="background: #55AA80; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#80FFBF" title="#80FFBF" class=" w-full h-full block rounded p-1" style="background: #80FFBF; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#95EABF" title="#95EABF" class=" w-full h-full block rounded p-1" style="background: #95EABF; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#AAD4BF" title="#AAD4BF" class=" w-full h-full block rounded p-1" style="background: #AAD4BF; border-color: #000; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#008000" title="#008000" class=" w-full h-full block rounded p-1" style="background: #008000; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#156A15" title="#156A15" class=" w-full h-full block rounded p-1" style="background: #156A15; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#2B552B" title="#2B552B" class=" w-full h-full block rounded p-1" style="background: #2B552B; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#00FF00" title="#00FF00" class=" w-full h-full block rounded p-1" style="background: #00FF00; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#2AD52A" title="#2AD52A" class=" w-full h-full block rounded p-1" style="background: #2AD52A; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#55AA55" title="#55AA55" class=" w-full h-full block rounded p-1" style="background: #55AA55; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#80FF80" title="#80FF80" class=" w-full h-full block rounded p-1" style="background: #80FF80; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#95EA95" title="#95EA95" class=" w-full h-full block rounded p-1" style="background: #95EA95; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#AAD4AA" title="#AAD4AA" class=" w-full h-full block rounded p-1" style="background: #AAD4AA; border-color: #000; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#408000" title="#408000" class=" w-full h-full block rounded p-1" style="background: #408000; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#406A15" title="#406A15" class=" w-full h-full block rounded p-1" style="background: #406A15; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#40552B" title="#40552B" class=" w-full h-full block rounded p-1" style="background: #40552B; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#80FF00" title="#80FF00" class=" w-full h-full block rounded p-1" style="background: #80FF00; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#80D52A" title="#80D52A" class=" w-full h-full block rounded p-1" style="background: #80D52A; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#80AA55" title="#80AA55" class=" w-full h-full block rounded p-1" style="background: #80AA55; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#BFFF80" title="#BFFF80" class=" w-full h-full block rounded p-1" style="background: #BFFF80; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#BFEA95" title="#BFEA95" class=" w-full h-full block rounded p-1" style="background: #BFEA95; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#BFD4AA" title="#BFD4AA" class=" w-full h-full block rounded p-1" style="background: #BFD4AA; border-color: #000; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#7F8000" title="#7F8000" class=" w-full h-full block rounded p-1" style="background: #7F8000; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#6A6A15" title="#6A6A15" class=" w-full h-full block rounded p-1" style="background: #6A6A15; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#55552B" title="#55552B" class=" w-full h-full block rounded p-1" style="background: #55552B; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#FFFF00" title="#FFFF00" class=" w-full h-full block rounded p-1" style="background: #FFFF00; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#D5D52A" title="#D5D52A" class=" w-full h-full block rounded p-1" style="background: #D5D52A; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#AAAA55" title="#AAAA55" class=" w-full h-full block rounded p-1" style="background: #AAAA55; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#FFFF80" title="#FFFF80" class=" w-full h-full block rounded p-1" style="background: #FFFF80; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#EAEA95" title="#EAEA95" class=" w-full h-full block rounded p-1" style="background: #EAEA95; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#D4D4AA" title="#D4D4AA" class=" w-full h-full block rounded p-1" style="background: #D4D4AA; border-color: #000; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#804000" title="#804000" class=" w-full h-full block rounded p-1" style="background: #804000; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#6A4015" title="#6A4015" class=" w-full h-full block rounded p-1" style="background: #6A4015; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#55402B" title="#55402B" class=" w-full h-full block rounded p-1" style="background: #55402B; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#FF8000" title="#FF8000" class=" w-full h-full block rounded p-1" style="background: #FF8000; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#D5802A" title="#D5802A" class=" w-full h-full block rounded p-1" style="background: #D5802A; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#AA8055" title="#AA8055" class=" w-full h-full block rounded p-1" style="background: #AA8055; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#FFBF80" title="#FFBF80" class=" w-full h-full block rounded p-1" style="background: #FFBF80; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#EABF95" title="#EABF95" class=" w-full h-full block rounded p-1" style="background: #EABF95; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#D4BFAA" title="#D4BFAA" class=" w-full h-full block rounded p-1" style="background: #D4BFAA; border-color: #000; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#800000" title="#800000" class=" w-full h-full block rounded p-1" style="background: #800000; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#6A1515" title="#6A1515" class=" w-full h-full block rounded p-1" style="background: #6A1515; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#552B2B" title="#552B2B" class=" w-full h-full block rounded p-1" style="background: #552B2B; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#FF0000" title="#FF0000" class="border-xx w-full h-full block rounded p-1" style="background: #FF0000; border-color: #FFF; box-shadow: 0 0 0 4px #FF0000, 0 0 0 5px rgba(0,0,0,0.5)">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" style="width:16px; margin:auto; margin-top: 4px;" fill="#FFF">
<path fill-rule="evenodd" d="M0 11l2-2 5 5L18 3l2 2L7 18z"></path>
</svg>
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#D52A2A" title="#D52A2A" class=" w-full h-full block rounded p-1" style="background: #D52A2A; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#AA5555" title="#AA5555" class=" w-full h-full block rounded p-1" style="background: #AA5555; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#FF8080" title="#FF8080" class=" w-full h-full block rounded p-1" style="background: #FF8080; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#EA9595" title="#EA9595" class=" w-full h-full block rounded p-1" style="background: #EA9595; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="10" phx-value-hex="#D4AAAA" title="#D4AAAA" class=" w-full h-full block rounded p-1" style="background: #D4AAAA; border-color: #FFF; ">
</a>
</div>
</div>
</div>
</div>
<style>
.nav-stack-item {
transition-duration: 300ms;
transition-property: transform, opacity;
opacity: 1;
}
.nav-stack-item-0 {}
.nav-stack-item-1 {
transform: translateY(-2.2rem) scale(0.9);
background-color: rgb(17, 22, 30);
}
.nav-stack-item-2 {
transform: translateY(-3.2rem) scale(0.8);
background-color: rgb(6, 7, 10);
}
.nav-stack-item.nav-stack-item--1 {
transform: translateX(400px);
opacity: 0;
pointer-events: none;
}
</style>
<div x-showxxx="navStack.includes('counter_background_solid_color')" class="absolute flex flex-col bg-gray-800 rounded-xl w-full origin-top shadow-xl nav-stack-item ring-1 ring-black/70 h-full pb-4 nav-stack-item--1"
style="transition-property: transform, opacity, margin-left;" x-bind:class="'nav-stack-item-' + navStack.indexOf('counter_background_solid_color')"
x-bind:stylexxx="'transition-duration: 200ms; transition-property: transform, opacity;' + (navStack.includes('counter_background_solid_color') ? 'transform: translateY(' + (-1 * navStack.indexOf('counter_background_solid_color')) + 'rem) scale(' + (1 - (0.1 * navStack.indexOf('counter_background_solid_color'))) + '); ' : 'transform: translateY(500px)')"
stylexxx="transition-duration: 200ms; transition-property: transform, opacity;transform: translateY(500px)">
<div class="p-2 py-3 border-b border-b-gray-900 text-gray-500 flex items-center justify-end">
<div class="flex-grow">Counter Background Color </div>
<div class="p-1">
<a class="flex items-center justify-center rounded-full hover:outline-none hover:bg-gray-600" href="#" x-on:click.prevent="navStack.shift()">
<svg class="h-6 w-6 text-white" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</a>
</div>
</div>
<div class="mb-2 p-4 flex flex-col" data-phx-component="11" id="phx-F9Z_3zU_CwTlCABC-11-0">
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#FFFFFF" title="#FFFFFF" class=" w-full h-full block rounded p-1" style="background: #FFFFFF; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#E8E8E8" title="#E8E8E8" class=" w-full h-full block rounded p-1" style="background: #E8E8E8; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#CCCCCC" title="#CCCCCC" class=" w-full h-full block rounded p-1" style="background: #CCCCCC; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#AAAAAA" title="#AAAAAA" class=" w-full h-full block rounded p-1" style="background: #AAAAAA; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#888888" title="#888888" class=" w-full h-full block rounded p-1" style="background: #888888; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#666666" title="#666666" class=" w-full h-full block rounded p-1" style="background: #666666; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#444444" title="#444444" class=" w-full h-full block rounded p-1" style="background: #444444; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#222222" title="#222222" class="border-xx w-full h-full block rounded p-1" style="background: #222222; border-color: #FFF; box-shadow: 0 0 0 4px #222222, 0 0 0 5px rgba(0,0,0,0.5)">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" style="width:16px; margin:auto; margin-top: 4px;" fill="#FFF">
<path fill-rule="evenodd" d="M0 11l2-2 5 5L18 3l2 2L7 18z"></path>
</svg>
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#000000" title="#000000" class=" w-full h-full block rounded p-1" style="background: #000000; border-color: #FFF; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#800040" title="#800040" class=" w-full h-full block rounded p-1" style="background: #800040; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#6A1540" title="#6A1540" class=" w-full h-full block rounded p-1" style="background: #6A1540; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#552B40" title="#552B40" class=" w-full h-full block rounded p-1" style="background: #552B40; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#FF0080" title="#FF0080" class=" w-full h-full block rounded p-1" style="background: #FF0080; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#D52A80" title="#D52A80" class=" w-full h-full block rounded p-1" style="background: #D52A80; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#AA5580" title="#AA5580" class=" w-full h-full block rounded p-1" style="background: #AA5580; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#FF80BF" title="#FF80BF" class=" w-full h-full block rounded p-1" style="background: #FF80BF; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#EA95BF" title="#EA95BF" class=" w-full h-full block rounded p-1" style="background: #EA95BF; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#D4AABF" title="#D4AABF" class=" w-full h-full block rounded p-1" style="background: #D4AABF; border-color: #FFF; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#80007F" title="#80007F" class=" w-full h-full block rounded p-1" style="background: #80007F; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#6A156A" title="#6A156A" class=" w-full h-full block rounded p-1" style="background: #6A156A; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#552B55" title="#552B55" class=" w-full h-full block rounded p-1" style="background: #552B55; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#FF00FF" title="#FF00FF" class=" w-full h-full block rounded p-1" style="background: #FF00FF; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#D52AD5" title="#D52AD5" class=" w-full h-full block rounded p-1" style="background: #D52AD5; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#AA55AA" title="#AA55AA" class=" w-full h-full block rounded p-1" style="background: #AA55AA; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#FF80FF" title="#FF80FF" class=" w-full h-full block rounded p-1" style="background: #FF80FF; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#EA95EA" title="#EA95EA" class=" w-full h-full block rounded p-1" style="background: #EA95EA; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#D4AAD4" title="#D4AAD4" class=" w-full h-full block rounded p-1" style="background: #D4AAD4; border-color: #FFF; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#400080" title="#400080" class=" w-full h-full block rounded p-1" style="background: #400080; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#40156A" title="#40156A" class=" w-full h-full block rounded p-1" style="background: #40156A; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#402B55" title="#402B55" class=" w-full h-full block rounded p-1" style="background: #402B55; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#7F00FF" title="#7F00FF" class=" w-full h-full block rounded p-1" style="background: #7F00FF; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#7F2AD5" title="#7F2AD5" class=" w-full h-full block rounded p-1" style="background: #7F2AD5; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#7F55AA" title="#7F55AA" class=" w-full h-full block rounded p-1" style="background: #7F55AA; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#BF80FF" title="#BF80FF" class=" w-full h-full block rounded p-1" style="background: #BF80FF; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#BF95EA" title="#BF95EA" class=" w-full h-full block rounded p-1" style="background: #BF95EA; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#BFAAD4" title="#BFAAD4" class=" w-full h-full block rounded p-1" style="background: #BFAAD4; border-color: #FFF; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#000080" title="#000080" class=" w-full h-full block rounded p-1" style="background: #000080; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#15156A" title="#15156A" class=" w-full h-full block rounded p-1" style="background: #15156A; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#2B2B55" title="#2B2B55" class=" w-full h-full block rounded p-1" style="background: #2B2B55; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#0000FF" title="#0000FF" class=" w-full h-full block rounded p-1" style="background: #0000FF; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#2A2AD5" title="#2A2AD5" class=" w-full h-full block rounded p-1" style="background: #2A2AD5; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#5555AA" title="#5555AA" class=" w-full h-full block rounded p-1" style="background: #5555AA; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#8080FF" title="#8080FF" class=" w-full h-full block rounded p-1" style="background: #8080FF; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#9595EA" title="#9595EA" class=" w-full h-full block rounded p-1" style="background: #9595EA; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#AAAAD4" title="#AAAAD4" class=" w-full h-full block rounded p-1" style="background: #AAAAD4; border-color: #FFF; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#004080" title="#004080" class=" w-full h-full block rounded p-1" style="background: #004080; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#15406A" title="#15406A" class=" w-full h-full block rounded p-1" style="background: #15406A; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#2B4055" title="#2B4055" class=" w-full h-full block rounded p-1" style="background: #2B4055; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#007FFF" title="#007FFF" class=" w-full h-full block rounded p-1" style="background: #007FFF; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#2A7FD5" title="#2A7FD5" class=" w-full h-full block rounded p-1" style="background: #2A7FD5; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#557FAA" title="#557FAA" class=" w-full h-full block rounded p-1" style="background: #557FAA; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#80BFFF" title="#80BFFF" class=" w-full h-full block rounded p-1" style="background: #80BFFF; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#95BFEA" title="#95BFEA" class=" w-full h-full block rounded p-1" style="background: #95BFEA; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#AABFD4" title="#AABFD4" class=" w-full h-full block rounded p-1" style="background: #AABFD4; border-color: #000; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#007F80" title="#007F80" class=" w-full h-full block rounded p-1" style="background: #007F80; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#156A6A" title="#156A6A" class=" w-full h-full block rounded p-1" style="background: #156A6A; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#2B5555" title="#2B5555" class=" w-full h-full block rounded p-1" style="background: #2B5555; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#00FFFF" title="#00FFFF" class=" w-full h-full block rounded p-1" style="background: #00FFFF; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#2AD5D5" title="#2AD5D5" class=" w-full h-full block rounded p-1" style="background: #2AD5D5; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#55AAAA" title="#55AAAA" class=" w-full h-full block rounded p-1" style="background: #55AAAA; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#80FFFF" title="#80FFFF" class=" w-full h-full block rounded p-1" style="background: #80FFFF; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#95EAEA" title="#95EAEA" class=" w-full h-full block rounded p-1" style="background: #95EAEA; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#AAD4D4" title="#AAD4D4" class=" w-full h-full block rounded p-1" style="background: #AAD4D4; border-color: #000; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#008040" title="#008040" class=" w-full h-full block rounded p-1" style="background: #008040; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#156A40" title="#156A40" class=" w-full h-full block rounded p-1" style="background: #156A40; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#2B5540" title="#2B5540" class=" w-full h-full block rounded p-1" style="background: #2B5540; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#00FF80" title="#00FF80" class=" w-full h-full block rounded p-1" style="background: #00FF80; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#2AD580" title="#2AD580" class=" w-full h-full block rounded p-1" style="background: #2AD580; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#55AA80" title="#55AA80" class=" w-full h-full block rounded p-1" style="background: #55AA80; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#80FFBF" title="#80FFBF" class=" w-full h-full block rounded p-1" style="background: #80FFBF; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#95EABF" title="#95EABF" class=" w-full h-full block rounded p-1" style="background: #95EABF; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#AAD4BF" title="#AAD4BF" class=" w-full h-full block rounded p-1" style="background: #AAD4BF; border-color: #000; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#008000" title="#008000" class=" w-full h-full block rounded p-1" style="background: #008000; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#156A15" title="#156A15" class=" w-full h-full block rounded p-1" style="background: #156A15; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#2B552B" title="#2B552B" class=" w-full h-full block rounded p-1" style="background: #2B552B; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#00FF00" title="#00FF00" class=" w-full h-full block rounded p-1" style="background: #00FF00; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#2AD52A" title="#2AD52A" class=" w-full h-full block rounded p-1" style="background: #2AD52A; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#55AA55" title="#55AA55" class=" w-full h-full block rounded p-1" style="background: #55AA55; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#80FF80" title="#80FF80" class=" w-full h-full block rounded p-1" style="background: #80FF80; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#95EA95" title="#95EA95" class=" w-full h-full block rounded p-1" style="background: #95EA95; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#AAD4AA" title="#AAD4AA" class=" w-full h-full block rounded p-1" style="background: #AAD4AA; border-color: #000; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#408000" title="#408000" class=" w-full h-full block rounded p-1" style="background: #408000; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#406A15" title="#406A15" class=" w-full h-full block rounded p-1" style="background: #406A15; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#40552B" title="#40552B" class=" w-full h-full block rounded p-1" style="background: #40552B; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#80FF00" title="#80FF00" class=" w-full h-full block rounded p-1" style="background: #80FF00; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#80D52A" title="#80D52A" class=" w-full h-full block rounded p-1" style="background: #80D52A; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#80AA55" title="#80AA55" class=" w-full h-full block rounded p-1" style="background: #80AA55; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#BFFF80" title="#BFFF80" class=" w-full h-full block rounded p-1" style="background: #BFFF80; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#BFEA95" title="#BFEA95" class=" w-full h-full block rounded p-1" style="background: #BFEA95; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#BFD4AA" title="#BFD4AA" class=" w-full h-full block rounded p-1" style="background: #BFD4AA; border-color: #000; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#7F8000" title="#7F8000" class=" w-full h-full block rounded p-1" style="background: #7F8000; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#6A6A15" title="#6A6A15" class=" w-full h-full block rounded p-1" style="background: #6A6A15; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#55552B" title="#55552B" class=" w-full h-full block rounded p-1" style="background: #55552B; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#FFFF00" title="#FFFF00" class=" w-full h-full block rounded p-1" style="background: #FFFF00; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#D5D52A" title="#D5D52A" class=" w-full h-full block rounded p-1" style="background: #D5D52A; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#AAAA55" title="#AAAA55" class=" w-full h-full block rounded p-1" style="background: #AAAA55; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#FFFF80" title="#FFFF80" class=" w-full h-full block rounded p-1" style="background: #FFFF80; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#EAEA95" title="#EAEA95" class=" w-full h-full block rounded p-1" style="background: #EAEA95; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#D4D4AA" title="#D4D4AA" class=" w-full h-full block rounded p-1" style="background: #D4D4AA; border-color: #000; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#804000" title="#804000" class=" w-full h-full block rounded p-1" style="background: #804000; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#6A4015" title="#6A4015" class=" w-full h-full block rounded p-1" style="background: #6A4015; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#55402B" title="#55402B" class=" w-full h-full block rounded p-1" style="background: #55402B; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#FF8000" title="#FF8000" class=" w-full h-full block rounded p-1" style="background: #FF8000; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#D5802A" title="#D5802A" class=" w-full h-full block rounded p-1" style="background: #D5802A; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#AA8055" title="#AA8055" class=" w-full h-full block rounded p-1" style="background: #AA8055; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#FFBF80" title="#FFBF80" class=" w-full h-full block rounded p-1" style="background: #FFBF80; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#EABF95" title="#EABF95" class=" w-full h-full block rounded p-1" style="background: #EABF95; border-color: #000; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#D4BFAA" title="#D4BFAA" class=" w-full h-full block rounded p-1" style="background: #D4BFAA; border-color: #000; ">
</a>
</div>
</div>
<div class=" flex justify-between">
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#800000" title="#800000" class=" w-full h-full block rounded p-1" style="background: #800000; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#6A1515" title="#6A1515" class=" w-full h-full block rounded p-1" style="background: #6A1515; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#552B2B" title="#552B2B" class=" w-full h-full block rounded p-1" style="background: #552B2B; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#FF0000" title="#FF0000" class=" w-full h-full block rounded p-1" style="background: #FF0000; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#D52A2A" title="#D52A2A" class=" w-full h-full block rounded p-1" style="background: #D52A2A; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#AA5555" title="#AA5555" class=" w-full h-full block rounded p-1" style="background: #AA5555; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#FF8080" title="#FF8080" class=" w-full h-full block rounded p-1" style="background: #FF8080; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#EA9595" title="#EA9595" class=" w-full h-full block rounded p-1" style="background: #EA9595; border-color: #FFF; ">
</a>
</div>
<div style="" class="flex-1 p-1 h-10">
<a href="#" phx-click="color-selected" phx-target="11" phx-value-hex="#D4AAAA" title="#D4AAAA" class=" w-full h-full block rounded p-1" style="background: #D4AAAA; border-color: #FFF; ">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex-shrink-0 flex bg-gray-700 p-4 border-t border-gray-600 shadow hidden">
<span class="flex-shrink-0 w-full group block">
<span class="block w-full rounded-md shadow-sm mt-3">
<button type="submit"
class=" shadow-md hover:shadow-lg w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-cdt-600 hover:bg-cdt-600 focus:outline-none focus:border-cdt-700 focus:shadow-outline-cdt active:bg-cdt-700 transition duration-150 ease-in-out">
Save </button>
</span>
</span>
</div>
</form>Text Content
Website Countdowns Countdown Pages Email Countdowns Timer Pricing Website Countdowns Countdown Pages Email Countdowns Timer Pricing 🚀 This is the new countdown experience we're working on! Try it out below or go back to the old one → Dismiss CREATE A COUNTDOWN CLOCK Instantly create a beautiful, animated countdown clock, to share or embed in your website. Count down to a date with your own unique countdown timer. General Settings Countdown to Time 12 AM1 AM2 AM3 AM4 AM5 AM6 AM7 AM8 AM9 AM10 AM11 AM12 PM1 PM2 PM3 PM4 PM5 PM6 PM7 PM8 PM9 PM10 PM11 PM : 000102030405060708091011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859 Timezone (GMT-11:00) American Samoa(GMT-11:00) International Date Line West(GMT-11:00) Midway Island(GMT-10:00) Hawaii(GMT-09:00) Alaska(GMT-08:00) Pacific Time (US & Canada)(GMT-08:00) Tijuana(GMT-07:00) Arizona(GMT-07:00) Mazatlan(GMT-07:00) Mountain Time (US & Canada)(GMT-06:00) Central America(GMT-06:00) Central Time (US & Canada)(GMT-06:00) Chihuahua(GMT-06:00) Guadalajara(GMT-06:00) Mexico City(GMT-06:00) Monterrey(GMT-06:00) Saskatchewan(GMT-05:00) Bogota(GMT-05:00) Eastern Time (US & Canada)(GMT-05:00) Indiana (East)(GMT-05:00) Lima(GMT-05:00) Quito(GMT-04:00) Atlantic Time (Canada)(GMT-04:00) Caracas(GMT-04:00) Georgetown(GMT-04:00) La Paz(GMT-04:00) Santiago(GMT-03:30) Newfoundland(GMT-03:00) Brasilia(GMT-03:00) Buenos Aires(GMT-03:00) Montevideo(GMT-02:00) Greenland(GMT-02:00) Mid-Atlantic(GMT-01:00) Azores(GMT-01:00) Cape Verde Is.(GMT+00:00) Edinburgh(GMT+00:00) Lisbon(GMT+00:00) London(GMT+00:00) Monrovia(GMT+00:00) UTC(GMT+01:00) Amsterdam(GMT+01:00) Belgrade(GMT+01:00) Berlin(GMT+01:00) Bern(GMT+01:00) Bratislava(GMT+01:00) Brussels(GMT+01:00) Budapest(GMT+01:00) Casablanca(GMT+01:00) Copenhagen(GMT+01:00) Dublin(GMT+01:00) Ljubljana(GMT+01:00) Madrid(GMT+01:00) Paris(GMT+01:00) Prague(GMT+01:00) Rome(GMT+01:00) Sarajevo(GMT+01:00) Skopje(GMT+01:00) Stockholm(GMT+01:00) Vienna(GMT+01:00) Warsaw(GMT+01:00) West Central Africa(GMT+01:00) Zagreb(GMT+02:00) Athens(GMT+02:00) Bucharest(GMT+02:00) Cairo(GMT+02:00) Harare(GMT+02:00) Helsinki(GMT+02:00) Jerusalem(GMT+02:00) Kaliningrad(GMT+02:00) Kyiv(GMT+02:00) Pretoria(GMT+02:00) Riga(GMT+02:00) Sofia(GMT+02:00) Tallinn(GMT+02:00) Vilnius(GMT+03:00) Baghdad(GMT+03:00) Istanbul(GMT+03:00) Kuwait(GMT+03:00) Minsk(GMT+03:00) Moscow(GMT+03:00) Nairobi(GMT+03:00) Riyadh(GMT+03:00) St. Petersburg(GMT+03:00) Volgograd(GMT+03:30) Tehran(GMT+04:00) Abu Dhabi(GMT+04:00) Baku(GMT+04:00) Muscat(GMT+04:00) Samara(GMT+04:00) Tbilisi(GMT+04:00) Yerevan(GMT+04:30) Kabul(GMT+05:00) Almaty(GMT+05:00) Ekaterinburg(GMT+05:00) Islamabad(GMT+05:00) Karachi(GMT+05:00) Tashkent(GMT+05:30) Chennai(GMT+05:30) Kolkata(GMT+05:30) Mumbai(GMT+05:30) New Delhi(GMT+05:30) Sri Jayawardenepura(GMT+05:45) Kathmandu(GMT+06:00) Astana(GMT+06:00) Dhaka(GMT+06:00) Urumqi(GMT+06:30) Rangoon(GMT+07:00) Bangkok(GMT+07:00) Hanoi(GMT+07:00) Jakarta(GMT+07:00) Krasnoyarsk(GMT+07:00) Novosibirsk(GMT+08:00) Beijing(GMT+08:00) Chongqing(GMT+08:00) Hong Kong(GMT+08:00) Irkutsk(GMT+08:00) Kuala Lumpur(GMT+08:00) Perth(GMT+08:00) Singapore(GMT+08:00) Taipei(GMT+08:00) Ulaanbaatar(GMT+09:00) Osaka(GMT+09:00) Sapporo(GMT+09:00) Seoul(GMT+09:00) Tokyo(GMT+09:00) Yakutsk(GMT+09:30) Adelaide(GMT+09:30) Darwin(GMT+10:00) Brisbane(GMT+10:00) Canberra(GMT+10:00) Guam(GMT+10:00) Hobart(GMT+10:00) Melbourne(GMT+10:00) Port Moresby(GMT+10:00) Sydney(GMT+10:00) Vladivostok(GMT+11:00) Magadan(GMT+11:00) New Caledonia(GMT+11:00) Solomon Is.(GMT+11:00) Srednekolymsk(GMT+12:00) Auckland(GMT+12:00) Fiji(GMT+12:00) Kamchatka(GMT+12:00) Marshall Is.(GMT+12:00) Wellington(GMT+12:45) Chatham Is.(GMT+13:00) Nuku'alofa(GMT+13:00) Samoa(GMT+13:00) Tokelau Is. Display date on countdown Display title on countdown Customize background Customize text Embed location Within page contentFixed at top of pageFixed at bottom of pageFull page Background Settings Background type Gradient Solid color Color  Color 1  Color 2  Corner radius 5px Counter background format NoneEach digitEach group of digitsAll Counter background color  Text Settings Text Color  Title color  Digit color  Seperator color  Unit labels  Subtitle  Font family Alignment LeftCenterRight Font Family Text Color Background Color Background Gradient Begin Background Gradient End Counter Background Color Save Your Beautiful Website Copy this into your website: View countdown in new page <iframe src="https://countingdownto.com/w4/g_iQXJwz" frameborder="0" style="width:100%;height:100%;aspect-ratio:16/4;background-color:#800040;border-radius:5px;"></iframe> For help embedding your countdown click here. This countdown and will display with a watermark. To remove the watermark activate your account at any time. Copy this into your website: View this countdown in its own shareable page View in new page <iframe src="https://countingdownto.com/w4/g_iQXJwz" frameborder="0" style="width:100%;height:100%;aspect-ratio:16/4;background-color:#800040;border-radius:5px;"></iframe> For help embedding your countdown click here. This countdown and will display with a watermark. To remove the watermark activate your account at any time. FEATURES AND BENEFITS Create excitement, focus and urgency Anticipation is contagious! If you're excited (or nervous) about an upcoming event, odds are, you're not the only one. Why not use our simple but powerful countdown generator to create a countdown clock, displaying the days, hours, minutes and seconds until the date of the event. You can share your newly created countdown, so it becomes a focal point for everyone involved. We've seen countdown timers used to generate buzz and anticipation around a party or vacation. Teams use them to stay on track and focussed, by ensuring team members have a sense of the time remaining until a critical milestone date. Event promoters and online marketers have reported significant boosts in conversion rates by using an online contdown timer to create urgency and drive action. Even NASA, uses a giant outdoor countdown clock to build anticipation and focus. Promote online sharing Countdowns are "sharing magnets"! A countdown to a date that means something to you and your network of friends or customers is something you want to share, right? Well guess what, so do your friends, and their friends. We run a relatively small website but we see 200-500 social shares per day of countdowns that are displayed on our website. That does not including the thousands of our countdowns that have been shared around and embedded on other websites. Recently a Seattle household made the news and went "viral" on Instagram with a simple display of the number of days remaining in Trump's current presidency term. Tom Petty fans were intruiged by a countdown that appeared on the official Tom Petty website in early 2018. The hugely popular video game, Fortnite received a huge amount of attention and press coverage after introducing mysterious, in-game counters, leaving fans fascinated as to what they were counting down to. Increase conversion rates using the magic of urgency As an online marketer or e-commerce company what's your worst enemy? For many it's customer procrastination. They want what you offer but they can always buy it later. Maybe they'll wait until they have more information, more money or more time. There are a million reasons to "do it later". Dominant and successful online businesses such as Ebay, Amazon and Booking.com make extensive use of urgency as a means to drive action and increase conversions. You can barely visit a successful online store, or ticketing/booking website without being exposed to urgency or scarcity-based marketing tactics. "Less than 5 tickets left at this price", "Hurry, only 3 days until sale ends" or "Order by 5pm to receive next day shipping". These companies are ruthlessly analytical and their tactics are driven by data and experimentation. They use these tactics because they have proven to be effective. Countdown timers are a crucial tool in your urgency-marketing toolbox. Busy? It won't take a moment with our simple but powerful countdown maker! I made this quick video to show how simple it is to create a countdown and embed in it a blog or website. Mobile-friendly countdown clocks Mobile web browsing has exploded - if you run a website you may find that more than half your visitors are using smartphones or tablets. Our countdown clocks use mobile friendly code and run very little code on the user's device meaning they won't slow down or otherwise interfere with the user experience. We go beyond mobile-friendly by auto-generating a double-resolution version of your countdown to take advantage of Retina®, and other high-resolution displays that are common on many of today's most popular devices. Security for you and your visitors You wouldn't put just any code into your website. Invalid or incompatible code can break the layout of your web page or display error messages to your visitors. Worse than that, malicious JavaScript code can jeopordize your visitor's security and privacy. We have two layers of protection built in. Firstly, the code we issue is contained in an iframe, the browser's same-origin policy prevents the iframe content from accessing code in your page, effectivly isolating our code from your website's code. Secondly we serve all our countdowns over an encrypted connection, this prevents hackers from altering the countdown before it loads into your page. Fast page loads Page load time is an important factor in visitor satisfaction as well as in search engine ranking algorithms. Be careful when using third party widgets as some of them contain blocking JavaScript code or large files which can negatively impact page load times. Because our countdowns are pre-rendered the code download is very small. We also use edge caching strategies to deliver your countdowns from the location nearest to each user. When we do need to load content from the main server we use sophisticated in-memory caching to pull the data directly from RAM which is faster than reading from a hard disc. FOOTER UPCOMING EVENTS * Countdown to Superbowl LIII * Christmas Countdown Timer * NFL Preseason Countdown * NFL Regular Season Countdown INFORMATION * Pricing * FAQ * About * Countdown Clocks for Event Promotion * Urgency and Scarcity Marketing * Gaming Countdowns * Vacation Countdowns * School Countdowns SUPPORT * Help * Contact us * How to embed countdown widgets * Create a count-up clock * Free countdowns * Security * About LEGAL * Privacy policy * Terms of use CountingDownTo - The Ultimate Countdown Clock Generator - © 2011 to 2024 JanuaryFebruaryMarchAprilMayJuneJulyAugustSeptemberOctoberNovemberDecember SunMonTueWedThuFriSat 262728293031123456789101112131415161718192021222324252627282930123456