🆙 Add fixed cms 🆙

2026-02-02 19:30:21 +01:00
parent b1a2cab62d
commit b67e0ec2b9
3982 changed files with 193682 additions and 0 deletions
@@ -0,0 +1,44 @@
+@props(['article', 'forSlider' => false])
+
+<div @class([
+    'h-[210px] dark:bg-gray-900 rounded w-full bg-white shadow-sm relative overflow-hidden transition ease-in-out duration-200',
+    'hover:scale-[101%]' => !$forSlider,
+    'swiper-slide group' => $forSlider,
+]) @if (!$forSlider)
+    onmouseover="slideImage({{ $article->id }})" onmouseleave="unslideImage({{ $article->id }})"
+    @endif>
+    <a href="{{ route('article.show', $article->slug) }}">
+        <div id="article-{{ $article->id }}" style="background: url('/storage/{{ $article->image }}');" class="article-image">
+        </div>
+
+        <div class="mt-4 px-4">
+            <p @class([
+                'font-semibold text-lg truncate dark:text-gray-200',
+                'group-hover:text-[#e9b124] transition duration-200' => $forSlider,
+            ])>
+                {{ $article->title }}
+            </p>
+
+            <div class="flex items-center gap-x-2">
+                <div
+                    class="mt-3 flex h-10 w-10 items-center justify-center overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800">
+                    <img src="{{ setting('avatar_imager') }}{{ $article->user?->look }}&headonly=1" alt="">
+                </div>
+
+                <p class="mt-4 font-semibold dark:text-gray-400">
+                    {{ $article->user->username ?? setting('hotel_name') }}
+                </p>
+            </div>
+        </div>
+    </a>
+</div>
+
+<script>
+    function slideImage(articleId) {
+        document.getElementById('article-' + articleId).classList.add('article-image-slide');
+    }
+
+    function unslideImage(articleId) {
+        document.getElementById('article-' + articleId).classList.remove('article-image-slide');
+    }
+</script>
@@ -0,0 +1,50 @@
+<x-slot name="title">
+    <h2 class="text-2xl font-semibold">{{ __('Hello!') }}</h2>
+    <p class="dark:text-gray-400">
+        {{ __('There is currently :online users online', ['online' => DB::table('users')->where('online', '1')->count()]) }}
+    </p>
+</x-slot>
+
+<form class="flex flex-col gap-y-3" action="{{ route('login') }}" method="POST">
+    @csrf
+
+    <div>
+        <x-form.label for="username">
+            {{ __('Username') }}
+        </x-form.label>
+
+        <x-form.input error-bag="login" name="username" value="{{ old('username') }}" placeholder="{{ __('Username') }}"
+            :autofocus="true" />
+    </div>
+
+    <div>
+        <x-form.label for="password">
+            {{ __('Password') }}
+        </x-form.label>
+
+        <x-form.input error-bag="login" name="password" placeholder="{{ __('Password') }}" type="password" />
+    </div>
+
+    @if (setting('google_recaptcha_enabled'))
+        <div class="g-recaptcha" data-sitekey="{{ config('habbo.site.recaptcha_site_key') }}"></div>
+    @endif
+
+    @if (setting('cloudflare_turnstile_enabled'))
+        <x-turnstile />
+    @endif
+
+    <x-form.primary-button>
+        {{ __('Login') }}
+    </x-form.primary-button>
+
+    <div class="text-center text-sm font-semibold text-gray-700 dark:text-gray-400">
+        <a href="{{ route('forgot.password.get') }}" class="hover:underline" x-on:click="open = false">
+            {{ __('Did you forget your password?') }}
+        </a>
+    </div>
+    <div class="text-center text-sm font-semibold text-gray-700 dark:text-gray-400">
+        <a href="{{ route('register') }}" class="hover:underline" x-on:click="open = false">
+            {{ __('Dont have an account? Join now!') }}
+        </a>
+    </div>
+</form>
@@ -0,0 +1,6 @@
+@props(['classes' => ''])
+
+<div
+    class="text-white rounded bg-[#eeb425] hover:bg-[#e3aa1e] border-[2px] border-[#cf9d15] transition ease-in-out text-center rounded py-1 px-2 text-sm text-white cursor-pointer {{ $classes }}">
+    {{ $slot }}
+</div>
@@ -0,0 +1,33 @@
+@props(['user'])
+
+<div class="relative h-24 w-full overflow-hidden rounded border bg-white dark:border-gray-900 dark:bg-gray-700 md:mt-0">
+    <div class="absolute top-1 right-1 rounded bg-white px-2 text-sm font-semibold dark:bg-gray-900 dark:text-gray-300">
+        {{ $user->permission->rank_name }}
+    </div>
+
+    <div class="h-[65%] w-full staff-bg"
+        style="background: rgba(0, 0, 0, 0.5) url({{ asset(sprintf('assets/images/%s', $user->permission->staff_background)) }});">
+    </div>
+
+    <div class="absolute top-4 left-1 drop-shadow">
+        <a href="{{ route('profile.show', $user->username) }}">
+            <img style="image-rendering: pixelated;" class="transition duration-300 ease-in-out hover:scale-105"
+                src="{{ setting('avatar_imager') }}{{ $user->look }}&direction=2&head_direction=3&gesture=sml&action=wav"
+                alt="">
+        </a>
+    </div>
+
+    <p class="text-2xl font-semibold ml-[70px] text-white -mt-[35px]">
+        {{ $user->username }}
+    </p>
+
+    <div class="flex w-full items-center justify-between px-4">
+        <p class="ml-[57px] text-sm mt-[10px] font-semibold text-gray-500 truncate">
+            {{ Str::limit($user->motto, 20) }}
+        </p>
+
+        <div
+            class="min-w-[15px] max-w-[15px] min-h-[15px] max-h-[15px] rounded-full mt-2 flex items-start {{ $user->online ? 'bg-green-600' : 'bg-red-600' }}">
+        </div>
+    </div>
+</div>
@@ -0,0 +1,21 @@
+
+@props(['icon' => '', 'classes' => ''])
+
+<div class="w-full flex flex-col gap-y-4 rounded overflow-hidden bg-white pb-3 dark:bg-gray-800 shadow-sm {{ $classes }}">
+    <div class="flex gap-x-2 border-b bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-900">
+        @if (empty($icon) === false)
+        <div class="max-w-[50px] max-h-[50px] min-w-[50px] min-h-[50px] rounded-full relative flex items-center justify-center {{ $icon }}"></div>
+        @endif
+        <div class="flex flex-col justify-center text-sm">
+            <p class="font-semibold text-black dark:text-gray-300">{{ $title }}</p>
+
+            @if(isset($underTitle))
+                <p class="dark:text-gray-500">{{ $underTitle }}</p>
+            @endif
+        </div>
+    </div>
+
+    <section class="h-full flex flex-col px-3">
+        {{ $slot }}
+    </section>
+</div>
@@ -0,0 +1,19 @@
+@props(['icon', 'classes' => ''])
+
+<div class="w-full flex flex-col gap-y-4 p-3 rounded-lg overflow-hidden {{ $classes }}">
+    <div class="flex gap-x-2">
+        <div
+            class="max-w-[50px] max-h-[50px] min-w-[50px] min-h-[50px] rounded-full {{ $icon }} relative flex items-center justify-center">
+        </div>
+
+        <div class="flex flex-col">
+            <p class="font-semibold text-black dark:text-gray-200">{{ $title }}</p>
+
+            @if(isset($underTitle))
+                <p class="dark:text-gray-500">{{ $underTitle }}</p>
+            @endif
+        </div>
+    </div>
+
+    {{ $slot }}
+</div>
@@ -0,0 +1,22 @@
+
+@props(['iconUrl' => '', 'color' => '', 'classes' => ''])
+
+<div class="w-full flex flex-col gap-y-4 rounded overflow-hidden bg-white pb-3 dark:bg-gray-800 shadow-sm {{ $classes }}">
+    <div class="flex gap-x-2 border-b bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-900">
+        @if (!empty($iconUrl))
+            <div style="background-image: url({{ $iconUrl }}); background-color: {{ $color }}; background-repeat: no-repeat; background-position: center;" class="max-w-[50px] max-h-[50px] min-w-[50px] min-h-[50px] rounded-full relative flex items-center justify-center"></div>
+        @endif
+
+        <div class="flex flex-col justify-center text-sm">
+            <p class="font-semibold text-black dark:text-gray-300">{{ $title }}</p>
+
+            @if(isset($underTitle))
+                <p class="dark:text-gray-500">{{ $underTitle }}</p>
+            @endif
+        </div>
+    </div>
+
+    <section class="h-full flex flex-col px-3">
+        {{ $slot }}
+    </section>
+</div>
@@ -0,0 +1,22 @@
+ @props(['badge' => '', 'color' => '#327fa8'])
+
+ <div class="flex w-full flex-col gap-y-4 overflow-hidden rounded bg-white pb-3 shadow-sm dark:bg-gray-800">
+     <div class="flex gap-x-2 border-b bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-900">
+         <div class="max-w-12.5 max-h-12.5 min-w-12.5 min-h-12.5 rounded-full relative flex items-center justify-center"
+             style="background-color: {{ $color }}">
+             <img src="{{ asset(sprintf('%s/%s.gif', setting('badges_path'), $badge)) }}" alt="">
+         </div>
+
+         <div class="flex flex-col justify-center text-sm">
+             <p class="font-semibold text-black dark:text-gray-300">{{ $title }}</p>
+
+             @if(isset($underTitle))
+                 <p class="dark:text-gray-500">{{ $underTitle }}</p>
+             @endif
+         </div>
+     </div>
+
+     <section class="px-3">
+         {{ $slot }}
+     </section>
+ </div>
@@ -0,0 +1,21 @@
+<div class="h-[210px] dark:bg-gray-900 rounded w-full bg-white shadow-sm relative overflow-hidden transition ease-in-out duration-200">
+    <div style="background: url('https://i.imgur.com/uGLDOUu.png');" class="article-image">
+    </div>
+
+    <div class="mt-4 px-4">
+        <p class="font-semibold text-lg truncate dark:text-gray-200">
+            {{ __('No published articles') }}
+        </p>
+
+        <div class="flex items-center gap-x-2">
+            <div
+                class="mt-3 flex h-10 w-10 items-center justify-center overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800">
+                <img src="{{ setting('avatar_imager') }}&headonly=1" alt="">
+            </div>
+
+            <p class="mt-4 font-semibold dark:text-gray-400">
+                {{ setting('hotel_name') }}
+            </p>
+        </div>
+    </div>
+</div>
@@ -0,0 +1,53 @@
+<footer
+    class="mt-auto flex h-14 w-full flex-col items-center justify-center bg-gray-100 text-sm text-gray-400 dark:bg-gray-900 md:flex-row md:justify-center md:px-8"
+    onclick="showFooter()">
+    <div class="md:font-semibold text-[12px] md:text-[14px] cursor-pointer hover:underline">
+        &copy {{ date('Y') }} -
+        {{ __(':hotel is a not for profit educational project', ['hotel' => setting('hotel_name')]) }}
+    </div>
+</footer>
+
+<style>
+    .swal2-html-container {
+        max-height: 300px;
+        overflow-y: scroll;
+    }
+</style>
+
+<script>
+    function showFooter() {
+        const creator =
+            '<a class="text-blue-400 underline" href="https://devbest.com/threads/atom-cms-a-multi-theme-cms.93034/" target="_blank">Object</a>';
+        const credits = [
+            '<strong>Kasja</strong> Helping with design, ideas & GFX <br/>',
+            '<strong>Nicollas </strong> Dark mode, Turbolinks, Performance improvements, Article reactions, User sessions, Layout improvements & PT-BR translations <br/>',
+            '<strong>Dominic</strong> Performance improvements & User sessions <br/>',
+            '<strong>EntenKoeniq#0001</strong> Automatic language registration, rooms page, profile page tweaks & shop additions<br/>',
+            '<strong>MisterDeen</strong> Custom Discord widget, bugfixes & tweaks <br/>',
+            '<strong>Kani</strong> RCON base & Findretros API <br/>',
+            '<strong>Beny</strong> Findretros API Fixes & CF Fixes <br/>',
+            '<strong>Oliver</strong> Profile page additions & Finnish translations <br/>',
+            '<strong>Live</strong> French translations, bugfixes & tweaks <br/>',
+            '<strong>DamienJolly</strong> Bugfixes <br/>',
+            '<strong>Danbo</strong> Bugfixes <br/>',
+            '<strong>Diddy/Josh</strong> Code readability improvements <br/>',
+            '<strong>Damue & EntenKoeniq#0001</strong> German translations <br/>',
+            '<strong>Talion</strong> Turkish translations <br/>',
+            '<strong>CentralCee, Rille & Tuborgs</strong> Swedish translations <br/>',
+            '<strong>Yannick</strong> Netherlands translations <br/>',
+            '<strong>Gedomi</strong> Spanish translations <br/>',
+            '<strong>Lorenzune</strong> Italian translations <br/>',
+            '<strong>Twana & Zaruzet</strong> Norwegian translations <br/>',
+            '<strong>Plow</strong> French translations <br/>'
+        ];
+        const content =
+            '{{ __('Thank you for playing :hotel. We have put a lot of effort into making the hotel what it is, and we truly appreciate you being here', ['hotel' => setting('hotel_name')]) }}' + '❤️';
+        const drivenBy = '{{ __(':hotel is driven by Atom CMS made by:', ['hotel' => setting('hotel_name')]) }}';
+
+        Swal.fire(
+            '<span class="text-[26px]">{{ setting('hotel_name') }}</span>',
+            `<span class="text-sm">${content}<br/><br/>${drivenBy} ${creator}<br/><br/><span class="flex flex-col space-y-2">{{ __('Credits:') }}<br/>${credits.join('')}</span></span>`,
+            'question'
+        )
+    }
+</script>
@@ -0,0 +1,6 @@
+@props(['classes' => '', 'type' => 'submit'])
+
+<button type="{{ $type }}"
+    class="{{ $classes }} w-full rounded bg-red-500 hover:bg-red-600 text-white p-2 border-2 border-red-400 transition ease-in-out duration-150 font-semibold">
+    {{ $slot }}
+</button>
@@ -0,0 +1,14 @@
+@props(['errorBag' => '', 'classes' => '', 'name', 'type' => 'text', 'value' => '', 'placeholder' => '', 'required' => true, 'autofocus' => false, 'readonly' => false])
+
+<input
+    class="{{ $classes }} focus:ring-0 border-4 border-gray-200 rounded dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200 focus:border-[#eeb425] w-full @error($name, $errorBag) border-red-600 ring-red-500 @enderror"
+    id="{{ $name }}" type="{{ $type }}" name="{{ $name }}" value="{{ $value }}"
+    autocomplete="{{ $name }}" placeholder="{{ $placeholder }}" @if ($readonly) required @endif
+    @if ($autofocus) autofocus="{{ $name }}" @endif
+    @if ($readonly) readonly @endif>
+
+@error($name, $errorBag)
+    <p class="mt-1 text-xs italic text-red-500">
+        {{ $message }}
+    </p>
+@enderror
@@ -0,0 +1,11 @@
+@props(['for', 'info' => ''])
+
+<div class="mb-2">
+    <label class="block font-semibold text-gray-700 dark:text-gray-200" for="{{ $for }}">
+        {{ $slot }}
+    </label>
+
+    <p class="text-gray-500 dark:text-gray-400 text-[14px]">
+        {{ $info }}
+    </p>
+</div>
@@ -0,0 +1,6 @@
+@props(['classes' => '', 'type' => 'submit'])
+
+<button type="{{ $type }}"
+    class="w-full rounded bg-[#eeb425]! text-white border-2 border-yellow-400 transition! ease-in-out! duration-200! hover:bg-[#d49f1c]! font-semibold px-6! py-2! {{ $classes }}">
+    {{ $slot }}
+</button>
@@ -0,0 +1,6 @@
+@props(['classes' => '', 'type' => 'submit'])
+
+<button type="{{ $type }}"
+    class="w-full rounded bg-green-600! hover:bg-green-700! text-white border-2 border-green-500 transition! ease-in-out! duration-150! font-semibold px-6! py-2! {{ $classes }}">
+    {{ $slot }}
+</button>
@@ -0,0 +1,20 @@
+@props(['name', 'content' => null])
+
+<div class="mt-3">
+    <textarea name="content" id="editor">
+        {{ $content ?? ''}}
+    </textarea>
+</div>
+
+
+<script src="https://cdn.tiny.cloud/1/{{ setting('tinymce_api_key') }}/tinymce/7/tinymce.min.js" referrerpolicy="origin"></script>
+<script>
+
+    tinymce.init({
+        selector: 'textarea#editor',
+        plugins: 'lists image',
+        toolbar: 'undo redo | blocks| bold italic | bullist numlist checklist | code | table'
+
+    });
+
+</script>
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"
+    stroke-width="2">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
+</svg>
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+    class="h-5 w-5">
+    <path stroke-linecap="round" stroke-linejoin="round"
+        d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" />
+</svg>
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-5 w-5">
+    <path
+        d="M11.47 3.84a.75.75 0 011.06 0l8.69 8.69a.75.75 0 101.06-1.06l-8.689-8.69a2.25 2.25 0 00-3.182 0l-8.69 8.69a.75.75 0 001.061 1.06l8.69-8.69z" />
+    <path
+        d="M12 5.432l8.159 8.159c.03.03.06.058.091.086v6.198c0 1.035-.84 1.875-1.875 1.875H15a.75.75 0 01-.75-.75v-4.5a.75.75 0 00-.75-.75h-3a.75.75 0 00-.75.75V21a.75.75 0 01-.75.75H5.625a1.875 1.875 0 01-1.875-1.875v-6.198a2.29 2.29 0 00.091-.086L12 5.43z" />
+</svg>
@@ -0,0 +1,4 @@
+<svg {{ $attributes }} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+        d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
+</svg>
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+    class="h-5 w-5">
+    <path stroke-linecap="round" stroke-linejoin="round"
+        d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
+</svg>
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-4 w-4">
+    <path fill-rule="evenodd"
+        d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z"
+        clip-rule="evenodd" />
+</svg>
@@ -0,0 +1,49 @@
+@props([
+    'title',
+    'icon',
+    'data',
+    'valueKey',
+    'valueType',
+    'relationship' => null,
+    'formatValue' => null,
+])
+
+<div class="rounded bg-white p-2 shadow-sm dark:bg-gray-900">
+    <div class="flex justify-center gap-x-1 text-center font-semibold text-gray-700 dark:text-gray-300">
+        <div class="flex items-center">
+            <img src="{{ asset('/assets/images/icons/' . $icon) }}" alt="{{ $title }}" class="w-4" style="image-rendering: pixelated;">
+        </div>
+        {{ __($title) }}
+    </div>
+    <hr class="dark:border-gray-500">
+
+    <div class="mt-4 flex flex-col gap-y-3">
+        @foreach ($data as $index => $entry)
+            <div class="p-3 rounded bg-gray-100 flex gap-x-2 items-center h-[70px] overflow-hidden dark:bg-gray-800">
+                <div @class([
+                    'w-10 h-10 rounded-full bg-gray-300 flex items-center justify-center',
+                    'leaderboard-first' => $index + 1 == 1,
+                    'leaderboard-second' => $index + 1 == 2,
+                    'leaderboard-third' => $index + 1 == 3,
+                ])>
+                    {{ $index + 1 }}
+                </div>
+
+                <img @class([
+                    'mt-8' => !Str::contains(setting('avatar_imager'), 'www.habbo.com'),
+                ])
+                     src="{{ setting('avatar_imager') }}{{ $relationship ? $entry->{$relationship}?->look : $entry->look }}&size=b&head_direction=2&gesture=sml&headonly=1"
+                     alt="" />
+
+                <div class="flex flex-col">
+                    <p class="font-bold text-gray-700 dark:text-gray-100">
+                        {{ $relationship ? $entry->{$relationship}?->username : $entry->username }}
+                    </p>
+                    <p class="text-gray-600 dark:text-gray-300">
+                        {{ $formatValue ? $formatValue($entry->{$valueKey}) : $entry->{$valueKey} }} {{ $valueType }}
+                    </p>
+                </div>
+            </div>
+        @endforeach
+    </div>
+</div>
@@ -0,0 +1,55 @@
+<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+
+<script>
+    var Toast = Swal.mixin({
+        toast: true,
+        position: 'top-end',
+        showConfirmButton: false,
+        timer: 4000,
+        timerProgressBar: true,
+        didOpen: (toast) => {
+            toast.addEventListener('mouseenter', Swal.stopTimer)
+            toast.addEventListener('mouseleave', Swal.resumeTimer)
+        }
+    })
+</script>
+
+@if (session()->has('message'))
+    <script>
+        Toast.fire({
+            icon: 'error',
+            title: '{{ session()->get('message') }}'
+        })
+    </script>
+@endif
+
+@if ($errors->any())
+    @foreach ($errors->all() as $error)
+        <script>
+            Toast.fire({
+                icon: 'error',
+                title: '{{ $error }}'
+            })
+        </script>
+    @endforeach
+@endif
+
+@if ($errors->login)
+    @foreach ($errors->login->all() as $error)
+        <script>
+            Toast.fire({
+                icon: 'error',
+                title: '{{ $error }}'
+            })
+        </script>
+    @endforeach
+@endif
+
+@if (session()->has('success'))
+    <script>
+        Toast.fire({
+            icon: 'success',
+            title: '{{ session()->get('success') }}'
+        })
+    </script>
+@endif
@@ -0,0 +1,5 @@
+@props(['classes' => ''])
+
+<div x-data="{ open: false }" class="relative {{ $classes }}">
+    {{ $slot }}
+</div>
@@ -0,0 +1,30 @@
+<div x-show="open" style="display: none" x-on:keydown.escape.prevent.stop="open = false" role="dialog" aria-modal="true"
+    x-id="['modal-title']" :aria-labelledby="$id('modal-title')" class="fixed inset-0 z-50 overflow-y-auto">
+    {{-- Overlay --}}
+    <div x-show="open" x-transition x-on:click="open = false"
+        class="relative flex min-h-screen items-center justify-center overflow-hidden p-4">
+        <div x-show="open" x-transition.opacity class="fixed inset-0 bg-black/50"></div>
+
+        <div x-on:click.stop x-trap.noscroll.inert="open"
+            class="relative w-full max-w-xl rounded bg-white px-6 py-6 text-black shadow-md dark:bg-gray-900 dark:text-gray-200 lg:max-w-2xl lg:px-8">
+            <button type="button" x-on:click="open = false"
+                class="absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-800 dark:hover:text-white">
+                <svg aria-hidden="true" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"
+                    xmlns="http://www.w3.org/2000/svg">
+                    <path fill-rule="evenodd"
+                        d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                        clip-rule="evenodd"></path>
+                </svg>
+                <span class="sr-only">{{ __('Close modal') }}</span>
+            </button>
+
+            {{-- Title --}}
+            <div class="mb-2 flex flex-col items-center" :id="$id('modal-title')">
+                {{ $title }}
+            </div>
+
+            {{-- Content --}}
+            {{ $slot }}
+        </div>
+    </div>
+</div>
@@ -0,0 +1,5 @@
+@props(['route' => '', 'classes' => '', 'turbolink' => true, 'target' => '_self'])
+
+<a @if(!$turbolink) data-turbolinks="false" @endif href="{{ $route }}" target="{{ $target }}" @class(['dropdown-item dark:text-gray-200 dark:hover:bg-gray-700', $classes])>
+    {{ $slot }}
+</a>
@@ -0,0 +1,70 @@
+@props(['icon', 'routeGroup' => '', 'classes' => '', 'childClasses' => 'min-w-[150px]', 'uppercase' => false])
+
+<div
+    x-data="{
+        open: false,
+        toggle() {
+            if (this.open) {
+                return this.close()
+            }
+
+            this.$refs.button.focus()
+
+            this.open = true
+        },
+        close(focusAfter) {
+            if (! this.open) return
+
+            this.open = false
+
+            focusAfter && focusAfter.focus()
+        }
+    }"
+        x-on:keydown.escape.prevent.stop="close($refs.button)"
+        x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
+        x-id="['dropdown-button']"
+        @class([
+            'relative md:h-[60px] text-[14px] font-semibold text-black md:border-b-4! md:border-transparent! md:hover:border-b-[#eeb425]! transition duration-200 ease-in-out dark:text-gray-200 z-5',
+            $classes,
+            'md:border-b-4! md:border-b-[#eeb425]!' => request()->is($routeGroup),
+        ])"
+>
+    <!-- Button -->
+    <button
+        x-ref="button"
+        x-on:click="toggle()"
+        :aria-expanded="open"
+        :aria-controls="$id('dropdown-button')"
+        type="button"
+        @class([
+            'flex items-center md:gap-2 h-full',
+            'uppercase' => $uppercase,
+        ])"
+    >
+        @if(isset($icon))
+            <i class="hidden navigation-icon {{ $icon }} lg:inline-flex"></i>
+        @endif
+        {{ $slot }}
+
+        <!-- Heroicon: chevron-down -->
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20"
+             fill="currentColor">
+            <path fill-rule="evenodd"
+                  d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                  clip-rule="evenodd"/>
+        </svg>
+    </button>
+
+    <!-- Panel -->
+    <div
+        x-ref="panel"
+        x-show="open"
+        x-transition.origin.top.left
+        x-on:click.outside="close($refs.button)"
+        :id="$id('dropdown-button')"
+        style="display: none;"
+         @class(['absolute left-0 mt-2 rounded bg-white dark:bg-gray-800 shadow-sm whitespace-nowrap overflow-hidden z-10', $childClasses])
+    >
+        {{ $children }}
+    </div>
+</div>
@@ -0,0 +1,11 @@
+<x-navigation.dropdown classes="!border-none" childClasses="min-w-[50px] -ml-4">
+    {{ $slot }}
+
+    <x-slot:children>
+        @foreach (DB::table('website_languages')->get() as $lang)
+            <x-navigation.dropdown-child :route="route('language.select', $lang->country_code)" :turbolink="false">
+                <img src="/assets/images/icons/flags/{{ $lang->country_code }}.png" alt="{{ $lang->country_code }}">
+            </x-navigation.dropdown-child>
+        @endforeach
+    </x-slot:children>
+</x-navigation.dropdown>
@@ -0,0 +1,11 @@
+<button data-collapse-toggle="mobile-menu" type="button"
+    class="absolute right-4 top-4 z-10 hover:text-gray-900 dark:hover:text-white dark:text-white md:hidden"
+    aria-controls="mobile-menu-2" aria-expanded="false">
+
+    <span class="sr-only">{{ __('Open main menu') }}</span>
+    <svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd"
+            d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
+            clip-rule="evenodd"></path>
+    </svg>
+</button>
@@ -0,0 +1,111 @@
+<div class="relative hidden h-full w-full flex-col items-center gap-y-2 py-3! md:flex! md:flex-row! md:gap-x-8 md:gap-y-0 md:py-0!" id="mobile-menu">
+    @auth
+        <x-navigation.dropdown icon="home" route-group="user*">
+            {{ auth()->user()->username }}
+
+            <x-slot:children>
+                <x-navigation.dropdown-child :route="route('me.show')">
+                    {{ __('Home') }}
+                </x-navigation.dropdown-child>
+
+				<x-navigation.dropdown-child :route="route('draw-badge')">
+                    {{ __('Badge Drawer') }}
+                </x-navigation.dropdown-child>
+
+                <x-navigation.dropdown-child :route="route('profile.show', auth()->user()->username)">
+                    {{ __('My Profile') }}
+                </x-navigation.dropdown-child>
+            </x-slot:children>
+        </x-navigation.dropdown>
+    @else
+        <a href="{{ route('welcome') }}"
+           class="nav-item dark:text-gray-200 {{ request()->routeIs('welcome') ? 'md:border-b-4! md:border-b-[#eeb425]!' : '' }}">
+            <i class="mr-1 hidden navigation-icon home lg:inline-flex"></i>
+            {{ __('Home') }}
+        </a>
+    @endauth
+
+    @auth
+        <x-navigation.dropdown icon="community" route-group="community*" :uppercase="true">
+            {{ __('Community') }}
+
+            <x-slot:children>
+                <x-navigation.dropdown-child :route="route('article.index')">
+                    {{ __('Articles') }}
+                </x-navigation.dropdown-child>
+
+                <x-navigation.dropdown-child :route="route('staff.index') ">
+                    {{ __('Staff') }}
+                </x-navigation.dropdown-child>
+
+                <x-navigation.dropdown-child :route="route('teams.index')">
+                    {{ __('Teams') }}
+                </x-navigation.dropdown-child>
+                
+                <x-navigation.dropdown-child :route="route('team-applications.index')">
+                    {{ __('Team applications') }}
+                </x-navigation.dropdown-child>
+
+                <x-navigation.dropdown-child :route="route('staff-applications.index')">
+                    {{ __('Staff applications') }}
+                </x-navigation.dropdown-child>
+
+                <x-navigation.dropdown-child :route="route('photos.index')">
+                    {{ __('Photos') }}
+                </x-navigation.dropdown-child>
+            </x-slot:children>
+        </x-navigation.dropdown>
+
+        <a href="{{ route('leaderboard.index') }}"
+           class="nav-item dark:text-gray-200 {{ request()->routeIs('leaderboard.*') ? 'md:border-b-4! md:border-b-[#eeb425]!' : '' }}">
+            <i class="navigation-icon leaderboards mr-1 hidden lg:inline-flex"></i>
+            {{ __('Leaderboards') }}
+        </a>
+
+        <a href="{{ route('values.index') }}"
+           class="nav-item dark:text-gray-200 {{ request()->routeIs('values.*') ? 'md:border-b-4! md:border-b-[#eeb425]!' : '' }}">
+            <i class="navigation-icon leaderboards mr-1 hidden lg:inline-flex"></i>
+            {{ __('Rare values') }}
+        </a>
+
+        <a data-turbolinks="false" href="{{ route('shop.index') }}"
+           class="nav-item dark:text-gray-200 {{ request()->routeIs('shop.*') ? 'md:border-b-4! md:border-b-[#eeb425]!' : '' }}">
+            <i class="navigation-icon mr-1 hidden lg:inline-flex shop"></i>
+            {{ __('Shop') }}
+        </a>
+    @endauth
+
+    <x-navigation.dropdown icon="rules" route-group="help-center*" :uppercase="true">
+        {{ __('Assistance') }}
+
+        <x-slot:children>
+			@auth
+            <x-navigation.dropdown-child :route="route('help-center.index')">
+                {{ __('Help center') }}
+            </x-navigation.dropdown-child>
+
+            @if(hasPermission('manage_website_tickets'))
+                <x-navigation.dropdown-child :route="route('help-center.ticket.index')">
+                    {{ __('Open tickets') }}
+                </x-navigation.dropdown-child>
+            @endif
+
+            @else
+                <x-navigation.dropdown-child :route="route('help-center.rules.index')">
+                    {{ __('Rules') }}
+                </x-navigation.dropdown-child>
+            @endauth
+        </x-slot:children>
+    </x-navigation.dropdown>
+
+    <a href="{{ setting('discord_invitation_link') }}" target="_blank" class="nav-item dark:text-gray-200">
+        {{ __('Discord') }}
+    </a>
+
+    <div class="w-full flex md:hidden gap-x-1 justify-center">
+        <x-navigation.language-selector>
+            <img src="/assets/images/icons/flags/{{ session()->has('locale') ? session()->get('locale') : config('habbo.site.default_language') }}.png"
+                 alt="">
+        </x-navigation.language-selector>
+    </div>
+</div>
@@ -0,0 +1,5 @@
+<button id="theme-switcher"
+    type="button"
+    class="mr-3 cursor-pointer items-center justify-center rounded-lg bg-gray-200 p-1 shadow-inner dark:bg-gray-800 hidden md:flex">
+    <x-icons.moon class="h-5 w-5 text-gray-600 dark:text-white" />
+</button>
@@ -0,0 +1,36 @@
+<button id="dropdownNavbarLink" data-dropdown-toggle="dropdownNavbarUser"
+    class="ml-4 flex items-center dark:text-gray-200">
+    <div class="h-10">
+        <img class="w-10"
+            src="{{ setting('avatar_imager') }}{{ auth()->user()->look }}&direction=2&headonly=1&head_direction=2&gesture=sml"
+            alt="">
+    </div>
+
+    <span>{{ auth()->user()->username }}</span>
+
+    <svg xmlns="http://www.w3.org/2000/svg" class="ml-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"
+        stroke-width="2">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
+    </svg>
+</button>
+
+<!-- Dropdown menu -->
+<div id="dropdownNavbarUser" class="z-10 hidden w-44 bg-white py-2 shadow-sm dark:bg-gray-800">
+    <a href="{{ route('settings.account.show') }}"
+        class="block px-4 py-2 font-semibold hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-200">
+        {{ __('User settings') }}
+    </a>
+
+    @auth
+        <a href="{{ route('logout') }}"
+            class="block px-4! py-2! font-semibold hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-200"
+            onclick="event.preventDefault();
+            document.getElementById('logout-form').submit();">
+            {{ __('Logout') }}
+        </a>
+
+        <form id="logout-form" action="{{ route('logout') }}" method="POST" class="hidden">
+            @csrf
+        </form>
+    @endauth
+</div>
@@ -0,0 +1,20 @@
+@props(['photos'])
+
+<div class="grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-4">
+    @foreach ($photos as $photo)
+        <a href="{{ $photo->url }}" data-fancybox="gallery" class="cursor-pointer">
+            <div class="rounded border-2 dark:border-gray-600 h-[280px] relative object-fill overflow-hidden">
+                <img class="h-full w-full object-cover object-center" src="{{ $photo->url }}" alt="">
+                <div class="absolute bottom-3 left-4 flex items-center gap-x-3 rounded-full bg-white pr-3 dark:bg-gray-800">
+                    <div class="flex h-10 w-10 items-center justify-center overflow-hidden rounded-full bg-gray-100 dark:bg-gray-900">
+                        <img src="{{ setting('avatar_imager') }}{{ $photo->user->look ?? '' }}&direction=2&headonly=1&head_direction=2&gesture=sml" alt="">
+                    </div>
+
+                    <p class="dark:text-white">
+                        {{ $photo->user->username ?? __('Unknown') }}
+                    </p>
+                </div>
+            </div>
+        </a>
+    @endforeach
+</div>
@@ -0,0 +1,43 @@
+@props(['rare'])
+
+<div class="p-3 rounded bg-gray-200 dark:bg-gray-700 flex gap-x-6 gap-4 items-center overflow-hidden">
+    <div class="w-8 h-8">
+        <div class="w-10 h-10 overflow-hidden rounded-full flex items-center justify-center bg-gray-300 dark:bg-gray-800">
+            <img src="{{ sprintf('%s/%s', setting('furniture_icons_path'), $rare->furniture_icon) }}" alt="">
+        </div>
+    </div>
+    <div class="flex flex-col w-full">
+        <div class="font-bold text-gray-700 dark:text-gray-200 truncate flex items-center gap-x-[5px]">
+            @if($rare->item_id)
+                <a href="{{ route('values.value', $rare) }}" class="underline">
+                    {{ strLimit($rare->name, 15) }}
+                </a>
+            @else
+                {{ strLimit($rare->name, 20) }}
+            @endif
+
+            @if($rare->isLimitedEdition())
+                <img class="w-4 h-4" src="{{ asset('/assets/images/icons/ltd.png') }}" alt="">
+            @endif
+        </div>
+
+        <div class="w-full bg-yellow-400 rounded h-[35px] flex items-center mt-2">
+            <div class="bg-yellow-500 rounded-l w-1/3 px-4 h-full flex items-center justify-center">
+                <img src="{{ asset('assets/images/icons/currency/credits.png') }}" alt="">
+            </div>
+            <p class="w-full text-center truncate">
+                {{ $rare->credit_value ?? 0 }} {{ __('credits') }}
+            </p>
+        </div>
+
+        <div class="w-full bg-gray-500 rounded h-[35px] flex items-center mt-1">
+            <div class="bg-gray-600 rounded-l w-1/3 px-4 h-full flex items-center justify-center">
+                <img src="{{ asset('/assets/images/icons/navigation/shop.png') }}" alt="">
+            </div>
+
+            <p class="w-full text-center truncate">
+                {{ $rare->currency_value ?? 0 }} {{ $rare->currency_type === 0 ? 'Duckets' : ($rare->currency_type === 5 ? 'Diamonds' : 'Other') }}
+            </p>
+        </div>
+    </div>
+</div>
@@ -0,0 +1,130 @@
+<x-content.shop-card icon-url="{{ $article->icon_url }}" color="{{ $article->color }}" classes="border dark:border-gray-900">
+    <x-slot:title>
+        {{ $article->name }}
+    </x-slot:title>
+
+    <x-slot:under-title>
+        {{ $article->info }}
+    </x-slot:under-title>
+
+    <div class="flex justify-between dark:text-white">
+
+        <div class="flex flex-col">
+            <p class="font-semibold">{{ __('You will receive:') }}</p>
+
+            <ul class="list-disc pl-4">
+                @if($article->features)
+                    @foreach($article->features as $feature)
+                        <li class="ml-3">
+                            {{ $feature->content }}
+                        </li>
+                    @endforeach
+                @endif
+
+
+                @if ($article->credits)
+                    <li class="ml-3">{{ number_format($article->credits, 0, '.', '.') }} credits</li>
+                @endif
+
+                @if ($article->duckets)
+                    <li class="ml-3">{{ number_format($article->duckets, 0, '.', '.') }} duckets</li>
+                @endif
+
+                @if ($article->diamonds)
+                    <li class="ml-3">{{ number_format($article->diamonds, 0, '.', '.') }} diamonds</li>
+                @endif
+
+                @if ($article->rank)
+                    <li class="ml-3">
+                        {{ $article->rank->rank_name }} rank
+                    </li>
+                @endif
+
+                @if ($article->furniture)
+                    @foreach ($article->furniItems() as $furni)
+                        <li class="ml-3">
+                            {{ collect(json_decode($article->furniture))->firstWhere('item_id', $furni->id)->amount }}
+                            x {{ $furni->public_name }}
+                        </li>
+                    @endforeach
+                @endif
+            </ul>
+        </div>
+
+        <div class="flex flex-col gap-3">
+            @if (!empty($article->badges))
+                <div class="flex flex-col items-end">
+                    Badge(s):
+                    <div class="flex flex-col dark:text-white py-1.5 px-2 rounded bg-gray-200 dark:bg-gray-700">
+                        <div class="flex gap-2 items-center">
+                            @foreach (explode(';', $article->badges) as $badge)
+                                <img data-tippy-content="1x {{ $badge }}" class="user-badge"
+                                     src="/client/flash/c_images/album1584/{{$badge}}.png" alt="{{ $badge }}"
+                                     style="image-rendering: auto;">
+                            @endforeach
+                        </div>
+                    </div>
+                </div>
+            @endif
+
+            @if ($article->furniture)
+                <div class="flex flex-col items-end">
+                    Furniture:
+                    <div class="flex flex-col dark:text-white py-2 px-4 rounded bg-gray-200 dark:bg-gray-700">
+                        <div class="flex gap-2 items-center">
+                            @foreach ($article->furniItems() as $furni)
+                                <div>
+                                    <img
+                                        data-tippy-content="{{ collect(json_decode($article->furniture))->firstWhere('item_id', $furni->id)->amount }}x {{ $furni->public_name }}"
+                                        class="user-badge" src="{{$furni->icon()}}" alt="{{ $furni->public_name }}">
+                                </div>
+                            @endforeach
+                        </div>
+                    </div>
+                </div>
+            @endif
+        </div>
+    </div>
+
+    <div class="pt-2 mt-auto flex gap-4">
+        @if($article->is_giftable)
+            <x-modals.modal-wrapper>
+                <div x-on:click="open = true">
+                    <x-form.primary-button type="button" classes="px-10">
+                        <x-icons.gift />
+                    </x-form.primary-button>
+                </div>
+
+                <x-modals.regular-modal>
+                    <x-slot name="title">
+                        <h2 class="text-2xl">
+                            {{ __('Gift :package', ['package' => $article->name]) }}
+                        </h2>
+                    </x-slot>
+
+                    <div class="mt-4">
+                        <form action="{{ route('shop.buy', $article) }}" method="POST" class="w-full">
+                            @csrf
+
+                            <x-form.input name="receiver" type="text" placeholder="Enter the name of the recipient you want to gift" classes="mb-2"/>
+
+                            <button type="submit"
+                                    class="w-full rounded bg-green-600 hover:bg-green-700 text-white p-2 border-2 border-green-500 transition ease-in-out duration-150 font-semibold">
+                                {{ __('Gift for $:cost', ['cost' => $article->price()]) }}
+                            </button>
+                        </form>
+                    </div>
+                </x-modals.regular-modal>
+            </x-modals.modal-wrapper>
+        @endif
+
+        <form action="{{ route('shop.buy', $article) }}" method="POST" class="w-full">
+            @csrf
+
+            <button type="submit"
+                    class="w-full rounded bg-green-600 hover:bg-green-700 text-white p-2 border-2 border-green-500 transition ease-in-out duration-150 font-semibold">
+                {{ __('Buy for $:cost', ['cost' => $article->price()]) }}
+            </button>
+        </form>
+    </div>
+</x-content.shop-card>
@@ -0,0 +1,75 @@
+<div class="relative flex h-52 w-full items-center justify-center header-bg"
+    style="background: url({{ setting('cms_header') }});">
+    <div class="absolute h-full w-full bg-black/50"></div>
+
+    @auth
+        <div class="relative flex h-full w-full max-w-7xl items-center justify-center pr-10 md:justify-between">
+            <div class="flex items-center gap-x-4">
+                <a href="{{ route('me.show') }}" class="ml-7">
+                    <img class="drop-shadow transition duration-300 ease-in-out hover:scale-105"
+                        src="{{ setting('cms_logo') }}" alt="Hotel logo">
+                </a>
+
+                <div
+                    class="hidden md:flex items-center bg-white dark:bg-gray-900 dark:text-white px-4 rounded-md relative h-[50px]">
+                    <div class="absolute -left-1 h-6 w-6 rotate-45 bg-white dark:bg-gray-900"></div>
+
+                    <span class="relative">
+                        {{ __(':online :hotel online', ['online' => DB::table('users')->where('online', '1')->count(),'hotel' => setting('hotel_name')]) }}
+                    </span>
+                </div>
+            </div>
+
+            <flex class="flex gap-x-4">
+                <a data-turbolinks="false" href="{{ route('nitro-client') }}">
+                    <button
+                        class="relative hidden rounded-full bg-white/90 px-6 py-2 text-lg font-semibold text-black transition duration-300 ease-in-out hover:bg-white dark:bg-gray-900 dark:text-white md:block">
+                        {{ __('Nitro client') }}
+                    </button>
+                </a>
+
+                @if (config('habbo.client.flash_enabled'))
+                    <a data-turbolinks="false" href="{{ route('flash-client') }}">
+                        <button
+                            class="relative hidden rounded-full bg-white/90 px-6 py-2 text-lg font-semibold text-black transition duration-300 ease-in-out hover:bg-white dark:bg-gray-900 dark:text-white md:block">
+                            {{ __('Flash client') }}
+                        </button>
+                    </a>
+                @endif
+            </flex>
+        </div>
+    @endauth
+
+    @guest
+        <x-modals.modal-wrapper>
+            <div class="flex justify-center">
+                <div class="text-white font-semibold flex-col md:w-[600px]">
+                    <p class="hidden text-center text-xl md:block">
+                        {{ __('An online virtual world where you can create your own avatar, make friends, chat, create rooms and much more!') }}
+                    </p>
+
+                    <div class="flex flex-col items-center justify-center gap-x-6 gap-y-4 md:mt-6 md:flex-row md:gap-y-0">
+                        <button type="button" x-on:click="open = true"
+                            class="rounded-full border-2 border-white px-8! py-2! uppercase transition! duration-200! ease-in-out! hover:bg-white hover:text-black!">
+                            {{ __('Login') }}
+                        </button>
+
+                        <p class="text-sm uppercase text-white/80">{{ __('Or') }}</p>
+
+                        <a data-turbolinks="false" href="{{ route('register') }}">
+                            <button
+                                class="uppercase bg-green-600/80! px-8! py-2.5! rounded-full transition! ease-in-out! duration-200! hover:bg-green-600! text-white">
+                                {{ __('Create an account') }}
+                            </button>
+                        </a>
+                    </div>
+                </div>
+            </div>
+
+            <x-modals.regular-modal x-model="show {{ session()->get('wrong-auth') }}">
+                <x-auth.login-form />
+            </x-modals.regular-modal>
+        </x-modals.modal-wrapper>
+
+    @endguest
+</div>
@@ -0,0 +1,13 @@
+@props(['icon'])
+
+<div class="hidden gap-x-3 md:flex">
+    <div class="h-[25px] w-[25px] rounded-full {{ $icon }} outline-offset-[3px]"></div>
+
+    <div class="dark:text-gray-400">
+        <span class="font-semibold dark:text-white">
+            {{ $currency }}
+        </span>
+
+        {{ $slot }}
+    </div>
+</div>
@@ -0,0 +1,82 @@
+<div class="max-w-7xl min-h-[60px] px-4 md:flex md:items-center md:justify-between md:mx-auto">
+    <div class="flex gap-x-6">
+        <x-top-header-currency icon="nav-credit-icon">
+            <x-slot:currency>
+                {{ auth()->user()->credits }}
+            </x-slot:currency>
+
+            {{ __('Credits') }}
+        </x-top-header-currency>
+
+        <x-top-header-currency icon="nav-ducket-icon">
+            <x-slot:currency>
+                {{ auth()->user()->currency('duckets') }}
+            </x-slot:currency>
+
+            {{ __('Duckets') }}
+        </x-top-header-currency>
+
+        <x-top-header-currency icon="nav-diamond-icon">
+            <x-slot:currency>
+                {{ auth()->user()->currency('diamonds') }}
+            </x-slot:currency>
+
+            {{ __('Diamonds') }}
+        </x-top-header-currency>
+    </div>
+
+    <div class="flex gap-x-3">
+        @if(hasPermission('view_server_logs') || hasPermission('housekeeping_access') || hasPermission('generate_logo'))
+            <x-navigation.dropdown classes="!text-red-700 !border-none">
+                {{ __('Administration') }}
+
+                <x-slot:children>
+                    @if (hasPermission('generate_logo'))
+                        <x-navigation.dropdown-child route="{{ route('logo-generator.index') }}" :turbolink="false" target="_blank">
+                            {{ __('Logo generator') }}
+                        </x-navigation.dropdown-child>
+                    @endif
+
+                    @if (hasPermission('view_server_logs'))
+                        <x-navigation.dropdown-child route="/log-viewer" :turbolink="false" target="_blank">
+                            {{ __('Error logs') }}
+                        </x-navigation.dropdown-child>
+                    @endif
+
+                    @if(hasPermission('housekeeping_access'))
+                        <a data-turbolinks="false" href="{{ setting('housekeeping_url') }}" target="_blank" class="dropdown-item dark:text-gray-200 dark:hover:bg-gray-700">
+                            {{ __('Housekeeping') }}
+                        </a>
+                    @endif
+                </x-slot:children>
+            </x-navigation.dropdown>
+        @endif
+
+        <x-navigation.dropdown classes="!border-none">
+            <div @class([
+                    '!bg-no-repeat !bg-center',
+                    'w-[54px] h-[62px]' => Str::contains(setting('avatar_imager'), 'www.habbo.com'),
+                    'w-[64px] h-[110px]' => !Str::contains(setting('avatar_imager'), 'www.habbo.com'),
+                ])
+                style="background: url({{ setting('avatar_imager') }}{{ auth()->user()->look }}&direction=2&headonly=1&head_direction=2&gesture=sml)">
+            </div>
+
+            <span class="-ml-2">{{ auth()->user()->username }}</span>
+
+            <x-slot:children>
+                <x-navigation.dropdown-child :route="route('settings.account.show')">
+                    {{ __('User settings') }}
+                </x-navigation.dropdown-child>
+
+
+                <button class="py-2! px-4! dark:text-gray-200! dark:hover:bg-gray-700! hover:bg-gray-100! w-full text-left" @click.prevent="document.getElementById('logout-form').submit();">
+                    {{ __('Logout') }}
+                </button>
+
+                <form id="logout-form" action="{{ route('logout') }}" method="POST" class="hidden">
+                    @csrf
+                </form>
+            </x-slot:children>
+        </x-navigation.dropdown>
+    </div>
+</div>
@@ -0,0 +1,121 @@
+<x-content.content-card icon="discord-icon" classes="border dark:border-gray-900">
+    <x-slot:title>
+        {{ __('Discord') }}
+    </x-slot:title>
+
+    <x-slot:under-title>
+        <span id="guildName"></span>
+    </x-slot:under-title>
+
+    <div class="text-sm dark:text-gray-200">
+        <div id="guildUsers" class="h-[129px] overflow-auto"> </div>
+        <a id="guildInvite" target="blank">
+            <x-form.secondary-button classes="mt-3">
+                {{ __('Join server') }}
+            </x-form.secondary-button>
+        </a>
+    </div>
+</x-content.content-card>
+
+@push('javascript')
+    <script>
+        window.onload = DiscordApi();
+
+        function DiscordApi() {
+            let init = {
+                method: 'GET',
+                mode: 'cors',
+                cache: 'reload'
+            }
+            //gets discord widget json from url with in settings specifed id
+            fetch("https://discordapp.com/api/guilds/{{ setting('discord_widget_id') }}/widget.json", init).then(
+                function(res) {
+                    //if there is a problem with discord or id sends an error message in console
+                    if (res.status != 200) {
+                        console.error("Discord widget cant connect to discord (" + res.status + ")");
+                        return;
+                    }
+
+                    res.json().then(function(data) {
+                        let users = data.members;
+                        let guildName = data.name;
+                        //sets the subtitle of the card to the guild name
+                        document.getElementById('guildName').innerText = guildName;
+
+                        //loops over every user in json array and display them in the widget
+                        for (let i = 0; i < data.members.length; i++) {
+                            let container = document.createElement('div')
+                            let leftContainer = document.createElement('div')
+                            let imgContainer = document.createElement('div')
+                            let img = document.createElement('img')
+                            let status = document.createElement('div')
+                            let rightContainer = document.createElement('div')
+                            let name = document.createElement('p')
+                            let motto = document.createElement('p')
+
+                            //sets styleing
+                            container.classList.add('flex', 'items-center', 'gap-x-2')
+                            leftContainer.classList.add('relative')
+                            imgContainer.classList.add('h-9', 'w-9', 'bg-gray-100', 'dark:bg-gray-800',
+                                'rounded-full', 'flex', 'items-center', 'justify-center', 'overflow-hidden')
+                            status.classList.add('absolute', 'bottom-0', 'right-0', 'w-3', 'h-3',
+                                'rounded-full', 'border-2', 'dark:border-gray-800')
+                            name.classList.add('font-semibold')
+                            motto.classList.add('dark:text-gray-400')
+
+                            //sets styling for exceptions
+                            if (i === 0) {
+                                name.classList.add('mt-1')
+                            }
+                            if (i !== 0) {
+                                imgContainer.classList.add('mt-1')
+                                name.classList.add('mt-3')
+                            }
+                            if (users[i].status === 'online') {
+                                status.style.backgroundColor = "#16a34a";
+                            }
+                            if (users[i].status === 'idle') {
+                                status.style.backgroundColor = "#e9b124";
+                            }
+                            if (users[i].status === 'dnd') {
+                                status.style.backgroundColor = "#9c0017";
+                            }
+
+                            //adds attributes to elements
+                            img.setAttribute('src', data.members[i].avatar_url);
+
+                            if (users[i].nick === undefined) {
+                                name.innerText = users[i].username;
+                            } else {
+                                name.innerText = users[i].nick;
+                            }
+                            if (users[i].game !== undefined) {
+                                motto.innerText = users[i].game.name;
+                            }
+
+                            //append all elements to each other
+                            container.appendChild(leftContainer)
+                            leftContainer.appendChild(imgContainer)
+                            imgContainer.appendChild(img)
+                            leftContainer.appendChild(status)
+                            container.appendChild(rightContainer)
+                            rightContainer.appendChild(name)
+                            rightContainer.appendChild(motto)
+
+                            document.getElementById('guildUsers').appendChild(container)
+                        }
+
+                        //Checks if join server link is null and removes btn form webpage
+                        if (data.instant_invite === null) {
+                            document.getElementById('guildInvite').remove()
+                            document.getElementById('guildUsers').style.height = "176px"
+                        } else {
+                            //Gives the "Join server" button a href to the default selected channel in the server
+                            //link is recived from widget json
+                            document.getElementById('guildInvite').setAttribute('href', data.instant_invite)
+                        }
+                    })
+                });
+        }
+    </script>
+@endpush
@@ -0,0 +1,21 @@
+
+@props(['user'])
+
+<div class="relative flex items-center justify-between overflow-hidden rounded px-10 me-backdrop"
+    style="background: rgba(0, 0, 0, 0.3) url({{ setting('cms_me_backdrop') }});">
+    <div>
+        <a href="{{ route('profile.show', $user) }}"
+            class="absolute -bottom-12 left-0 drop-shadow transition duration-300 ease-in-out hover:scale-105">
+            <img style="image-rendering: pixelated;"
+                src="{{ setting('avatar_imager') }}{{ $user->look }}&direction=2&head_direction=3&gesture=sml&action=wav&size=l"
+                alt="">
+        </a>
+    </div>
+
+    <a data-turbolinks="false" href="{{ route('nitro-client') }}">
+        <button
+            class="relative rounded-full bg-white/90 px-6 py-2 text-lg font-semibold text-black transition duration-300 ease-in-out hover:bg-white dark:bg-gray-900 dark:text-white">
+            {{ __('Go to :hotel', ['hotel' => setting('hotel_name')]) }}
+        </button>
+    </a>
+</div>
@@ -0,0 +1,15 @@
+@props(['colSpan'])
+
+<div class="col-span-2 lg:col-span-{{ $colSpan }}">
+    {{ $image }}
+
+    <div class="shadow">
+        <div class="flex gap-x-2 rounded-t border-b bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-900">
+            <p class="font-semibold text-black dark:text-white">{{ $title }}</p>
+        </div>
+
+        <section class="rounded-b bg-white p-3 dark:bg-gray-800 dark:text-white">
+            {{ $slot }}
+        </section>
+    </div>
+</div>
@@ -0,0 +1,47 @@
+<a data-turbolinks="false" href="{{ route('settings.account.show') }}"
+    class="{{ request()->routeIs('settings.account.show') ? 'bg-[#eeb425] text-white' : 'bg-gray-100 dark:bg-gray-900' }} dark:text-gray-100 flex gap-x-2 justify-center items-center rounded p-2 md:p-6 text-center md:text-xl font-semibold transition duration-200 ease-in-out hover:bg-[#eeb425] hover:text-white">
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"
+        stroke-width="2">
+        <path stroke-linecap="round" stroke-linejoin="round"
+            d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+    </svg>
+
+    {{ __('Account settings') }}
+</a>
+
+<a data-turbolinks="false" href="{{ route('settings.password.show') }}"
+    class="{{ request()->routeIs('settings.password.show') ? 'bg-[#eeb425] text-white' : 'bg-gray-100 dark:bg-gray-900' }} dark:text-gray-100 flex gap-x-2 justify-center rounded p-2 md:p-6 text-center md:text-xl font-semibold transition duration-200 ease-in-out hover:bg-[#eeb425] hover:text-white">
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"
+        stroke-width="2">
+        <path stroke-linecap="round" stroke-linejoin="round"
+            d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+    </svg>
+
+    {{ __('Password settings') }}
+</a>
+
+<a data-turbolinks="false" href="{{ route('settings.two-factor') }}"
+    class="{{ request()->routeIs('settings.two-factor') ? 'bg-[#eeb425] text-white' : 'bg-gray-100 dark:bg-gray-900' }} dark:text-gray-100 flex gap-x-2 justify-center rounded p-2 md:p-6 text-center md:text-xl font-semibold transition duration-200 ease-in-out hover:bg-[#eeb425] hover:text-white">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+        class="h-6 w-6">
+        <path stroke-linecap="round" stroke-linejoin="round"
+            d="M7.864 4.243A7.5 7.5 0 0119.5 10.5c0 2.92-.556 5.709-1.568 8.268M5.742 6.364A7.465 7.465 0 004.5 10.5a7.464 7.464 0 01-1.15 3.993m1.989 3.559A11.209 11.209 0 008.25 10.5a3.75 3.75 0 117.5 0c0 .527-.021 1.049-.064 1.565M12 10.5a14.94 14.94 0 01-3.6 9.75m6.633-4.596a18.666 18.666 0 01-2.485 5.33" />
+    </svg>
+
+    {{ __('Two factor') }}
+</a>
+
+<a data-turbolinks="false" href="{{ route('settings.session-logs') }}"
+    class="{{ request()->routeIs('settings.session-logs') ? 'bg-[#eeb425] text-white' : 'bg-gray-100 dark:bg-gray-900' }} dark:text-gray-100 flex gap-x-2 justify-center rounded p-2 md:p-6 text-center md:text-xl font-semibold transition duration-200 ease-in-out hover:bg-[#eeb425] hover:text-white">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5"
+        stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+        <rect x="5" y="3" width="14" height="18" rx="2" />
+        <line x1="9" y1="7" x2="15" y2="7" />
+        <line x1="9" y1="11" x2="15" y2="11" />
+        <line x1="9" y1="15" x2="13" y2="15" />
+    </svg>
+
+    {{ __('Session logs') }}
+</a>