Atomcms-edit/resources/themes/atom/views/user/me.blade.php

<x-app-layout>
    @push('title', auth()->user()->username)

    <div class="col-span-12 lg:col-span-9 space-y-4">
        <x-user.me-backdrop :user="$user" />

        <div class="rounded-lg overflow-hidden" style="background-color: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
            <div class="flex items-center gap-3 p-3" style="background: linear-gradient(140deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 80%, black) 100%);">
                <img src="{{ asset('/assets/images/icons/online-friends.png') }}" alt="{{ __('Online Friends') }}" class="w-6 h-6">
                <span class="text-sm font-semibold text-white">{{ __('Online Friends') }}</span>
            </div>

            <div class="relative flex flex-wrap items-center justify-center gap-3 p-3">
                @forelse ($onlineFriends as $friend)
                    <div data-popover-target="friend-{{ $friend->username }}"
                        class="inline-block h-12 w-12 rounded-full border-2 bg-center bg-no-repeat hover:scale-110 transition-all duration-300 cursor-pointer"
                        style="image-rendering: pixelated; border-color: color-mix(in srgb, var(--color-text-muted) 30%, transparent); background-image: url({{ setting('avatar_imager') }}{{ $friend->look }}&direction=3&head_direction=3&gesture=sml&action=wlk,wav&size=l&img_format=gif);">
                    </div>

                    <div data-popover id="friend-{{ $friend->username }}" role="tooltip"
                        class="invisible absolute z-10 inline-block w-64 rounded-lg border shadow-xl opacity-0 transition-opacity duration-300"
                        style="background-color: var(--color-surface); border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent); color: var(--color-text);">
                        <div class="rounded-t-lg border-b px-4 py-3" style="border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent); background-color: var(--color-surface);">
                            <div class="flex items-center justify-between font-semibold" style="color: var(--color-text)">
                                {{ $friend->username }}
                                <span class="w-2 h-2 rounded-full bg-green-500"></span>
                            </div>
                        </div>
                        <div class="px-4 py-3 space-y-1">
                            <div class="text-sm">
                                <span class="font-medium" style="color: var(--color-text-muted)">{{ __('Motto') }}:</span>
                                <span class="ml-1" style="color: var(--color-text)">{{ $friend->motto }}</span>
                            </div>
                            <div class="text-sm">
                                <span class="font-medium" style="color: var(--color-text-muted)">{{ __('Online Since') }}:</span>
                                <span class="ml-1" style="color: var(--color-text)">{{ date(config('habbo.site.date_format'), $friend->last_online) }}</span>
                            </div>
                        </div>
                        <div data-popper-arrow class="absolute h-2 w-2 rotate-45 border-l border-b" style="border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent); background-color: var(--color-surface);"></div>
                    </div>
                @empty
                    <p class="text-sm" style="color: var(--color-text-muted)">{{ __('No friends online right now.') }}</p>
                @endforelse
            </div>
        </div>

        <div class="rounded-lg overflow-hidden" style="background-color: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
            <div class="flex items-center gap-3 p-3" style="background: linear-gradient(140deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 80%, black) 100%);">
                <span class="text-white font-bold text-lg">{{ sprintf(__('User Referrals (%s/%s)'), auth()->user()->referrals->referrals_total ?? 0, setting('referrals_needed')) }}</span>
            </div>

            <div class="p-4 space-y-4 text-sm" style="color: var(--color-text);">
                <p>
                    {{ __('Here at :hotel we have added a referral system, allowing you to obtain a bonus for every :needed users that registers through your referral link will allow you to claim a reward of :amount diamonds!', ['hotel' => setting('hotel_name'), 'needed' => setting('referrals_needed'), 'amount' => setting('referral_reward_amount')]) }}
                </p>

                <div class="p-3 rounded-lg" style="background-color: color-mix(in srgb, #eab308 10%, transparent); border: 1px solid color-mix(in srgb, #eab308 30%, transparent);">
                    <p class="text-xs" style="color: color-mix(in srgb, #ca8a04 80%, transparent);">
                        &zwj;⚠️ {{ __('Boosting referrals by making own accounts will lead to removal of all progress, currency, inventory and a potential ban') }}
                    </p>
                </div>

                <div class="grid grid-cols-12 gap-2">
                    <div class="col-span-12 md:col-span-10">
                        <input type="text" id="referral" readonly
                            value="{{ sprintf('%s/register/%s', config('habbo.site.site_url'), auth()->user()->referral_code) }}"
                            class="w-full rounded-lg border px-3 py-2 text-sm focus:outline-none"
                            style="background-color: var(--color-background); color: var(--color-text); border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
                    </div>

                    <div class="col-span-12 md:col-span-2">
                        <button onclick="copyCode()"
                            class="w-full rounded-lg px-4 py-2 text-sm font-semibold transition-all duration-200 hover:opacity-90"
                            style="background-color: var(--color-primary); color: var(--button-text-color);">
                            {{ __('Copy code') }}
                        </button>
                    </div>
                </div>

                @if ((auth()->user()->referrals->referrals_total ?? 0) >= (int) setting('referrals_needed'))
                    <a href="{{ route('claim.referral-reward') }}" class="block text-center">
                        <button class="w-full rounded-lg px-4 py-3 text-sm font-semibold transition-all duration-200 hover:opacity-90"
                            style="background-color: var(--color-primary); color: var(--button-text-color);">
                            {{ __('Claim your referrals reward!') }}
                        </button>
                    </a>
                @else
                    <button disabled class="mt-2 w-full rounded-lg p-3 text-sm cursor-not-allowed opacity-60"
                        style="background-color: color-mix(in srgb, var(--color-text-muted) 20%, transparent); color: var(--color-text);">
                        {{ sprintf(__('You need to refer :needed more users, before being able to claim your reward', ['needed' => max(0, (int) setting('referrals_needed') - (auth()->user()->referrals->referrals_total ?? 0))]), auth()->user()->referrals->referrals_total ?? 0) }}
                    </button>
                @endif
            </div>
        </div>
    </div>

    <div class="col-span-12 lg:col-span-3 space-y-4">
        <div class="rounded-lg overflow-hidden" style="background-color: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
            <div class="flex items-center gap-3 p-3" style="background: linear-gradient(140deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 80%, black) 100%);">
                <span class="text-white font-bold text-lg">{{ __('Latest News') }}</span>
            </div>
            <div class="p-3">
                <div class="relative w-full swiper articles-slider" style="height: 215px;">
                    <div class="swiper-wrapper">
                        @forelse ($articles as $article)
                            <x-article-card :for-slider="true" :article="$article" />
                        @empty
                            <div class="swiper-slide flex items-center justify-center" style="color: var(--color-text-muted)">
                                {{ __('No articles yet.') }}
                            </div>
                        @endforelse
                    </div>
                    <div class="swiper-pagination" style="bottom: 0px !important; z-index: 0;"></div>
                </div>
            </div>
        </div>

        <div>
            <x-user.discord-widget />
        </div>
    </div>

    @push('javascript')
        <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);
                }
            });

            function copyCode() {
                let copyText = document.querySelector("#referral");
                copyText.select();
                document.execCommand("copy");

                Toast.fire({
                    icon: "success",
                    title: '{{ __('Your referral code has been copied to your clipboard!') }}'
                });
            }
        </script>
    @endpush
</x-app-layout>