PageSourceSearch

https://makemeacocktail.com/login

html makemeacocktail.com collected 2026-10-02 02:16:53 UTC 179,407 bytes, 2,492 lines download raw bytes

1<!doctype html>
2<html lang="en">
3<head>
4    <link rel="preconnect" href="https://mmacv5generalimages.s3.amazonaws.com" crossorigin>
5
6<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
7<link rel="icon" href="/logo.svg" type="image/svg+xml">
8
9<!-- Manifest.json  -->
10<link href="/manifest.json" rel="manifest">
11
12<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
13<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png" />
14<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png" />
15<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png" />
16<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png" />
17<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png" />
18<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png" />
19<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png" />
20<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png" />
21
22<meta charset="utf-8">
23<meta name="viewport" content="width=device-width, initial-scale=1">
24<title>Login - Make Me a Cocktail</title>
25<meta name="csrf-token" content="BB3gJTOncUbhXPfaUezxwvBkBEvPDgwCCGzfYBGT">
26<meta property="og:type" content="website">
27<meta property="og:url" content="https://makemeacocktail.com/login">
28<meta property="og:site_name" content="Make Me a Cocktail">
29<meta property="og:locale" content="en_US">
30<meta property="og:locale:alternate" content="de_DE">
31<meta property="og:locale:alternate" content="es_ES">
32<meta property="og:locale:alternate" content="fr_FR">
33<meta property="og:locale:alternate" content="pt_PT">
34<meta property="og:locale:alternate" content="pt_BR">
35<meta property="og:locale:alternate" content="it_IT">
36<meta property="og:locale:alternate" content="nl_NL">
37<meta name="twitter:card" content="summary">
38<meta name="twitter:site" content="Make Me a Cocktail">
39<meta name="twitter:creator" content="@MakeMeACocktail">
40<meta property="og:image" content="https://makemeacocktail.com/img/page-heros/cocktails.avif">
41<meta property="og:title" content="Login - Make Me a Cocktail">
42<meta property="og:description" content="Login to Make Me a Cocktail. Discover a world of cocktails where we curate and collate the best cocktails. Filter by ingredient type, what we're currently drinking and more.">
43<meta name="twitter:image" content="https://makemeacocktail.com/img/page-heros/cocktails.avif">
44<meta name="twitter:image:alt" content="Picture of some cocktails">
45<meta name="twitter:title" content="Login - Make Me a Cocktail">
46<meta name="twitter:description" content="Login to Make Me a Cocktail. Discover a world of cocktails where we curate and collate the best cocktails. Filter by ingredient type, what we're currently drinking and more.">
47<meta name="description" content="Login to Make Me a Cocktail. Discover a world of cocktails where we curate and collate the best cocktails. Filter by ingredient type, what we&#039;re currently drinking and more.">
48<meta name="recommendation-events-endpoint" content="https://makemeacocktail.com/__events/recommendations">
49
50
51    <link rel="alternate" hreflang="en" href="https://makemeacocktail.com/en/login" />
52    <link rel="alternate" hreflang="de" href="https://makemeacocktail.com/de/login" />
53    <link rel="alternate" hreflang="es" href="https://makemeacocktail.com/es/login" />
54    <link rel="alternate" hreflang="fr" href="https://makemeacocktail.com/fr/login" />
55    <link rel="alternate" hreflang="pt" href="https://makemeacocktail.com/pt/login" />
56    <link rel="alternate" hreflang="pt-BR" href="https://makemeacocktail.com/pt-BR/login" />
57    <link rel="alternate" hreflang="it" href="https://makemeacocktail.com/it/login" />
58    <link rel="alternate" hreflang="nl" href="https://makemeacocktail.com/nl/login" />
59<link rel="alternate" hreflang="x-default" href="https://makemeacocktail.com/en/login" />
60
61<script>
62    console.log(localStorage.theme);
63    if (localStorage.theme === 'dark') {
64        document.documentElement.classList.add('dark')
65    } else {
66        document.documentElement.classList.remove('dark')
67    }
68</script>
68
69
70<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js"></script>
70
71<link rel="preload" as="style" href="https://makemeacocktail.com/build/assets/app-eBcNme82.css" /><link rel="stylesheet" href="https://makemeacocktail.com/build/assets/app-eBcNme82.css" data-navigate-track="reload" /><link rel="modulepreload" as="script" href="https://makemeacocktail.com/build/assets/app-CJMZeGRN.js" />
71<script type="module" src="https://makemeacocktail.com/build/assets/app-CJMZeGRN.js" data-navigate-track="reload"></script>
71
72
73
74<script src="https://cdn.usefathom.com/script.js" data-site="LSOPRZLU" defer></script>
74
75
76<script type="application/ld+json">
77    {
78      "@context": "https://schema.org",
79      "@type": "WebSite",
80      "url": "https://makemeacocktail.com/en",
81      "inLanguage": "en",
82      "potentialAction": {
83        "@type": "SearchAction",
84        "target": {
85          "@type": "EntryPoint",
86          "urlTemplate": "https://makemeacocktail.com/en/search/cocktails?s={search_term_string}"
87        },
88        "query-input": "required name=search_term_string"
89      }
90    }
91</script>
91
92
93
94<!-- Livewire Styles --><style >[wire\:loading][wire\:loading], [wire\:loading\.delay][wire\:loading\.delay], [wire\:loading\.list-item][wire\:loading\.list-item], [wire\:loading\.inline-block][wire\:loading\.inline-block], [wire\:loading\.inline][wire\:loading\.inline], [wire\:loading\.block][wire\:loading\.block], [wire\:loading\.flex][wire\:loading\.flex], [wire\:loading\.table][wire\:loading\.table], [wire\:loading\.grid][wire\:loading\.grid], [wire\:loading\.inline-flex][wire\:loading\.inline-flex] {display: none;}[wire\:loading\.delay\.none][wire\:loading\.delay\.none], [wire\:loading\.delay\.shortest][wire\:loading\.delay\.shortest], [wire\:loading\.delay\.shorter][wire\:loading\.delay\.shorter], [wire\:loading\.delay\.short][wire\:loading\.delay\.short], [wire\:loading\.delay\.default][wire\:loading\.delay\.default], [wire\:loading\.delay\.long][wire\:loading\.delay\.long], [wire\:loading\.delay\.longer][wire\:loading\.delay\.longer], [wire\:loading\.delay\.longest][wire\:loading\.delay\.longest] {display: none;}[wire\:offline][wire\:offline] {display: none;}[wire\:dirty]:not(textarea):not(input):not(select) {display: none;}:root {--livewire-progress-bar-color: #2299dd;}[x-cloak] {display: none !important;}[wire\:cloak] {display: none !important;}dialog#livewire-error::backdrop {background-color: rgba(0, 0, 0, .6);}</style>
95</head>
96<base href="/" />
97<body class="bg-linear-to-r text-gray-800 dark:text-blue-50
98                    bg-black
99            "
100      x-data="page()"
101      x-on:toggle-key-stroke.window="darkLightModeTooltip = false; toggleDarkLightMode()"
102>
103
104<ui-toast-group x-data x-on:toast-show.document="$el.showToast($event.detail)" popover="manual" position="bottom end"  wire:ignore>
105    <ui-toast x-data x-on:toast-show.document="! $el.closest('ui-toast-group') && $el.showToast($event.detail)" popover="manual" position="bottom end" wire:ignore>
106    <template>
107        <div class="max-w-sm in-[ui-toast-group]:max-w-auto in-[ui-toast-group]:w-xs sm:in-[ui-toast-group]:w-sm" data-variant="" data-flux-toast-dialog>
108            <div class="p-2 flex rounded-xl shadow-lg bg-white border border-zinc-200 border-b-zinc-300/80 dark:bg-zinc-700 dark:border-zinc-600">
109                <div class="flex-1 flex items-start gap-4 overflow-hidden">
110                    <div class="flex-1 py-1.5 ps-2.5 flex gap-2">
111                        
112                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="hidden [[data-flux-toast-dialog][data-variant=success]_&]:block shrink-0 mt-0.5 size-4 text-lime-600 dark:text-lime-400">
113                            <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm3.844-8.791a.75.75 0 0 0-1.188-.918l-3.7 4.79-1.649-1.833a.75.75 0 1 0-1.114 1.004l2.25 2.5a.75.75 0 0 0 1.15-.043l4.25-5.5Z" clip-rule="evenodd" />
114                        </svg>
115
116                        
117                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="hidden [[data-flux-toast-dialog][data-variant=warning]_&]:block shrink-0 mt-0.5 size-4 text-amber-500 dark:text-amber-400">
118                            <path fill-rule="evenodd" d="M6.701 2.25c.577-1 2.02-1 2.598 0l5.196 9a1.5 1.5 0 0 1-1.299 2.25H2.804a1.5 1.5 0 0 1-1.3-2.25l5.197-9ZM8 4a.75.75 0 0 1 .75.75v3a.75.75 0 1 1-1.5 0v-3A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd" />
119                        </svg>
120
121                        
122                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="hidden [[data-flux-toast-dialog][data-variant=info]_&]:block shrink-0 mt-0.5 size-4 text-cyan-500 dark:text-cyan-400">
123                            <path fill-rule="evenodd" d="M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0ZM9 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM6.75 8a.75.75 0 0 0 0 1.5h.75v1.75a.75.75 0 0 0 1.5 0v-2.5A.75.75 0 0 0 8.25 8h-1.5Z" clip-rule="evenodd" />
124                        </svg>
125
126                        
127                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="hidden [[data-flux-toast-dialog][data-variant=danger]_&]:block shrink-0 mt-0.5 size-4 text-rose-500 dark:text-rose-400">
128                            <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14ZM8 4a.75.75 0 0 1 .75.75v3a.75.75 0 0 1-1.5 0v-3A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd" />
129                        </svg>
130
131                        <div>
132                            
133                            <div class="font-medium text-sm text-zinc-800 dark:text-white [&:not(:empty)+div]:font-normal [&:not(:empty)+div]:text-zinc-500 [&:not(:empty)+div]:dark:text-zinc-300 [&:not(:empty)]:pb-2"><slot name="heading"></slot></div>
134
135                            
136                            <div class="font-medium text-sm text-zinc-800 dark:text-white"><slot name="text"></slot></div>
137
138                            
139                            <template name="link">
140                                <a class="block mt-2 font-medium text-sm text-[var(--color-accent-content)] decoration-[color-mix(in_oklab,var(--color-accent-content),transparent_80%)] underline underline-offset-[6px] hover:decoration-current"><slot name="text"></slot></a>
141                            </template>
142                        </div>
143                    </div>
144
145                    
146                    <ui-close class="flex items-center">
147                        <button type="button" class="inline-flex items-center font-medium justify-center gap-2 truncate disabled:opacity-50 dark:disabled:opacity-75 disabled:cursor-default h-8 text-sm rounded-md w-8 bg-transparent hover:bg-zinc-800/5 dark:hover:bg-white/15 text-zinc-400 hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-white" as="button">
148                            <div>
149                                <svg class="[:where(&)]:size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
150                                    <path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"></path>
151                                </svg>
152                            </div>
153                        </button>
154                    </ui-close>
155                </div>
156            </div>
157        </div>
158    </template>
159</ui-toast>
160</ui-toast-group>
161
162
163<div wire:key="lw-551991559-0" wire:snapshot="{&quot;data&quot;:{&quot;showModal&quot;:false,&quot;query&quot;:&quot;&quot;,&quot;cocktailContextId&quot;:null},&quot;memo&quot;:{&quot;id&quot;:&quot;XLkBXtNXBLcUrzDoifhu&quot;,&quot;name&quot;:&quot;command-palette&quot;,&quot;path&quot;:&quot;login&quot;,&quot;method&quot;:&quot;GET&quot;,&quot;release&quot;:&quot;a-a-a&quot;,&quot;children&quot;:[],&quot;scripts&quot;:[],&quot;assets&quot;:[],&quot;errors&quot;:[],&quot;locale&quot;:&quot;en&quot;,&quot;islands&quot;:[]},&quot;checksum&quot;:&quot;1bba10d2879a8dcbeb9e03ac7c0853ffba5bd8d404a1a02022716365c2a84040&quot;}" wire:effects="{&quot;partials&quot;:[],&quot;listeners&quot;:[&quot;open-command-palette&quot;,&quot;set-cocktail-context&quot;,&quot;clear-cocktail-context&quot;]}" wire:id="XLkBXtNXBLcUrzDoifhu" wire:name="command-palette"
164    x-data
165    x-on:keydown.cmd.k.window.prevent="Livewire.dispatch('open-command-palette')"
166    x-on:keydown.ctrl.k.window.prevent="Livewire.dispatch('open-command-palette')"
167>
168    <ui-modal wire:model.self="showModal" data-flux-modal>
169    
170    <dialog
171        wire:ignore.self 
172        class="bg-transparent w-full max-w-3xl my-[12vh] max-h-screen overflow-y-hidden"
173                                        x-data="fluxModal(null, 'XLkBXtNXBLcUrzDoifhu')"
174                x-on:modal-show.document="handleShow($event)"
175        x-on:modal-close.document="handleClose($event)"
176    >
177                    <ui-select clear="action" class="w-full block rounded-xl overflow-hidden shadow-xs border border-zinc-200 dark:border-zinc-600 border-none shadow-lg inline-flex flex-col max-h-[76vh] bg-white dark:bg-zinc-800 rounded-xl" data-flux-command>
178    <div class="relative" data-flux-command-input>
179    <div class="absolute top-0 bottom-0 flex items-center justify-center text-xs text-zinc-400 ps-3.5 start-0 [&:has(+input:focus)]:text-zinc-800 dark:[&:has(+input:focus)]:text-zinc-400">
180                    <svg class="shrink-0 [:where(&amp;)]:size-5" data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
181  <path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9Z" clip-rule="evenodd"/>
182</svg>
183
184                    </div>
185
186    <input type="text" class="h-12 w-full flex items-center px-3 py-2 font-medium text-base sm:text-sm text-zinc-800 dark:text-white ps-11 pe-11 outline-hidden border-b border-zinc-200 dark:border-zinc-600 bg-white dark:bg-zinc-700 border-t-0 border-s-0 border-e-0 focus:ring-0 focus:border-zinc-200 dark:focus:border-zinc-600" wire:model.live.debounce.300ms="query" placeholder="Search cocktails, ingredients, pages..." autofocus="autofocus" />
187
188            <div class="absolute top-0 bottom-0 flex items-center justify-center pe-2 end-0">
189            <ui-close>
190                <button type="button" class="relative items-center font-medium justify-center whitespace-nowrap disabled:opacity-50 dark:disabled:opacity-50 disabled:cursor-default disabled:pointer-events-none disabled:shadow-none justify-center h-8 text-sm rounded-md gap-2 w-8 inline-flex  bg-transparent hover:bg-zinc-800/5 dark:hover:bg-white/15 text-zinc-500 hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-white" data-flux-button="data-flux-button" aria-label="Close command modal">
191        <svg class="shrink-0 [:where(&amp;)]:size-4" data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
192  <path d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z"/>
193</svg>
194    </button>
195            </ui-close>
196        </div>
197    </div>
198
199            
200            <div wire:loading class="p-1 overflow-y-auto">
201                
202                <div class="px-3 py-1.5">
203                    <div class="[:where(&amp;)]:h-4 [:where(&amp;)]:rounded-md [:where(&amp;)]:bg-zinc-400/20  h-3 w-16" data-flux-skeleton>
204    
205</div>                </div>
206                <!--[if BLOCK]><![endif]-->                    <div class="flex items-center gap-3 px-3 py-2">
207                        <div class="[:where(&amp;)]:h-4 [:where(&amp;)]:rounded-md [:where(&amp;)]:bg-zinc-400/20  size-8 rounded-lg shrink-0" data-flux-skeleton>
208    
209</div>                        <div class="flex flex-col gap-1 flex-1">
210                            <div class="[:where(&amp;)]:h-4 [:where(&amp;)]:rounded-md [:where(&amp;)]:bg-zinc-400/20  h-4 w-32" data-flux-skeleton>
211    
212</div>                            <div class="[:where(&amp;)]:h-4 [:where(&amp;)]:rounded-md [:where(&amp;)]:bg-zinc-400/20  h-3 w-48" data-flux-skeleton>
213    
214</div>                        </div>
215                    </div>
216                                    <div class="flex items-center gap-3 px-3 py-2">
217                        <div class="[:where(&amp;)]:h-4 [:where(&amp;)]:rounded-md [:where(&amp;)]:bg-zinc-400/20  size-8 rounded-lg shrink-0" data-flux-skeleton>
218    
219</div>                        <div class="flex flex-col gap-1 flex-1">
220                            <div class="[:where(&amp;)]:h-4 [:where(&amp;)]:rounded-md [:where(&amp;)]:bg-zinc-400/20  h-4 w-32" data-flux-skeleton>
221    
222</div>                            <div class="[:where(&amp;)]:h-4 [:where(&amp;)]:rounded-md [:where(&amp;)]:bg-zinc-400/20  h-3 w-48" data-flux-skeleton>
223    
224</div>                        </div>
225                    </div>
226                                    <div class="flex items-center gap-3 px-3 py-2">
227                        <div class="[:where(&amp;)]:h-4 [:where(&amp;)]:rounded-md [:where(&amp;)]:bg-zinc-400/20  size-8 rounded-lg shrink-0" data-flux-skeleton>
228    
229</div>                        <div class="flex flex-col gap-1 flex-1">
230                            <div class="[:where(&amp;)]:h-4 [:where(&amp;)]:rounded-md [:where(&amp;)]:bg-zinc-400/20  h-4 w-32" data-flux-skeleton>
231    
232</div>                            <div class="[:where(&amp;)]:h-4 [:where(&amp;)]:rounded-md [:where(&amp;)]:bg-zinc-400/20  h-3 w-48" data-flux-skeleton>
233    
234</div>                        </div>
235                    </div>
236                <!--[if ENDBLOCK]><![endif]-->
237                
238                <div class="pt-1 mt-1 border-t border-zinc-200 dark:border-zinc-700">
239                    <div class="px-3 py-1.5">
240                        <div class="[:where(&amp;)]:h-4 [:where(&amp;)]:rounded-md [:where(&amp;)]:bg-zinc-400/20  h-3 w-28" data-flux-skeleton>
241    
242</div>                    </div>
243                    <!--[if BLOCK]><![endif]-->                        <div class="flex items-center gap-3 px-3 py-2">
244                            <div class="[:where(&amp;)]:h-4 [:where(&amp;)]:rounded-md [:where(&amp;)]:bg-zinc-400/20  size-5 rounded shrink-0" data-flux-skeleton>
245    
246</div>                            <div class="[:where(&amp;)]:h-4 [:where(&amp;)]:rounded-md [:where(&amp;)]:bg-zinc-400/20  h-4 w-24" data-flux-skeleton>
247    
248</div>                        </div>
249                                            <div class="flex items-center gap-3 px-3 py-2">
250                            <div class="[:where(&amp;)]:h-4 [:where(&amp;)]:rounded-md [:where(&amp;)]:bg-zinc-400/20  size-5 rounded shrink-0" data-flux-skeleton>
251    
252</div>                            <div class="[:where(&amp;)]:h-4 [:where(&amp;)]:rounded-md [:where(&amp;)]:bg-zinc-400/20  h-4 w-24" data-flux-skeleton>
253    
254</div>                        </div>
255                                            <div class="flex items-center gap-3 px-3 py-2">
256                            <div class="[:where(&amp;)]:h-4 [:where(&amp;)]:rounded-md [:where(&amp;)]:bg-zinc-400/20  size-5 rounded shrink-0" data-flux-skeleton>
257    
258</div>                            <div class="[:where(&amp;)]:h-4 [:where(&amp;)]:rounded-md [:where(&amp;)]:bg-zinc-400/20  h-4 w-24" data-flux-skeleton>
259    
260</div>                        </div>
261                    <!--[if ENDBLOCK]><![endif]-->                </div>
262            </div>
263
264            <ui-options class="p-[.3125rem] overflow-y-auto overscroll-y-none bg-white dark:bg-zinc-700 overflow-y-auto" wire:loading.remove="" data-flux-command-items>
265    <!--[if BLOCK]><![endif]-->                    <div class="px-3 pb-3 text-xs font-semibold text-zinc-500 dark:text-zinc-400 pt-2">Pages</div>
266
267                    <!--[if BLOCK]><![endif]-->                        <!--[if BLOCK]><![endif]-->                            
268                            <ui-option action class="w-full group/item data-hidden:hidden h-10 flex items-center px-2 py-1.5 focus:outline-hidden rounded-md text-start text-sm font-medium text-zinc-800 data-active:bg-zinc-100 dark:text-white dark:data-active:bg-zinc-600 gap-3 h-auto items-center py-1" wire:click="navigateTo('/')" data-flux-command-item>
269            <div class="relative">
270                            <svg class="shrink-0 [:where(&amp;)]:size-6 me-2 size-6 text-zinc-400 dark:text-zinc-400 group-data-active/item:text-zinc-800 dark:group-data-active/item:text-white" data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
271  <path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"/>
272</svg>
273
274                            </div>
275    
276    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                <div class="flex flex-col min-w-0">
277                                    <span class="">Home</span>
278                                    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                </div>
279
280    </ui-option>
281                        <!--[if ENDBLOCK]><![endif]-->                                            <!--[if BLOCK]><![endif]-->                            
282                            <ui-option action class="w-full group/item data-hidden:hidden h-10 flex items-center px-2 py-1.5 focus:outline-hidden rounded-md text-start text-sm font-medium text-zinc-800 data-active:bg-zinc-100 dark:text-white dark:data-active:bg-zinc-600 gap-3 h-auto items-center py-1" wire:click="navigateTo('https://makemeacocktail.com/myBar')" data-flux-command-item>
283            <div class="relative">
284                            <svg class="shrink-0 [:where(&amp;)]:size-6 me-2 size-6 text-zinc-400 dark:text-zinc-400 group-data-active/item:text-zinc-800 dark:group-data-active/item:text-white" data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
285  <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 0 1 0 3.75H5.625a1.875 1.875 0 0 1 0-3.75Z"/>
286</svg>
287
288                            </div>
289    
290    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                <div class="flex flex-col min-w-0">
291                                    <span class="">My Bar</span>
292                                    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                </div>
293
294    </ui-option>
295                        <!--[if ENDBLOCK]><![endif]-->                                            <!--[if BLOCK]><![endif]-->                            
296                            <ui-option action class="w-full group/item data-hidden:hidden h-10 flex items-center px-2 py-1.5 focus:outline-hidden rounded-md text-start text-sm font-medium text-zinc-800 data-active:bg-zinc-100 dark:text-white dark:data-active:bg-zinc-600 gap-3 h-auto items-center py-1" wire:click="navigateTo('https://makemeacocktail.com/cocktails')" data-flux-command-item>
297            <div class="relative">
298                            <svg class="shrink-0 [:where(&amp;)]:size-6 me-2 size-6 text-zinc-400 dark:text-zinc-400 group-data-active/item:text-zinc-800 dark:group-data-active/item:text-white" data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
299  <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 0 1-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 0 1 4.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0 1 12 15a9.065 9.065 0 0 0-6.23-.693L5 14.5m14.8.8 1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0 1 12 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5"/>
300</svg>
301
302                            </div>
303    
304    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                <div class="flex flex-col min-w-0">
305                                    <span class="">Cocktails</span>
306                                    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                </div>
307
308    </ui-option>
309                        <!--[if ENDBLOCK]><![endif]-->                                            <!--[if BLOCK]><![endif]-->                            
310                            <ui-option action class="w-full group/item data-hidden:hidden h-10 flex items-center px-2 py-1.5 focus:outline-hidden rounded-md text-start text-sm font-medium text-zinc-800 data-active:bg-zinc-100 dark:text-white dark:data-active:bg-zinc-600 gap-3 h-auto items-center py-1" wire:click="navigateTo('https://makemeacocktail.com/listmania')" data-flux-command-item>
311            <div class="relative">
312                            <svg class="shrink-0 [:where(&amp;)]:size-6 me-2 size-6 text-zinc-400 dark:text-zinc-400 group-data-active/item:text-zinc-800 dark:group-data-active/item:text-white" data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
313  <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0ZM3.75 12h.007v.008H3.75V12Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm-.375 5.25h.007v.008H3.75v-.008Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"/>
314</svg>
315
316                            </div>
317    
318    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                <div class="flex flex-col min-w-0">
319                                    <span class="">Listmania</span>
320                                    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                </div>
321
322    </ui-option>
323                        <!--[if ENDBLOCK]><![endif]-->                                            <!--[if BLOCK]><![endif]-->                            
324                            <ui-option action class="w-full group/item data-hidden:hidden h-10 flex items-center px-2 py-1.5 focus:outline-hidden rounded-md text-start text-sm font-medium text-zinc-800 data-active:bg-zinc-100 dark:text-white dark:data-active:bg-zinc-600 gap-3 h-auto items-center py-1" wire:click="navigateTo('https://makemeacocktail.com/search')" data-flux-command-item>
325            <div class="relative">
326                            <svg class="shrink-0 [:where(&amp;)]:size-6 me-2 size-6 text-zinc-400 dark:text-zinc-400 group-data-active/item:text-zinc-800 dark:group-data-active/item:text-white" data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
327  <path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z"/>
328</svg>
329
330                            </div>
331    
332    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                <div class="flex flex-col min-w-0">
333                                    <span class="">A.I. Search</span>
334                                    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                </div>
335
336    </ui-option>
337                        <!--[if ENDBLOCK]><![endif]-->                                            <!--[if BLOCK]><![endif]-->                            
338                            <ui-option action class="w-full group/item data-hidden:hidden h-10 flex items-center px-2 py-1.5 focus:outline-hidden rounded-md text-start text-sm font-medium text-zinc-800 data-active:bg-zinc-100 dark:text-white dark:data-active:bg-zinc-600 gap-3 h-auto items-center py-1" wire:click="navigateTo('https://makemeacocktail.com/level-up')" data-flux-command-item>
339            <div class="relative">
340                            <svg class="shrink-0 [:where(&amp;)]:size-6 me-2 size-6 text-zinc-400 dark:text-zinc-400 group-data-active/item:text-zinc-800 dark:group-data-active/item:text-white" data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
341  <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5"/>
342</svg>
343
344                            </div>
345    
346    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                <div class="flex flex-col min-w-0">
347                                    <span class="">Level-up</span>
348                                    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                </div>
349
350    </ui-option>
351                        <!--[if ENDBLOCK]><![endif]-->                                            <!--[if BLOCK]><![endif]-->                            
352                            <ui-option action class="w-full group/item data-hidden:hidden h-10 flex items-center px-2 py-1.5 focus:outline-hidden rounded-md text-start text-sm font-medium text-zinc-800 data-active:bg-zinc-100 dark:text-white dark:data-active:bg-zinc-600 gap-3 h-auto items-center py-1" wire:click="navigateTo('https://makemeacocktail.com/ingredients')" data-flux-command-item>
353            <div class="relative">
354                            <svg class="shrink-0 [:where(&amp;)]:size-6 me-2 size-6 text-zinc-400 dark:text-zinc-400 group-data-active/item:text-zinc-800 dark:group-data-active/item:text-white" data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
355  <path stroke-linecap="round" stroke-linejoin="round" d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9"/>
356</svg>
357
358                            </div>
359    
360    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                <div class="flex flex-col min-w-0">
361                                    <span class="">Ingredients</span>
362                                    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                </div>
363
364    </ui-option>
365                        <!--[if ENDBLOCK]><![endif]-->                                            <!--[if BLOCK]><![endif]-->                            
366                            <ui-option action class="w-full group/item data-hidden:hidden h-10 flex items-center px-2 py-1.5 focus:outline-hidden rounded-md text-start text-sm font-medium text-zinc-800 data-active:bg-zinc-100 dark:text-white dark:data-active:bg-zinc-600 gap-3 h-auto items-center py-1" wire:click="navigateTo('https://makemeacocktail.com/login')" data-flux-command-item>
367            <div class="relative">
368                            <svg class="shrink-0 [:where(&amp;)]:size-6 me-2 size-6 text-zinc-400 dark:text-zinc-400 group-data-active/item:text-zinc-800 dark:group-data-active/item:text-white" data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
369  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/>
370</svg>
371
372                            </div>
373    
374    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                <div class="flex flex-col min-w-0">
375                                    <span class="">Log in</span>
376                                    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                </div>
377
378    </ui-option>
379                        <!--[if ENDBLOCK]><![endif]-->                    <!--[if ENDBLOCK]><![endif]-->
380                    
381                    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                    <div class="px-3 pb-3 text-xs font-semibold text-zinc-500 dark:text-zinc-400 pt-4 mt-3 border-t border-zinc-200 dark:border-zinc-700">Cocktails We Love</div>
382
383                    <!--[if BLOCK]><![endif]-->                        <!--[if BLOCK]><![endif]-->                            
384                            <ui-option action class="w-full group/item data-hidden:hidden h-10 flex items-center px-2 py-1.5 focus:outline-hidden rounded-md text-start text-sm font-medium text-zinc-800 data-active:bg-zinc-100 dark:text-white dark:data-active:bg-zinc-600 gap-3 h-auto items-center py-1" wire:click="navigateTo('https://makemeacocktail.com/cocktail/8950/winter-whisky-sour')" data-flux-command-item>
385    
386    <!--[if BLOCK]><![endif]-->                                    <img
387                                        src="https://mmacv5generalimages.s3.amazonaws.com/2477/conversions/Winter-Whiskey-Sour-preview.jpg"
388                                        alt="Winter Whisky Sour"
389                                        loading="lazy"
390                                        class="size-10 sm:size-8 rounded-lg object-cover shrink-0"
391                                    />
392                                <!--[if ENDBLOCK]><![endif]-->                                <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                <div class="flex flex-col min-w-0">
393                                    <span class="font-semibold">Winter Whisky Sour</span>
394                                    <!--[if BLOCK]><![endif]-->                                        <span class="text-xs leading-tight text-zinc-400 dark:text-zinc-400">Bourbon, Orange juice, Lemon juice, Sugar / simple syrup</span>
395                                    <!--[if ENDBLOCK]><![endif]-->                                </div>
396
397    </ui-option>
398                        <!--[if ENDBLOCK]><![endif]-->                                            <!--[if BLOCK]><![endif]-->                            
399                            <ui-option action class="w-full group/item data-hidden:hidden h-10 flex items-center px-2 py-1.5 focus:outline-hidden rounded-md text-start text-sm font-medium text-zinc-800 data-active:bg-zinc-100 dark:text-white dark:data-active:bg-zinc-600 gap-3 h-auto items-center py-1" wire:click="navigateTo('https://makemeacocktail.com/cocktail/8260/wet-pussy')" data-flux-command-item>
400    
401    <!--[if BLOCK]><![endif]-->                                    <img
402                                        src="https://mmacv5generalimages.s3.amazonaws.com/2548/conversions/wetp-preview.jpg"
403                                        alt="Wet pussy"
404                                        loading="lazy"
405                                        class="size-10 sm:size-8 rounded-lg object-cover shrink-0"
406                                    />
407                                <!--[if ENDBLOCK]><![endif]-->                                <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                <div class="flex flex-col min-w-0">
408                                    <span class="font-semibold">Wet pussy</span>
409                                    <!--[if BLOCK]><![endif]-->                                        <span class="text-xs leading-tight text-zinc-400 dark:text-zinc-400">Peach schnapps, Vodka, Cranberry juice, Lime</span>
410                                    <!--[if ENDBLOCK]><![endif]-->                                </div>
411
412    </ui-option>
413                        <!--[if ENDBLOCK]><![endif]-->                                            <!--[if BLOCK]><![endif]-->                            
414                            <ui-option action class="w-full group/item data-hidden:hidden h-10 flex items-center px-2 py-1.5 focus:outline-hidden rounded-md text-start text-sm font-medium text-zinc-800 data-active:bg-zinc-100 dark:text-white dark:data-active:bg-zinc-600 gap-3 h-auto items-center py-1" wire:click="navigateTo('https://makemeacocktail.com/cocktail/6817/strawberry-daiquiri')" data-flux-command-item>
415    
416    <!--[if BLOCK]><![endif]-->                                    <img
417                                        src="https://mmacv5generalimages.s3.amazonaws.com/1139/conversions/1281128372-preview.jpg"
418                                        alt="Strawberry Daiquiri"
419                                        loading="lazy"
420                                        class="size-10 sm:size-8 rounded-lg object-cover shrink-0"
421                                    />
422                                <!--[if ENDBLOCK]><![endif]-->                                <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                <div class="flex flex-col min-w-0">
423                                    <span class="font-semibold">Strawberry Daiquiri</span>
424                                    <!--[if BLOCK]><![endif]-->                                        <span class="text-xs leading-tight text-zinc-400 dark:text-zinc-400">White rum, Sugar / simple syrup, Lime juice, Strawberry</span>
425                                    <!--[if ENDBLOCK]><![endif]-->                                </div>
426
427    </ui-option>
428                        <!--[if ENDBLOCK]><![endif]-->                                            <!--[if BLOCK]><![endif]-->                            
429                            <ui-option action class="w-full group/item data-hidden:hidden h-10 flex items-center px-2 py-1.5 focus:outline-hidden rounded-md text-start text-sm font-medium text-zinc-800 data-active:bg-zinc-100 dark:text-white dark:data-active:bg-zinc-600 gap-3 h-auto items-center py-1" wire:click="navigateTo('https://makemeacocktail.com/cocktail/6971/chambord-margarita-royale')" data-flux-command-item>
430    
431    <!--[if BLOCK]><![endif]-->                                    <img
432                                        src="https://mmacv5generalimages.s3.amazonaws.com/1016/conversions/1762844244-preview.jpg"
433                                        alt="Chambord Margarita Royale"
434                                        loading="lazy"
435                                        class="size-10 sm:size-8 rounded-lg object-cover shrink-0"
436                                    />
437                                <!--[if ENDBLOCK]><![endif]-->                                <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                <div class="flex flex-col min-w-0">
438                                    <span class="font-semibold">Chambord Margarita Royale</span>
439                                    <!--[if BLOCK]><![endif]-->                                        <span class="text-xs leading-tight text-zinc-400 dark:text-zinc-400">Tequila blanco, Raspberry liqueur, Lime juice, Pomegranate juice</span>
440                                    <!--[if ENDBLOCK]><![endif]-->                                </div>
441
442    </ui-option>
443                        <!--[if ENDBLOCK]><![endif]-->                                            <!--[if BLOCK]><![endif]-->                            
444                            <ui-option action class="w-full group/item data-hidden:hidden h-10 flex items-center px-2 py-1.5 focus:outline-hidden rounded-md text-start text-sm font-medium text-zinc-800 data-active:bg-zinc-100 dark:text-white dark:data-active:bg-zinc-600 gap-3 h-auto items-center py-1" wire:click="navigateTo('https://makemeacocktail.com/cocktail/6801/rusty-nail')" data-flux-command-item>
445    
446    <!--[if BLOCK]><![endif]-->                                    <img
447                                        src="https://mmacv5generalimages.s3.amazonaws.com/970/conversions/rusty_nail-%282%29-preview.jpg"
448                                        alt="Rusty Nail"
449                                        loading="lazy"
450                                        class="size-10 sm:size-8 rounded-lg object-cover shrink-0"
451                                    />
452                                <!--[if ENDBLOCK]><![endif]-->                                <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                <div class="flex flex-col min-w-0">
453                                    <span class="font-semibold">Rusty Nail</span>
454                                    <!--[if BLOCK]><![endif]-->                                        <span class="text-xs leading-tight text-zinc-400 dark:text-zinc-400">Whiskey, Drambuie</span>
455                                    <!--[if ENDBLOCK]><![endif]-->                                </div>
456
457    </ui-option>
458                        <!--[if ENDBLOCK]><![endif]-->                    <!--[if ENDBLOCK]><![endif]-->
459                    
460                    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                    <div class="px-3 pb-3 text-xs font-semibold text-zinc-500 dark:text-zinc-400 pt-4 mt-3 border-t border-zinc-200 dark:border-zinc-700">Level Up</div>
461
462                    <!--[if BLOCK]><![endif]-->                        <!--[if BLOCK]><![endif]-->                            
463                            <ui-option action class="w-full group/item data-hidden:hidden h-10 flex items-center px-2 py-1.5 focus:outline-hidden rounded-md text-start text-sm font-medium text-zinc-800 data-active:bg-zinc-100 dark:text-white dark:data-active:bg-zinc-600 gap-3 h-auto items-center py-1" wire:click="navigateTo('https://makemeacocktail.com/level-up/1/mastering-the-shake')" data-flux-command-item>
464            <div class="relative">
465                            <svg class="shrink-0 [:where(&amp;)]:size-6 me-2 size-6 text-zinc-400 dark:text-zinc-400 group-data-active/item:text-zinc-800 dark:group-data-active/item:text-white" data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
466  <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5"/>
467</svg>
468
469                            </div>
470    
471    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                <div class="flex flex-col min-w-0">
472                                    <span class="">Mastering the Shake</span>
473                                    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                </div>
474
475    </ui-option>
476                        <!--[if ENDBLOCK]><![endif]-->                                            <!--[if BLOCK]><![endif]-->                            
477                            <ui-option action class="w-full group/item data-hidden:hidden h-10 flex items-center px-2 py-1.5 focus:outline-hidden rounded-md text-start text-sm font-medium text-zinc-800 data-active:bg-zinc-100 dark:text-white dark:data-active:bg-zinc-600 gap-3 h-auto items-center py-1" wire:click="navigateTo('https://makemeacocktail.com/level-up/488/shaken-or-stirred')" data-flux-command-item>
478            <div class="relative">
479                            <svg class="shrink-0 [:where(&amp;)]:size-6 me-2 size-6 text-zinc-400 dark:text-zinc-400 group-data-active/item:text-zinc-800 dark:group-data-active/item:text-white" data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
480  <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5"/>
481</svg>
482
483                            </div>
484    
485    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                <div class="flex flex-col min-w-0">
486                                    <span class="">Shaken or Stirred?</span>
487                                    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                </div>
488
489    </ui-option>
490                        <!--[if ENDBLOCK]><![endif]-->                                            <!--[if BLOCK]><![endif]-->                            
491                            <ui-option action class="w-full group/item data-hidden:hidden h-10 flex items-center px-2 py-1.5 focus:outline-hidden rounded-md text-start text-sm font-medium text-zinc-800 data-active:bg-zinc-100 dark:text-white dark:data-active:bg-zinc-600 gap-3 h-auto items-center py-1" wire:click="navigateTo('https://makemeacocktail.com/level-up/489/the-history-of-the-manhattan')" data-flux-command-item>
492            <div class="relative">
493                            <svg class="shrink-0 [:where(&amp;)]:size-6 me-2 size-6 text-zinc-400 dark:text-zinc-400 group-data-active/item:text-zinc-800 dark:group-data-active/item:text-white" data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
494  <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5"/>
495</svg>
496
497                            </div>
498    
499    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                <div class="flex flex-col min-w-0">
500                                    <span class="">The History of the Manhattan</span>
501                                    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                </div>
502
503    </ui-option>
504                        <!--[if ENDBLOCK]><![endif]-->                                            <!--[if BLOCK]><![endif]-->                            
505                            <ui-option action class="w-full group/item data-hidden:hidden h-10 flex items-center px-2 py-1.5 focus:outline-hidden rounded-md text-start text-sm font-medium text-zinc-800 data-active:bg-zinc-100 dark:text-white dark:data-active:bg-zinc-600 gap-3 h-auto items-center py-1" wire:click="navigateTo('https://makemeacocktail.com/level-up/490/pairing-cocktails-with-food')" data-flux-command-item>
506            <div class="relative">
507                            <svg class="shrink-0 [:where(&amp;)]:size-6 me-2 size-6 text-zinc-400 dark:text-zinc-400 group-data-active/item:text-zinc-800 dark:group-data-active/item:text-white" data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
508  <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5"/>
509</svg>
510
511                            </div>
512    
513    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                <div class="flex flex-col min-w-0">
514                                    <span class="">Pairing Cocktails with Food</span>
515                                    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                </div>
516
517    </ui-option>
518                        <!--[if ENDBLOCK]><![endif]-->                                            <!--[if BLOCK]><![endif]-->                            
519                            <ui-option action class="w-full group/item data-hidden:hidden h-10 flex items-center px-2 py-1.5 focus:outline-hidden rounded-md text-start text-sm font-medium text-zinc-800 data-active:bg-zinc-100 dark:text-white dark:data-active:bg-zinc-600 gap-3 h-auto items-center py-1" wire:click="navigateTo('https://makemeacocktail.com/level-up/491/muddling-the-why-what-and-how')" data-flux-command-item>
520            <div class="relative">
521                            <svg class="shrink-0 [:where(&amp;)]:size-6 me-2 size-6 text-zinc-400 dark:text-zinc-400 group-data-active/item:text-zinc-800 dark:group-data-active/item:text-white" data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
522  <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5"/>
523</svg>
524
525                            </div>
526    
527    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                <div class="flex flex-col min-w-0">
528                                    <span class="">Muddling - The Why, What, and How?</span>
529                                    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                </div>
530
531    </ui-option>
532                        <!--[if ENDBLOCK]><![endif]-->                    <!--[if ENDBLOCK]><![endif]-->
533                    
534                    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                <!--[if ENDBLOCK]><![endif]-->
535
536    <ui-option-empty class="data-hidden:hidden">
537    <div class="flex items-center justify-center h-10">
538        <div class="text-sm text-zinc-500 dark:text-zinc-400 font-medium">
539            No results found
540        </div>
541    </div>
542</ui-option-empty>
543</ui-options>
544
545            <div class="px-3 py-2 border-t border-zinc-200 dark:border-zinc-700 text-xs text-zinc-500 dark:text-zinc-400 flex items-center justify-between bg-white dark:bg-zinc-800 rounded-b-xl">
546                <div class="flex items-center gap-2">
547                    <kbd class="px-1.5 py-0.5 bg-zinc-100 dark:bg-zinc-800 rounded text-[10px]">esc</kbd>
548                    <span>to close</span>
549                </div>
550                <div class="flex items-center gap-2">
551                    <kbd class="px-1.5 py-0.5 bg-zinc-100 dark:bg-zinc-800 rounded text-[10px]">enter</kbd>
552                    <span>to select</span>
553                </div>
554            </div>
555</ui-select>
556
557                        </dialog>
558</ui-modal>
559</div>
560<div wire:key="lw-551991559-1-2" wire:snapshot="{&quot;data&quot;:{&quot;user&quot;:null,&quot;showModal&quot;:false},&quot;memo&quot;:{&quot;id&quot;:&quot;J8WOeUITkGcm1nBMbk8g&quot;,&quot;name&quot;:&quot;welcome&quot;,&quot;path&quot;:&quot;login&quot;,&quot;method&quot;:&quot;GET&quot;,&quot;release&quot;:&quot;a-a-a&quot;,&quot;children&quot;:[],&quot;scripts&quot;:[],&quot;assets&quot;:[],&quot;errors&quot;:[],&quot;locale&quot;:&quot;en&quot;,&quot;islands&quot;:[]},&quot;checksum&quot;:&quot;891a3b48b88024031f28f0f83ede86904250a4f3862759f14dff9f9aa1bd94bf&quot;}" wire:effects="{&quot;partials&quot;:[],&quot;listeners&quot;:[&quot;open-welcome-modal&quot;]}" wire:id="J8WOeUITkGcm1nBMbk8g" wire:name="welcome">
561    <ui-modal wire:model.self="showModal" data-flux-modal>
562    
563    <dialog
564        wire:ignore.self 
565        class="p-6 [:where(&amp;)]:max-w-xl [:where(&amp;)]:min-w-xs shadow-lg rounded-xl bg-white dark:bg-zinc-800 ring ring-black/5 dark:ring-zinc-700 shadow-lg rounded-xl max-w-3xl"
566                                        x-data="fluxModal(null, 'J8WOeUITkGcm1nBMbk8g')"
567                x-on:modal-show.document="handleShow($event)"
568        x-on:modal-close.document="handleClose($event)"
569    >
570                    <div class="space-y-4">
571            <div class="font-medium [:where(&amp;)]:text-zinc-800 [:where(&amp;)]:dark:text-white text-base [&amp;:has(+[data-flux-subheading])]:mb-2 [[data-flux-subheading]+&amp;]:mt-2 font-grotesk font-bold text-xl" data-flux-heading>Congratulations!</div>
572
573            <p>Welcome to Make Me a Cocktail <span class="font-semibold">PREMIUM</span> - where your cocktail adventure begins!</p>
574
575            <p>We&#039;re absolutely delighted to have you join our community of spirited enthusiasts. As a premium member, you&#039;ve just unlocked a shaker full of exciting features: from crafting personalized cocktail lists, jotting down those tasty tasting notes and using our most advanced AI-driven cocktail tools.</p>
576
577            <p>Our platform is your playground to mix, mingle, and explore the vibrant world of cocktails, so get shaking and get mixing!</p>
578
579            <img src="https://makemeacocktail.com/img/misc/nolist.avif" alt="no cocktails" class="max-w-sm w-full m-auto block mt-6">
580        </div>
581
582                            <div class="absolute top-0 end-0 mt-4 me-4">
583                    <ui-close data-flux-modal-close >
584    <button type="button" class="relative items-center font-medium justify-center whitespace-nowrap disabled:opacity-50 dark:disabled:opacity-50 disabled:cursor-default disabled:pointer-events-none disabled:shadow-none justify-center h-8 text-sm rounded-md gap-2 w-8 inline-flex  bg-transparent hover:bg-zinc-800/5 dark:hover:bg-white/15 text-zinc-800 dark:text-white      text-zinc-400! hover:text-zinc-800! dark:text-zinc-500! dark:hover:text-white!" data-flux-button="data-flux-button" aria-label="Close modal">
585        <svg class="shrink-0 [:where(&amp;)]:size-5" data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
586  <path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"/>
587</svg>
588    </button>
589</ui-close>
590                </div>
591                        </dialog>
592</ui-modal>
593</div>
594<div wire:key="lw-551991559-2-2" wire:snapshot="{&quot;data&quot;:{&quot;user&quot;:null,&quot;showModal&quot;:false},&quot;memo&quot;:{&quot;id&quot;:&quot;NCmQBsHs1CCq4yyoRKrp&quot;,&quot;name&quot;:&quot;welcome-free&quot;,&quot;path&quot;:&quot;login&quot;,&quot;method&quot;:&quot;GET&quot;,&quot;release&quot;:&quot;a-a-a&quot;,&quot;children&quot;:[],&quot;scripts&quot;:[],&quot;assets&quot;:[],&quot;errors&quot;:[],&quot;locale&quot;:&quot;en&quot;,&quot;islands&quot;:[]},&quot;checksum&quot;:&quot;5f2b2360e82aad730ee85f6d1f661c6a85453e726dd27ae28eefb32944e3913e&quot;}" wire:effects="{&quot;partials&quot;:[],&quot;listeners&quot;:[&quot;open-welcome-free-modal&quot;]}" wire:id="NCmQBsHs1CCq4yyoRKrp" wire:name="welcome-free">
595    <ui-modal wire:model.self="showModal" data-flux-modal>
596    
597    <dialog
598        wire:ignore.self 
599        class="p-6 [:where(&amp;)]:max-w-xl [:where(&amp;)]:min-w-xs shadow-lg rounded-xl bg-white dark:bg-zinc-800 ring ring-black/5 dark:ring-zinc-700 shadow-lg rounded-xl max-w-3xl"
600                                        x-data="fluxModal(null, 'NCmQBsHs1CCq4yyoRKrp')"
601                x-on:modal-show.document="handleShow($event)"
602        x-on:modal-close.document="handleClose($event)"
603    >
604                    <div class="space-y-4">
605            <div class="font-medium [:where(&amp;)]:text-zinc-800 [:where(&amp;)]:dark:text-white text-base [&amp;:has(+[data-flux-subheading])]:mb-2 [[data-flux-subheading]+&amp;]:mt-2 font-grotesk font-bold text-xl" data-flux-heading>Congratulations!</div>
606
607            <p>Welcome to Make Me a Cocktail - where your cocktail adventure begins!</p>
608
609            <p>We&#039;re absolutely delighted to have you join our community of spirited enthusiasts. You&#039;ve just unlocked a shaker full of exciting features: from crafting personalized cocktail lists, jotting down those tasty tasting notes and storing your bar for future use.</p>
610
611            <p>Our platform is your playground to mix, mingle, and explore the vibrant world of cocktails, so get shaking and get mixing!</p>
612
613            <img src="https://makemeacocktail.com/img/misc/nolist.avif" alt="no cocktails" class="max-w-sm w-full m-auto block mt-6">
614        </div>
615
616                            <div class="absolute top-0 end-0 mt-4 me-4">
617                    <ui-close data-flux-modal-close >
618    <button type="button" class="relative items-center font-medium justify-center whitespace-nowrap disabled:opacity-50 dark:disabled:opacity-50 disabled:cursor-default disabled:pointer-events-none disabled:shadow-none justify-center h-8 text-sm rounded-md gap-2 w-8 inline-flex  bg-transparent hover:bg-zinc-800/5 dark:hover:bg-white/15 text-zinc-800 dark:text-white      text-zinc-400! hover:text-zinc-800! dark:text-zinc-500! dark:hover:text-white!" data-flux-button="data-flux-button" aria-label="Close modal">
619        <svg class="shrink-0 [:where(&amp;)]:size-5" data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
620  <path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"/>
621</svg>
622    </button>
623</ui-close>
624                </div>
625                        </dialog>
626</ui-modal>
627</div>
628<div wire:key="lw-551991559-3-2" wire:snapshot="{&quot;data&quot;:{&quot;user&quot;:null,&quot;showModal&quot;:false},&quot;memo&quot;:{&quot;id&quot;:&quot;EapDF7TzFMMagdUmYSfe&quot;,&quot;name&quot;:&quot;upgraded&quot;,&quot;path&quot;:&quot;login&quot;,&quot;method&quot;:&quot;GET&quot;,&quot;release&quot;:&quot;a-a-a&quot;,&quot;children&quot;:[],&quot;scripts&quot;:[],&quot;assets&quot;:[],&quot;errors&quot;:[],&quot;locale&quot;:&quot;en&quot;,&quot;islands&quot;:[]},&quot;checksum&quot;:&quot;a82c7eed75efd3c46e51ccdb90b2372a50aae70d1f1d6306971d20c87909bc9b&quot;}" wire:effects="{&quot;partials&quot;:[],&quot;listeners&quot;:[&quot;open-upgraded-modal&quot;]}" wire:id="EapDF7TzFMMagdUmYSfe" wire:name="upgraded">
629    <ui-modal wire:model.self="showModal" data-flux-modal>
630    
631    <dialog
632        wire:ignore.self 
633        class="p-6 [:where(&amp;)]:max-w-xl [:where(&amp;)]:min-w-xs shadow-lg rounded-xl bg-white dark:bg-zinc-800 ring ring-black/5 dark:ring-zinc-700 shadow-lg rounded-xl max-w-3xl"
634                                        x-data="fluxModal(null, 'EapDF7TzFMMagdUmYSfe')"
635                x-on:modal-show.document="handleShow($event)"
636        x-on:modal-close.document="handleClose($event)"
637    >
638                    <div class="space-y-4">
639            <div class="font-medium [:where(&amp;)]:text-zinc-800 [:where(&amp;)]:dark:text-white text-base [&amp;:has(+[data-flux-subheading])]:mb-2 [[data-flux-subheading]+&amp;]:mt-2 font-grotesk font-bold text-xl" data-flux-heading>Congratulations!</div>
640
641            <p>You've just been upgraded to our super amazing <span class="font-semibold">PREMIUM</span> membership - where your new cocktail adventure begins!</p>
642
643            <p>We&#039;re absolutely delighted to have you join our community of spirited enthusiasts. As a premium member, you&#039;ve just unlocked a shaker full of exciting features: from crafting personalized cocktail lists, jotting down those tasty tasting notes and using our most advanced AI-driven cocktail tools.</p>
644
645            <p>
645Our platform is your playground to mix, mingle, and explore the vibrant world of cocktails, so get shaking and get mixing!</p>
646
647            <img src="https://makemeacocktail.com/img/misc/nolist.avif" alt="no cocktails" class="max-w-sm m-auto block mt-6">
648        </div>
649
650                            <div class="absolute top-0 end-0 mt-4 me-4">
651                    <ui-close data-flux-modal-close >
652    <button type="button" class="relative items-center font-medium justify-center whitespace-nowrap disabled:opacity-50 dark:disabled:opacity-50 disabled:cursor-default disabled:pointer-events-none disabled:shadow-none justify-center h-8 text-sm rounded-md gap-2 w-8 inline-flex  bg-transparent hover:bg-zinc-800/5 dark:hover:bg-white/15 text-zinc-800 dark:text-white      text-zinc-400! hover:text-zinc-800! dark:text-zinc-500! dark:hover:text-white!" data-flux-button="data-flux-button" aria-label="Close modal">
653        <svg class="shrink-0 [:where(&amp;)]:size-5" data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
654  <path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"/>
655</svg>
656    </button>
657</ui-close>
658                </div>
659                        </dialog>
660</ui-modal>
661</div>
662<div wire:key="lw-551991559-4-2" wire:snapshot="{&quot;data&quot;:{&quot;reason&quot;:&quot;&quot;,&quot;heading&quot;:&quot;Register to continue&quot;,&quot;intro&quot;:&quot;You are one step away from unlocking this feature.&quot;,&quot;detail&quot;:&quot;Register below to continue and keep your bar, lists, and preferences synced.&quot;,&quot;intendedScan&quot;:false,&quot;showModal&quot;:false},&quot;memo&quot;:{&quot;id&quot;:&quot;AGFvVNDhPb9bed7Z6s7J&quot;,&quot;name&quot;:&quot;upsell-modal-window&quot;,&quot;path&quot;:&quot;login&quot;,&quot;method&quot;:&quot;GET&quot;,&quot;release&quot;:&quot;a-a-a&quot;,&quot;children&quot;:[],&quot;scripts&quot;:[],&quot;assets&quot;:[],&quot;errors&quot;:[],&quot;locale&quot;:&quot;en&quot;,&quot;islands&quot;:[]},&quot;checksum&quot;:&quot;bdff73f6c8c98ed15638a7531c1443ab1677a38e1662af430bdffb82f6c8ce59&quot;}" wire:effects="{&quot;partials&quot;:[],&quot;listeners&quot;:[&quot;open-upsell-modal&quot;]}" wire:id="AGFvVNDhPb9bed7Z6s7J" wire:name="upsell-modal-window">
663    <ui-modal wire:model.self="showModal" data-flux-modal>
664    
665    <dialog
666        wire:ignore.self 
667        class="p-6 [:where(&amp;)]:max-w-xl [:where(&amp;)]:min-w-xs shadow-lg rounded-xl bg-white dark:bg-zinc-800 ring ring-black/5 dark:ring-zinc-700 shadow-lg rounded-xl max-w-3xl"
668                                        x-data="fluxModal(null, 'AGFvVNDhPb9bed7Z6s7J')"
669                x-on:modal-show.document="handleShow($event)"
670        x-on:modal-close.document="handleClose($event)"
671    >
672                    <div class="space-y-4">
673            <div class="font-medium [:where(&amp;)]:text-zinc-800 [:where(&amp;)]:dark:text-white text-base [&amp;:has(+[data-flux-subheading])]:mb-2 [[data-flux-subheading]+&amp;]:mt-2 font-grotesk font-bold text-xl" data-flux-heading>Register to continue</div>
674
675            <p class="[:where(&amp;)]:font-normal [:where(&amp;)]:text-sm [:where(&amp;)]:text-zinc-500 [:where(&amp;)]:dark:text-white/70" data-flux-text ><strong>Almost there.</strong> You are one step away from unlocking this feature.</p>            <p class="[:where(&amp;)]:font-normal [:where(&amp;)]:text-sm [:where(&amp;)]:text-zinc-500 [:where(&amp;)]:dark:text-white/70" data-flux-text >Register below to continue and keep your bar, lists, and preferences synced.</p>
676            <div data-orientation="horizontal" role="none" class="border-0 [print-color-adjust:exact] bg-zinc-800/15 dark:bg-white/20 h-px w-full" data-flux-separator></div>
677
678            <div>
679                <p class="[:where(&amp;)]:font-normal [:where(&amp;)]:text-sm [:where(&amp;)]:text-zinc-500 [:where(&amp;)]:dark:text-white/70 text-sm mb-4" data-flux-text >Join thousands of members and get access to this and a heap more.</p>                <section class="flex flex-col overflow-hidden rounded-xl p-6 shadow-lg shadow-gray-900/5 md:order-first bg-linear-to-r from-blue-50 to-cyan-100 lg:order-0">
680        <p class="mt-0 text-sm text-gray-800">You want to be an even better mixologist, get access to cutting-edge tools and use the power of AI to create wonderful cocktails.</p>
681
682        <div class="order-last mt-6">
683            <ul role="list" class="-my-2 text-sm  text-gray-900">
684                <h4 class="font-semibold text-lg"">Personalised Cocktail Mastery</h4>
685                <li class="flex py-2">
686    <div><svg class="w-6 h-6 text-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
687  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
688</svg></div>
689    <span class="ml-4"><span class="font-semibold">Cocktail recipe masterclass tips</span></span>
690</li>
691                <li class="flex py-2">
692    <div><svg class="w-6 h-6 text-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
693  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
694</svg></div>
695    <span class="ml-4"><span class="font-semibold">Access to Cocktail Connie</span></span>
696</li>
697                <li class="flex py-2">
698    <div><svg class="w-6 h-6 text-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
699  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
700</svg></div>
701    <span class="ml-4"><span class="font-semibold">Cocktail creator plus</span></span>
702</li>
703
704
705                <h4 class="font-semibold text-lg mt-4"">Supercharged Tools</h4>
706                <li class="flex py-2">
707    <div><svg class="w-6 h-6 text-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
708  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
709</svg></div>
710    <span class="ml-4"><span class="font-semibold">Unlimited A.I. search</span></span>
711</li>
712                <li class="flex py-2">
713    <div><svg class="w-6 h-6 text-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
714  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
715</svg></div>
716    <span class="ml-4"><span class="font-semibold">All menu creator themes</span></span>
717</li>
718
719
720                <h4 class="font-semibold text-lg mt-4"">Smarter Home Bar Management</h4>
721                <!--[if BLOCK]><![endif]-->                    <li class="flex py-2">
722    <div><svg class="w-6 h-6 text-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
723  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
724</svg></div>
725    <span class="ml-4"><span class="font-semibold">Smart swaps</span></span>
726</li>
727                <!--[if ENDBLOCK]><![endif]-->                <li class="flex py-2">
728    <div><svg class="w-6 h-6 text-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
729  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
730</svg></div>
731    <span class="ml-4"><span class="font-semibold">Multiple bars</span></span>
732</li>
733                <li class="flex py-2">
734    <div><svg class="w-6 h-6 text-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
735  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
736</svg></div>
737    <span class="ml-4"><span class="font-semibold">Photo your bar</span></span>
738</li>
739                <li class="flex py-2">
740    <div><svg class="w-6 h-6 text-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
741  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
742</svg></div>
743    <span class="ml-4"><span class="font-semibold">Personal My Bar image</span></span>
744</li>
745
746                <h4 class="font-semibold text-lg mt-4"">A Cleaner Experience</h4>
747                <li class="flex py-2">
748    <div><svg class="w-6 h-6 text-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
749  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
750</svg></div>
751    <span class="ml-4"><span class="font-semibold">No ads, no intrusions</span></span>
752</li>
753                <li class="flex py-2">
754    <div><svg class="w-6 h-6 text-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
755  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
756</svg></div>
757    <span class="ml-4"><span class="font-semibold">... and so much more ...</span></span>
758</li>
759            </ul>
760        </div>
761
762
763    </section>
764            </div>
765
766            <div class="flex justify-between w-full pt-2">
767                <button type="button" class="relative items-center font-medium justify-center whitespace-nowrap disabled:opacity-50 dark:disabled:opacity-50 disabled:cursor-default disabled:pointer-events-none disabled:shadow-none justify-center h-10 text-sm rounded-lg gap-2 ps-4 pe-4 inline-flex  bg-transparent hover:bg-zinc-800/5 dark:hover:bg-white/15 text-zinc-800 dark:text-white    *:transition-opacity [&amp;[data-loading]&gt;:not([data-flux-loading-indicator])]:opacity-0 [&amp;[data-flux-loading]&gt;:not([data-flux-loading-indicator])]:opacity-0 [&amp;[data-loading]&gt;[data-flux-loading-indicator]]:opacity-100 [&amp;[data-flux-loading]&gt;[data-flux-loading-indicator]]:opacity-100 data-loading:pointer-events-none data-flux-loading:pointer-events-none" data-flux-button="data-flux-button" wire:target="$set('showModal', false)" wire:loading.attr="data-flux-loading" wire:click="$set('showModal', false)">
768        <div class="absolute inset-0 flex items-center justify-center opacity-0" data-flux-loading-indicator>
769                <svg class="shrink-0 [:where(&amp;)]:size-4 animate-spin" data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon">
770    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
771    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
772</svg>
773                    </div>
774        
775        
776                    
777            
778            <span>Not now</span>
779    </button>
780                <a href="https://makemeacocktail.com/register" data-flux-button="data-flux-button" class="relative items-center font-medium justify-center whitespace-nowrap disabled:opacity-50 dark:disabled:opacity-50 disabled:cursor-default disabled:pointer-events-none disabled:shadow-none justify-center h-10 text-sm rounded-lg gap-2 ps-4 pe-4 inline-flex  bg-[var(--color-accent)] hover:bg-[color-mix(in_oklab,_var(--color-accent),_transparent_10%)] text-[var(--color-accent-foreground)] border border-black/10 dark:border-0 shadow-[inset_0px_1px_--theme(--color-white/.2)] [[data-flux-button-group]_&amp;]:border-e-0 [:is([data-flux-button-group]&gt;&amp;:last-child,_[data-flux-button-group]_:last-child&gt;&amp;)]:border-e-[1px] dark:[:is([data-flux-button-group]&gt;&amp;:last-child,_[data-flux-button-group]_:last-child&gt;&amp;)]:border-e-0 dark:[:is([data-flux-button-group]&gt;&amp;:last-child,_[data-flux-button-group]_:last-child&gt;&amp;)]:border-s-[1px] [:is([data-flux-button-group]&gt;&amp;:not(:first-child),_[data-flux-button-group]_:not(:first-child)&gt;&amp;)]:border-s-[color-mix(in_srgb,var(--color-accent-foreground),transparent_85%)]" data-flux-group-target="data-flux-group-target">
781        Register
782    </a>
783            </div>
784        </div>
785
786                            <div class="absolute top-0 end-0 mt-4 me-4">
787                    <ui-close data-flux-modal-close >
788    <button type="button" class="relative items-center font-medium justify-center whitespace-nowrap disabled:opacity-50 dark:disabled:opacity-50 disabled:cursor-default disabled:pointer-events-none disabled:shadow-none justify-center h-8 text-sm rounded-md gap-2 w-8 inline-flex  bg-transparent hover:bg-zinc-800/5 dark:hover:bg-white/15 text-zinc-800 dark:text-white      text-zinc-400! hover:text-zinc-800! dark:text-zinc-500! dark:hover:text-white!" data-flux-button="data-flux-button" aria-label="Close modal">
789        <svg class="shrink-0 [:where(&amp;)]:size-5" data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
790  <path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"/>
791</svg>
792    </button>
793</ui-close>
794                </div>
795                        </dialog>
796</ui-modal>
797</div>
798<div wire:key="lw-551991559-5-2" wire:snapshot="{&quot;data&quot;:{&quot;reason&quot;:&quot;&quot;,&quot;heading&quot;:&quot;Upgrade to unlock this&quot;,&quot;intro&quot;:&quot;You are one step away from this premium feature.&quot;,&quot;detail&quot;:&quot;Upgrade to premium to unlock this and a heap more.&quot;,&quot;ctaLabel&quot;:&quot;Upgrade to premium&quot;,&quot;ctaUrl&quot;:&quot;&quot;,&quot;isInfoOnly&quot;:false,&quot;showModal&quot;:false},&quot;memo&quot;:{&quot;id&quot;:&quot;GLu7KtGUoHlhGnryIV9a&quot;,&quot;name&quot;:&quot;upsell-modal-window-premium&quot;,&quot;path&quot;:&quot;login&quot;,&quot;method&quot;:&quot;GET&quot;,&quot;release&quot;:&quot;a-a-a&quot;,&quot;children&quot;:[],&quot;scripts&quot;:[],&quot;assets&quot;:[],&quot;errors&quot;:[],&quot;locale&quot;:&quot;en&quot;,&quot;islands&quot;:[]},&quot;checksum&quot;:&quot;f8ea0d8eddf6bd2338960b2a8d93ccbe0ea4a6624ea3cc7fa6ddd6114980a7b6&quot;}" wire:effects="{&quot;partials&quot;:[],&quot;listeners&quot;:[&quot;open-upsell-premium-modal&quot;]}" wire:id="GLu7KtGUoHlhGnryIV9a" wire:name="upsell-modal-window-premium">
799    <ui-modal wire:model.self="showModal" data-flux-modal>
800    
801    <dialog
802        wire:ignore.self 
803        class="p-6 [:where(&amp;)]:max-w-xl [:where(&amp;)]:min-w-xs shadow-lg rounded-xl bg-white dark:bg-zinc-800 ring ring-black/5 dark:ring-zinc-700 shadow-lg rounded-xl max-w-3xl"
804                                        x-data="fluxModal(null, 'GLu7KtGUoHlhGnryIV9a')"
805                x-on:modal-show.document="handleShow($event)"
806        x-on:modal-close.document="handleClose($event)"
807    >
808                    <div class="space-y-4">
809            <div class="font-medium [:where(&amp;)]:text-zinc-800 [:where(&amp;)]:dark:text-white text-base [&amp;:has(+[data-flux-subheading])]:mb-2 [[data-flux-subheading]+&amp;]:mt-2 font-grotesk font-bold text-xl" data-flux-heading>Upgrade to unlock this</div>
810
811            <p class="[:where(&amp;)]:font-normal [:where(&amp;)]:text-sm [:where(&amp;)]:text-zinc-500 [:where(&amp;)]:dark:text-white/70" data-flux-text ><strong>Almost there.</strong> You are one step away from this premium feature.</p>            <p class="[:where(&amp;)]:font-normal [:where(&amp;)]:text-sm [:where(&amp;)]:text-zinc-500 [:where(&amp;)]:dark:text-white/70" data-flux-text >Upgrade to premium to unlock this and a heap more.</p>
812            <!--[if BLOCK]><![endif]-->                <div data-orientation="horizontal" role="none" class="border-0 [print-color-adjust:exact] bg-zinc-800/15 dark:bg-white/20 h-px w-full" data-flux-separator></div>
813
814                <div>
815                    <p class="[:where(&amp;)]:font-normal [:where(&amp;)]:text-sm [:where(&amp;)]:text-zinc-500 [:where(&amp;)]:dark:text-white/70 text-sm mb-4" data-flux-text >Join thousands of premium members and get access to this and a heap more.</p>                    <section class="flex flex-col overflow-hidden rounded-xl p-6 shadow-lg shadow-gray-900/5 md:order-first bg-linear-to-r from-blue-50 to-cyan-100 lg:order-0">
816        <p class="mt-0 text-sm text-gray-800">You want to be an even better mixologist, get access to cutting-edge tools and use the power of AI to create wonderful cocktails.</p>
817
818        <div class="order-last mt-6">
819            <ul role="list" class="-my-2 text-sm  text-gray-900">
820                <h4 class="font-semibold text-lg"">Personalised Cocktail Mastery</h4>
821                <li class="flex py-2">
822    <div><svg class="w-6 h-6 text-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
823  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
824</svg></div>
825    <span class="ml-4"><span class="font-semibold">Cocktail recipe masterclass tips</span></span>
826</li>
827                <li class="flex py-2">
828    <div><svg class="w-6 h-6 text-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
829  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
830</svg></div>
831    <span class="ml-4"><span class="font-semibold">Access to Cocktail Connie</span></span>
832</li>
833                <li class="flex py-2">
834    <div><svg class="w-6 h-6 text-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
835  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
836</svg></div>
837    <span class="ml-4"><span class="font-semibold">Cocktail creator plus</span></span>
838</li>
839
840
841                <h4 class="font-semibold text-lg mt-4"">Supercharged Tools</h4>
842                <li class="flex py-2">
843    <div><svg class="w-6 h-6 text-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
844  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
845</svg></div>
846    <span class="ml-4"><span class="font-semibold">Unlimited A.I. search</span></span>
847</li>
848                <li class="flex py-2">
849    <div><svg class="w-6 h-6 text-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
850  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
851</svg></div>
852    <span class="ml-4"><span class="font-semibold">All menu creator themes</span></span>
853</li>
854
855
856                <h4 class="font-semibold text-lg mt-4"">Smarter Home Bar Management</h4>
857                <!--[if BLOCK]><![endif]-->                    <li class="flex py-2">
858    <div><svg class="w-6 h-6 text-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
859  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
860</svg></div>
861    <span class="ml-4"><span class="font-semibold">Smart swaps</span></span>
862</li>
863                <!--[if ENDBLOCK]><![endif]-->                <li class="flex py-2">
864    <div><svg class="w-6 h-6 text-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
865  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
866</svg></div>
867    <span class="ml-4"><span class="font-semibold">Multiple bars</span></span>
868</li>
869                <li class="flex py-2">
870    <div><svg class="w-6 h-6 text-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
871  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
872</svg></div>
873    <span class="ml-4"><span class="font-semibold">Photo your bar</span></span>
874</li>
875                <li class="flex py-2">
876    <div><svg class="w-6 h-6 text-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
877  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
878</svg></div>
879    <span class="ml-4"><span class="font-semibold">Personal My Bar image</span></span>
880</li>
881
882                <h4 class="font-semibold text-lg mt-4"">A Cleaner Experience</h4>
883                <li class="flex py-2">
884    <div><svg class="w-6 h-6 text-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
885  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
886</svg></div>
887    <span class="ml-4"><span class="font-semibold">No ads, no intrusions</span></span>
888</li>
889                <li class="flex py-2">
890    <div><svg class="w-6 h-6 text-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
891  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
892</svg></div>
893    <span class="ml-4"><span class="font-semibold">... and so much more ...</span></span>
894</li>
895            </ul>
896        </div>
897
898
899    </section>
900                </div>
901            <!--[if ENDBLOCK]><![endif]-->
902            <div class="flex justify-between w-full pt-2">
903                <button type="button" class="relative items-center font-medium justify-center whitespace-nowrap disabled:opacity-50 dark:disabled:opacity-50 disabled:cursor-default disabled:pointer-events-none disabled:shadow-none justify-center h-10 text-sm rounded-lg gap-2 ps-4 pe-4 inline-flex  bg-transparent hover:bg-zinc-800/5 dark:hover:bg-white/15 text-zinc-800 dark:text-white    *:transition-opacity [&amp;[data-loading]&gt;:not([data-flux-loading-indicator])]:opacity-0 [&amp;[data-flux-loading]&gt;:not([data-flux-loading-indicator])]:opacity-0 [&amp;[data-loading]&gt;[data-flux-loading-indicator]]:opacity-100 [&amp;[data-flux-loading]&gt;[data-flux-loading-indicator]]:opacity-100 data-loading:pointer-events-none data-flux-loading:pointer-events-none" data-flux-button="data-flux-button" wire:target="$set('showModal', false)" wire:loading.attr="data-flux-loading" wire:click="$set('showModal', false)">
904        <div class="absolute inset-0 flex items-center justify-center opacity-0" data-flux-loading-indicator>
905                <svg class="shrink-0 [:where(&amp;)]:size-4 animate-spin" data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon">
906    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
907    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
908</svg>
909                    </div>
910        
911        
912                    
913            
914            <span>Not now</span>
915    </button>
916                <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->            </div>
917        </div>
918
919                            <div class="absolute top-0 end-0 mt-4 me-4">
920                    <ui-close data-flux-modal-close >
921    <button type="button" class="relative items-center font-medium justify-center whitespace-nowrap disabled:opacity-50 dark:disabled:opacity-50 disabled:cursor-default disabled:pointer-events-none disabled:shadow-none justify-center h-8 text-sm rounded-md gap-2 w-8 inline-flex  bg-transparent hover:bg-zinc-800/5 dark:hover:bg-white/15 text-zinc-800 dark:text-white      text-zinc-400! hover:text-zinc-800! dark:text-zinc-500! dark:hover:text-white!" data-flux-button="data-flux-button" aria-label="Close modal">
922        <svg class="shrink-0 [:where(&amp;)]:size-5" data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
923  <path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"/>
924</svg>
925    </button>
926</ui-close>
927                </div>
928                        </dialog>
929</ui-modal>
930</div>
931
932
933
934<input type="hidden" name="_token" id="_token" value="BB3gJTOncUbhXPfaUezxwvBkBEvPDgwCCGzfYBGT"/>
935<input type="hidden" name="csrf_token" id="csrf_token" value="BB3gJTOncUbhXPfaUezxwvBkBEvPDgwCCGzfYBGT"/>
936
937 
938
939    <div class="top-0 inset-x-0 bg-no-repeat bg-cover bg-center w-full max-w-full absolute z-10 bg-black/50 h-[calc(30vh_+_160px)]"
940     data-bginstant="https://makemeacocktail.com/img/page-heros/login.avif?v=2"
941>
942            <div class="page-contain mt-[80px] md:mt-[160px]"></div>
943    </div>
944
945
946<div class="z-20 relative" >
947        <header class="row sticky top-0 "
948                    style="z-index: 99;"
949            >
950        <div class="page-contain
951            bg-[#000]/50 bg-blend-multiply backdrop-blur-lg z-100 relative
952    " x-data="{ mobileMenuVisible: false, accountMenuVisible: false }">
953    <div class="py-4 -mr-4"><div class="flex justify-between items-center z-50">
954    <a href="https://makemeacocktail.com" class="flex items-center gap-x-3">
955        <img src="https://makemeacocktail.com/img/logo.svg" class="w-6 h-6" alt="logo"/>
956        <h2 class="font-magenda text-xl leading-1 py-0 my-0 pt-1
957                    text-white
958                "
959        role="heading">Make Me a Cocktail</h2>
960    </a>
961
962    <div class="justify-between items-center hidden md:flex">
963        <a href="https://makemeacocktail.com/surpriseMe"
964   class="flex items-center font-regular text-sm px-6 py-2 leading-4 rounded-xl hover:bg-blue-50 dark:hover:bg-white hover:text-blue-1000 dark:hover:text-blue-1000 group transition duration-300 ease-in-out
965            text-white
966       "
967    
968>
969                            <div
970    class="
971    dark:text-white
972            text-inherit
973        "
974>
975    <svg class="inline-block w-4 h-4 mr-1 group-hover:text-blue-1000 transition duration-300 ease-in-out" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" aria-hidden="true">
976<path d="M18 15L21 18M21 18L18 21M21 18H18.5689C17.6297 18 17.1601 18 16.7338 17.8705C16.3564 17.7559 16.0054 17.5681 15.7007 17.3176C15.3565 17.0348 15.096 16.644 14.575 15.8626L14.3333 15.5M18 3L21 6M21 6L18 9M21 6H18.5689C17.6297 6 17.1601 6 16.7338 6.12945C16.3564 6.24406 16.0054 6.43194 15.7007 6.68236C15.3565 6.96523 15.096 7.35597 14.575 8.13744L9.42496 15.8626C8.90398 16.644 8.64349 17.0348 8.29933 17.3176C7.99464 17.5681 7.64357 17.7559 7.2662 17.8705C6.83994 18 6.37033 18 5.43112 18H3M3 6H5.43112C6.37033 6 6.83994 6 7.2662 6.12945C7.64357 6.24406 7.99464 6.43194 8.29933 6.68236C8.64349 6.96523 8.90398 7.35597 9.42496 8.13744L9.66667 8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
977</svg>
978</div>
979                        Surprise me
980</a>
981        <a href="javascript:;"
982   class="flex items-center font-regular text-sm px-6 py-2 leading-4 rounded-xl hover:bg-blue-50 dark:hover:bg-white hover:text-blue-1000 dark:hover:text-blue-1000 group transition duration-300 ease-in-out
983            text-white
984       "
985    onclick="Livewire.dispatch('open-command-palette')"
986>
987                            <div
988    class="
989    dark:text-white
990            text-inherit
991        "
992>
993    <svg class="inline-block w-4 h-4 mr-1 group-hover:text-blue-1000 transition duration-300 ease-in-out" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" aria-hidden="true">
994<path d="M21 21L16.65 16.65M11 6C13.7614 6 16 8.23858 16 11M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 
9946.58172 19 11Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
995</svg>
996</div>
997                        Search
998</a>
999        <a href="https://makemeacocktail.com/subscribe"
1000   class="flex items-center font-regular text-sm px-6 py-2 leading-4 rounded-xl hover:bg-blue-50 dark:hover:bg-white hover:text-blue-1000 dark:hover:text-blue-1000 group transition duration-300 ease-in-out
1001            text-white
1002       "
1003    
1004>
1005                            <div
1006    class="
1007    dark:text-white
1008            text-inherit
1009        "
1010>
1011    <svg class="inline-block w-4 h-4 mr-1 group-hover:text-blue-1000 transition duration-300 ease-in-out" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" aria-hidden="true">
1012<path d="M12.0005 18.9998V11.9998M12.292 19.0845L19.2704 21.4207C19.8173 21.6038 20.0908 21.6953 20.2594 21.6296C20.4059 21.5726 20.517 21.45 20.5594 21.2987C20.6082 21.1244 20.4903 20.8613 20.2545 20.3349L12.766 3.6222C12.5354 3.1075 12.4201 2.85015 12.2594 2.77041C12.1199 2.70113 11.956 2.70087 11.8162 2.7697C11.6553 2.84892 11.5392 3.1059 11.3069 3.61986L3.75244 20.3359C3.51474 20.8619 3.39589 21.1248 3.44422 21.2993C3.48619 21.4508 3.59697 21.5737 3.74329 21.6312C3.91178 21.6974 4.18567 21.6064 4.73346 21.4246L11.786 19.0838C11.8799 19.0527 11.9268 19.0371 11.9749 19.0309C12.0175 19.0255 12.0606 19.0255 12.1032 19.0311C12.1512 19.0374 12.1981 19.0531 12.292 19.0845Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
1013</svg>
1014</div>
1015                        Newsletter
1016</a>
1017                    <a href="https://makemeacocktail.com/login"
1018   class="flex items-center font-regular text-sm px-6 py-2 leading-4 rounded-xl hover:bg-blue-50 dark:hover:bg-white hover:text-blue-1000 dark:hover:text-blue-1000 group transition duration-300 ease-in-out
1019            text-white
1020       "
1021    
1022>
1023                            <div
1024    class="
1025    dark:text-white
1026            text-inherit
1027        "
1028>
1029    <svg class="inline-block w-4 h-4 mr-1 group-hover:text-blue-1000 transition duration-300 ease-in-out" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" aria-hidden="true">
1030<path d="M6 17C6 17.3513 6 17.5269 6.01567 17.6796C6.14575 18.9474 7.0626 19.9946 8.30206 20.2911C8.45134 20.3268 8.6255 20.35 8.97368 20.3965L15.5656 21.2754C17.442 21.5256 18.3803 21.6507 19.1084 21.3611C19.7478 21.1069 20.2803 20.6407 20.6168 20.0406C21 19.357 21 18.4105 21 16.5175V7.48244C21 5.5894 21 4.64288 20.6168 3.95935C20.2803 3.35923 19.7478 2.893 19.1084 2.6388C18.3803 2.34926 17.442 2.47435 15.5656 2.72455L8.97368 3.60347C8.62546 3.6499 8.45135 3.67311 8.30206 3.70883C7.0626 4.00532 6.14575 5.05254 6.01567 6.3203C6 6.47301 6 6.64866 6 6.99996M12 7.99996L16 12M16 12L12 16M16 12H3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
1031</svg>
1032</div>
1033                        Log in / register
1034</a>
1035            </div>
1036
1037    <div class=" md:hidden flex items-center gap-x-2">
1038
1039        <div onclick="Livewire.dispatch('open-command-palette')" class="mr-1 cursor-pointer p-1">
1040                            <div
1041    class="
1042    dark:text-white
1043            text-inherit
1044        "
1045>
1046    <svg class="w-4! h-4! text-white" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" aria-hidden="true">
1047<path d="M21 21L16.65 16.65M11 6C13.7614 6 16 8.23858 16 11M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
1048</svg>
1049</div>
1050                    </div>
1051
1052        <div @click="mobileMenuVisible = !mobileMenuVisible; accountMenuVisible = false">
1053
1054            <svg x-show="!mobileMenuVisible" class="w-6 h-6 cursor-pointer
1055                                    text-white
1056                " xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
1057  <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"/>
1058</svg>            <div class="border-2 rounded-md border-blue-100 bg-gray-600" x-show="mobileMenuVisible" x-cloak>
1059                <svg class="w-6 h-6 block text-gray-200 md:hidden cursor-pointer" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
1060  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 
106018 6M6 6l12 12"/>
1061</svg>            </div>
1062        </div>
1063
1064        <div class="relative mr-2">
1065                    </div>
1066    </div>
1067
1068</div>
1069</div>
1070    <div class="md:pt-4 md:pb-4 -ml-4"><div class="justify-between items-center hidden md:flex">
1071    <nav x-data="{ submenu: false }">
1072        <ul class="flex" role="menubar">
1073            <li>
1074                <a href="https://makemeacocktail.com/myBar"
1075   class="flex items-center font-semibold px-4 py-3 leading-4 rounded-3xl hover:bg-blue-50 dark:hover:bg-white hover:text-blue-1000 dark:hover:text-blue-1000 group transition duration-300 ease-in-out
1076
1077                          text-white
1078                "
1079    
1080    role="menuitem"
1081>
1082        My Bar
1083    </a>
1084            </li>
1085            <li>
1086                <a href="https://makemeacocktail.com/cocktails"
1087   class="flex items-center font-semibold px-4 py-3 leading-4 rounded-3xl hover:bg-blue-50 dark:hover:bg-white hover:text-blue-1000 dark:hover:text-blue-1000 group transition duration-300 ease-in-out
1088
1089                          text-white
1090                "
1091    
1092    role="menuitem"
1093>
1094        Cocktails
1095    </a>
1096            </li>
1097            <li>
1098                <a href="https://makemeacocktail.com/listmania"
1099   class="flex items-center font-semibold px-4 py-3 leading-4 rounded-3xl hover:bg-blue-50 dark:hover:bg-white hover:text-blue-1000 dark:hover:text-blue-1000 group transition duration-300 ease-in-out
1100
1101                          text-white
1102                "
1103    
1104    role="menuitem"
1105>
1106        Listmania
1107    </a>
1108            </li>
1109            <li>
1110                <a href="https://makemeacocktail.com/level-up"
1111   class="flex items-center font-semibold px-4 py-3 leading-4 rounded-3xl hover:bg-blue-50 dark:hover:bg-white hover:text-blue-1000 dark:hover:text-blue-1000 group transition duration-300 ease-in-out
1112
1113                          text-white
1114                "
1115    
1116    role="menuitem"
1117>
1118        Level up
1119    </a>
1120            </li>
1121                                                <li class="relative">
1122                <a href="javascript:;"
1123   class="flex items-center font-semibold px-4 py-3 leading-4 rounded-3xl hover:bg-blue-50 dark:hover:bg-white hover:text-blue-1000 dark:hover:text-blue-1000 group transition duration-300 ease-in-out
1124
1125                          text-white
1126                "
1127    @click="submenu = !submenu"
1128    role="menuitem"
1129>
1130        Explore
1131            <svg class="w-6 h-6 inline-block w-3! h-3! ml-2 group-hover:text-blue-1000 transition duration-300 ease-in-out
1132                     text-white
1133        " xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
1134  <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/>
1135</svg>    </a>
1136                <ul class="absolute left-1/2 z-10 mt-2 -translate-x-1/2 bg-white rounded-md min-w-[200px] z-50 shadow-md"
1137                    x-show="submenu"
1138                    x-cloak
1139                    x-transition:enter="transition ease-out duration-150"
1140                    x-transition:enter-start="opacity-0 scale-90"
1141                    x-transition:enter-end="opacity-100 scale-100"
1142                    x-transition:leave="transition ease-in duration-150"
1143                    x-transition:leave-start="opacity-100 scale-100"
1144                    x-transition:leave-end="opacity-0 scale-90"
1145                >
1146                    <li>
1147                        <a
1148            href="https://makemeacocktail.com/search"
1149            class="flex items-center font-semibold text-sm px-4 py-2 leading-4 rounded-md text-gray-700 hover:bg-blue-50 hover:text-blue-1000 dark:hover:bg-gray-200 group transition duration-300 ease-in-out"
1150    role="menuitem"
1151>
1152        Search
1153</a>
1154                    </li>
1155
1156                    <li>
1157                        <a
1158            href="https://makemeacocktail.com/ingredients"
1159            class="flex items-center font-semibold text-sm px-4 py-2 leading-4 rounded-md text-gray-700 hover:bg-blue-50 hover:text-blue-1000 dark:hover:bg-gray-200 group transition duration-300 ease-in-out"
1160    role="menuitem"
1161>
1162        Ingredients
1163</a>
1164                    </li>
1165                    <li>
1166                        <a
1167            href="https://makemeacocktail.com/blog"
1168            class="flex items-center font-semibold text-sm px-4 py-2 leading-4 rounded-md text-gray-700 hover:bg-blue-50 hover:text-blue-1000 dark:hover:bg-gray-200 group transition duration-300 ease-in-out"
1169    role="menuitem"
1170>
1171        Blog
1172</a>
1173                    </li>
1174
1175                    <li class="border-t border-gray-50">
1176                        <a
1177            href="https://makemeacocktail.com/cocktail-creator"
1178            class="flex items-center font-semibold text-sm px-4 py-2 leading-4 rounded-md text-gray-700 hover:bg-blue-50 hover:text-blue-1000 dark:hover:bg-gray-200 group transition duration-300 ease-in-out"
1179    role="menuitem"
1180>
1181        Cocktail creator
1182</a>
1183                    </li>
1184                    <li>
1185                        <a
1186            href="https://makemeacocktail.com/add-a-recipe"
1187            class="flex items-center font-semibold text-sm px-4 py-2 leading-4 rounded-md text-gray-700 hover:bg-blue-50 hover:text-blue-1000 dark:hover:bg-gray-200 group transition duration-300 ease-in-out"
1188    role="menuitem"
1189>
1190        Add a recipe
1191</a>
1192                    </li>
1193                    <li>
1194                        <a
1195            href="https://makemeacocktail.com/menu-creator"
1196            class="flex items-center font-semibold text-sm px-4 py-2 leading-4 rounded-md text-gray-700 hover:bg-blue-50 hover:text-blue-1000 dark:hover:bg-gray-200 group transition duration-300 ease-in-out"
1197    role="menuitem"
1198>
1199        Menu creator
1200</a>
1201                    </li>
1202                    <li>
1203                        <a
1204            href="https://makemeacocktail.com/wordpress-plugin"
1205            class="flex items-center font-semibold text-sm px-4 py-2 leading-4 rounded-md text-gray-700 hover:bg-blue-50 hover:text-blue-1000 dark:hover:bg-gray-200 group transition duration-300 ease-in-out"
1206    role="menuitem"
1207>
1208        Wordpress plugin
1209</a>
1210                    </li>
1211                    <li>
1212                        <a
1213            href="https://makemeacocktail.com/widget-creator"
1214            class="flex items-center font-semibold text-sm px-4 py-2 leading-4 rounded-md text-gray-700 hover:bg-blue-50 hover:text-blue-1000 dark:hover:bg-gray-200 group transition duration-300 ease-in-out"
1215    role="menuitem"
1216>
1217        Widget creator
1218</a>
1219                    </li>
1220
1221                    <li class="border-t border-gray-50">
1222                        <a
1223            href="https://makemeacocktail.com/getting-started"
1224            class="flex items-center font-semibold text-sm px-4 py-2 leading-4 rounded-md text-gray-700 hover:bg-blue-50 hover:text-blue-1000 dark:hover:bg-gray-200 group transition duration-300 ease-in-out"
1225    role="menuitem"
1226>
1227        Getting started
1228</a>
1229                    </li>
1230                    <li>
1231                        <a
1232            href="https://makemeacocktail.com/premium"
1233            class="flex items-center font-semibold text-sm px-4 py-2 leading-4 rounded-md text-gray-700 hover:bg-blue-50 hover:text-blue-1000 dark:hover:bg-gray-200 group transition duration-300 ease-in-out"
1234    role="menuitem"
1235>
1236            <div
1237    class="
1238    dark:text-white
1239            text-inherit
1240        "
1241>
1242    <svg class="inline-block w-4 h-4 mr-1 text-blue-1000 group-hover:text-blue-1000 transition duration-300 ease-in-out" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" aria-hidden="true">
1243<path d="M4.5 22V17M4.5 7V2M2 4.5H7M2 19.5H7M13 3L11.2658 7.50886C10.9838 8.24209 10.8428 8.60871 10.6235 8.91709C10.4292 9.1904 10.1904 9.42919 9.91709 9.62353C9.60871 9.8428 9.24209 9.98381 8.50886 10.2658L4 12L8.50886 13.7342C9.24209 14.0162 9.60871 14.1572 9.91709 14.3765C10.1904 14.5708 10.4292 14.8096 10.6235 15.0829C10.8428 15.3913 10.9838 15.7579 11.2658 16.4911L13 21L14.7342 16.4911C15.0162 15.7579 15.1572 15.3913 15.3765 15.0829C15.5708 14.8096 15.8096 14.5708 16.0829 14.3765C16.3913 14.1572 16.7579 14.0162 17.4911 13.7342L22 12L17.4911 10.2658C16.7579 9.98381 16.3913 9.8428 16.0829 9.62353C15.8096 9.42919 15.5708 9.1904 15.3765 8.91709C15.1572 8.60871 15.0162 8.24209 14.7342 7.50886L13 3Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
1244</svg>
1245</div>
1246        Premium membership
1247</a>
1248                    </li>
1249                </ul>
1250            </li>
1251                            <li>
1252                    <a href="https://makemeacocktail.com/premium"
1253   class="flex items-center font-semibold px-4 py-3 leading-4 rounded-3xl hover:bg-blue-50 dark:hover:bg-white hover:text-blue-1000 dark:hover:text-blue-1000 group transition duration-300 ease-in-out
1254
1255                         text-yellow-400 dark:text-yellow-500 py-2!
1256                "
1257    
1258    role="menuitem"
1259>
1260            <svg class="w-6 h-6 inline-block w-4! mr-1 group-hover:text-blue-1000 transition duration-300 ease-in-out" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
1261  <path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09
1261L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z"/>
1262</svg>        Go Premium
1263    </a>
1264                </li>
1265                    </ul>
1266    </nav>
1267
1268    <ul x-data="myBarCount()" @mybar-count-changed.window="count += $event.detail.delta" class="flex items-center
1269                    text-white
1270            ">
1271        <li>
1272            <a href="https://makemeacocktail.com/myBar" class="relative flex gap-x-1 mr-3 text-xs tracking-tight items-center" title="Go to My Bar">
1273                <div
1274    class="
1275    dark:text-white
1276            text-inherit
1277        "
1278>
1279    <svg class="cursor-pointer hover:text-gray-300 inline-block w-5 h-5 mr-1 group-hover:text-blue-1000 transition duration-300 ease-in-out" width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
1280    <path
1281        d="M14 17.4198C14.2657 17.1542 26.3349 7.33175 26.3349 7.33175C26.6006 7.06614 26.7499 6.70586 26.75 6.33017V2.66667C26.75 2.29094 26.6007 1.93061 26.3351 1.66493C26.0694 1.39926 25.7091 1.25 25.3333 1.25H2.66667C2.29094 1.25 1.93061 1.39926 1.66493 1.66493C1.39926 1.93061 1.25 2.29094 1.25 2.66667V6.33017C1.25008 6.70586 1.39939 7.06614 1.66508 7.33175L14 17.4198ZM14 17.4198C13.7343 17.6854 14.0001 17.0441 14 17.4198ZM14 17.4198V26.75M21.0833 26.75H14M6.91667 26.75H14M16.125 7.625C16.125 6.8426 16.7593 6.20833 17.5417 6.20833C18.3241 6.20833 18.9583 6.8426 18.9583 7.625C18.9583 8.4074 18.3241 9.04167 17.5417 9.04167C16.7593 9.04167 16.125 8.4074 16.125 7.625Z"
1282        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
1283</svg>
1284
1285</div>
1286                <div class="leading-4">
1287                    <template x-if="count === null">
1288                        <span class="inline-block w-16 h-3 bg-gray-300 dark:bg-gray-600 rounded animate-pulse"></span>
1289                    </template>
1290                    <template x-if="count === 0">
1291                        <span>Your bar is currently empty</span>
1292                    </template>
1293                    <template x-if="count > 0">
1294                        <span><span class="myBarIngredientCount" x-text="count"></span>  items in your active bar</span>
1295                    </template>
1296                </div>
1297            </a>
1298        </li>
1299        <li class="darkModeToggle relative flex items-center leading-4" @click="toggleDarkLightModeByClick()" title="Switch dark / light mode">
1300            <div
1301    class="
1302    dark:text-white
1303            text-inherit
1304        "
1305>
1306    <svg class="dark:text-white cursor-pointer hover:text-gray-300 inline-block w-5 h-5 mr-1 group-hover:text-blue-1000 transition duration-300 ease-in-out" fill="none" viewBox="0 0 32 33" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
1307    <path
1308          d="M16 32.5C24.8366 32.5 32 25.3366 32 16.5C32 7.66344 24.8366 0.5 16 0.5C7.16344 0.5 0 7.66344 0 16.5C0 25.3366 7.16344 32.5 16 32.5ZM16.5161 28.371C22.7872 28.371 27.871 23.0562 27.871 16.5C27.871 9.94385 22.7872 4.62903 16.5161 4.62903V28.371Z"
1309          fill="currentColor"
1310          fill-rule="evenodd" clip-rule="evenodd"
1311    />
1312</svg>
1313
1314</div>
1315            <div class="absolute top-2.5 right-8">
1316                <div
1317    class="w-fit rounded-md font-semibold shadow-lg bg-white px-3 py-1.5 text-xs text-gray-600 border border-gray-50"
1318            x-show="darkLightModeTooltip"
1319        style="min-width: 220px; transform: translateY(-50%)"
1320    x-cloak
1321>
1322    You can switch theme with shift + /
1323</div>
1324            </div>
1325        </li>
1326        <li class="ml-2">
1327            <div x-data="{ open: false }" @click.outside="open = false" class="relative flex items-center">
1328            <button
1329                @click="open = !open"
1330                class="flex items-center gap-1 cursor-pointer hover:opacity-75 transition duration-300 ease-in-out"
1331                title="Switch language"
1332            >
1333                <span class="text-xl">🇬🇧</span>
1334                <svg class="w-6 h-6 !size-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
1335  <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/>
1336</svg>            </button>
1337
1338            <div
1339                x-show="open"
1340                x-cloak
1341                x-transition:enter="transition ease-out duration-150"
1342                x-transition:enter-start="opacity-0 scale-90"
1343                x-transition:enter-end="opacity-100 scale-100"
1344                x-transition:leave="transition ease-in duration-150"
1345                x-transition:leave-start="opacity-100 scale-100"
1346                x-transition:leave-end="opacity-0 scale-90"
1347                class="absolute top-full right-0 mt-2 bg-white dark:bg-zinc-800 rounded-md min-w-[140px] shadow-md z-50 py-1"
1348            >
1349                                                            <span class="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 dark:text-gray-200 font-semibold bg-gray-50 dark:bg-zinc-700 cursor-default">
1350                            <span class="text-base">🇬🇧</span>
1351                            English
1352                        </span>
1353                                                                                <a
1354                            href="https://makemeacocktail.com/de/login"
1355                            class="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-zinc-700 transition"
1356                        >
1357                            <span class="text-base">🇩🇪</span>
1358                            Deutsch
1359                        </a>
1360                                                                                <a
1361                            href="https://makemeacocktail.com/es/login"
1362                            class="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-zinc-700 transition"
1363                        >
1364                            <span class="text-base">🇪🇸</span>
1365                            Español
1366                        </a>
1367                                                                                <a
1368                            href="https://makemeacocktail.com/fr/login"
1369                            class="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-zinc-700 transition"
1370                        >
1371                            <span class="text-base">🇫🇷</span>
1372                            Français
1373                        </a>
1374                                                                                <a
1375                            href="https://makemeacocktail.com/pt/login"
1376                            class="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-zinc-700 transition"
1377                        >
1378                            <span class="text-base">🇵🇹</span>
1379                            Português
1380                        </a>
1381                                                                                <a
1382                            href="https://makemeacocktail.com/pt-BR/login"
1383                            class="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-zinc-700 transition"
1384                        >
1385                            <span class="text-base">🇧🇷</span>
1386                            Português (Brasil)
1387                        </a>
1388                                                                                <a
1389                            href="https://makemeacocktail.com/it/login"
1390                            class="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-zinc-700 transition"
1391                        >
1392                            <span class="text-base">🇮🇹</span>
1393                            Italiano
1394                        </a>
1395                                                                                <a
1396                            href="https://makemeacocktail.com/nl/login"
1397                            class="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-zinc-700 transition"
1398                        >
1399                            <span class="text-base">🇳🇱</span>
1400                            Nederlands
1401                        </a>
1402                                                </div>
1403        </div>
1404            </li>
1405
1406        <li x-show="count > 3" x-cloak>
1407            <a href="https://makemeacocktail.com/search/mybar"
1408               data-hotkey="Mod+b"
1409               class="relative rounded-full bg-linear-to-r from-violet-500/50 to-blue-500/50 w-6 h-6 flex justify-center items-center border border-violet-400 dark:border-ice-800 ml-2
1410               hover:rotate-90 transform transition duration-700 ease-in-out
1411               "
1412               title="See all cocktails you can make"
1413            >
1414                <div
1415    class="
1416    dark:text-white
1417            text-inherit
1418        "
1419>
1420    <svg class="cursor-pointer hover:text-gray-300 inline-block w-3 h-3 group-hover:text-blue-1000 transition duration-300 ease-in-out transform -rotate-45" width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
1421    <path
1422        d="M14 17.4198C14.2657 17.1542 26.3349 7.33175 26.3349 7.33175C26.6006 7.06614 26.7499 6.70586 26.75 6.33017V2.66667C26.75 2.29094 26.6007 1.93061 26.3351 1.66493C26.0694 1.39926 25.7091 1.25 25.3333 1.25H2.66667C2.29094 1.25 1.93061 1.39926 1.66493 1.66493C1.39926 1.93061 1.25 2.29094 1.25 2.66667V6.33017C1.25008 6.70586 1.39939 7.06614 1.66508 7.33175L14 17.4198ZM14 17.4198C13.7343 17.6854 14.0001 17.0441 14 17.4198ZM14 17.4198V26.75M21.0833 26.75H14M6.91667 26.75H14M16.125 7.625C16.125 6.8426 16.7593 6.20833 17.5417 6.20833C18.3241 6.20833 18.9583 6.8426 18.9583 7.625C18.9583 8.4074 18.3241 9.04167 17.5417 9.04167C16.7593 9.04167 16.125 8.4074 16.125 7.625Z"
1423        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
1424</svg>
1425
1426</div>
1427            </a>
1428        </li>
1429    </ul>
1430</div>
1431
1432
1433<div class="md:hidden absolute top-16 left-0 right-0 w-full px-4"
1434     style="z-index: 90"
1435     x-cloak
1436     x-show="mobileMenuVisible"
1437     x-transition:enter="transition ease-out duration-150"
1438     x-transition:enter-start="opacity-0 scale-90"
1439     x-transition:enter-end="opacity-100 scale-100"
1440     x-transition:leave="transition ease-in duration-150"
1441     x-transition:leave-start="opacity-100 scale-100"
1442     x-transition:leave-end="opacity-0 scale-90">
1443    <nav class="bg-white dark:bg-zinc-900 rounded-xl shadow-md max-h-[90vh] overflow-y-auto pb-2 border dark:border-gray-700 border-gray-100" x-data="{ submenu: false }" role="menubar">
1444        <ul>
1445            <li class="pt-2">
1446                <a
1447            href="https://makemeacocktail.com/account/dashboard"
1448        class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3
1449            justify-start
1450        "
1451    role="menuitem"
1452    
1453>
1454                    Dashboard
1455    </a>
1456            </li>
1457            <li>
1458                <a
1459            href="https://makemeacocktail.com/myBar"
1460        class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3
1461            justify-start
1462        "
1463    role="menuitem"
1464    
1465>
1466                    My Bar
1467    </a>
1468            </li>
1469            <li>
1470                <a
1471            href="https://makemeacocktail.com/cocktails"
1472        class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3
1473            justify-start
1474        "
1475    role="menuitem"
1476    
1477>
1478                    Cocktails
1479    </a>
1480            </li>
1481            <li>
1482                <a
1483            href="https://makemeacocktail.com/listmania"
1484        class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3
1485            justify-start
1486        "
1487    role="menuitem"
1488    
1489>
1490                    Listmania
1491    </a>
1492            </li>
1493            <li>
1494                <a
1495            href="https://makemeacocktail.com/level-up"
1496        class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3
1497            justify-start
1498        "
1499    role="menuitem"
1500    
1501>
1502                    Level up
1503    </a>
1504            </li>
1505
1506                                                            <li>
1507                <a
1508            href="https://makemeacocktail.com/premium"
1509        class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3
1510            justify-start
1511        "
1512    role="menuitem"
1513    
1514>
1515                                <div
1516    class="
1517    dark:text-white
1518            text-inherit
1519        "
1520>
1521    <svg class="inline-block w-4 h-4 mr-1 text-blue-1000  dark:text-gray-00 group-hover:text-blue-1000 transition duration-300 ease-in-out" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" aria-hidden="true">
1522<path d="M11.2896 3.36637C11.5193 2.92427 11.6342 2.70323 11.7881 2.63139C11.9221 2.56883 12.077 2.56883 12.211 2.63139C12.3649 2.70323 12.4798 2.92427 12.7095 3.36637L14.2225 6.27865C14.3216 6.46934 14.3711 6.56468 14.4454 6.62803C14.511 6.68394 14.5899 6.72195 14.6745 6.73837C14.7704 6.75697 14.8758 6.73625 15.0867 6.69481L18.3069 6.06197C18.7958 5.9659 19.0402 5.91786 19.1923 5.99342C19.3248 6.05921 19.4214 6.18027 19.456 6.32406C19.4958 6.4892 19.3946 6.71681 19.1922 7.17203L17.8586 10.1707C17.7713 10.3671 17.7276 10.4653 17.7244 10.5628C17.7216 10.649 17.7411 10.7344 17.781 10.8108C17.8262 10.8973 17.9082 10.9668 18.072 11.1058L20.5746 13.229C20.9545 13.5513 21.1445 13.7124 21.1803 13.8785C21.2114 14.0231 21.177 14.174 21.0862 14.2908C20.9819 14.4249 20.7408 14.4876 20.2587 14.6132L17.0827 15.4402C16.8748 15.4944 16.7708 15.5215 16.6925 15.5798C16.6234 15.6313 16.5688 15.6998 16.534 15.7786C16.4945 15.868 16.4912 15.9754 16.4847 16.1901L16.3851 19.4705C16.37 19.9685 16.3624 20.2175 16.2549 20.349C16.1613 20.4635 16.0218 20.5307 15.8739 20.5325C15.704 20.5345 15.5047 20.3852 15.1059 20.0865L12.4791 18.1191C12.3071 17.9903 12.2211 17.9259 12.1267 17.9011C12.0434 17.8791 11.9558 17.8791 11.8724 17.9011C11.778 17.9259 11.692 17.9903 11.52 18.1191L8.8932 20.0865C8.49444 20.3852 8.29506 20.5345 8.12521 20.5325C7.97731 20.5307 7.8378 20.4635 7.74418 20.349C7.63667 20.2175 7.62911 19.9685 7.61399 19.4705L7.51439 16.1901C7.50787 15.9754 7.50461 15.868 7.46514 15.7786C7.43031 15.6998 7.37569 15.6313 7.30658 15.5798C7.22829 15.5215 7.12432 15.4944 6.91636 15.4402L3.74042 
152214.6132C3.2583 14.4876 3.01724 14.4249 2.91295 14.2908C2.82214 14.174 2.78768 14.0231 2.81884 13.8785C2.85463 13.7124 3.04458 13.5513 3.42448 13.229L5.92706 11.1058C6.09093 10.9668 6.17286 10.8973 6.21808 10.8108C6.258 10.7344 6.27749 10.649 6.27467 10.5628C6.27148 10.4653 6.22782 10.3671 6.1405 10.1707L4.80694 7.17203C4.6045 6.71681 4.50328 6.4892 4.54309 6.32406C4.57775 6.18027 4.6743 6.05921 4.80677 5.99342C4.95891 5.91786 5.20333 5.9659 5.69219 6.06197L8.91245 6.69481C9.1233 6.73625 9.22873 6.75697 9.32458 6.73837C9.4092 6.72195 9.48812 6.68394 9.55371 6.62803C9.62802 6.56468 9.67755 6.46934 9.77662 6.27865L11.2896 3.36637Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
1523</svg>
1524</div>
1525                            Go Premium
1526    </a>
1527            </li>
1528                        <li class="relative">
1529                <a
1530        class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3
1531            justify-between
1532        "
1533    role="menuitem"
1534    @click="submenu = !submenu"
1535>
1536            Explore
1537                                <svg class="w-6 h-6 inline-block w-4! h-4! ml-2 text-gray-900 dark:text-gray-00" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
1538  <path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z" clip-rule="evenodd"/>
1539</svg>                    </a>
1540                <ul class="bg-gray-00 dark:bg-gray-950 px-4" x-show="submenu"
1541                    x-transition:enter="transition ease-out duration-150"
1542                    x-transition:enter-start="opacity-0"
1543                    x-transition:enter-end="opacity-100"
1544                    x-transition:leave="transition ease-in duration-150"
1545                    x-transition:leave-start="opacity-100"
1546                    x-transition:leave-end="opacity-0">
1547                    <li>
1548                        <a
1549            href="https://makemeacocktail.com/cocktail-creator"
1550        class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3
1551            justify-start
1552        "
1553    role="menuitem"
1554    
1555>
1556                    Cocktail creator
1557    </a>
1558                    </li>
1559                    <li>
1560                        <a
1561            href="https://makemeacocktail.com/add-a-recipe"
1562        class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3
1563            justify-start
1564        "
1565    role="menuitem"
1566    
1567>
1568                    Add a recipe
1569    </a>
1570                    </li>
1571                    <li>
1572                        <a
1573            href="https://makemeacocktail.com/menu-creator"
1574        class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3
1575            justify-start
1576        "
1577    role="menuitem"
1578    
1579>
1580                    Menu creator
1581    </a>
1582                    </li>
1583                    <li>
1584                        <a
1585            href="https://makemeacocktail.com/wordpress-plugin"
1586        class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3
1587            justify-start
1588        "
1589    role="menuitem"
1590    
1591>
1592                    Wordpress plugin
1593    </a>
1594                    </li>
1595                    <li>
1596                        <a
1597            href="https://makemeacocktail.com/widget-creator"
1598        class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3
1599            justify-start
1600        "
1601    role="menuitem"
1602    
1603>
1604                    Widget creator
1605    </a>
1606                    </li>
1607                    <li>
1608                        <a
1609            href="https://makemeacocktail.com/ingredients"
1610        class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3
1611            justify-start
1612        "
1613    role="menuitem"
1614    
1615>
1616                    Ingredients
1617    </a>
1618                    </li>
1619                    <li>
1620                        <a
1621            href="https://makemeacocktail.com/blog"
1622        class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3
1623            justify-start
1624        "
1625    role="menuitem"
1626    
1627>
1628                    Blog
1629    </a>
1630                    </li>
1631                    <li>
1632                        <a
1633            href="https://makemeacocktail.com/getting-started"
1634        class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3 pb-6
1635            justify-start
1636        "
1637    role="menuitem"
1638    
1639>
1640                    Getting started
1641    </a>
1642                    </li>
1643                </ul>
1644            </li>
1645        </ul>
1646
1647        <ul class="border-t border-gray-100 dark:border-gray-800 grid grid-cols-2 py-4">
1648            <li>
1649                <a
1650            href="https://makemeacocktail.com/surpriseMe"
1651        class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3
1652            justify-start
1653        "
1654    role="menuitem"
1655    
1656>
1657                                <div
1658    class="
1659    dark:text-white
1660            text-inherit
1661        "
1662>
1663    <svg class="inline-block w-4 h-4 mr-1 text-blue-1000  dark:text-gray-00 group-hover:text-blue-1000 transition duration-300 ease-in-out" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" aria-hidden="true">
1664<path d="M18 15L21 18M21 18L18 21M21 18H18.5689C17.6297 18 17.1601 18 
166416.7338 17.8705C16.3564 17.7559 16.0054 17.5681 15.7007 17.3176C15.3565 17.0348 15.096 16.644 14.575 15.8626L14.3333 15.5M18 3L21 6M21 6L18 9M21 6H18.5689C17.6297 6 17.1601 6 16.7338 6.12945C16.3564 6.24406 16.0054 6.43194 15.7007 6.68236C15.3565 6.96523 15.096 7.35597 14.575 8.13744L9.42496 15.8626C8.90398 16.644 8.64349 17.0348 8.29933 17.3176C7.99464 17.5681 7.64357 17.7559 7.2662 17.8705C6.83994 18 6.37033 18 5.43112 18H3M3 6H5.43112C6.37033 6 6.83994 6 7.2662 6.12945C7.64357 6.24406 7.99464 6.43194 8.29933 6.68236C8.64349 6.96523 8.90398 7.35597 9.42496 8.13744L9.66667 8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
1665</svg>
1666</div>
1667                            Surprise me
1668    </a>
1669            </li>
1670            <li>
1671                <a
1672            href="https://makemeacocktail.com/search"
1673        class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3
1674            justify-start
1675        "
1676    role="menuitem"
1677    
1678>
1679                                <div
1680    class="
1681    dark:text-white
1682            text-inherit
1683        "
1684>
1685    <svg class="inline-block w-4 h-4 mr-1 text-blue-1000  dark:text-gray-00 group-hover:text-blue-1000 transition duration-300 ease-in-out" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" aria-hidden="true">
1686<path d="M21 21L16.65 16.65M11 6C13.7614 6 16 8.23858 16 11M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
1687</svg>
1688</div>
1689                            Power search
1690    </a>
1691            </li>
1692            <li>
1693                <a
1694            href="https://makemeacocktail.com/subscribe"
1695        class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3
1696            justify-start
1697        "
1698    role="menuitem"
1699    
1700>
1701                                <div
1702    class="
1703    dark:text-white
1704            text-inherit
1705        "
1706>
1707    <svg class="inline-block w-4 h-4 mr-1 text-blue-1000  dark:text-gray-00 group-hover:text-blue-1000 transition duration-300 ease-in-out" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" aria-hidden="true">
1708<path d="M12.0005 18.9998V11.9998M12.292 19.0845L19.2704 21.4207C19.8173 21.6038 20.0908 21.6953 20.2594 21.6296C20.4059 21.5726 20.517 21.45 20.5594 21.2987C20.6082 21.1244 20.4903 20.8613 20.2545 20.3349L12.766 3.6222C12.5354 3.1075 12.4201 2.85015 12.2594 2.77041C12.1199 2.70113 11.956 2.70087 11.8162 2.7697C11.6553 2.84892 11.5392 3.1059 11.3069 3.61986L3.75244 20.3359C3.51474 20.8619 3.39589 21.1248 3.44422 21.2993C3.48619 21.4508 3.59697 21.5737 3.74329 21.6312C3.91178 21.6974 4.18567 21.6064 4.73346 21.4246L11.786 19.0838C11.8799 19.0527 11.9268 19.0371 11.9749 19.0309C12.0175 19.0255 12.0606 19.0255 12.1032 19.0311C12.1512 19.0374 12.1981 19.0531 12.292 19.0845Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
1709</svg>
1710</div>
1711                            Newsletter
1712    </a>
1713            </li>
1714            <li>
1715                <a
1716        class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3 darkModeToggle
1717            justify-start
1718        "
1719    role="menuitem"
1720    @click="toggleDarkLightModeByClick"
1721>
1722                                    <div
1723    class="
1724    dark:text-white
1725            text-inherit
1726        "
1727>
1728    <svg class="dark:text-white cursor-pointer hover:text-gray-300 inline-block w-4 h-4 mr-2 group-hover:text-blue-1000 transition duration-300 ease-in-out" fill="none" viewBox="0 0 32 33" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
1729    <path
1730          d="M16 32.5C24.8366 32.5 32 25.3366 32 16.5C32 7.66344 24.8366 0.5 16 0.5C7.16344 0.5 0 7.66344 0 16.5C0 25.3366 7.16344 32.5 16 32.5ZM16.5161 28.371C22.7872 28.371 27.871 23.0562 27.871 16.5C27.871 9.94385 22.7872 4.62903 16.5161 4.62903V28.371Z"
1731          fill="currentColor"
1732          fill-rule="evenodd" clip-rule="evenodd"
1733    />
1734</svg>
1735
1736</div>
1737                            Dark mode
1738    </a>
1739            </li>
1740            <li class="col-span-2">
1741                <span x-data="{ lang_choice_open: false }">
1742        <a
1743        class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3 !justify-center
1744            justify-start
1745        "
1746    role="menuitem"
1747    @click="lang_choice_open = !lang_choice_open"
1748>
1749                                <svg class="w-6 h-6 inline-block w-4! h-4! text-gray-900 dark:text-gray-00" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
1750  <path d="M21.721 12.752a9.711 9.711 0 0 0-.945-5.003 12.754 12.754 0 0 1-4.339 2.708 18.991 18.991 0 0 1-.214 4.772 17.165 17.165 0 0 0 5.498-2.477ZM14.634 15.55a17.324 17.324 0 0 0 .332-4.647c-.952.227-1.945.347-2.966.347-1.021 0-2.014-.12-2.966-.347a17.515 17.515 0 0 0 .332 4.647 17.385 17.385 0 0 0 5.268 0ZM9.772 17.119a18.963 18.963 0 0 0 4.456 0A17.182 17.182 0 0 1 12 21.724a17.18 17.18 0 0 1-2.228-4.605ZM7.777 15.23a18.87 18.87 0 0 1-.214-4.774 12.753 12.753 0 0 1-4.34-2.708 9.711 9.711 0 0 0-.944 5.004 17.165 17.165 0 0 0 5.498 2.477ZM21.356 14.752a9.765 9.765 0 0 1-7.478 6.817 18.64 18.64 0 0 0 1.988-4.718 18.627 18.627 0 0 0 5.49-2.098ZM2.644 14.752c1.682.971 3.53 1.688 5.49 2.099a18.64 18.64 0 0 0 1.988 4.718 9.765 9.765 0 0 1-7.478-6.816ZM13.878 2.43a9.755 9.755 0 0 1 6.116 3.986 11.267 11.267 0 0 1-3.746 2.504 18.63 18.63 0 0 0-2.37-6.49ZM12 2.276a17.152 17.152 0 0 1 2.805 7.121c-.897.23-1.837.353-2.805.353-.968 0-1.908-.122-2.805-.353A17.151 17.151 0 0 1 12 2.276ZM10.122 2.43a18.629 18.629 0 0 0-2.37 6.49 11.266 11.266 0 0 1-3.746-2.504 9.754 9.754 0 0 1 6.116-3.985Z"/>
1751</svg> &nbsp;
1752                            English
1753    </a>
1754        <ul x-show="lang_choice_open" x-cloak x-transition class="bg-gray-50 dark:bg-gray-950 px-4">
1755                                                                            <li>
1756                        <a href="https://makemeacocktail.com/de/login"
1757                           class="flex items-center gap-2 px-6 py-3 text-sm hover:bg-gray-50 dark:hover:bg-gray-800 justify-center text-center"
1758                        >
1759                            <span class="text-lg">🇩🇪</span>
1760                            Deutsch
1761                        </a>
1762                    </li>
1763                                                                <li>
1764                        <a href="https://makemeacocktail.com/es/login"
1765                           class="flex items-center gap-2 px-6 py-3 text-sm hover:bg-gray-50 dark:hover:bg-gray-800 justify-center text-center"
1766                        >
1767                            <span class="text-lg">🇪🇸</span>
1768                            Español
1769                        </a>
1770                    </li>
1771                                                                <li>
1772                        <a href="https://makemeacocktail.com/fr/login"
1773                           class="flex items-center gap-2 px-6 py-3 text-sm hover:bg-gray-50 dark:hover:bg-gray-800 justify-center text-center"
1774                        >
1775                            <span class="text-lg">🇫🇷</span>
1776                            Français
1777                        </a>
1778                    </li>
1779                                                                <li>
1780                        <a href="https://makemeacocktail.com/pt/login"
1781                           class="flex items-center gap-2 px-6 py-3 text-sm hover:bg-gray-50 dark:hover:bg-gray-800 justify-center text-center"
1782                        >
1783                            <span class="text-lg">🇵🇹</span>
1784                            Português
1785                        </a>
1786                    </li>
1787                                                                <li>
1788                        <a href="https://makemeacocktail.com/pt-BR/login"
1789                           class="flex items-center gap-2 px-6 py-3 text-sm hover:bg-gray-50 dark:hover:bg-gray-800 justify-center text-center"
1790                        >
1791                            <span class="text-lg">🇧🇷</span>
1792                            Português (Brasil)
1793                        </a>
1794                    </li>
1795                                                                <li>
1796                        <a href="https://makemeacocktail.com/it/login"
1797                           class="flex items-center gap-2 px-6 py-3 text-sm hover:bg-gray-50 dark:hover:bg-gray-800 justify-center text-center"
1798                        >
1799                            <span class="text-lg">🇮🇹</span>
1800                            Italiano
1801                        </a>
1802                    </li>
1803                                                                <li>
1804                        <a href="https://makemeacocktail.com/nl/login"
1805                           class="flex items-center gap-2 px-6 py-3 text-sm hover:bg-gray-50 dark:hover:bg-gray-800 justify-center text-center"
1806                        >
1807                            <span class="text-lg">🇳🇱</span>
1808                            Nederlands
1809                        </a>
1810                    </li>
1811                                    </ul>
1812            </span>
1813                </li>
1814
1815
1816        </ul>
1817
1818        <div class="px-4 pb-4 flex flex-col gap-y-3">
1819                            <a href="https://makemeacocktail.com/register" role="button" class="no-underline text-sm cursor-pointer px-6 rounded-lg text-center w-auto inline-block font-semibold py-2 hover:opacity-50 transition duration-150 font-semibold text-white! border border-0 bg-linear-to-b from-[#4984D6] to-[#286BCA]  py-4!" href="https://makemeacocktail.com/register">
1820        Sign up for free
1821    </a>
1822
1823
1824
1825                <a href="https://makemeacocktail.com/login" role="button" class="no-underline text-sm cursor-pointer px-6 rounded-lg text-center w-auto inline-block font-semibold py-2 hover:opacity-50 transition duration-150 py-2 font-semibold bg-gray-00 text-gray-800 border border-gray-100 dark:bg-gray-900 dark:text-gray-100 dark:border-gray-800 py-4!" href="https://makemeacocktail.com/login">
1826        Log in
1827    </a>
1828
1829
1830                    </div>
1831
1832    </nav>
1833</div>
1834</div>
1835
1836    </div>
1837    </header>
1838    <div id="main" class="row">
1839                    <div class="mt-[30vh] page-contain bg-gray-00 dark:bg-gray-1000">
1840        <div class="-mt-[50%] text-gray-800 bg-white dark:bg-gray-900 px-6 py-4 inline-block relative z-50 rounded-lg shadow-lg dark:border-0 border border-gray-50">
1841    <h1 role="heading" class="md:text-5xl text-4xl text-gray-800 dark:text-gray-200 font-grotesk inline-flex items-center gap-x-1">Login</h1>
1842</div>
1843
1844        
1845        
1846        <div class="flex justify-between py-10 flex-col md:flex-row gap-4">
1847            <div class="w-full">
1848                <section class="flex flex-col overflow-hidden rounded-xl p-6 w-full shadow-lg shadow-gray-900/5 bg-white dark:bg-gray-900">
1849
1850                    <h4 class="font-semibold text-lg"">Sign in to your account</h4>
1851
1852                    <p class="text-gray-500 dark:text-gray-100 mt-4">Don&#039;t have an account? <a href="https://makemeacocktail.com/register" class="text-blue-600 dark:text-blue-300">Sign up</a></p>
1853
1854                    <!-- Social Login Buttons -->
1855                    <div class="flex flex-col gap-3 mt-6">
1856                        <a href="https://makemeacocktail.com/auth/google/redirect"
1857                           class="inline-flex items-center justify-center gap-2 w-full px-4 py-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-700">
1858                            <svg class="w-5 h-5" viewBox="0 0 24 24">
1859                                <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
1860                                <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
1861                                <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
1862                                <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
1863                            </svg>
1864                            Continue with Google
1865                        </a>
1866                        <a href="https://makemeacocktail.com/auth/apple/redirect"
1867                           class="inline-flex items-center justify-center gap-2 w-full px-4 py-3 text-sm font-medium text-white bg-black rounded-lg hover:bg-gray-900">
1868                            <svg class="w-6 h-6 w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
1869    <g>
1870        <path fill="none" d="M0 0h24v24H0z"/>
1871        <path fill-rule="nonzero" d="M11.624 7.222c-.876 0-2.232-.996-3.66-.96-1.884.024-3.612 1.092-4.584 2.784-1.956 3.396-.504 8.412 1.404 11.172.936 1.344 2.04 2.856 3.504 2.808 1.404-.06 1.932-.912 3.636-.912 1.692 0 2.172.912 3.66.876 1.512-.024 2.472-1.368 3.396-2.724 1.068-1.56 1.512-3.072 1.536-3.156-.036-.012-2.94-1.128-2.976-4.488-.024-2.808 2.292-4.152 2.4-4.212-1.32-1.932-3.348-2.148-4.056-2.196-1.848-.144-3.396 1.008-4.26 1.008zm3.12-2.832c.78-.936 1.296-2.244 1.152-3.54-1.116.048-2.46.744-3.264 1.68-.72.828-1.344 2.16-1.176 3.432 1.236.096 2.508-.636 3.288-1.572z"/>
1872    </g>
1873</svg>                            Continue with Apple
1874                        </a>
1875                    </div>
1876
1877                    <div data-orientation="horizontal" role="none" class="flex items-center w-full my-6" data-flux-separator>
1878        <div class="border-0 [print-color-adjust:exact] bg-zinc-800/15 dark:bg-white/20 h-px w-full grow"></div>
1879
1880        <span class="shrink mx-6 font-medium text-sm text-zinc-500 dark:text-zinc-300 whitespace-nowrap">or</span>
1881
1882        <div class="border-0 [print-color-adjust:exact] bg-zinc-800/15 dark:bg-white/20 h-px w-full grow"></div>
1883    </div>
1884
1885                    <form action="https://makemeacocktail.com/login" method="POST" class="gap-y-4 flex flex-col">
1886                            <input type="hidden" name="_token" value="BB3gJTOncUbhXPfaUezxwvBkBEvPDgwCCGzfYBGT" />
1887
1888                            <div
1889    class=""
1890>
1891            <label for="email" class="text-gray-500 font-semibold text-sm mb-2">Email</label>
1892        <input
1893        class="placeholder:text-slate-400 dark:placeholder:text-gray-200 text-sm w-full rounded-lg border px-2 py-2  focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
1894            bg-white border-gray-100
1895            dark:bg-gray-900 dark:border-gray-700 dark:text-white" type="text" name="email" label="Email" required="required" placeholder=""
1896        type="text"
1897        name="email"
1898        wire:model.live="email"
1899        placeholder=""
1900        type="text" name="email" label="Email" required="required" placeholder=""
1901    />
1902</div>
1903                            <div
1904    class=""
1905>
1906            <label for="password" class="text-gray-500 font-semibold text-sm mb-2">Password</label>
1907        <input
1908        class="placeholder:text-slate-400 dark:placeholder:text-gray-200 text-sm w-full rounded-lg border px-2 py-2  focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
1909            bg-white border-gray-100
1910            dark:bg-gray-900 dark:border-gray-700 dark:text-white" type="password" name="password" label="Password" required="required" placeholder=""
1911        type="password"
1912        name="password"
1913        wire:model.live="password"
1914        placeholder=""
1915        type="password" name="password" label="Password" required="required" placeholder=""
1916    />
1917</div>
1918
1919                            <div>
1920                                <input type="checkbox" name="rememberMe" id="rememberMe"
1921                                       class="border border-gray-300 rounded-md accent-amber-500 dark:accent-amber-400"
1922                                />
1923                                <label for="rememberMe" class="w-full text-sm"
1924                                >Remember me</label>
1925                            </div>
1926                            <button
1927        type="submit" role="button" class="text-sm cursor-pointer px-6 rounded-lg text-center w-auto font-semibold py-2 hover:opacity-50 transition duration-150 font-semibold text-white! border border-0 bg-linear-to-b from-[#4984D6] to-[#286BCA]" type="submit">
1928        Login
1929    </button>
1930
1931
1932
1933
1934                        </form>
1935
1936                    <div class="mt-4 flex justify-between flex-col md:flex-row gap-2 text-sm">
1937                        <a href="/forgot-password" class="text-blue-600 dark:text-blue-300">Forgot password?</a>
1938                    </div>
1939                </section>
1940
1941                <section class="flex flex-col overflow-hidden rounded-xl p-6 w-full shadow-lg mt-4 shadow-gray-900/5 bg-white dark:bg-gray-900">
1942                    <h4 class="font-semibold text-lg"">Redeeming a gift voucher?</h4>
1943                    <p class="text-sm my-4">Click the button below and enter your registration details. On the billing portal you can enter your gift voucher to recieve your discount.</p>
1944                    <a href="https://makemeacocktail.com/register?plan=premium" role="button" class="no-underline text-sm cursor-pointer px-6 rounded-lg text-center w-auto inline-block font-semibold py-2 hover:opacity-50 transition duration-150 font-semibold !bg-gray-50 text-gray-800 border border-gray-200 dark:border-gray-900 dark:bg-gray-700 dark:text-gray-100 dark:border-none" href="https://makemeacocktail.com/register?plan=premium">
1945        Click here
1946    </a>
1947
1948
1949
1950                    <div class="mt-4 flex justify-between flex-col md:flex-row gap-2 text-sm">
1951                        <a href="https://makemeacocktail.com/gift-card" class="text-blue-600 dar
1951k:text-blue-300 font-semibold">Gift vouchers? Tell me more.</a>
1952
1953                    </div>
1954                </section>
1955            </div>
1956
1957            <section>
1958
1959                <div class="max-w-2xl m-auto">
1960
1961                <div class="rounded-xl p-6 shadow-lg shadow-gray-900/5 md:order-first bg-linear-to-r from-blue-50 to-cyan-100">
1962            <h2 class="font-grotesk text-4xl text-gray-800 dark:text-gray-200 text-xl text-gray-800!">Upgrade your mixology</h2>
1963            <p class="mt-4 text-gray-900"><span class="font-semibold">Become a member for free</span> taking your cocktail making skills up to level 11. Or become a
1964                <a href="https://makemeacocktail.com/premium" class="inline-flex items-center gap-x-2 text-blue-600 underline font-semibold">premium member</a> to rise to cocktail greatness.</p>
1965
1966            <ul role="list" class="mt-2 flex flex-col text-sm text-gray-700 gap-y-1">
1967                <li class="flex py-0">
1968    <div><svg class="w-6 h-6 text-cyan-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
1969  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
1970</svg></div>
1971    <span class="ml-4">Save your bar forever</span>
1972</li>
1973                <li class="flex py-0">
1974    <div><svg class="w-6 h-6 text-cyan-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
1975  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
1976</svg></div>
1977    <span class="ml-4">Access to our Cocktail Creator, allowing you to create your own wonderful concoctions.</span>
1978</li>
1979                <li class="flex py-0">
1980    <div><svg class="w-6 h-6 text-cyan-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
1981  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
1982</svg></div>
1983    <span class="ml-4">Access to Cocktail Colin; ask Cocktail Colin anything on an individual cocktail and he&#039;ll give you the answers you need.</span>
1984</li>
1985                <li class="flex py-0">
1986    <div><svg class="w-6 h-6 text-cyan-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
1987  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
1988</svg></div>
1989    <span class="ml-4">Create personalised cocktail menus for all your events, bars or parties</span>
1990</li>
1991                <li class="flex py-0">
1992    <div><svg class="w-6 h-6 text-cyan-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
1993  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
1994</svg></div>
1995    <span class="ml-4">Save cocktails to personalised &#039;Tried&#039; and &#039;Want to try&#039; lists</span>
1996</li>
1997                <li class="flex py-0">
1998    <div><svg class="w-6 h-6 text-cyan-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
1999  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
2000</svg></div>
2001    <span class="ml-4">Create and record tasting notes on cocktails</span>
2002</li>
2003                <li class="flex py-0">
2004    <div><svg class="w-6 h-6 text-cyan-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
2005  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
2006</svg></div>
2007    <span class="ml-4">Create lists of cocktails to share with friends and family</span>
2008</li>
2009                <li class="flex py-0">
2010    <div><svg class="w-6 h-6 text-cyan-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
2011  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
2012</svg></div>
2013    <span class="ml-4">A personalised MyBar URL, allowing you to share everything you can make with friends</span>
2014</li>
2015                <li class="flex py-0">
2016    <div><svg class="w-6 h-6 text-cyan-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
2017  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
2018</svg></div>
2019    <span class="ml-4">
2019And much more ... (what to buy next, measurement choices, search personalisation...)</span>
2020</li>
2021            </ul>
2022
2023            <div class="flex justify-between flex-col md:flex-row w-full md:w-auto items-center mt-4 gap-3">
2024                                    <a href="https://makemeacocktail.com/register" role="button" class="no-underline text-sm cursor-pointer px-6 rounded-lg text-center w-auto inline-block font-semibold py-2 hover:opacity-50 transition duration-150 font-semibold !bg-gray-50 text-gray-800 border border-gray-200 dark:border-gray-900 dark:bg-gray-700 dark:text-gray-100 dark:border-none" href="https://makemeacocktail.com/register">
2025        Register now for free
2026    </a>
2027
2028
2029                    <a href="https://makemeacocktail.com/premium" class="inline-flex items-center gap-x-2 text-blue-600 underline font-semibold text-sm">Find out more about premium <svg class="w-6 h-6 w-3!" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
2030  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"/>
2031</svg></a>
2032                            </div>
2033        </div>
2034    </div>
2035            </section>
2036        </div>
2037
2038    </div>
2039 
2040    </div>
2041    <footer class="row">
2042        <footer class="bg-linear-to-r from-[#F3F7FC] to-[#F4F1FE] dark:from-gray-800 dark:to-gray-900 page-contain py-10">
2043    <div class="flex xl:flex-row flex-col justify-between items-center xl:items-start gap-x-4">
2044        <div class="space-y-4 ">
2045            <div class="flex justify-center xl:justify-start gap-x-6 text-sm flex-wrap gap-y-1">
2046                <a href="https://makemeacocktail.com/makers" class="hover:underline">Community</a>
2047                <a href="https://makemeacocktail.com/premium" class="hover:underline">Premium</a>
2048                <a href="https://makemeacocktail.com/our-apps" class="hover:underline">Our apps</a>
2049                <a href="https://makemeacocktail.com/our-books" class="hover:underline">Our books</a>
2050                <a href="https://makemeacocktail.com/badges" class="hover:underline">Badges</a>
2051                <a href="https://makemeacocktail.com/advertising" class="hover:underline">Advertising</a>
2052                <a href="https://makemeacocktail.com/about" class="hover:underline">About</a>
2053                <a href="https://makemeacocktail.com/media" class="hover:underline">Media</a>
2054                <a href="https://makemeacocktail.com/subscribe" class="hover:underline">Newsletter</a>
2055                <a href="https://makemeacocktail.com/glossary" class="hover:underline">Glossary</a>
2056                <a href="https://makemeacocktail.com/contact" class="hover:underline">Contact</a>
2057            </div>
2058            <div class="flex justify-center xl:justify-start gap-x-6 text-sm flex-wrap gap-y-1 border-t border-b md:border-0 border-gray-50 py-4 md:py-0">
2059                <a href="https://makemeacocktail.com/add-a-recipe" class="hover:underline">Add a recipe</a>
2060                <a href="https://makemeacocktail.com/cocktail-creator" class="hover:underline">Cocktail creator</a>
2061                <a href="https://makemeacocktail.com/widget-creator" class="hover:underline">Widget creator</a>
2062                <a href="https://makemeacocktail.com/wordpress-plugin" class="hover:underline">Wordpress plugin</a>
2063                <a href="https://makemeacocktail.com/myBar/guide" class="hover:underline">My Bar guide</a>
2064                <a href="https://makemeacocktail.com/searchcloud" class="hover:underline">Search cloud</a>
2065                <a href="https://makemeacocktail.com/gift-card" class="hover:underline">Gift cards</a>
2066            </div>
2067            <div class="flex justify-center xl:justify-start gap-x-6 text-xs flex-wrap gap-y-1">
2068                <a href="https://makemeacocktail.com/brand-partner" class="hover:underline">Brand partners</a>
2069                <a href="https://makemeacocktail.com/privacy-policy" class="hover:underline">Privacy Policy</a>
2070                <a href="https://makemeacocktail.com/terms-and-conditions" class="hover:underline">T&amp;C</a>
2071                <a href="https://makemeacocktail.com/FAQ" class="hover:underline">FAQ</a>
2072                <a href="https://climate.stripe.com/7Fztid" class="hover:underline">Our climate commitment</a>
2073                <a href="https://make-me-a-cocktail.betteruptime.com/" class="hover:underline">Service status</a>
2074                <a href="https://make-me-a-cocktail.canny.io/changelog" class="hover:underline">Changelog</a>
2075            </div>
2076        </div>
2077        <div class="my-8 xl:my-0">
2078            <ul class="flex gap-x-2 justify-center items-center">
2079                <li><a href="https://apps.apple.com/gb/app/make-me-a-cocktail/id1541820377" class="hover:opacity-50 transition duration-150">
2080                        <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
2081    <g>
2082        <path fill="none" d="M0 0h24v24H0z"/>
2083        <path d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zM8.823 15.343c-.395-.477-.886-.647-1.479-.509l-.15.041-.59 1.016a.823.823 0 0 0 1.366.916l.062-.093.79-1.371zM13.21 8.66c-.488.404-.98 1.597-.29 2.787l3.04 5.266a.824.824 0 0 0 1.476-.722l-.049-.1-.802-1.392h1.19a.82.82 0 0 0 .822-.823.82.82 0 0 0-.72-.816l-.103-.006h-2.14L13.44 9.057l-.23-.396zm.278-3.044a.825.825 0 0 0-1.063.21l-.062.092-.367.633-.359-.633a.824.824 0 0 0-1.476.722l.049.1.838 1.457-2.685 4.653H6.266a.82.82 0 0 0-.822.822c0 .421.312.766.719.817l.103.006h7.48c.34-.64-.06-1.549-.81-1.638l-.121-.007h-2.553l3.528-6.11a.823.823 0 0 0-.302-1.124z"/>
2084    </g>
2085</svg>
2085                        <span class="sr-only">appstore</span>
2086                    </a></li>
2087                <li><a href="https://play.google.com/store/apps/details?id=com.makemeacocktail.app&amp;hl=en_GB" class="hover:opacity-50 transition duration-150">
2088                        <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
2089    <g>
2090        <path fill="none" d="M0 0h24v24H0z"/>
2091        <path d="M3.609 1.814L13.792 12 3.61 22.186a.996.996 0 0 1-.61-.92V2.734a1 1 0 0 1 .609-.92zm10.89 10.893l2.302 2.302-10.937 6.333 8.635-8.635zm3.199-3.198l2.807 1.626a1 1 0 0 1 0 1.73l-2.808 1.626L15.206 12l2.492-2.491zM5.864 2.658L16.802 8.99l-2.303 2.303-8.635-8.635z"/>
2092    </g>
2093</svg>                        <span class="sr-only">playstore</span>
2094                    </a></li>
2095                <li><a href="https://wordpress.org/plugins/make-me-a-cocktail/" class="hover:opacity-50 transition duration-150">
2096                        <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-wordpress" viewBox="0 0 16 16">
2097  <path d="M12.633 7.653c0-.848-.305-1.435-.566-1.892l-.08-.13c-.317-.51-.594-.958-.594-1.48 0-.63.478-1.218 1.152-1.218q.03 0 .058.003l.031.003A6.84 6.84 0 0 0 8 1.137 6.86 6.86 0 0 0 2.266 4.23c.16.005.313.009.442.009.717 0 1.828-.087 1.828-.087.37-.022.414.521.044.565 0 0-.371.044-.785.065l2.5 7.434 1.5-4.506-1.07-2.929c-.369-.022-.719-.065-.719-.065-.37-.022-.326-.588.043-.566 0 0 1.134.087 1.808.087.718 0 1.83-.087 1.83-.087.37-.022.413.522.043.566 0 0-.372.043-.785.065l2.48 7.377.684-2.287.054-.173c.27-.86.469-1.495.469-2.046zM1.137 8a6.86 6.86 0 0 0 3.868 6.176L1.73 5.206A6.8 6.8 0 0 0 1.137 8"/>
2098  <path d="M6.061 14.583 8.121 8.6l2.109 5.78q.02.05.049.094a6.85 6.85 0 0 1-4.218.109m7.96-9.876q.046.328.047.706c0 .696-.13 1.479-.522 2.458l-2.096 6.06a6.86 6.86 0 0 0 2.572-9.224z"/>
2099  <path fill-rule="evenodd" d="M0 8c0-4.411 3.589-8 8-8s8 3.589 8 8-3.59 8-8 8-8-3.589-8-8m.367 0c0 4.209 3.424 7.633 7.633 7.633S15.632 12.209 15.632 8C15.632 3.79 12.208.367 8 .367 3.79.367.367 3.79.367 8"/>
2100</svg>                        <span class="sr-only">wordpress</span>
2101                    </a></li>
2102                <li><a href="https://www.facebook.com/makemeacocktail" class="hover:opacity-50 transition duration-150">
2103                        <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
2104    <g>
2105        <path fill="none" d="M0 0h24v24H0z"/>
2106        <path d="M12 2C6.477 2 2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.879V14.89h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.989C18.343 21.129 22 16.99 22 12c0-5.523-4.477-10-10-10z"/>
2107    </g>
2108</svg>                        <span class="sr-only">facebook</span>
2109                    </a></li>
2110                <li><a href="https://www.twitter.com/makemeacocktail" class="hover:opacity-50 transition duration-150">
2111                        <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
2112    <g>
2113        <path fill="none" d="M0 0h24v24H0z"/>
2114        <path d="M22.162 5.656a8.384 8.384 0 0 1-2.402.658A4.196 4.196 0 0 0 21.6 4c-.82.488-1.719.83-2.656 1.015a4.182 4.182 0 0 0-7.126 3.814 11.874 11.874 0 0 1-8.62-4.37 4.168 4.168 0 0 0-.566 2.103c0 1.45.738 2.731 1.86 3.481a4.168 4.168 0 0 1-1.894-.523v.052a4.185 4.185 0 0 0 3.355 4.101 4.21 4.21 0 0 1-1.89.072A4.185 4.185 0 0 0 7.97 16.65a8.394 8.394 0 0 1-6.191 1.732 11.83 11.83 0 0 0 6.41 1.88c7.693 0 11.9-6.373 11.9-11.9 0-.18-.005-.362-.013-.54a8.496 8.496 0 0 0 2.087-2.165z"/>
2115    </g>
2116</svg>                        <span class="sr-only">twitter</span>
2117                    </a></li>
2118                <li><a href="https://instagram.com/makemeacocktail" class="hover:opacity-50 transition duration-150">
2119                        <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
2120    <g>
2121        <path fill="none" d="M0 0h24v24H0z"/>
2122        <path fill-rule="nonzero" d="M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm0-2a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm6.5-.25a1.25 1.25 0 0 1-2.5 0 1.25 1.25 0 0 1 2.5 0zM12 4c-2.474 0-2.878.007-4.029.058-.784.037-1.31.142-1.798.332-.434.168-.747.369-1.08.703a2.89 2.89 0 0 0-.704 1.08c-.19.49-.295 1.015-.331 1.798C4.006 9.075 4 9.461 4 12c0 2.474.007 2.878.058 4.029.037.783.142 1.31.331 1.797.17.435.37.748.702 1.08.337.336.65.537 1.08.703.494.191 1.02.297 1.8.333C9.075 19.994 9.461 20 12 20c2.474 0 2.878-.007 4.029-.058.782-.037 1.309-.142 1.797-.331.433-.169.748-.37 1.08-.702.337-.337.538-.65.704-1.08.19-.493.296-1.02.332-1.8.052-1.104.058-1.49.058-4.029 0-2.474-.007-2.878-.058-4.029-.037-.782-.142-1.31-.332-1.798a2.911 2.911 0 0 0-.703-1.08 2.884 2.884 0 0 0-1.08-.704c-.49-.19-1.016-.295-1.798-.331C14.925 4.006 14.539 4 12 4zm0-2c2.717 0 3.056.01 4.122.06 1.065.05 1.79.217 2.428.465.66.254 1.216.598 1.772 1.153a4.908 4.908 0 0 1 1.153 1.772c.247.637.415 1.363.465 2.428.047 1.066.06 1.405.06 4.122 0 2.717-.01 3.056-.06 4.122-.05 1.065-.218 1.79-.465 2.428a4.883 4.883 0 0 1-1.153 1.772 4.915 4.915 0 0 1-1.772 1.153c-.637.247-1.363.415-2.428.465-1.066.047-1.405.06-4.122.06-2.717 0-3.056-.01-4.122-.06-1.065-.05-1.79-.218-2.428-.465a4.89 4.89 0 0 1-1.772-1.153 4.904 4.904 0 0 1-1.153-1.772c-.248-.637-.415-1.363-.465-2.428C2.013 15.056 2 14.717 2 12c0-2.717.01-3.056.06-4.122.05-1.066.217-1.79.465-2.428a4.88 4.88 0 0 1 1.153-1.772A4.897 4.897 0 0 1 5.45 2.525c.638-.248 1.362-.415 2.428-.465C8.944 2.013 9.283 2 
212212 2z"/>
2123    </g>
2124</svg>                        <span class="sr-only">instagram</span>
2125                    </a></li>
2126                <li><a href="https://pinterest.com/makemeacocktail" class="hover:opacity-50 transition duration-150">
2127                        <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
2128    <g>
2129        <path fill="none" d="M0 0h24v24H0z"/>
2130        <path d="M13.37 2.094A10.003 10.003 0 0 0 8.002 21.17a7.757 7.757 0 0 1 .163-2.293c.185-.839 1.296-5.463 1.296-5.463a3.739 3.739 0 0 1-.324-1.577c0-1.485.857-2.593 1.923-2.593a1.334 1.334 0 0 1 1.342 1.508c0 .9-.578 2.262-.88 3.54a1.544 1.544 0 0 0 1.575 1.923c1.898 0 3.17-2.431 3.17-5.301 0-2.2-1.457-3.848-4.143-3.848a4.746 4.746 0 0 0-4.93 4.794 2.96 2.96 0 0 0 .648 1.97.48.48 0 0 1 .162.554c-.046.184-.162.623-.208.784a.354.354 0 0 1-.51.254c-1.384-.554-2.036-2.077-2.036-3.816 0-2.847 2.384-6.255 7.154-6.255 3.796 0 6.32 2.777 6.32 5.747 0 3.909-2.177 6.848-5.394 6.848a2.861 2.861 0 0 1-2.454-1.246s-.578 2.316-.692 2.754a8.026 8.026 0 0 1-1.019 2.131c.923.28 1.882.42 2.846.416a9.988 9.988 0 0 0 9.996-10.003 10.002 10.002 0 0 0-8.635-9.903z"/>
2131    </g>
2132</svg>                        <span class="sr-only">pinterest</span>
2133                    </a></li>
2134            </ul>
2135        </div>
2136        <div>
2137            <a href="https://makemeacocktail.com/support-us" role="button" class="no-underline text-sm cursor-pointer px-6 rounded-lg text-center w-auto inline-block font-semibold py-2 hover:opacity-50 transition duration-150 py-2 font-semibold bg-gray-100 text-red-900 dark:bg-gray-1000 dark:text-red-500 text-sm !flex flex-row items-center justify-start gap-x-2 bg-gray-200" href="https://makemeacocktail.com/support-us">
2138        <svg class="w-6 h-6 w-4 h-4 text-red-900 dark:text-red-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
2139  <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"/>
2140</svg>                Support us
2141    </a>
2142
2143
2144        </div>
2145    </div>
2146    <div class="text-center mt-8 pb-8 space-y-4">
2147        <div class="flex items-center justify-center gap-3">
2148                    <a
2149                href="https://makemeacocktail.com/en/login"
2150                class="text-2xl transition duration-200 hover:scale-110 opacity-100 scale-105"
2151                title="English"
2152            >
2153                🇬🇧
2154            </a>
2155                    <a
2156                href="https://makemeacocktail.com/de/login"
2157                class="text-2xl transition duration-200 hover:scale-110 opacity-40 hover:opacity-80"
2158                title="Deutsch"
2159            >
2160                🇩🇪
2161            </a>
2162                    <a
2163                href="https://makemeacocktail.com/es/login"
2164                class="text-2xl transition duration-200 hover:scale-110 opacity-40 hover:opacity-80"
2165                title="Español"
2166            >
2167                🇪🇸
2168            </a>
2169                    <a
2170                href="https://makemeacocktail.com/fr/login"
2171                class="text-2xl transition duration-200 hover:scale-110 opacity-40 hover:opacity-80"
2172                title="Français"
2173            >
2174                🇫🇷
2175            </a>
2176                    <a
2177                href="https://makemeacocktail.com/pt/login"
2178                class="text-2xl transition duration-200 hover:scale-110 opacity-40 hover:opacity-80"
2179                title="Português"
2180            >
2181                🇵🇹
2182            </a>
2183                    <a
2184                href="https://makemeacocktail.com/pt-BR/login"
2185                class="text-2xl transition duration-200 hover:scale-110 opacity-40 hover:opacity-80"
2186                title="Português (Brasil)"
2187            >
2188                🇧🇷
2189            </a>
2190                    <a
2191                href="https://makemeacocktail.com/it/login"
2192                class="text-2xl transition duration-200 hover:scale-110 opacity-40 hover:opacity-80"
2193                title="Italiano"
2194            >
2195                🇮🇹
2196            </a>
2197                    <a
2198                href="https://makemeacocktail.com/nl/login"
2199                class="text-2xl transition duration-200 hover:scale-110 opacity-40 hover:opacity-80"
2200                title="Nederlands"
2201            >
2202                🇳🇱
2203            </a>
2204            </div>
2205        <p class="text-xs dark:text-gray-300 text-gray-500">Copyright © 2026 Make me a cocktail. All Rights Reserved</p>
2206    </div>
2207</footer>
2208
2209    </footer>
2210</div>
2211 
2212
2213<script src="https://makemeacocktail.com/flux/flux.min.js?id=2d7e3896" data-navigate-once></script>
2213
2214
2215
2216<script>
2217    document.addEventListener("DOMContentLoaded", function() {
2218        var lazyBgElements = document.querySelectorAll('[data-bginstant]');
2219        lazyBgElements.forEach(function(element) {
2220            var imageUrl = element.getAttribute('data-bginstant');
2221            element.style.backgroundImage = 'url(' + imageUrl + ')';
2222        });
2223    });
2224
2225    if ('IntersectionObserver' in window) {
2226        document.addEventListener("DOMContentLoaded", function() {
2227            // Function to handle intersection logic
2228            function handleIntersection(entries) {
2229                entries.forEach(entry => {
2230                    if (entry.isIntersecting) {
2231                        entry.target.style.backgroundImage = "url('" + entry.target.dataset.bgimage + "')";
2232                        observer.unobserve(entry.target);
2233                    }
2234                });
2235            }
2236
2237            // Create the observer instance
2238            const observer = new IntersectionObserver(handleIntersection, { rootMargin: "100px" });
2239
2240            // Function to observe elements (can be reused for both initial load and AJAX content)
2241            function observeElements() {
2242                const headers = document.querySelectorAll('[data-bgimage]');
2243                headers.forEach(header => {
2244                    if (!header.dataset.observed) {
2245                        observer.observe(header);
2246                        header.dataset.observed = true; // Mark as observed to avoid duplicate observers
2247                    }
2248                });
2249            }
2250
2251            // Observe elements on initial load
2252            observeElements();
2253
2254            // Use MutationObserver to detect AJAX-loaded content
2255            const ajaxObserver = new MutationObserver(() => {
2256                observeElements(); // Re-run the observation when DOM changes
2257            });
2258
2259            // Watch for changes in the entire document body
2260            ajaxObserver.observe(document.body, { childList: true, subtree: true });
2261        });
2262    } else {
2263        // Fallback for browsers without IntersectionObserver support
2264        const headers = document.querySelectorAll('[data-bgimage]');
2265        headers.forEach(header => {
2266            header.style.backgroundImage = "url('" + header.dataset.bgimage + "')";
2267        });
2268    }
2269
2270    window.addEventListener('load', (event) => {
2271        document.querySelectorAll('.plugin-download-link').forEach(item => {
2272            item.addEventListener('click', event => {
2273                fathom.trackEvent('Plugin downloaded');
2274            });
2275        });
2276    });
2277</script>
2277
2278
2279
2280
2281<script>
2282    function page() {
2283        return {
2284            darkLightModeTooltip: false,
2285            shouldShowTooltip(tooltip) {
2286                return localStorage.getItem('seenTooltip4_' + tooltip) !== 'true';
2287            },
2288            setSeenTooltip(tooltip) {
2289                localStorage.setItem('seenTooltip4_' + tooltip, 'true');
2290            },
2291            toggleDarkLightModeByClick() {
2292                if (this.shouldShowTooltip('darkLightMode')) {
2293                    this.darkLightModeTooltip = true;
2294                    this.setSeenTooltip('darkLightMode');
2295                } else {
2296                    this.darkLightModeTooltip = false;
2297                }
2298                this.toggleDarkLightMode();
2299            },
2300            showTooltip(tooltip) {
2301
2302            },
2303            toggleDarkLightMode() {
2304                if (localStorage.theme === 'light') {
2305                    localStorage.theme = 'dark';
2306                    document.documentElement.classList.add('dark');
2307                    document.documentElement.classList.remove('light');
2308                } else {
2309                    localStorage.theme = 'light';
2310                    document.documentElement.classList.add('light');
2311                    document.documentElement.classList.remove('dark');
2312                }
2313            }
2314        }
2315    }
2316
2317    document.onkeydown = function (evt) {
2318        evt = evt || window.event;
2319        // Removed question mark toggling of dark / light mode
2320        // if (evt.shiftKey && evt.keyCode == 191) {
2321        //     window.dispatchEvent(new CustomEvent('toggle-key-stroke'));
2322        // }
2323        if (evt.keyCode == 39) {
2324            window.dispatchEvent(new CustomEvent('toggle-makers-mode-next'));
2325        }
2326        if (evt.keyCode == 37) {
2327            window.dispatchEvent(new CustomEvent('toggle-makers-mode-prev'));
2328        }
2329    };
2330
2331</script>
2331
2332
2333<script>
2334    if (!window.Toast) {
2335        window.Toast = {
2336            success(text, heading = '', duration = 5000) {
2337                this.show(text, 'success', heading, duration);
2338            },
2339            danger(text, heading = '', duration = 5000) {
2340                this.show(text, 'danger', heading, duration);
2341            },
2342            warning(text, heading = '', duration = 5000) {
2343                this.show(text, 'warning', heading, duration);
2344            },
2345            info(text, heading = '', duration = 5000) {
2346                this.show(text, 'info', heading, duration);
2347            },
2348            show(text, variant = 'success', heading = '', duration = 5000) {
2349                if (window.Flux && typeof window.Flux.toast === 'function') {
2350                    const payload = {
2351                        text,
2352                        duration,
2353                        variant,
2354                    };
2355
2356                    if (heading) {
2357                        payload.heading = heading;
2358                    }
2359
2360                    window.Flux.toast(payload);
2361
2362                    return;
2363                }
2364
2365                console.log(text);
2366            }
2367        };
2368    }
2369
2370    // Alpine.js component for My Bar count.
2371    //
2372    // localStorage seeds the first paint so the header shows a number straight
2373    // away instead of a pulsing placeholder — but it is only ever a guess, and
2374    // is always reconciled against the server afterwards. Treating it as the
2375    // answer meant the header kept whatever number it last saw, forever: empty
2376    // your bar in the app, on another device, or in another session, and the
2377    // web header would still insist you had 200 items while the page below it
2378    // said nothing at all. The revalidation is async and off the paint path,
2379    // and the endpoint releases the session lock before it does any work.
2380    document.addEventListener('alpine:init', () => {
2381        Alpine.data('myBarCount', () => ({
2382            count: null,
2383            init() {
2384                const cached = localStorage.getItem('mybar_count');
2385                if (cached !== null) {
2386                    this.count = parseInt(cached, 10);
2387                }
2388
2389                this.fetchCount();
2390
2391                this.$watch('count', (value) => {
2392                    if (value === null) {
2393                        localStorage.removeItem('mybar_count');
2394                    } else {
2395                        localStorage.setItem('mybar_count', value);
2396                    }
2397                });
2398            },
2399            async fetchCount() {
2400                try {
2401                    const response = await fetch('https://makemeacocktail.com/myBar/count');
2402                    const data = await response.json();
2403                    this.count = data.count;
2404                } catch (error) {
2405                    console.error('Failed to fetch bar count:', error);
2406                    this.count = 0;
2407                }
2408            },
2409            updateCount(delta) {
2410                if (this.count !== null) {
2411                    this.count += delta;
2412                }
2413            }
2414        }));
2415    });
2416
2417    // Listen for bar changes and update Alpine components
2418    document.addEventListener('myBarNumberChanged', (event) => {
2419        const delta = parseInt(event.detail.number);
2420
2421        // Dispatch custom event for Alpine components
2422        window.dispatchEvent(new CustomEvent('mybar-count-changed', { detail: { delta } }));
2423
2424        // Show toast notification
2425        if (delta > 0) {
2426            Toast.success('Ingredient added to your bar', '', 2000);
2427        } else {
2428            Toast.danger('Ingredient removed from your bar', '', 2000);
2429        }
2430
2431        // Update legacy DOM elements (for any non-Alpine usage)
2432        let noIng = document.getElementsByClassName('onlyShowIfNoIngredients');
2433        for (var i = 0; i < noIng.length; i++) {
2434            noIng[i].classList.add('hidden');
2435        }
2436        let someIng = document.getElementsByClassName('onlyShowIfIngredients');
2437        for (var i = 0; i < someIng.length; i++) {
2438            someIng[i].classList.remove('hidden');
2439        }
2440    });
2441</script>
2441
2442
2443<script>
2444    function fallbackCopyTextToClipboard(text) {
2445        var textArea = document.createElement("textarea");
2446        textArea.value = text;
2447
2448        // Avoid scrolling to bottom
2449        textArea.style.top = "0";
2450        textArea.style.left = "0";
2451        textArea.style.position = "fixed";
2452
2453        document.body.appendChild(textArea);
2454        textArea.focus();
2455        textArea.select();
2456
2457        try {
2458            var successful = document.execCommand('copy');
2459            var msg = successful ? 'successful' : 'unsuccessful';
2460        } catch (err) { }
2461
2462            document.body.removeChild(textArea);
2463        }
2464
2465    function copyTextToClipboard(text) {
2466        if (!navigator.clipboard) {
2467            fallbackCopyTextToClipboard(text);
2468            return;
2469        }
2470        navigator.clipboard.writeText(text).then(function () {}, function (err) { });
2471    }
2472
2473    function scrollToSection(idname, offset = 90) {
2474        const element = document.getElementById(idname);
2475        if (element) {
2476            // Get the top position of the element within the page
2477            const elementPosition = element.getBoundingClientRect().top + window.pageYOffset;
2478
2479            // Scroll to the element, adjusted by the offset
2480            window.scrollTo({
2481                top: elementPosition - offset, // Subtract the offset
2482                behavior: 'smooth'
2483            });
2484        }
2485    }
2486</script>
2486
2487
2488
2489<script src="https://makemeacocktail.com/vendor/livewire/livewire.min.js?id=8642c1d5"   data-csrf="BB3gJTOncUbhXPfaUezxwvBkBEvPDgwCCGzfYBGT" data-module-url="https://makemeacocktail.com/livewire-c4554fc5" data-update-uri="https://makemeacocktail.com/livewire-c4554fc5/update" data-navigate-once="true"></script>
vendor: 1 bytes, line 2489
2489
2490<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"035361b09d354e74898329cf392aef64","spa":2}' crossorigin="anonymous"></script>
vendor: 1 bytes, line 2490
2490
2491<script>(function(){function c(){var b=a.contentDocument||(a.contentWindow&&a.contentWindow.document);if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'a4403514e9531246',t:'MTc5MDkwNzQxMA=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>
2491</body>
2492</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.