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'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="{"data":{"showModal":false,"query":"","cocktailContextId":null},"memo":{"id":"AdfOlKPE9KGwr2VMNHYi","name":"command-palette","path":"login","method":"GET","release":"a-a-a","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en","islands":[]},"checksum":"e79d4b6f7c0d1a2dc4ba75c66f95cb0100af0c416552cd08372490160e62d0cb"}" wire:effects="{"partials":[],"listeners":["open-command-palette","set-cocktail-context","clear-cocktail-context"]}" 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(&)]: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(&)]: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(&)]:h-4 [:where(&)]:rounded-md [:where(&)]: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(&)]:h-4 [:where(&)]:rounded-md [:where(&)]: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(&)]:h-4 [:where(&)]:rounded-md [:where(&)]:bg-zinc-400/20 h-4 w-32" data-flux-skeleton> 211 212</div> <div class="[:where(&)]:h-4 [:where(&)]:rounded-md [:where(&)]: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(&)]:h-4 [:where(&)]:rounded-md [:where(&)]: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(&)]:h-4 [:where(&)]:rounded-md [:where(&)]:bg-zinc-400/20 h-4 w-32" data-flux-skeleton> 221 222</div> <div class="[:where(&)]:h-4 [:where(&)]:rounded-md [:where(&)]: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(&)]:h-4 [:where(&)]:rounded-md [:where(&)]: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(&)]:h-4 [:where(&)]:rounded-md [:where(&)]:bg-zinc-400/20 h-4 w-32" data-flux-skeleton> 231 232</div> <div class="[:where(&)]:h-4 [:where(&)]:rounded-md [:where(&)]: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(&)]:h-4 [:where(&)]:rounded-md [:where(&)]: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(&)]:h-4 [:where(&)]:rounded-md [:where(&)]:bg-zinc-400/20 size-5 rounded shrink-0" data-flux-skeleton> 245 246</div> <div class="[:where(&)]:h-4 [:where(&)]:rounded-md [:where(&)]: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(&)]:h-4 [:where(&)]:rounded-md [:where(&)]:bg-zinc-400/20 size-5 rounded shrink-0" data-flux-skeleton> 251 252</div> <div class="[:where(&)]:h-4 [:where(&)]:rounded-md [:where(&)]: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(&)]:h-4 [:where(&)]:rounded-md [:where(&)]:bg-zinc-400/20 size-5 rounded shrink-0" data-flux-skeleton> 257 258</div> <div class="[:where(&)]:h-4 [:where(&)]:rounded-md [:where(&)]: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(&)]: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(&)]: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(&)]: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(&)]: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(&)]: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(&)]: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(&)]: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(&)]: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(&)]: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(&)]: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(&)]: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(&)]: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(&)]: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="{"data":{"user":null,"showModal":false},"memo":{"id":"vKQiFC5URXbnwo6u40zk","name":"welcome","path":"login","method":"GET","release":"a-a-a","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en","islands":[]},"checksum":"fb9149c68f31fb45f94d1f11e141903da53c686a6284bf4c24089fc906e9e353"}" wire:effects="{"partials":[],"listeners":["open-welcome-modal"]}" 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(&)]:max-w-xl [:where(&)]: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(&)]:text-zinc-800 [:where(&)]:dark:text-white text-base [&:has(+[data-flux-subheading])]:mb-2 [[data-flux-subheading]+&]: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're absolutely delighted to have you join our community of spirited enthusiasts. As a premium member, you'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(&)]: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="{"data":{"user":null,"showModal":false},"memo":{"id":"yuVoZF6xSg9FbwKTqB86","name":"welcome-free","path":"login","method":"GET","release":"a-a-a","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en","islands":[]},"checksum":"c73bacf5a92132613fbc310a6e44e333e84ab4820ca14173872d23957123703d"}" wire:effects="{"partials":[],"listeners":["open-welcome-free-modal"]}" 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(&)]:max-w-xl [:where(&)]: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(&)]:text-zinc-800 [:where(&)]:dark:text-white text-base [&:has(+[data-flux-subheading])]:mb-2 [[data-flux-subheading]+&]: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're absolutely delighted to have you join our community of spirited enthusiasts. You'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(&)]: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="{"data":{"user":null,"showModal":false},"memo":{"id":"iMH4oX3MxazL0PWlrRaV","name":"upgraded","path":"login","method":"GET","release":"a-a-a","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en","islands":[]},"checksum":"b398b32d52baf3e76c81a637dc26da931d32ed1283c6d9b733519b4a18156390"}" wire:effects="{"partials":[],"listeners":["open-upgraded-modal"]}" 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(&)]:max-w-xl [:where(&)]: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(&)]:text-zinc-800 [:where(&)]:dark:text-white text-base [&:has(+[data-flux-subheading])]:mb-2 [[data-flux-subheading]+&]: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're absolutely delighted to have you join our community of spirited enthusiasts. As a premium member, you'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(&)]: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="{"data":{"reason":"","heading":"Register to continue","intro":"You are one step away from unlocking this feature.","detail":"Register below to continue and keep your bar, lists, and preferences synced.","intendedScan":false,"showModal":false},"memo":{"id":"Sgp4WGMCteNLUsEaYg2V","name":"upsell-modal-window","path":"login","method":"GET","release":"a-a-a","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en","islands":[]},"checksum":"842610aafabc767af160973e9f416ddd6b317940aa3bd36743317f784e7ae808"}" wire:effects="{"partials":[],"listeners":["open-upsell-modal"]}" 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(&)]:max-w-xl [:where(&)]: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(&)]:text-zinc-800 [:where(&)]:dark:text-white text-base [&:has(+[data-flux-subheading])]:mb-2 [[data-flux-subheading]+&]:mt-2 font-grotesk font-bold text-xl" data-flux-heading>Register to continue</div> 675 676 <p class="[:where(&)]:font-normal [:where(&)]:text-sm [:where(&)]:text-zinc-500 [:where(&)]:dark:text-white/70" data-flux-text ><strong>Almost there.</strong> You are one step away from unlocking this feature.</p> <p class="[:where(&)]:font-normal [:where(&)]:text-sm [:where(&)]:text-zinc-500 [:where(&)]: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(&)]:font-normal [:where(&)]:text-sm [:where(&)]:text-zinc-500 [:where(&)]: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 [&[data-loading]>:not([data-flux-loading-indicator])]:opacity-0 [&[data-flux-loading]>:not([data-flux-loading-indicator])]:opacity-0 [&[data-loading]>[data-flux-loading-indicator]]:opacity-100 [&[data-flux-loading]>[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(&)]: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]_&]:border-e-0 [:is([data-flux-button-group]>&:last-child,_[data-flux-button-group]_:last-child>&)]:border-e-[1px] dark:[:is([data-flux-button-group]>&:last-child,_[data-flux-button-group]_:last-child>&)]:border-e-0 dark:[:is([data-flux-button-group]>&:last-child,_[data-flux-button-group]_:last-child>&)]:border-s-[1px] [:is([data-flux-button-group]>&:not(:first-child),_[data-flux-button-group]_:not(:first-child)>&)]: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(&)]: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> 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'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'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 'Tried' and 'Want to try' 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&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&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.