You've already forked Atomcms-edit
Complete Hubbly theme conversion: all pages rewritten with CSS variable theming
- Converted all views from Dusk components (x-content.content-card, x-form.*) to inline Hubbly style - All pages use consistent card pattern: rounded-lg, gradient headers, color-mix borders - Added Hubbly-style homepage with 2-column layout, login card, swiper news carousel - Rewrote navigation with Alpine.js dropdowns, CSS variable colors, Hubbly assets - Updated profile page with Hubbly cards, fixed data bugs (friend/guild relationships) - Rewrote register page to match Hubbly layout: banner header, avatar preview with Frank GIF, 2-column form, avatar carousel selector, border-4 inputs - Rewrote login, settings, help center, radio, applications, utility pages - All colors use CSS variables controlled by Filament theme editor - Added Hubbly assets: banner, Frank GIF, navigation icons, online badge - Removed all dependencies on x-content.* and x-form.* components
This commit is contained in:
root
@@ -1,59 +1,68 @@
|
||||
<x-app-layout>
|
||||
@push('title', __('Create account'))
|
||||
@push('title', __('Login'))
|
||||
|
||||
<!-- Validation Errors -->
|
||||
<x-messages.flash-messages />
|
||||
<div class="col-span-12 flex justify-center">
|
||||
<div class="mx-auto max-w-md w-full 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="px-6 py-8 text-center"
|
||||
style="background: linear-gradient(140deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 80%, black) 100%);">
|
||||
<h2 class="text-xl font-bold text-white">{{ __('Welcome back!') }}</h2>
|
||||
<p class="text-sm mt-1" style="color: color-mix(in srgb, white 70%, transparent);">
|
||||
{{ __('Login to :hotel', ['hotel' => setting('hotel_name')]) }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12">
|
||||
<div class="lg:px-[250px]">
|
||||
<x-content.content-card icon="hotel-icon" classes="flex flex-col">
|
||||
<x-slot:title>
|
||||
{{ __('Login to :hotel', ['hotel' => setting('hotel_name')]) }}
|
||||
</x-slot:title>
|
||||
<div class="p-6">
|
||||
<x-messages.flash-messages />
|
||||
|
||||
<x-slot:under-title>
|
||||
{{ __('Login to :hotel and take part in the most wonderful online world!', ['hotel' => setting('hotel_name')]) }}
|
||||
</x-slot:under-title>
|
||||
<form method="POST" action="{{ route('login') }}">
|
||||
@csrf
|
||||
|
||||
<form method="POST" action="{{ route('login') }}">
|
||||
@csrf
|
||||
<div>
|
||||
<label for="username" style="color: var(--color-text);">
|
||||
{{ __('Username') }}
|
||||
</label>
|
||||
<input name="username" type="text" value="{{ old('username') }}"
|
||||
placeholder="{{ __('Username') }}" autofocus
|
||||
class="w-full rounded-lg px-3 py-2 text-sm border-2 focus:ring-0"
|
||||
style="background-color: var(--color-background); color: var(--color-text); border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent);" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="flex flex-col gap-y-2">
|
||||
<x-form.label for="username">
|
||||
{{ __('Username') }}
|
||||
</x-form.label>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<label for="password" style="color: var(--color-text);">
|
||||
{{ __('Password') }}
|
||||
</label>
|
||||
<input name="password" type="password"
|
||||
placeholder="{{ __('Password') }}"
|
||||
class="w-full rounded-lg px-3 py-2 text-sm border-2 focus:ring-0"
|
||||
style="background-color: var(--color-background); color: var(--color-text); border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent);" />
|
||||
</div>
|
||||
|
||||
<x-form.input error-bag="register" name="username" type="text" value="{{ old('username') }}"
|
||||
placeholder="{{ __('Username') }}" :autofocus="true" />
|
||||
</div>
|
||||
@if (setting('google_recaptcha_enabled'))
|
||||
<div class="mt-4 g-recaptcha" data-sitekey="{{ config('habbo.site.recaptcha_site_key') }}"></div>
|
||||
@endif
|
||||
|
||||
<div class="mt-4">
|
||||
<x-form.label for="password">
|
||||
{{ __('Password') }}
|
||||
</x-form.label>
|
||||
@if (setting('cloudflare_turnstile_enabled'))
|
||||
<div class="mt-4">
|
||||
<x-turnstile />
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<x-form.input error-bag="register" name="password" type="password"
|
||||
placeholder="{{ __('Password') }}" />
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
<button type="submit" class="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);">
|
||||
{{ __('Login') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@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>
|
||||
{{ __('Login') }}
|
||||
</x-form.primary-button>
|
||||
</div>
|
||||
</form>
|
||||
</x-content.content-card>
|
||||
</div>
|
||||
<div class="mt-4 text-center">
|
||||
<a href="{{ route('register') }}"
|
||||
class="text-sm font-semibold transition-colors duration-200 hover:underline"
|
||||
style="color: var(--color-primary);">
|
||||
{{ __("Don't have an account? Join now!") }}
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
||||
@@ -6,48 +6,44 @@
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 flex flex-col gap-y-3 md:col-span-9">
|
||||
<x-content.content-card icon="hotel-icon" classes="border dark:border-gray-900">
|
||||
<x-slot:title>
|
||||
{{ __('Confirm your password') }}
|
||||
</x-slot:title>
|
||||
<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="relative w-full h-12" style="background: linear-gradient(140deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 80%, black) 100%);">
|
||||
<div class="flex items-center h-full px-4 gap-3">
|
||||
<h2 class="text-white font-bold text-lg">{{ __('Confirm your password') }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<p class="text-sm mb-3" style="color: var(--color-text-muted);">{{ __('You must confirm your password to continue') }}</p>
|
||||
|
||||
<x-slot:under-title>
|
||||
{{ __('You must confirm your password to continue') }}
|
||||
</x-slot:under-title>
|
||||
<form method="POST" action="/user/confirm-password">
|
||||
@csrf
|
||||
|
||||
<form method="POST" action="/user/confirm-password">
|
||||
@csrf
|
||||
<div class="flex flex-col gap-y-2 mb-3">
|
||||
<label class="block text-sm font-medium" style="color: var(--color-text);">
|
||||
{{ __('Password') }}
|
||||
<span class="block text-xs font-normal" style="color: var(--color-text-muted);">{{ __('You must confirm your current password before being able to toggle 2FA.') }}</span>
|
||||
</label>
|
||||
<input name="password" type="password" placeholder="{{ __('Enter your current password') }}"
|
||||
class="w-full rounded-lg px-3 py-2 text-sm border-2 focus:ring-0"
|
||||
style="background-color: var(--color-background); color: var(--color-text); border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent);" />
|
||||
</div>
|
||||
|
||||
<!-- Password -->
|
||||
<div class="flex flex-col gap-y-2 mb-3">
|
||||
<div>
|
||||
<x-form.label for="password">
|
||||
{{ __('Password') }}
|
||||
@if (setting('google_recaptcha_enabled'))
|
||||
<div class="mt-4 g-recaptcha" data-sitekey="{{ config('habbo.site.recaptcha_site_key') }}"></div>
|
||||
@endif
|
||||
|
||||
<x-slot:info>
|
||||
{{ __('You must confirm your current password before being able to toggle 2FA.') }}
|
||||
</x-slot:info>
|
||||
</x-form.label>
|
||||
@if (setting('cloudflare_turnstile_enabled'))
|
||||
<x-turnstile />
|
||||
@endif
|
||||
|
||||
<x-form.input name="password" type="password"
|
||||
placeholder="{{ __('Enter your current password') }}" />
|
||||
<div class="mt-4">
|
||||
<button type="submit" class="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);">
|
||||
{{ __('Confirm password') }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@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>
|
||||
{{ __('Confirm password') }}
|
||||
</x-form.primary-button>
|
||||
</div>
|
||||
</form>
|
||||
</x-content.content-card>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
||||
@@ -2,39 +2,36 @@
|
||||
@push('title', __('Forgot password'))
|
||||
|
||||
<div class="col-span-12">
|
||||
<x-content.content-card icon="hotel-icon" classes="max-w-[640px] mx-auto">
|
||||
<x-slot:title>
|
||||
{{ __('Did you forget your password?') }}
|
||||
</x-slot:title>
|
||||
<div class="max-w-[640px] mx-auto 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="relative w-full h-12" style="background: linear-gradient(140deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 80%, black) 100%);">
|
||||
<div class="flex items-center h-full px-4 gap-3">
|
||||
<h2 class="text-white font-bold text-lg">{{ __('Did you forget your password?') }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<p class="text-sm mb-3" style="color: var(--color-text-muted);">{{ __('Forgot your password? No problem. Just let us know your email address and we will email you a password reset link that will allow you to choose a new one.') }}</p>
|
||||
|
||||
<x-slot:under-title>
|
||||
{{ __('Forgot your password? No problem. Just let us know your email address and we will email you a password reset link that will allow you to choose a new one.') }}
|
||||
</x-slot:under-title>
|
||||
<form method="POST" action="{{ route('forgot.password.post') }}">
|
||||
@csrf
|
||||
|
||||
<form method="POST" action="{{ route('forgot.password.post') }}">
|
||||
@csrf
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1" style="color: var(--color-text);">
|
||||
{{ __('Email') }}
|
||||
<span class="block text-xs font-normal" style="color: var(--color-text-muted);">{{ __('Enter your email') }}</span>
|
||||
</label>
|
||||
<input name="mail" type="email" placeholder="{{ __('Enter your email') }}"
|
||||
class="w-full rounded-lg px-3 py-2 text-sm border-2 focus:ring-0"
|
||||
style="background-color: var(--color-background); color: var(--color-text); border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent);" />
|
||||
</div>
|
||||
|
||||
<!-- Email Address -->
|
||||
<div>
|
||||
<div class="flex flex-col gap-y-2">
|
||||
<x-form.label for="mail">
|
||||
{{ __('Email') }}
|
||||
|
||||
<x-slot:info>
|
||||
{{ __('Enter your email') }}
|
||||
</x-slot:info>
|
||||
</x-form.label>
|
||||
<div class="mt-4">
|
||||
<button type="submit" class="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);">
|
||||
{{ __('Email Password Reset Link') }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-form.input name="mail" type="email" placeholder="{{ __('Enter your email') }}"/>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<x-form.primary-button>
|
||||
{{ __('Email Password Reset Link') }}
|
||||
</x-form.primary-button>
|
||||
</div>
|
||||
</form>
|
||||
</x-content.content-card>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
||||
@@ -2,49 +2,47 @@
|
||||
@push('title', __('Reset Password'))
|
||||
|
||||
<div class="col-span-12">
|
||||
<x-content.content-card icon="hotel-icon" classes="max-w-[640px] mx-auto">
|
||||
<x-slot:title>
|
||||
{{ __('Reset Password') }}
|
||||
</x-slot:title>
|
||||
<div class="max-w-[640px] mx-auto 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="relative w-full h-12" style="background: linear-gradient(140deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 80%, black) 100%);">
|
||||
<div class="flex items-center h-full px-4 gap-3">
|
||||
<h2 class="text-white font-bold text-lg">{{ __('Reset Password') }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<p class="text-sm mb-3" style="color: var(--color-text-muted);">{{ __('Choose a new password for your Account.') }}</p>
|
||||
|
||||
<x-slot:under-title>
|
||||
{{ __('Choose a new password for your Account.') }}
|
||||
</x-slot:under-title>
|
||||
<form method="POST" action="{{ route('reset.password.post', $token) }}">
|
||||
@csrf
|
||||
|
||||
<form method="POST" action="{{ route('reset.password.post', $token) }}">
|
||||
@csrf
|
||||
<div class="flex flex-col gap-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1" style="color: var(--color-text);">
|
||||
{{ __('Password') }}
|
||||
<span class="block text-xs font-normal" style="color: var(--color-text-muted);">{{ __('Your password must contain atleast 8 characters. Make sure to use a unique & secure password.') }}</span>
|
||||
</label>
|
||||
<input name="password" type="password" placeholder="{{ __('Choose a secure password') }}"
|
||||
class="w-full rounded-lg px-3 py-2 text-sm border-2 focus:ring-0"
|
||||
style="background-color: var(--color-background); color: var(--color-text); border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent);" />
|
||||
</div>
|
||||
|
||||
<!-- Password -->
|
||||
<div class="bg-[#efefef] rounded-md p-3 flex flex-col gap-y-6 dark:bg-gray-900">
|
||||
<div>
|
||||
<x-form.label for="password">
|
||||
{{ __('Password') }}
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1" style="color: var(--color-text);">
|
||||
{{ __('Repeat Password') }}
|
||||
</label>
|
||||
<input name="password_confirmation" type="password" placeholder="{{ __('Repeat your chosen password') }}"
|
||||
class="w-full rounded-lg px-3 py-2 text-sm border-2 focus:ring-0"
|
||||
style="background-color: var(--color-background); color: var(--color-text); border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent);" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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 name="password" type="password" placeholder="{{ __('Choose a secure password') }}"/>
|
||||
<div class="mt-4">
|
||||
<button type="submit" class="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);">
|
||||
{{ __('Reset Password') }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="dark:border-gray-700">
|
||||
|
||||
<!-- Confirm Password -->
|
||||
<div>
|
||||
<x-form.label for="password_confirmation">
|
||||
{{ __('Repeat Password') }}
|
||||
</x-form.label>
|
||||
|
||||
<x-form.input name="password_confirmation" type="password" placeholder="{{ __('Repeat your chosen password') }}"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<x-form.primary-button>
|
||||
{{ __('Reset Password') }}
|
||||
</x-form.primary-button>
|
||||
</div>
|
||||
</form>
|
||||
</x-content.content-card>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
||||
@@ -1,207 +1,207 @@
|
||||
<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>
|
||||
<div class="col-span-12 flex justify-center">
|
||||
@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);
|
||||
$figuresJson = json_encode($allFigures);
|
||||
@endphp
|
||||
|
||||
<x-slot:under-title>
|
||||
{{ __('Create a free account, and be a part of a fun online world!') }}
|
||||
</x-slot:under-title>
|
||||
<div x-data="{
|
||||
avatarFigures: {{ $figuresJson }},
|
||||
selectedAvatarIndex: 0,
|
||||
currentViewIndex: 0,
|
||||
perView: 3,
|
||||
cardGap: 12,
|
||||
get totalCards() { return this.avatarFigures.length },
|
||||
get cardWidth() { return 120 },
|
||||
get cardHeight() { return 160 },
|
||||
get imgWidth() { return 100 },
|
||||
get imgHeight() { return 140 },
|
||||
get maxViewIndex() { return Math.max(0, this.totalCards - this.perView) },
|
||||
get selectedAvatarFigure() { return this.avatarFigures[this.selectedAvatarIndex] },
|
||||
selectAvatar(index) { this.selectedAvatarIndex = index },
|
||||
nextView() { if(this.currentViewIndex < this.maxViewIndex) this.currentViewIndex++ },
|
||||
previousView() { if(this.currentViewIndex > 0) this.currentViewIndex-- }
|
||||
}" class="mx-auto w-full" style="max-width: 800px;">
|
||||
<div class="border rounded-lg overflow-hidden" style="background-color: var(--color-surface); border-color: color-mix(in srgb, var(--color-text-muted) 30%, transparent);">
|
||||
|
||||
<div class="flex w-full justify-between">
|
||||
<div class="w-full !lg:w-[420px]">
|
||||
<form method="POST" action="{{ route('register') }}">
|
||||
@csrf
|
||||
<div class="relative overflow-hidden bg-center bg-cover" style="background-image: url('/assets/images/mybobba_banner.png'); height: 180px; border-top-left-radius: 6px; border-top-right-radius: 6px; max-height: 150px;">
|
||||
<div class="absolute inset-0 z-10" style="background: rgba(0,0,0,0.3);"></div>
|
||||
|
||||
<div>
|
||||
<div class="flex flex-col gap-y-2">
|
||||
<x-form.label for="username">
|
||||
{{ __('Username') }}
|
||||
<div class="relative flex items-center justify-center w-full h-full z-20">
|
||||
<div class="user-wrapper" style="width: 0; height: 0; position: relative;">
|
||||
<div class="absolute rounded-full overflow-hidden" style="width: 140px; height: 140px; margin-top: 50px; transform: translate(-50%, -50%); z-index: -1;">
|
||||
<div class="w-full h-full" style="background: black; filter: blur(8px); transform: scale(1.2); background-position: center; opacity: 0.6;"></div>
|
||||
</div>
|
||||
<img src="https://hubbly.pw/assets/images/FrankwithBag.gif" class="absolute" style="margin-top: 50px; transform: translate(-50%, -50%); z-index: 10; width: auto; height: 100px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<div class="p-4">
|
||||
<x-messages.flash-messages />
|
||||
|
||||
<x-form.input error-bag="register" name="username" type="text"
|
||||
value="{{ old('username') }}" placeholder="{{ __('Username') }}"
|
||||
:autofocus="true"/>
|
||||
</div>
|
||||
<form method="POST" action="{{ route('register') }}" class="flex flex-col gap-6 p-3 rounded-lg" style="background-color: color-mix(in srgb, var(--color-background) 50%, var(--color-surface));">
|
||||
@csrf
|
||||
|
||||
<!-- Email Address -->
|
||||
<div class="mt-4">
|
||||
<div class="flex flex-col gap-y-2">
|
||||
<x-form.label for="mail">
|
||||
{{ __('Email') }}
|
||||
<div class="w-full flex flex-col md:flex-row gap-4">
|
||||
<div class="w-full md:w-1/2">
|
||||
<fieldset class="flex flex-col w-full gap-1">
|
||||
<label for="username" class="block font-semibold text-sm" style="color: var(--color-text);">{{ __('Username') }}</label>
|
||||
<input name="username" type="text" value="{{ old('username') }}" placeholder="{{ __('Username') }}" autofocus
|
||||
class="focus:ring-0 border-4 rounded w-full text-sm px-3 py-2 mt-1"
|
||||
style="background-color: var(--color-background); color: var(--color-text); border-color: color-mix(in srgb, var(--color-text-muted) 25%, transparent);">
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="w-full md:w-1/2">
|
||||
<fieldset class="flex flex-col w-full gap-1">
|
||||
<label for="mail" class="block font-semibold text-sm" style="color: var(--color-text);">{{ __('Email') }}</label>
|
||||
<input name="mail" type="email" value="{{ old('mail') }}" placeholder="{{ __('Enter your email') }}"
|
||||
class="focus:ring-0 border-4 rounded w-full text-sm px-3 py-2 mt-1"
|
||||
style="background-color: var(--color-background); color: var(--color-text); border-color: color-mix(in srgb, var(--color-text-muted) 25%, transparent);">
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<div class="w-full flex flex-col md:flex-row gap-4">
|
||||
<div class="w-full md:w-1/2">
|
||||
<fieldset class="flex flex-col w-full gap-1">
|
||||
<label for="password" class="block font-semibold text-sm" style="color: var(--color-text);">{{ __('Password') }}</label>
|
||||
<input name="password" type="password" placeholder="{{ __('Choose a secure password') }}"
|
||||
class="focus:ring-0 border-4 rounded w-full text-sm px-3 py-2 mt-1"
|
||||
style="background-color: var(--color-background); color: var(--color-text); border-color: color-mix(in srgb, var(--color-text-muted) 25%, transparent);">
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="w-full md:w-1/2">
|
||||
<fieldset class="flex flex-col w-full gap-1">
|
||||
<label for="password_confirmation" class="block font-semibold text-sm" style="color: var(--color-text);">{{ __('Repeat Password') }}</label>
|
||||
<input name="password_confirmation" type="password" placeholder="{{ __('Repeat your chosen password') }}"
|
||||
class="focus:ring-0 border-4 rounded w-full text-sm px-3 py-2 mt-1"
|
||||
style="background-color: var(--color-background); color: var(--color-text); border-color: color-mix(in srgb, var(--color-text-muted) 25%, transparent);">
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-form.input error-bag="register" name="mail" type="email"
|
||||
value="{{ old('mail') }}" placeholder="{{ __('Enter your email') }}"/>
|
||||
</div>
|
||||
@if (setting('requires_beta_code'))
|
||||
<div class="w-full">
|
||||
<fieldset class="flex flex-col w-full gap-1">
|
||||
<label for="beta_code" class="block font-semibold text-sm" style="color: var(--color-text);">{{ __('Beta code') }}</label>
|
||||
<input name="beta_code" type="text" value="{{ old('beta_code') }}" placeholder="{{ __('Enter your beta code') }}"
|
||||
class="focus:ring-0 border-4 rounded w-full text-sm px-3 py-2 mt-1"
|
||||
style="background-color: var(--color-background); color: var(--color-text); border-color: color-mix(in srgb, var(--color-text-muted) 25%, transparent);">
|
||||
</fieldset>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- 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') }}
|
||||
<div class="w-full rounded-md p-4" style="background-color: color-mix(in srgb, var(--color-background) 50%, var(--color-surface)); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
<legend class="text-sm font-semibold mb-3" style="color: var(--color-text);">{{ __('Select Your Outfit') }}</legend>
|
||||
|
||||
<x-slot:info>
|
||||
{{ __('Your password must contain atleast 8 characters. Make sure to use a unique & secure password.') }}
|
||||
</x-slot:info>
|
||||
</x-form.label>
|
||||
<div class="w-full flex items-center justify-between gap-4">
|
||||
<button type="button" x-on:click="previousView()"
|
||||
class="w-10 h-10 rounded-full flex items-center justify-center bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors shrink-0"
|
||||
:disabled="currentViewIndex === 0"
|
||||
:class="{ 'opacity-50 cursor-not-allowed': currentViewIndex === 0 }">
|
||||
<svg class="w-5 h-5 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
|
||||
</button>
|
||||
|
||||
<x-form.input error-bag="register" name="password" type="password"
|
||||
placeholder="{{ __('Choose a secure password') }}"/>
|
||||
</div>
|
||||
<hr class="dark:border-gray-700">
|
||||
<div class="overflow-hidden flex-1">
|
||||
<div class="flex transition-transform duration-300 ease-in-out"
|
||||
:style="`transform: translateX(-${currentViewIndex * (cardWidth + cardGap)}px)`">
|
||||
<template x-for="(figure, index) in avatarFigures" :key="index">
|
||||
<div class="rounded-lg shadow-lg border-2 overflow-hidden cursor-pointer transition-all duration-200 flex items-center justify-center shrink-0 bg-gray-200 dark:bg-gray-700"
|
||||
:style="`width: ${cardWidth}px; height: ${cardHeight}px; ${index === 0 ? '' : 'margin-left: ' + cardGap + 'px;'}`"
|
||||
:class="selectedAvatarIndex === index ? 'border-yellow-500' : 'border-gray-400 opacity-70'"
|
||||
x-on:click="selectAvatar(index)">
|
||||
<img :src="'{{ setting('avatar_imager') }}' + figure + '&direction=3&gesture=nrm&action=&headonly=false'"
|
||||
class="block object-none transition-transform duration-200" loading="lazy"
|
||||
:style="`width: ${imgWidth}px; height: ${imgHeight}px; margin-top: -15px;`"
|
||||
:class="selectedAvatarIndex === index ? 'scale-110' : 'scale-100'"
|
||||
:alt="'Avatar ' + (index + 1)" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Confirm Password -->
|
||||
<div>
|
||||
<x-form.label for="password_confirmation">
|
||||
{{ __('Repeat Password') }}
|
||||
</x-form.label>
|
||||
<button type="button" x-on:click="nextView()"
|
||||
class="w-10 h-10 rounded-full flex items-center justify-center bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors shrink-0"
|
||||
:disabled="currentViewIndex >= maxViewIndex"
|
||||
:class="{ 'opacity-50 cursor-not-allowed': currentViewIndex >= maxViewIndex }">
|
||||
<svg class="w-5 h-5 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<x-form.input error-bag="register" name="password_confirmation" type="password"
|
||||
placeholder="{{ __('Repeat your chosen password') }}"/>
|
||||
</div>
|
||||
</div>
|
||||
<input type="hidden" name="look" x-model="selectedAvatarFigure" />
|
||||
</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') }}
|
||||
<div class="rounded-md p-3 flex flex-col gap-3" style="background-color: color-mix(in srgb, var(--color-background) 50%, var(--color-surface));">
|
||||
<fieldset class="flex flex-wrap items-center w-full gap-3 text-sm">
|
||||
<input id="terms" name="terms" type="checkbox" class="w-4 h-4 border-gray-300 rounded focus:ring-0"
|
||||
style="border-color: color-mix(in srgb, var(--color-text-muted) 30%, transparent);">
|
||||
<label for="terms" class="font-semibold" style="color: var(--color-text);">
|
||||
<a href="{{ route('help-center.rules.index') }}" target="_blank" class="hover:underline" style="color: var(--color-text);">
|
||||
{{ __('I am 18+ and accept the :hotel terms & rules.', ['hotel' => setting('hotel_name')]) }}
|
||||
</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
<x-slot:info>
|
||||
{{ __('Enter the beta code you have been provided with') }}
|
||||
</x-slot:info>
|
||||
</x-form.label>
|
||||
</div>
|
||||
@error('terms')
|
||||
<p class="text-xs italic" style="color: #ef4444;">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<x-form.input error-bag="register" name="beta_code" type="text"
|
||||
value="{{ old('beta_code') }}"
|
||||
placeholder="{{ __('Enter your beta code') }}"/>
|
||||
</div>
|
||||
@endif
|
||||
<input type="hidden" name="referral_code" value="{{ $referral_code }}">
|
||||
|
||||
<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>
|
||||
@if (setting('google_recaptcha_enabled'))
|
||||
<div class="g-recaptcha" data-sitekey="{{ config('habbo.site.recaptcha_site_key') }}"></div>
|
||||
@endif
|
||||
|
||||
<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
|
||||
@if (setting('cloudflare_turnstile_enabled'))
|
||||
<x-turnstile />
|
||||
@endif
|
||||
|
||||
@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>
|
||||
<button type="submit"
|
||||
class="w-full rounded p-2 text-white font-semibold transition-all duration-200 text-base"
|
||||
style="background-color: #27a44d; border: 2px solid #34c661;">
|
||||
{{ __('Create account') }}
|
||||
</button>
|
||||
|
||||
<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">
|
||||
@if(setting('social_login_google_enabled') == '1' || setting('social_login_discord_enabled') == '1' || setting('social_login_github_enabled') == '1')
|
||||
<div class="pt-4 border-t" style="border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
<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
|
||||
|
||||
<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 class="text-center">
|
||||
<a href="{{ route('login') }}" class="text-sm font-semibold hover:underline" style="color: var(--color-primary);">
|
||||
{{ __('Already have an account? Login!') }}
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
@@ -1,57 +1,67 @@
|
||||
<x-app-layout>
|
||||
@push('title', __('Two-Factor Authentication'))
|
||||
|
||||
<div class="col-span-12 flex flex-col gap-y-3 md:col-span-9 md:col-start-4">
|
||||
<x-content.content-card icon="hotel-icon" classes="border dark:border-[var(--color-text-muted)]">
|
||||
<x-slot:title>
|
||||
{{ __('Two-Factor Authentication') }}
|
||||
</x-slot:title>
|
||||
<x-slot:under-title>
|
||||
{{ __('Please enter your two-factor authentication code or one of your recovery codes.') }}
|
||||
</x-slot:under-title>
|
||||
<div class="col-span-12 flex justify-center">
|
||||
<div class="mx-auto max-w-md w-full 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="px-6 py-8 text-center"
|
||||
style="background: linear-gradient(140deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 80%, black) 100%);">
|
||||
<h2 class="text-xl font-bold text-white">{{ __('Two-Factor Authentication') }}</h2>
|
||||
<p class="text-sm mt-1" style="color: color-mix(in srgb, white 70%, transparent);">
|
||||
{{ __('Please enter your two-factor authentication code or one of your recovery codes.') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@if (session('error'))
|
||||
<div class="alert alert-danger">
|
||||
{{ session('error') }}
|
||||
<div class="p-6">
|
||||
<x-messages.flash-messages />
|
||||
|
||||
@if (session('error'))
|
||||
<div class="mb-4 p-3 rounded-lg text-sm font-medium"
|
||||
style="background-color: color-mix(in srgb, var(--button-danger-color, #ef4444) 15%, transparent); color: var(--button-danger-color, #ef4444);">
|
||||
{{ session('error') }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<form method="POST" action="{{ route('two-factor.login') }}">
|
||||
@csrf
|
||||
|
||||
<div>
|
||||
<label for="code" style="color: var(--color-text);">
|
||||
{{ __('Code') }}
|
||||
<span class="block text-xs font-normal" style="color: var(--color-text-muted);">{{ __('Enter the two-factor authentication code from your authenticator app.') }}</span>
|
||||
</label>
|
||||
<input name="code" type="text" placeholder="{{ __('Code') }}"
|
||||
class="w-full rounded-lg px-3 py-2 text-sm border-2 focus:ring-0"
|
||||
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="mt-4">
|
||||
<label for="recovery_code" style="color: var(--color-text);">
|
||||
{{ __('Recovery Code') }}
|
||||
<span class="block text-xs font-normal" style="color: var(--color-text-muted);">{{ __('Enter one of your recovery codes if you cannot access your authenticator app.') }}</span>
|
||||
</label>
|
||||
<input name="recovery_code" type="text" placeholder="{{ __('Recovery Code') }}"
|
||||
class="w-full rounded-lg px-3 py-2 text-sm border-2 focus:ring-0"
|
||||
style="background-color: var(--color-background); color: var(--color-text); border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent);" />
|
||||
</div>
|
||||
|
||||
@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'))
|
||||
<div class="mt-4">
|
||||
<x-turnstile />
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="mt-6">
|
||||
<button type="submit" class="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);">
|
||||
{{ __('Verify') }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<form method="POST" action="{{ route('two-factor.login') }}">
|
||||
@csrf
|
||||
|
||||
<!-- Two-Factor Code -->
|
||||
<div>
|
||||
<x-form.label for="code">
|
||||
{{ __('Code') }}
|
||||
<x-slot:info>
|
||||
{{ __('Enter the two-factor authentication code from your authenticator app.') }}
|
||||
</x-slot:info>
|
||||
</x-form.label>
|
||||
<x-form.input id="code" name="code" type="text" placeholder="{{ __('Code') }}" class="mb-3" />
|
||||
</div>
|
||||
|
||||
<!-- Recovery Code -->
|
||||
<div class="mt-4">
|
||||
<x-form.label for="recovery_code">
|
||||
{{ __('Recovery Code') }}
|
||||
<x-slot:info>
|
||||
{{ __('Enter one of your recovery codes if you cannot access your authenticator app.') }}
|
||||
</x-slot:info>
|
||||
</x-form.label>
|
||||
<x-form.input id="recovery_code" name="recovery_code" type="text" placeholder="{{ __('Recovery Code') }}" class="mb-3" />
|
||||
</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.secondary-button type="submit" class="mt-4">
|
||||
{{ __('Verify') }}
|
||||
</x-form.secondary-button>
|
||||
</form>
|
||||
</x-content.content-card>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
</x-app-layout>
|
||||
|
||||
@@ -1,36 +1,48 @@
|
||||
<x-guest-layout>
|
||||
<div class="flex min-h-screen flex-col items-center bg-[var(--color-surface)] pt-6 sm:justify-center sm:pt-0">
|
||||
<div class="mt-6 w-full overflow-hidden bg-white px-6 py-4 shadow-md sm:max-w-md sm:rounded-lg">
|
||||
<div class="mb-4 text-sm text-[var(--color-text-muted)]">
|
||||
{{ __('Thanks for signing up! Before getting started, could you verify your email address by clicking on the link we just emailed to you? If you did not receive the email, we will gladly send you another.') }}
|
||||
</div>
|
||||
<div class="flex min-h-screen flex-col items-center justify-center px-4"
|
||||
style="background-color: var(--color-background);">
|
||||
<div class="mx-auto max-w-md w-full 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="px-6 py-8 text-center"
|
||||
style="background: linear-gradient(140deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 80%, black) 100%);">
|
||||
<h2 class="text-xl font-bold text-white">{{ __('Verify Email') }}</h2>
|
||||
<p class="text-sm mt-1" style="color: color-mix(in srgb, white 70%, transparent);">
|
||||
{{ __('Verify your email address to get started.') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@if (session('status') == 'verification-link-sent')
|
||||
<div class="mb-4 text-sm font-medium text-green-600">
|
||||
{{ __('A new verification link has been sent to the email address you provided during registration.') }}
|
||||
</div>
|
||||
@endif
|
||||
<div class="p-6">
|
||||
<div class="mb-4 text-sm" style="color: var(--color-text-muted);">
|
||||
{{ __('Thanks for signing up! Before getting started, could you verify your email address by clicking on the link we just emailed to you? If you did not receive the email, we will gladly send you another.') }}
|
||||
</div>
|
||||
|
||||
<div class="mt-4 flex items-center justify-between">
|
||||
<form method="POST" action="{{ route('verification.send') }}">
|
||||
@csrf
|
||||
@if (session('status') == 'verification-link-sent')
|
||||
<div class="mb-4 p-3 rounded-lg text-sm font-medium"
|
||||
style="background-color: color-mix(in srgb, var(--color-accent, #10b981) 15%, transparent); color: var(--color-accent, #10b981);">
|
||||
{{ __('A new verification link has been sent to the email address you provided during registration.') }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div>
|
||||
<button type="submit"
|
||||
class="ml-4 inline-flex items-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-xs font-semibold uppercase tracking-widest text-white ring-gray-300 transition duration-150 ease-in-out hover:bg-gray-700 focus:border-gray-900 focus:outline-hidden focus:ring-3 active:bg-gray-900 disabled:opacity-25">
|
||||
{{ __('Resend Verification Email') }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="mt-6 flex items-center justify-between">
|
||||
<form method="POST" action="{{ route('verification.send') }}">
|
||||
@csrf
|
||||
<button type="submit"
|
||||
class="inline-flex items-center rounded-lg border-2 px-4 py-2 text-sm font-semibold transition-all duration-200"
|
||||
style="background-color: var(--color-primary); color: var(--button-text-color); border-color: color-mix(in srgb, var(--color-primary) 80%, black);">
|
||||
{{ __('Resend Verification Email') }}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<form method="POST" action="{{ route('logout') }}">
|
||||
@csrf
|
||||
|
||||
<button type="submit" class="text-sm text-[var(--color-text-muted)] underline hover:text-[var(--color-text)]">
|
||||
{{ __('Log Out') }}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<form method="POST" action="{{ route('logout') }}">
|
||||
@csrf
|
||||
<button type="submit"
|
||||
class="text-sm font-semibold underline transition-colors duration-200 hover:no-underline"
|
||||
style="color: var(--color-text-muted);">
|
||||
{{ __('Log Out') }}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-guest-layout>
|
||||
|
||||
Reference in New Issue
Block a user