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
182 lines
9.9 KiB
PHP
Executable File
182 lines
9.9 KiB
PHP
Executable File
<x-app-layout>
|
|
@push('title', __('Shop'))
|
|
|
|
<div class="col-span-12">
|
|
<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>
|
|
|
|
<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="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>
|
|
|
|
@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="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="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>
|
|
|
|
<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>
|
|
|
|
@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>
|
|
|
|
<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>
|
|
|
|
<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);" />
|
|
|
|
@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="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>
|
|
@endpush
|
|
</x-app-layout>
|