Atomcms-edit/resources/themes/atom/views/auth/register.blade.php

<x-app-layout>
 @push('title', __('Create account'))

 <div class="col-span-12">
 <x-content.content-card icon="hotel-icon" classes="flex flex-col gap-y-8">
 <x-slot:title>
 {{ __('Create your account!') }}
 </x-slot:title>

 <x-slot:under-title>
 {{ __('Create a free account, and be a part of a fun online world!') }}
 </x-slot:under-title>

 <div class="flex w-full justify-between">
 <div class="w-full !lg:w-[420px]">
 <form method="POST" action="{{ route('register') }}">
 @csrf

 <div>
 <div class="flex flex-col gap-y-2">
 <x-form.label for="username">
 {{ __('Username') }}

 <x-slot:info>
 {{ __('Your username is what you will have to use, when logging into :hotel. It is also what other users will know you as, so make sure you select a username that you like!', ['hotel' => setting('hotel_name')]) }}
 </x-slot:info>
 </x-form.label>
 </div>

 <x-form.input error-bag="register" name="username" type="text"
 value="{{ old('username') }}" placeholder="{{ __('Username') }}"
 :autofocus="true"/>
 </div>

 <!-- Email Address -->
 <div class="mt-4">
 <div class="flex flex-col gap-y-2">
 <x-form.label for="mail">
 {{ __('Email') }}

 <x-slot:info>
 {{ __('You will need your email if you were to ever forget your password, so make sure it is something that you remember.') }}
 </x-slot:info>
 </x-form.label>
 </div>

 <x-form.input error-bag="register" name="mail" type="email"
 value="{{ old('mail') }}" placeholder="{{ __('Enter your email') }}"/>
 </div>

 <!-- Password -->
 <div class="mt-4 bg-[#efefef] rounded-md p-3 flex flex-col gap-y-6 dark:bg-gray-900">
 <div>
 <x-form.label for="password">
 {{ __('Password') }}

 <x-slot:info>
 {{ __('Your password must contain atleast 8 characters. Make sure to use a unique & secure password.') }}
 </x-slot:info>
 </x-form.label>

 <x-form.input error-bag="register" name="password" type="password"
 placeholder="{{ __('Choose a secure password') }}"/>
 </div>
 <hr class="dark:border-gray-700">

 <!-- Confirm Password -->
 <div>
 <x-form.label for="password_confirmation">
 {{ __('Repeat Password') }}
 </x-form.label>

 <x-form.input error-bag="register" name="password_confirmation" type="password"
 placeholder="{{ __('Repeat your chosen password') }}"/>
 </div>
 </div>

 @if (setting('requires_beta_code'))
 <div class="mt-4">
 <div class="flex flex-col gap-y-2">
 <x-form.label for="mail">
 {{ __('Beta code') }}

 <x-slot:info>
 {{ __('Enter the beta code you have been provided with') }}
 </x-slot:info>
 </x-form.label>
 </div>

 <x-form.input error-bag="register" name="beta_code" type="text"
 value="{{ old('beta_code') }}"
 placeholder="{{ __('Enter your beta code') }}"/>
 </div>
 @endif

 <div class="mt-4">
 <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">
 {{ __('Choose your avatar') }}
 <span class="block text-xs font-normal text-gray-500 mt-0.5">{{ __('Select a starting avatar for your character') }}</span>
 </label>

 <div class="grid grid-cols-5 gap-2 mt-2">
 @php
 $femaleFigures = array_slice(array_filter(array_map('trim', explode(',', setting('register_female_figures', 'hr-100-45.hd-180-1.ch-215-62.lg-270-62.sh-290-62,hr-130-45.hd-180-2.ch-220-62.lg-270-62.sh-305-62,hr-140-45.hd-180-3.ch-225-62.lg-270-62.sh-310-62,hr-165-45.hd-180-1.ch-210-62.lg-270-62.sh-290-62,hr-190-45.hd-180-2.ch-215-62.lg-270-62.sh-305-62')))), 0, 5);
 $maleFigures = array_slice(array_filter(array_map('trim', explode(',', setting('register_male_figures', 'hr-100-61.hd-180-1.ch-210-66.lg-270-110.sh-305-62,hr-105-61.hd-190-2.ch-215-66.lg-280-110.sh-310-62,hr-110-61.hd-200-3.ch-220-66.lg-290-110.sh-320-62,hr-115-61.hd-185-1.ch-210-66.lg-275-110.sh-315-62,hr-120-61.hd-180-2.ch-205-66.lg-285-110.sh-305-62')))), 0, 5);
 $allFigures = array_merge($femaleFigures, $maleFigures);
 @endphp

 @foreach($allFigures as $index => $figure)
 <label class="cursor-pointer relative group">
 <input type="radio" name="look" value="{{ $figure }}"
 class="peer sr-only" {{ $index === 0 ? 'checked' : '' }}>
 <div class="p-1 rounded-lg border-2 border-gray-200 dark:border-gray-700 
 peer-checked:border-purple-500 peer-checked:bg-purple-50 
 dark:peer-checked:bg-purple-900/20 hover:border-gray-300 
 dark:hover:border-gray-600 transition-all duration-300
 peer-checked:scale-110 peer-checked:shadow-lg peer-checked:shadow-purple-500/30"
 onmouseover="this.querySelector('img').src='https://www.habbo.nl/habbo-imaging/avatarimage?figure={{ $figure }}&size=l&action=wav'"
 onmouseout="if(!this.previousElementSibling.checked) this.querySelector('img').src='https://www.habbo.nl/habbo-imaging/avatarimage?figure={{ $figure }}&size=l'">
 <img src="https://www.habbo.nl/habbo-imaging/avatarimage?figure={{ $figure }}&size=l"
 class="w-full h-auto transition-transform duration-300"
 alt="Avatar">
 </div>
 <span class="absolute -bottom-1 left-1/2 -translate-x-1/2 text-[8px] 
 bg-gray-900 dark:bg-gray-700 text-white px-1 rounded 
 opacity-0 group-hover:opacity-100 transition-opacity">
 {{ $index < 5 ? 'Vrouw' : 'Man' }}
 </span>
 </label>
 @endforeach
 </div>
 </div>

 <div class="mt-4 bg-[#efefef] rounded-md p-3 flex flex-col gap-y-1 dark:bg-gray-900">
 <div class="flex items-center gap-x-3">
 <input id="terms" type="checkbox" name="terms"
 class="mt-1 rounded ring-0 focus:ring-0">

 <a href="{{ route('help-center.rules.index') }}" target="_blank"
 class="mt-1 text-sm font-semibold text-gray-700 hover:text-gray-900 hover:underline dark:hover:text-gray-300 dark:text-gray-500">
 {{ __('I accept the :hotel terms & rules.', ['hotel' => setting('hotel_name')]) }}
 </a>
 </div>

 @error('terms')
 <p class="mt-1 text-xs italic text-red-500">
 {{ $message }}
 </p>
 @enderror
 </div>

 {{-- Used to determine the refer --}}
 <input type="hidden" name="referral_code" value="{{ $referral_code }}">

 @if (setting('google_recaptcha_enabled'))
 <div class="mt-4 g-recaptcha"
 data-sitekey="{{ config('habbo.site.recaptcha_site_key') }}"></div>
 @endif

 @if (setting('cloudflare_turnstile_enabled'))
 <x-turnstile />
 @endif

<div class="mt-4">
  <x-form.primary-button>
  {{ __('Create account') }}
  </x-form.primary-button>
  </div>

  @if(setting('social_login_google_enabled') == '1' || setting('social_login_discord_enabled') == '1' || setting('social_login_github_enabled') == '1')
  <div class="mt-4 pt-4 border-t" style="border-color: var(--border-color)">
   <p class="text-center text-sm mb-3" style="color: var(--color-text-muted)">{{ __('Or register with') }}</p>
   <div class="flex flex-col gap-2">
    @if(setting('social_login_google_enabled') == '1')
    <a href="{{ route('auth.google') }}" class="flex items-center justify-center gap-2 px-4 py-2 rounded-lg font-semibold" style="background: #4285F4; color: white">
     <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>
     {{ __('Register with Google') }}
    </a>
    @endif
    
    @if(setting('social_login_discord_enabled') == '1')
    <a href="{{ route('auth.discord') }}" class="flex items-center justify-center gap-2 px-4 py-2 rounded-lg font-semibold" style="background: #5865F2; color: white">
     <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.008.128c.354.183.684.404.97.645a.075.075 0 0 0 .04.106z"/></svg>
     {{ __('Register with Discord') }}
    </a>
    @endif
    
    @if(setting('social_login_github_enabled') == '1')
    <a href="{{ route('auth.github') }}" class="flex items-center justify-center gap-2 px-4 py-2 rounded-lg font-semibold" style="background: #333; color: white">
     <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
     {{ __('Register with GitHub') }}
    </a>
    @endif
   </div>
  </div>
  @endif
  </form>
 </div>

 <div class="hidden md:block relative w-full">
 <img class="opacity-50 absolute -right-3 -bottom-3" src="{{ asset('/assets/images/hotel.png') }}"
 alt="">
 </div>
 </div>
 </x-content.content-card>
 </div>
</x-app-layout>