You've already forked Atomcms-edit
root
c53a5a8a2c
- 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
208 lines
14 KiB
PHP
Executable File
208 lines
14 KiB
PHP
Executable File
<x-app-layout>
|
|
@push('title', __('Create account'))
|
|
|
|
<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
|
|
|
|
<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="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 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>
|
|
|
|
<div class="p-4">
|
|
<x-messages.flash-messages />
|
|
|
|
<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
|
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
@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
|
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<input type="hidden" name="look" x-model="selectedAvatarFigure" />
|
|
</div>
|
|
|
|
<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>
|
|
|
|
@error('terms')
|
|
<p class="text-xs italic" style="color: #ef4444;">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<input type="hidden" name="referral_code" value="{{ $referral_code }}">
|
|
|
|
@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
|
|
|
|
<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>
|
|
|
|
@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
|
|
|
|
<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>
|
|
</div>
|
|
</x-app-layout>
|