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>A.I. Search - Make Me a Cocktail</title> 25<meta name="csrf-token" content="KuarknPUOVFz80KrKx7d4XYsfvNoD9BECLD6ZKQa"> 26<meta property="og:type" content="website"> 27<meta property="og:url" content="https://makemeacocktail.com/en/search"> 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/misc/search.avif"> 41<meta property="og:title" content="A.I. Search - Make Me a Cocktail"> 42<meta property="og:description" content="Use our intelligent AI powered search to find cocktails based upon natural language. Just type what you need to find out and we'll find the results."> 43<meta name="twitter:image" content="https://makemeacocktail.com/img/misc/search.avif"> 44<meta name="twitter:image:alt" content="Picture of Make Me a Cocktail search page"> 45<meta name="twitter:title" content="A.I. Search - Make Me a Cocktail"> 46<meta name="twitter:description" content="Use our intelligent AI powered search to find cocktails based upon natural language. Just type what you need to find out and we'll find the results."> 47<meta name="description" content="Use our intelligent AI powered search to find cocktails based upon natural language. Just type what you need to find out and we'll find the results."> 48<link rel="canonical" href="https://makemeacocktail.com/en/search"> 49<meta name="recommendation-events-endpoint" content="https://makemeacocktail.com/en/__events/recommendations"> 50 51 52 <link rel="alternate" hreflang="en" href="https://makemeacocktail.com/en/search" /> 53 <link rel="alternate" hreflang="de" href="https://makemeacocktail.com/de/search" /> 54 <link rel="alternate" hreflang="es" href="https://makemeacocktail.com/es/search" /> 55 <link rel="alternate" hreflang="fr" href="https://makemeacocktail.com/fr/search" /> 56 <link rel="alternate" hreflang="pt" href="https://makemeacocktail.com/pt/search" /> 57 <link rel="alternate" hreflang="pt-BR" href="https://makemeacocktail.com/pt-BR/search" /> 58 <link rel="alternate" hreflang="it" href="https://makemeacocktail.com/it/search" /> 59 <link rel="alternate" hreflang="nl" href="https://makemeacocktail.com/nl/search" /> 60<link rel="alternate" hreflang="x-default" href="https://makemeacocktail.com/en/search" /> 61
62<script> 63 console.log(localStorage.theme); 64 if (localStorage.theme === 'dark') { 65 document.documentElement.classList.add('dark') 66 } else { 67 document.documentElement.classList.remove('dark') 68 } 69</script>
69 70
71<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js"></script>
71 72<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" />
72<script type="module" src="https://makemeacocktail.com/build/assets/app-CJMZeGRN.js" data-navigate-track="reload"></script>
72 73 74
75<script src="https://cdn.usefathom.com/script.js" data-site="LSOPRZLU" defer></script>
75 76
77<script type="application/ld+json"> 78 { 79 "@context": "https://schema.org", 80 "@type": "WebSite", 81 "url": "https://makemeacocktail.com/en", 82 "inLanguage": "en", 83 "potentialAction": { 84 "@type": "SearchAction", 85 "target": { 86 "@type": "EntryPoint", 87 "urlTemplate": "https://makemeacocktail.com/en/search/cocktails?s={search_term_string}" 88 }, 89 "query-input": "required name=search_term_string" 90 } 91 } 92</script>
92 93 94 95<!-- 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> 96</head> 97<base href="/" /> 98<body class="bg-linear-to-r text-gray-800 dark:text-blue-50 99 bg-black 100 " 101 x-data="page()" 102 x-on:toggle-key-stroke.window="darkLightModeTooltip = false; toggleDarkLightMode()" 103> 104 105<ui-toast-group x-data x-on:toast-show.document="$el.showToast($event.detail)" popover="manual" position="bottom end" wire:ignore> 106 <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> 107 <template> 108 <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> 109 <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"> 110 <div class="flex-1 flex items-start gap-4 overflow-hidden"> 111 <div class="flex-1 py-1.5 ps-2.5 flex gap-2"> 112 113 <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"> 114 <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" /> 115 </svg> 116 117 118 <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"> 119 <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" /> 120 </svg> 121 122 123 <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"> 124 <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" /> 125 </svg> 126 127 128 <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"> 129 <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" /> 130 </svg> 131 132 <div> 133 134 <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> 135 136 137 <div class="font-medium text-sm text-zinc-800 dark:text-white"><slot name="text"></slot></div> 138 139 140 <template name="link"> 141 <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> 142 </template> 143 </div> 144 </div> 145 146 147 <ui-close class="flex items-center"> 148 <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"> 149 <div> 150 <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"> 151 <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> 152 </svg> 153 </div> 154 </button> 155 </ui-close> 156 </div> 157 </div> 158 </div> 159 </template> 160</ui-toast> 161</ui-toast-group> 162 163
164<div wire:key="lw-551991559-0" wire:snapshot="{"data":{"showModal":false,"query":"","cocktailContextId":null},"memo":{"id":"9BlOb7ZjqnT3HglvmCTP","name":"command-palette","path":"en\/search","method":"GET","release":"a-a-a","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en","islands":[]},"checksum":"c5083b66b2de20568c657dc710ae6eb00d1811c7d5854687008915188b89e9fe"}" wire:effects="{"partials":[],"listeners":["open-command-palette","set-cocktail-context","clear-cocktail-context"]}" wire:id="9BlOb7ZjqnT3HglvmCTP" wire:name="command-palette" 165 x-data 166 x-on:keydown.cmd.k.window.prevent="Livewire.dispatch('open-command-palette')" 167 x-on:keydown.ctrl.k.window.prevent="Livewire.dispatch('open-command-palette')" 168> 169 <ui-modal wire:model.self="showModal" data-flux-modal> 170 171 <dialog 172 wire:ignore.self 173 class="bg-transparent w-full max-w-3xl my-[12vh] max-h-screen overflow-y-hidden" 174 x-data="fluxModal(null, '9BlOb7ZjqnT3HglvmCTP')" 175 x-on:modal-show.document="handleShow($event)" 176 x-on:modal-close.document="handleClose($event)" 177 > 178 <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> 179 <div class="relative" data-flux-command-input> 180 <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"> 181 <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"> 182 <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"/> 183</svg> 184 185 </div> 186 187 <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" /> 188 189 <div class="absolute top-0 bottom-0 flex items-center justify-center pe-2 end-0"> 190 <ui-close> 191 <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"> 192 <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"> 193 <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"/> 194</svg> 195 </button> 196 </ui-close> 197 </div> 198 </div> 199 200 201 <div wire:loading class="p-1 overflow-y-auto"> 202 203 <div class="px-3 py-1.5"> 204 <div class="[:where(&)]:h-4 [:where(&)]:rounded-md [:where(&)]:bg-zinc-400/20 h-3 w-16" data-flux-skeleton> 205 206</div> </div> 207 <!--[if BLOCK]><![endif]--> <div class="flex items-center gap-3 px-3 py-2"> 208 <div class="[:where(&)]:h-4 [:where(&)]:rounded-md [:where(&)]:bg-zinc-400/20 size-8 rounded-lg shrink-0" data-flux-skeleton> 209 210</div> <div class="flex flex-col gap-1 flex-1"> 211 <div class="[:where(&)]:h-4 [:where(&)]:rounded-md [:where(&)]:bg-zinc-400/20 h-4 w-32" data-flux-skeleton> 212 213</div> <div class="[:where(&)]:h-4 [:where(&)]:rounded-md [:where(&)]:bg-zinc-400/20 h-3 w-48" data-flux-skeleton> 214 215</div> </div> 216 </div> 217 <div class="flex items-center gap-3 px-3 py-2"> 218 <div class="[:where(&)]:h-4 [:where(&)]:rounded-md [:where(&)]:bg-zinc-400/20 size-8 rounded-lg shrink-0" data-flux-skeleton> 219 220</div> <div class="flex flex-col gap-1 flex-1"> 221 <div class="[:where(&)]:h-4 [:where(&)]:rounded-md [:where(&)]:bg-zinc-400/20 h-4 w-32" data-flux-skeleton> 222 223</div> <div class="[:where(&)]:h-4 [:where(&)]:rounded-md [:where(&)]:bg-zinc-400/20 h-3 w-48" data-flux-skeleton> 224 225</div> </div> 226 </div> 227 <div class="flex items-center gap-3 px-3 py-2"> 228 <div class="[:where(&)]:h-4 [:where(&)]:rounded-md [:where(&)]:bg-zinc-400/20 size-8 rounded-lg shrink-0" data-flux-skeleton> 229 230</div> <div class="flex flex-col gap-1 flex-1"> 231 <div class="[:where(&)]:h-4 [:where(&)]:rounded-md [:where(&)]:bg-zinc-400/20 h-4 w-32" data-flux-skeleton> 232 233</div> <div class="[:where(&)]:h-4 [:where(&)]:rounded-md [:where(&)]:bg-zinc-400/20 h-3 w-48" data-flux-skeleton> 234 235</div> </div> 236 </div> 237 <!--[if ENDBLOCK]><![endif]--> 238 239 <div class="pt-1 mt-1 border-t border-zinc-200 dark:border-zinc-700"> 240 <div class="px-3 py-1.5"> 241 <div class="[:where(&)]:h-4 [:where(&)]:rounded-md [:where(&)]:bg-zinc-400/20 h-3 w-28" data-flux-skeleton> 242 243</div> </div> 244 <!--[if BLOCK]><![endif]--> <div class="flex items-center gap-3 px-3 py-2"> 245 <div class="[:where(&)]:h-4 [:where(&)]:rounded-md [:where(&)]:bg-zinc-400/20 size-5 rounded shrink-0" data-flux-skeleton> 246 247</div> <div class="[:where(&)]:h-4 [:where(&)]:rounded-md [:where(&)]:bg-zinc-400/20 h-4 w-24" data-flux-skeleton> 248 249</div> </div> 250 <div class="flex items-center gap-3 px-3 py-2"> 251 <div class="[:where(&)]:h-4 [:where(&)]:rounded-md [:where(&)]:bg-zinc-400/20 size-5 rounded shrink-0" data-flux-skeleton> 252 253</div> <div class="[:where(&)]:h-4 [:where(&)]:rounded-md [:where(&)]:bg-zinc-400/20 h-4 w-24" data-flux-skeleton> 254 255</div> </div> 256 <div class="flex items-center gap-3 px-3 py-2"> 257 <div class="[:where(&)]:h-4 [:where(&)]:rounded-md [:where(&)]:bg-zinc-400/20 size-5 rounded shrink-0" data-flux-skeleton> 258 259</div> <div class="[:where(&)]:h-4 [:where(&)]:rounded-md [:where(&)]:bg-zinc-400/20 h-4 w-24" data-flux-skeleton> 260 261</div> </div> 262 <!--[if ENDBLOCK]><![endif]--> </div> 263 </div> 264 265 <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> 266 <!--[if BLOCK]><![endif]--> <div class="px-3 pb-3 text-xs font-semibold text-zinc-500 dark:text-zinc-400 pt-2">Pages</div> 267 268 <!--[if BLOCK]><![endif]--> <!--[if BLOCK]><![endif]--> 269 <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> 270 <div class="relative"> 271 <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"> 272 <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"/> 273</svg> 274 275 </div> 276 277 <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <div class="flex flex-col min-w-0">
278 <span class="">Home</span> 279 <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> </div> 280 281 </ui-option> 282 <!--[if ENDBLOCK]><![endif]--> <!--[if BLOCK]><![endif]--> 283 <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/en/myBar')" data-flux-command-item> 284 <div class="relative"> 285 <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"> 286 <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"/> 287</svg> 288 289 </div> 290 291 <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <div class="flex flex-col min-w-0"> 292 <span class="">My Bar</span> 293 <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> </div> 294 295 </ui-option> 296 <!--[if ENDBLOCK]><![endif]--> <!--[if BLOCK]><![endif]--> 297 <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/en/cocktails')" data-flux-command-item> 298 <div class="relative"> 299 <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"> 300 <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"/> 301</svg> 302 303 </div> 304 305 <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <div class="flex flex-col min-w-0"> 306 <span class="">Cocktails</span> 307 <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> </div> 308 309 </ui-option> 310 <!--[if ENDBLOCK]><![endif]--> <!--[if BLOCK]><![endif]--> 311 <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/en/listmania')" data-flux-command-item> 312 <div class="relative"> 313 <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"> 314 <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"/> 315</svg> 316 317 </div> 318 319 <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <div class="flex flex-col min-w-0">
320 <span class="">Listmania</span> 321 <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> </div> 322 323 </ui-option> 324 <!--[if ENDBLOCK]><![endif]--> <!--[if BLOCK]><![endif]--> 325 <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/en/search')" data-flux-command-item> 326 <div class="relative"> 327 <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"> 328 <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"/> 329</svg> 330 331 </div> 332 333 <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <div class="flex flex-col min-w-0"> 334 <span class="">A.I. Search</span> 335 <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> </div> 336 337 </ui-option> 338 <!--[if ENDBLOCK]><![endif]--> <!--[if BLOCK]><![endif]--> 339 <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/en/level-up')" data-flux-command-item> 340 <div class="relative"> 341 <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"> 342 <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"/> 343</svg> 344 345 </div> 346 347 <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <div class="flex flex-col min-w-0"> 348 <span class="">Level-up</span> 349 <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> </div> 350 351 </ui-option> 352 <!--[if ENDBLOCK]><![endif]--> <!--[if BLOCK]><![endif]--> 353 <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/en/ingredients')" data-flux-command-item> 354 <div class="relative"> 355 <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"> 356 <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"/> 357</svg> 358 359 </div> 360 361 <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <div class="flex flex-col min-w-0">
362 <span class="">Ingredients</span> 363 <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> </div> 364 365 </ui-option> 366 <!--[if ENDBLOCK]><![endif]--> <!--[if BLOCK]><![endif]--> 367 <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> 368 <div class="relative"> 369 <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"> 370 <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"/> 371</svg> 372 373 </div> 374 375 <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <div class="flex flex-col min-w-0"> 376 <span class="">Log in</span> 377 <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> </div> 378 379 </ui-option> 380 <!--[if ENDBLOCK]><![endif]--> <!--[if ENDBLOCK]><![endif]--> 381 382 <!--[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> 383 384 <!--[if BLOCK]><![endif]--> <!--[if BLOCK]><![endif]--> 385 <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/en/cocktail/7498/coconut-elixir')" data-flux-command-item> 386 387 <!--[if BLOCK]><![endif]--> <img 388 src="https://mmacv5generalimages.s3.amazonaws.com/2446/conversions/652112738-preview.jpg" 389 alt="Coconut Elixir" 390 loading="lazy" 391 class="size-10 sm:size-8 rounded-lg object-cover shrink-0" 392 /> 393 <!--[if ENDBLOCK]><![endif]--> <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <div class="flex flex-col min-w-0"> 394 <span class="font-semibold">Coconut Elixir</span> 395 <!--[if BLOCK]><![endif]--> <span class="text-xs leading-tight text-zinc-400 dark:text-zinc-400">Coconut rum, Vodka, Melon liqueur, Mint syrup</span> 396 <!--[if ENDBLOCK]><![endif]--> </div> 397 398 </ui-option> 399 <!--[if ENDBLOCK]><![endif]--> <!--[if BLOCK]><![endif]--> 400 <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/en/cocktail/9623/flying-grasshopper')" data-flux-command-item> 401 402 <!--[if BLOCK]><![endif]--> 403 <img 404 src="https://makemeacocktail.com/img/logo.png" 405 alt="Make Me a Cocktail" 406 loading="lazy" 407 class="size-10 sm:size-8 rounded-lg object-contain shrink-0 p-0.5" 408 /> 409 <!--[if ENDBLOCK]><![endif]--> <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <div class="flex flex-col min-w-0">
410 <span class="font-semibold">Flying Grasshopper</span> 411 <!--[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> 412 <!--[if ENDBLOCK]><![endif]--> </div> 413 414 </ui-option> 415 <!--[if ENDBLOCK]><![endif]--> <!--[if BLOCK]><![endif]--> 416 <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/en/cocktail/6775/french-horn')" data-flux-command-item> 417 418 <!--[if BLOCK]><![endif]--> <img 419 src="https://mmacv5generalimages.s3.amazonaws.com/1017/conversions/1711231576-preview.jpg" 420 alt="French Horn" 421 loading="lazy" 422 class="size-10 sm:size-8 rounded-lg object-cover shrink-0" 423 /> 424 <!--[if ENDBLOCK]><![endif]--> <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <div class="flex flex-col min-w-0"> 425 <span class="font-semibold">French Horn</span> 426 <!--[if BLOCK]><![endif]--> <span class="text-xs leading-tight text-zinc-400 dark:text-zinc-400">Vodka, Raspberry liqueur, Lemon juice, Salt</span> 427 <!--[if ENDBLOCK]><![endif]--> </div> 428 429 </ui-option> 430 <!--[if ENDBLOCK]><![endif]--> <!--[if BLOCK]><![endif]--> 431 <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/en/cocktail/540/bucks-fizz')" data-flux-command-item> 432 433 <!--[if BLOCK]><![endif]--> <img 434 src="https://mmacv5generalimages.s3.amazonaws.com/5562/conversions/1339684770-preview.avif" 435 alt="Buckâs Fizz" 436 loading="lazy" 437 class="size-10 sm:size-8 rounded-lg object-cover shrink-0" 438 /> 439 <!--[if ENDBLOCK]><![endif]--> <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <div class="flex flex-col min-w-0"> 440 <span class="font-semibold">Buckâs Fizz</span> 441 <!--[if BLOCK]><![endif]--> <span class="text-xs leading-tight text-zinc-400 dark:text-zinc-400">Champagne / prosecco, Orange juice</span> 442 <!--[if ENDBLOCK]><![endif]--> </div> 443 444 </ui-option> 445 <!--[if ENDBLOCK]><![endif]--> <!--[if BLOCK]><![endif]--> 446 <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/en/cocktail/7615/mike-kenney')" data-flux-command-item> 447 448 <!--[if BLOCK]><![endif]--> <img 449 src="https://mmacv5generalimages.s3.amazonaws.com/1238/conversions/891051246-preview.jpg" 450 alt="Mike Kenney" 451 loading="lazy" 452 class="size-10 sm:size-8 rounded-lg object-cover shrink-0" 453 /> 454 <!--[if ENDBLOCK]><![endif]--> <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <div class="flex flex-col min-w-0">
455 <span class="font-semibold">Mike Kenney</span> 456 <!--[if BLOCK]><![endif]--> <span class="text-xs leading-tight text-zinc-400 dark:text-zinc-400">Whiskey, Ginger beer</span> 457 <!--[if ENDBLOCK]><![endif]--> </div> 458 459 </ui-option> 460 <!--[if ENDBLOCK]><![endif]--> <!--[if ENDBLOCK]><![endif]--> 461 462 <!--[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> 463 464 <!--[if BLOCK]><![endif]--> <!--[if BLOCK]><![endif]--> 465 <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/en/level-up/1/mastering-the-shake')" data-flux-command-item> 466 <div class="relative"> 467 <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"> 468 <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"/> 469</svg> 470 471 </div> 472 473 <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <div class="flex flex-col min-w-0"> 474 <span class="">Mastering the Shake</span> 475 <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> </div> 476 477 </ui-option> 478 <!--[if ENDBLOCK]><![endif]--> <!--[if BLOCK]><![endif]--> 479 <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/en/level-up/488/shaken-or-stirred')" data-flux-command-item> 480 <div class="relative"> 481 <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"> 482 <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"/> 483</svg> 484 485 </div> 486 487 <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <div class="flex flex-col min-w-0">
488 <span class="">Shaken or Stirred?</span> 489 <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> </div> 490 491 </ui-option> 492 <!--[if ENDBLOCK]><![endif]--> <!--[if BLOCK]><![endif]--> 493 <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/en/level-up/489/the-history-of-the-manhattan')" data-flux-command-item> 494 <div class="relative"> 495 <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"> 496 <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"/> 497</svg> 498 499 </div> 500 501 <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <div class="flex flex-col min-w-0"> 502 <span class="">The History of the Manhattan</span> 503 <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> </div> 504 505 </ui-option> 506 <!--[if ENDBLOCK]><![endif]--> <!--[if BLOCK]><![endif]--> 507 <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/en/level-up/490/pairing-cocktails-with-food')" data-flux-command-item> 508 <div class="relative"> 509 <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"> 510 <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"/> 511</svg> 512 513 </div> 514 515 <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <div class="flex flex-col min-w-0"> 516 <span class="">Pairing Cocktails with Food</span> 517 <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> </div> 518 519 </ui-option> 520 <!--[if ENDBLOCK]><![endif]--> <!--[if BLOCK]><![endif]--> 521 <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/en/level-up/491/muddling-the-why-what-and-how')" data-flux-command-item> 522 <div class="relative"> 523 <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"> 524 <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"/> 525</svg> 526 527 </div> 528 529 <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <div class="flex flex-col min-w-0">
530 <span class="">Muddling - The Why, What, and How?</span> 531 <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> </div> 532 533 </ui-option> 534 <!--[if ENDBLOCK]><![endif]--> <!--[if ENDBLOCK]><![endif]--> 535 536 <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <!--[if ENDBLOCK]><![endif]--> 537 538 <ui-option-empty class="data-hidden:hidden"> 539 <div class="flex items-center justify-center h-10"> 540 <div class="text-sm text-zinc-500 dark:text-zinc-400 font-medium"> 541 No results found 542 </div> 543 </div> 544</ui-option-empty> 545</ui-options> 546 547 <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"> 548 <div class="flex items-center gap-2"> 549 <kbd class="px-1.5 py-0.5 bg-zinc-100 dark:bg-zinc-800 rounded text-[10px]">esc</kbd> 550 <span>to close</span> 551 </div> 552 <div class="flex items-center gap-2"> 553 <kbd class="px-1.5 py-0.5 bg-zinc-100 dark:bg-zinc-800 rounded text-[10px]">enter</kbd> 554 <span>to select</span> 555 </div> 556 </div> 557</ui-select> 558 559 </dialog> 560</ui-modal> 561</div> 562<div wire:key="lw-551991559-1-2" wire:snapshot="{"data":{"user":null,"showModal":false},"memo":{"id":"wk7D89ZHBTNLvun5xtki","name":"welcome","path":"en\/search","method":"GET","release":"a-a-a","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en","islands":[]},"checksum":"f35cc583ef89244d54e8384256a5f24e0b973bb052a370979b617c13ed8845b3"}" wire:effects="{"partials":[],"listeners":["open-welcome-modal"]}" wire:id="wk7D89ZHBTNLvun5xtki" wire:name="welcome"> 563 <ui-modal wire:model.self="showModal" data-flux-modal> 564 565 <dialog 566 wire:ignore.self 567 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" 568 x-data="fluxModal(null, 'wk7D89ZHBTNLvun5xtki')" 569 x-on:modal-show.document="handleShow($event)" 570 x-on:modal-close.document="handleClose($event)" 571 > 572 <div class="space-y-4"> 573 <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> 574 575 <p>Welcome to Make Me a Cocktail <span class="font-semibold">PREMIUM</span> - where your cocktail adventure begins!</p> 576 577 <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> 578 579 <p>Our platform is your playground to mix, mingle, and explore the vibrant world of cocktails, so get shaking and get mixing!</p> 580 581 <img src="https://makemeacocktail.com/img/misc/nolist.avif" alt="no cocktails" class="max-w-sm w-full m-auto block mt-6"> 582 </div> 583 584 <div class="absolute top-0 end-0 mt-4 me-4"> 585 <ui-close data-flux-modal-close > 586 <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"> 587 <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"> 588 <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"/> 589</svg> 590 </button> 591</ui-close> 592 </div> 593 </dialog> 594</ui-modal> 595</div>
596<div wire:key="lw-551991559-2-2" wire:snapshot="{"data":{"user":null,"showModal":false},"memo":{"id":"pcjEQjz4GVP8tlEwuHmz","name":"welcome-free","path":"en\/search","method":"GET","release":"a-a-a","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en","islands":[]},"checksum":"71c140d135c4a5bf8f19205ab64a00fdd1fdc3e52a52eaeadc27204b33036cc5"}" wire:effects="{"partials":[],"listeners":["open-welcome-free-modal"]}" wire:id="pcjEQjz4GVP8tlEwuHmz" wire:name="welcome-free"> 597 <ui-modal wire:model.self="showModal" data-flux-modal> 598 599 <dialog 600 wire:ignore.self 601 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" 602 x-data="fluxModal(null, 'pcjEQjz4GVP8tlEwuHmz')" 603 x-on:modal-show.document="handleShow($event)" 604 x-on:modal-close.document="handleClose($event)" 605 > 606 <div class="space-y-4"> 607 <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> 608 609 <p>Welcome to Make Me a Cocktail - where your cocktail adventure begins!</p> 610 611 <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> 612 613 <p>Our platform is your playground to mix, mingle, and explore the vibrant world of cocktails, so get shaking and get mixing!</p> 614 615 <img src="https://makemeacocktail.com/img/misc/nolist.avif" alt="no cocktails" class="max-w-sm w-full m-auto block mt-6"> 616 </div> 617 618 <div class="absolute top-0 end-0 mt-4 me-4"> 619 <ui-close data-flux-modal-close > 620 <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"> 621 <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"> 622 <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"/> 623</svg> 624 </button> 625</ui-close> 626 </div> 627 </dialog> 628</ui-modal> 629</div> 630<div wire:key="lw-551991559-3-2" wire:snapshot="{"data":{"user":null,"showModal":false},"memo":{"id":"XObpsKUXYPdABQnNyhpB","name":"upgraded","path":"en\/search","method":"GET","release":"a-a-a","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en","islands":[]},"checksum":"7058f9e4a2c955810cd68970194f72f55c589cebb8de66ecda72994be1c218ca"}" wire:effects="{"partials":[],"listeners":["open-upgraded-modal"]}" wire:id="XObpsKUXYPdABQnNyhpB" wire:name="upgraded"> 631 <ui-modal wire:model.self="showModal" data-flux-modal> 632 633 <dialog 634 wire:ignore.self 635 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" 636 x-data="fluxModal(null, 'XObpsKUXYPdABQnNyhpB')" 637 x-on:modal-show.document="handleShow($event)" 638 x-on:modal-close.document="handleClose($event)" 639 > 640 <div class="space-y-4"> 641 <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> 642 643 <p>You've just been upgraded to our super amazing <span class="font-semibold">PREMIUM</span> membership - where your new cocktail adventure begins!</p> 644 645 <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> 646 647 <p>
647Our platform is your playground to mix, mingle, and explore the vibrant world of cocktails, so get shaking and get mixing!</p> 648 649 <img src="https://makemeacocktail.com/img/misc/nolist.avif" alt="no cocktails" class="max-w-sm m-auto block mt-6"> 650 </div> 651 652 <div class="absolute top-0 end-0 mt-4 me-4"> 653 <ui-close data-flux-modal-close > 654 <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"> 655 <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"> 656 <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"/> 657</svg> 658 </button> 659</ui-close> 660 </div> 661 </dialog> 662</ui-modal> 663</div> 664<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":"UQHXH7Svyhv4ZvOKxryv","name":"upsell-modal-window","path":"en\/search","method":"GET","release":"a-a-a","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en","islands":[]},"checksum":"c295b98449933088acd8c68ab9f975f0f8af11a7f2f185e78075402fee4ca0b0"}" wire:effects="{"partials":[],"listeners":["open-upsell-modal"]}" wire:id="UQHXH7Svyhv4ZvOKxryv" wire:name="upsell-modal-window"> 665 <ui-modal wire:model.self="showModal" data-flux-modal> 666 667 <dialog 668 wire:ignore.self 669 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" 670 x-data="fluxModal(null, 'UQHXH7Svyhv4ZvOKxryv')" 671 x-on:modal-show.document="handleShow($event)" 672 x-on:modal-close.document="handleClose($event)" 673 > 674 <div class="space-y-4"> 675 <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> 676 677 <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> 678 <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> 679 680 <div> 681 <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"> 682 <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> 683 684 <div class="order-last mt-6"> 685 <ul role="list" class="-my-2 text-sm text-gray-900"> 686 <h4 class="font-semibold text-lg"">Personalised Cocktail Mastery</h4> 687 <li class="flex py-2"> 688 <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"> 689 <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"/> 690</svg></div> 691 <span class="ml-4"><span class="font-semibold">Cocktail recipe masterclass tips</span></span> 692</li> 693 <li class="flex py-2"> 694 <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"> 695 <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"/> 696</svg></div> 697 <span class="ml-4"><span class="font-semibold">Access to Cocktail Connie</span></span> 698</li> 699 <li class="flex py-2"> 700 <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"> 701 <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"/> 702</svg></div> 703 <span class="ml-4"><span class="font-semibold">Cocktail creator plus</span></span> 704</li> 705 706 707 <h4 class="font-semibold text-lg mt-4"">Supercharged Tools</h4> 708 <li class="flex py-2"> 709 <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"> 710 <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"/> 711</svg></div> 712 <span class="ml-4"><span class="font-semibold">Unlimited A.I. search</span></span> 713</li> 714 <li class="flex py-2"> 715 <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"> 716 <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"/> 717</svg></div> 718 <span class="ml-4"><span class="font-semibold">All menu creator themes</span></span> 719</li> 720 721 722 <h4 class="font-semibold text-lg mt-4"">Smarter Home Bar Management</h4> 723 <li class="flex py-2"> 724 <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"> 725 <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"/> 726</svg></div> 727 <span class="ml-4"><span class="font-semibold">Multiple bars</span></span> 728</li> 729 <li class="flex py-2"> 730 <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"> 731 <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"/> 732</svg></div> 733 <span class="ml-4"><span class="font-semibold">Photo your bar</span></span> 734</li> 735 <li class="flex py-2"> 736 <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"> 737 <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"/> 738</svg></div> 739 <span class="ml-4"><span class="font-semibold">Personal My Bar image</span></span> 740</li> 741 742 <h4 class="font-semibold text-lg mt-4"">A Cleaner Experience</h4> 743 <li class="flex py-2"> 744 <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"> 745 <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"/> 746</svg></div> 747 <span class="ml-4"><span class="font-semibold">No ads, no intrusions</span></span> 748</li> 749 <li class="flex py-2"> 750 <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"> 751 <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"/> 752</svg></div> 753 <span class="ml-4"><span class="font-semibold">... and so much more ...</span></span> 754</li> 755 </ul> 756 </div> 757 758 759 </section> 760 </div> 761 762 <div class="flex justify-between w-full pt-2"> 763 <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)"> 764 <div class="absolute inset-0 flex items-center justify-center opacity-0" data-flux-loading-indicator> 765 <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"> 766 <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> 767 <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> 768</svg> 769 </div> 770 771 772 773
774 <span>Not now</span> 775 </button> 776 <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"> 777 Register 778 </a> 779 </div> 780 </div> 781 782 <div class="absolute top-0 end-0 mt-4 me-4"> 783 <ui-close data-flux-modal-close > 784 <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"> 785 <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"> 786 <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"/> 787</svg> 788 </button> 789</ui-close> 790 </div> 791 </dialog> 792</ui-modal> 793</div> 794 795 796 <div wire:key="lw-2008370301-0" wire:snapshot="{"data":{"reason":"","heading":"Upgrade to unlock this","intro":"You are one step away from this premium feature.","detail":"Upgrade to premium to unlock this and a heap more.","ctaLabel":"Upgrade to premium","ctaUrl":"","isInfoOnly":false,"showModal":false},"memo":{"id":"PzwgK6wkBo3QqEwXoVOe","name":"upsell-modal-window-premium","path":"en\/search","method":"GET","release":"a-a-a","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en","islands":[]},"checksum":"ae88cf92bebb62367c07a1675f36ac4ddbc85e324942a6144b6071b9a8e7e57f"}" wire:effects="{"partials":[],"listeners":["open-upsell-premium-modal"]}" wire:id="PzwgK6wkBo3QqEwXoVOe" wire:name="upsell-modal-window-premium"> 797 <ui-modal wire:model.self="showModal" data-flux-modal> 798 799 <dialog 800 wire:ignore.self 801 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" 802 x-data="fluxModal(null, 'PzwgK6wkBo3QqEwXoVOe')" 803 x-on:modal-show.document="handleShow($event)" 804 x-on:modal-close.document="handleClose($event)" 805 > 806 <div class="space-y-4"> 807 <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>Upgrade to unlock this</div> 808 809 <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 this premium feature.</p> <p class="[:where(&)]:font-normal [:where(&)]:text-sm [:where(&)]:text-zinc-500 [:where(&)]:dark:text-white/70" data-flux-text >Upgrade to premium to unlock this and a heap more.</p> 810 <!--[if BLOCK]><![endif]--> <div data-orientation="horizontal" role="none" class="border-0 [print-color-adjust:exact] bg-zinc-800/15 dark:bg-white/20 h-px w-full" data-flux-separator></div> 811 812 <div> 813 <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 premium members and get access to this and a heap more.</p> <section class="flex flex-col overflow-hidden rounded-xl p-6 shadow-lg shadow-gray-900/5 md:order-first bg-linear-to-r from-blue-50 to-cyan-100 lg:order-0"> 814 <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> 815 816 <div class="order-last mt-6"> 817 <ul role="list" class="-my-2 text-sm text-gray-900"> 818 <h4 class="font-semibold text-lg"">Personalised Cocktail Mastery</h4> 819 <li class="flex py-2"> 820 <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"> 821 <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"/> 822</svg></div> 823 <span class="ml-4"><span class="font-semibold">Cocktail recipe masterclass tips</span></span> 824</li> 825 <li class="flex py-2"> 826 <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"> 827 <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"/> 828</svg></div> 829 <span class="ml-4"><span class="font-semibold">Access to Cocktail Connie</span></span> 830</li> 831 <li class="flex py-2"> 832 <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"> 833 <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"/> 834</svg></div> 835 <span class="ml-4"><span class="font-semibold">Cocktail creator plus</span></span> 836</li> 837 838 839 <h4 class="font-semibold text-lg mt-4"">Supercharged Tools</h4> 840 <li class="flex py-2"> 841 <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"> 842 <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"/> 843</svg></div> 844 <span class="ml-4"><span class="font-semibold">Unlimited A.I. search</span></span> 845</li> 846 <li class="flex py-2"> 847 <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"> 848 <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"/> 849</svg></div> 850 <span class="ml-4"><span class="font-semibold">All menu creator themes</span></span> 851</li> 852 853 854 <h4 class="font-semibold text-lg mt-4"">Smarter Home Bar Management</h4> 855 <li class="flex py-2"> 856 <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"> 857 <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"/> 858</svg></div> 859 <span class="ml-4"><span class="font-semibold">Multiple bars</span></span> 860</li> 861 <li class="flex py-2"> 862 <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"> 863 <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"/> 864</svg></div> 865 <span class="ml-4"><span class="font-semibold">Photo your bar</span></span> 866</li> 867 <li class="flex py-2"> 868 <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"> 869 <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"/> 870</svg></div> 871 <span class="ml-4"><span class="font-semibold">Personal My Bar image</span></span> 872</li> 873 874 <h4 class="font-semibold text-lg mt-4"">A Cleaner Experience</h4> 875 <li class="flex py-2"> 876 <div><svg class="w-6 h-6 text-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon"> 877 <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/> 878</svg></div> 879 <span class="ml-4"><span class="font-semibold">No ads, no intrusions</span></span> 880</li> 881 <li class="flex py-2"> 882 <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"> 883 <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"/> 884</svg></div> 885 <span class="ml-4"><span class="font-semibold">... and so much more ...</span></span> 886</li> 887 </ul> 888 </div> 889 890 891 </section> 892 </div> 893 <!--[if ENDBLOCK]><![endif]--> 894 <div class="flex justify-between w-full pt-2"> 895 <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)"> 896 <div class="absolute inset-0 flex items-center justify-center opacity-0" data-flux-loading-indicator> 897 <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"> 898 <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> 899 <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> 900</svg> 901 </div> 902 903 904 905
906 <span>Not now</span> 907 </button> 908 <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> </div> 909 </div> 910 911 <div class="absolute top-0 end-0 mt-4 me-4"> 912 <ui-close data-flux-modal-close > 913 <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"> 914 <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"> 915 <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"/> 916</svg> 917 </button> 918</ui-close> 919 </div> 920 </dialog> 921</ui-modal> 922</div> 923 924<input type="hidden" name="_token" id="_token" value="KuarknPUOVFz80KrKx7d4XYsfvNoD9BECLD6ZKQa"/> 925<input type="hidden" name="csrf_token" id="csrf_token" value="KuarknPUOVFz80KrKx7d4XYsfvNoD9BECLD6ZKQa"/> 926 927 928 929 <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)]" 930 data-bginstant="https://makemeacocktail.com/img/page-heros/search.avif" 931> 932 <div class="page-contain mt-[80px] md:mt-[160px]"></div> 933 </div> 934 935 936<div class="z-20 relative" > 937 <header class="row sticky top-0 " 938 style="z-index: 99;" 939 > 940 <div class="page-contain 941 bg-[#000]/50 bg-blend-multiply backdrop-blur-lg z-100 relative 942 " x-data="{ mobileMenuVisible: false, accountMenuVisible: false }"> 943 <div class="py-4 -mr-4"><div class="flex justify-between items-center z-50"> 944 <a href="https://makemeacocktail.com/en" class="flex items-center gap-x-3"> 945 <img src="https://makemeacocktail.com/img/logo.svg" class="w-6 h-6" alt="logo"/> 946 <h2 class="font-magenda text-xl leading-1 py-0 my-0 pt-1 947 text-white 948 " 949 role="heading">Make Me a Cocktail</h2> 950 </a> 951 952 <div class="justify-between items-center hidden md:flex"> 953 <a href="https://makemeacocktail.com/en/surpriseMe" 954 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 955 text-white 956 " 957 958> 959 <div 960 class=" 961 dark:text-white 962 text-inherit 963 " 964> 965 <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"> 966<path d="M18 15L21 18M21 18L18 21M21 18H18.5689C17.6297 18 17.1601 18 16.7338 17.8705C16.3564 17.7559 16.0054 17.5681 15.7007 17.3176C15.3565 17.0348 15.096 16.644 14.575 15.8626L14.3333 15.5M18 3L21 6M21 6L18 9M21 6H18.5689C17.6297 6 17.1601 6 16.7338 6.12945C16.3564 6.24406 16.0054 6.43194 15.7007 6.68236C15.3565 6.96523 15.096 7.35597 14.575 8.13744L9.42496 15.8626C8.90398 16.644 8.64349 17.0348 8.29933 17.3176C7.99464 17.5681 7.64357 17.7559 7.2662 17.8705C6.83994 18 6.37033 18 5.43112 18H3M3 6H5.43112C6.37033 6 6.83994 6 7.2662 6.12945C7.64357 6.24406 7.99464 6.43194 8.29933 6.68236C8.64349 6.96523 8.90398 7.35597 9.42496 8.13744L9.66667 8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/> 967</svg> 968</div> 969 Surprise me 970</a> 971 <a href="javascript:;" 972 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 973 text-white 974 " 975 onclick="Livewire.dispatch('open-command-palette')" 976> 977 <div 978 class=" 979 dark:text-white 980 text-inherit 981 " 982> 983 <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"> 984<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
9846.58172 19 11Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/> 985</svg> 986</div> 987 Search 988</a> 989 <a href="https://makemeacocktail.com/en/subscribe" 990 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 991 text-white 992 " 993 994> 995 <div 996 class=" 997 dark:text-white 998 text-inherit 999 " 1000> 1001 <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"> 1002<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"/> 1003</svg> 1004</div> 1005 Newsletter 1006</a> 1007 <a href="https://makemeacocktail.com/login" 1008 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 1009 text-white 1010 " 1011 1012> 1013 <div 1014 class=" 1015 dark:text-white 1016 text-inherit 1017 " 1018> 1019 <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"> 1020<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"/> 1021</svg> 1022</div> 1023 Log in / register 1024</a> 1025 </div> 1026 1027 <div class=" md:hidden flex items-center gap-x-2"> 1028 1029 <div onclick="Livewire.dispatch('open-command-palette')" class="mr-1 cursor-pointer p-1"> 1030 <div 1031 class=" 1032 dark:text-white 1033 text-inherit 1034 " 1035> 1036 <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"> 1037<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"/> 1038</svg> 1039</div> 1040 </div> 1041 1042 <div @click="mobileMenuVisible = !mobileMenuVisible; accountMenuVisible = false"> 1043 1044 <svg x-show="!mobileMenuVisible" class="w-6 h-6 cursor-pointer 1045 text-white 1046 " 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"> 1047 <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"/> 1048</svg> <div class="border-2 rounded-md border-blue-100 bg-gray-600" x-show="mobileMenuVisible" x-cloak> 1049 <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"> 1050 <path stroke-linecap="round" stroke-linejoin="round" d="M6 18
105018 6M6 6l12 12"/> 1051</svg> </div> 1052 </div> 1053 1054 <div class="relative mr-2"> 1055 </div> 1056 </div> 1057 1058</div> 1059</div> 1060 <div class="md:pt-4 md:pb-4 -ml-4"><div class="justify-between items-center hidden md:flex"> 1061 <nav x-data="{ submenu: false }"> 1062 <ul class="flex" role="menubar"> 1063 <li> 1064 <a href="https://makemeacocktail.com/en/myBar" 1065 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 1066 1067 text-white 1068 " 1069 1070 role="menuitem" 1071> 1072 My Bar 1073 </a> 1074 </li> 1075 <li> 1076 <a href="https://makemeacocktail.com/en/cocktails" 1077 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 1078 1079 text-white 1080 " 1081 1082 role="menuitem" 1083> 1084 Cocktails 1085 </a> 1086 </li> 1087 <li> 1088 <a href="https://makemeacocktail.com/en/listmania" 1089 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 1090 1091 text-white 1092 " 1093 1094 role="menuitem" 1095> 1096 Listmania 1097 </a> 1098 </li> 1099 <li> 1100 <a href="https://makemeacocktail.com/en/level-up" 1101 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 1102 1103 text-white 1104 " 1105 1106 role="menuitem" 1107> 1108 Level up 1109 </a> 1110 </li> 1111 <li class="relative"> 1112 <a href="javascript:;" 1113 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 1114 1115 text-white 1116 " 1117 @click="submenu = !submenu" 1118 role="menuitem" 1119> 1120 Explore 1121 <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 1122 text-white 1123 " 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"> 1124 <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/> 1125</svg> </a> 1126 <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" 1127 x-show="submenu" 1128 x-cloak 1129 x-transition:enter="transition ease-out duration-150" 1130 x-transition:enter-start="opacity-0 scale-90" 1131 x-transition:enter-end="opacity-100 scale-100" 1132 x-transition:leave="transition ease-in duration-150" 1133 x-transition:leave-start="opacity-100 scale-100" 1134 x-transition:leave-end="opacity-0 scale-90" 1135 > 1136 <li> 1137 <a 1138 href="https://makemeacocktail.com/en/search" 1139 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" 1140 role="menuitem" 1141> 1142 Search 1143</a> 1144 </li> 1145 1146 <li> 1147 <a 1148 href="https://makemeacocktail.com/en/ingredients" 1149 class="flex items-center font-semibold text-sm px-4 py-2 leading-4 rounded-md text-gray-700 hover:bg-blue-50 hover:text-blue-1000 dark:hover:bg-gray-200 group transition duration-300 ease-in-out" 1150 role="menuitem" 1151> 1152 Ingredients 1153</a> 1154 </li> 1155 <li> 1156 <a 1157 href="https://makemeacocktail.com/en/blog" 1158 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" 1159 role="menuitem" 1160> 1161 Blog 1162</a> 1163 </li> 1164 1165 <li class="border-t border-gray-50"> 1166 <a 1167 href="https://makemeacocktail.com/en/cocktail-creator" 1168 class="flex items-center font-semibold text-sm px-4 py-2 leading-4 rounded-md text-gray-700 hover:bg-blue-50 hover:text-blue-1000 dark:hover:bg-gray-200 group transition duration-300 ease-in-out" 1169 role="menuitem" 1170> 1171 Cocktail creator 1172</a> 1173 </li> 1174 <li> 1175 <a 1176 href="https://makemeacocktail.com/en/add-a-recipe" 1177 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" 1178 role="menuitem" 1179> 1180 Add a recipe 1181</a> 1182 </li> 1183 <li> 1184 <a 1185 href="https://makemeacocktail.com/en/menu-creator" 1186 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" 1187 role="menuitem" 1188> 1189 Menu creator 1190</a> 1191 </li> 1192 <li> 1193 <a 1194 href="https://makemeacocktail.com/en/wordpress-plugin" 1195 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" 1196 role="menuitem" 1197> 1198 Wordpress plugin 1199</a> 1200 </li> 1201 <li> 1202 <a 1203 href="https://makemeacocktail.com/en/widget-creator" 1204 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" 1205 role="menuitem" 1206> 1207 Widget creator 1208</a> 1209 </li> 1210 1211 <li class="border-t border-gray-50"> 1212 <a 1213 href="https://makemeacocktail.com/en/getting-started" 1214 class="flex items-center font-semibold text-sm px-4 py-2 leading-4 rounded-md text-gray-700 hover:bg-blue-50 hover:text-blue-1000 dark:hover:bg-gray-200 group transition duration-300 ease-in-out" 1215 role="menuitem" 1216> 1217 Getting started 1218</a> 1219 </li> 1220 <li> 1221 <a 1222 href="https://makemeacocktail.com/en/premium" 1223 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" 1224 role="menuitem" 1225> 1226 <div 1227 class=" 1228 dark:text-white 1229 text-inherit 1230 " 1231> 1232 <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"> 1233<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"/> 1234</svg> 1235</div> 1236 Premium membership 1237</a> 1238 </li> 1239 </ul> 1240 </li> 1241 <li> 1242 <a href="https://makemeacocktail.com/en/premium" 1243 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 1244 1245 text-yellow-400 dark:text-yellow-500 py-2! 1246 " 1247 1248 role="menuitem" 1249> 1250 <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"> 1251 <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
1251L15.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"/> 1252</svg> Go Premium 1253 </a> 1254 </li> 1255 </ul> 1256 </nav> 1257 1258 <ul x-data="myBarCount()" @mybar-count-changed.window="count += $event.detail.delta" class="flex items-center 1259 text-white 1260 "> 1261 <li> 1262 <a href="https://makemeacocktail.com/en/myBar" class="relative flex gap-x-1 mr-3 text-xs tracking-tight items-center" title="Go to My Bar"> 1263 <div 1264 class=" 1265 dark:text-white 1266 text-inherit 1267 " 1268> 1269 <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"> 1270 <path 1271 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" 1272 stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> 1273</svg> 1274 1275</div> 1276 <div class="leading-4"> 1277 <template x-if="count === null"> 1278 <span class="inline-block w-16 h-3 bg-gray-300 dark:bg-gray-600 rounded animate-pulse"></span> 1279 </template> 1280 <template x-if="count === 0"> 1281 <span>Your bar is currently empty</span> 1282 </template> 1283 <template x-if="count > 0"> 1284 <span><span class="myBarIngredientCount" x-text="count"></span> items in your active bar</span> 1285 </template> 1286 </div> 1287 </a> 1288 </li> 1289 <li class="darkModeToggle relative flex items-center leading-4" @click="toggleDarkLightModeByClick()" title="Switch dark / light mode"> 1290 <div 1291 class=" 1292 dark:text-white 1293 text-inherit 1294 " 1295> 1296 <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"> 1297 <path 1298 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" 1299 fill="currentColor" 1300 fill-rule="evenodd" clip-rule="evenodd" 1301 /> 1302</svg> 1303 1304</div> 1305 <div class="absolute top-2.5 right-8"> 1306 <div 1307 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" 1308 x-show="darkLightModeTooltip" 1309 style="min-width: 220px; transform: translateY(-50%)" 1310 x-cloak 1311> 1312 You can switch theme with shift + / 1313</div> 1314 </div> 1315 </li> 1316 <li class="ml-2"> 1317 <div x-data="{ open: false }" @click.outside="open = false" class="relative flex items-center"> 1318 <button 1319 @click="open = !open" 1320 class="flex items-center gap-1 cursor-pointer hover:opacity-75 transition duration-300 ease-in-out" 1321 title="Switch language" 1322 >
1323 <span class="text-xl">ð¬ð§</span> 1324 <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"> 1325 <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/> 1326</svg> </button> 1327 1328 <div 1329 x-show="open" 1330 x-cloak 1331 x-transition:enter="transition ease-out duration-150" 1332 x-transition:enter-start="opacity-0 scale-90" 1333 x-transition:enter-end="opacity-100 scale-100" 1334 x-transition:leave="transition ease-in duration-150" 1335 x-transition:leave-start="opacity-100 scale-100" 1336 x-transition:leave-end="opacity-0 scale-90" 1337 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" 1338 > 1339 <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"> 1340 <span class="text-base">ð¬ð§</span> 1341 English 1342 </span> 1343 <a 1344 href="https://makemeacocktail.com/de/search" 1345 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" 1346 > 1347 <span class="text-base">ð©ðª</span> 1348 Deutsch 1349 </a> 1350 <a 1351 href="https://makemeacocktail.com/es/search" 1352 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" 1353 > 1354 <span class="text-base">ðªð¸</span> 1355 Español 1356 </a> 1357 <a 1358 href="https://makemeacocktail.com/fr/search" 1359 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" 1360 > 1361 <span class="text-base">ð«ð·</span> 1362 Français 1363 </a> 1364 <a 1365 href="https://makemeacocktail.com/pt/search" 1366 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" 1367 > 1368 <span class="text-base">ðµð¹</span> 1369 Português 1370 </a> 1371 <a 1372 href="https://makemeacocktail.com/pt-BR/search" 1373 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" 1374 > 1375 <span class="text-base">ð§ð·</span> 1376 Português (Brasil) 1377 </a> 1378 <a 1379 href="https://makemeacocktail.com/it/search" 1380 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" 1381 > 1382 <span class="text-base">ð®ð¹</span> 1383 Italiano 1384 </a> 1385 <a 1386 href="https://makemeacocktail.com/nl/search" 1387 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" 1388 >
1389 <span class="text-base">ð³ð±</span> 1390 Nederlands 1391 </a> 1392 </div> 1393 </div> 1394 </li> 1395 1396 <li x-show="count > 3" x-cloak> 1397 <a href="https://makemeacocktail.com/en/search/mybar" 1398 data-hotkey="Mod+b" 1399 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 1400 hover:rotate-90 transform transition duration-700 ease-in-out 1401 " 1402 title="See all cocktails you can make" 1403 > 1404 <div 1405 class=" 1406 dark:text-white 1407 text-inherit 1408 " 1409> 1410 <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"> 1411 <path 1412 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" 1413 stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> 1414</svg> 1415 1416</div> 1417 </a> 1418 </li> 1419 </ul> 1420</div> 1421 1422 1423<div class="md:hidden absolute top-16 left-0 right-0 w-full px-4" 1424 style="z-index: 90" 1425 x-cloak 1426 x-show="mobileMenuVisible" 1427 x-transition:enter="transition ease-out duration-150" 1428 x-transition:enter-start="opacity-0 scale-90" 1429 x-transition:enter-end="opacity-100 scale-100" 1430 x-transition:leave="transition ease-in duration-150" 1431 x-transition:leave-start="opacity-100 scale-100" 1432 x-transition:leave-end="opacity-0 scale-90"> 1433 <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"> 1434 <ul> 1435 <li class="pt-2"> 1436 <a 1437 href="https://makemeacocktail.com/en/account/dashboard" 1438 class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3 1439 justify-start 1440 " 1441 role="menuitem" 1442 1443> 1444 Dashboard 1445 </a> 1446 </li> 1447 <li> 1448 <a 1449 href="https://makemeacocktail.com/en/myBar" 1450 class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3 1451 justify-start 1452 " 1453 role="menuitem" 1454 1455> 1456 My Bar 1457 </a> 1458 </li> 1459 <li> 1460 <a 1461 href="https://makemeacocktail.com/en/cocktails" 1462 class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3 1463 justify-start 1464 " 1465 role="menuitem" 1466 1467> 1468 Cocktails 1469 </a> 1470 </li> 1471 <li> 1472 <a 1473 href="https://makemeacocktail.com/en/listmania" 1474 class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3 1475 justify-start 1476 " 1477 role="menuitem" 1478 1479> 1480 Listmania 1481 </a> 1482 </li> 1483 <li> 1484 <a 1485 href="https://makemeacocktail.com/en/level-up" 1486 class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3 1487 justify-start 1488 " 1489 role="menuitem" 1490 1491> 1492 Level up 1493 </a> 1494 </li> 1495 1496 <li> 1497 <a 1498 href="https://makemeacocktail.com/en/premium" 1499 class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3 1500 justify-start 1501 " 1502 role="menuitem" 1503 1504> 1505 <div 1506 class=" 1507 dark:text-white 1508 text-inherit 1509 " 1510> 1511 <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"> 1512<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
151214.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"/> 1513</svg> 1514</div> 1515 Go Premium 1516 </a> 1517 </li> 1518 <li class="relative"> 1519 <a 1520 class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3 1521 justify-between 1522 " 1523 role="menuitem" 1524 @click="submenu = !submenu" 1525> 1526 Explore 1527 <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"> 1528 <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"/> 1529</svg> </a> 1530 <ul class="bg-gray-00 dark:bg-gray-950 px-4" x-show="submenu" 1531 x-transition:enter="transition ease-out duration-150" 1532 x-transition:enter-start="opacity-0" 1533 x-transition:enter-end="opacity-100" 1534 x-transition:leave="transition ease-in duration-150" 1535 x-transition:leave-start="opacity-100" 1536 x-transition:leave-end="opacity-0"> 1537 <li> 1538 <a 1539 href="https://makemeacocktail.com/en/cocktail-creator" 1540 class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3 1541 justify-start 1542 " 1543 role="menuitem" 1544 1545> 1546 Cocktail creator 1547 </a> 1548 </li> 1549 <li> 1550 <a 1551 href="https://makemeacocktail.com/en/add-a-recipe" 1552 class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3 1553 justify-start 1554 " 1555 role="menuitem" 1556 1557> 1558 Add a recipe 1559 </a> 1560 </li> 1561 <li> 1562 <a 1563 href="https://makemeacocktail.com/en/menu-creator" 1564 class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3 1565 justify-start 1566 " 1567 role="menuitem" 1568 1569> 1570 Menu creator 1571 </a> 1572 </li> 1573 <li> 1574 <a 1575 href="https://makemeacocktail.com/en/wordpress-plugin" 1576 class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3 1577 justify-start 1578 " 1579 role="menuitem" 1580 1581> 1582 Wordpress plugin 1583 </a> 1584 </li> 1585 <li> 1586 <a 1587 href="https://makemeacocktail.com/en/widget-creator" 1588 class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3 1589 justify-start 1590 " 1591 role="menuitem" 1592 1593> 1594 Widget creator 1595 </a> 1596 </li> 1597 <li> 1598 <a 1599 href="https://makemeacocktail.com/en/ingredients" 1600 class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3 1601 justify-start 1602 " 1603 role="menuitem" 1604 1605> 1606 Ingredients 1607 </a> 1608 </li> 1609 <li> 1610 <a 1611 href="https://makemeacocktail.com/en/blog" 1612 class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3 1613 justify-start 1614 " 1615 role="menuitem" 1616 1617> 1618 Blog 1619 </a> 1620 </li> 1621 <li> 1622 <a 1623 href="https://makemeacocktail.com/en/getting-started" 1624 class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3 pb-6 1625 justify-start 1626 " 1627 role="menuitem" 1628 1629> 1630 Getting started 1631 </a> 1632 </li> 1633 </ul> 1634 </li> 1635 </ul> 1636 1637 <ul class="border-t border-gray-100 dark:border-gray-800 grid grid-cols-2 py-4"> 1638 <li> 1639 <a 1640 href="https://makemeacocktail.com/en/surpriseMe" 1641 class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3 1642 justify-start 1643 " 1644 role="menuitem" 1645 1646> 1647 <div 1648 class=" 1649 dark:text-white 1650 text-inherit 1651 " 1652> 1653 <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"> 1654<path d="M18 15L21 18M21 18L18 21M21 18H18.5689C17.6297 18 17.1601 18
165416.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"/> 1655</svg> 1656</div> 1657 Surprise me 1658 </a> 1659 </li> 1660 <li> 1661 <a 1662 href="https://makemeacocktail.com/en/search" 1663 class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3 1664 justify-start 1665 " 1666 role="menuitem" 1667 1668> 1669 <div 1670 class=" 1671 dark:text-white 1672 text-inherit 1673 " 1674> 1675 <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"> 1676<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"/> 1677</svg> 1678</div> 1679 Power search 1680 </a> 1681 </li> 1682 <li> 1683 <a 1684 href="https://makemeacocktail.com/en/subscribe" 1685 class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3 1686 justify-start 1687 " 1688 role="menuitem" 1689 1690> 1691 <div 1692 class=" 1693 dark:text-white 1694 text-inherit 1695 " 1696> 1697 <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"> 1698<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"/> 1699</svg> 1700</div> 1701 Newsletter 1702 </a> 1703 </li> 1704 <li> 1705 <a 1706 class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3 darkModeToggle 1707 justify-start 1708 " 1709 role="menuitem" 1710 @click="toggleDarkLightModeByClick" 1711> 1712 <div 1713 class=" 1714 dark:text-white 1715 text-inherit 1716 " 1717> 1718 <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"> 1719 <path 1720 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" 1721 fill="currentColor" 1722 fill-rule="evenodd" clip-rule="evenodd" 1723 /> 1724</svg> 1725 1726</div> 1727 Dark mode 1728 </a> 1729 </li> 1730 <li class="col-span-2">
1731 <span x-data="{ lang_choice_open: false }"> 1732 <a 1733 class="flex items-center font-semibold px-6 leading-4 text-gray-900 dark:text-gray-00 py-3 !justify-center 1734 justify-start 1735 " 1736 role="menuitem" 1737 @click="lang_choice_open = !lang_choice_open" 1738> 1739 <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"> 1740 <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"/> 1741</svg> 1742 English 1743 </a> 1744 <ul x-show="lang_choice_open" x-cloak x-transition class="bg-gray-50 dark:bg-gray-950 px-4"> 1745 <li> 1746 <a href="https://makemeacocktail.com/de/search" 1747 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" 1748 > 1749 <span class="text-lg">ð©ðª</span> 1750 Deutsch 1751 </a> 1752 </li> 1753 <li> 1754 <a href="https://makemeacocktail.com/es/search" 1755 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" 1756 > 1757 <span class="text-lg">ðªð¸</span> 1758 Español 1759 </a> 1760 </li> 1761 <li> 1762 <a href="https://makemeacocktail.com/fr/search" 1763 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" 1764 > 1765 <span class="text-lg">ð«ð·</span> 1766 Français 1767 </a> 1768 </li> 1769 <li> 1770 <a href="https://makemeacocktail.com/pt/search" 1771 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" 1772 > 1773 <span class="text-lg">ðµð¹</span> 1774 Português 1775 </a> 1776 </li> 1777 <li> 1778 <a href="https://makemeacocktail.com/pt-BR/search" 1779 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" 1780 > 1781 <span class="text-lg">ð§ð·</span> 1782 Português (Brasil) 1783 </a> 1784 </li> 1785 <li> 1786 <a href="https://makemeacocktail.com/it/search" 1787 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" 1788 >
1789 <span class="text-lg">ð®ð¹</span> 1790 Italiano 1791 </a> 1792 </li> 1793 <li> 1794 <a href="https://makemeacocktail.com/nl/search" 1795 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" 1796 > 1797 <span class="text-lg">ð³ð±</span> 1798 Nederlands 1799 </a> 1800 </li> 1801 </ul> 1802 </span> 1803 </li> 1804 1805 1806 </ul> 1807 1808 <div class="px-4 pb-4 flex flex-col gap-y-3"> 1809 <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"> 1810 Sign up for free 1811 </a> 1812 1813 1814 1815 <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"> 1816 Log in 1817 </a> 1818 1819 1820 </div> 1821 1822 </nav> 1823</div> 1824</div> 1825 1826 </div> 1827 </header> 1828 <div id="main" class="row"> 1829 <div class="mt-[30vh] bg-white dark:bg-black"> 1830 <div class="page-contain"> 1831 <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"> 1832 <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">A.I. Search</h1> 1833</div> 1834 </div> 1835 <div class="page-contain text-center py-10" x-data="{ 1836 searchString: '', 1837 inserted: false 1838 }"> 1839 <form action="https://makemeacocktail.com/en/search/results" method="POST"> 1840 1841 <input type="hidden" name="_token" value="KuarknPUOVFz80KrKx7d4XYsfvNoD9BECLD6ZKQa" autocomplete="off"> <div> 1842 1843 <p class="py-2 text-gray-900 dark:text-gray-100 text-xl mb-2">Not sure what you're looking for, or in need of some inspiration?</p> 1844 <p class="py-2 text-gray-900 dark:text-gray-100 text-xl mb-2">Ask Cocktail Colin anything you want</p> 1845 1846 <div class="flex justify-center"><img src="https://makemeacocktail.com/img/misc/colin.avif" alt="colin the cocktail robot" class="w-24"></div> 1847 1848 <div class="py-2 px-4 text-xs rounded-lg bg-linear-to-r from-green-100/50 to-cyan-100/50 dark:from-purple-700/50 dark:purple-500/50 inline-block"><a href="https://makemeacocktail.com/en/account/upgrade" class="text-blue-600 dark:text-blue-100 underline-offset-2 underline">Become a premium member</a> for unlimited AI searches, automatically generated FAQs about your search and a heap more.</div> 1849 1850 <div class="pt-8 pb-4 px-4 bg-gray-00 dark:bg-ice-900 my-4 rounded-lg"> 1851 <div 1852 class="pl-2.5 inline-flex items-center gap-x-2 text-sm rounded-lg w-full border border-gray-100 dark:border-gray-800 max-w-4xl" name="s" label="Ask away ..." required="required" x-model="searchString" 1853> 1854 <svg class="w-6 h-6 w-4! h-4! text-gray-600 z-30" 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="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/> 1856</svg> <input 1857 class="z-20 placeholder:text-slate-400 border-gray-100 bg-white text-gray-600 py-2 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 -ml-8 pl-8 rounded-lg 1858 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-100 1859 " 1860 style="width: calc(100% + 3rem)" 1861 type="text" 1862 name="s" 1863 wire:model="s" 1864 placeholder="Ask away ..." 1865 id="searchStringFocusable" 1866 class="max-w-4xl" name="s" label="Ask away ..." required="required" x-model="searchString" 1867 /> 1868</div> 1869 1870 1871 <div class="text-gray-400 text-sm italic mb-2 mt-1"> 1872 <p class="text-gray-500 px-2 dark:text-gray-200 text-xs">Try: Show me some cocktails for my friends wedding. We want prosecco or champagne based with some fruit elements.
1873 <span x-show="!inserted" class="text-blue-600 dark:text-blue-300 cursor-pointer inline-flex items-center gap-x-2" x-on:click="inserted = true; searchString = 'Show me some cocktails for my friends wedding. We want prosecco / champagne based with some fruit elements.'"> 1874 Insert this <svg class="w-6 h-6 w-3! h-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"> 1875 <path stroke-linecap="round" stroke-linejoin="round" d="m9 9 6-6m0 0 6 6m-6-6v12a6 6 0 0 1-12 0v-3"/> 1876</svg> </span> 1877 <div x-show="inserted" class="inline-flex items-center gap-x-2"><svg class="w-6 h-6 w-3! h-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"> 1878 <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3"/> 1879</svg> Now hit that search button <svg class="w-6 h-6 w-3! h-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"> 1880 <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3"/> 1881</svg></div> 1882 </p> 1883 </div> 1884 </div> 1885 </div> 1886 1887 <button 1888 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] mt-4 py-3 px-20 max-w-full" type="submit"> 1889 Search 1890 </button> 1891 1892 1893 1894 1895 1896 <div class="mt-4 text-gray-400 text-sm"> 1897 Sign up for free to get 10 AI searches a month. 1898 </div> 1899 </form> 1900 </div> 1901 <div class="pt-4 pb-10"> 1902 1903 <div class="text-center"><h3 class="text-gray-400 dark:text-gray-100 font-semi-bold text-xl tracking-wide font-grotesk text-gray-700 mb-2">Some example searches</h3> 1904</div> 1905 1906 <div class="container_1 pb-4 mt-8"> 1907 <div class="p-2.5"> 1908 <a href="https://makemeacocktail.com/en/search/result/9d527a3b-d913-448b-9a9b-42580fca15da/what-cocktail-can-i-make-to-surprise-my-wife-that-we-are-going-on-holiday-to-florida" 1909 class="hover:opacity-50 transition w-full " 1910 > 1911 <div class="rounded-lg p-4 bg-linear-to-r from-[#F3F7FC] to-[#F4F1FE] dark:from-gray-800 dark:to-gray-900 max-w-full md:max-w-sm text-left break-inside-avoid max-w-lg! w-full relative"> 1912 <blockquote class="text-gray-700 dark:text-gray-100 text-sm w-full flex flex-col items-center justify-center">
1913 What cocktail can I make to surprise my wife that we are going on holiday to Florida? 1914 <span class="inline-flex items-center justify-center gap-x-2 text-xs mt-3"> <svg class="w-6 h-6 w-3!" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon"> 1915 <path fill-rule="evenodd" d="M3 10a.75.75 0 0 1 .75-.75h10.638L10.23 5.29a.75.75 0 1 1 1.04-1.08l5.5 5.25a.75.75 0 0 1 0 1.08l-5.5 5.25a.75.75 0 1 1-1.04-1.08l4.158-3.96H3.75A.75.75 0 0 1 3 10Z" clip-rule="evenodd"/> 1916</svg></span> 1917 </blockquote> 1918</div> 1919 </a> 1920</div> 1921 <div class="p-2.5"> 1922 <a href="https://makemeacocktail.com/en/search/result/9d527915-d03c-407b-9c84-895cf86339d3/what-cocktail-can-i-make-to-surprise-my-wife-that-we-are-going-on-holiday-to-florida" 1923 class="hover:opacity-50 transition w-full " 1924 > 1925 <div class="rounded-lg p-4 bg-linear-to-r from-[#F3F7FC] to-[#F4F1FE] dark:from-gray-800 dark:to-gray-900 max-w-full md:max-w-sm text-left break-inside-avoid max-w-lg! w-full relative"> 1926 <blockquote class="text-gray-700 dark:text-gray-100 text-sm w-full flex flex-col items-center justify-center">
1927 What cocktail can I make to surprise my wife that we are going on holiday to Florida? 1928 <span class="inline-flex items-center justify-center gap-x-2 text-xs mt-3"> <svg class="w-6 h-6 w-3!" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon"> 1929 <path fill-rule="evenodd" d="M3 10a.75.75 0 0 1 .75-.75h10.638L10.23 5.29a.75.75 0 1 1 1.04-1.08l5.5 5.25a.75.75 0 0 1 0 1.08l-5.5 5.25a.75.75 0 1 1-1.04-1.08l4.158-3.96H3.75A.75.75 0 0 1 3 10Z" clip-rule="evenodd"/> 1930</svg></span> 1931 </blockquote> 1932</div> 1933 </a> 1934</div> 1935 <div class="p-2.5"> 1936 <a href="https://makemeacocktail.com/en/search/result/9d3ef22e-6ffc-4fad-8303-0e9707ab50bf/show-me-a-stirred-gin-cocktail" 1937 class="hover:opacity-50 transition w-full " 1938 > 1939 <div class="rounded-lg p-4 bg-linear-to-r from-[#F3F7FC] to-[#F4F1FE] dark:from-gray-800 dark:to-gray-900 max-w-full md:max-w-sm text-left break-inside-avoid max-w-lg! w-full relative"> 1940 <blockquote class="text-gray-700 dark:text-gray-100 text-sm w-full flex flex-col items-center justify-center"> 1941 Show me a stirred gin cocktail. 1942 <span class="inline-flex items-center justify-center gap-x-2 text-xs mt-3"> <svg class="w-6 h-6 w-3!" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon"> 1943 <path fill-rule="evenodd" d="M3 10a.75.75 0 0 1 .75-.75h10.638L10.23 5.29a.75.75 0 1 1 1.04-1.08l5.5 5.25a.75.75 0 0 1 0 1.08l-5.5 5.25a.75.75 0 1 1-1.04-1.08l4.158-3.96H3.75A.75.75 0 0 1 3 10Z" clip-rule="evenodd"/> 1944</svg></span> 1945 </blockquote> 1946</div> 1947 </a> 1948</div> 1949 <div class="p-2.5"> 1950 <a href="https://makemeacocktail.com/en/search/result/9d00208b-f9e8-480d-a13d-65430089b20a/can-you-name-some-cocktails-for-friends-coming-round-that-are-easy-to-make-and-serve-with-a-bbq" 1951 class="hover:opacity-50 transition w-full " 1952 > 1953 <div class="rounded-lg p-4 bg-linear-to-r from-[#F3F7FC] to-[#F4F1FE] dark:from-gray-800 dark:to-gray-900 max-w-full md:max-w-sm text-left break-inside-avoid max-w-lg! w-full relative"> 1954 <blockquote class="text-gray-700 dark:text-gray-100 text-sm w-full flex flex-col items-center justify-center"> 1955 Can you name some cocktails for friends coming round, that are easy to make and serve with a... 1956 <span class="inline-flex items-center justify-center gap-x-2 text-xs mt-3"> <svg class="w-6 h-6 w-3!" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon"> 1957 <path fill-rule="evenodd" d="M3 10a.75.75 0 0 1 .75-.75h10.638L10.23 5.29a.75.75 0 1 1 1.04-1.08l5.5 5.25a.75.75 0 0 1 0 1.08l-5.5 5.25a.75.75 0 1 1-1.04-1.08l4.158-3.96H3.75A.75.75 0 0 1 3 10Z" clip-rule="evenodd"/> 1958</svg></span> 1959 </blockquote> 1960</div> 1961 </a> 1962</div> 1963 <div class="p-2.5"> 1964 <a href="https://makemeacocktail.com/en/search/result/9d527915-d03c-407b-9c84-895cf86339d3/what-cocktail-can-i-make-to-surprise-my-wife-that-we-are-going-on-holiday-to-florida" 1965 class="hover:opacity-50 transition w-full " 1966 > 1967 <div class="rounded-lg p-4 bg-linear-to-r from-[#F3F7FC] to-[#F4F1FE] dark:from-gray-800 dark:to-gray-900 max-w-full md:max-w-sm text-left break-inside-avoid max-w-lg! w-full relative"> 1968 <blockquote class="text-gray-700 dark:text-gray-100 text-sm w-full flex flex-col items-center justify-center">
1969 What cocktail can I make to surprise my wife that we are going on holiday to Florida? 1970 <span class="inline-flex items-center justify-center gap-x-2 text-xs mt-3"> <svg class="w-6 h-6 w-3!" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon"> 1971 <path fill-rule="evenodd" d="M3 10a.75.75 0 0 1 .75-.75h10.638L10.23 5.29a.75.75 0 1 1 1.04-1.08l5.5 5.25a.75.75 0 0 1 0 1.08l-5.5 5.25a.75.75 0 1 1-1.04-1.08l4.158-3.96H3.75A.75.75 0 0 1 3 10Z" clip-rule="evenodd"/> 1972</svg></span> 1973 </blockquote> 1974</div> 1975 </a> 1976</div> 1977 <div class="p-2.5"> 1978 <a href="https://makemeacocktail.com/en/search/result/9d3ef22e-6ffc-4fad-8303-0e9707ab50bf/show-me-a-stirred-gin-cocktail" 1979 class="hover:opacity-50 transition w-full " 1980 > 1981 <div class="rounded-lg p-4 bg-linear-to-r from-[#F3F7FC] to-[#F4F1FE] dark:from-gray-800 dark:to-gray-900 max-w-full md:max-w-sm text-left break-inside-avoid max-w-lg! w-full relative"> 1982 <blockquote class="text-gray-700 dark:text-gray-100 text-sm w-full flex flex-col items-center justify-center"> 1983 Show me a stirred gin cocktail. 1984 <span class="inline-flex items-center justify-center gap-x-2 text-xs mt-3"> <svg class="w-6 h-6 w-3!" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon"> 1985 <path fill-rule="evenodd" d="M3 10a.75.75 0 0 1 .75-.75h10.638L10.23 5.29a.75.75 0 1 1 1.04-1.08l5.5 5.25a.75.75 0 0 1 0 1.08l-5.5 5.25a.75.75 0 1 1-1.04-1.08l4.158-3.96H3.75A.75.75 0 0 1 3 10Z" clip-rule="evenodd"/> 1986</svg></span> 1987 </blockquote> 1988</div> 1989 </a> 1990</div> 1991 <div class="p-2.5"> 1992 <a href="https://makemeacocktail.com/en/search/result/9d527a3b-d913-448b-9a9b-42580fca15da/what-cocktail-can-i-make-to-surprise-my-wife-that-we-are-going-on-holiday-to-florida" 1993 class="hover:opacity-50 transition w-full " 1994 > 1995 <div class="rounded-lg p-4 bg-linear-to-r from-[#F3F7FC] to-[#F4F1FE] dark:from-gray-800 dark:to-gray-900 max-w-full md:max-w-sm text-left break-inside-avoid max-w-lg! w-full relative"> 1996 <blockquote class="text-gray-700 dark:text-gray-100 text-sm w-full flex flex-col items-center justify-center">
1997 What cocktail can I make to surprise my wife that we are going on holiday to Florida? 1998 <span class="inline-flex items-center justify-center gap-x-2 text-xs mt-3"> <svg class="w-6 h-6 w-3!" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon"> 1999 <path fill-rule="evenodd" d="M3 10a.75.75 0 0 1 .75-.75h10.638L10.23 5.29a.75.75 0 1 1 1.04-1.08l5.5 5.25a.75.75 0 0 1 0 1.08l-5.5 5.25a.75.75 0 1 1-1.04-1.08l4.158-3.96H3.75A.75.75 0 0 1 3 10Z" clip-rule="evenodd"/> 2000</svg></span> 2001 </blockquote> 2002</div> 2003 </a> 2004</div> 2005 <div class="p-2.5"> 2006 <a href="https://makemeacocktail.com/en/search/result/9d00208b-f9e8-480d-a13d-65430089b20a/can-you-name-some-cocktails-for-friends-coming-round-that-are-easy-to-make-and-serve-with-a-bbq" 2007 class="hover:opacity-50 transition w-full " 2008 > 2009 <div class="rounded-lg p-4 bg-linear-to-r from-[#F3F7FC] to-[#F4F1FE] dark:from-gray-800 dark:to-gray-900 max-w-full md:max-w-sm text-left break-inside-avoid max-w-lg! w-full relative"> 2010 <blockquote class="text-gray-700 dark:text-gray-100 text-sm w-full flex flex-col items-center justify-center"> 2011 Can you name some cocktails for friends coming round, that are easy to make and serve with a... 2012 <span class="inline-flex items-center justify-center gap-x-2 text-xs mt-3"> <svg class="w-6 h-6 w-3!" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon"> 2013 <path fill-rule="evenodd" d="M3 10a.75.75 0 0 1 .75-.75h10.638L10.23 5.29a.75.75 0 1 1 1.04-1.08l5.5 5.25a.75.75 0 0 1 0 1.08l-5.5 5.25a.75.75 0 1 1-1.04-1.08l4.158-3.96H3.75A.75.75 0 0 1 3 10Z" clip-rule="evenodd"/> 2014</svg></span> 2015 </blockquote> 2016</div> 2017 </a> 2018</div> 2019 </div> 2020 <div class="container_2 pb-10"> 2021 <div class="p-2.5"> 2022 <a href="https://makemeacocktail.com/en/search/result/9d527a3b-d913-448b-9a9b-42580fca15da/what-cocktail-can-i-make-to-surprise-my-wife-that-we-are-going-on-holiday-to-florida" 2023 class="hover:opacity-50 transition w-full " 2024 > 2025 <div class="rounded-lg p-4 bg-linear-to-r from-[#F3F7FC] to-[#F4F1FE] dark:from-gray-800 dark:to-gray-900 max-w-full md:max-w-sm text-left break-inside-avoid max-w-lg! w-full relative"> 2026 <blockquote class="text-gray-700 dark:text-gray-100 text-sm w-full flex flex-col items-center justify-center">
2027 What cocktail can I make to surprise my wife that we are going on holiday to Florida? 2028 <span class="inline-flex items-center justify-center gap-x-2 text-xs mt-3"> <svg class="w-6 h-6 w-3!" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon"> 2029 <path fill-rule="evenodd" d="M3 10a.75.75 0 0 1 .75-.75h10.638L10.23 5.29a.75.75 0 1 1 1.04-1.08l5.5 5.25a.75.75 0 0 1 0 1.08l-5.5 5.25a.75.75 0 1 1-1.04-1.08l4.158-3.96H3.75A.75.75 0 0 1 3 10Z" clip-rule="evenodd"/> 2030</svg></span> 2031 </blockquote> 2032</div> 2033 </a> 2034</div> 2035 <div class="p-2.5"> 2036 <a href="https://makemeacocktail.com/en/search/result/9d3ef22e-6ffc-4fad-8303-0e9707ab50bf/show-me-a-stirred-gin-cocktail" 2037 class="hover:opacity-50 transition w-full " 2038 > 2039 <div class="rounded-lg p-4 bg-linear-to-r from-[#F3F7FC] to-[#F4F1FE] dark:from-gray-800 dark:to-gray-900 max-w-full md:max-w-sm text-left break-inside-avoid max-w-lg! w-full relative"> 2040 <blockquote class="text-gray-700 dark:text-gray-100 text-sm w-full flex flex-col items-center justify-center"> 2041 Show me a stirred gin cocktail. 2042 <span class="inline-flex items-center justify-center gap-x-2 text-xs mt-3"> <svg class="w-6 h-6 w-3!" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon"> 2043 <path fill-rule="evenodd" d="M3 10a.75.75 0 0 1 .75-.75h10.638L10.23 5.29a.75.75 0 1 1 1.04-1.08l5.5 5.25a.75.75 0 0 1 0 1.08l-5.5 5.25a.75.75 0 1 1-1.04-1.08l4.158-3.96H3.75A.75.75 0 0 1 3 10Z" clip-rule="evenodd"/> 2044</svg></span> 2045 </blockquote> 2046</div> 2047 </a> 2048</div> 2049 <div class="p-2.5"> 2050 <a href="https://makemeacocktail.com/en/search/result/9d527915-d03c-407b-9c84-895cf86339d3/what-cocktail-can-i-make-to-surprise-my-wife-that-we-are-going-on-holiday-to-florida" 2051 class="hover:opacity-50 transition w-full " 2052 > 2053 <div class="rounded-lg p-4 bg-linear-to-r from-[#F3F7FC] to-[#F4F1FE] dark:from-gray-800 dark:to-gray-900 max-w-full md:max-w-sm text-left break-inside-avoid max-w-lg! w-full relative"> 2054 <blockquote class="text-gray-700 dark:text-gray-100 text-sm w-full flex flex-col items-center justify-center">
2055 What cocktail can I make to surprise my wife that we are going on holiday to Florida? 2056 <span class="inline-flex items-center justify-center gap-x-2 text-xs mt-3"> <svg class="w-6 h-6 w-3!" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon"> 2057 <path fill-rule="evenodd" d="M3 10a.75.75 0 0 1 .75-.75h10.638L10.23 5.29a.75.75 0 1 1 1.04-1.08l5.5 5.25a.75.75 0 0 1 0 1.08l-5.5 5.25a.75.75 0 1 1-1.04-1.08l4.158-3.96H3.75A.75.75 0 0 1 3 10Z" clip-rule="evenodd"/> 2058</svg></span> 2059 </blockquote> 2060</div> 2061 </a> 2062</div> 2063 <div class="p-2.5"> 2064 <a href="https://makemeacocktail.com/en/search/result/9d00208b-f9e8-480d-a13d-65430089b20a/can-you-name-some-cocktails-for-friends-coming-round-that-are-easy-to-make-and-serve-with-a-bbq" 2065 class="hover:opacity-50 transition w-full " 2066 > 2067 <div class="rounded-lg p-4 bg-linear-to-r from-[#F3F7FC] to-[#F4F1FE] dark:from-gray-800 dark:to-gray-900 max-w-full md:max-w-sm text-left break-inside-avoid max-w-lg! w-full relative"> 2068 <blockquote class="text-gray-700 dark:text-gray-100 text-sm w-full flex flex-col items-center justify-center"> 2069 Can you name some cocktails for friends coming round, that are easy to make and serve with a... 2070 <span class="inline-flex items-center justify-center gap-x-2 text-xs mt-3"> <svg class="w-6 h-6 w-3!" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon"> 2071 <path fill-rule="evenodd" d="M3 10a.75.75 0 0 1 .75-.75h10.638L10.23 5.29a.75.75 0 1 1 1.04-1.08l5.5 5.25a.75.75 0 0 1 0 1.08l-5.5 5.25a.75.75 0 1 1-1.04-1.08l4.158-3.96H3.75A.75.75 0 0 1 3 10Z" clip-rule="evenodd"/> 2072</svg></span> 2073 </blockquote> 2074</div> 2075 </a> 2076</div> 2077 <div class="p-2.5"> 2078 <a href="https://makemeacocktail.com/en/search/result/9d527a3b-d913-448b-9a9b-42580fca15da/what-cocktail-can-i-make-to-surprise-my-wife-that-we-are-going-on-holiday-to-florida" 2079 class="hover:opacity-50 transition w-full " 2080 > 2081 <div class="rounded-lg p-4 bg-linear-to-r from-[#F3F7FC] to-[#F4F1FE] dark:from-gray-800 dark:to-gray-900 max-w-full md:max-w-sm text-left break-inside-avoid max-w-lg! w-full relative"> 2082 <blockquote class="text-gray-700 dark:text-gray-100 text-sm w-full flex flex-col items-center justify-center">
2083 What cocktail can I make to surprise my wife that we are going on holiday to Florida? 2084 <span class="inline-flex items-center justify-center gap-x-2 text-xs mt-3"> <svg class="w-6 h-6 w-3!" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon"> 2085 <path fill-rule="evenodd" d="M3 10a.75.75 0 0 1 .75-.75h10.638L10.23 5.29a.75.75 0 1 1 1.04-1.08l5.5 5.25a.75.75 0 0 1 0 1.08l-5.5 5.25a.75.75 0 1 1-1.04-1.08l4.158-3.96H3.75A.75.75 0 0 1 3 10Z" clip-rule="evenodd"/> 2086</svg></span> 2087 </blockquote> 2088</div> 2089 </a> 2090</div> 2091 <div class="p-2.5"> 2092 <a href="https://makemeacocktail.com/en/search/result/9d527915-d03c-407b-9c84-895cf86339d3/what-cocktail-can-i-make-to-surprise-my-wife-that-we-are-going-on-holiday-to-florida" 2093 class="hover:opacity-50 transition w-full " 2094 > 2095 <div class="rounded-lg p-4 bg-linear-to-r from-[#F3F7FC] to-[#F4F1FE] dark:from-gray-800 dark:to-gray-900 max-w-full md:max-w-sm text-left break-inside-avoid max-w-lg! w-full relative"> 2096 <blockquote class="text-gray-700 dark:text-gray-100 text-sm w-full flex flex-col items-center justify-center">
2097 What cocktail can I make to surprise my wife that we are going on holiday to Florida? 2098 <span class="inline-flex items-center justify-center gap-x-2 text-xs mt-3"> <svg class="w-6 h-6 w-3!" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon"> 2099 <path fill-rule="evenodd" d="M3 10a.75.75 0 0 1 .75-.75h10.638L10.23 5.29a.75.75 0 1 1 1.04-1.08l5.5 5.25a.75.75 0 0 1 0 1.08l-5.5 5.25a.75.75 0 1 1-1.04-1.08l4.158-3.96H3.75A.75.75 0 0 1 3 10Z" clip-rule="evenodd"/> 2100</svg></span> 2101 </blockquote> 2102</div> 2103 </a> 2104</div> 2105 <div class="p-2.5"> 2106 <a href="https://makemeacocktail.com/en/search/result/9d3ef22e-6ffc-4fad-8303-0e9707ab50bf/show-me-a-stirred-gin-cocktail" 2107 class="hover:opacity-50 transition w-full " 2108 > 2109 <div class="rounded-lg p-4 bg-linear-to-r from-[#F3F7FC] to-[#F4F1FE] dark:from-gray-800 dark:to-gray-900 max-w-full md:max-w-sm text-left break-inside-avoid max-w-lg! w-full relative"> 2110 <blockquote class="text-gray-700 dark:text-gray-100 text-sm w-full flex flex-col items-center justify-center"> 2111 Show me a stirred gin cocktail. 2112 <span class="inline-flex items-center justify-center gap-x-2 text-xs mt-3"> <svg class="w-6 h-6 w-3!" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon"> 2113 <path fill-rule="evenodd" d="M3 10a.75.75 0 0 1 .75-.75h10.638L10.23 5.29a.75.75 0 1 1 1.04-1.08l5.5 5.25a.75.75 0 0 1 0 1.08l-5.5 5.25a.75.75 0 1 1-1.04-1.08l4.158-3.96H3.75A.75.75 0 0 1 3 10Z" clip-rule="evenodd"/> 2114</svg></span> 2115 </blockquote> 2116</div> 2117 </a> 2118</div> 2119 <div class="p-2.5"> 2120 <a href="https://makemeacocktail.com/en/search/result/9d00208b-f9e8-480d-a13d-65430089b20a/can-you-name-some-cocktails-for-friends-coming-round-that-are-easy-to-make-and-serve-with-a-bbq" 2121 class="hover:opacity-50 transition w-full " 2122 > 2123 <div class="rounded-lg p-4 bg-linear-to-r from-[#F3F7FC] to-[#F4F1FE] dark:from-gray-800 dark:to-gray-900 max-w-full md:max-w-sm text-left break-inside-avoid max-w-lg! w-full relative"> 2124 <blockquote class="text-gray-700 dark:text-gray-100 text-sm w-full flex flex-col items-center justify-center"> 2125 Can you name some cocktails for friends coming round, that are easy to make and serve with a... 2126 <span class="inline-flex items-center justify-center gap-x-2 text-xs mt-3"> <svg class="w-6 h-6 w-3!" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon"> 2127 <path fill-rule="evenodd" d="M3 10a.75.75 0 0 1 .75-.75h10.638L10.23 5.29a.75.75 0 1 1 1.04-1.08l5.5 5.25a.75.75 0 0 1 0 1.08l-5.5 5.25a.75.75 0 1 1-1.04-1.08l4.158-3.96H3.75A.75.75 0 0 1 3 10Z" clip-rule="evenodd"/> 2128</svg></span> 2129 </blockquote> 2130</div> 2131 </a> 2132</div> 2133 </div> 2134 </div> 2135 2136 <style > 2137 .container_1 { } 2138 .container_2 { margin-left: -1000px;} 2139 .container_1, .container_2 { 2140 overflow: hidden; 2141 display: flex; 2142 } 2143 2144 .container_1 div, .container_2 div { 2145 min-width: 300px; 2146 max-width: 300px; 2147 width: 300px; 2148 height: 130px; 2149 margin-right: 1rem; 2150 display: flex; 2151 align-items: center; 2152 text-align: center; 2153 text-wrap: balance; 2154 } 2155 2156 .container_1 div { 2157 animation: slide 65s linear infinite; 2158 } 2159 .container_2 div { 2160 animation: slide_reverse 75s linear infinite; 2161 } 2162 2163 2164 @keyframes slide { 2165 0% { 2166 transform: translate3d(0, 0, 0); 2167 } 2168 100% { 2169 transform: translate3d(-1800px, 0, 0); /* The image width */ 2170 } 2171 } 2172 @keyframes slide_reverse { 2173 0% { 2174 transform: translate3d(0px, 0, 0); /* The image width */ 2175 2176 } 2177 100% { 2178 transform: translate3d(1800px, 0, 0); 2179 } 2180 } 2181 </style> 2182 </div> 2183 2184 </div> 2185 <footer class="row"> 2186 <footer class="bg-linear-to-r from-[#F3F7FC] to-[#F4F1FE] dark:from-gray-800 dark:to-gray-900 page-contain py-10"> 2187 <div class="flex xl:flex-row flex-col justify-between items-center xl:items-start gap-x-4"> 2188 <div class="space-y-4 "> 2189 <div class="flex justify-center xl:justify-start gap-x-6 text-sm flex-wrap gap-y-1"> 2190 <a href="https://makemeacocktail.com/en/makers" class="hover:underline">Community</a> 2191 <a href="https://makemeacocktail.com/en/premium" class="hover:underline">Premium</a> 2192 <a href="https://makemeacocktail.com/en/our-apps" class="hover:underline">Our apps</a> 2193 <a href="https://makemeacocktail.com/en/our-books" class="hover:underline">Our books</a> 2194 <a href="https://makemeacocktail.com/en/badges" class="hover:underline">Badges</a> 2195 <a href="https://makemeacocktail.com/en/advertising" class="hover:underline">Advertising</a> 2196 <a href="https://makemeacocktail.com/en/about" class="hover:underline">About</a> 2197 <a href="https://makemeacocktail.com/en/media" class="hover:underline">Media</a> 2198 <a href="https://makemeacocktail.com/en/subscribe" class="hover:underline">Newsletter</a> 2199 <a href="https://makemeacocktail.com/en/glossary" class="hover:underline">Glossary</a> 2200 <a href="https://makemeacocktail.com/en/contact" class="hover:underline">Contact</a> 2201 </div> 2202 <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"> 2203 <a href="https://makemeacocktail.com/en/add-a-recipe" class="hover:underline">
2203Add a recipe</a> 2204 <a href="https://makemeacocktail.com/en/cocktail-creator" class="hover:underline">Cocktail creator</a> 2205 <a href="https://makemeacocktail.com/en/widget-creator" class="hover:underline">Widget creator</a> 2206 <a href="https://makemeacocktail.com/en/wordpress-plugin" class="hover:underline">Wordpress plugin</a> 2207 <a href="https://makemeacocktail.com/en/myBar/guide" class="hover:underline">My Bar guide</a> 2208 <a href="https://makemeacocktail.com/en/searchcloud" class="hover:underline">Search cloud</a> 2209 <a href="https://makemeacocktail.com/en/gift-card" class="hover:underline">Gift cards</a> 2210 </div> 2211 <div class="flex justify-center xl:justify-start gap-x-6 text-xs flex-wrap gap-y-1"> 2212 <a href="https://makemeacocktail.com/en/brand-partner" class="hover:underline">Brand partners</a> 2213 <a href="https://makemeacocktail.com/en/privacy-policy" class="hover:underline">Privacy Policy</a> 2214 <a href="https://makemeacocktail.com/en/terms-and-conditions" class="hover:underline">T&C</a> 2215 <a href="https://makemeacocktail.com/en/FAQ" class="hover:underline">FAQ</a> 2216 <a href="https://climate.stripe.com/7Fztid" class="hover:underline">Our climate commitment</a> 2217 <a href="https://make-me-a-cocktail.betteruptime.com/" class="hover:underline">Service status</a> 2218 <a href="https://make-me-a-cocktail.canny.io/changelog" class="hover:underline">Changelog</a> 2219 </div> 2220 </div> 2221 <div class="my-8 xl:my-0"> 2222 <ul class="flex gap-x-2 justify-center items-center"> 2223 <li><a href="https://apps.apple.com/gb/app/make-me-a-cocktail/id1541820377" class="hover:opacity-50 transition duration-150"> 2224 <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> 2225 <g> 2226 <path fill="none" d="M0 0h24v24H0z"/> 2227 <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"/> 2228 </g> 2229</svg> <span class="sr-only">appstore</span> 2230 </a></li> 2231 <li><a href="https://play.google.com/store/apps/details?id=com.makemeacocktail.app&hl=en_GB" class="hover:opacity-50 transition duration-150"> 2232 <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> 2233 <g> 2234 <path fill="none" d="M0 0h24v24H0z"/> 2235 <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"/> 2236 </g> 2237</svg> <span class="sr-only">playstore</span> 2238 </a></li> 2239 <li><a href="https://wordpress.org/plugins/make-me-a-cocktail/" class="hover:opacity-50 transition duration-150"> 2240 <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"> 2241 <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"/> 2242 <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"/> 2243 <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"/> 2244</svg>
2244 <span class="sr-only">wordpress</span> 2245 </a></li> 2246 <li><a href="https://www.facebook.com/makemeacocktail" class="hover:opacity-50 transition duration-150"> 2247 <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> 2248 <g> 2249 <path fill="none" d="M0 0h24v24H0z"/> 2250 <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"/> 2251 </g> 2252</svg> <span class="sr-only">facebook</span> 2253 </a></li> 2254 <li><a href="https://www.twitter.com/makemeacocktail" class="hover:opacity-50 transition duration-150"> 2255 <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> 2256 <g> 2257 <path fill="none" d="M0 0h24v24H0z"/> 2258 <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"/> 2259 </g> 2260</svg> <span class="sr-only">twitter</span> 2261 </a></li> 2262 <li><a href="https://instagram.com/makemeacocktail" class="hover:opacity-50 transition duration-150"> 2263 <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> 2264 <g> 2265 <path fill="none" d="M0 0h24v24H0z"/> 2266 <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 12 2z"/> 2267 </g> 2268</svg> <span class="sr-only">instagram</span> 2269 </a></li> 2270 <li><a href="https://pinterest.com/makemeacocktail" class="hover:opacity-50 transition duration-150"> 2271 <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> 2272 <g> 2273 <path fill="none" d="M0 0h24v24H0z"/> 2274 <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"/> 2275 </g> 2276</svg>
2276 <span class="sr-only">pinterest</span> 2277 </a></li> 2278 </ul> 2279 </div> 2280 <div> 2281 <a href="https://makemeacocktail.com/en/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/en/support-us"> 2282 <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"> 2283 <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"/> 2284</svg> Support us 2285 </a> 2286 2287 2288 </div> 2289 </div> 2290 <div class="text-center mt-8 pb-8 space-y-4"> 2291 <div class="flex items-center justify-center gap-3"> 2292 <a 2293 href="https://makemeacocktail.com/en/search" 2294 class="text-2xl transition duration-200 hover:scale-110 opacity-100 scale-105" 2295 title="English" 2296 > 2297 ð¬ð§ 2298 </a> 2299 <a 2300 href="https://makemeacocktail.com/de/search" 2301 class="text-2xl transition duration-200 hover:scale-110 opacity-40 hover:opacity-80" 2302 title="Deutsch" 2303 > 2304 ð©ðª 2305 </a> 2306 <a 2307 href="https://makemeacocktail.com/es/search" 2308 class="text-2xl transition duration-200 hover:scale-110 opacity-40 hover:opacity-80" 2309 title="Español" 2310 > 2311 ðªð¸ 2312 </a> 2313 <a 2314 href="https://makemeacocktail.com/fr/search" 2315 class="text-2xl transition duration-200 hover:scale-110 opacity-40 hover:opacity-80" 2316 title="Français" 2317 > 2318 ð«ð· 2319 </a> 2320 <a 2321 href="https://makemeacocktail.com/pt/search" 2322 class="text-2xl transition duration-200 hover:scale-110 opacity-40 hover:opacity-80" 2323 title="Português" 2324 > 2325 ðµð¹ 2326 </a> 2327 <a 2328 href="https://makemeacocktail.com/pt-BR/search" 2329 class="text-2xl transition duration-200 hover:scale-110 opacity-40 hover:opacity-80" 2330 title="Português (Brasil)" 2331 > 2332 ð§ð· 2333 </a> 2334 <a 2335 href="https://makemeacocktail.com/it/search" 2336 class="text-2xl transition duration-200 hover:scale-110 opacity-40 hover:opacity-80" 2337 title="Italiano" 2338 > 2339 ð®ð¹ 2340 </a> 2341 <a 2342 href="https://makemeacocktail.com/nl/search" 2343 class="text-2xl transition duration-200 hover:scale-110 opacity-40 hover:opacity-80" 2344 title="Nederlands" 2345 > 2346 ð³ð± 2347 </a> 2348 </div> 2349 <p class="text-xs dark:text-gray-300 text-gray-500">Copyright © 2026 Make me a cocktail. All Rights Reserved</p> 2350 </div> 2351</footer> 2352 2353 </footer> 2354</div> 2355 2356
2357<script src="https://makemeacocktail.com/flux/flux.min.js?id=2d7e3896" data-navigate-once></script>
2357 2358 2359
2360<script> 2361 document.addEventListener("DOMContentLoaded", function() { 2362 var lazyBgElements = document.querySelectorAll('[data-bginstant]'); 2363 lazyBgElements.forEach(function(element) { 2364 var imageUrl = element.getAttribute('data-bginstant'); 2365 element.style.backgroundImage = 'url(' + imageUrl + ')'; 2366 }); 2367 }); 2368 2369 if ('IntersectionObserver' in window) { 2370 document.addEventListener("DOMContentLoaded", function() { 2371 // Function to handle intersection logic 2372 function handleIntersection(entries) { 2373 entries.forEach(entry => { 2374 if (entry.isIntersecting) { 2375 entry.target.style.backgroundImage = "url('" + entry.target.dataset.bgimage + "')"; 2376 observer.unobserve(entry.target); 2377 } 2378 }); 2379 } 2380 2381 // Create the observer instance 2382 const observer = new IntersectionObserver(handleIntersection, { rootMargin: "100px" }); 2383 2384 // Function to observe elements (can be reused for both initial load and AJAX content) 2385 function observeElements() { 2386 const headers = document.querySelectorAll('[data-bgimage]'); 2387 headers.forEach(header => { 2388 if (!header.dataset.observed) { 2389 observer.observe(header); 2390 header.dataset.observed = true; // Mark as observed to avoid duplicate observers 2391 } 2392 }); 2393 } 2394 2395 // Observe elements on initial load 2396 observeElements(); 2397 2398 // Use MutationObserver to detect AJAX-loaded content 2399 const ajaxObserver = new MutationObserver(() => { 2400 observeElements(); // Re-run the observation when DOM changes 2401 }); 2402 2403 // Watch for changes in the entire document body 2404 ajaxObserver.observe(document.body, { childList: true, subtree: true }); 2405 }); 2406 } else { 2407 // Fallback for browsers without IntersectionObserver support 2408 const headers = document.querySelectorAll('[data-bgimage]'); 2409 headers.forEach(header => { 2410 header.style.backgroundImage = "url('" + header.dataset.bgimage + "')"; 2411 }); 2412 } 2413 2414 window.addEventListener('load', (event) => { 2415 document.querySelectorAll('.plugin-download-link').forEach(item => { 2416 item.addEventListener('click', event => { 2417 fathom.trackEvent('Plugin downloaded'); 2418 }); 2419 }); 2420 }); 2421</script>
2421 2422 2423 2424
2425<script> 2426 function page() { 2427 return { 2428 darkLightModeTooltip: false, 2429 shouldShowTooltip(tooltip) { 2430 return localStorage.getItem('seenTooltip4_' + tooltip) !== 'true'; 2431 }, 2432 setSeenTooltip(tooltip) { 2433 localStorage.setItem('seenTooltip4_' + tooltip, 'true'); 2434 }, 2435 toggleDarkLightModeByClick() { 2436 if (this.shouldShowTooltip('darkLightMode')) { 2437 this.darkLightModeTooltip = true; 2438 this.setSeenTooltip('darkLightMode'); 2439 } else { 2440 this.darkLightModeTooltip = false; 2441 } 2442 this.toggleDarkLightMode(); 2443 }, 2444 showTooltip(tooltip) { 2445 2446 }, 2447 toggleDarkLightMode() { 2448 if (localStorage.theme === 'light') { 2449 localStorage.theme = 'dark'; 2450 document.documentElement.classList.add('dark'); 2451 document.documentElement.classList.remove('light'); 2452 } else { 2453 localStorage.theme = 'light'; 2454 document.documentElement.classList.add('light'); 2455 document.documentElement.classList.remove('dark'); 2456 } 2457 } 2458 } 2459 } 2460 2461 document.onkeydown = function (evt) { 2462 evt = evt || window.event; 2463 // Removed question mark toggling of dark / light mode 2464 // if (evt.shiftKey && evt.keyCode == 191) { 2465 // window.dispatchEvent(new CustomEvent('toggle-key-stroke')); 2466 // } 2467 if (evt.keyCode == 39) { 2468 window.dispatchEvent(new CustomEvent('toggle-makers-mode-next')); 2469 } 2470 if (evt.keyCode == 37) { 2471 window.dispatchEvent(new CustomEvent('toggle-makers-mode-prev')); 2472 } 2473 }; 2474 2475</script>
2475 2476
2477<script> 2478 if (!window.Toast) { 2479 window.Toast = { 2480 success(text, heading = '', duration = 5000) { 2481 this.show(text, 'success', heading, duration); 2482 }, 2483 danger(text, heading = '', duration = 5000) { 2484 this.show(text, 'danger', heading, duration); 2485 }, 2486 warning(text, heading = '', duration = 5000) { 2487 this.show(text, 'warning', heading, duration); 2488 }, 2489 info(text, heading = '', duration = 5000) { 2490 this.show(text, 'info', heading, duration); 2491 }, 2492 show(text, variant = 'success', heading = '', duration = 5000) { 2493 if (window.Flux && typeof window.Flux.toast === 'function') { 2494 const payload = { 2495 text, 2496 duration, 2497 variant, 2498 }; 2499 2500 if (heading) { 2501 payload.heading = heading; 2502 } 2503 2504 window.Flux.toast(payload); 2505 2506 return; 2507 } 2508 2509 console.log(text); 2510 } 2511 }; 2512 } 2513 2514 // Alpine.js component for My Bar count. 2515 // 2516 // localStorage seeds the first paint so the header shows a number straight 2517 // away instead of a pulsing placeholder â but it is only ever a guess, and 2518 // is always reconciled against the server afterwards. Treating it as the 2519 // answer meant the header kept whatever number it last saw, forever: empty 2520 // your bar in the app, on another device, or in another session, and the 2521 // web header would still insist you had 200 items while the page below it 2522 // said nothing at all. The revalidation is async and off the paint path, 2523 // and the endpoint releases the session lock before it does any work. 2524 document.addEventListener('alpine:init', () => { 2525 Alpine.data('myBarCount', () => ({ 2526 count: null, 2527 init() { 2528 const cached = localStorage.getItem('mybar_count'); 2529 if (cached !== null) { 2530 this.count = parseInt(cached, 10); 2531 } 2532 2533 this.fetchCount(); 2534 2535 this.$watch('count', (value) => { 2536 if (value === null) { 2537 localStorage.removeItem('mybar_count'); 2538 } else { 2539 localStorage.setItem('mybar_count', value); 2540 } 2541 }); 2542 }, 2543 async fetchCount() { 2544 try { 2545 const response = await fetch('https://makemeacocktail.com/en/myBar/count'); 2546 const data = await response.json(); 2547 this.count = data.count; 2548 } catch (error) { 2549 console.error('Failed to fetch bar count:', error); 2550 this.count = 0; 2551 } 2552 }, 2553 updateCount(delta) { 2554 if (this.count !== null) { 2555 this.count += delta; 2556 } 2557 } 2558 })); 2559 }); 2560 2561 // Listen for bar changes and update Alpine components 2562 document.addEventListener('myBarNumberChanged', (event) => { 2563 const delta = parseInt(event.detail.number); 2564 2565 // Dispatch custom event for Alpine components 2566 window.dispatchEvent(new CustomEvent('mybar-count-changed', { detail: { delta } })); 2567 2568 // Show toast notification 2569 if (delta > 0) { 2570 Toast.success('Ingredient added to your bar', '', 2000); 2571 } else { 2572 Toast.danger('Ingredient removed from your bar', '', 2000); 2573 } 2574 2575 // Update legacy DOM elements (for any non-Alpine usage) 2576 let noIng = document.getElementsByClassName('onlyShowIfNoIngredients'); 2577 for (var i = 0; i < noIng.length; i++) { 2578 noIng[i].classList.add('hidden'); 2579 } 2580 let someIng = document.getElementsByClassName('onlyShowIfIngredients'); 2581 for (var i = 0; i < someIng.length; i++) { 2582 someIng[i].classList.remove('hidden'); 2583 } 2584 }); 2585</script>
2585 2586
2587<script> 2588 function fallbackCopyTextToClipboard(text) { 2589 var textArea = document.createElement("textarea"); 2590 textArea.value = text; 2591 2592 // Avoid scrolling to bottom 2593 textArea.style.top = "0"; 2594 textArea.style.left = "0"; 2595 textArea.style.position = "fixed"; 2596 2597 document.body.appendChild(textArea); 2598 textArea.focus(); 2599 textArea.select(); 2600 2601 try { 2602 var successful = document.execCommand('copy'); 2603 var msg = successful ? 'successful' : 'unsuccessful'; 2604 } catch (err) { } 2605 2606 document.body.removeChild(textArea); 2607 } 2608 2609 function copyTextToClipboard(text) { 2610 if (!navigator.clipboard) { 2611 fallbackCopyTextToClipboard(text); 2612 return; 2613 } 2614 navigator.clipboard.writeText(text).then(function () {}, function (err) { }); 2615 } 2616 2617 function scrollToSection(idname, offset = 90) { 2618 const element = document.getElementById(idname); 2619 if (element) { 2620 // Get the top position of the element within the page 2621 const elementPosition = element.getBoundingClientRect().top + window.pageYOffset; 2622 2623 // Scroll to the element, adjusted by the offset 2624 window.scrollTo({ 2625 top: elementPosition - offset, // Subtract the offset 2626 behavior: 'smooth' 2627 }); 2628 } 2629 } 2630</script>
2630 2631 2632
2633<script src="https://makemeacocktail.com/vendor/livewire/livewire.min.js?id=8642c1d5" data-csrf="KuarknPUOVFz80KrKx7d4XYsfvNoD9BECLD6ZKQa" 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 2633
2633
2634<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:'a402c3c48ae0e7fd',t:'MTc5MDI2MzEzOA=='};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>
2634<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>
2634 2635</body> 2636</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.