1<!DOCTYPE html> 2<html 3 lang="en" 4 class="w-full min-h-screen dark" 5> 6<head> 7 <meta charset="utf-8"/> 8 <meta name="viewport" content="width=device-width, initial-scale=1"/> 9 <meta name="csrf-token" content="s5lAP8R6xg7tHFd6XSz4IkwF6iQ8H6fPHjX3lhi3"> 10 11 <title>Number Go Up</title> 12 13 <link rel="icon" type="image/png" href="/img/favico/favicon-96x96.png" sizes="96x96"> 14<link rel="icon" type="image/svg+xml" href="/img/favico/favicon.svg"> 15<link rel="shortcut icon" href="/img/favico/favicon.ico"> 16<link rel="apple-touch-icon" sizes="180x180" href="/img/favico/apple-touch-icon.png"> 17<link rel="manifest" href="/img/favico/site.webmanifest"> 18<meta name="theme-color" content="#081512"> 19 <link rel="preload" as="style" href="https://numbergoup.gg/build/assets/app-BWuoH69w.css" /><link rel="stylesheet" href="https://numbergoup.gg/build/assets/app-BWuoH69w.css" data-navigate-track="reload" /> 20
20<script type="text/javascript" src="/js/vendor/msal-browser.min.js"></script>
20 21 22
22<script src="https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js" defer></script>
22 23
23<script> 24 window.OneSignalDeferred = window.OneSignalDeferred || []; 25 OneSignalDeferred.push(async function (OneSignal) { 26 await OneSignal.init({ appId: '76074049-f5f6-4c70-baac-062bba8759b1' }); 27 28 // Tie the browser's push subscription to the NGU user id so the 29 // backend can target it by External ID; drop the association on 30 // logout so a shared browser doesn't leak notifications. 31 await OneSignal.logout(); 32 }); 33 </script>
33 34 35
35<script src="https://cdn.usefathom.com/script.js" data-site="JQZSFTIB" defer></script>
35 36
36<script> 37 document.addEventListener('livewire:navigated', () => { 38 if (window.fathom) { window.fathom.trackPageview(); } 39 }); 40 </script>
40 41 <!-- 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> 42</head> 43<body 44 class="w-full min-h-screen bg-abyss-950 font-inter text-white antialiased" 45> 46<div 47 class="sticky top-0 z-50 bg-abyss-950/60 backdrop-blur-xl py-3 px-4 lg:px-8"> 48 <nav class="container m-auto relative flex items-center justify-between gap-x-5 min-h-11"> 49 <a wire:navigate href="https://numbergoup.gg" 50 class="flex items-center gap-x-2.5 shrink-0 transition-opacity duration-200 hover:opacity-80"> 51 <img class="size-8" src="https://numbergoup.gg/img/logo.png" alt="Number Go Up Logo"/> 52 <span class="hidden sm:inline font-display text-xl tracking-tight text-gold-100">Number Go Up</span> 53 </a> 54 55 <div class="absolute left-1/2 -translate-x-1/2 hidden lg:flex items-center gap-x-1 rounded-full bg-abyss-900/70 ring-1 ring-abyss-700/50 backdrop-blur px-1.5 py-1.5 shadow-sm"> 56 <a wire:navigate class="inline-flex items-center rounded-full px-4 py-1.5 text-sm font-medium text-seafoam-200/70 hover:text-gold-100 hover:bg-abyss-700/60 focus:outline-hidden transition-all duration-200" href="https://numbergoup.gg"> 57 Home 58</a> 59 60 61 <a wire:navigate class="inline-flex items-center rounded-full px-4 py-1.5 text-sm font-semibold text-seafoam-200 bg-abyss-700 shadow-sm ring-1 ring-abyss-600/70 focus:outline-hidden transition-all duration-200" href="https://numbergoup.gg/cosmetics"> 62 Cosmetics 63</a> 64 65 <a wire:navigate class="inline-flex items-center rounded-full px-4 py-1.5 text-sm font-medium text-seafoam-200/70 hover:text-gold-100 hover:bg-abyss-700/60 focus:outline-hidden transition-all duration-200" href="https://numbergoup.gg/smugglers-market"> 66 Smuggler's Market 67</a> 68 69 <a wire:navigate class="inline-flex items-center rounded-full px-4 py-1.5 text-sm font-medium text-seafoam-200/70 hover:text-gold-100 hover:bg-abyss-700/60 focus:outline-hidden transition-all duration-200" href="https://numbergoup.gg/events"> 70 Events 71</a> 72 73 <a wire:navigate class="inline-flex items-center rounded-full px-4 py-1.5 text-sm font-medium text-seafoam-200/70 hover:text-gold-100 hover:bg-abyss-700/60 focus:outline-hidden transition-all duration-200" href="https://numbergoup.gg/tools"> 74 Tools 75</a> 76 77 <div class="group/more relative"> 78 <button 79 type="button" 80 id="more-menu-button" 81 aria-expanded="false" 82 aria-haspopup="true" 83 class="inline-flex items-center gap-x-1 rounded-full px-4 py-1.5 text-sm font-medium text-seafoam-200/70 hover:text-gold-100 hover:bg-abyss-700/60 focus:outline-hidden transition-all duration-200" 84 > 85 More 86 <svg class="size-4 -rotate-90 transition-transform duration-200 group-hover/more:translate-y-
86px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> 87 <path fill-rule="evenodd" d="M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd" /> 88</svg> 89 </button> 90 91 <div class="absolute left-1/2 -translate-x-1/2 hidden origin-top pt-4 group-hover/more:block z-40"> 92 <div 93 class="w-48 divide-y divide-abyss-700/70 rounded-2xl bg-abyss-900/95 backdrop-blur-xl shadow-lg ring-1 ring-abyss-700/50 focus:outline-hidden" 94 role="menu" 95 aria-orientation="vertical" 96 aria-labelledby="more-menu-button" 97 tabindex="-1" 98 > 99 <div class="group py-1" role="none"> 100 <a wire:navigate href="https://numbergoup.gg/tools/custom-seas-servers"> 101 <button 102 type="button" 103 class="cursor-pointer px-4 py-2 w-full flex items-center group-hover:bg-abyss-700/60 font-medium text-seafoam-100 group-hover:text-gold-100 text-sm transition-colors duration-200" 104 role="menuitem" 105 tabindex="-1" 106> 107 <svg class="mr-3 h-5 w-5 text-seafoam-200/70 group-hover:text-seafoam-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"> 108 <circle cx="12" cy="12" r="9.25" /> 109 <path d="M15.6 8.4 13.5 13.5 8.4 15.6 10.5 10.5 15.6 8.4Z" fill="currentColor" stroke="none" /> 110 <circle cx="12" cy="12" r="1" fill="currentColor" stroke="none" /> 111</svg> 112 Custom Seas 113</button> </a> 114 </div> 115 <div class="group py-1" role="none"> 116 <a href="https://numbergoup.gg#faq"> 117 <button 118 type="button" 119 class="cursor-pointer px-4 py-2 w-full flex items-center group-hover:bg-abyss-700/60 font-medium text-seafoam-100 group-hover:text-gold-100 text-sm transition-colors duration-200" 120 role="menuitem" 121 tabindex="-1" 122> 123 <svg class="mr-3 h-5 w-5 text-seafoam-200/70 group-hover:text-seafoam-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> 124 <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" /> 125</svg> FAQ 126</button> </a> 127 </div> 128 <div class="group py-1" role="none"> 129 <a wire:navigate href="https://numbergoup.gg/support"> 130 <button 131 type="button" 132 class="cursor-pointer px-4 py-2 w-full flex items-center group-hover:bg-abyss-700/60 font-medium text-seafoam-100 group-hover:text-gold-100 text-sm transition-colors duration-200" 133 role="menuitem" 134 tabindex="-1" 135> 136 <svg class="mr-3 h-5 w-5 text-seafoam-200/70 group-hover:text-seafoam-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> 137 <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z" /> 138</svg> 139 Support 140</button> </a> 141 </div> 142 <div class="group py-1" role="none"> 143 <a wire:navigate href="https://numbergoup.gg/release-notes"> 144 <button 145 type="button" 146 class="cursor-pointer px-4 py-2 w-full flex items-center group-hover:bg-abyss-700/60 font-medium text-seafoam-100 group-hover:text-gold-100 text-sm transition-colors duration-200" 147 role="menuitem" 148 tabindex="-1" 149> 150 <svg class="mr-3 h-5 w-5 text-seafoam-200/70 group-hover:text-seafoam-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> 151 <path fill-rule="evenodd" d="M9 4.5a.75.75 0 0 1 .721.544l.813 2.846a3.75 3.75 0 0 0 2.576 2.576l2.846.813a.75.75 0 0 1 0 1.442l-2.846.813a3.75 3.75 0 0 0-2.576 2.576l-.813 2.846a.75.75 0 0 1-1.442 0l-.813-2.846a3.75 3.75 0 0 0-2.576-2.576l-2.846-.813a.75.75 0 0 1 0-1.442l2.846-.813A3.75 3.75 0 0 0 7.466 7.89l.813-2.846A.75.75 0 0 1 9 4.5ZM18 1.5a.75.75 0 0 1 .728.568l.258 1.036c.236.94.97 1.674 1.91 1.91l1.036.258a.75.75 0 0 1 0 1.456l-1.036.258c-.94.236-1.674.97-1.91 1.91l-.258 1.036a.75.75 0 0 1-1.456 0l-.258-1.
151036a2.625 2.625 0 0 0-1.91-1.91l-1.036-.258a.75.75 0 0 1 0-1.456l1.036-.258a2.625 2.625 0 0 0 1.91-1.91l.258-1.036A.75.75 0 0 1 18 1.5ZM16.5 15a.75.75 0 0 1 .712.513l.394 1.183c.15.447.5.799.948.948l1.183.395a.75.75 0 0 1 0 1.422l-1.183.395c-.447.15-.799.5-.948.948l-.395 1.183a.75.75 0 0 1-1.422 0l-.395-1.183a1.5 1.5 0 0 0-.948-.948l-1.183-.395a.75.75 0 0 1 0-1.422l1.183-.395c.447-.15.799-.5.948-.948l.395-1.183A.75.75 0 0 1 16.5 15Z" clip-rule="evenodd" /> 152</svg> Release Notes 153</button> </a> 154 </div> 155 <div class="group py-1" role="none"> 156 <a wire:navigate href="https://numbergoup.gg/about"> 157 <button 158 type="button" 159 class="cursor-pointer px-4 py-2 w-full flex items-center group-hover:bg-abyss-700/60 font-medium text-seafoam-100 group-hover:text-gold-100 text-sm transition-colors duration-200" 160 role="menuitem" 161 tabindex="-1" 162> 163 <svg class="mr-3 h-5 w-5 text-seafoam-200/70 group-hover:text-seafoam-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> 164 <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" /> 165</svg> 166 About 167</button> </a> 168 </div> 169 <div class="group py-1" role="none"> 170 <a href="https://ko-fi.com/numbergoup" target="_blank" rel="noopener"> 171 <button 172 type="button" 173 class="cursor-pointer px-4 py-2 w-full flex items-center group-hover:bg-abyss-700/60 font-medium text-seafoam-100 group-hover:text-gold-100 text-sm transition-colors duration-200" 174 role="menuitem" 175 tabindex="-1" 176> 177 <svg class="mr-3 h-5 w-5 text-seafoam-200/70 group-hover:text-seafoam-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> 178 <path fill-rule="evenodd" 179 d="M2.25 7.5A1.5 1.5 0 0 1 3.75 6h12a1.5 1.5 0 0 1 1.5 1.5v.75h1.125a3.375 3.375 0 1 1 0 6.75h-1.36a6.75 6.75 0 0 1-6.265 4.5h-3a6.75 6.75 0 0 1-6.75-6.75V7.5Zm15 5.25h1.125a1.875 1.875 0 1 0 0-3.75H17.25v3.75Z" 180 clip-rule="evenodd"/> 181 <path d="M4.5 21a.75.75 0 0 1 .75-.75h9a.75.75 0 0 1 0 1.5h-9A.75.75 0 0 1 4.5 21Z"/> 182</svg> 183 Buy me a Coffee 184</button> </a> 185 </div> 186 </div> 187 </div> 188 </div> 189 </div> 190 191 <div x-data="{ sidebarOpen: false }" x-on:sidebar-state.window="sidebarOpen = $event.detail.open" 192 class="ml-auto flex items-center gap-x-3"> 193 194 <div class="hidden md:flex items-center gap-x-3"> 195 <a href="/login/microsoft" 196 class="rounded-full px-5 py-2 text-sm font-semibold text-seafoam-100 ring-1 ring-inset ring-abyss-600 hover:ring-seafoam-500/60 hover:text-seafoam-300 transition-all duration-200"> 197 Login 198 </a> 199 200 <a wire:navigate href="https://numbergoup.gg/signup" 201 class="group inline-flex items-center gap-x-2 rounded-full bg-gradient-to-b from-seafoam-500 to-seafoam-600 px-5 py-2 text-sm font-semibold text-white shadow-lg shadow-seafoam-600/25 ring-1 ring-inset ring-white/15 hover:from-seafoam-400 hover:to-seafoam-500 hover:shadow-seafoam-500/40 hover:-translate-y-px transition-all duration-200"> 202 <svg class="size-4 transition-transform duration-200 group-hover:-translate-y-0.5 group-hover:translate-x-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> 203 <path fill-rule="evenodd" d="M9.315 7.584C12.195 3.883 16.695 1.5 21.75 1.5a.75.75 0 0 1 .75.75c0 5.056-2.383 9.555-6.084 12.436A6.75 6.75 0 0 1 9.75 22.5a.75.75 0 0 1-.75-.75v-4.131A15.838 15.838 0 0 1 6.382 15H2.25a.75.75 0 0 1-.75-.75 6.75 6.75 0 0 1 7.815-6.666ZM15 6.75a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5Z" clip-rule="evenodd" /> 204 <path d="M5.26 17.242a.75.75 0 1 0-.897-1.203 5.243 5.243 0 0 0-2.05 5.022.75.75 0 0 0 .625.627 5.243 5.243 0 0 0 5.022-2.051.75.75 0 1 0-1.202-.897 3.744 3.744 0 0 1-3.008 1.51c0-1.23.592-2.323 1.51-3.008Z" /> 205</svg> 206 Sign Up 207 </a> 208 </div> 209 210 <button 211 type="button" 212 x-on:click="sidebarOpen ? $dispatch('close-sidebar') : $dispatch('open-sidebar', ['partials.mobile-navigation'])" 213 :aria-expanded="sidebarOpen" 214 class="lg:hidden p-2 -mr-2 rounded-full text-seafoam-200 hover:bg-abyss-800 transition-colors cursor-pointer" 215 >
216 <span class="sr-only">Toggle menu</span> 217 <template x-if="!sidebarOpen"> 218 <svg 219 class="size-6 stroke-gray-100" 220 xmlns="http://www.w3.org/2000/svg" 221 fill="none" 222 viewBox="0 0 24 24" 223 stroke-width="1.5" 224 stroke="currentColor" 225> 226 <path 227 stroke-linecap="round" 228 stroke-linejoin="round" 229 d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" 230 /> 231</svg> 232 </template> 233 <template x-if="sidebarOpen"> 234 <svg class="size-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> 235 <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/> 236 </svg> 237 </template> 238 </button> 239 </div> 240 </nav> 241</div> 242 243<main class="w-full inline-block m-auto min-h-screen pb-20 text-gray-100"> 244 <div wire:key="lw-3437951620-0-0" wire:snapshot="{"data":{"component":null,"properties":null},"memo":{"id":"D90ZfFRpowjKOdFRhzPr","name":"layout.sidebar","path":"cosmetics","method":"GET","release":"a-a-a","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en","islands":[]},"checksum":"682ff077a6889c9a6aa0e63681ac0967aa243b12116a957f4f6ed7f332cd6bf9"}" wire:effects="[]" wire:id="D90ZfFRpowjKOdFRhzPr" wire:name="layout.sidebar" 245 x-cloak 246 x-data="{ show: false }" 247 x-init=" 248 $watch('show', (value) => { 249 if (value) { 250 document.body.classList.add('overflow-y-hidden') 251 } else { 252 document.body.classList.remove('overflow-y-hidden') 253 } 254 $dispatch('sidebar-state', { open: value }) 255 }) 256 " 257 x-on:open-sidebar.window=" 258 () => { 259 $wire.component = $event.detail[0] 260 $wire.properties = $event.detail[1] 261 $wire.$refresh() 262 show = true 263 } 264 " 265 x-on:close-sidebar.window="show = false" 266 x-on:close.stop="show = false" 267 x-on:keydown.escape.window="show = false" 268 x-show="show" 269 id="sidebar-container" 270 class="fixed inset-0 z-40" 271 aria-labelledby="slide-over-title" 272 role="dialog" 273 aria-modal="true" 274> 275 276 <div class="fixed inset-0 flex justify-end" x-on:click.self="show = false"> 277 278 <div 279 x-show="show" 280 class="absolute inset-0 bg-black/50 backdrop-blur-sm" 281 x-transition:enter="duration-300 ease-out" 282 x-transition:enter-start="opacity-0" 283 x-transition:enter-end="opacity-100" 284 x-transition:leave="duration-200 ease-in" 285 x-transition:leave-start="opacity-100" 286 x-transition:leave-end="opacity-0" 287 ></div> 288 289 290 <div 291 x-show="show" 292 class="relative w-screen max-w-sm" 293 x-transition:enter="transition duration-300 ease-out" 294 x-transition:enter-start="translate-x-full" 295 x-transition:enter-end="translate-x-0" 296 x-transition:leave="transition duration-200 ease-in" 297 x-transition:leave-start="translate-x-0" 298 x-transition:leave-end="translate-x-full" 299 > 300 <div class="flex h-full flex-col bg-abyss-900 shadow-2xl"> 301 302 <div class="flex items-center justify-between px-5 py-4 border-b border-abyss-800"> 303 <div class="flex items-center gap-x-3"> 304 <img class="size-8" src="https://numbergoup.gg/img/logo.png" alt="Number Go Up Logo"/> 305 <span class="text-lg font-bold text-white">Number Go Up</span> 306 </div> 307 <button 308 type="button" 309 x-on:click="show = false" 310 class="close-button p-2 -mr-2 rounded-lg text-seafoam-300/60 hover:text-seafoam-100 hover:bg-abyss-700 transition-colors cursor-pointer" 311 >
312 <span class="sr-only">Close menu</span> 313 <svg class="size-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> 314 <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /> 315 </svg> 316 </button> 317 </div> 318 319 320 <div class="flex-1 overflow-y-auto px-3 py-4"> 321 <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> </div> 322 </div> 323 </div> 324 </div> 325</div> <div 326 x-cloak 327 x-init=" 328 $watch('show', (on) => { 329 if (on) { 330 let numberRuns = showFor / 100 - 1 331 332 progressBarInterval = setInterval(() => { 333 let runningWidth = 334 progressBar.style.width || progressBar.offsetWidth 335 336 let decreaseBy = container.offsetWidth / numberRuns 337 338 progressBar.style.width = parseInt(runningWidth) - decreaseBy + 'px' 339 }, 100) 340 } else { 341 clearInterval(progressBarInterval) 342 } 343 }) 344 " 345 x-data="{ 346 show: false, 347 type: 'success', 348 title: null, 349 message: null, 350 showFor: 3500, 351 size: 'small', 352 themes: { 353 'success': { 354 'icon': 'text-seafoam-400', 355 'ring': 'ring-seafoam-500/30', 356 'glow': 'shadow-seafoam-950/40', 357 'bar': 'bg-gradient-to-r from-seafoam-600 to-seafoam-400', 358 }, 359 'error': { 360 'icon': 'text-rose-400', 361 'ring': 'ring-rose-500/30', 362 'glow': 'shadow-rose-950/40', 363 'bar': 'bg-gradient-to-r from-rose-600 to-rose-400', 364 }, 365 }, 366 timeout: null, 367 container: document.getElementById('large-status-message-container'), 368 progressBar: document.getElementById('status-message-progress-bar'), 369 progressBarInterval: null, 370 }" 371 x-on:show-message.window=" 372 () => { 373 clearTimeout(timeout) 374 title = event.detail[0].title || null 375 message = event.detail[0].message || 'Saved' 376 type = event.detail[0].type || 'success' 377 size = event.detail[0].size || 'small' 378 showFor = event.detail[0].showFor || showFor 379 show = true 380 timeout = setTimeout(() => { 381 show = false 382 }, showFor) 383 } 384 " 385 x-on:hide-message.window="show = false" 386 x-show="show" 387 class="z-50" 388> 389 390 <div 391 x-show="size == 'small' && show" 392 class="fixed left-1/2 top-5 z-50 flex min-w-fit -translate-x-1/2 -translate-y-0 transform items-center gap-x-3 overflow-hidden rounded-2xl border px-4 py-3 shadow-lg ring-1 backdrop-blur-xl transition-all border-abyss-600/70 bg-abyss-900/90" 393 :class="themes[type].ring + ' ' + themes[type].glow" 394 x-transition:enter="transition duration-300 ease-out" 395 x-transition:enter-start="-translate-y-3 scale-95 opacity-0" 396 x-transition:enter-end="translate-y-0 scale-100 opacity-100" 397 x-transition:leave="transition duration-200 ease-in" 398 x-transition:leave-start="translate-y-0 scale-100 opacity-100" 399 x-transition:leave-end="-translate-y-3 scale-95 opacity-0" 400 > 401 <div class="shrink-0" :class="themes[type].icon"> 402 <span x-show="type == 'success'"> 403 <svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> 404 <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" clip-rule="evenodd" /> 405</svg> </span> 406 <span x-show="type == 'error'"> 407 <svg class="size-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> 408 <path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /> 409</svg> </span> 410 </div> 411 <p 412 x-text="message" 413 class="whitespace-nowrap text-sm font-medium text-gold-100" 414 ></p> 415 </div> 416 417 418 <div 419 id="large-status-message-container" 420 x-show="size == 'large' && show" 421 class="fixed left-1/2 top-5 z-50 w-11/12 min-w-fit max-w-md -translate-x-1/2 transform overflow-hidden rounded-2xl border shadow-xl ring-1 backdrop-blur-xl transition-all border-abyss-600/70 bg-abyss-900/90" 422 :class="themes[type].ring + ' ' + themes[type].glow" 423 x-transition:enter="transition duration-300 ease-out" 424 x-transition:enter-start="-translate-y-3 scale-95 opacity-0" 425 x-transition:enter-end="translate-y-0 scale-100 opacity-100" 426 x-transition:leave="transition duration-200 ease-in" 427 x-transition:leave-start="translate-y-0 scale-100 opacity-100" 428 x-transition:leave-end="-translate-y-3 scale-95 opacity-0" 429 > 430 <div class="flex p-4"> 431 <div class="shrink-0" :class="themes[type].icon">
432 <span x-show="type == 'success'"> 433 <svg class="size-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> 434 <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" clip-rule="evenodd" /> 435</svg> </span> 436 <span x-show="type == 'error'"> 437 <svg class="size-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> 438 <path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /> 439</svg> </span> 440 </div> 441 <div class="ml-3 flex-1"> 442 <h3 443 class="text-sm font-semibold text-gold-100" 444 x-text="title" 445 x-show="title" 446 ></h3> 447 <div class="text-sm text-gold-100/70" :class="title ? 'mt-1' : ''"> 448 <p x-text="message"></p> 449 </div> 450 </div> 451 <div class="ml-auto pl-3"> 452 <div class="-mx-1.5 -my-1.5"> 453 <button 454 @click="show = false" 455 type="button" 456 class="inline-flex cursor-pointer rounded-lg p-1.5 transition text-gold-100/50 hover:bg-abyss-800/70 hover:text-gold-100" 457 > 458 <span class="sr-only">Dismiss</span> 459 <svg class="size-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> 460 <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /> 461</svg> </button> 462 </div> 463 </div> 464 </div> 465 <div class="h-1 w-full bg-abyss-950/70"> 466 <div 467 id="status-message-progress-bar" 468 class="h-1 w-full rounded-r-full" 469 :class="themes[type].bar" 470 ></div> 471 </div> 472 </div> 473</div> 474 <div wire:snapshot="{"data":{"criteria":null,"selectedReward":null},"memo":{"id":"pARE3zEs3bLP6YsNz0T8","name":"pages.cosmetics.index","path":"cosmetics","method":"GET","release":"a-a-a","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en","islands":[]},"checksum":"711d002051b31576194264da12fa9db6238233f6a7bc4471b1cc68af51c3d8a0"}" wire:effects="[]" wire:id="pARE3zEs3bLP6YsNz0T8" wire:name="pages.cosmetics.index"> 475 476 <section class="relative overflow-hidden"> 477 <div class="absolute inset-0 -z-10 hero-glow"></div> 478 <div class="absolute inset-0 -z-10 map-grain opacity-50"></div> 479 <div class="pointer-events-none absolute inset-x-0 bottom-0 -z-10 h-48 bg-gradient-to-b from-transparent to-abyss-950"></div> 480 <div class="pointer-events-none absolute inset-x-0 top-0 -z-10 h-px bg-gradient-to-r from-transparent via-gold-500/30 to-transparent"></div> 481 482 <div class="max-w-2xl mx-auto px-5 pt-12 lg:pt-20 pb-24 lg:pb-32 text-center"> 483 <p class="text-sm font-semibold uppercase tracking-[0.25em] text-gold-400">The Vault</p> 484 <h1 class="mt-4 font-display text-4xl lg:text-6xl tracking-tight text-gold-100">Cosmetics</h1> 485 <p class="mt-5 text-base lg:text-lg text-seafoam-200/80"> 486 Search every reward in Sea of Thieves and uncover exactly which commendation unlocks it. 487 </p> 488 489 <div class="relative mt-9"> 490 <div class="pointer-events-none absolute -inset-2 -z-10 rounded-3xl bg-seafoam-500/10 blur-xl"></div> 491 <input 492 wire:model.live.debounce.400ms="criteria" 493 class="w-full rounded-2xl border-0 bg-abyss-800/70 ring-1 ring-inset ring-abyss-600 px-12 py-4 text-base text-seafoam-50 placeholder:text-seafoam-200/40 shadow-lg shadow-black/20 outline-hidden focu
493s:ring-2 focus:ring-seafoam-500/50 transition-all duration-200" 494 type="text" 495 placeholder="i.e. Obsidian, Gold Hoarders, Dawn Hunter, etc." 496 autocomplete="off" 497 spellcheck="false" 498 aria-label="Search for an item" 499 autofocus/> 500 <div class="pointer-events-none absolute inset-y-0 left-4 flex items-center" aria-hidden="true"> 501 <svg class="size-5 stroke-seafoam-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" 502 stroke="currentColor"> 503 <path stroke-linecap="round" stroke-linejoin="round" 504 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"/> 505</svg> 506 </div> 507 <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> </div> 508 509 <!--[if BLOCK]><![endif]--> <div class="mt-6 flex flex-wrap items-center justify-center gap-2"> 510 <span class="text-sm text-seafoam-200/50">Try:</span> 511 <!--[if BLOCK]><![endif]--> <button wire:click="$set('criteria', 'Obsidian')" 512 class="rounded-full px-3.5 py-1.5 text-sm font-medium text-seafoam-100 bg-abyss-800/70 ring-1 ring-inset ring-abyss-600/70 hover:ring-seafoam-500/60 hover:text-seafoam-300 transition-all duration-200 cursor-pointer"> 513 Obsidian 514 </button> 515 <button wire:click="$set('criteria', 'Gold Hoarders')" 516 class="rounded-full px-3.5 py-1.5 text-sm font-medium text-seafoam-100 bg-abyss-800/70 ring-1 ring-inset ring-abyss-600/70 hover:ring-seafoam-500/60 hover:text-seafoam-300 transition-all duration-200 cursor-pointer"> 517 Gold Hoarders 518 </button> 519 <button wire:click="$set('criteria', 'Dawn Hunter')" 520 class="rounded-full px-3.5 py-1.5 text-sm font-medium text-seafoam-100 bg-abyss-800/70 ring-1 ring-inset ring-abyss-600/70 hover:ring-seafoam-500/60 hover:text-seafoam-300 transition-all duration-200 cursor-pointer"> 521 Dawn Hunter 522 </button> 523 <button wire:click="$set('criteria', 'Ghost')" 524 class="rounded-full px-3.5 py-1.5 text-sm font-medium text-seafoam-100 bg-abyss-800/70 ring-1 ring-inset ring-abyss-600/70 hover:ring-seafoam-500/60 hover:text-seafoam-300 transition-all duration-200 cursor-pointer"> 525 Ghost 526 </button> 527 <button wire:click="$set('criteria', 'Reaper')" 528 class="rounded-full px-3.5 py-1.5 text-sm font-medium text-seafoam-100 bg-abyss-800/70 ring-1 ring-inset ring-abyss-600/70 hover:ring-seafoam-500/60 hover:text-seafoam-300 transition-all duration-200 cursor-pointer"> 529 Reaper 530 </button> 531 <!--[if ENDBLOCK]><![endif]--> </div> 532 <!--[if ENDBLOCK]><![endif]--> </div> 533 </section> 534 535 536 <div class="max-w-6xl mx-auto px-5 pb-20"> 537 <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> </div> 538 539 <div 540 x-data="{ show: false }" 541 x-on:click="show = false" 542 x-on:open-lightbox.window="show = true" 543 x-on:close-lightbox.window="show = false" 544 x-on:close.stop="show = false" 545 x-on:keydown.escape.window="show = false" 546 x-show="show" 547 id="lightbox-container" 548 class="fixed inset-0 z-40 overflow-y-auto px-4 py-6 sm:px-0" 549 style="display: none" 550> 551 <div 552 x-show="show" 553 class="fixed inset-0 transform transition-all" 554 x-on:click="show = false" 555 x-transition:enter="duration-300 ease-out" 556 x-transition:enter-start="opacity-0" 557 x-transition:enter-end="opacity-100" 558 x-transition:leave="duration-200 ease-in" 559 x-transition:leave-start="opacity-100" 560 x-transition:leave-end="opacity-0" 561 > 562 <div 563 class="absolute inset-0 z-40 bg-abyss-950/80 backdrop-blur-sm" 564 ></div> 565 </div> 566 567 <div 568 x-show="show" 569 class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transform overflow-hidden rounded-2xl ring-1 ring-gold-500/25 shadow-2xl shadow-black/50 transition-all sm:mx-auto" 570 x-transition:enter="duration-300 ease-out" 571 x-transition:enter-start="opacity-0 sm:scale-95" 572 x-transition:enter-end="opacity-100 sm:scale-100" 573 x-transition:leave="duration-200 ease-in" 574 x-transition:leave-start="opacity-100 sm:scale-100" 575 x-transition:leave-end="opacity-0 sm:scale-95" 576 > 577 <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> </div> 578</div> 579</div> 580 </main> 581 582<footer class="border-t border-abyss-700/60 bg-abyss-900/40"> 583 <div class="container m-auto px-4 py-14 lg:px-8 lg:py-16"> 584 <div class="grid gap-10 lg:grid-cols-[minmax(0,1.6fr)_repeat(3,minmax(0,1fr))] lg:gap-8"> 585 586 <div class="max-w-sm"> 587 <a wire:navigate href="https://numbergoup.gg" 588 class="flex items-center gap-x-2.5 transition-opacity duration-200 hover:opacity-80"> 589 <img class="size-8" src="https://numbergoup.gg/img/logo.png" alt="Number Go Up Logo"/>
590 <span class="font-display text-xl tracking-tight text-gold-100">Number Go Up</span> 591 </a> 592 <p class="mt-4 text-sm leading-6 text-seafoam-300/70"> 593 Your Sea of Thieves companion. Track your commendations, achievements, chest, 594 cosmetics, guilds, fleet, events, and the Smuggler's Market all in one place 595 — and watch the number go up. 596 </p> 597 <div class="mt-6"> 598 <div class="flex flex-wrap items-center gap-3 justify-center lg:justify-start"> 599 <a href="https://apps.apple.com/us/app/number-go-up-pirates-log/id6784696493" target="_blank" rel="noopener noreferrer" 600 class="transition-transform duration-200 hover:-translate-y-0.5"> 601 <img class="h-[44px] w-[122px] object-contain" 602 src="https://numbergoup.gg/img/marketing/download-numbergoup-on-the-app-store.webp" 603 alt="Download Number Go Up on the App Store"/> 604 </a> 605 <a href="https://play.google.com/store/apps/details?id=com.hopperlabs.numbergoup" target="_blank" rel="noopener noreferrer" 606 class="transition-transform duration-200 hover:-translate-y-0.5"> 607 <img class="h-[44px] w-[122px] object-contain" 608 src="https://numbergoup.gg/img/marketing/download-numbergoup-in-the-android-play-store.png" 609 alt="Get Number Go Up on Google Play"/> 610 </a> 611 </div> 612 </div> 613 </div> 614 615 616 <div> 617 <p class="text-[0.7rem] font-semibold uppercase tracking-[0.18em] text-seafoam-300/40">Explore</p> 618 <ul class="mt-4 flex flex-col gap-y-3 text-sm"> 619 <li><a wire:navigate href="https://numbergoup.gg/cosmetics" class="text-seafoam-300/70 transition-colors duration-200 hover:text-gold-300">Cosmetics</a></li> 620 <li><a wire:navigate href="https://numbergoup.gg/smugglers-market" class="text-seafoam-300/70 transition-colors duration-200 hover:text-gold-300">Smuggler's Market</a></li> 621 <li><a wire:navigate href="https://numbergoup.gg/events" class="text-seafoam-300/70 transition-colors duration-200 hover:text-gold-300">Events</a></li> 622 <li><a wire:navigate href="https://numbergoup.gg/tools" class="text-seafoam-300/70 transition-colors duration-200 hover:text-gold-300">Tools</a></li> 623 <li><a wire:navigate href="https://numbergoup.gg/tools/custom-seas-servers" class="text-seafoam-300/70 transition-colors duration-200 hover:text-gold-300">Custom Seas</a></li> 624 </ul> 625 </div> 626 627 628 <div> 629 <p class="text-[0.7rem] font-semibold uppercase tracking-[0.18em] text-seafoam-300/40">Help</p> 630 <ul class="mt-4 flex flex-col gap-y-3 text-sm"> 631 <li><a wire:navigate href="https://numbergoup.gg/support" class="text-seafoam-300/70 transition-colors duration-200 hover:text-gold-300">Support</a></li> 632 <li><a wire:navigate href="https://numbergoup.gg/about" class="text-seafoam-300/70 transition-colors duration-200 hover:text-gold-300">About</a></li> 633 <li><a wire:navigate href="https://numbergoup.gg/release-notes" class="text-seafoam-300/70 transition-colors duration-200 hover:text-gold-300">Release Notes</a></li> 634 <li><a href="https://ko-fi.com/numbergoup" target="_blank" rel="noopener" class="text-seafoam-300/70 transition-colors duration-200 hover:text-gold-300">Buy me a Coffee</a></li> 635 </ul> 636 </div> 637 638 639 <div> 640 <p class="text-[0.7rem] font-semibold uppercase tracking-[0.18em] text-seafoam-300/40">Legal</p> 641 <ul class="mt-4 flex flex-col gap-y-3 text-sm"> 642 <li><a wire:navigate href="https://numbergoup.gg/privacy-policy" class="text-seafoam-300/70 transition-colors duration-200 hover:text-gold-300">Privacy Policy</a></li> 643 <li><a wire:navigate href="https://numbergoup.gg/data-deletion" class="text-seafoam-300/70 transition-colors duration-200 hover:text-gold-300">Data Deletion</a></li> 644 </ul> 645 </div> 646 </div> 647 648 649 <div class="mt-12 flex flex-col gap-y-4 border-t border-abyss-800/70 pt-6 text-xs text-seafoam-300/50 sm:flex-row sm:items-center sm:justify-between"> 650 <div class="flex flex-col items-center gap-y-1 text-center sm:flex-row sm:items-center sm:gap-x-4 sm:text-left"> 651 <p class="flex items-center gap-x-1"> 652 Made by <strong class="font-semibold text-seafoam-300/70">Mr Mancer</strong> 653 <svg class="size-3.5 text-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> 654 <path 655 d="m11.645 20.91-.007-.003-.022-.012a15.247 15.247 0 0 1-.383-.218 25.18 25.18 0 0 1-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0 1 12 5.052 5.5 5.5 0 0 1 16.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 0 1-4.244 3.17 15.247 15.247 0 0 1-.383.219l-.022.012-.007.004-.003.001a.752.752 0 0 1-.704 0l-.003-.001Z"/> 656</svg> 657 </p> 658 </div> 659 <p class="max-w-md text-center sm:text-right"> 660 Not affiliated with, endorsed by, or associated with Rare Ltd or Microsoft. 661 </p> 662 </div> 663 </div> 664</footer> 665 666<div x-persist="pirate-chatbot"> 667 668 <div 669 x-cloak 670 x-data="aiChatbot(true, false, null)" 671 x-show="visible" 672 x-on:keydown.escape.window="open = false" 673 x-on:polly-visibility-changed.window="visible = $event.detail.visible; if (! visible) { open = false; }" 674> 675 676 <div x-show="!open" class="fixed bottom-6 right-6 z-50 flex flex-col items-end gap-4"> 677 678 <div 679 x-show="!dismissed" 680 x-transition:leave="transition ease-in duration-200" 681 x-transition:leave-start="opacity-100" 682 x-transition:leave-end="opacity-0" 683 class="relative bg-abyss-900/95 backdrop-blur-xl ring-1 ring-gold-500/25 rounded-2xl pl-4 pr-6 py-3 shadow-lg shadow-abyss-950/40 max-w-64 text-left" 684 > 685 <button x-on:click.stop="dismiss()" class="absolute top-1.5 right-2 text-seafoam-200/70 hover:text-seafoam-300 text-sm leading-none cursor-pointer">×</button> 686 <p class="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest text-gold-400"> 687 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-3 h-3"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm3.5-11.5L10 11l-1.5 4.5L14 13l1.5-4.5Z"/></svg> 688 Pirate Assistant 689 </p> 690 <p class="mt-1 text-sm font-bold text-gold-100">
690Charting a course, matey?</p> 691 <p class="mt-0.5 text-xs text-seafoam-200/70">Tap the compass and I'll help ye with commendations, lore & more.</p> 692 693 <div class="absolute -bottom-2 right-7"> 694 <div class="w-4 h-4 bg-abyss-900/95 border-b border-r border-gold-500/25 rotate-45"></div> 695 </div> 696 </div> 697 698 699 <button 700 x-transition:enter="transition ease-out duration-200" 701 x-transition:enter-start="opacity-0 scale-75" 702 x-transition:enter-end="opacity-100 scale-100" 703 x-on:click="toggle()" 704 aria-label="Open the Pirate Assistant" 705 class="group relative w-16 h-16 cursor-pointer" 706 > 707 708 <span aria-hidden="true" class="absolute inset-0 rounded-full fab-pulse"></span> 709 710 711 <span aria-hidden="true" class="absolute -inset-1 rounded-full compass-ring opacity-80 group-hover:opacity-100 transition-opacity duration-300"></span> 712 713 714 <span class="absolute inset-0 rounded-full overflow-hidden flex items-center justify-center bg-gradient-to-b from-abyss-700 to-abyss-950 ring-2 ring-inset ring-gold-400/60 shadow-lg shadow-abyss-950/50 transition-all duration-300 group-hover:ring-gold-300 group-hover:scale-105"> 715 <img src="/img/ai-chatbot.png" alt="" class="w-10 h-10 object-contain -scale-x-100 drop-shadow-md transition-transform duration-300 group-hover:scale-110"> 716 717 <span aria-hidden="true" class="pointer-events-none absolute inset-x-0 top-0 h-1/2 bg-gradient-to-b from-white/20 to-transparent"></span> 718 </span> 719 720 721 <span aria-hidden="true" class="absolute top-0.5 right-0.5 flex h-3.5 w-3.5"> 722 <span class="absolute inline-flex h-full w-full rounded-full bg-seafoam-400 opacity-75 animate-ping"></span> 723 <span class="relative inline-flex h-3.5 w-3.5 rounded-full bg-seafoam-400 ring-2 ring-abyss-900"></span> 724 </span> 725 </button> 726 </div> 727 728 729 <div 730 x-show="open" 731 x-transition:enter="transition ease-out duration-300" 732 x-transition:enter-start="opacity-0 translate-y-4 scale-95" 733 x-transition:enter-end="opacity-100 translate-y-0 scale-100" 734 x-transition:leave="transition ease-in duration-200" 735 x-transition:leave-start="opacity-100 translate-y-0 scale-100" 736 x-transition:leave-end="opacity-0 translate-y-4 scale-95" 737 class="fixed inset-0 sm:inset-auto sm:bottom-6 sm:right-6 z-50 w-full sm:w-96 h-[100dvh] sm:h-[600px] flex flex-col bg-abyss-950/95 backdrop-blur-xl rounded-none sm:rounded-2xl shadow-2xl shadow-abyss-950/30 ring-0 sm:ring-1 sm:ring-gold-500/25 overflow-hidden" 738 > 739 740 <div class="relative flex items-center gap-3 px-4 py-3 bg-abyss-900/80 border-b border-abyss-700/60"> 741 742 <div class="pointer-events-none absolute inset-x-0 bottom-0 h-px bg-gradient-to-r from-transparent via-gold-500/40 to-transparent"></div> 743 744 745 <span class="relative w-11 h-11 shrink-0 rounded-full overflow-hidden flex items-center justify-center bg-gradient-to-b from-abyss-700 to-abyss-950 ring-2 ring-inset ring-gold-400/60 shadow-md shadow-abyss-950/40"> 746 <img src="/img/ai-chatbot.png" alt="Pirate Assistant" class="w-7 h-7 object-contain drop-shadow"> 747 <span aria-hidden="true" class="pointer-events-none absolute inset-x-0 top-0 h-1/2 bg-gradient-to-b from-white/20 to-transparent"></span> 748 </span> 749 750 <div class="flex-1"> 751 <h3 class="font-display text-lg leading-tight tracking-tight text-gold-100">Polly</h3> 752 <p class="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest text-gold-400"> 753 <span class="relative flex h-1.5 w-1.5"> 754 <span class="absolute inline-flex h-full w-full rounded-full bg-seafoam-400 opacity-75 animate-ping"></span> 755 <span class="relative inline-flex h-1.5 w-1.5 rounded-full bg-seafoam-500"></span> 756 </span> 757 Sea of Thieves Guide 758 </p> 759 </div> 760 <button x-on:click.stop="open = false" aria-label="Close" class="p-1.5 rounded-full text-seafoam-200/70 hover:text-seafoam-300 hover:bg-abyss-800/60 transition-colors cursor-pointer"> 761 <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> 762 <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/> 763 </svg> 764 </button> 765 </div> 766 767 768 <div x-ref="messages" class="relative flex-1 overflow-y-auto px-4 py-4 space-y-5"> 769 770 <div class="pointer-events-none absolute inset-0 map-grain opacity-40 opacity-60"></div> 771 772 <template x-for="(msg, i) in messages" :key="i"> 773 <div class="relative" x-show="msg.role === 'user' || msg.text"> 774 775 <template x-if="msg.role === 'user'"> 776 <div class="flex justify-end"> 777 <div 778 class="bg-gradient-to-b from-gold-300 to-gold-400 text-abyss-950 rounded-2xl px-4 py-2.5 max-w-[85%] text-sm leading-relaxed break-words shadow-sm shadow-gold-600/20 [&_a]:underline [&_a]:font-semibold" 779 x-html="formatMessage(msg.text)" 780 ></div> 781 </div> 782 </template> 783 784 <template x-if="msg.role === 'bot'"> 785 <div> 786 <img src="/img/ai-chatbot.png" alt="Polly" class="w-8 h-8 object-contain drop-shadow mb-1.5"> 787 <div 788 class="text-[15px] leading-relaxed break-words text-seafoam-50 [&>p:first-child]:indent-0 [&_a]:text-seafoam-300 [&_a]:underline [&_p]:my-0 [&_p+p]:mt-3 [&_ul]:list-disc [&_ul]:pl-5 [&_ul]:my-2 [&_ol]:list-decimal [&_ol]:pl-5 [&_ol]:my-2 [&_li]:my-1 [&_li]:pl-1 [&_strong]:font-bold [&_strong]:text-white [&_em]:italic [&_code]:bg-abyss-950/60 [&_code]:px-1 [&_code]:rounded [&_code]:text-xs [&_pre]:bg-abyss-950 [&_pre]:p-2 [&_pre]:rounded [&_pre]:my-2 [&_pre]:overflow-x-auto [&_h1]:font-display [&_h1]:text-base [&_h1]:my-1.5 [&_h2]:font-display [&_h2]:text-sm [&_h2]:my-1.5 [&_h3]:font-semibold [&_h3]:my-1 [&_blockquote]:border-l-2 [&_blockquote]:border-gold-400/50 [&_blockquote]:pl-2 [&_blockquote]:italic [&_table]:my-2 [&_table]:w-full [&_table]:border-collapse [&_th]:px-2 [&_th]:py-1 [&_th]:text-left [&_td]:px-2 [&_td]:py-1" 789 x-html="formatMessage(msg.text)" 790 ></div> 791 </div> 792 </template> 793 </div> 794 </template> 795 796 797 <div x-show="loading && (!messages.length || !messages[messages.length - 1].text)" class="flex items-center gap-2.5"> 798 <img src="/img/ai-chatbot.png" alt="Polly" class="w-8 h-8 object-contain animate-bounce" style="animation-duration: 1.2s">
799 <span class="text-sm text-seafoam-200/60">Polly is thinking…</span> 800 </div> 801 </div> 802 803 804 <div class="relative p-3 border-t border-abyss-700/60 bg-abyss-900/80"> 805 <div class="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-gold-500/40 to-transparent"></div> 806 <form x-on:submit.prevent="send()" class="flex items-center gap-2"> 807 <input 808 x-ref="input" 809 x-model="question" 810 type="text" 811 :placeholder="disabled ? 'Polly isn\'t takin\' yer questions.' : 'Speak yer mind, sailorâ¦'" 812 maxlength="500" 813 :disabled="disabled" 814 class="flex-1 !rounded-full !py-2.5 !px-4 text-sm !ring-1 !ring-inset !ring-abyss-700/70 !bg-abyss-800/70 focus:!ring-2 focus:!ring-gold-500/40 disabled:opacity-50 disabled:cursor-not-allowed" 815 > 816 <button 817 type="submit" 818 :disabled="disabled || loading || cooldown || !question.trim()" 819 aria-label="Send" 820 class="shrink-0 grid place-items-center w-10 h-10 rounded-full bg-gradient-to-b from-gold-400 to-gold-500 hover:from-gold-300 hover:to-gold-400 ring-1 ring-inset ring-white/15 disabled:opacity-40 text-abyss-950 transition-all duration-200 cursor-pointer disabled:cursor-not-allowed" 821 > 822 <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"> 823 <path stroke-linecap="round" stroke-linejoin="round" d="M12 19V5M5 12l7-7 7 7"/> 824 </svg> 825 </button> 826 </form> 827 <p class="mt-2 text-center text-[10px] text-seafoam-200/50">Not affiliated with Rare Ltd or Microsoft. AI-generated responses may contain mistakes.</p> 828 </div> 829 </div> 830</div> 831
832<script> 833document.addEventListener('alpine:init', () => { 834 Alpine.data('aiChatbot', (visible = true, disabled = false, disabledMessage = null) => ({ 835 visible, 836 disabled, 837 disabledMessage: disabledMessage || 'Arrr, I\'ll not be takin\' yer questions, matey. Yer access to Polly has been revoked.', 838 open: false, 839 dismissed: localStorage.getItem('chatbot-dismissed') === '1', 840 messages: [], 841 question: '', 842 loading: false, 843 cooldown: false, 844 welcomed: false, 845 newConversation: true, 846 firstWelcome: 'Ahoy, matey! I be Polly, yer trusty pirate guide for Sea of Thieves. Here be the sorts o\' questions I can answer:\n\n- **Commendations** \u2014 how to earn \u2018em, what they unlock, and which ye still be missin\u2019\n- **Lore & tall tales** \u2014 the stories, factions, and secrets o\u2019 the seas\n- **Strategies & tips** \u2014 voyages, emissaries, combat, and gold-makin\u2019\n- **Yer own progress** \u2014 ask about yer stats, reputation, and what to chase next\n\nWhat be on yer mind, sailor?', 847 returnWelcome: 'Arrr, what can I do for ye?', 848 849 formatMessage(text) { 850 return window.renderPirateMessage(text); 851 }, 852 853 dismiss() { 854 this.dismissed = true; 855 localStorage.setItem('chatbot-dismissed', '1'); 856 }, 857 858 toggle() { 859 this.open = !this.open; 860 this.dismiss(); 861 if (this.open) { 862 if (!this.welcomed) { 863 if (this.disabled) { 864 this.typeWelcome(this.disabledMessage); 865 } else { 866 const seen = localStorage.getItem('pirate-assistant-welcomed'); 867 const message = seen ? this.returnWelcome : this.firstWelcome; 868 this.typeWelcome(message); 869 if (!seen) localStorage.setItem('pirate-assistant-welcomed', '1'); 870 } 871 this.welcomed = true; 872 } 873 this.$nextTick(() => this.$refs.input?.focus()); 874 } 875 }, 876 877 async typeWelcome(message) { 878 this.messages.push({ role: 'bot', text: '' }); 879 const idx = this.messages.length - 1; 880 for (let i = 0; i < message.length; i++) { 881 this.messages[idx].text += message[i]; 882 await new Promise(r => setTimeout(r, 15)); 883 this.scrollToBottom(); 884 } 885 }, 886 887 scrollToBottom() { 888 this.$nextTick(() => { 889 const el = this.$refs.messages; 890 if (el) el.scrollTop = el.scrollHeight; 891 }); 892 }, 893 894 async send() { 895 const question = this.question.trim(); 896 if (!question || this.loading || this.cooldown || this.disabled) return; 897 898 this.messages.push({ role: 'user', text: question }); 899 this.question = ''; 900 this.loading = true; 901 this.scrollToBottom(); 902 903 this.messages.push({ role: 'bot', text: '' }); 904 const botIdx = this.messages.length - 1; 905 906 try { 907 const response = await fetch('/pirate-chat/stream', { 908 method: 'POST', 909 headers: { 910 'Content-Type': 'application/json', 911 'Accept': 'text/event-stream', 912 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content, 913 }, 914 body: JSON.stringify({ question, new_conversation: this.newConversation }), 915 }); 916 917 if (response.status === 419) { 918 this.messages[botIdx].text = 'Session expired, please refresh the page.'; 919 this.loading = false; 920 return; 921 } 922 923 // An admin can revoke access mid-session; lock the composer the 924 // moment the server says so rather than on the next page load. 925 if (response.status === 403) { 926 const body = await response.json().catch(() => ({})); 927 this.disabled = true; 928 this.disabledMessage = body.message || this.disabledMessage; 929 this.messages[botIdx].text = this.disabledMessage; 930 this.loading = false;
931 return; 932 } 933 934 if (!response.ok) { 935 this.messages[botIdx].text = 'Arrr, something went wrong! Try again, matey.'; 936 this.loading = false; 937 return; 938 } 939 940 const reader = response.body.getReader(); 941 const decoder = new TextDecoder(); 942 let buffer = ''; 943 944 while (true) { 945 const { done, value } = await reader.read(); 946 if (done) break; 947 948 buffer += decoder.decode(value, { stream: true }); 949 const lines = buffer.split('\n'); 950 buffer = lines.pop(); 951 952 for (const line of lines) { 953 if (!line.startsWith('data: ')) continue; 954 const data = line.slice(6); 955 956 if (data === '[DONE]') break; 957 958 try { 959 const parsed = JSON.parse(data); 960 if (parsed.type === 'text_delta' && parsed.delta) { 961 this.messages[botIdx].text += parsed.delta; 962 this.scrollToBottom(); 963 } 964 } catch (e) {} 965 } 966 } 967 968 if (this.messages[botIdx].text) { 969 this.messages[botIdx].text = this.messages[botIdx].text.trim(); 970 } 971 } catch (e) { 972 this.messages[botIdx].text = 'Arrr, something went wrong! Try again, matey.'; 973 } 974 975 this.loading = false; 976 this.newConversation = false; 977 this.cooldown = true; 978 setTimeout(() => this.cooldown = false, 3000); 979 this.scrollToBottom(); 980 this.$nextTick(() => this.$refs.input?.focus()); 981 }, 982 })); 983}); 984</script>
984 985</div> 986
987<script src="https://numbergoup.gg/flux/flux.min.js?id=1ea4120f" data-navigate-once></script>
vendor: 1 bytes, line 987
987
988<script src="https://numbergoup.gg/livewire-8a07a834/livewire.min.js?id=1c586ae0" data-csrf="s5lAP8R6xg7tHFd6XSz4IkwF6iQ8H6fPHjX3lhi3" data-module-url="https://numbergoup.gg/livewire-8a07a834" data-update-uri="https://numbergoup.gg/livewire-8a07a834/update" data-navigate-once="true"></script>
vendor: 1 bytes, line 988
988
989<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:'a40150cb1f2c72d1',t:'MTc5MDI0Nzk0Mg=='};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>
989</body> 990 991<link rel="modulepreload" as="script" href="https://numbergoup.gg/build/assets/app-BnVb_3Ow.js" />
991<script type="module" src="https://numbergoup.gg/build/assets/app-BnVb_3Ow.js" data-navigate-track="reload"></script>
991 992</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.