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
@@ -2,155 +2,180 @@
|
||||
@push('title', __('Shop'))
|
||||
|
||||
<div class="col-span-12">
|
||||
<x-modals.modal-wrapper>
|
||||
<div class="w-full py-2 px-4 text-center rounded" style="background-color: var(--color-primary); color: var(--button-text-color);">
|
||||
{{ __('Please make sure to read our shop') }}
|
||||
<button class="underline font-bold" style="color: var(--button-text-color);" x-on:click="open = true">{{ __('Terms & Conditions') }}</button>
|
||||
{{ __('before making a purchase') }}
|
||||
<x-modals.modal-wrapper>
|
||||
<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">
|
||||
<div class="w-8 h-8 rounded-full flex items-center justify-center text-lg shadow-lg" style="background-color: color-mix(in srgb, var(--color-primary) 30%, transparent);">
|
||||
📜
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-white font-semibold text-sm">{{ __('Please make sure to read our shop') }}
|
||||
<button class="underline font-bold text-white" x-on:click="open = true">{{ __('Terms & Conditions') }}</button>
|
||||
{{ __('before making a purchase') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-modals.regular-modal>
|
||||
<x-slot name="title">
|
||||
<h2 class="text-2xl">
|
||||
{{ __('Shop Terms & Conditions') }}
|
||||
</h2>
|
||||
</x-slot>
|
||||
|
||||
<div class="space-y-3 p-2">
|
||||
<p>
|
||||
{{ __('Here at :hotel Hotel we are accepting donations to keep the hotel up & running and as a thank you, you will in return receive in-game goods.', ['hotel' => setting('hotel_name')]) }}
|
||||
</p>
|
||||
|
||||
<div class="flex flex-col gap-y-2 !mt-6">
|
||||
<p class="font-semibold">{{ __('Why are donations important?') }}</p>
|
||||
<p>{{ __('Donations are important, as it will help to pay our monthly bills needed to keep the hotel up & running, as well as adding new and exciting features for you and others to enjoy!') }}</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-y-2 !mt-6">
|
||||
<p class="font-semibold">{{ __('Our terms') }}</p>
|
||||
<p>{{ __('Once a donation has been made and received by us, it is non-refundable under any circumstances. The donated amount which is converted into website balance cannot be converted back into cash or other forms of money. By making a donation, you acknowledge and accept these terms and agree not to initiate a chargeback or dispute with your bank or card issuer.') }}</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-y-2 !mt-6">
|
||||
<p class="font-semibold">{{ __('Notice') }}</p>
|
||||
<p>{{ __('It is important to consider the consequences of our spending habits, especially when it comes to financial decisions. If you find yourself tempted to spend money you do not have, take a moment to reflect.') }}</p>
|
||||
<p>{{ __('Remember, your financial well-being is crucial, and making responsible choices is key. If you are facing difficulties in controlling your spending habits, do not hesitate to seek friendly and professional guidance. There are resources available that can provide valuable advice and support.') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</x-modals.regular-modal>
|
||||
</div>
|
||||
</x-modals.modal-wrapper>
|
||||
</div>
|
||||
|
||||
<x-modals.regular-modal>
|
||||
<x-slot name="title">
|
||||
<h2 class="text-2xl">
|
||||
{{ __('Shop Terms & Conditions') }}
|
||||
</h2>
|
||||
</x-slot>
|
||||
<div class="col-span-12">
|
||||
<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">
|
||||
<div class="w-8 h-8 rounded-full flex items-center justify-center text-lg shadow-lg" style="background-color: color-mix(in srgb, var(--color-primary) 30%, transparent);">
|
||||
🏷️
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-white font-bold text-xl">{{ __('Categories') }}</h1>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">{{ __('Browse our available categories') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3 p-2">
|
||||
<p>
|
||||
{{ __('Here at :hotel Hotel we are accepting donations to keep the hotel up & running and as a thank you, you will in return receive in-game goods.', ['hotel' => setting('hotel_name')]) }}
|
||||
</p>
|
||||
<div class="p-4">
|
||||
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-3">
|
||||
<a href="{{ route('shop.index') }}"
|
||||
class="flex flex-col items-center gap-2 p-4 rounded-lg transition ease-in-out duration-150 group"
|
||||
style="background-color: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)); border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);">
|
||||
<img class="h-12 w-12 object-contain" src="{{ asset('/assets/images/icons/navigation/shop.png') }}" alt="">
|
||||
<span class="text-sm font-semibold text-center group-hover:underline" style="color: var(--color-text);">{{ __('All') }}</span>
|
||||
</a>
|
||||
|
||||
<div class="flex flex-col gap-y-2 !mt-6">
|
||||
<p class="font-semibold">{{ __('Why are donations important?') }}</p>
|
||||
|
||||
<p>{{ __('Donations are important, as it will help to pay our monthly bills needed to keep the hotel up & running, as well as adding new and exciting features for you and others to enjoy!') }}</p>
|
||||
@foreach($categories as $category)
|
||||
<a href="{{ route('shop.index', $category->slug) }}"
|
||||
class="flex flex-col items-center gap-2 p-4 rounded-lg transition ease-in-out duration-150 group"
|
||||
style="background-color: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)); border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);">
|
||||
<img class="h-12 w-12 object-contain" src="{{ $category->icon }}" alt="">
|
||||
<span class="text-sm font-semibold text-center group-hover:underline" style="color: var(--color-text);">{{ $category->name }}</span>
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-y-2 !mt-6">
|
||||
<p class="font-semibold">{{ __('Our terms') }}</p>
|
||||
|
||||
<p>{{ __('Once a donation has been made and received by us, it is non-refundable under any circumstances. The donated amount which is converted into website balance cannot be converted back into cash or other forms of money. By making a donation, you acknowledge and accept these terms and agree not to initiate a chargeback or dispute with your bank or card issuer.') }}</p>
|
||||
<div class="col-span-12 md:col-span-8 lg:col-span-9">
|
||||
@if ($articles->isNotEmpty())
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-4">
|
||||
@foreach ($articles as $article)
|
||||
<x-shop.packages :article="$article" />
|
||||
@endforeach
|
||||
</div>
|
||||
@else
|
||||
<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="p-6 text-center">
|
||||
<p style="color: var(--color-text-muted);">{{ __('No packages available in this category.') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-y-2 !mt-6">
|
||||
<p class="font-semibold">{{ __('Notice') }}</p>
|
||||
<div class="col-span-12 md:col-span-4 lg:col-span-3 flex flex-col gap-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="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">
|
||||
<div class="w-8 h-8 rounded-full flex items-center justify-center text-lg shadow-lg" style="background-color: color-mix(in srgb, var(--color-primary) 30%, transparent);">
|
||||
💰
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-white font-bold text-sm">{{ __('Top up account') }}</p>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">{{ __('Donate to :hotel', ['hotel' => setting('hotel_name')]) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>{{ __('It is important to consider the consequences of our spending habits, especially when it comes to financial decisions. If you find yourself tempted to spend money you do not have, take a moment to reflect.') }}</p>
|
||||
<p>{{ __('Remember, your financial well-being is crucial, and making responsible choices is key. If you are facing difficulties in controlling your spending habits, do not hesitate to seek friendly and professional guidance. There are resources available that can provide valuable advice and support.') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</x-modals.regular-modal>
|
||||
</x-modals.modal-wrapper>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<div class="text-sm text-center py-2 px-4 rounded mb-3" style="background-color: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)); color: var(--color-text);">
|
||||
{{ auth()->user() ? __('Current balance: $:balance', ['balance' => auth()->user()->website_balance]) : __('Current balance: Login required') }}
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 md:col-span-3">
|
||||
<x-content.content-card icon="catalog-icon" classes="border dark:border-gray-900">
|
||||
<x-slot:title>
|
||||
{{ __('Categories') }}
|
||||
</x-slot:title>
|
||||
@if(config('habbo.paypal.live.client_id') && config('habbo.paypal.live.client_secret') && config('habbo.paypal.live.client_id') !== 'test_client_id')
|
||||
<form action="{{ route('paypal.process-transaction') }}" method="GET">
|
||||
@csrf
|
||||
<input type="number" name="amount" value="0" placeholder="amount" 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);" />
|
||||
<button type="submit" class="mt-2 w-full rounded p-2 border-2 transition ease-in-out duration-150 font-semibold"
|
||||
style="background-color: var(--color-primary); color: var(--button-text-color); border-color: var(--color-primary);">
|
||||
{{ __('Donate') }}
|
||||
</button>
|
||||
</form>
|
||||
@else
|
||||
<p class="text-xs" style="color: var(--color-text-muted);">
|
||||
{{ __('Please setup the paypal credentials to allow for top ups') }}
|
||||
</p>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@foreach($categories as $category)
|
||||
<div class="space-y-2">
|
||||
<a href="{{ route('shop.index') }}"
|
||||
class="flex items-center gap-3 py-2 px-4 rounded font-semibold transition ease-in-out duration-150"
|
||||
style="background-color: var(--color-surface); color: var(--color-text);"
|
||||
onmouseover="this.style.backgroundColor='var(--color-primary)'; this.style.color='var(--button-text-color)'"
|
||||
onmouseout="this.style.backgroundColor='var(--color-surface)'; this.style.color='var(--color-text)'">
|
||||
<img class="max-h-[50px] max-w-[50px]" src="{{ asset('/assets/images/icons/navigation/shop.png') }}" alt="">
|
||||
<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">
|
||||
<div class="w-8 h-8 rounded-full flex items-center justify-center text-lg shadow-lg" style="background-color: color-mix(in srgb, var(--color-primary) 30%, transparent);">
|
||||
🎟️
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-white font-bold text-sm">{{ __('Voucher') }}</p>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">{{ __('Use a voucher for free credit') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ __('All') }}
|
||||
</a>
|
||||
<div class="p-4">
|
||||
<form action="{{ route('shop.use-voucher') }}" method="POST">
|
||||
@csrf
|
||||
<input type="text" name="code" placeholder="Voucher" class="w-full rounded-lg px-3 py-2 text-sm border-2 focus:ring-0 mb-3" style="background-color: var(--color-background); color: var(--color-text); border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent);" />
|
||||
|
||||
@foreach($categories as $category)
|
||||
<a href="{{ route('shop.index', $category->slug) }}"
|
||||
class="flex items-center gap-3 py-2 px-4 rounded font-semibold transition ease-in-out duration-150"
|
||||
style="background-color: var(--color-surface); color: var(--color-text);"
|
||||
onmouseover="this.style.backgroundColor='var(--color-primary)'; this.style.color='var(--button-text-color)'"
|
||||
onmouseout="this.style.backgroundColor='var(--color-surface)'; this.style.color='var(--color-text)'">
|
||||
<img class="max-h-[50px] max-w-[50px]" src="{{ $category->icon }}" alt="">
|
||||
@if (setting('google_recaptcha_enabled'))
|
||||
<div class="g-recaptcha" data-sitekey="{{ config('habbo.site.recaptcha_site_key') }}"></div>
|
||||
@endif
|
||||
|
||||
{{ $category->name }}
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
@endforeach
|
||||
</x-content.content-card>
|
||||
</div>
|
||||
@if (setting('cloudflare_turnstile_enabled'))
|
||||
<x-turnstile />
|
||||
@endif
|
||||
|
||||
<div class="col-span-12 md:col-span-6">
|
||||
<div class="flex flex-col gap-y-2 dark:text-gray-300">
|
||||
@foreach ($articles as $article)
|
||||
<x-shop.packages :article="$article" />
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-start-2 md:row-auto col-span-12 flex flex-col gap-y-3 md:col-span-5 lg:col-span-4 xl:col-span-3">
|
||||
<x-content.content-card icon="currency-icon" classes="border dark:border-gray-900">
|
||||
<x-slot:title>
|
||||
{{ __('Top up account') }}
|
||||
</x-slot:title>
|
||||
|
||||
<x-slot:under-title>
|
||||
{{ __('Donate to :hotel', ['hotel' => setting('hotel_name')]) }}
|
||||
</x-slot:under-title>
|
||||
|
||||
<div class="text-sm text-center py-2 px-4 rounded" style="background-color: var(--color-surface); color: var(--color-text);">
|
||||
{{ auth()->user() ? __('Current balance: $:balance', ['balance' => auth()->user()->website_balance]) : __('Current balance: Login required') }}
|
||||
</div>
|
||||
|
||||
@if(config('habbo.paypal.live.client_id') && config('habbo.paypal.live.client_secret') && config('habbo.paypal.live.client_id') !== 'test_client_id')
|
||||
<form action="{{ route('paypal.process-transaction') }}" method="GET" class="mt-3">
|
||||
@csrf
|
||||
|
||||
<x-form.input name="amount" type="number" value="0" placeholder="amount" />
|
||||
|
||||
<button type="submit" class="mt-2 w-full rounded p-2 border-2 transition ease-in-out duration-150 font-semibold"
|
||||
style="background-color: var(--color-primary); color: var(--button-text-color); border-color: var(--color-primary);">
|
||||
{{ __('Donate') }}
|
||||
</button>
|
||||
</form>
|
||||
@else
|
||||
<p class="mt-4 text-xs" style="color: var(--color-text);">
|
||||
{{ __('Please setup the paypal credentials to allow for top ups') }}
|
||||
</p>
|
||||
@endif
|
||||
</x-content.content-card>
|
||||
|
||||
|
||||
<x-content.content-card icon="catalog-icon" classes="border dark:border-gray-900">
|
||||
<x-slot:title>
|
||||
{{ __('Voucher') }}
|
||||
</x-slot:title>
|
||||
|
||||
<x-slot:under-title>
|
||||
{{ __('Use a voucher for free credit') }}
|
||||
</x-slot:under-title>
|
||||
|
||||
<form action="{{ route('shop.use-voucher') }}" method="POST">
|
||||
@csrf
|
||||
|
||||
<x-form.input classes="mb-3" name="code" type="text" placeholder="Voucher" />
|
||||
|
||||
@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 classes="mt-2">
|
||||
{{ __('Use voucher') }}
|
||||
</x-form.secondary-button>
|
||||
</form>
|
||||
</x-content.content-card>
|
||||
<button type="button" class="rounded-lg px-4 py-2 text-sm font-semibold transition-all duration-200 hover:opacity-90 mt-2" style="background-color: var(--color-background); color: var(--color-text); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
{{ __('Use voucher') }}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@push('javascript')
|
||||
<script type="module">
|
||||
tippy('.user-badge');
|
||||
</script>
|
||||
<script type="module">
|
||||
tippy('.user-badge');
|
||||
</script>
|
||||
@endpush
|
||||
</x-app-layout>
|
||||
|
||||
Reference in New Issue
Block a user