PageSourceSearch

https://makemeacocktail.com/login

html makemeacocktail.com collected 2026-09-24 15:18:57 UTC 166,961 bytes, 2,354 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="dwKEe8YFjEu4tPCAFVNZ3LxXhFkAbmy9Bv7rQV87">
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-CLDsStlz.css" /><link rel="stylesheet" href="https://makemeacocktail.com/build/assets/app-CLDsStlz.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;AdfOlKPE9KGwr2VMNHYi&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;e79d4b6f7c0d1a2dc4ba75c66f95cb0100af0c416552cd08372490160e62d0cb&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="AdfOlKPE9KGwr2VMNHYi" 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, 'AdfOlKPE9KGwr2VMNHYi')"
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/7498/coconut-elixir')" data-flux-command-item>
385    
386    <!--[if BLOCK]><![endif]-->                                    <img
387                                        src="https://mmacv5generalimages.s3.amazonaws.com/2446/conversions/652112738-preview.jpg"
388                                        alt="Coconut Elixir"
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">Coconut Elixir</span>
394                                    <!--[if BLOCK]><![endif]-->                                        <span class="text-xs leading-tight text-zinc-400 dark:text-zinc-400">Coconut rum, Vodka, Melon liqueur, Mint 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/9623/flying-grasshopper')" data-flux-command-item>
400    
401    <!--[if BLOCK]><![endif]-->                                    
402                                    <img
403                                        src="https://makemeacocktail.com/img/logo.png"
404                                        alt="Make Me a Cocktail"
405                                        loading="lazy"
406                                        class="size-10 sm:size-8 rounded-lg object-contain shrink-0 p-0.5"
407                                    />
408                                <!--[if ENDBLOCK]><![endif]-->                                <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                <div class="flex flex-col min-w-0">
409                                    <span class="font-semibold">Flying Grasshopper</span>
410                                    <!--[if BLOCK]><![endif]-->                                        <span class="text-xs leading-tight text-zinc-400 dark:text-zinc-400">Vodka, Creme de menthe, Creme de cacao, Cream</span>
411                                    <!--[if ENDBLOCK]><![endif]-->                                </div>
412
413    </ui-option>
414                        <!--[if ENDBLOCK]><![endif]-->                                            <!--[if BLOCK]><![endif]-->                            
415                            <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/6775/french-horn')" data-flux-command-item>
416    
417    <!--[if BLOCK]><![endif]-->                                    <img
418                                        src="https://mmacv5generalimages.s3.amazonaws.com/1017/conversions/1711231576-preview.jpg"
419                                        alt="French Horn"
420                                        loading="lazy"
421                                        class="size-10 sm:size-8 rounded-lg object-cover shrink-0"
422                                    />
423                                <!--[if ENDBLOCK]><![endif]-->                                <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                <div class="flex flex-col min-w-0">
424                                    <span class="font-semibold">French Horn</span>
425                                    <!--[if BLOCK]><![endif]-->                                        <span class="text-xs leading-tight text-zinc-400 dark:text-zinc-400">Vodka, Raspberry liqueur, Lemon juice, Salt</span>
426                                    <!--[if ENDBLOCK]><![endif]-->                                </div>
427
428    </ui-option>
429                        <!--[if ENDBLOCK]><![endif]-->                                            <!--[if BLOCK]><![endif]-->                            
430                            <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/540/bucks-fizz')" data-flux-command-item>
431    
432    <!--[if BLOCK]><![endif]-->                                    <img
433                                        src="https://mmacv5generalimages.s3.amazonaws.com/5562/conversions/1339684770-preview.avif"
434                                        alt="Buck’s Fizz"
435                                        loading="lazy"
436                                        class="size-10 sm:size-8 rounded-lg object-cover shrink-0"
437                                    />
438                                <!--[if ENDBLOCK]><![endif]-->                                <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                <div class="flex flex-col min-w-0">
439                                    <span class="font-semibold">Buck’s Fizz</span>
440                                    <!--[if BLOCK]><![endif]-->                                        <span class="text-xs leading-tight text-zinc-400 dark:text-zinc-400">Champagne / prosecco, Orange juice</span>
441                                    <!--[if ENDBLOCK]><![endif]-->                                </div>
442
443    </ui-option>
444                        <!--[if ENDBLOCK]><![endif]-->                                            <!--[if BLOCK]><![endif]-->                            
445                            <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/7615/mike-kenney')" data-flux-command-item>
446    
447    <!--[if BLOCK]><![endif]-->                                    <img
448                                        src="https://mmacv5generalimages.s3.amazonaws.com/1238/conversions/891051246-preview.jpg"
449                                        alt="Mike Kenney"
450                                        loading="lazy"
451                                        class="size-10 sm:size-8 rounded-lg object-cover shrink-0"
452                                    />
453                                <!--[if ENDBLOCK]><![endif]-->                                <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                <div class="flex flex-col min-w-0">
454                                    <span class="font-semibold">Mike Kenney</span>
455                                    <!--[if BLOCK]><![endif]-->                                        <span class="text-xs leading-tight text-zinc-400 dark:text-zinc-400">Whiskey, Ginger beer</span>
456                                    <!--[if ENDBLOCK]><![endif]-->                                </div>
457
458    </ui-option>
459                        <!--[if ENDBLOCK]><![endif]-->                    <!--[if ENDBLOCK]><![endif]-->
460                    
461                    <!--[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>
462
463                    <!--[if BLOCK]><![endif]-->                        <!--[if BLOCK]><![endif]-->                            
464                            <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>
465            <div class="relative">
466                            <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">
467  <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"/>
468</svg>
469
470                            </div>
471    
472    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                <div class="flex flex-col min-w-0">
473                                    <span class="">Mastering the Shake</span>
474                                    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                </div>
475
476    </ui-option>
477                        <!--[if ENDBLOCK]><![endif]-->                                            <!--[if BLOCK]><![endif]-->                            
478                            <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>
479            <div class="relative">
480                            <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">
481  <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"/>
482</svg>
483
484                            </div>
485    
486    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                <div class="flex flex-col min-w-0">
487                                    <span class="">Shaken or Stirred?</span>
488                                    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                </div>
489
490    </ui-option>
491                        <!--[if ENDBLOCK]><![endif]-->                                            <!--[if BLOCK]><![endif]-->                            
492                            <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>
493            <div class="relative">
494                            <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">
495  <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"/>
496</svg>
497
498                            </div>
499    
500    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                <div class="flex flex-col min-w-0">
501                                    <span class="">The History of the Manhattan</span>
502                                    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                </div>
503
504    </ui-option>
505                        <!--[if ENDBLOCK]><![endif]-->                                            <!--[if BLOCK]><![endif]-->                            
506                            <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>
507            <div class="relative">
508                            <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">
509  <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"/>
510</svg>
511
512                            </div>
513    
514    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                <div class="flex flex-col min-w-0">
515                                    <span class="">Pairing Cocktails with Food</span>
516                                    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                </div>
517
518    </ui-option>
519                        <!--[if ENDBLOCK]><![endif]-->                                            <!--[if BLOCK]><![endif]-->                            
520                            <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>
521            <div class="relative">
522                            <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">
523  <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"/>
524</svg>
525
526                            </div>
527    
528    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                <div class="flex flex-col min-w-0">
529                                    <span class="">Muddling - The Why, What, and How?</span>
530                                    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                                </div>
531
532    </ui-option>
533                        <!--[if ENDBLOCK]><![endif]-->                    <!--[if ENDBLOCK]><![endif]-->
534                    
535                    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                <!--[if ENDBLOCK]><![endif]-->
536
537    <ui-option-empty class="data-hidden:hidden">
538    <div class="flex items-center justify-center h-10">
539        <div class="text-sm text-zinc-500 dark:text-zinc-400 font-medium">
540            No results found
541        </div>
542    </div>
543</ui-option-empty>
544</ui-options>
545
546            <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">
547                <div class="flex items-center gap-2">
548                    <kbd class="px-1.5 py-0.5 bg-zinc-100 dark:bg-zinc-800 rounded text-[10px]">esc</kbd>
549                    <span>to close</span>
550                </div>
551                <div class="flex items-center gap-2">
552                    <kbd class="px-1.5 py-0.5 bg-zinc-100 dark:bg-zinc-800 rounded text-[10px]">enter</kbd>
553                    <span>to select</span>
554                </div>
555            </div>
556</ui-select>
557
558                        </dialog>
559</ui-modal>
560</div>
561<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;vKQiFC5URXbnwo6u40zk&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;fb9149c68f31fb45f94d1f11e141903da53c686a6284bf4c24089fc906e9e353&quot;}" wire:effects="{&quot;partials&quot;:[],&quot;listeners&quot;:[&quot;open-welcome-modal&quot;]}" wire:id="vKQiFC5URXbnwo6u40zk" wire:name="welcome">
562    <ui-modal wire:model.self="showModal" data-flux-modal>
563    
564    <dialog
565        wire:ignore.self 
566        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"
567                                        x-data="fluxModal(null, 'vKQiFC5URXbnwo6u40zk')"
568                x-on:modal-show.document="handleShow($event)"
569        x-on:modal-close.document="handleClose($event)"
570    >
571                    <div class="space-y-4">
572            <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>
573
574            <p>Welcome to Make Me a Cocktail <span class="font-semibold">PREMIUM</span> - where your cocktail adventure begins!</p>
575
576            <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>
577
578            <p>Our platform is your playground to mix, mingle, and explore the vibrant world of cocktails, so get shaking and get mixing!</p>
579
580            <img src="https://makemeacocktail.com/img/misc/nolist.avif" alt="no cocktails" class="max-w-sm w-full m-auto block mt-6">
581        </div>
582
583                            <div class="absolute top-0 end-0 mt-4 me-4">
584                    <ui-close data-flux-modal-close >
585    <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">
586        <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">
587  <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"/>
588</svg>
589    </button>
590</ui-close>
591                </div>
592                        </dialog>
593</ui-modal>
594</div>
595<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;yuVoZF6xSg9FbwKTqB86&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;c73bacf5a92132613fbc310a6e44e333e84ab4820ca14173872d23957123703d&quot;}" wire:effects="{&quot;partials&quot;:[],&quot;listeners&quot;:[&quot;open-welcome-free-modal&quot;]}" wire:id="yuVoZF6xSg9FbwKTqB86" wire:name="welcome-free">
596    <ui-modal wire:model.self="showModal" data-flux-modal>
597    
598    <dialog
599        wire:ignore.self 
600        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"
601                                        x-data="fluxModal(null, 'yuVoZF6xSg9FbwKTqB86')"
602                x-on:modal-show.document="handleShow($event)"
603        x-on:modal-close.document="handleClose($event)"
604    >
605                    <div class="space-y-4">
606            <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>
607
608            <p>Welcome to Make Me a Cocktail - where your cocktail adventure begins!</p>
609
610            <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>
611
612            <p>Our platform is your playground to mix, mingle, and explore the vibrant world of cocktails, so get shaking and get mixing!</p>
613
614            <img src="https://makemeacocktail.com/img/misc/nolist.avif" alt="no cocktails" class="max-w-sm w-full m-auto block mt-6">
615        </div>
616
617                            <div class="absolute top-0 end-0 mt-4 me-4">
618                    <ui-close data-flux-modal-close >
619    <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">
620        <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">
621  <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"/>
622</svg>
623    </button>
624</ui-close>
625                </div>
626                        </dialog>
627</ui-modal>
628</div>
629<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;iMH4oX3MxazL0PWlrRaV&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;b398b32d52baf3e76c81a637dc26da931d32ed1283c6d9b733519b4a18156390&quot;}" wire:effects="{&quot;partials&quot;:[],&quot;listeners&quot;:[&quot;open-upgraded-modal&quot;]}" wire:id="iMH4oX3MxazL0PWlrRaV" wire:name="upgraded">
630    <ui-modal wire:model.self="showModal" data-flux-modal>
631    
632    <dialog
633        wire:ignore.self 
634        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"
635                                        x-data="fluxModal(null, 'iMH4oX3MxazL0PWlrRaV')"
636                x-on:modal-show.document="handleShow($event)"
637        x-on:modal-close.document="handleClose($event)"
638    >
639                    <div class="space-y-4">
640            <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>
641
642            <p>You've just been upgraded to our super amazing <span class="font-semibold">PREMIUM</span> membership - where your new cocktail adventure begins!</p>
643
644            <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>
645
646            <p>
646Our platform is your playground to mix, mingle, and explore the vibrant world of cocktails, so get shaking and get mixing!</p>
647
648            <img src="https://makemeacocktail.com/img/misc/nolist.avif" alt="no cocktails" class="max-w-sm m-auto block mt-6">
649        </div>
650
651                            <div class="absolute top-0 end-0 mt-4 me-4">
652                    <ui-close data-flux-modal-close >
653    <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">
654        <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">
655  <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"/>
656</svg>
657    </button>
658</ui-close>
659                </div>
660                        </dialog>
661</ui-modal>
662</div>
663<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;Sgp4WGMCteNLUsEaYg2V&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;842610aafabc767af160973e9f416ddd6b317940aa3bd36743317f784e7ae808&quot;}" wire:effects="{&quot;partials&quot;:[],&quot;listeners&quot;:[&quot;open-upsell-modal&quot;]}" wire:id="Sgp4WGMCteNLUsEaYg2V" wire:name="upsell-modal-window">
664    <ui-modal wire:model.self="showModal" data-flux-modal>
665    
666    <dialog
667        wire:ignore.self 
668        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"
669                                        x-data="fluxModal(null, 'Sgp4WGMCteNLUsEaYg2V')"
670                x-on:modal-show.document="handleShow($event)"
671        x-on:modal-close.document="handleClose($event)"
672    >
673                    <div class="space-y-4">
674            <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>
675
676            <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>
677            <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>
678
679            <div>
680                <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">
681        <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>
682
683        <div class="order-last mt-6">
684            <ul role="list" class="-my-2 text-sm  text-gray-900">
685                <h4 class="font-semibold text-lg"">Personalised Cocktail Mastery</h4>
686                <li class="flex py-2">
687    <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">
688  <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"/>
689</svg></div>
690    <span class="ml-4"><span class="font-semibold">Cocktail recipe masterclass tips</span></span>
691</li>
692                <li class="flex py-2">
693    <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">
694  <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"/>
695</svg></div>
696    <span class="ml-4"><span class="font-semibold">Access to Cocktail Connie</span></span>
697</li>
698                <li class="flex py-2">
699    <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">
700  <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"/>
701</svg></div>
702    <span class="ml-4"><span class="font-semibold">Cocktail creator plus</span></span>
703</li>
704
705
706                <h4 class="font-semibold text-lg mt-4"">Supercharged Tools</h4>
707                <li class="flex py-2">
708    <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">
709  <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"/>
710</svg></div>
711    <span class="ml-4"><span class="font-semibold">Unlimited A.I. search</span></span>
712</li>
713                <li class="flex py-2">
714    <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">
715  <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"/>
716</svg></div>
717    <span class="ml-4"><span class="font-semibold">All menu creator themes</span></span>
718</li>
719
720
721                <h4 class="font-semibold text-lg mt-4"">Smarter Home Bar Management</h4>
722                <li class="flex py-2">
723    <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">
724  <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"/>
725</svg></div>
726    <span class="ml-4"><span class="font-semibold">Multiple bars</span></span>
727</li>
728                <li class="flex py-2">
729    <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">
730  <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"/>
731</svg></div>
732    <span class="ml-4"><span class="font-semibold">Photo your bar</span></span>
733</li>
734                <li class="flex py-2">
735    <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">
736  <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"/>
737</svg></div>
738    <span class="ml-4"><span class="font-semibold">Personal My Bar image</span></span>
739</li>
740
741                <h4 class="font-semibold text-lg mt-4"">A Cleaner Experience</h4>
742                <li class="flex py-2">
743    <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">
744  <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"/>
745</svg></div>
746    <span class="ml-4"><span class="font-semibold">No ads, no intrusions</span></span>
747</li>
748                <li class="flex py-2">
749    <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">
750  <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"/>
751</svg></div>
752    <span class="ml-4"><span class="font-semibold">... and so much more ...</span></span>
753</li>
754            </ul>
755        </div>
756
757
758    </section>
759            </div>
760
761            <div class="flex justify-between w-full pt-2">
762                <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)">
763        <div class="absolute inset-0 flex items-center justify-center opacity-0" data-flux-loading-indicator>
764                <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">
765    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
766    <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>
767</svg>
768                    </div>
769        
770        
771                    
772            
773            <span>Not now</span>
774    </button>
775                <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">
776        Register
777    </a>
778            </div>
779        </div>
780
781                            <div class="absolute top-0 end-0 mt-4 me-4">
782                    <ui-close data-flux-modal-close >
783    <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">
784        <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">
785  <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"/>
786</svg>
787    </button>
788</ui-close>
789                </div>
790                        </dialog>
791</ui-modal>
792</div>
793
794
795
796<input type="hidden" name="_token" id="_token" value="dwKEe8YFjEu4tPCAFVNZ3LxXhFkAbmy9Bv7rQV87"/>
797<input type="hidden" name="csrf_token" id="csrf_token" value="dwKEe8YFjEu4tPCAFVNZ3LxXhFkAbmy9Bv7rQV87"/>
798
799 
800
801    <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)]"
802     data-bginstant="https://makemeacocktail.com/img/page-heros/login.avif?v=2"
803>
804            <div class="page-contain mt-[80px] md:mt-[160px]"></div>
805    </div>
806
807
808<div class="z-20 relative" >
809        <header class="row sticky top-0 "
810                    style="z-index: 99;"
811            >
812        <div class="page-contain
813            bg-[#000]/50 bg-blend-multiply backdrop-blur-lg z-100 relative
814    " x-data="{ mobileMenuVisible: false, accountMenuVisible: false }">
815    <div class="py-4 -mr-4"><div class="flex justify-between items-center z-50">
816    <a href="https://makemeacocktail.com" class="flex items-center gap-x-3">
817        <img src="https://makemeacocktail.com/img/logo.svg" class="w-6 h-6" alt="logo"/>
818        <h2 class="font-magenda text-xl leading-1 py-0 my-0 pt-1
819                    text-white
820                "
821        role="heading">Make Me a Cocktail</h2>
822    </a>
823
824    <div class="justify-between items-center hidden md:flex">
825        <a href="https://makemeacocktail.com/surpriseMe"
826   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
827            text-white
828       "
829    
830>
831                            <div
832    class="
833    dark:text-white
834            text-inherit
835        "
836>
837    <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">
838<path d="M18 15L21 18M21 18L18 21M21 18H18.5689C17.6297 18 17.1601 18 
83816.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"/>
839</svg>
840</div>
841                        Surprise me
842</a>
843        <a href="javascript:;"
844   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
845            text-white
846       "
847    onclick="Livewire.dispatch('open-command-palette')"
848>
849                            <div
850    class="
851    dark:text-white
852            text-inherit
853        "
854>
855    <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">
856<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"/>
857</svg>
858</div>
859                        Search
860</a>
861        <a href="https://makemeacocktail.com/subscribe"
862   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
863            text-white
864       "
865    
866>
867                            <div
868    class="
869    dark:text-white
870            text-inherit
871        "
872>
873    <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">
874<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"/>
875</svg>
876</div>
877                        Newsletter
878</a>
879                    <a href="https://makemeacocktail.com/login"
880   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
881            text-white
882       "
883    
884>
885                            <div
886    class="
887    dark:text-white
888            text-inherit
889        "
890>
891    <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">
892<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"/>
893</svg>
894</div>
895                        Log in / register
896</a>
897            </div>
898
899    <div class=" md:hidden flex items-center gap-x-2">
900
901        <div onclick="Livewire.dispatch('open-command-palette')" class="mr-1 cursor-pointer p-1">
902                            <div
903    class="
904    dark:text-white
905            text-inherit
906        "
907>
908    <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">
909<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 
9096.58172 19 11Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
910</svg>
911</div>
912                    </div>
913
914        <div @click="mobileMenuVisible = !mobileMenuVisible; accountMenuVisible = false">
915
916            <svg x-show="!mobileMenuVisible" class="w-6 h-6 cursor-pointer
917                                    text-white
918                " 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">
919  <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"/>
920</svg>            <div class="border-2 rounded-md border-blue-100 bg-gray-600" x-show="mobileMenuVisible" x-cloak>
921                <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">
922  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
923</svg>            </div>
924        </div>
925
926        <div class="relative mr-2">
927                    </div>
928    </div>
929
930</div>
931</div>
932    <div class="md:pt-4 md:pb-4 -ml-4"><div class="justify-between items-center hidden md:flex">
933    <nav x-data="{ submenu: false }">
934        <ul class="flex" role="menubar">
935            <li>
936                <a href="https://makemeacocktail.com/myBar"
937   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
938
939                          text-white
940                "
941    
942    role="menuitem"
943>
944        My Bar
945    </a>
946            </li>
947            <li>
948                <a href="https://makemeacocktail.com/cocktails"
949   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
950
951                          text-white
952                "
953    
954    role="menuitem"
955>
956        Cocktails
957    </a>
958            </li>
959            <li>
960                <a href="https://makemeacocktail.com/listmania"
961   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
962
963                          text-white
964                "
965    
966    role="menuitem"
967>
968        Listmania
969    </a>
970            </li>
971            <li>
972                <a href="https://makemeacocktail.com/level-up"
973   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
974
975                          text-white
976                "
977    
978    role="menuitem"
979>
980        Level up
981    </a>
982            </li>
983                                                <li class="relative">
984                <a href="javascript:;"
985   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
986
987                          text-white
988                "
989    @click="submenu = !submenu"
990    role="menuitem"
991>
992        Explore
993            <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
994                     text-white
995        " 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">
996  <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/>
997</svg>    </a>
998                <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"
999                    x-show="submenu"
1000                    x-cloak
1001                    x-transition:enter="transition ease-out duration-150"
1002                    x-transition:enter-start="opacity-0 scale-90"
1003                    x-transition:enter-end="opacity-100 scale-100"
1004                    x-transition:leave="transition ease-in duration-150"
1005                    x-transition:leave-start="opacity-100 scale-100"
1006                    x-transition:leave-end="opacity-0 scale-90"
1007                >
1008                    <li>
1009                        <a
1010            href="https://makemeacocktail.com/search"
1011            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"
1012    role="menuitem"
1013>
1014        Search
1015</a>
1016                    </li>
1017
1018                    <li>
1019                        <a
1020            href="https://makemeacocktail.com/ingredients"
1021            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"
1022    role="menuitem"
1023>
1024        Ingredients
1025</a>
1026                    </li>
1027                    <li>
1028                        <a
1029            href="https://makemeacocktail.com/blog"
1030            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"
1031    role="menuitem"
1032>
1033        Blog
1034</a>
1035                    </li>
1036
1037                    <li class="border-t border-gray-50">
1038                        <a
1039            href="https://makemeacocktail.com/cocktail-creator"
1040            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"
1041    role="menuitem"
1042>
1043        Cocktail creator
1044</a>
1045                    </li>
1046                    <li>
1047                        <a
1048            href="https://makemeacocktail.com/add-a-recipe"
1049            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"
1050    role="menuitem"
1051>
1052        Add a recipe
1053</a>
1054                    </li>
1055                    <li>
1056                        <a
1057            href="https://makemeacocktail.com/menu-creator"
1058            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"
1059    role="menuitem"
1060>
1061        Menu creator
1062</a>
1063                    </li>
1064                    <li>
1065                        <a
1066            href="https://makemeacocktail.com/wordpress-plugin"
1067            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"
1068    role="menuitem"
1069>
1070        Wordpress plugin
1071</a>
1072                    </li>
1073                    <li>
1074                        <a
1075            href="https://makemeacocktail.com/widget-creator"
1076            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"
1077    role="menuitem"
1078>
1079        Widget creator
1080</a>
1081                    </li>
1082
1083                    <li class="border-t border-gray-50">
1084                        <a
1085            href="https://makemeacocktail.com/getting-started"
1086            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"
1087    role="menuitem"
1088>
1089        Getting started
1090</a>
1091                    </li>
1092                    <li>
1093                        <a
1094            href="https://makemeacocktail.com/premium"
1095            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"
1096    role="menuitem"
1097>
1098            <div
1099    class="
1100    dark:text-white
1101            text-inherit
1102        "
1103>
1104    <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">
1105<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"/>
1106</svg>
1107</div>
1108        Premium membership
1109</a>
1110                    </li>
1111                </ul>
1112            </li>
1113                            <li>
1114                    <a href="https://makemeacocktail.com/premium"
1115   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
1116
1117                         text-yellow-400 dark:text-yellow-500 py-2!
1118                "
1119    
1120    role="menuitem"
1121>
1122            <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">
1123  <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
1123L15.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"/>
1124</svg>        Go Premium
1125    </a>
1126                </li>
1127                    </ul>
1128    </nav>
1129
1130    <ul x-data="myBarCount()" @mybar-count-changed.window="count += $event.detail.delta" class="flex items-center
1131                    text-white
1132            ">
1133        <li>
1134            <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">
1135                <div
1136    class="
1137    dark:text-white
1138            text-inherit
1139        "
1140>
1141    <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">
1142    <path
1143        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"
1144        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
1145</svg>
1146
1147</div>
1148                <div class="leading-4">
1149                    <template x-if="count === null">
1150                        <span class="inline-block w-16 h-3 bg-gray-300 dark:bg-gray-600 rounded animate-pulse"></span>
1151                    </template>
1152                    <template x-if="count === 0">
1153                        <span>Your bar is currently empty</span>
1154                    </template>
1155                    <template x-if="count > 0">
1156                        <span><span class="myBarIngredientCount" x-text="count"></span>  items in your active bar</span>
1157                    </template>
1158                </div>
1159            </a>
1160        </li>
1161        <li class="darkModeToggle relative flex items-center leading-4" @click="toggleDarkLightModeByClick()" title="Switch dark / light mode">
1162            <div
1163    class="
1164    dark:text-white
1165            text-inherit
1166        "
1167>
1168    <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">
1169    <path
1170          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"
1171          fill="currentColor"
1172          fill-rule="evenodd" clip-rule="evenodd"
1173    />
1174</svg>
1175
1176</div>
1177            <div class="absolute top-2.5 right-8">
1178                <div
1179    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"
1180            x-show="darkLightModeTooltip"
1181        style="min-width: 220px; transform: translateY(-50%)"
1182    x-cloak
1183>
1184    You can switch theme with shift + /
1185</div>
1186            </div>
1187        </li>
1188        <li class="ml-2">
1189            <div x-data="{ open: false }" @click.outside="open = false" class="relative flex items-center">
1190            <button
1191                @click="open = !open"
1192                class="flex items-center gap-1 cursor-pointer hover:opacity-75 transition duration-300 ease-in-out"
1193                title="Switch language"
1194            >
1195                <span class="text-xl">🇬🇧</span>
1196                <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">
1197  <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/>
1198</svg>            </button>
1199
1200            <div
1201                x-show="open"
1202                x-cloak
1203                x-transition:enter="transition ease-out duration-150"
1204                x-transition:enter-start="opacity-0 scale-90"
1205                x-transition:enter-end="opacity-100 scale-100"
1206                x-transition:leave="transition ease-in duration-150"
1207                x-transition:leave-start="opacity-100 scale-100"
1208                x-transition:leave-end="opacity-0 scale-90"
1209                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"
1210            >
1211                                                            <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">
1212                            <span class="text-base">🇬🇧</span>
1213                            English
1214                        </span>
1215                                                                                <a
1216                            href="https://makemeacocktail.com/de/login"
1217                            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"
1218                        >
1219                            <span class="text-base">🇩🇪</span>
1220                            Deutsch
1221                        </a>
1222                                                                                <a
1223                            href="https://makemeacocktail.com/es/login"
1224                            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"
1225                        >
1226                            <span class="text-base">🇪🇸</span>
1227                            Español
1228                        </a>
1229                                                                                <a
1230                            href="https://makemeacocktail.com/fr/login"
1231                            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"
1232                        >
1233                            <span class="text-base">🇫🇷</span>
1234                            Français
1235                        </a>
1236                                                                                <a
1237                            href="https://makemeacocktail.com/pt/login"
1238                            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"
1239                        >
1240                            <span class="text-base">🇵🇹</span>
1241                            Português
1242                        </a>
1243                                                                                <a
1244                            href="https://makemeacocktail.com/pt-BR/login"
1245                            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"
1246                        >
1247                            <span class="text-base">🇧🇷</span>
1248                            Português (Brasil)
1249                        </a>
1250                                                                                <a
1251                            href="https://makemeacocktail.com/it/login"
1252                            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"
1253                        >
1254                            <span class="text-base">🇮🇹</span>
1255                            Italiano
1256                        </a>
1257                                                                                <a
1258                            href="https://makemeacocktail.com/nl/login"
1259                            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"
1260                        >
1261                            <span class="text-base">🇳🇱</span>
1262                            Nederlands
1263                        </a>
1264                                                </div>
1265        </div>
1266            </li>
1267
1268        <li x-show="count > 3" x-cloak>
1269            <a href="https://makemeacocktail.com/search/mybar"
1270               data-hotkey="Mod+b"
1271               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
1272               hover:rotate-90 transform transition duration-700 ease-in-out
1273               "
1274               title="See all cocktails you can make"
1275            >
1276                <div
1277    class="
1278    dark:text-white
1279            text-inherit
1280        "
1281>
1282    <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">
1283    <path
1284        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"
1285        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
1286</svg>
1287
1288</div>
1289            </a>
1290        </li>
1291    </ul>
1292</div>
1293
1294
1295<div class="md:hidden absolute top-16 left-0 right-0 w-full px-4"
1296     style="z-index: 90"
1297     x-cloak
1298     x-show="mobileMenuVisible"
1299     x-transition:enter="transition ease-out duration-150"
1300     x-transition:enter-start="opacity-0 scale-90"
1301     x-transition:enter-end="opacity-100 scale-100"
1302     x-transition:leave="transition ease-in duration-150"
1303     x-transition:leave-start="opacity-100 scale-100"
1304     x-transition:leave-end="opacity-0 scale-90">
1305    <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">
1306        <ul>
1307            <li class="pt-2">
1308                <a
1309            href="https://makemeacocktail.com/account/dashboard"
1310        class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3
1311            justify-start
1312        "
1313    role="menuitem"
1314    
1315>
1316                    Dashboard
1317    </a>
1318            </li>
1319            <li>
1320                <a
1321            href="https://makemeacocktail.com/myBar"
1322        class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3
1323            justify-start
1324        "
1325    role="menuitem"
1326    
1327>
1328                    My Bar
1329    </a>
1330            </li>
1331            <li>
1332                <a
1333            href="https://makemeacocktail.com/cocktails"
1334        class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3
1335            justify-start
1336        "
1337    role="menuitem"
1338    
1339>
1340                    Cocktails
1341    </a>
1342            </li>
1343            <li>
1344                <a
1345            href="https://makemeacocktail.com/listmania"
1346        class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3
1347            justify-start
1348        "
1349    role="menuitem"
1350    
1351>
1352                    Listmania
1353    </a>
1354            </li>
1355            <li>
1356                <a
1357            href="https://makemeacocktail.com/level-up"
1358        class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3
1359            justify-start
1360        "
1361    role="menuitem"
1362    
1363>
1364                    Level up
1365    </a>
1366            </li>
1367
1368                                                            <li>
1369                <a
1370            href="https://makemeacocktail.com/premium"
1371        class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3
1372            justify-start
1373        "
1374    role="menuitem"
1375    
1376>
1377                                <div
1378    class="
1379    dark:text-white
1380            text-inherit
1381        "
1382>
1383    <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">
1384<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 
138414.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"/>
1385</svg>
1386</div>
1387                            Go Premium
1388    </a>
1389            </li>
1390                        <li class="relative">
1391                <a
1392        class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3
1393            justify-between
1394        "
1395    role="menuitem"
1396    @click="submenu = !submenu"
1397>
1398            Explore
1399                                <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">
1400  <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"/>
1401</svg>                    </a>
1402                <ul class="bg-gray-00 dark:bg-gray-950 px-4" x-show="submenu"
1403                    x-transition:enter="transition ease-out duration-150"
1404                    x-transition:enter-start="opacity-0"
1405                    x-transition:enter-end="opacity-100"
1406                    x-transition:leave="transition ease-in duration-150"
1407                    x-transition:leave-start="opacity-100"
1408                    x-transition:leave-end="opacity-0">
1409                    <li>
1410                        <a
1411            href="https://makemeacocktail.com/cocktail-creator"
1412        class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3
1413            justify-start
1414        "
1415    role="menuitem"
1416    
1417>
1418                    Cocktail creator
1419    </a>
1420                    </li>
1421                    <li>
1422                        <a
1423            href="https://makemeacocktail.com/add-a-recipe"
1424        class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3
1425            justify-start
1426        "
1427    role="menuitem"
1428    
1429>
1430                    Add a recipe
1431    </a>
1432                    </li>
1433                    <li>
1434                        <a
1435            href="https://makemeacocktail.com/menu-creator"
1436        class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3
1437            justify-start
1438        "
1439    role="menuitem"
1440    
1441>
1442                    Menu creator
1443    </a>
1444                    </li>
1445                    <li>
1446                        <a
1447            href="https://makemeacocktail.com/wordpress-plugin"
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                    Wordpress plugin
1455    </a>
1456                    </li>
1457                    <li>
1458                        <a
1459            href="https://makemeacocktail.com/widget-creator"
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                    Widget creator
1467    </a>
1468                    </li>
1469                    <li>
1470                        <a
1471            href="https://makemeacocktail.com/ingredients"
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                    Ingredients
1479    </a>
1480                    </li>
1481                    <li>
1482                        <a
1483            href="https://makemeacocktail.com/blog"
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                    Blog
1491    </a>
1492                    </li>
1493                    <li>
1494                        <a
1495            href="https://makemeacocktail.com/getting-started"
1496        class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3 pb-6
1497            justify-start
1498        "
1499    role="menuitem"
1500    
1501>
1502                    Getting started
1503    </a>
1504                    </li>
1505                </ul>
1506            </li>
1507        </ul>
1508
1509        <ul class="border-t border-gray-100 dark:border-gray-800 grid grid-cols-2 py-4">
1510            <li>
1511                <a
1512            href="https://makemeacocktail.com/surpriseMe"
1513        class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3
1514            justify-start
1515        "
1516    role="menuitem"
1517    
1518>
1519                                <div
1520    class="
1521    dark:text-white
1522            text-inherit
1523        "
1524>
1525    <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">
1526<path d="M18 15L21 18M21 18L18 21M21 18H18.5689C17.6297 18 17.1601 18 
152616.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"/>
1527</svg>
1528</div>
1529                            Surprise me
1530    </a>
1531            </li>
1532            <li>
1533                <a
1534            href="https://makemeacocktail.com/search"
1535        class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3
1536            justify-start
1537        "
1538    role="menuitem"
1539    
1540>
1541                                <div
1542    class="
1543    dark:text-white
1544            text-inherit
1545        "
1546>
1547    <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">
1548<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"/>
1549</svg>
1550</div>
1551                            Power search
1552    </a>
1553            </li>
1554            <li>
1555                <a
1556            href="https://makemeacocktail.com/subscribe"
1557        class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3
1558            justify-start
1559        "
1560    role="menuitem"
1561    
1562>
1563                                <div
1564    class="
1565    dark:text-white
1566            text-inherit
1567        "
1568>
1569    <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">
1570<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"/>
1571</svg>
1572</div>
1573                            Newsletter
1574    </a>
1575            </li>
1576            <li>
1577                <a
1578        class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3 darkModeToggle
1579            justify-start
1580        "
1581    role="menuitem"
1582    @click="toggleDarkLightModeByClick"
1583>
1584                                    <div
1585    class="
1586    dark:text-white
1587            text-inherit
1588        "
1589>
1590    <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">
1591    <path
1592          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"
1593          fill="currentColor"
1594          fill-rule="evenodd" clip-rule="evenodd"
1595    />
1596</svg>
1597
1598</div>
1599                            Dark mode
1600    </a>
1601            </li>
1602            <li class="col-span-2">
1603                <span x-data="{ lang_choice_open: false }">
1604        <a
1605        class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3 !justify-center
1606            justify-start
1607        "
1608    role="menuitem"
1609    @click="lang_choice_open = !lang_choice_open"
1610>
1611                                <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">
1612  <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"/>
1613</svg> &nbsp;
1614                            English
1615    </a>
1616        <ul x-show="lang_choice_open" x-cloak x-transition class="bg-gray-50 dark:bg-gray-950 px-4">
1617                                                                            <li>
1618                        <a href="https://makemeacocktail.com/de/login"
1619                           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"
1620                        >
1621                            <span class="text-lg">🇩🇪</span>
1622                            Deutsch
1623                        </a>
1624                    </li>
1625                                                                <li>
1626                        <a href="https://makemeacocktail.com/es/login"
1627                           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"
1628                        >
1629                            <span class="text-lg">🇪🇸</span>
1630                            Español
1631                        </a>
1632                    </li>
1633                                                                <li>
1634                        <a href="https://makemeacocktail.com/fr/login"
1635                           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"
1636                        >
1637                            <span class="text-lg">🇫🇷</span>
1638                            Français
1639                        </a>
1640                    </li>
1641                                                                <li>
1642                        <a href="https://makemeacocktail.com/pt/login"
1643                           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"
1644                        >
1645                            <span class="text-lg">🇵🇹</span>
1646                            Português
1647                        </a>
1648                    </li>
1649                                                                <li>
1650                        <a href="https://makemeacocktail.com/pt-BR/login"
1651                           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"
1652                        >
1653                            <span class="text-lg">🇧🇷</span>
1654                            Português (Brasil)
1655                        </a>
1656                    </li>
1657                                                                <li>
1658                        <a href="https://makemeacocktail.com/it/login"
1659                           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"
1660                        >
1661                            <span class="text-lg">🇮🇹</span>
1662                            Italiano
1663                        </a>
1664                    </li>
1665                                                                <li>
1666                        <a href="https://makemeacocktail.com/nl/login"
1667                           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"
1668                        >
1669                            <span class="text-lg">🇳🇱</span>
1670                            Nederlands
1671                        </a>
1672                    </li>
1673                                    </ul>
1674            </span>
1675                </li>
1676
1677
1678        </ul>
1679
1680        <div class="px-4 pb-4 flex flex-col gap-y-3">
1681                            <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">
1682        Sign up for free
1683    </a>
1684
1685
1686
1687                <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">
1688        Log in
1689    </a>
1690
1691
1692                    </div>
1693
1694    </nav>
1695</div>
1696</div>
1697
1698    </div>
1699    </header>
1700    <div id="main" class="row">
1701                    <div class="mt-[30vh] page-contain bg-gray-00 dark:bg-gray-1000">
1702        <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">
1703    <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>
1704</div>
1705
1706        
1707        
1708        <div class="flex justify-between py-10 flex-col md:flex-row gap-4">
1709            <div class="w-full">
1710                <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">
1711
1712                    <h4 class="font-semibold text-lg"">Sign in to your account</h4>
1713
1714                    <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>
1715
1716                    <!-- Social Login Buttons -->
1717                    <div class="flex flex-col gap-3 mt-6">
1718                        <a href="https://makemeacocktail.com/auth/google/redirect"
1719                           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">
1720                            <svg class="w-5 h-5" viewBox="0 0 24 24">
1721                                <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"/>
1722                                <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"/>
1723                                <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"/>
1724                                <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"/>
1725                            </svg>
1726                            Continue with Google
1727                        </a>
1728                        <a href="https://makemeacocktail.com/auth/apple/redirect"
1729                           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">
1730                            <svg class="w-6 h-6 w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
1731    <g>
1732        <path fill="none" d="M0 0h24v24H0z"/>
1733        <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"/>
1734    </g>
1735</svg>                            Continue with Apple
1736                        </a>
1737                    </div>
1738
1739                    <div data-orientation="horizontal" role="none" class="flex items-center w-full my-6" data-flux-separator>
1740        <div class="border-0 [print-color-adjust:exact] bg-zinc-800/15 dark:bg-white/20 h-px w-full grow"></div>
1741
1742        <span class="shrink mx-6 font-medium text-sm text-zinc-500 dark:text-zinc-300 whitespace-nowrap">or</span>
1743
1744        <div class="border-0 [print-color-adjust:exact] bg-zinc-800/15 dark:bg-white/20 h-px w-full grow"></div>
1745    </div>
1746
1747                    <form action="https://makemeacocktail.com/login" method="POST" class="gap-y-4 flex flex-col">
1748                            <input type="hidden" name="_token" value="dwKEe8YFjEu4tPCAFVNZ3LxXhFkAbmy9Bv7rQV87" />
1749
1750                            <div
1751    class=""
1752>
1753            <label for="email" class="text-gray-500 font-semibold text-sm mb-2">Email</label>
1754        <input
1755        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
1756            bg-white border-gray-100
1757            dark:bg-gray-900 dark:border-gray-700 dark:text-white" type="text" name="email" label="Email" required="required" placeholder=""
1758        type="text"
1759        name="email"
1760        wire:model.live="email"
1761        placeholder=""
1762        type="text" name="email" label="Email" required="required" placeholder=""
1763    />
1764</div>
1765                            <div
1766    class=""
1767>
1768            <label for="password" class="text-gray-500 font-semibold text-sm mb-2">Password</label>
1769        <input
1770        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
1771            bg-white border-gray-100
1772            dark:bg-gray-900 dark:border-gray-700 dark:text-white" type="password" name="password" label="Password" required="required" placeholder=""
1773        type="password"
1774        name="password"
1775        wire:model.live="password"
1776        placeholder=""
1777        type="password" name="password" label="Password" required="required" placeholder=""
1778    />
1779</div>
1780
1781                            <div>
1782                                <input type="checkbox" name="rememberMe" id="rememberMe"
1783                                       class="border border-gray-300 rounded-md accent-amber-500 dark:accent-amber-400"
1784                                />
1785                                <label for="rememberMe" class="w-full text-sm"
1786                                >Remember me</label>
1787                            </div>
1788                            <button
1789        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">
1790        Login
1791    </button>
1792
1793
1794
1795
1796                        </form>
1797
1798                    <div class="mt-4 flex justify-between flex-col md:flex-row gap-2 text-sm">
1799                        <a href="/forgot-password" class="text-blue-600 dark:text-blue-300">Forgot password?</a>
1800                    </div>
1801                </section>
1802
1803                <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">
1804                    <h4 class="font-semibold text-lg"">Redeeming a gift voucher?</h4>
1805                    <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>
1806                    <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">
1807        Click here
1808    </a>
1809
1810
1811
1812                    <div class="mt-4 flex justify-between flex-col md:flex-row gap-2 text-sm">
1813                        <a href="https://makemeacocktail.com/gift-card" class="text-blue-600 dar
1813k:text-blue-300 font-semibold">Gift vouchers? Tell me more.</a>
1814
1815                    </div>
1816                </section>
1817            </div>
1818
1819            <section>
1820
1821                <div class="max-w-2xl m-auto">
1822
1823                <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">
1824            <h2 class="font-grotesk text-4xl text-gray-800 dark:text-gray-200 text-xl text-gray-800!">Upgrade your mixology</h2>
1825            <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
1826                <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>
1827
1828            <ul role="list" class="mt-2 flex flex-col text-sm text-gray-700 gap-y-1">
1829                <li class="flex py-0">
1830    <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">
1831  <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"/>
1832</svg></div>
1833    <span class="ml-4">Save your bar forever</span>
1834</li>
1835                <li class="flex py-0">
1836    <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">
1837  <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"/>
1838</svg></div>
1839    <span class="ml-4">Access to our Cocktail Creator, allowing you to create your own wonderful concoctions.</span>
1840</li>
1841                <li class="flex py-0">
1842    <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">
1843  <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"/>
1844</svg></div>
1845    <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>
1846</li>
1847                <li class="flex py-0">
1848    <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">
1849  <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"/>
1850</svg></div>
1851    <span class="ml-4">Create personalised cocktail menus for all your events, bars or parties</span>
1852</li>
1853                <li class="flex py-0">
1854    <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">
1855  <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"/>
1856</svg></div>
1857    <span class="ml-4">Save cocktails to personalised &#039;Tried&#039; and &#039;Want to try&#039; lists</span>
1858</li>
1859                <li class="flex py-0">
1860    <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">
1861  <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"/>
1862</svg></div>
1863    <span class="ml-4">Create and record tasting notes on cocktails</span>
1864</li>
1865                <li class="flex py-0">
1866    <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">
1867  <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"/>
1868</svg></div>
1869    <span class="ml-4">Create lists of cocktails to share with friends and family</span>
1870</li>
1871                <li class="flex py-0">
1872    <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">
1873  <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"/>
1874</svg></div>
1875    <span class="ml-4">A personalised MyBar URL, allowing you to share everything you can make with friends</span>
1876</li>
1877                <li class="flex py-0">
1878    <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">
1879  <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"/>
1880</svg></div>
1881    <span class="ml-4">
1881And much more ... (what to buy next, measurement choices, search personalisation...)</span>
1882</li>
1883            </ul>
1884
1885            <div class="flex justify-between flex-col md:flex-row w-full md:w-auto items-center mt-4 gap-3">
1886                                    <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">
1887        Register now for free
1888    </a>
1889
1890
1891                    <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">
1892  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"/>
1893</svg></a>
1894                            </div>
1895        </div>
1896    </div>
1897            </section>
1898        </div>
1899
1900    </div>
1901 
1902    </div>
1903    <footer class="row">
1904        <footer class="bg-linear-to-r from-[#F3F7FC] to-[#F4F1FE] dark:from-gray-800 dark:to-gray-900 page-contain py-10">
1905    <div class="flex xl:flex-row flex-col justify-between items-center xl:items-start gap-x-4">
1906        <div class="space-y-4 ">
1907            <div class="flex justify-center xl:justify-start gap-x-6 text-sm flex-wrap gap-y-1">
1908                <a href="https://makemeacocktail.com/makers" class="hover:underline">Community</a>
1909                <a href="https://makemeacocktail.com/premium" class="hover:underline">Premium</a>
1910                <a href="https://makemeacocktail.com/our-apps" class="hover:underline">Our apps</a>
1911                <a href="https://makemeacocktail.com/our-books" class="hover:underline">Our books</a>
1912                <a href="https://makemeacocktail.com/badges" class="hover:underline">Badges</a>
1913                <a href="https://makemeacocktail.com/advertising" class="hover:underline">Advertising</a>
1914                <a href="https://makemeacocktail.com/about" class="hover:underline">About</a>
1915                <a href="https://makemeacocktail.com/media" class="hover:underline">Media</a>
1916                <a href="https://makemeacocktail.com/subscribe" class="hover:underline">Newsletter</a>
1917                <a href="https://makemeacocktail.com/glossary" class="hover:underline">Glossary</a>
1918                <a href="https://makemeacocktail.com/contact" class="hover:underline">Contact</a>
1919            </div>
1920            <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">
1921                <a href="https://makemeacocktail.com/add-a-recipe" class="hover:underline">Add a recipe</a>
1922                <a href="https://makemeacocktail.com/cocktail-creator" class="hover:underline">Cocktail creator</a>
1923                <a href="https://makemeacocktail.com/widget-creator" class="hover:underline">Widget creator</a>
1924                <a href="https://makemeacocktail.com/wordpress-plugin" class="hover:underline">Wordpress plugin</a>
1925                <a href="https://makemeacocktail.com/myBar/guide" class="hover:underline">My Bar guide</a>
1926                <a href="https://makemeacocktail.com/searchcloud" class="hover:underline">Search cloud</a>
1927                <a href="https://makemeacocktail.com/gift-card" class="hover:underline">Gift cards</a>
1928            </div>
1929            <div class="flex justify-center xl:justify-start gap-x-6 text-xs flex-wrap gap-y-1">
1930                <a href="https://makemeacocktail.com/brand-partner" class="hover:underline">Brand partners</a>
1931                <a href="https://makemeacocktail.com/privacy-policy" class="hover:underline">Privacy Policy</a>
1932                <a href="https://makemeacocktail.com/terms-and-conditions" class="hover:underline">T&amp;C</a>
1933                <a href="https://makemeacocktail.com/FAQ" class="hover:underline">FAQ</a>
1934                <a href="https://climate.stripe.com/7Fztid" class="hover:underline">Our climate commitment</a>
1935                <a href="https://make-me-a-cocktail.betteruptime.com/" class="hover:underline">Service status</a>
1936                <a href="https://make-me-a-cocktail.canny.io/changelog" class="hover:underline">Changelog</a>
1937            </div>
1938        </div>
1939        <div class="my-8 xl:my-0">
1940            <ul class="flex gap-x-2 justify-center items-center">
1941                <li><a href="https://apps.apple.com/gb/app/make-me-a-cocktail/id1541820377" class="hover:opacity-50 transition duration-150">
1942                        <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
1943    <g>
1944        <path fill="none" d="M0 0h24v24H0z"/>
1945        <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"/>
1946    </g>
1947</svg>
1947                        <span class="sr-only">appstore</span>
1948                    </a></li>
1949                <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">
1950                        <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
1951    <g>
1952        <path fill="none" d="M0 0h24v24H0z"/>
1953        <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"/>
1954    </g>
1955</svg>                        <span class="sr-only">playstore</span>
1956                    </a></li>
1957                <li><a href="https://wordpress.org/plugins/make-me-a-cocktail/" class="hover:opacity-50 transition duration-150">
1958                        <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">
1959  <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"/>
1960  <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"/>
1961  <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"/>
1962</svg>                        <span class="sr-only">wordpress</span>
1963                    </a></li>
1964                <li><a href="https://www.facebook.com/makemeacocktail" class="hover:opacity-50 transition duration-150">
1965                        <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
1966    <g>
1967        <path fill="none" d="M0 0h24v24H0z"/>
1968        <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"/>
1969    </g>
1970</svg>                        <span class="sr-only">facebook</span>
1971                    </a></li>
1972                <li><a href="https://www.twitter.com/makemeacocktail" class="hover:opacity-50 transition duration-150">
1973                        <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
1974    <g>
1975        <path fill="none" d="M0 0h24v24H0z"/>
1976        <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"/>
1977    </g>
1978</svg>                        <span class="sr-only">twitter</span>
1979                    </a></li>
1980                <li><a href="https://instagram.com/makemeacocktail" class="hover:opacity-50 transition duration-150">
1981                        <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
1982    <g>
1983        <path fill="none" d="M0 0h24v24H0z"/>
1984        <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 
198412 2z"/>
1985    </g>
1986</svg>                        <span class="sr-only">instagram</span>
1987                    </a></li>
1988                <li><a href="https://pinterest.com/makemeacocktail" class="hover:opacity-50 transition duration-150">
1989                        <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
1990    <g>
1991        <path fill="none" d="M0 0h24v24H0z"/>
1992        <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"/>
1993    </g>
1994</svg>                        <span class="sr-only">pinterest</span>
1995                    </a></li>
1996            </ul>
1997        </div>
1998        <div>
1999            <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">
2000        <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">
2001  <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"/>
2002</svg>                Support us
2003    </a>
2004
2005
2006        </div>
2007    </div>
2008    <div class="text-center mt-8 pb-8 space-y-4">
2009        <div class="flex items-center justify-center gap-3">
2010                    <a
2011                href="https://makemeacocktail.com/en/login"
2012                class="text-2xl transition duration-200 hover:scale-110 opacity-100 scale-105"
2013                title="English"
2014            >
2015                🇬🇧
2016            </a>
2017                    <a
2018                href="https://makemeacocktail.com/de/login"
2019                class="text-2xl transition duration-200 hover:scale-110 opacity-40 hover:opacity-80"
2020                title="Deutsch"
2021            >
2022                🇩🇪
2023            </a>
2024                    <a
2025                href="https://makemeacocktail.com/es/login"
2026                class="text-2xl transition duration-200 hover:scale-110 opacity-40 hover:opacity-80"
2027                title="Español"
2028            >
2029                🇪🇸
2030            </a>
2031                    <a
2032                href="https://makemeacocktail.com/fr/login"
2033                class="text-2xl transition duration-200 hover:scale-110 opacity-40 hover:opacity-80"
2034                title="Français"
2035            >
2036                🇫🇷
2037            </a>
2038                    <a
2039                href="https://makemeacocktail.com/pt/login"
2040                class="text-2xl transition duration-200 hover:scale-110 opacity-40 hover:opacity-80"
2041                title="Português"
2042            >
2043                🇵🇹
2044            </a>
2045                    <a
2046                href="https://makemeacocktail.com/pt-BR/login"
2047                class="text-2xl transition duration-200 hover:scale-110 opacity-40 hover:opacity-80"
2048                title="Português (Brasil)"
2049            >
2050                🇧🇷
2051            </a>
2052                    <a
2053                href="https://makemeacocktail.com/it/login"
2054                class="text-2xl transition duration-200 hover:scale-110 opacity-40 hover:opacity-80"
2055                title="Italiano"
2056            >
2057                🇮🇹
2058            </a>
2059                    <a
2060                href="https://makemeacocktail.com/nl/login"
2061                class="text-2xl transition duration-200 hover:scale-110 opacity-40 hover:opacity-80"
2062                title="Nederlands"
2063            >
2064                🇳🇱
2065            </a>
2066            </div>
2067        <p class="text-xs dark:text-gray-300 text-gray-500">Copyright © 2026 Make me a cocktail. All Rights Reserved</p>
2068    </div>
2069</footer>
2070
2071    </footer>
2072</div>
2073 
2074
2075<script src="https://makemeacocktail.com/flux/flux.min.js?id=2d7e3896" data-navigate-once></script>
2075
2076
2077
2078<script>
2079    document.addEventListener("DOMContentLoaded", function() {
2080        var lazyBgElements = document.querySelectorAll('[data-bginstant]');
2081        lazyBgElements.forEach(function(element) {
2082            var imageUrl = element.getAttribute('data-bginstant');
2083            element.style.backgroundImage = 'url(' + imageUrl + ')';
2084        });
2085    });
2086
2087    if ('IntersectionObserver' in window) {
2088        document.addEventListener("DOMContentLoaded", function() {
2089            // Function to handle intersection logic
2090            function handleIntersection(entries) {
2091                entries.forEach(entry => {
2092                    if (entry.isIntersecting) {
2093                        entry.target.style.backgroundImage = "url('" + entry.target.dataset.bgimage + "')";
2094                        observer.unobserve(entry.target);
2095                    }
2096                });
2097            }
2098
2099            // Create the observer instance
2100            const observer = new IntersectionObserver(handleIntersection, { rootMargin: "100px" });
2101
2102            // Function to observe elements (can be reused for both initial load and AJAX content)
2103            function observeElements() {
2104                const headers = document.querySelectorAll('[data-bgimage]');
2105                headers.forEach(header => {
2106                    if (!header.dataset.observed) {
2107                        observer.observe(header);
2108                        header.dataset.observed = true; // Mark as observed to avoid duplicate observers
2109                    }
2110                });
2111            }
2112
2113            // Observe elements on initial load
2114            observeElements();
2115
2116            // Use MutationObserver to detect AJAX-loaded content
2117            const ajaxObserver = new MutationObserver(() => {
2118                observeElements(); // Re-run the observation when DOM changes
2119            });
2120
2121            // Watch for changes in the entire document body
2122            ajaxObserver.observe(document.body, { childList: true, subtree: true });
2123        });
2124    } else {
2125        // Fallback for browsers without IntersectionObserver support
2126        const headers = document.querySelectorAll('[data-bgimage]');
2127        headers.forEach(header => {
2128            header.style.backgroundImage = "url('" + header.dataset.bgimage + "')";
2129        });
2130    }
2131
2132    window.addEventListener('load', (event) => {
2133        document.querySelectorAll('.plugin-download-link').forEach(item => {
2134            item.addEventListener('click', event => {
2135                fathom.trackEvent('Plugin downloaded');
2136            });
2137        });
2138    });
2139</script>
2139
2140
2141
2142
2143<script>
2144    function page() {
2145        return {
2146            darkLightModeTooltip: false,
2147            shouldShowTooltip(tooltip) {
2148                return localStorage.getItem('seenTooltip4_' + tooltip) !== 'true';
2149            },
2150            setSeenTooltip(tooltip) {
2151                localStorage.setItem('seenTooltip4_' + tooltip, 'true');
2152            },
2153            toggleDarkLightModeByClick() {
2154                if (this.shouldShowTooltip('darkLightMode')) {
2155                    this.darkLightModeTooltip = true;
2156                    this.setSeenTooltip('darkLightMode');
2157                } else {
2158                    this.darkLightModeTooltip = false;
2159                }
2160                this.toggleDarkLightMode();
2161            },
2162            showTooltip(tooltip) {
2163
2164            },
2165            toggleDarkLightMode() {
2166                if (localStorage.theme === 'light') {
2167                    localStorage.theme = 'dark';
2168                    document.documentElement.classList.add('dark');
2169                    document.documentElement.classList.remove('light');
2170                } else {
2171                    localStorage.theme = 'light';
2172                    document.documentElement.classList.add('light');
2173                    document.documentElement.classList.remove('dark');
2174                }
2175            }
2176        }
2177    }
2178
2179    document.onkeydown = function (evt) {
2180        evt = evt || window.event;
2181        // Removed question mark toggling of dark / light mode
2182        // if (evt.shiftKey && evt.keyCode == 191) {
2183        //     window.dispatchEvent(new CustomEvent('toggle-key-stroke'));
2184        // }
2185        if (evt.keyCode == 39) {
2186            window.dispatchEvent(new CustomEvent('toggle-makers-mode-next'));
2187        }
2188        if (evt.keyCode == 37) {
2189            window.dispatchEvent(new CustomEvent('toggle-makers-mode-prev'));
2190        }
2191    };
2192
2193</script>
2193
2194
2195<script>
2196    if (!window.Toast) {
2197        window.Toast = {
2198            success(text, heading = '', duration = 5000) {
2199                this.show(text, 'success', heading, duration);
2200            },
2201            danger(text, heading = '', duration = 5000) {
2202                this.show(text, 'danger', heading, duration);
2203            },
2204            warning(text, heading = '', duration = 5000) {
2205                this.show(text, 'warning', heading, duration);
2206            },
2207            info(text, heading = '', duration = 5000) {
2208                this.show(text, 'info', heading, duration);
2209            },
2210            show(text, variant = 'success', heading = '', duration = 5000) {
2211                if (window.Flux && typeof window.Flux.toast === 'function') {
2212                    const payload = {
2213                        text,
2214                        duration,
2215                        variant,
2216                    };
2217
2218                    if (heading) {
2219                        payload.heading = heading;
2220                    }
2221
2222                    window.Flux.toast(payload);
2223
2224                    return;
2225                }
2226
2227                console.log(text);
2228            }
2229        };
2230    }
2231
2232    // Alpine.js component for My Bar count.
2233    //
2234    // localStorage seeds the first paint so the header shows a number straight
2235    // away instead of a pulsing placeholder — but it is only ever a guess, and
2236    // is always reconciled against the server afterwards. Treating it as the
2237    // answer meant the header kept whatever number it last saw, forever: empty
2238    // your bar in the app, on another device, or in another session, and the
2239    // web header would still insist you had 200 items while the page below it
2240    // said nothing at all. The revalidation is async and off the paint path,
2241    // and the endpoint releases the session lock before it does any work.
2242    document.addEventListener('alpine:init', () => {
2243        Alpine.data('myBarCount', () => ({
2244            count: null,
2245            init() {
2246                const cached = localStorage.getItem('mybar_count');
2247                if (cached !== null) {
2248                    this.count = parseInt(cached, 10);
2249                }
2250
2251                this.fetchCount();
2252
2253                this.$watch('count', (value) => {
2254                    if (value === null) {
2255                        localStorage.removeItem('mybar_count');
2256                    } else {
2257                        localStorage.setItem('mybar_count', value);
2258                    }
2259                });
2260            },
2261            async fetchCount() {
2262                try {
2263                    const response = await fetch('https://makemeacocktail.com/myBar/count');
2264                    const data = await response.json();
2265                    this.count = data.count;
2266                } catch (error) {
2267                    console.error('Failed to fetch bar count:', error);
2268                    this.count = 0;
2269                }
2270            },
2271            updateCount(delta) {
2272                if (this.count !== null) {
2273                    this.count += delta;
2274                }
2275            }
2276        }));
2277    });
2278
2279    // Listen for bar changes and update Alpine components
2280    document.addEventListener('myBarNumberChanged', (event) => {
2281        const delta = parseInt(event.detail.number);
2282
2283        // Dispatch custom event for Alpine components
2284        window.dispatchEvent(new CustomEvent('mybar-count-changed', { detail: { delta } }));
2285
2286        // Show toast notification
2287        if (delta > 0) {
2288            Toast.success('Ingredient added to your bar', '', 2000);
2289        } else {
2290            Toast.danger('Ingredient removed from your bar', '', 2000);
2291        }
2292
2293        // Update legacy DOM elements (for any non-Alpine usage)
2294        let noIng = document.getElementsByClassName('onlyShowIfNoIngredients');
2295        for (var i = 0; i < noIng.length; i++) {
2296            noIng[i].classList.add('hidden');
2297        }
2298        let someIng = document.getElementsByClassName('onlyShowIfIngredients');
2299        for (var i = 0; i < someIng.length; i++) {
2300            someIng[i].classList.remove('hidden');
2301        }
2302    });
2303</script>
2303
2304
2305<script>
2306    function fallbackCopyTextToClipboard(text) {
2307        var textArea = document.createElement("textarea");
2308        textArea.value = text;
2309
2310        // Avoid scrolling to bottom
2311        textArea.style.top = "0";
2312        textArea.style.left = "0";
2313        textArea.style.position = "fixed";
2314
2315        document.body.appendChild(textArea);
2316        textArea.focus();
2317        textArea.select();
2318
2319        try {
2320            var successful = document.execCommand('copy');
2321            var msg = successful ? 'successful' : 'unsuccessful';
2322        } catch (err) { }
2323
2324            document.body.removeChild(textArea);
2325        }
2326
2327    function copyTextToClipboard(text) {
2328        if (!navigator.clipboard) {
2329            fallbackCopyTextToClipboard(text);
2330            return;
2331        }
2332        navigator.clipboard.writeText(text).then(function () {}, function (err) { });
2333    }
2334
2335    function scrollToSection(idname, offset = 90) {
2336        const element = document.getElementById(idname);
2337        if (element) {
2338            // Get the top position of the element within the page
2339            const elementPosition = element.getBoundingClientRect().top + window.pageYOffset;
2340
2341            // Scroll to the element, adjusted by the offset
2342            window.scrollTo({
2343                top: elementPosition - offset, // Subtract the offset
2344                behavior: 'smooth'
2345            });
2346        }
2347    }
2348</script>
2348
2349
2350
2351<script src="https://makemeacocktail.com/vendor/livewire/livewire.min.js?id=8642c1d5"   data-csrf="dwKEe8YFjEu4tPCAFVNZ3LxXhFkAbmy9Bv7rQV87" 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 2351
2351
2352<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:'a402c3bdece0e7fd',t:'MTc5MDI2MzEzNg=='};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>
2352<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>
2352
2353</body>
2354</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.