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
@@ -5,6 +5,7 @@ namespace App\Http\Controllers\Miscellaneous;
|
||||
use App\Http\Controllers\Controller;
|
||||
use App\Models\Articles\WebsiteArticle;
|
||||
use App\Models\Miscellaneous\CameraWeb;
|
||||
use App\Models\User;
|
||||
use Illuminate\Support\Facades\Cache;
|
||||
use Illuminate\View\View;
|
||||
|
||||
@@ -24,9 +25,16 @@ class HomeController extends Controller
|
||||
->with('user:id,username,look')
|
||||
->get());
|
||||
|
||||
$onlineUsers = Cache::remember('home_online_users', 30, fn () => User::query()
|
||||
->where('online', '1')
|
||||
->inRandomOrder()
|
||||
->take(12)
|
||||
->get(['username', 'look']));
|
||||
|
||||
return view('index', [
|
||||
'articles' => $articles,
|
||||
'photos' => $photos,
|
||||
'onlineUsers' => $onlineUsers,
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 235 B |
Executable → Regular
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 279 B After Width: | Height: | Size: 123 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Executable → Regular
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 46 KiB |
Executable → Regular
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 491 B After Width: | Height: | Size: 150 B |
Binary file not shown.
|
After Width: | Height: | Size: 281 B |
Executable → Regular
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 485 B After Width: | Height: | Size: 116 B |
Binary file not shown.
|
After Width: | Height: | Size: 824 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
+11
-11
@@ -64,7 +64,7 @@
|
||||
"src": "public/assets/images/icons/lighthouse.png"
|
||||
},
|
||||
"public/assets/images/icons/navigation/community.png": {
|
||||
"file": "assets/community-Do_t1zw9.png",
|
||||
"file": "assets/community-BmvnBNdH.png",
|
||||
"src": "public/assets/images/icons/navigation/community.png"
|
||||
},
|
||||
"public/assets/images/icons/navigation/home.png": {
|
||||
@@ -72,7 +72,7 @@
|
||||
"src": "public/assets/images/icons/navigation/home.png"
|
||||
},
|
||||
"public/assets/images/icons/navigation/leaderboards.png": {
|
||||
"file": "assets/leaderboards-CGasq3cL.png",
|
||||
"file": "assets/leaderboards-Cz3bgXtU.png",
|
||||
"src": "public/assets/images/icons/navigation/leaderboards.png"
|
||||
},
|
||||
"public/assets/images/icons/navigation/rules.gif": {
|
||||
@@ -80,7 +80,7 @@
|
||||
"src": "public/assets/images/icons/navigation/rules.gif"
|
||||
},
|
||||
"public/assets/images/icons/navigation/shop.png": {
|
||||
"file": "assets/shop-D3NfN6cF.png",
|
||||
"file": "assets/shop-LX0jLJ3j.png",
|
||||
"src": "public/assets/images/icons/navigation/shop.png"
|
||||
},
|
||||
"public/assets/images/leaderboards/trophy-bronze.png": {
|
||||
@@ -100,7 +100,7 @@
|
||||
"src": "public/assets/images/profile/profile-bg.png"
|
||||
},
|
||||
"resources/css/global.css": {
|
||||
"file": "assets/global-CLsqTvoO.css",
|
||||
"file": "assets/global-qWU3veV8.css",
|
||||
"name": "global",
|
||||
"names": [
|
||||
"global.css"
|
||||
@@ -128,11 +128,11 @@
|
||||
"assets/trophy-bronze-CgV5j1MU.png",
|
||||
"assets/background-light-CP7oKwVT.jpg",
|
||||
"assets/background-dark-BfkMu3-0.jpg",
|
||||
"assets/shop-D3NfN6cF.png",
|
||||
"assets/leaderboards-CGasq3cL.png",
|
||||
"assets/shop-LX0jLJ3j.png",
|
||||
"assets/leaderboards-Cz3bgXtU.png",
|
||||
"assets/rules--xzBmecz.gif",
|
||||
"assets/home-DIMFC97Y.png",
|
||||
"assets/community-Do_t1zw9.png"
|
||||
"assets/community-BmvnBNdH.png"
|
||||
]
|
||||
},
|
||||
"resources/js/global.js": {
|
||||
@@ -148,7 +148,7 @@
|
||||
"isEntry": true
|
||||
},
|
||||
"resources/themes/atom/css/app.css": {
|
||||
"file": "assets/app-CnWrzlz2.css",
|
||||
"file": "assets/app-d6aGWIlU.css",
|
||||
"name": "app",
|
||||
"names": [
|
||||
"app.css"
|
||||
@@ -176,11 +176,11 @@
|
||||
"assets/trophy-bronze-CgV5j1MU.png",
|
||||
"assets/background-light-CP7oKwVT.jpg",
|
||||
"assets/background-dark-BfkMu3-0.jpg",
|
||||
"assets/shop-D3NfN6cF.png",
|
||||
"assets/leaderboards-CGasq3cL.png",
|
||||
"assets/shop-LX0jLJ3j.png",
|
||||
"assets/leaderboards-Cz3bgXtU.png",
|
||||
"assets/rules--xzBmecz.gif",
|
||||
"assets/home-DIMFC97Y.png",
|
||||
"assets/community-Do_t1zw9.png"
|
||||
"assets/community-BmvnBNdH.png"
|
||||
]
|
||||
},
|
||||
"resources/themes/atom/js/app.js": {
|
||||
|
||||
@@ -4,6 +4,16 @@
|
||||
@plugin "@tailwindcss/typography";
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
|
||||
[x-cloak] { display: none !important; }
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.mobile-nav-menu { display: none !important; overflow: visible !important; }
|
||||
.mobile-nav-menu.show-mobile { display: flex !important; }
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.mobile-nav-menu { overflow: visible !important; }
|
||||
}
|
||||
|
||||
@theme {
|
||||
--font-sans:
|
||||
"Nunito", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
|
||||
@@ -275,6 +285,12 @@ html.dark .badge-drawer-button .toggled { background: #f2f2f3; }
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.diamond {
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) rotate(45deg);
|
||||
}
|
||||
|
||||
.text-body { color: var(--color-text); }
|
||||
.text-muted { color: var(--color-text-muted); }
|
||||
.text-nav { color: var(--color-navbar-text); }
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -29,9 +29,9 @@
|
||||
</p>
|
||||
|
||||
<a href="{{ is_array(setting('discord_invitation_link')) ? '' : setting('discord_invitation_link') }}" target="_blank">
|
||||
<x-form.primary-button>
|
||||
{{ __('Join discord') }}
|
||||
</x-form.primary-button>
|
||||
<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);">
|
||||
{{ __('Join discord') }}
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,187 +1,179 @@
|
||||
<x-app-layout>
|
||||
@push('title', $article->title)
|
||||
|
||||
<div class="col-span-12 rounded space-y-3 md:col-span-3">
|
||||
<div
|
||||
class="relative mt-6 h-24 w-full overflow-hidden rounded border bg-white shadow-sm dark:border-gray-900 dark:bg-gray-800 md:mt-0">
|
||||
<div
|
||||
class="absolute top-1 right-1 rounded bg-white px-2 text-sm font-semibold dark:bg-gray-700 dark:text-gray-100">
|
||||
{{ $article->user && !$article->user->hidden_staff ? $article->user->permission->rank_name ?? 'Member' : 'Member' }}
|
||||
<div class="col-span-12 lg:col-span-9 space-y-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 h-56 md:h-72 w-full overflow-hidden" style="background: url(/storage/{{ $article->image }}) center; background-size: cover;">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent"></div>
|
||||
<div class="absolute bottom-0 left-0 right-0 p-6">
|
||||
<h1 class="text-2xl md:text-3xl font-bold text-white mb-2">{{ $article->title }}</h1>
|
||||
<p class="text-sm text-white/80 mb-3">{{ $article->short_story }}</p>
|
||||
<div class="flex items-center gap-3">
|
||||
@if ($article->user)
|
||||
<a href="{{ route('profile.show', $article->user) }}">
|
||||
<img style="image-rendering: pixelated;" class="w-10 h-10 rounded-lg hover:scale-105 transition-transform"
|
||||
src="{{ setting('avatar_imager') }}{{ $article->user->look }}&direction=2&head_direction=3&gesture=sml&action=wav" alt="">
|
||||
</a>
|
||||
<div>
|
||||
<a href="{{ route('profile.show', $article->user) }}" class="font-semibold text-white hover:underline text-sm">
|
||||
{{ $article->user->username }}
|
||||
</a>
|
||||
<p class="text-xs text-white/70">{{ $article->created_at->format('d F Y') }}</p>
|
||||
</div>
|
||||
@else
|
||||
<div class="text-white/70 text-sm">{{ __('Unknown author') }}</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6">
|
||||
<div id="article-content" class="prose prose-sm max-w-none dark:prose-invert" style="color: var(--color-text);">
|
||||
{{ \Stevebauman\Purify\Facades\Purify::clean($article->full_story) }}
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-2 mt-6 pt-4" style="border-top: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
@forelse ($article->tags as $tag)
|
||||
<span style="background-color: {{ $tag->background_color ?? '#000000' }}; color: {{ $tag->background_color ? '#fff' : (strlen($tag->background_color ?? '') > 0 ? '#fff' : '#fff') }}"
|
||||
class="text-xs font-medium rounded-lg px-3 py-1">
|
||||
{{ $tag->name }}
|
||||
</span>
|
||||
@empty
|
||||
<span class="text-xs font-medium rounded-lg px-3 py-1" style="background-color: #000000; color: white;">
|
||||
{{ __('No tags found.') }}
|
||||
</span>
|
||||
@endforelse
|
||||
</div>
|
||||
|
||||
@include('community.partials.article-reactions')
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if ($article->can_comment)
|
||||
@if (auth()->check() && !$article->userHasReachedArticleCommentLimit())
|
||||
<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">
|
||||
<h2 class="text-white font-bold text-lg">{{ __('Post a comment') }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<p class="text-sm mb-3" style="color: var(--color-text-muted);">{{ __('Post a comment on the article, to let us know what you think about it') }}</p>
|
||||
<form action="{{ route('article.comment.store', $article) }}" method="POST">
|
||||
@csrf
|
||||
|
||||
<textarea name="comment"
|
||||
class="focus:ring-0 border-2 rounded-lg w-full min-h-[100px] max-h-[100px] @error('comment') border-red-600 ring-red-500 @enderror"
|
||||
style="background-color: var(--color-background); color: var(--color-text); border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent);"></textarea>
|
||||
|
||||
<button type="submit" class="mt-2 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);">
|
||||
{{ __('Post comment') }}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<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">
|
||||
<h2 class="text-white font-bold text-lg">{{ __('Comments') }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<p class="text-sm mb-3" style="color: var(--color-text-muted);">{{ __('Below you will see all the comments, written on this article') }}</p>
|
||||
<div class="space-y-3">
|
||||
@forelse ($article->comments as $comment)
|
||||
<div class="rounded-lg p-4 flex items-start gap-3" style="background-color: var(--color-background); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
<a href="{{ route('profile.show', $comment->user) }}" class="shrink-0">
|
||||
<img style="image-rendering: pixelated;" class="w-12 h-12 rounded-lg hover:scale-105 transition-transform"
|
||||
src="{{ setting('avatar_imager') }}{{ $comment->user->look }}&direction=2&head_direction=3&gesture=sml&action=wav" alt="">
|
||||
</a>
|
||||
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<a href="{{ route('profile.show', $comment->user) }}" class="font-semibold text-sm hover:underline" style="color: var(--color-primary);">
|
||||
{{ $comment->user->username }}
|
||||
</a>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs" style="color: var(--color-text-muted);">{{ $comment->created_at->diffForHumans() }}</span>
|
||||
@if ($comment->canBeDeleted())
|
||||
<form action="{{ route('article.comment.destroy', $comment) }}" method="POST" class="inline">
|
||||
@method('DELETE')
|
||||
@csrf
|
||||
<button type="submit" class="hover:scale-105 transition-transform">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-4 w-4" style="color: var(--color-text-muted);">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-1 text-sm" style="color: var(--color-text);">{{ $comment->comment }}</p>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<div class="text-center py-8">
|
||||
<p style="color: var(--color-text-muted);">{{ __('No comments yet. Be the first to comment!') }}</p>
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="h-[65%] w-full staff-bg"
|
||||
style="background: rgba(0, 0, 0, 0.5) url({{ asset(sprintf('assets/images/%s', $article->user ? $article->user->permission->staff_background ?? 'staff-bg.png' : 'staff-bg.png')) }});">
|
||||
</div>
|
||||
<div class="col-span-12 lg:col-span-3 space-y-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 justify-center h-full">
|
||||
<h2 class="text-white font-bold text-lg">{{ __('Other articles') }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<div class="flex flex-col gap-y-2">
|
||||
@forelse($otherArticles as $art)
|
||||
<a href="{{ route('article.show', $art->slug) }}"
|
||||
style="background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url(/storage/{{ $art->image }}) center; background-size: cover;"
|
||||
class="w-full rounded-lg h-14 transition ease-in-out duration-200 hover:scale-[103%] text-white flex justify-center items-center font-bold text-sm">
|
||||
{{ Str::limit($art->title, 25) }}
|
||||
</a>
|
||||
@empty
|
||||
<p class="text-sm" style="color: var(--color-text-muted);">
|
||||
{{ __('There is currently no other articles') }}
|
||||
</p>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="{{ route('profile.show', $article->user ?? \App\Models\User::first()) }}" class="absolute top-4 left-1 ">
|
||||
<img style="image-rendering: pixelated;" class="transition duration-300 ease-in-out hover:scale-105"
|
||||
src="{{ setting('avatar_imager') }}{{ $article->user?->look }}&direction=2&head_direction=3&gesture=sml&action=wav"
|
||||
alt="">
|
||||
</a>
|
||||
|
||||
<p class="text-2xl font-semibold ml-[70px] text-white -mt-[35px] ">
|
||||
{{ $article->user->username ?? setting('hotel_name') }}
|
||||
</p>
|
||||
|
||||
<div class="flex w-full items-center justify-between px-4">
|
||||
<p class="ml-[57px] text-sm mt-[10px] font-semibold text-gray-500 ">
|
||||
{{ $article->user->motto ?? setting('start_motto') }}
|
||||
</p>
|
||||
|
||||
@if($article->user)
|
||||
<div class="w-4 h-4 rounded-full mt-2 {{ $article->user->online ? 'bg-green-600' : 'bg-red-600' }}">
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-content.content-card icon="article-icon" classes="border dark:bg-gray-800 dark:border-gray-900">
|
||||
<x-slot:title>
|
||||
{{ __('Other articles') }}
|
||||
</x-slot:title>
|
||||
|
||||
<x-slot:under-title>
|
||||
{{ __('Our most recent articles') }}
|
||||
</x-slot:under-title>
|
||||
|
||||
<div class="flex flex-col gap-y-2">
|
||||
@forelse($otherArticles as $art)
|
||||
<a href="{{ route('article.show', $art->slug) }}"
|
||||
style="background: rgba(0, 0, 0, 0.5) url({{ $art->image }}) center;"
|
||||
class="w-full rounded h-12 bg-blue-200 transition ease-in-out duration-200 hover:scale-[103%] text-white flex justify-center items-center font-bold recent-articles">
|
||||
{{ Str::limit($art->title, 20) }}
|
||||
</a>
|
||||
@empty
|
||||
<p class="dark:text-gray-400">
|
||||
{{ __('There is currently no other articles') }}
|
||||
</p>
|
||||
@endforelse
|
||||
</div>
|
||||
</x-content.content-card>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 space-y-4 md:col-span-9">
|
||||
<div
|
||||
class="relative flex flex-col gap-y-8 overflow-hidden rounded bg-white p-3 shadow-sm dark:bg-gray-800 dark:text-gray-300">
|
||||
<div class="relative flex h-24 flex-col items-center justify-center gap-y-1 overflow-hidden rounded px-2"
|
||||
style="background: url(/storage/{{ $article->image }}) center; background-size: cover; color: var(--color-text);">
|
||||
<div class="absolute h-full w-full bg-black/50"></div>
|
||||
|
||||
<p class="relative w-full truncate text-center text-xl font-semibold lg:text-2xl xl:text-3xl " style="color: white;">
|
||||
{{ $article->title }}</p>
|
||||
<p class="relative w-full truncate text-center " style="color: rgba(255,255,255,0.9);">{{ $article->short_story }}</p>
|
||||
</div>
|
||||
|
||||
<div class="px-2" id="article-content">
|
||||
{{ \Stevebauman\Purify\Facades\Purify::clean($article->full_story) }}
|
||||
</div>
|
||||
|
||||
<div class="w-full h-10 lg:h-1/2 py-1 flex gap-1 items-center justify-start flex-wrap">
|
||||
@forelse ($article->tags as $tag)
|
||||
<span @class([
|
||||
"text-xs font-medium rounded-lg px-2",
|
||||
"text-slate-600" => $tag->background_color,
|
||||
"text-white" => $tag->background_color
|
||||
]) style="background-color: {{ $tag->background_color }}">{{ $tag->name }}</span>
|
||||
@empty
|
||||
<span @class([
|
||||
"text-xs font-medium rounded-lg px-2",
|
||||
"text-slate-600",
|
||||
"text-white"
|
||||
]) style="background-color: #000000">{{ __('No tags found.') }}</span>
|
||||
</span>
|
||||
@endforelse
|
||||
</div>
|
||||
|
||||
@include('community.partials.article-reactions')
|
||||
</div>
|
||||
|
||||
@if ($article->can_comment)
|
||||
@if (auth()->check() && !$article->userHasReachedArticleCommentLimit())
|
||||
<x-content.content-card icon="hotel-icon" classes="border dark:border-gray-900">
|
||||
<x-slot:title>
|
||||
{{ __('Post a comment') }}
|
||||
</x-slot:title>
|
||||
|
||||
<x-slot:under-title>
|
||||
{{ __('Post a comment on the article, to let us know what you think about it') }}
|
||||
</x-slot:under-title>
|
||||
|
||||
<div class="px-2 text-sm dark:text-gray-200">
|
||||
<form action="{{ route('article.comment.store', $article) }}" method="POST">
|
||||
@csrf
|
||||
|
||||
<textarea name="comment"
|
||||
class="focus:ring-0 border-2 border-gray-200 rounded dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200 focus:border-[var(--color-primary)] w-full min-h-[100px] max-h-[100px] @error('comment') border-red-600 ring-red-500 @enderror"></textarea>
|
||||
|
||||
<x-form.primary-button classes="mt-2">
|
||||
{{ __('Post comment') }}
|
||||
</x-form.primary-button>
|
||||
</form>
|
||||
</div>
|
||||
</x-content.content-card>
|
||||
@endif
|
||||
|
||||
<x-content.content-card icon="hotel-icon" classes="border dark:border-gray-900">
|
||||
<x-slot:title>
|
||||
{{ __('Comments') }}
|
||||
</x-slot:title>
|
||||
|
||||
<x-slot:under-title>
|
||||
{{ __('Below you will see all the comments, written on this article') }}
|
||||
</x-slot:under-title>
|
||||
|
||||
<div class="px-1 dark:text-gray-200 space-y-[13px]">
|
||||
@foreach ($article->comments as $comment)
|
||||
<div
|
||||
class="relative w-full rounded bg-[#f5f5f5] dark:bg-gray-700 p-4 h-[90px] overflow-hidden flex items-center shadow-sm">
|
||||
<a href="{{ route('profile.show', $comment->user) }}"
|
||||
class="absolute top-2 left-1 ">
|
||||
<img style="image-rendering: pixelated;"
|
||||
class="transition duration-300 ease-in-out hover:scale-105"
|
||||
src="{{ setting('avatar_imager') }}{{ $comment->user->look }}&direction=2&head_direction=3&gesture=sml&action=wav"
|
||||
alt="">
|
||||
</a>
|
||||
|
||||
<div class="flex justify-between ml-[60px] w-full">
|
||||
<div class="text-sm">
|
||||
<a href="{{ route('profile.show', $comment->user) }}"
|
||||
class="font-semibold text-[#89cdf0] dark:text-blue-300 hover:underline">
|
||||
{{ $comment->user->username }}
|
||||
</a>
|
||||
|
||||
<p class="block dark:text-gray-200">
|
||||
{{ $comment->comment }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-x-2">
|
||||
<p class="text-xs dark:text-gray-200">
|
||||
{{ $comment->created_at->diffForHumans() }}
|
||||
</p>
|
||||
|
||||
@if ($comment->canBeDeleted())
|
||||
<form action="{{ route('article.comment.destroy', $comment) }}" method="POST"
|
||||
class="cursor-pointer transition duration-200 ease-in-out hover:scale-105">
|
||||
@method('DELETE')
|
||||
@csrf
|
||||
|
||||
<button type="submit">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none"
|
||||
viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
|
||||
class="h-4 w-4">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</x-content.content-card>
|
||||
@endif
|
||||
@if($article->user)
|
||||
<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 justify-center h-full">
|
||||
<h2 class="text-white font-bold text-lg">{{ __('Author') }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 text-center">
|
||||
<a href="{{ route('profile.show', $article->user) }}">
|
||||
<img style="image-rendering: pixelated;" class="mx-auto w-16 h-16 rounded-lg hover:scale-105 transition-transform"
|
||||
src="{{ setting('avatar_imager') }}{{ $article->user->look }}&direction=2&head_direction=3&gesture=sml&action=wav" alt="">
|
||||
</a>
|
||||
<a href="{{ route('profile.show', $article->user) }}" class="block mt-2 font-semibold text-sm hover:underline" style="color: var(--color-primary);">
|
||||
{{ $article->user->username }}
|
||||
</a>
|
||||
<p class="text-xs" style="color: var(--color-text-muted);">{{ $article->user->motto ?? setting('start_motto') }}</p>
|
||||
<div class="flex justify-center mt-2">
|
||||
<div class="w-3 h-3 rounded-full {{ $article->user->online ? 'bg-green-500' : 'bg-red-500' }}"></div>
|
||||
<span class="text-xs ml-1" style="color: var(--color-text-muted);">{{ $article->user->online ? __('Online') : __('Offline') }}</span>
|
||||
</div>
|
||||
<span class="inline-block mt-2 rounded px-2 py-0.5 text-xs font-semibold" style="background-color: color-mix(in srgb, var(--color-primary) 15%, transparent); color: var(--color-primary);">
|
||||
{{ $article->user && !$article->user->hidden_staff ? $article->user->permission->rank_name ?? 'Member' : 'Member' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
||||
@@ -1,17 +1,73 @@
|
||||
<x-app-layout>
|
||||
@push('title', __('Articles'))
|
||||
@push('title', __('Articles'))
|
||||
|
||||
<div class="col-span-12">
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
|
||||
@forelse($articles as $article)
|
||||
<x-article-card :article="$article" />
|
||||
@empty
|
||||
<x-filler-article-card />
|
||||
@endforelse
|
||||
</div>
|
||||
<div class="col-span-12">
|
||||
<div class="flex justify-center col-span-12 gap-3">
|
||||
<div class="relative w-full overflow-hidden rounded-lg bg-white dark:bg-gray-800" style="border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
<div style="background: linear-gradient(140deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 70%, #000) 100%);">
|
||||
<div class="flex items-center justify-center h-full relative">
|
||||
<span class="text-white font-bold text-xl" style="padding: 2% 3%;">{{ __('The Hubbly Newsie') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
{{ $articles->links() }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 relative">
|
||||
<div class="mb-6 rounded-lg p-4" style="background-color: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
<div class="flex flex-col items-start justify-between gap-4 lg:flex-row lg:items-center">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold" style="color: var(--color-text)">{{ __('Newsie Directory') }}</h3>
|
||||
<p class="mt-1 text-sm" style="color: var(--color-text-muted)">{{ __('Filter newsie by category or search for a specific article...') }}</p>
|
||||
</div>
|
||||
|
||||
<div class="w-48 ml-auto">
|
||||
<div class="relative">
|
||||
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
|
||||
<svg class="h-5 w-5" style="color: var(--color-text-muted)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<form method="GET" action="{{ route('article.index') }}">
|
||||
<input type="text" name="search" value="{{ request('search') }}"
|
||||
placeholder="{{ __('Search articles...') }}"
|
||||
style="text-indent: 25px;"
|
||||
class="block w-full rounded-lg border py-2.5 pl-10 pr-12 text-sm focus:ring-0"
|
||||
style="background-color: var(--color-background); border-color: color-mix(in srgb, var(--color-text-muted) 20%, transparent); color: var(--color-text);">
|
||||
@if(request('search'))
|
||||
<a href="{{ route('article.index') }}" class="absolute inset-y-0 right-0 flex items-center pr-3 cursor-pointer" style="color: var(--color-text-muted)">
|
||||
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
||||
</svg>
|
||||
</a>
|
||||
@endif
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="articles-container">
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
|
||||
@forelse($articles as $article)
|
||||
<x-article-card :article="$article" />
|
||||
@empty
|
||||
<div class="col-span-3 text-center py-12">
|
||||
<p class="text-lg" style="color: var(--color-text-muted)">{{ __('No articles found.') }}</p>
|
||||
@if(request('search'))
|
||||
<a href="{{ route('article.index') }}" class="mt-2 inline-block text-sm hover:underline" style="color: var(--color-primary)">{{ __('Clear search') }}</a>
|
||||
@endif
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if(method_exists($articles, 'links'))
|
||||
<div id="pagination-container" class="mt-8">
|
||||
<div class="flex justify-center">
|
||||
{{ $articles->links() }}
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
||||
@@ -2,40 +2,23 @@
|
||||
@push('title', __('Photos'))
|
||||
|
||||
<div class="col-span-12">
|
||||
<div class="mb-6 p-6 rounded-xl border-2">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-14 h-14 rounded-full flex items-center justify-center shadow-lg" style="background-color: var(--color-primary);">
|
||||
<svg class="w-8 h-8" style="color: var(--button-text-color);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold" style="color: var(--color-text)">{{ __('Photos') }}</h1>
|
||||
<p style="color: var(--color-text-muted)">Bekijk de beste momenten vastgelegd door gebruikers</p>
|
||||
</div>
|
||||
</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, #3A2068 0%, #3F2673 15%, #493085 30%, #523A97 45%, #5B44A9 60%, #654EBB 75%, #7068D0 90%, #786ED8 100%);">
|
||||
<div class="flex items-center justify-center h-full">
|
||||
<h2 class="text-white font-bold text-xl">{{ __('Photos') }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<x-photos :photos="$photos" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-content.content-card icon="camera-icon" classes="border dark:border-gray-900">
|
||||
<x-slot:title>
|
||||
{{ __('Photo Gallery') }}
|
||||
</x-slot:title>
|
||||
|
||||
<x-slot:under-title>
|
||||
{{ __('Klik op een foto om deze te vergroten') }}
|
||||
</x-slot:under-title>
|
||||
|
||||
<x-photos :photos="$photos" />
|
||||
</x-content.content-card>
|
||||
|
||||
<div class="mt-6">
|
||||
{{ $photos->links() }}
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
{{ $photos->links() }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@push('javascript')
|
||||
<script src="{{ config('habbo.cdn.fancybox_js') }}"></script>
|
||||
|
||||
<link rel="stylesheet" href="{{ config('habbo.cdn.fancybox_css') }}" />
|
||||
</x-app-layout>
|
||||
|
||||
@@ -3,242 +3,276 @@
|
||||
|
||||
<div class="col-span-12 lg:col-span-9 lg:w-[96%]">
|
||||
<div class="flex flex-col gap-y-4">
|
||||
<x-content.content-card icon="star-icon" classes="border dark:border-gray-900">
|
||||
<x-slot:title>
|
||||
Word DJ
|
||||
</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" 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 py-3 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">Word DJ</p>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">Solliciteer als DJ bij {{ setting('hotel_name') }} Radio!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-slot:under-title>
|
||||
Solliciteer als DJ bij {{ setting('hotel_name') }} Radio!
|
||||
</x-slot:under-title>
|
||||
<div class="p-4 text-sm space-y-4" style="color: var(--color-text)">
|
||||
@if (session('success'))
|
||||
<div class="px-4 py-3 rounded" style="background-color: color-mix(in srgb, #22c55e 15%, transparent); border: 1px solid color-mix(in srgb, #22c55e 30%, transparent); color: #22c55e;">
|
||||
{{ session('success') }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="px-2 text-sm space-y-4 dark:text-gray-200">
|
||||
@if (session('success'))
|
||||
<div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
|
||||
{{ session('success') }}
|
||||
</div>
|
||||
@endif
|
||||
@if (session('error'))
|
||||
<div class="px-4 py-3 rounded" style="background-color: color-mix(in srgb, #ef4444 15%, transparent); border: 1px solid color-mix(in srgb, #ef4444 30%, transparent); color: #ef4444;">
|
||||
{{ session('error') }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if (session('error'))
|
||||
<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
|
||||
{{ session('error') }}
|
||||
</div>
|
||||
@endif
|
||||
@if ($errors->any())
|
||||
<div class="px-4 py-3 rounded" style="background-color: color-mix(in srgb, #ef4444 15%, transparent); border: 1px solid color-mix(in srgb, #ef4444 30%, transparent); color: #ef4444;">
|
||||
<ul class="list-disc list-inside">
|
||||
@foreach ($errors->all() as $error)
|
||||
<li>{{ $error }}</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if ($errors->any())
|
||||
<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
|
||||
<ul class="list-disc list-inside">
|
||||
@foreach ($errors->all() as $error)
|
||||
<li>{{ $error }}</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
@endif
|
||||
@if ($hasPendingApplication)
|
||||
<div class="px-4 py-3 rounded" style="background-color: color-mix(in srgb, #eab308 15%, transparent); border: 1px solid color-mix(in srgb, #eab308 30%, transparent); color: #eab308;">
|
||||
<p class="font-bold">Je hebt al een openstaande aanmelding!</p>
|
||||
<p>Je kunt pas een nieuwe aanmelding doen als je huidige aanmelding is beoordeeld.</p>
|
||||
</div>
|
||||
@else
|
||||
<p>Heb je passie voor muziek en wil je onze community entertainen? Solliciteer dan nu als DJ!</p>
|
||||
|
||||
@if ($hasPendingApplication)
|
||||
<div class="bg-yellow-100 border border-yellow-400 text-yellow-700 px-4 py-3 rounded mb-4">
|
||||
<p class="font-bold">Je hebt al een openstaande aanmelding!</p>
|
||||
<p>Je kunt pas een nieuwe aanmelding doen als je huidige aanmelding is beoordeeld.</p>
|
||||
</div>
|
||||
@else
|
||||
<p>Heb je passie voor muziek en wil je onze community entertainen? Solliciteer dan nu als DJ!</p>
|
||||
<form action="{{ route('radio.apply.store') }}" method="POST" class="space-y-4">
|
||||
@csrf
|
||||
|
||||
<form action="{{ route('radio.apply.store') }}" method="POST" class="space-y-4">
|
||||
@csrf
|
||||
<div class="p-4 rounded" style="background-color: color-mix(in srgb, var(--color-background) 50%, transparent);">
|
||||
<h3 class="font-bold mb-3 text-lg" style="color: var(--color-primary)">Persoonlijke Gegevens</h3>
|
||||
|
||||
<!-- Persoonlijke Gegevens -->
|
||||
<div class="bg-gray-100 dark:bg-gray-800 p-4 rounded">
|
||||
<h3 class="font-bold text-[var(--color-primary)] mb-3 text-lg">Persoonlijke Gegevens</h3>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label for="real_name" class="block text-sm font-medium dark:text-gray-300 mb-1">
|
||||
Echte Naam <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="real_name"
|
||||
name="real_name"
|
||||
required
|
||||
value="{{ old('real_name') }}"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] dark:bg-gray-700 dark:border-gray-600 dark:text-white"
|
||||
placeholder="Je echte naam">
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label for="real_name" class="block text-sm font-medium mb-1" style="color: var(--color-text-muted)">
|
||||
Echte Naam <span style="color: #ef4444;">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="real_name"
|
||||
name="real_name"
|
||||
required
|
||||
value="{{ old('real_name') }}"
|
||||
class="w-full rounded-lg border px-3 py-2 text-sm focus:outline-none"
|
||||
style="background-color: var(--color-background); border-color: color-mix(in srgb, var(--color-text-muted) 20%, transparent); color: var(--color-text);"
|
||||
onfocus="this.style.borderColor='var(--color-primary)'"
|
||||
onblur="this.style.borderColor='color-mix(in srgb, var(--color-text-muted) 20%, transparent)'"
|
||||
placeholder="Je echte naam">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="age" class="block text-sm font-medium dark:text-gray-300 mb-1">
|
||||
Leeftijd <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
id="age"
|
||||
name="age"
|
||||
required
|
||||
min="13"
|
||||
max="100"
|
||||
value="{{ old('age') }}"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] dark:bg-gray-700 dark:border-gray-600 dark:text-white"
|
||||
placeholder="Je leeftijd">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="age" class="block text-sm font-medium mb-1" style="color: var(--color-text-muted)">
|
||||
Leeftijd <span style="color: #ef4444;">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
id="age"
|
||||
name="age"
|
||||
required
|
||||
min="13"
|
||||
max="100"
|
||||
value="{{ old('age') }}"
|
||||
class="w-full rounded-lg border px-3 py-2 text-sm focus:outline-none"
|
||||
style="background-color: var(--color-background); border-color: color-mix(in srgb, var(--color-text-muted) 20%, transparent); color: var(--color-text);"
|
||||
onfocus="this.style.borderColor='var(--color-primary)'"
|
||||
onblur="this.style.borderColor='color-mix(in srgb, var(--color-text-muted) 20%, transparent)'"
|
||||
placeholder="Je leeftijd">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- DJ Gegevens -->
|
||||
<div class="bg-gray-100 dark:bg-gray-800 p-4 rounded">
|
||||
<h3 class="font-bold text-[var(--color-primary)] mb-3 text-lg">DJ Gegevens</h3>
|
||||
<div class="p-4 rounded" style="background-color: color-mix(in srgb, var(--color-background) 50%, transparent);">
|
||||
<h3 class="font-bold mb-3 text-lg" style="color: var(--color-primary)">DJ Gegevens</h3>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label for="availability" class="block text-sm font-medium dark:text-gray-300 mb-1">
|
||||
Beschikbaarheid <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<textarea
|
||||
id="availability"
|
||||
name="availability"
|
||||
rows="3"
|
||||
required
|
||||
minlength="10"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] dark:bg-gray-700 dark:border-gray-600 dark:text-white"
|
||||
placeholder="Wanneer kan je draaien? (bijv. maandag 20:00-22:00, woensdag 19:00-21:00)">{{ old('availability') }}</textarea>
|
||||
<p class="text-xs text-gray-500 mt-1">Geef aan op welke dagen en tijden je beschikbaar bent om te draaien.</p>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label for="availability" class="block text-sm font-medium mb-1" style="color: var(--color-text-muted)">
|
||||
Beschikbaarheid <span style="color: #ef4444;">*</span>
|
||||
</label>
|
||||
<textarea
|
||||
id="availability"
|
||||
name="availability"
|
||||
rows="3"
|
||||
required
|
||||
minlength="10"
|
||||
class="w-full rounded-lg border px-3 py-2 text-sm focus:outline-none"
|
||||
style="background-color: var(--color-background); border-color: color-mix(in srgb, var(--color-text-muted) 20%, transparent); color: var(--color-text);"
|
||||
onfocus="this.style.borderColor='var(--color-primary)'"
|
||||
onblur="this.style.borderColor='color-mix(in srgb, var(--color-text-muted) 20%, transparent)'"
|
||||
placeholder="Wanneer kan je draaien? (bijv. maandag 20:00-22:00, woensdag 19:00-21:00)">{{ old('availability') }}</textarea>
|
||||
<p class="text-xs mt-1" style="color: var(--color-text-muted)">Geef aan op welke dagen en tijden je beschikbaar bent om te draaien.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="experience" class="block text-sm font-medium dark:text-gray-300 mb-1">
|
||||
Ervaring
|
||||
</label>
|
||||
<textarea
|
||||
id="experience"
|
||||
name="experience"
|
||||
rows="3"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] dark:bg-gray-700 dark:border-gray-600 dark:text-white"
|
||||
placeholder="Heb je ervaring als DJ? Zo ja, vertel erover...">{{ old('experience') }}</textarea>
|
||||
<p class="text-xs text-gray-500 mt-1">Heb je eerder als DJ gewerkt? Bijvoorbeeld op andere hotels of radio stations.</p>
|
||||
</div>
|
||||
<div>
|
||||
<label for="experience" class="block text-sm font-medium mb-1" style="color: var(--color-text-muted)">
|
||||
Ervaring
|
||||
</label>
|
||||
<textarea
|
||||
id="experience"
|
||||
name="experience"
|
||||
rows="3"
|
||||
class="w-full rounded-lg border px-3 py-2 text-sm focus:outline-none"
|
||||
style="background-color: var(--color-background); border-color: color-mix(in srgb, var(--color-text-muted) 20%, transparent); color: var(--color-text);"
|
||||
onfocus="this.style.borderColor='var(--color-primary)'"
|
||||
onblur="this.style.borderColor='color-mix(in srgb, var(--color-text-muted) 20%, transparent)'"
|
||||
placeholder="Heb je ervaring als DJ? Zo ja, vertel erover...">{{ old('experience') }}</textarea>
|
||||
<p class="text-xs mt-1" style="color: var(--color-text-muted)">Heb je eerder als DJ gewerkt? Bijvoorbeeld op andere hotels of radio stations.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="motivation" class="block text-sm font-medium dark:text-gray-300 mb-1">
|
||||
Motivatie <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<textarea
|
||||
id="motivation"
|
||||
name="motivation"
|
||||
rows="5"
|
||||
required
|
||||
minlength="50"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] dark:bg-gray-700 dark:border-gray-600 dark:text-white"
|
||||
placeholder="Waarom wil je DJ worden bij ons? Vertel ons waarom we jou moeten kiezen...">{{ old('motivation') }}</textarea>
|
||||
<p class="text-xs text-gray-500 mt-1">Minimaal 50 karakters. Wees zo uitgebreid mogelijk!</p>
|
||||
</div>
|
||||
<div>
|
||||
<label for="motivation" class="block text-sm font-medium mb-1" style="color: var(--color-text-muted)">
|
||||
Motivatie <span style="color: #ef4444;">*</span>
|
||||
</label>
|
||||
<textarea
|
||||
id="motivation"
|
||||
name="motivation"
|
||||
rows="5"
|
||||
required
|
||||
minlength="50"
|
||||
class="w-full rounded-lg border px-3 py-2 text-sm focus:outline-none"
|
||||
style="background-color: var(--color-background); border-color: color-mix(in srgb, var(--color-text-muted) 20%, transparent); color: var(--color-text);"
|
||||
onfocus="this.style.borderColor='var(--color-primary)'"
|
||||
onblur="this.style.borderColor='color-mix(in srgb, var(--color-text-muted) 20%, transparent)'"
|
||||
placeholder="Waarom wil je DJ worden bij ons? Vertel ons waarom we jou moeten kiezen...">{{ old('motivation') }}</textarea>
|
||||
<p class="text-xs mt-1" style="color: var(--color-text-muted)">Minimaal 50 karakters. Wees zo uitgebreid mogelijk!</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="music_style" class="block text-sm font-medium dark:text-gray-300 mb-1">
|
||||
Muziekstijl
|
||||
</label>
|
||||
<textarea
|
||||
id="music_style"
|
||||
name="music_style"
|
||||
rows="2"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] dark:bg-gray-700 dark:border-gray-600 dark:text-white"
|
||||
placeholder="Welke muziekstijl draai je graag? (bijv. Pop, EDM, Hip-Hop, etc.)">{{ old('music_style') }}</textarea>
|
||||
</div>
|
||||
<div>
|
||||
<label for="music_style" class="block text-sm font-medium mb-1" style="color: var(--color-text-muted)">
|
||||
Muziekstijl
|
||||
</label>
|
||||
<textarea
|
||||
id="music_style"
|
||||
name="music_style"
|
||||
rows="2"
|
||||
class="w-full rounded-lg border px-3 py-2 text-sm focus:outline-none"
|
||||
style="background-color: var(--color-background); border-color: color-mix(in srgb, var(--color-text-muted) 20%, transparent); color: var(--color-text);"
|
||||
onfocus="this.style.borderColor='var(--color-primary)'"
|
||||
onblur="this.style.borderColor='color-mix(in srgb, var(--color-text-muted) 20%, transparent)'"
|
||||
placeholder="Welke muziekstijl draai je graag? (bijv. Pop, EDM, Hip-Hop, etc.)">{{ old('music_style') }}</textarea>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="discord_username" class="block text-sm font-medium dark:text-gray-300 mb-1">
|
||||
Discord Gebruikersnaam
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="discord_username"
|
||||
name="discord_username"
|
||||
value="{{ old('discord_username') }}"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] dark:bg-gray-700 dark:border-gray-600 dark:text-white"
|
||||
placeholder="bijv. gebruiker#1234">
|
||||
<p class="text-xs text-gray-500 mt-1">Voor contact over je aanmelding.</p>
|
||||
</div>
|
||||
<div>
|
||||
<label for="discord_username" class="block text-sm font-medium mb-1" style="color: var(--color-text-muted)">
|
||||
Discord Gebruikersnaam
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="discord_username"
|
||||
name="discord_username"
|
||||
value="{{ old('discord_username') }}"
|
||||
class="w-full rounded-lg border px-3 py-2 text-sm focus:outline-none"
|
||||
style="background-color: var(--color-background); border-color: color-mix(in srgb, var(--color-text-muted) 20%, transparent); color: var(--color-text);"
|
||||
onfocus="this.style.borderColor='var(--color-primary)'"
|
||||
onblur="this.style.borderColor='color-mix(in srgb, var(--color-text-muted) 20%, transparent)'"
|
||||
placeholder="bijv. gebruiker#1234">
|
||||
<p class="text-xs mt-1" style="color: var(--color-text-muted)">Voor contact over je aanmelding.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="rank_id" class="block text-sm font-medium dark:text-gray-300 mb-1">
|
||||
Gewenste DJ Rank
|
||||
</label>
|
||||
<select
|
||||
id="rank_id"
|
||||
name="rank_id"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] dark:bg-gray-700 dark:border-gray-600 dark:text-white">
|
||||
<option value="">-- Kies een rank (optioneel) --</option>
|
||||
@foreach ($ranks as $rank)
|
||||
<option value="{{ $rank->id }}" {{ old('rank_id') == $rank->id ? 'selected' : '' }}>
|
||||
{{ $rank->name }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="rank_id" class="block text-sm font-medium mb-1" style="color: var(--color-text-muted)">
|
||||
Gewenste DJ Rank
|
||||
</label>
|
||||
<select
|
||||
id="rank_id"
|
||||
name="rank_id"
|
||||
class="w-full rounded-lg border px-3 py-2 text-sm focus:outline-none"
|
||||
style="background-color: var(--color-background); border-color: color-mix(in srgb, var(--color-text-muted) 20%, transparent); color: var(--color-text);"
|
||||
onfocus="this.style.borderColor='var(--color-primary)'"
|
||||
onblur="this.style.borderColor='color-mix(in srgb, var(--color-text-muted) 20%, transparent)'">
|
||||
<option value="">-- Kies een rank (optioneel) --</option>
|
||||
@foreach ($ranks as $rank)
|
||||
<option value="{{ $rank->id }}" {{ old('rank_id') == $rank->id ? 'selected' : '' }}>
|
||||
{{ $rank->name }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2">
|
||||
<button type="submit" class="flex-1 bg-[var(--color-primary)] hover:bg-[var(--color-primary)] text-white px-6 py-3 rounded transition font-bold">
|
||||
Verstuur Aanmelding
|
||||
</button>
|
||||
<a href="{{ route('radio.index') }}" class="bg-gray-300 hover:bg-gray-400 text-gray-800 px-6 py-3 rounded transition">
|
||||
Annuleren
|
||||
</a>
|
||||
<div class="flex gap-2">
|
||||
<button type="submit" class="flex-1 px-6 py-3 rounded-lg transition font-bold border-2" style="background-color: var(--color-primary); color: var(--button-text-color); border-color: var(--color-primary);">
|
||||
Verstuur Aanmelding
|
||||
</button>
|
||||
<a href="{{ route('radio.index') }}" class="px-6 py-3 rounded-lg transition font-semibold" style="background-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent); color: var(--color-text); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
Annuleren
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@endif
|
||||
</div>
|
||||
</x-content.content-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 lg:col-span-3 lg:w-[110%] space-y-4 lg:-ml-[32px]">
|
||||
<x-content.content-card icon="info-icon" classes="border dark:border-gray-900">
|
||||
<x-slot:title>
|
||||
DJ Info
|
||||
</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" 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 py-3 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">DJ Info</p>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">Waarom word DJ?</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-slot:under-title>
|
||||
Waarom word DJ?
|
||||
</x-slot:under-title>
|
||||
<div class="p-4 text-sm space-y-4" style="color: var(--color-text)">
|
||||
<p>Als DJ bij {{ setting('hotel_name') }} Radio krijg je de kans om je favoriete muziek te delen met de community.</p>
|
||||
|
||||
<div class="px-2 text-sm space-y-4 dark:text-gray-200">
|
||||
<p>Als DJ bij {{ setting('hotel_name') }} Radio krijg je de kans om je favoriete muziek te delen met de community.</p>
|
||||
|
||||
<div class="space-y-2 text-xs">
|
||||
<p><strong class="text-[var(--color-primary)]">Voordelen:</strong></p>
|
||||
<ul class="list-disc list-inside space-y-1">
|
||||
<li>Eigen radioshow</li>
|
||||
<li>Leuke community</li>
|
||||
<li>Ervaring opdoen</li>
|
||||
<li>Events draaien</li>
|
||||
</ul>
|
||||
<div class="space-y-2 text-xs">
|
||||
<p><strong style="color: var(--color-primary)">Voordelen:</strong></p>
|
||||
<ul class="list-disc list-inside space-y-1">
|
||||
<li>Eigen radioshow</li>
|
||||
<li>Leuke community</li>
|
||||
<li>Ervaring opdoen</li>
|
||||
<li>Events draaien</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<p class="text-xs" style="color: var(--color-text-muted)">We zoeken naar gepassioneerde muziekliefhebbers!</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-xs text-gray-500">We zoeken naar gepassioneerde muziekliefhebbers!</p>
|
||||
</div>
|
||||
</x-content.content-card>
|
||||
<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" 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 py-3 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">Beschikbare Ranks</p>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">DJ Ranks</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-content.content-card icon="musical-note-icon" classes="border dark:border-gray-900">
|
||||
<x-slot:title>
|
||||
Beschikbare Ranks
|
||||
</x-slot:title>
|
||||
|
||||
<x-slot:under-title>
|
||||
DJ Ranks
|
||||
</x-slot:under-title>
|
||||
|
||||
<div class="px-2 text-sm space-y-2 dark:text-gray-200">
|
||||
@forelse ($ranks as $rank)
|
||||
<div class="flex items-center gap-2 p-2 bg-gray-100 dark:bg-gray-800 rounded">
|
||||
@if ($rank->badge_code)
|
||||
<img src="{{ sprintf(setting('badge_imaging_path'), $rank->badge_code) }}" alt="" class="w-6 h-6">
|
||||
@endif
|
||||
<span>{{ $rank->name }}</span>
|
||||
<div class="p-4 text-sm space-y-2" style="color: var(--color-text)">
|
||||
@forelse ($ranks as $rank)
|
||||
<div class="flex items-center gap-2 p-2 rounded" style="background-color: color-mix(in srgb, var(--color-background) 50%, transparent);">
|
||||
@if ($rank->badge_code)
|
||||
<img src="{{ sprintf(setting('badge_imaging_path'), $rank->badge_code) }}" alt="" class="w-6 h-6">
|
||||
@endif
|
||||
<span>{{ $rank->name }}</span>
|
||||
</div>
|
||||
@empty
|
||||
<p style="color: var(--color-text-muted)">Momenteel geen ranks beschikbaar.</p>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<p class="text-gray-500">Momenteel geen ranks beschikbaar.</p>
|
||||
@endforelse
|
||||
</div>
|
||||
</x-content.content-card>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
||||
@@ -3,52 +3,60 @@
|
||||
|
||||
<div class="col-span-12 lg:col-span-9 lg:w-[96%]">
|
||||
<div class="flex flex-col gap-y-4">
|
||||
<x-content.content-card icon="music-icon" classes="border dark:border-gray-900">
|
||||
<x-slot:title>
|
||||
{{ setting('hotel_name') }} Radio
|
||||
</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" 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 py-3 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">{{ setting('hotel_name') }} Radio</p>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">Radio is momenteel offline</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-slot:under-title>
|
||||
Radio is momenteel offline
|
||||
</x-slot:under-title>
|
||||
<div class="p-4 text-sm space-y-4" style="color: var(--color-text)">
|
||||
<div class="rounded-lg p-8 text-center" style="background-color: color-mix(in srgb, var(--color-background) 50%, transparent);">
|
||||
<div class="text-6xl mb-4">📻</div>
|
||||
<h2 class="text-xl font-bold mb-2" style="color: var(--color-primary)">Radio is Offline</h2>
|
||||
<p style="color: var(--color-text-muted)">Onze radio is momenteel niet beschikbaar.</p>
|
||||
<p class="text-sm mt-2" style="color: var(--color-text-muted)">Kom later terug om te luisteren naar onze geweldige DJ's!</p>
|
||||
|
||||
<div class="px-2 text-sm space-y-4 dark:text-gray-200">
|
||||
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-8 text-center">
|
||||
<div class="text-6xl mb-4">📻</div>
|
||||
<h2 class="text-xl font-bold text-[var(--color-primary)] mb-2">Radio is Offline</h2>
|
||||
<p class="text-gray-500">Onze radio is momenteel niet beschikbaar.</p>
|
||||
<p class="text-sm text-gray-400 mt-2">Kom later terug om te luisteren naar onze geweldige DJ's!</p>
|
||||
|
||||
<div class="mt-6 space-y-2">
|
||||
<a href="{{ route('radio.rooster') }}" class="block text-[var(--color-primary)] hover:underline">
|
||||
Bekijk het rooster
|
||||
</a>
|
||||
@if(setting('radio_applications_enabled') == '1')
|
||||
<a href="{{ route('radio.apply') }}" class="block text-[var(--color-primary)] hover:underline">
|
||||
Word DJ
|
||||
</a>
|
||||
@endif
|
||||
<div class="mt-6 space-y-2">
|
||||
<a href="{{ route('radio.rooster') }}" class="block" style="color: var(--color-primary); text-decoration: underline;">
|
||||
Bekijk het rooster
|
||||
</a>
|
||||
@if(setting('radio_applications_enabled') == '1')
|
||||
<a href="{{ route('radio.apply') }}" class="block" style="color: var(--color-primary); text-decoration: underline;">
|
||||
Word DJ
|
||||
</a>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-content.content-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 lg:col-span-3 lg:w-[110%] space-y-4 lg:-ml-[32px]">
|
||||
<x-content.content-card icon="info-icon" classes="border dark:border-gray-900">
|
||||
<x-slot:title>
|
||||
Radio Info
|
||||
</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" 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 py-3 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">Radio Info</p>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">Over onze radio</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-slot:under-title>
|
||||
Over onze radio
|
||||
</x-slot:under-title>
|
||||
|
||||
<div class="px-2 text-sm space-y-4 dark:text-gray-200">
|
||||
<p>Onze radio is normaal gesproken 24/7 online met de beste muziek!</p>
|
||||
<p class="text-xs text-gray-500">De radio kan tijdelijk offline zijn voor onderhoud.</p>
|
||||
<div class="p-4 text-sm space-y-4" style="color: var(--color-text)">
|
||||
<p>Onze radio is normaal gesproken 24/7 online met de beste muziek!</p>
|
||||
<p class="text-xs" style="color: var(--color-text-muted)">De radio kan tijdelijk offline zijn voor onderhoud.</p>
|
||||
</div>
|
||||
</div>
|
||||
</x-content.content-card>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
||||
@@ -3,254 +3,300 @@
|
||||
|
||||
<div class="col-span-12 lg:col-span-9 lg:w-[96%]">
|
||||
<div class="flex flex-col gap-y-4">
|
||||
<x-content.content-card icon="music-icon" classes="border dark:border-gray-900">
|
||||
<x-slot:title>
|
||||
{{ setting('hotel_name') }} Radio
|
||||
</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" 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 py-3 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">{{ setting('hotel_name') }} Radio</p>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">Luister live naar onze DJ's!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-slot:under-title>
|
||||
Luister live naar onze DJ's!
|
||||
</x-slot:under-title>
|
||||
<div class="p-4 text-sm space-y-4" style="color: var(--color-text)">
|
||||
@if($currentDJ && is_array($currentDJ) && isset($currentDJ['username']))
|
||||
@php
|
||||
$currentDJBanner = $banners->first(function($banner) use ($currentDJ) {
|
||||
return $banner->user && $banner->user->username === $currentDJ['username'];
|
||||
});
|
||||
@endphp
|
||||
@if($currentDJBanner)
|
||||
<div class="mb-4 overflow-hidden rounded-lg border-2 shadow-lg" style="border-color: var(--color-primary); box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--color-primary) 20%, transparent);">
|
||||
<div class="relative">
|
||||
<img src="{{ $currentDJBanner->image_url }}" alt="{{ $currentDJBanner->title ?? 'DJ Banner' }}" class="w-full h-56 object-cover">
|
||||
<div class="absolute top-2 left-2">
|
||||
<span class="bg-red-500 text-white px-3 py-1 rounded-full text-sm font-bold animate-pulse">🔴 NU LIVE</span>
|
||||
</div>
|
||||
@if($currentDJBanner->title || $currentDJBanner->description)
|
||||
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent p-4 rounded-b-lg">
|
||||
@if($currentDJBanner->title)
|
||||
<p class="text-white font-bold text-lg">{{ $currentDJBanner->title }}</p>
|
||||
@endif
|
||||
@if($currentDJBanner->description)
|
||||
<p class="text-white/80 text-sm">{{ $currentDJBanner->description }}</p>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
@endif
|
||||
|
||||
<div class="px-2 text-sm space-y-4 dark:text-gray-200">
|
||||
@if($currentDJ && is_array($currentDJ) && isset($currentDJ['username']))
|
||||
@php
|
||||
$currentDJBanner = $banners->first(function($banner) use ($currentDJ) {
|
||||
return $banner->user && $banner->user->username === $currentDJ['username'];
|
||||
});
|
||||
@endphp
|
||||
@if($currentDJBanner)
|
||||
<div class="mb-4 overflow-hidden rounded-lg border-2 border-[var(--color-primary)] shadow-lg shadow-[var(--color-primary)]/20">
|
||||
<div class="relative">
|
||||
<img src="{{ $currentDJBanner->image_url }}" alt="{{ $currentDJBanner->title ?? 'DJ Banner' }}" class="w-full h-56 object-cover">
|
||||
<div class="absolute top-2 left-2">
|
||||
<span class="bg-red-500 text-white px-3 py-1 rounded-full text-sm font-bold animate-pulse">🔴 NU LIVE</span>
|
||||
</div>
|
||||
@if($currentDJBanner->title || $currentDJBanner->description)
|
||||
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent p-4 rounded-b-lg">
|
||||
@if($currentDJBanner->title)
|
||||
<p class="text-white font-bold text-lg ">{{ $currentDJBanner->title }}</p>
|
||||
@endif
|
||||
@if($currentDJBanner->description)
|
||||
<p class="text-white/80 text-sm ">{{ $currentDJBanner->description }}</p>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
@endif
|
||||
@if($banners->count() > 0)
|
||||
<div class="mb-4">
|
||||
<h3 class="text-lg font-bold mb-3" style="color: var(--color-text)">🎧 DJ Banners</h3>
|
||||
<div class="overflow-hidden rounded-lg">
|
||||
<div id="banner-carousel" class="relative">
|
||||
@foreach($banners as $index => $banner)
|
||||
<div class="banner-slide {{ $index === 0 ? 'block' : 'hidden' }}" data-index="{{ $index }}">
|
||||
<div class="relative">
|
||||
<img src="{{ $banner->image_url }}" alt="{{ $banner->title ?? 'DJ Banner' }}" class="w-full h-48 object-cover rounded-lg">
|
||||
@if($banner->title)
|
||||
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4 rounded-b-lg">
|
||||
<p class="text-white font-bold">{{ $banner->title }}</p>
|
||||
@if($banner->user)
|
||||
<p class="mt-1 text-xs" style="color: var(--color-primary)">DJ: {{ $banner->user->username }}</p>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@if($banners->count() > 1)
|
||||
<div class="flex justify-center gap-2 mt-2">
|
||||
@foreach($banners as $index => $banner)
|
||||
<button class="banner-dot w-2 h-2 rounded-full bg-gray-400 transition-all duration-300 {{ $index === 0 ? 'w-4' : '' }}" data-index="{{ $index }}"></button>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if($banners->count() > 0)
|
||||
<div class="mb-4">
|
||||
<h3 class="text-lg font-bold mb-3" style="color: var(--color-text)">🎧 DJ Banners</h3>
|
||||
<div class="overflow-hidden rounded-lg">
|
||||
<div id="banner-carousel" class="relative">
|
||||
@foreach($banners as $index => $banner)
|
||||
<div class="banner-slide {{ $index === 0 ? 'block' : 'hidden' }}" data-index="{{ $index }}">
|
||||
<div class="relative">
|
||||
<img src="{{ $banner->image_url }}" alt="{{ $banner->title ?? 'DJ Banner' }}" class="w-full h-48 object-cover rounded-lg">
|
||||
@if($banner->title)
|
||||
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4 rounded-b-lg">
|
||||
<p class="text-white font-bold ">{{ $banner->title }}</p>
|
||||
@if($banner->user)
|
||||
<p class="text-[var(--color-primary)] text-xs mt-1 ">DJ: {{ $banner->user->username }}</p>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@if($banners->count() > 1)
|
||||
<div class="flex justify-center gap-2 mt-2">
|
||||
@foreach($banners as $index => $banner)
|
||||
<button class="banner-dot w-2 h-2 rounded-full bg-gray-400 transition-all duration-300 {{ $index === 0 ? 'bg-[var(--color-primary)] w-4' : '' }}" data-index="{{ $index }}"></button>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
<div class="rounded-lg p-4" style="background-color: color-mix(in srgb, var(--color-background) 80%, transparent);">
|
||||
<div class="mb-4">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-3">
|
||||
@if($isOnline)
|
||||
<div class="w-3 h-3 rounded-full bg-red-500 animate-pulse"></div>
|
||||
<span style="color: var(--color-primary)" class="font-bold">LIVE</span>
|
||||
@else
|
||||
<div class="w-3 h-3 rounded-full" style="background-color: var(--color-text-muted)"></div>
|
||||
<span style="color: var(--color-text-muted)" class="font-bold">OFFLINE</span>
|
||||
@endif
|
||||
</div>
|
||||
@if($isOnline)
|
||||
<div class="flex items-center gap-1 text-xs" style="color: var(--color-text-muted)" id="listeners-container">
|
||||
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3z"/>
|
||||
</svg>
|
||||
<span id="listeners-count">0</span> luisteraars
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="bg-black/80 rounded-lg p-4">
|
||||
<div class="mb-4">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-3">
|
||||
@if($isOnline)
|
||||
<div class="w-3 h-3 rounded-full bg-red-500 animate-pulse"></div>
|
||||
<span class="text-[var(--color-primary)] font-bold">LIVE</span>
|
||||
@else
|
||||
<div class="w-3 h-3 rounded-full bg-gray-500"></div>
|
||||
<span class="text-gray-500 font-bold" style="color: var(--color-text-muted)">OFFLINE</span>
|
||||
@endif
|
||||
</div>
|
||||
@if($isOnline)
|
||||
<div class="flex items-center gap-1 text-xs text-gray-400" id="listeners-container">
|
||||
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3z"/>
|
||||
</svg>
|
||||
<span id="listeners-count">0</span> luisteraars
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@if($currentDJ && is_array($currentDJ) && isset($currentDJ['username']))
|
||||
<div class="mb-3 p-3 rounded-lg" style="background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);">
|
||||
<p class="text-xs mb-1" style="color: var(--color-text-muted)">Nu aan het draaien:</p>
|
||||
<p class="font-bold text-lg" style="color: var(--color-primary)">{{ $currentDJ['username'] }}</p>
|
||||
@if(isset($currentDJ['show_name']) && $currentDJ['show_name'])
|
||||
<p class="text-sm" style="color: var(--color-text-muted)">{{ $currentDJ['show_name'] }}</p>
|
||||
@endif
|
||||
</div>
|
||||
@else
|
||||
<p class="text-sm mb-3" style="color: var(--color-text-muted)">Geen DJ actief op dit moment</p>
|
||||
@endif
|
||||
|
||||
@if($currentDJ && is_array($currentDJ) && isset($currentDJ['username']))
|
||||
<div class="mb-3 p-3 bg-white/10 rounded-lg">
|
||||
<p class="text-xs text-gray-400 mb-1">Nu aan het draaien:</p>
|
||||
<p class="text-[var(--color-primary)] font-bold text-lg">{{ $currentDJ['username'] }}</p>
|
||||
@if(isset($currentDJ['show_name']) && $currentDJ['show_name'])
|
||||
<p class="text-white text-sm ">{{ $currentDJ['show_name'] }}</p>
|
||||
@endif
|
||||
</div>
|
||||
@else
|
||||
<p class="text-gray-400 text-sm mb-3" style="color: var(--color-text-muted)">Geen DJ actief op dit moment</p>
|
||||
@endif
|
||||
@if($isOnline)
|
||||
<div id="now-playing-container" class="mb-3 p-2 rounded" style="background-color: color-mix(in srgb, var(--color-text-muted) 5%, transparent);">
|
||||
<p class="text-xs mb-1" style="color: var(--color-text-muted)">Nu aan het spelen:</p>
|
||||
<p id="now-playing-song" class="font-medium truncate" style="color: var(--color-text)">Laden...</p>
|
||||
<p id="now-playing-artist" class="text-sm" style="color: var(--color-text-muted)"></p>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@if($isOnline)
|
||||
<div id="now-playing-container" class="mb-3 p-2 bg-white/5 rounded">
|
||||
<p class="text-xs text-gray-400 mb-1">Nu aan het spelen:</p>
|
||||
<p id="now-playing-song" class="text-white font-medium truncate ">Laden...</p>
|
||||
<p id="now-playing-artist" class="text-gray-400 text-sm"></p>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@if($isOnline)
|
||||
<div class="flex items-center gap-4">
|
||||
<button id="play-btn" class="px-6 py-2 rounded-lg transition flex items-center gap-2 font-semibold border-2" style="background-color: var(--color-primary); color: var(--button-text-color); border-color: var(--color-primary);">
|
||||
<span id="play-icon">▶</span>
|
||||
<span id="play-text">Play</span>
|
||||
</button>
|
||||
<div class="flex-1 flex items-center gap-2">
|
||||
<svg class="w-4 h-4" style="color: var(--color-text-muted)" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM14.657 2.929a1 1 0 011.414 0A9.972 9.972 0 0119 10a9.972 9.972 0 01-2.929 7.071 1 1 0 01-1.414-1.414A7.971 7.971 0 0017 10c0-2.21-.894-4.208-2.343-5.657a1 1 0 010-1.414z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<input type="range" id="volume" min="0" max="100" value="50" class="flex-1 h-2 rounded-lg appearance-none cursor-pointer" style="background-color: color-mix(in srgb, var(--color-text-muted) 20%, transparent);">
|
||||
</div>
|
||||
</div>
|
||||
<audio id="radio-audio" preload="none"></audio>
|
||||
@else
|
||||
<div class="text-sm flex-1 text-center py-2 rounded" style="color: var(--color-text-muted); background-color: color-mix(in srgb, var(--color-text-muted) 5%, transparent);">
|
||||
Radio is momenteel offline. We zijn zo terug!
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if($isOnline)
|
||||
<div class="flex items-center gap-4">
|
||||
<button id="play-btn" class="bg-[var(--color-primary)] hover:bg-[var(--color-primary)] text-white px-6 py-2 rounded-lg transition flex items-center gap-2">
|
||||
<span id="play-icon">▶</span>
|
||||
<span id="play-text">Play</span>
|
||||
</button>
|
||||
<div class="flex-1 flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM14.657 2.929a1 1 0 011.414 0A9.972 9.972 0 0119 10a9.972 9.972 0 01-2.929 7.071 1 1 0 01-1.414-1.414A7.971 7.971 0 0017 10c0-2.21-.894-4.208-2.343-5.657a1 1 0 010-1.414z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<input type="range" id="volume" min="0" max="100" value="50" class="flex-1 h-2 bg-gray-600 rounded-lg appearance-none cursor-pointer">
|
||||
</div>
|
||||
</div>
|
||||
<audio id="radio-audio" preload="none"></audio>
|
||||
@else
|
||||
<div class="text-gray-400 text-sm flex-1 text-center py-2 bg-white/5 rounded">
|
||||
Radio is momenteel offline. We zijn zo terug!
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</x-content.content-card>
|
||||
@if($todaySchedule->count() > 0)
|
||||
<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" 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 py-3 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">Vandaag op Radio</p>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)"><a href="{{ route('radio.rooster') }}" style="color: rgba(255,255,255,0.9); text-decoration: underline;">Bekijk volledig rooster</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 text-sm space-y-3" style="color: var(--color-text)">
|
||||
@foreach($todaySchedule as $slot)
|
||||
<div class="flex items-center gap-3 p-3 rounded-lg" style="background-color: color-mix(in srgb, var(--color-background) 50%, transparent); {{ $currentDJ && is_array($currentDJ) && isset($currentDJ['username']) && ($currentDJ['username'] ?? '') === $slot->user->username ? 'border: 2px solid ' . 'var(--color-primary)' : '' }}">
|
||||
<div class="text-center min-w-[60px]">
|
||||
<p class="font-bold" style="color: var(--color-primary)">{{ $slot->start_time->format('H:i') }}</p>
|
||||
<p class="text-xs" style="color: var(--color-text-muted)">{{ $slot->end_time->format('H:i') }}</p>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="font-bold" style="color: var(--color-text)">{{ $slot->user->username }}</p>
|
||||
@if($slot->show_name)
|
||||
<p class="text-sm" style="color: var(--color-text-muted)">{{ $slot->show_name }}</p>
|
||||
@endif
|
||||
</div>
|
||||
@if($currentDJ && is_array($currentDJ) && isset($currentDJ['username']) && ($currentDJ['username'] ?? '') === $slot->user->username)
|
||||
<span class="px-2 py-1 bg-red-500 text-white text-xs rounded">LIVE</span>
|
||||
@endif
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if($todaySchedule->count() > 0)
|
||||
<x-content.content-card icon="calendar-icon" classes="border dark:border-gray-900">
|
||||
<x-slot:title>Vandaag op Radio</x-slot:title>
|
||||
<x-slot:under-title>
|
||||
<a href="{{ route('radio.rooster') }}" class="text-[var(--color-primary)] hover:underline">Bekijk volledig rooster</a>
|
||||
</x-slot:under-title>
|
||||
<div class="px-2 text-sm space-y-3 dark:text-gray-200">
|
||||
@foreach($todaySchedule as $slot)
|
||||
<div class="flex items-center gap-3 p-3 bg-gray-100 dark:bg-gray-800 rounded-lg {{ $currentDJ && is_array($currentDJ) && isset($currentDJ['username']) && ($currentDJ['username'] ?? '') === $slot->user->username ? 'ring-2 ring-[var(--color-primary)]' : '' }}">
|
||||
<div class="text-center min-w-[60px]">
|
||||
<p class="font-bold text-[var(--color-primary)]">{{ $slot->start_time->format('H:i') }}</p>
|
||||
<p class="text-xs text-gray-500">{{ $slot->end_time->format('H:i') }}</p>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="font-bold">{{ $slot->user->username }}</p>
|
||||
@if($slot->show_name)
|
||||
<p class="text-sm text-gray-400">{{ $slot->show_name }}</p>
|
||||
@endif
|
||||
</div>
|
||||
@if($currentDJ && is_array($currentDJ) && isset($currentDJ['username']) && ($currentDJ['username'] ?? '') === $slot->user->username)
|
||||
<span class="px-2 py-1 bg-red-500 text-white text-xs rounded ">LIVE</span>
|
||||
@endif
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</x-content.content-card>
|
||||
@endif
|
||||
|
||||
@if($banners->count() > 0)
|
||||
<x-content.content-card icon="photo-icon" classes="border dark:border-gray-900">
|
||||
<x-slot:title>Alle DJ Banners</x-slot:title>
|
||||
<x-slot:under-title>Ontdek onze DJ's</x-slot:under-title>
|
||||
<div class="px-2">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
@foreach($banners as $banner)
|
||||
<div class="group relative overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700 hover:border-[var(--color-primary)] transition-all duration-300">
|
||||
<img src="{{ $banner->image_url }}" alt="{{ $banner->title ?? 'DJ Banner' }}" class="w-full h-32 object-cover transition-transform duration-300 group-hover:scale-105">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
<div class="absolute bottom-0 left-0 right-0 p-3">
|
||||
@if($banner->title)
|
||||
<p class="text-white font-bold text-sm ">{{ $banner->title }}</p>
|
||||
@endif
|
||||
@if($banner->user)
|
||||
<p class="text-[var(--color-primary)] text-xs">DJ: {{ $banner->user->username }}</p>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</x-content.content-card>
|
||||
@endif
|
||||
@if($banners->count() > 0)
|
||||
<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" 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 py-3 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">Alle DJ Banners</p>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">Ontdek onze DJ's</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
@foreach($banners as $banner)
|
||||
<div class="group relative overflow-hidden rounded-lg transition-all duration-300" style="border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
<img src="{{ $banner->image_url }}" alt="{{ $banner->title ?? 'DJ Banner' }}" class="w-full h-32 object-cover transition-transform duration-300 group-hover:scale-105">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
<div class="absolute bottom-0 left-0 right-0 p-3">
|
||||
@if($banner->title)
|
||||
<p class="text-white font-bold text-sm">{{ $banner->title }}</p>
|
||||
@endif
|
||||
@if($banner->user)
|
||||
<p class="text-xs" style="color: var(--color-primary)">DJ: {{ $banner->user->username }}</p>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 lg:col-span-3 lg:w-[110%] space-y-4 lg:-ml-[32px]">
|
||||
@if($currentDJ && is_array($currentDJ) && isset($currentDJ['username']))
|
||||
@php
|
||||
$currentDJBanner = $banners->first(function($banner) use ($currentDJ) {
|
||||
return $banner->user && $banner->user->username === $currentDJ['username'];
|
||||
});
|
||||
@endphp
|
||||
<x-content.content-card icon="user-icon" classes="border dark:border-gray-900 bg-gradient-to-br from-[var(--color-primary)]/10 to-transparent">
|
||||
<x-slot:title>Nu aan het Draaien</x-slot:title>
|
||||
<x-slot:under-title>Huidige DJ</x-slot:under-title>
|
||||
<div class="px-2 text-center">
|
||||
@if($currentDJBanner)
|
||||
<img src="{{ $currentDJBanner->image_url }}" alt="{{ $currentDJ['username'] }}" class="w-full h-24 object-cover rounded-lg mb-3">
|
||||
@endif
|
||||
<div class="inline-flex items-center gap-2 mb-2">
|
||||
<span class="w-2 h-2 bg-red-500 rounded-full animate-pulse"></span>
|
||||
<span class="text-red-500 font-bold text-sm">LIVE</span>
|
||||
</div>
|
||||
<p class="text-xl font-bold text-[var(--color-primary)]">{{ $currentDJ['username'] }}</p>
|
||||
@if(isset($currentDJ['show_name']) && $currentDJ['show_name'])
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">{{ $currentDJ['show_name'] }}</p>
|
||||
@endif
|
||||
</div>
|
||||
</x-content.content-card>
|
||||
@endif
|
||||
@if($currentDJ && is_array($currentDJ) && isset($currentDJ['username']))
|
||||
@php
|
||||
$currentDJBanner = $banners->first(function($banner) use ($currentDJ) {
|
||||
return $banner->user && $banner->user->username === $currentDJ['username'];
|
||||
});
|
||||
@endphp
|
||||
<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" 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 py-3 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">Nu aan het Draaien</p>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">Huidige DJ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 text-center" style="color: var(--color-text)">
|
||||
@if($currentDJBanner)
|
||||
<img src="{{ $currentDJBanner->image_url }}" alt="{{ $currentDJ['username'] }}" class="w-full h-24 object-cover rounded-lg mb-3">
|
||||
@endif
|
||||
<div class="inline-flex items-center gap-2 mb-2">
|
||||
<span class="w-2 h-2 bg-red-500 rounded-full animate-pulse"></span>
|
||||
<span class="text-red-500 font-bold text-sm">LIVE</span>
|
||||
</div>
|
||||
<p class="text-xl font-bold" style="color: var(--color-primary)">{{ $currentDJ['username'] }}</p>
|
||||
@if(isset($currentDJ['show_name']) && $currentDJ['show_name'])
|
||||
<p class="text-sm mt-1" style="color: var(--color-text-muted)">{{ $currentDJ['show_name'] }}</p>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<x-content.content-card icon="info-icon" classes="border dark:border-gray-900">
|
||||
<x-slot:title>Radio Info</x-slot:title>
|
||||
<x-slot:under-title>Over onze radio</x-slot:under-title>
|
||||
<div class="px-2 text-sm space-y-4 dark:text-gray-200">
|
||||
<p>Luister live naar de beste muziek 24/7! Onze DJ's spelen jouw favoriete tracks.</p>
|
||||
<div class="space-y-2">
|
||||
<a href="{{ route('radio.rooster') }}" class="block text-[var(--color-primary)] hover:underline">📅 Bekijk het rooster</a>
|
||||
@if(setting('radio_applications_enabled') == '1')
|
||||
<a href="{{ route('radio.apply') }}" class="block text-[var(--color-primary)] hover:underline">🎤 Word DJ</a>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</x-content.content-card>
|
||||
<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" 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 py-3 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">Radio Info</p>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">Over onze radio</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 text-sm space-y-4" style="color: var(--color-text)">
|
||||
<p>Luister live naar de beste muziek 24/7! Onze DJ's spelen jouw favoriete tracks.</p>
|
||||
<div class="space-y-2">
|
||||
<a href="{{ route('radio.rooster') }}" class="block" style="color: var(--color-primary); text-decoration: underline;">📅 Bekijk het rooster</a>
|
||||
@if(setting('radio_applications_enabled') == '1')
|
||||
<a href="{{ route('radio.apply') }}" class="block" style="color: var(--color-primary); text-decoration: underline;">🎤 Word DJ</a>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if($ranks->count() > 0)
|
||||
<x-content.content-card icon="star-icon" classes="border dark:border-gray-900">
|
||||
<x-slot:title>DJ Ranks</x-slot:title>
|
||||
<x-slot:under-title>Onze DJ niveaus</x-slot:under-title>
|
||||
<div class="px-2 text-sm space-y-2 dark:text-gray-200">
|
||||
@foreach($ranks as $rank)
|
||||
<div class="flex items-center gap-2 p-2 bg-gray-100 dark:bg-gray-800 rounded">
|
||||
@if($rank->badge_code)
|
||||
<img src="{{ sprintf(setting('badge_imaging_path'), $rank->badge_code) }}" alt="" class="w-6 h-6">
|
||||
@endif
|
||||
<span>{{ $rank->name }}</span>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</x-content.content-card>
|
||||
@endif
|
||||
@if($ranks->count() > 0)
|
||||
<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" 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 py-3 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">DJ Ranks</p>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">Onze DJ niveaus</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 text-sm space-y-2" style="color: var(--color-text)">
|
||||
@foreach($ranks as $rank)
|
||||
<div class="flex items-center gap-2 p-2 rounded" style="background-color: color-mix(in srgb, var(--color-background) 50%, transparent);">
|
||||
@if($rank->badge_code)
|
||||
<img src="{{ sprintf(setting('badge_imaging_path'), $rank->badge_code) }}" alt="" class="w-6 h-6">
|
||||
@endif
|
||||
<span>{{ $rank->name }}</span>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<script>
|
||||
@@ -263,7 +309,8 @@
|
||||
banners[currentBanner].classList.add('hidden');
|
||||
banners[currentBanner].classList.remove('block');
|
||||
if (bannerDots[currentBanner]) {
|
||||
bannerDots[currentBanner].classList.remove('bg-[var(--color-primary)]', 'w-4');
|
||||
bannerDots[currentBanner].classList.remove('w-4');
|
||||
bannerDots[currentBanner].classList.remove('bg-[var(--color-primary)]');
|
||||
bannerDots[currentBanner].classList.add('bg-gray-400');
|
||||
}
|
||||
|
||||
|
||||
@@ -3,126 +3,138 @@
|
||||
|
||||
<div class="col-span-12 lg:col-span-9 lg:w-[96%]">
|
||||
<div class="flex flex-col gap-y-4">
|
||||
<x-content.content-card icon="calendar-icon" classes="border dark:border-gray-900">
|
||||
<x-slot:title>
|
||||
DJ Rooster
|
||||
</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" 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 py-3 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">DJ Rooster</p>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">Wanneer is de volgende show?</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-slot:under-title>
|
||||
Wanneer is de volgende show?
|
||||
</x-slot:under-title>
|
||||
<div class="p-4 text-sm space-y-6" style="color: var(--color-text)">
|
||||
@php
|
||||
$days = [
|
||||
'monday' => 'Maandag',
|
||||
'tuesday' => 'Dinsdag',
|
||||
'wednesday' => 'Woensdag',
|
||||
'thursday' => 'Donderdag',
|
||||
'friday' => 'Vrijdag',
|
||||
'saturday' => 'Zaterdag',
|
||||
'sunday' => 'Zondag',
|
||||
];
|
||||
$currentDay = strtolower(now()->format('l'));
|
||||
@endphp
|
||||
|
||||
<div class="px-2 text-sm space-y-6 dark:text-gray-200">
|
||||
@php
|
||||
$days = [
|
||||
'monday' => 'Maandag',
|
||||
'tuesday' => 'Dinsdag',
|
||||
'wednesday' => 'Woensdag',
|
||||
'thursday' => 'Donderdag',
|
||||
'friday' => 'Vrijdag',
|
||||
'saturday' => 'Zaterdag',
|
||||
'sunday' => 'Zondag',
|
||||
];
|
||||
$currentDay = strtolower(now()->format('l'));
|
||||
@endphp
|
||||
@foreach($days as $dayKey => $dayName)
|
||||
@if(isset($schedule[$dayKey]) && $schedule[$dayKey]->count() > 0)
|
||||
<div style="border-bottom: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);" class="pb-4 last:border-0">
|
||||
<h3 class="text-lg font-bold mb-3" style="color: var(--color-primary); {{ $dayKey === $currentDay ? 'border: 2px solid ' . 'var(--color-primary); border-radius: 0.5rem; padding: 0.5rem;' : '' }}">
|
||||
{{ $dayName }}
|
||||
@if($dayKey === $currentDay)
|
||||
<span class="text-xs bg-red-500 text-white px-2 py-1 rounded ml-2">Vandaag</span>
|
||||
@endif
|
||||
</h3>
|
||||
|
||||
@foreach($days as $dayKey => $dayName)
|
||||
@if(isset($schedule[$dayKey]) && $schedule[$dayKey]->count() > 0)
|
||||
<div class="border-b border-gray-200 dark:border-gray-700 pb-4 last:border-0">
|
||||
<h3 class="text-lg font-bold text-[var(--color-primary)] mb-3 {{ $dayKey === $currentDay ? 'ring-2 ring-[var(--color-primary)] rounded-lg p-2' : '' }}">
|
||||
{{ $dayName }}
|
||||
@if($dayKey === $currentDay)
|
||||
<span class="text-xs bg-red-500 text-white px-2 py-1 rounded ml-2">Vandaag</span>
|
||||
@endif
|
||||
</h3>
|
||||
|
||||
<div class="space-y-2">
|
||||
@foreach($schedule[$dayKey] as $slot)
|
||||
<div class="flex items-center gap-4 p-3 bg-gray-100 dark:bg-gray-800 rounded-lg {{ $dayKey === $currentDay && now()->format('H:i') >= $slot->start_time->format('H:i') && now()->format('H:i') <= $slot->end_time->format('H:i') ? 'ring-2 ring-green-500' : '' }}">
|
||||
<div class="text-center min-w-[80px]">
|
||||
<p class="font-bold">{{ $slot->start_time->format('H:i') }}</p>
|
||||
<p class="text-xs text-gray-500">{{ $slot->end_time->format('H:i') }}</p>
|
||||
</div>
|
||||
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-bold">{{ $slot->user->username }}</span>
|
||||
@if($slot->show_name)
|
||||
<span class="text-sm text-gray-400">- {{ $slot->show_name }}</span>
|
||||
@endif
|
||||
</div>
|
||||
@if($slot->description)
|
||||
<p class="text-xs text-gray-500 mt-1">{{ $slot->description }}</p>
|
||||
@endif
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
@foreach($schedule[$dayKey] as $slot)
|
||||
<div class="flex items-center gap-4 p-3 rounded-lg" style="background-color: color-mix(in srgb, var(--color-background) 50%, transparent); {{ $dayKey === $currentDay && now()->format('H:i') >= $slot->start_time->format('H:i') && now()->format('H:i') <= $slot->end_time->format('H:i') ? 'border: 2px solid ' . '#22c55e' : '' }}">
|
||||
<div class="text-center min-w-[80px]">
|
||||
<p class="font-bold" style="color: var(--color-text)">{{ $slot->start_time->format('H:i') }}</p>
|
||||
<p class="text-xs" style="color: var(--color-text-muted)">{{ $slot->end_time->format('H:i') }}</p>
|
||||
</div>
|
||||
|
||||
@if($dayKey === $currentDay && now()->format('H:i') >= $slot->start_time->format('H:i') && now()->format('H:i') <= $slot->end_time->format('H:i'))
|
||||
<span class="px-2 py-1 bg-green-500 text-white text-xs rounded animate-pulse">NU LIVE</span>
|
||||
@endif
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
@endforeach
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-bold" style="color: var(--color-text)">{{ $slot->user->username }}</span>
|
||||
@if($slot->show_name)
|
||||
<span class="text-sm" style="color: var(--color-text-muted)">- {{ $slot->show_name }}</span>
|
||||
@endif
|
||||
</div>
|
||||
@if($slot->description)
|
||||
<p class="text-xs mt-1" style="color: var(--color-text-muted)">{{ $slot->description }}</p>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@if($schedule->isEmpty())
|
||||
<div class="text-center py-8">
|
||||
<p class="text-gray-500">Er zijn momenteel geen shows gepland.</p>
|
||||
<p class="text-sm text-gray-400 mt-2">Kom later terug voor updates!</p>
|
||||
@if($dayKey === $currentDay && now()->format('H:i') >= $slot->start_time->format('H:i') && now()->format('H:i') <= $slot->end_time->format('H:i'))
|
||||
<span class="px-2 py-1 bg-green-500 text-white text-xs rounded animate-pulse">NU LIVE</span>
|
||||
@endif
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
@endforeach
|
||||
|
||||
@if($schedule->isEmpty())
|
||||
<div class="text-center py-8">
|
||||
<p style="color: var(--color-text-muted)">Er zijn momenteel geen shows gepland.</p>
|
||||
<p class="text-sm mt-2" style="color: var(--color-text-muted)">Kom later terug voor updates!</p>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</x-content.content-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 lg:col-span-3 lg:w-[110%] space-y-4 lg:-ml-[32px]">
|
||||
<x-content.content-card icon="info-icon" classes="border dark:border-gray-900">
|
||||
<x-slot:title>
|
||||
Rooster Info
|
||||
</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" 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 py-3 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">Rooster Info</p>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">Houd ons in de gaten!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-slot:under-title>
|
||||
Houd ons in de gaten!
|
||||
</x-slot:under-title>
|
||||
<div class="p-4 text-sm space-y-4" style="color: var(--color-text)">
|
||||
<p>Al onze DJ's staan klaar om je te entertainen met de beste muziek!</p>
|
||||
|
||||
<div class="px-2 text-sm space-y-4 dark:text-gray-200">
|
||||
<p>Al onze DJ's staan klaar om je te entertainen met de beste muziek!</p>
|
||||
|
||||
<div class="space-y-2 text-xs">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-3 h-3 bg-green-500 rounded animate-pulse"></span>
|
||||
<span>NU LIVE</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-3 h-3 bg-[var(--color-primary)] rounded"></span>
|
||||
<span>Vandaag</span>
|
||||
</div>
|
||||
<div class="space-y-2 text-xs">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-3 h-3 bg-green-500 rounded animate-pulse"></span>
|
||||
<span>NU LIVE</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-3 h-3 rounded" style="background-color: var(--color-primary)"></span>
|
||||
<span>Vandaag</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-xs mt-4" style="color: var(--color-text-muted)">Tijden kunnen wijzigen zonder voorafgaande kennisgeving.</p>
|
||||
|
||||
<a href="{{ route('radio.index') }}" class="block mt-4" style="color: var(--color-primary); text-decoration: underline;">
|
||||
← Terug naar Radio
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-xs text-gray-500 mt-4">Tijden kunnen wijzigen zonder voorafgaande kennisgeving.</p>
|
||||
|
||||
<a href="{{ route('radio.index') }}" class="block text-[var(--color-primary)] hover:underline mt-4">
|
||||
← Terug naar Radio
|
||||
</a>
|
||||
<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" 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 py-3 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">Nu op Radio</p>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">Luister mee!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4 text-sm" style="color: var(--color-text)">
|
||||
<a href="{{ route('radio.index') }}" class="block text-center py-3 rounded-lg transition font-semibold" style="background-color: var(--color-primary); color: var(--button-text-color); text-decoration: none;">
|
||||
▶ Luister Live
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</x-content.content-card>
|
||||
|
||||
<x-content.content-card icon="music-icon" classes="border dark:border-gray-900">
|
||||
<x-slot:title>
|
||||
Nu op Radio
|
||||
</x-slot:title>
|
||||
|
||||
<x-slot:under-title>
|
||||
Luister mee!
|
||||
</x-slot:under-title>
|
||||
|
||||
<div class="px-2 text-sm dark:text-gray-200">
|
||||
<a href="{{ route('radio.index') }}" class="block bg-[var(--color-primary)] hover:bg-[var(--color-primary)] text-white text-center py-3 rounded-lg transition">
|
||||
▶ Luister Live
|
||||
</a>
|
||||
</div>
|
||||
</x-content.content-card>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
||||
@@ -3,74 +3,85 @@
|
||||
|
||||
<div class="col-span-12 lg:col-span-9 lg:w-[96%]">
|
||||
<div class="flex flex-col gap-y-4">
|
||||
<x-content.content-card icon="chat-icon" classes="border dark:border-gray-900">
|
||||
<x-slot:title>
|
||||
Stuur een Shout naar de DJ
|
||||
</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" 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 py-3 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">Stuur een Shout naar de DJ</p>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">Stuur een bericht naar de DJ!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-slot:under-title>
|
||||
Stuur een bericht naar de DJ!
|
||||
</x-slot:under-title>
|
||||
<div class="p-4 text-sm space-y-4" style="color: var(--color-text)">
|
||||
@if (auth()->check())
|
||||
@if (session('success'))
|
||||
<div class="px-4 py-3 rounded" style="background-color: color-mix(in srgb, #22c55e 15%, transparent); border: 1px solid color-mix(in srgb, #22c55e 30%, transparent); color: #22c55e;">
|
||||
{{ session('success') }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="px-2 text-sm space-y-4 dark:text-gray-200">
|
||||
@if (auth()->check())
|
||||
@if (session('success'))
|
||||
<div class="bg-green-100 dark:bg-green-900/30 border border-green-400 dark:border-green-600 text-green-700 dark:text-green-300 px-4 py-3 rounded mb-4">
|
||||
{{ session('success') }}
|
||||
</div>
|
||||
@endif
|
||||
<form action="{{ route('radio.shouts.store') }}" method="POST" class="mb-4">
|
||||
@csrf
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-2" style="color: var(--color-text-muted)">Jouw bericht (max 280 karakters)</label>
|
||||
<div class="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
name="message"
|
||||
required
|
||||
maxlength="280"
|
||||
class="w-full rounded-lg border px-3 py-2 text-sm focus:outline-none"
|
||||
style="background-color: var(--color-background); border-color: color-mix(in srgb, var(--color-text-muted) 20%, transparent); color: var(--color-text);"
|
||||
onfocus="this.style.borderColor='var(--color-primary)'"
|
||||
onblur="this.style.borderColor='color-mix(in srgb, var(--color-text-muted) 20%, transparent)'"
|
||||
placeholder="Plaats je shout voor de DJ...">
|
||||
<button type="submit" class="px-4 py-2 rounded-lg font-semibold border-2 transition whitespace-nowrap" style="background-color: var(--color-primary); color: var(--button-text-color); border-color: var(--color-primary);">
|
||||
📤 Stuur
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<form action="{{ route('radio.shouts.store') }}" method="POST" class="mb-4">
|
||||
@csrf
|
||||
<div>
|
||||
<label class="block text-sm font-medium dark:text-gray-300 mb-2">Jouw bericht (max 280 karakters)</label>
|
||||
<div class="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
name="message"
|
||||
required
|
||||
maxlength="280"
|
||||
class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200"
|
||||
placeholder="Plaats je shout voor de DJ...">
|
||||
<button type="submit" class="bg-[var(--color-primary)] hover:bg-[var(--color-primary)] text-white px-4 py-2 rounded transition whitespace-nowrap">
|
||||
📤 Stuur
|
||||
</button>
|
||||
<div class="p-4 rounded-lg" style="background-color: color-mix(in srgb, #3b82f6 10%, transparent); border: 1px solid color-mix(in srgb, #3b82f6 20%, transparent); color: #3b82f6;">
|
||||
<p>
|
||||
<span class="font-semibold">✅ Je shout is verstuurd!</span><br>
|
||||
De DJ kan je bericht lezen in het admin paneel. Bedankt voor je bericht!
|
||||
</p>
|
||||
</div>
|
||||
@else
|
||||
<div class="p-3 rounded text-center" style="background-color: color-mix(in srgb, var(--color-background) 50%, transparent);">
|
||||
<p style="color: var(--color-text-muted);">
|
||||
<a href="/login" style="color: var(--color-primary); text-decoration: underline;">Log in</a> om een shout te sturen
|
||||
</p>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 p-4 rounded-lg">
|
||||
<p class="text-blue-800 dark:text-blue-300">
|
||||
<span class="font-semibold">✅ Je shout is verstuurd!</span><br>
|
||||
De DJ kan je bericht lezen in het admin paneel. Bedankt voor je bericht!
|
||||
</p>
|
||||
</div>
|
||||
@else
|
||||
<div class="bg-gray-100 dark:bg-gray-800 p-3 rounded text-center">
|
||||
<p class="text-gray-500 mb-2">
|
||||
<a href="/login" class="text-[var(--color-primary)] hover:underline">Log in</a> om een shout te sturen
|
||||
</p>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</x-content.content-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 lg:col-span-3 lg:w-[110%] space-y-4 lg:-ml-[32px]">
|
||||
<x-content.content-card icon="info-icon" classes="border dark:border-gray-900">
|
||||
<x-slot:title>
|
||||
Shout Info
|
||||
</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" 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 py-3 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">Shout Info</p>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">Hoe werkt het?</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-slot:under-title>
|
||||
Hoe werkt het?
|
||||
</x-slot:under-title>
|
||||
|
||||
<div class="px-2 text-sm space-y-4 dark:text-gray-200">
|
||||
<p>Stuur shouts die de DJ live kan lezen tijdens de show!</p>
|
||||
<p class="text-xs text-gray-500">Houd het vriendelijk en respectvol.</p>
|
||||
<div class="p-4 text-sm space-y-4" style="color: var(--color-text)">
|
||||
<p>Stuur shouts die de DJ live kan lezen tijdens de show!</p>
|
||||
<p class="text-xs" style="color: var(--color-text-muted)">Houd het vriendelijk en respectvol.</p>
|
||||
</div>
|
||||
</div>
|
||||
</x-content.content-card>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
||||
@@ -3,71 +3,86 @@
|
||||
<div class="col-span-12 lg:col-span-9 lg:w-[96%]">
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-2">
|
||||
@forelse($positions as $position)
|
||||
@continue(!$position->permission) {{-- skip if the rank relation is missing --}}
|
||||
@continue(!$position->permission)
|
||||
|
||||
<x-content.staff-content-section :badge="$position->permission->badge" :color="$position->permission->staff_color">
|
||||
<x-slot:title>
|
||||
{{ $position->permission->rank_name }}
|
||||
</x-slot:title>
|
||||
<x-slot:under-title>
|
||||
{{ $position->permission->job_description }}
|
||||
</x-slot:under-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="flex gap-x-2.5 p-3.5" style="border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);">
|
||||
<div class="w-12 h-12 min-w-[3rem] rounded-full flex items-center justify-center" style="background-color: {{ $position->permission->staff_color }}">
|
||||
<img src="{{ asset(sprintf('%s/%s.gif', setting('badges_path'), $position->permission->badge)) }}" alt="">
|
||||
</div>
|
||||
<div class="flex flex-col justify-center text-sm">
|
||||
<p class="font-semibold" style="color: var(--color-text)">{{ $position->permission->rank_name }}</p>
|
||||
<p style="color: var(--color-text-muted)">{{ $position->permission->job_description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center dark:text-gray-400">
|
||||
<div class="mb-4 text-sm">
|
||||
{!! $position->description !!}
|
||||
</div>
|
||||
<div class="mb-4 text-sm font-semibold">
|
||||
{{ __('Application Deadline :date', [
|
||||
'date' => $position->apply_to ? $position->apply_to->format('F j, Y, g:i A') : __('No deadline set')
|
||||
]) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-3" style="color: var(--color-text)">
|
||||
<div class="text-center">
|
||||
<div class="mb-4 text-sm">
|
||||
{!! $position->description !!}
|
||||
</div>
|
||||
<div class="mb-4 text-sm font-semibold">
|
||||
{{ __('Application Deadline :date', [
|
||||
'date' => $position->apply_to ? $position->apply_to->format('F j, Y, g:i A') : __('No deadline set')
|
||||
]) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between">
|
||||
@if (auth()->check() && auth()->user()->hasAppliedForPosition($position->permission->id))
|
||||
<x-form.danger-button>
|
||||
{{ __('You have already applied for :position', ['position' => $position->permission->rank_name]) }}
|
||||
</x-form.danger-button>
|
||||
@else
|
||||
<a href="{{ route('staff-applications.show', $position) }}" class="w-full">
|
||||
<x-form.secondary-button>
|
||||
{{ __('Apply for :position', ['position' => $position->permission->rank_name]) }}
|
||||
</x-form.secondary-button>
|
||||
</a>
|
||||
@endif
|
||||
<div class="flex justify-between">
|
||||
@if (auth()->check() && auth()->user()->hasAppliedForPosition($position->permission->id))
|
||||
<button type="button" class="rounded-lg px-4 py-2 text-sm font-semibold transition-all duration-200 hover:opacity-90" style="background-color: #dc2626; color: white;">
|
||||
{{ __('You have already applied for :position', ['position' => $position->permission->rank_name]) }}
|
||||
</button>
|
||||
@else
|
||||
<a href="{{ route('staff-applications.show', $position) }}" class="w-full">
|
||||
<button type="button" class="rounded-lg px-4 py-2 text-sm font-semibold transition-all duration-200 hover:opacity-90" style="background-color: var(--color-background); color: var(--color-text); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
{{ __('Apply for :position', ['position' => $position->permission->rank_name]) }}
|
||||
</button>
|
||||
</a>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-content.staff-content-section>
|
||||
@empty
|
||||
<x-content.content-card icon="lighthouse-icon" classes="border dark:border-gray-900 col-span-full">
|
||||
<x-slot:title>
|
||||
{{ __('No positions open') }}
|
||||
</x-slot:title>
|
||||
<x-slot:under-title>
|
||||
{{ __('There is currently no positions open') }}
|
||||
</x-slot:under-title>
|
||||
<div class="px-2 text-sm space-y-4 dark:text-gray-200">
|
||||
<p>
|
||||
{{ __('Please come back at a later time to check if we have any positions open by then! Thank you for your interest.', ['hotel' => setting('hotel_name')]) }}
|
||||
</p>
|
||||
<div class="rounded-lg overflow-hidden col-span-full" style="background-color: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
<div class="relative w-full" 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 py-3 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">{{ __('No positions open') }}</p>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">{{ __('There is currently no positions open') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 text-sm space-y-4" style="color: var(--color-text)">
|
||||
<p>
|
||||
{{ __('Please come back at a later time to check if we have any positions open by then! Thank you for your interest.', ['hotel' => setting('hotel_name')]) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</x-content.content-card>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 lg:col-span-3 lg:w-[110%] space-y-4 lg:-ml-[32px]">
|
||||
<x-content.content-card icon="chat-icon" classes="border dark:border-gray-900">
|
||||
<x-slot:title>
|
||||
{{ __('Apply for :hotel staff', ['hotel' => setting('hotel_name')]) }}
|
||||
</x-slot:title>
|
||||
<x-slot:under-title>
|
||||
{{ __('Select position to get started', ['hotel' => setting('hotel_name')]) }}
|
||||
</x-slot:under-title>
|
||||
<div class="px-2 text-sm space-y-4 dark:text-gray-200">
|
||||
<p>
|
||||
{{ __('Here at :hotel we open up for staff applications every now and then. Sometimes you will find this page empty other times it might be filled with positions, if you ever come across a position you feel you would fit perfectly into, then do not hesitate to apply for it.', ['hotel' => setting('hotel_name')]) }}
|
||||
</p>
|
||||
<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" 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 py-3 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">{{ __('Apply for :hotel staff', ['hotel' => setting('hotel_name')]) }}</p>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">{{ __('Select position to get started', ['hotel' => setting('hotel_name')]) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 text-sm space-y-4" style="color: var(--color-text)">
|
||||
<p>
|
||||
{{ __('Here at :hotel we open up for staff applications every now and then. Sometimes you will find this page empty other times it might be filled with positions, if you ever come across a position you feel you would fit perfectly into, then do not hesitate to apply for it.', ['hotel' => setting('hotel_name')]) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</x-content.content-card>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
||||
@@ -2,55 +2,68 @@
|
||||
@push('title', __('Staff'))
|
||||
|
||||
<div class="col-span-12 lg:col-span-9 lg:w-[96%]">
|
||||
<x-content.staff-content-section :badge="$position->permission->badge" :color="$position->permission->staff_color">
|
||||
<x-slot:title>
|
||||
{{ __('You are applying for :position', ['position' => $position->permission->rank_name]) }}
|
||||
</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="flex gap-x-2.5 p-3.5" style="border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);">
|
||||
<div class="w-12 h-12 min-w-[3rem] rounded-full flex items-center justify-center" style="background-color: {{ $position->permission->staff_color }}">
|
||||
<img src="{{ asset(sprintf('%s/%s.gif', setting('badges_path'), $position->permission->badge)) }}" alt="">
|
||||
</div>
|
||||
<div class="flex flex-col justify-center text-sm">
|
||||
<p class="font-semibold" style="color: var(--color-text)">{{ __('You are applying for :position', ['position' => $position->permission->rank_name]) }}</p>
|
||||
<p style="color: var(--color-text-muted)">{{ __('Please fill out the fields below to apply for :position', ['position' => $position->permission->rank_name]) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-slot:under-title>
|
||||
{{ __('Please fill out the fields below to apply for :position', ['position' => $position->permission->rank_name]) }}
|
||||
</x-slot:under-title>
|
||||
<div class="p-4" style="color: var(--color-text)">
|
||||
<form class="flex flex-col gap-y-3" action="{{ route('staff-applications.store', $position) }}" method="POST">
|
||||
@csrf
|
||||
|
||||
<form class="flex flex-col gap-y-3" action="{{ route('staff-applications.store', $position) }}" method="POST">
|
||||
@csrf
|
||||
<div>
|
||||
<label for="username" class="opacity-60" style="color: var(--color-text);">{{ __('Username') }}</label>
|
||||
<input name="username" value="{{ auth()->user()->username }}" readonly 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-form.label for="username" disabled>{{ __('Username') }}</x-form.label>
|
||||
<x-form.input name="username" value="{{ auth()->user()->username }}" :readonly="true" />
|
||||
<div>
|
||||
<label for="content" class="opacity-60" style="color: var(--color-text);">{{ __('About you') }}</label>
|
||||
<textarea name="content" class="w-full rounded-lg border px-3 py-2 text-sm focus:outline-none min-h-[180px]" style="background-color: var(--color-background); border-color: color-mix(in srgb, var(--color-text-muted) 20%, transparent); color: var(--color-text);" onfocus="this.style.borderColor='var(--color-primary)'" onblur="this.style.borderColor='color-mix(in srgb, var(--color-text-muted) 20%, transparent)'">{{ old('content') }}</textarea>
|
||||
@error('content')
|
||||
<p class="text-red-600 text-sm mt-1">{{ $message }}</p>
|
||||
@enderror
|
||||
</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
|
||||
|
||||
<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);">
|
||||
{{ __('Apply for :position', ['position' => $position->permission->rank_name]) }}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<x-form.label for="content" disabled>{{ __('About you') }}</x-form.label>
|
||||
<textarea name="content" class="focus:ring-0 border-4 border-gray-200 rounded dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200 focus:border-[var(--color-primary)] w-full min-h-[180px]">{{ old('content') }}</textarea>
|
||||
@error('content')
|
||||
<p class="text-red-600 text-sm mt-1">{{ $message }}</p>
|
||||
@enderror
|
||||
</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.primary-button>
|
||||
{{ __('Apply for :position', ['position' => $position->permission->rank_name]) }}
|
||||
</x-form.primary-button>
|
||||
</form>
|
||||
</x-content.staff-content-section>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 lg:col-span-3 lg:w-[110%] space-y-4 lg:-ml-[32px]">
|
||||
<x-content.content-card icon="hotel-icon" classes="border dark:border-gray-900">
|
||||
<x-slot:title>{{ __('Applying for :position', ['position' => $position->permission->rank_name]) }}</x-slot:title>
|
||||
<x-slot:under-title>{{ __('Read before applying') }}</x-slot:under-title>
|
||||
<div class="px-2 text-sm space-y-4 dark:text-gray-200">
|
||||
<p>
|
||||
{{ __('Please fill out all the fields to apply for :position. Be honest and transparent. Providing incorrect information may lead to removal if hired.', ['position' => $position->permission->rank_name]) }}
|
||||
</p>
|
||||
<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" 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 py-3 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">{{ __('Applying for :position', ['position' => $position->permission->rank_name]) }}</p>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">{{ __('Read before applying') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 text-sm space-y-4" style="color: var(--color-text)">
|
||||
<p>
|
||||
{{ __('Please fill out all the fields to apply for :position. Be honest and transparent. Providing incorrect information may lead to removal if hired.', ['position' => $position->permission->rank_name]) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</x-content.content-card>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
||||
@@ -1,105 +1,79 @@
|
||||
<x-app-layout>
|
||||
@push('title', __('Staff'))
|
||||
|
||||
<div class="col-span-12 lg:col-span-9 space-y-8">
|
||||
@foreach ($employees as $employee)
|
||||
@php
|
||||
$sectionColor = $employee->staff_color ?? '#eeb425';
|
||||
@endphp
|
||||
<div class="bg-white dark:bg-gray-800 rounded-2xl border-2 overflow-hidden transition-all duration-300"
|
||||
style="border-color: {{ $sectionColor }}30; box-shadow: 0 8px 32px {{ $sectionColor }}10;">
|
||||
<div class="px-6 py-5 border-b flex items-center gap-4 transition-all duration-300"
|
||||
style="background: linear-gradient(135deg, {{ $sectionColor }}12 0%, transparent 100%); border-color: {{ $sectionColor }}30;">
|
||||
@if($employee->badge)
|
||||
<div class="relative">
|
||||
<img src="{{ asset(setting('badges_path') . $employee->badge . '.gif') }}"
|
||||
alt="{{ $employee->rank_name }}"
|
||||
class="w-14 h-14 -lg">
|
||||
</div>
|
||||
@endif
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-3">
|
||||
<h2 class="text-2xl font-extrabold tracking-tight"
|
||||
style="color: {{ $sectionColor }};">
|
||||
{{ $employee->rank_name }}
|
||||
</h2>
|
||||
</div>
|
||||
@if($employee->job_description)
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5">{{ $employee->job_description }}</p>
|
||||
@endif
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="px-4 py-1.5 rounded-full text-sm font-bold"
|
||||
style="background-color: {{ $sectionColor }}20; color: {{ $sectionColor }}; border: 1px solid {{ $sectionColor }}40;">
|
||||
{{ count($employee->users) }} {{ count($employee->users) == 1 ? __('member') : __('members') }}
|
||||
</span>
|
||||
<span class="text-4xl font-black tracking-tighter"
|
||||
style="color: {{ $sectionColor }}; text-shadow: 0 0 20px {{ $sectionColor }}60;">
|
||||
>>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6">
|
||||
@if(count($employee->users) > 0)
|
||||
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-5">
|
||||
@foreach ($employee->users as $staff)
|
||||
<x-community.staff-card :user="$staff" />
|
||||
@endforeach
|
||||
</div>
|
||||
@else
|
||||
<div class="text-center py-16">
|
||||
<div class="w-20 h-20 mx-auto mb-4 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center">
|
||||
<svg class="w-10 h-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="text-lg text-gray-500 dark:text-gray-400 font-medium">{{ __('No staff members in this position') }}</p>
|
||||
<p class="text-sm text-gray-400 dark:text-gray-500 mt-1">{{ __('Check back later for updates') }}</p>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
<div class="col-span-12 lg:col-span-9">
|
||||
<div class="flex flex-wrap gap-4">
|
||||
@foreach ($employees as $employee)
|
||||
@php
|
||||
$sectionColor = $employee->staff_color ?? '#eeb425';
|
||||
@endphp
|
||||
<div class="rounded-lg overflow-hidden w-full"
|
||||
style="background-color: var(--color-surface, #ffffff); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
<div class="relative w-full overflow-hidden">
|
||||
<div class="rank-header">
|
||||
<div class="relative w-full"
|
||||
style="background: linear-gradient(140deg, {{ $sectionColor }} 0%, color-mix(in srgb, {{ $sectionColor }} 80%, black) 100%);">
|
||||
<div class="flex items-center justify-start h-full relative">
|
||||
<h2 class="text-white font-bold text-xl" style="padding: 2% 3%;">{{ $employee->rank_name }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@if(count($employee->users) > 0)
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 p-4">
|
||||
@foreach ($employee->users as $staff)
|
||||
<x-community.staff-card :user="$staff" />
|
||||
@endforeach
|
||||
</div>
|
||||
@else
|
||||
<div class="text-center py-16">
|
||||
<p class="text-lg font-medium" style="color: var(--color-text-muted);">{{ __('No staff members in this position') }}</p>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 lg:col-span-3 space-y-4">
|
||||
<div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
|
||||
<div class="absolute left-0 top-0 bottom-0 w-1.5 bg-gradient-to-b from-amber-400 to-amber-500"></div>
|
||||
<div class="p-5">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<h3 class="text-lg font-bold" style="color: var(--color-text)">
|
||||
{{ setting('hotel_name') }} {{ __('Staff') }}
|
||||
</h3>
|
||||
<span style="color: var(--color-primary);" class="text-2xl font-black">>></span>
|
||||
</div>
|
||||
<p class="text-xs uppercase tracking-wider mb-4" style="color: var(--color-text-muted)">{{ __('About our team') }}</p>
|
||||
<div class="space-y-3 text-sm" style="color: var(--color-text)">
|
||||
<p>{{ __('The :hotel staff team is one big happy family, each staff member has a different role and duties to fulfill.', ['hotel' => setting('hotel_name')]) }}</p>
|
||||
<p>{{ __('Most of our team usually consists of players that have been around :hotel for quite a while, but this does not mean we only recruit old & known players, we recruit those who shine out to us!', ['hotel' => setting('hotel_name')]) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rounded-lg overflow-hidden"
|
||||
style="background-color: var(--color-surface, #ffffff); 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, #3A2068 0%, #3F2673 15%, #493085 30%, #523A97 45%, #5B44A9 60%, #654EBB 75%, #7068D0 90%, #786ED8 100%);">
|
||||
<div class="flex items-center justify-center h-full">
|
||||
<h2 class="text-white font-bold text-xl">{{ setting('hotel_name') }} {{ __('Staff') }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<p class="text-sm mb-4" style="color: var(--color-text-muted);">{{ __('About our team') }}</p>
|
||||
<div class="space-y-3 text-sm" style="color: var(--color-text);">
|
||||
<p>{{ __('The :hotel staff team is one big happy family, each staff member has a different role and duties to fulfill.', ['hotel' => setting('hotel_name')]) }}</p>
|
||||
<p>{{ __('Most of our team usually consists of players that have been around :hotel for quite a while, but this does not mean we only recruit old & known players, we recruit those who shine out to us!', ['hotel' => setting('hotel_name')]) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg overflow-hidden"
|
||||
style="background-color: var(--color-surface, #ffffff); 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, #1a5c3a 0%, #1e6e42 20%, #2a8050 40%, #3a9060 60%, #4aa070 75%, #3a9060 90%, #2a8050 100%);">
|
||||
<div class="flex items-center justify-center h-full">
|
||||
<h2 class="text-white font-bold text-xl">{{ __('Join the Team') }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<p class="text-sm mb-4" style="color: var(--color-text-muted);">{{ __('Become a staff member') }}</p>
|
||||
<div class="space-y-3 text-sm" style="color: var(--color-text);">
|
||||
<p>{{ __('Every now and then staff applications may open up. Once they do we always make sure to post a news article explaining the process - So make sure you keep an eye out for those in you are interested in joining the :hotel staff team.', ['hotel' => setting('hotel_name')]) }}</p>
|
||||
<a href="{{ route('staff-applications.index') }}"
|
||||
class="inline-flex items-center gap-2 mt-2 px-4 py-2 rounded-lg font-semibold text-sm transition-all hover:scale-105"
|
||||
style="background: var(--color-primary); color: var(--button-text-color);">
|
||||
{{ __('View Open Positions') }}
|
||||
<span class="text-lg">>></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-xl border overflow-hidden" style="background-color: var(--color-surface); border-color: var(--color-text-muted);">
|
||||
<div class="absolute left-0 top-0 bottom-0 w-1.5" style="background: linear-gradient(to bottom, var(--color-primary), var(--color-primary));"></div>
|
||||
<div class="p-5">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<h3 class="text-lg font-bold" style="color: var(--color-text)">
|
||||
{{ __('Join the Team') }}
|
||||
</h3>
|
||||
<span style="color: var(--color-primary);" class="text-2xl font-black">>></span>
|
||||
</div>
|
||||
<p class="text-xs uppercase tracking-wider mb-4" style="color: var(--color-text-muted)">{{ __('Become a staff member') }}</p>
|
||||
<div class="space-y-3 text-sm" style="color: var(--color-text)">
|
||||
<p>{{ __('Every now and then staff applications may open up. Once they do we always make sure to post a news article explaining the process - So make sure you keep an eye out for those in you are interested in joining the :hotel staff team.', ['hotel' => setting('hotel_name')]) }}</p>
|
||||
<a href="/community/staff-applications" class="inline-flex items-center gap-2 mt-2 px-4 py-2 rounded-lg font-semibold text-sm transition-all hover:scale-105"
|
||||
style="background: var(--color-primary); color: var(--button-text-color);">
|
||||
{{ __('View Open Positions') }}
|
||||
<span class="text-lg">>></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
@continue(!$position->team)
|
||||
@php
|
||||
$status = auth()->check()
|
||||
? ($userAppStatuses[$position->team->id] ?? null) // 'pending'|'approved'|'rejected'|null
|
||||
? ($userAppStatuses[$position->team->id] ?? null)
|
||||
: null;
|
||||
|
||||
$statusLabel = $status ? ucfirst($status) : null;
|
||||
@@ -19,87 +19,109 @@
|
||||
};
|
||||
@endphp
|
||||
|
||||
<x-content.staff-content-section :badge="$position->team->badge" :color="$position->team->staff_color">
|
||||
<x-slot:title>
|
||||
<span class="inline-flex items-center gap-2">
|
||||
{{ $position->team->rank_name }}
|
||||
<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="flex gap-x-2.5 p-3.5" style="border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);">
|
||||
<div class="w-12 h-12 min-w-[3rem] rounded-full flex items-center justify-center" style="background-color: {{ $position->team->staff_color }}">
|
||||
<img src="{{ asset(sprintf('%s/%s.gif', setting('badges_path'), $position->team->badge)) }}" alt="">
|
||||
</div>
|
||||
<div class="flex flex-col justify-center text-sm">
|
||||
<p class="font-semibold" style="color: var(--color-text)">
|
||||
<span class="inline-flex items-center gap-2">
|
||||
{{ $position->team->rank_name }}
|
||||
|
||||
@if ($statusLabel)
|
||||
<span class="inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium {{ $statusColorClasses }}">
|
||||
{{ $statusLabel }}
|
||||
</span>
|
||||
@endif
|
||||
</span>
|
||||
</x-slot:title>
|
||||
@if ($statusLabel)
|
||||
<span class="inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium {{ $statusColorClasses }}">
|
||||
{{ $statusLabel }}
|
||||
</span>
|
||||
@endif
|
||||
</span>
|
||||
</p>
|
||||
<p style="color: var(--color-text-muted)">{{ $position->team?->job_description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-slot:under-title>
|
||||
{{ $position->team?->job_description }}
|
||||
</x-slot:under-title>
|
||||
<div class="p-3" style="color: var(--color-text)">
|
||||
<div class="text-center">
|
||||
<div class="mb-4 text-sm">
|
||||
{!! $position->description !!}
|
||||
</div>
|
||||
<div class="mb-4 text-sm font-semibold">
|
||||
{{ __('Application Deadline :date', ['date' => $position->apply_to ? $position->apply_to->format('F j, Y, g:i A') : __('No deadline set')]) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center dark:text-gray-400">
|
||||
<div class="mb-4 text-sm">
|
||||
{!! $position->description !!}
|
||||
<div class="flex justify-between">
|
||||
@auth
|
||||
@if ($status)
|
||||
<button type="button" disabled class="rounded-lg px-4 py-2 text-sm font-semibold transition-all duration-200 hover:opacity-90 w-full justify-center" style="background-color: var(--color-background); color: var(--color-text); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
@switch($status)
|
||||
@case('pending')
|
||||
{{ __('Your application is pending') }}
|
||||
@break
|
||||
@case('approved')
|
||||
{{ __('You have been approved') }}
|
||||
@break
|
||||
@case('rejected')
|
||||
{{ __('Your application was rejected') }}
|
||||
@break
|
||||
@default
|
||||
{{ __('Application submitted') }}
|
||||
@endswitch
|
||||
</button>
|
||||
@else
|
||||
<a href="{{ route('team-applications.show', $position) }}" class="w-full">
|
||||
<button type="submit" class="rounded-lg px-4 py-2 text-sm font-semibold transition-all duration-200 hover:opacity-90 w-full justify-center" style="background-color: var(--color-primary); color: var(--button-text-color);">
|
||||
{{ __('Apply for :position', ['position' => $position->team->rank_name]) }}
|
||||
</button>
|
||||
</a>
|
||||
@endif
|
||||
@else
|
||||
<a href="{{ route('login') }}" class="w-full">
|
||||
<button type="button" class="rounded-lg px-4 py-2 text-sm font-semibold transition-all duration-200 hover:opacity-90 w-full justify-center" style="background-color: var(--color-background); color: var(--color-text); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
{{ __('Login to apply') }}
|
||||
</button>
|
||||
</a>
|
||||
@endauth
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4 text-sm font-semibold">
|
||||
{{ __('Application Deadline :date', ['date' => $position->apply_to ? $position->apply_to->format('F j, Y, g:i A') : __('No deadline set')]) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between">
|
||||
@auth
|
||||
@if ($status)
|
||||
{{-- Already applied: show a disabled button indicating status --}}
|
||||
<x-form.secondary-button class="w-full justify-center" disabled>
|
||||
@switch($status)
|
||||
@case('pending')
|
||||
{{ __('Your application is pending') }}
|
||||
@break
|
||||
@case('approved')
|
||||
{{ __('You have been approved') }}
|
||||
@break
|
||||
@case('rejected')
|
||||
{{ __('Your application was rejected') }}
|
||||
@break
|
||||
@default
|
||||
{{ __('Application submitted') }}
|
||||
@endswitch
|
||||
</x-form.secondary-button>
|
||||
@else
|
||||
{{-- No application yet: show Apply --}}
|
||||
<a href="{{ route('team-applications.show', $position) }}" class="w-full">
|
||||
<x-form.primary-button class="w-full justify-center">
|
||||
{{ __('Apply for :position', ['position' => $position->team->rank_name]) }}
|
||||
</x-form.primary-button>
|
||||
</a>
|
||||
@endif
|
||||
@else
|
||||
<a href="{{ route('login') }}" class="w-full">
|
||||
<x-form.secondary-button class="w-full justify-center">
|
||||
{{ __('Login to apply') }}
|
||||
</x-form.secondary-button>
|
||||
</a>
|
||||
@endauth
|
||||
</div>
|
||||
</x-content.staff-content-section>
|
||||
@empty
|
||||
<x-content.content-card icon="lighthouse-icon" classes="border dark:border-gray-900 col-span-full">
|
||||
<x-slot:title>{{ __('No team positions open') }}</x-slot:title>
|
||||
<x-slot:under-title>{{ __('There are currently no open team positions') }}</x-slot:under-title>
|
||||
<div class="px-2 text-sm space-y-4 dark:text-gray-200">
|
||||
<p>{{ __('Please come back later to check for new openings. Thank you!') }}</p>
|
||||
<div class="rounded-lg overflow-hidden col-span-full" style="background-color: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
<div class="relative w-full" 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 py-3 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">{{ __('No team positions open') }}</p>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">{{ __('There are currently no open team positions') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 text-sm space-y-4" style="color: var(--color-text)">
|
||||
<p>{{ __('Please come back later to check for new openings. Thank you!') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</x-content.content-card>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 lg:col-span-3 lg:w-[110%] space-y-4 lg:-ml-[32px]">
|
||||
<x-content.content-card icon="chat-icon" classes="border dark:border-gray-900">
|
||||
<x-slot:title>{{ __('Apply for :hotel Team', ['hotel' => setting('hotel_name')]) }}</x-slot:title>
|
||||
<x-slot:under-title>{{ __('Select a team to get started') }}</x-slot:under-title>
|
||||
<div class="px-2 text-sm space-y-4 dark:text-gray-200">
|
||||
<p>{{ __('We open team applications periodically. If you see a team you fit, do not hesitate to apply!') }}</p>
|
||||
<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" 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 py-3 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">{{ __('Apply for :hotel Team', ['hotel' => setting('hotel_name')]) }}</p>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">{{ __('Select a team to get started') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 text-sm space-y-4" style="color: var(--color-text)">
|
||||
<p>{{ __('We open team applications periodically. If you see a team you fit, do not hesitate to apply!') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</x-content.content-card>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
||||
@@ -2,55 +2,68 @@
|
||||
@push('title', __('Staff'))
|
||||
|
||||
<div class="col-span-12 lg:col-span-9 lg:w-[96%]">
|
||||
<x-content.staff-content-section :badge="$position->team->badge" :color="$position->team->staff_color">
|
||||
<x-slot:title>
|
||||
{{ __('You are applying for :position', ['position' => $position->team->rank_name]) }}
|
||||
</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="flex gap-x-2.5 p-3.5" style="border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);">
|
||||
<div class="w-12 h-12 min-w-[3rem] rounded-full flex items-center justify-center" style="background-color: {{ $position->team->staff_color }}">
|
||||
<img src="{{ asset(sprintf('%s/%s.gif', setting('badges_path'), $position->team->badge)) }}" alt="">
|
||||
</div>
|
||||
<div class="flex flex-col justify-center text-sm">
|
||||
<p class="font-semibold" style="color: var(--color-text)">{{ __('You are applying for :position', ['position' => $position->team->rank_name]) }}</p>
|
||||
<p style="color: var(--color-text-muted)">{{ __('Please fill out the fields below to apply for :position', ['position' => $position->team->rank_name]) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-slot:under-title>
|
||||
{{ __('Please fill out the fields below to apply for :position', ['position' => $position->team->rank_name]) }}
|
||||
</x-slot:under-title>
|
||||
<div class="p-4" style="color: var(--color-text)">
|
||||
<form class="flex flex-col gap-y-3" action="{{ route('team-applications.store', $position) }}" method="POST">
|
||||
@csrf
|
||||
|
||||
<form class="flex flex-col gap-y-3" action="{{ route('team-applications.store', $position) }}" method="POST">
|
||||
@csrf
|
||||
<div>
|
||||
<label for="username" class="opacity-60" style="color: var(--color-text);">{{ __('Username') }}</label>
|
||||
<input name="username" value="{{ auth()->user()->username }}" readonly class="w-full rounded-lg px-3 py-2 text-sm border-2 focus:ring-0 bg-gray-100" 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-form.label for="username" disabled>{{ __('Username') }}</x-form.label>
|
||||
<x-form.input classes="bg-gray-100" name="username" value="{{ auth()->user()->username }}" :readonly="true" />
|
||||
<div>
|
||||
<label for="content" class="opacity-60" style="color: var(--color-text);">{{ __('About you') }}</label>
|
||||
<textarea name="content" class="w-full rounded-lg border px-3 py-2 text-sm focus:outline-none min-h-[180px]" style="background-color: var(--color-background); border-color: color-mix(in srgb, var(--color-text-muted) 20%, transparent); color: var(--color-text);" onfocus="this.style.borderColor='var(--color-primary)'" onblur="this.style.borderColor='color-mix(in srgb, var(--color-text-muted) 20%, transparent)'">{{ old('content') }}</textarea>
|
||||
@error('content')
|
||||
<span class="text-red-500 text-sm">{{ $message }}</span>
|
||||
@enderror
|
||||
</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
|
||||
|
||||
<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);">
|
||||
{{ __('Apply for :position', ['position' => $position->team->rank_name]) }}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<x-form.label for="content" disabled>{{ __('About you') }}</x-form.label>
|
||||
<textarea name="content" class="focus:ring-0 border-4 border-gray-200 rounded dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200 focus:border-[var(--color-primary)] w-full min-h-[180px]">{{ old('content') }}</textarea>
|
||||
@error('content')
|
||||
<span class="text-red-500 text-sm">{{ $message }}</span>
|
||||
@enderror
|
||||
</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.primary-button>
|
||||
{{ __('Apply for :position', ['position' => $position->team->rank_name]) }}
|
||||
</x-form.primary-button>
|
||||
</form>
|
||||
</x-content.staff-content-section>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 lg:col-span-3 lg:w-[110%] space-y-4 lg:-ml-[32px]">
|
||||
<x-content.content-card icon="hotel-icon" classes="border dark:border-gray-900">
|
||||
<x-slot:title>{{ __('Applying for :position', ['position' => $position->team->rank_name]) }}</x-slot:title>
|
||||
<x-slot:under-title>{{ __('Read before applying') }}</x-slot:under-title>
|
||||
<div class="px-2 text-sm space-y-4 dark:text-gray-200">
|
||||
<p>
|
||||
{{ __('Please fill out all the fields to apply for :position. Be honest and transparent. Providing incorrect information may lead to removal if hired.', ['position' => $position->team->rank_name]) }}
|
||||
</p>
|
||||
<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" 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 py-3 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">{{ __('Applying for :position', ['position' => $position->team->rank_name]) }}</p>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">{{ __('Read before applying') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 text-sm space-y-4" style="color: var(--color-text)">
|
||||
<p>
|
||||
{{ __('Please fill out all the fields to apply for :position. Be honest and transparent. Providing incorrect information may lead to removal if hired.', ['position' => $position->team->rank_name]) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</x-content.content-card>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
||||
@@ -1,101 +1,136 @@
|
||||
<x-app-layout>
|
||||
@push('title', __('Staff'))
|
||||
@push('title', __('Teams'))
|
||||
|
||||
<div
|
||||
<div
|
||||
x-data="{ q: '', hideEmpty: false }"
|
||||
class="col-span-12 space-y-4"
|
||||
class="col-span-12 lg:col-span-9"
|
||||
>
|
||||
{{-- Toolbar --}}
|
||||
<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<h1 class="text-2xl font-semibold tracking-tight" style="color: var(--color-text)">{{ __('Teams') }}</h1>
|
||||
<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between mb-4">
|
||||
<h1 class="text-2xl font-semibold tracking-tight" style="color: var(--color-text)">{{ __('Teams') }}</h1>
|
||||
|
||||
<div class="flex w-full flex-col items-stretch gap-3 sm:w-auto sm:flex-row sm:items-center">
|
||||
<div class="relative sm:w-80">
|
||||
<input
|
||||
x-model="q"
|
||||
type="text"
|
||||
placeholder="{{ __('Search teams…') }}"
|
||||
class="w-full rounded-xl border px-4 py-2.5 pr-10 text-sm focus:outline-none focus:ring-0"
|
||||
style="background-color: var(--color-background); color: var(--color-text); border-color: var(--input-border-color);"
|
||||
/>
|
||||
<svg class="pointer-events-none absolute right-3 top-1/2 h-5 w-5 -translate-y-1/2 opacity-60"
|
||||
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="m21 21-4.35-4.35M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16z" />
|
||||
</svg>
|
||||
<div class="flex w-full flex-col items-stretch gap-3 sm:w-auto sm:flex-row sm:items-center">
|
||||
<div class="relative sm:w-80">
|
||||
<input
|
||||
x-model="q"
|
||||
type="text"
|
||||
placeholder="{{ __('Search teams...') }}"
|
||||
class="w-full rounded-xl border px-4 py-2.5 pr-10 text-sm focus:outline-none focus:ring-0"
|
||||
style="background-color: var(--color-background); color: var(--color-text); border-color: var(--input-border-color);"
|
||||
/>
|
||||
<svg class="pointer-events-none absolute right-3 top-1/2 h-5 w-5 -translate-y-1/2 opacity-60"
|
||||
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="m21 21-4.35-4.35M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<label class="inline-flex items-center gap-2 text-sm" style="color: var(--color-text)">
|
||||
<input type="checkbox" x-model="hideEmpty"
|
||||
class="rounded border-gray-300 text-[var(--color-primary)] focus:ring-[var(--color-primary)]" />
|
||||
<span class="select-none">{{ __('Hide empty teams') }}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label class="inline-flex items-center gap-2 text-sm" style="color: var(--color-text)">
|
||||
<input type="checkbox" x-model="hideEmpty"
|
||||
class="rounded border-gray-300 text-[var(--color-primary)] focus:ring-[var(--color-primary)]" />
|
||||
<span class="select-none">{{ __('Hide empty teams') }}</span>
|
||||
</label>
|
||||
<div class="flex flex-wrap gap-4">
|
||||
@forelse ($employees as $employee)
|
||||
@php
|
||||
$sectionColor = $employee->staff_color ?? '#eeb425';
|
||||
$users = $employee->users ?? collect();
|
||||
$memberCount = $users->count();
|
||||
$searchText = trim(($employee->rank_name ?? '') . ' ' . ($employee->job_description ?? ''));
|
||||
@endphp
|
||||
|
||||
<section
|
||||
x-data="{
|
||||
name: @js($searchText),
|
||||
hasMembers: {{ $memberCount > 0 ? 'true' : 'false' }}
|
||||
}"
|
||||
x-show="(name.toLowerCase().includes(q.toLowerCase())) && (!hideEmpty || hasMembers)"
|
||||
x-cloak
|
||||
class="rounded-lg overflow-hidden w-full"
|
||||
style="background-color: var(--color-surface, #ffffff); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);"
|
||||
>
|
||||
<div class="relative w-full overflow-hidden">
|
||||
<div class="rank-header">
|
||||
<div class="relative w-full"
|
||||
style="background: linear-gradient(140deg, {{ $sectionColor }} 0%, color-mix(in srgb, {{ $sectionColor }} 80%, black) 100%);">
|
||||
<div class="flex items-center justify-start h-full relative">
|
||||
<h2 class="text-white font-bold text-xl" style="padding: 2% 3%;">{{ $employee->rank_name }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between px-4 pt-3">
|
||||
@if($employee->job_description)
|
||||
<p class="text-sm" style="color: var(--color-text-muted);">{{ $employee->job_description }}</p>
|
||||
@else
|
||||
<span></span>
|
||||
@endif
|
||||
<span class="shrink-0 rounded-full border px-3 py-1 text-xs font-medium" style="border-color: color-mix(in srgb, var(--color-text-muted) 30%, transparent); color: var(--color-text-muted);">
|
||||
{{ $memberCount }} {{ \Illuminate\Support\Str::plural(__('member'), $memberCount) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@if($memberCount > 0)
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 p-4">
|
||||
@foreach ($users as $staff)
|
||||
<x-community.staff-card :user="$staff" />
|
||||
@endforeach
|
||||
</div>
|
||||
@else
|
||||
<div class="text-center py-16">
|
||||
<p class="text-lg font-medium" style="color: var(--color-text-muted);">{{ __('We currently have no staff in this team') }}</p>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</section>
|
||||
@empty
|
||||
<div class="w-full">
|
||||
<div class="rounded-lg overflow-hidden text-center py-16"
|
||||
style="background-color: var(--color-surface, #ffffff); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
<p class="text-lg font-medium" style="color: var(--color-text-muted);">{{ __('There are no teams to display right now.') }}</p>
|
||||
<p class="text-sm mt-2" style="color: var(--color-text-muted);">{{ __('Please check back later.') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Teams --}}
|
||||
<div class="flex flex-col gap-y-4">
|
||||
@forelse ($employees as $employee)
|
||||
@php
|
||||
/** @var \Illuminate\Support\Collection $users */
|
||||
$users = $employee->users ?? collect();
|
||||
$memberCount = $users->count();
|
||||
$searchText = trim(($employee->rank_name ?? '') . ' ' . ($employee->job_description ?? ''));
|
||||
@endphp
|
||||
|
||||
<section
|
||||
x-data="{
|
||||
name: @js($searchText),
|
||||
hasMembers: {{ $memberCount > 0 ? 'true' : 'false' }}
|
||||
}"
|
||||
x-show="(name.toLowerCase().includes(q.toLowerCase())) && (!hideEmpty || hasMembers)"
|
||||
x-cloak
|
||||
>
|
||||
<x-content.staff-content-section
|
||||
:badge="$employee->badge"
|
||||
:color="$employee->staff_color"
|
||||
class="overflow-hidden rounded-2xl border border-gray-100 shadow-sm dark:border-gray-800"
|
||||
>
|
||||
{{-- Header --}}
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<x-slot:title>
|
||||
{{ $employee->rank_name }}
|
||||
</x-slot:title>
|
||||
<x-slot:under-title>
|
||||
{{ $employee?->job_description }}
|
||||
</x-slot:under-title>
|
||||
<div class="col-span-12 lg:col-span-3 space-y-4">
|
||||
<div class="rounded-lg overflow-hidden"
|
||||
style="background-color: var(--color-surface, #ffffff); 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, #3A2068 0%, #3F2673 15%, #493085 30%, #523A97 45%, #5B44A9 60%, #654EBB 75%, #7068D0 90%, #786ED8 100%);">
|
||||
<div class="flex items-center justify-center h-full">
|
||||
<h2 class="text-white font-bold text-xl">{{ setting('hotel_name') }} {{ __('Teams') }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<p class="text-sm mb-4" style="color: var(--color-text-muted);">{{ __('About our teams') }}</p>
|
||||
<div class="space-y-3 text-sm" style="color: var(--color-text);">
|
||||
<p>{{ __('Our teams are groups of dedicated players who work together to make :hotel a better place for everyone.', ['hotel' => setting('hotel_name')]) }}</p>
|
||||
<p>{{ __('Each team has its own role and responsibilities, from welcoming new players to organizing events and keeping the hotel running smoothly.') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Member count chip --}}
|
||||
<span class="ml-4 shrink-0 rounded-full border px-3 py-1 text-xs font-medium" style="border-color: var(--color-text-muted); color: var(--color-text);">
|
||||
{{ $memberCount }} {{ \Illuminate\Support\Str::plural(__('member'), $memberCount) }}
|
||||
</span>
|
||||
<div class="rounded-lg overflow-hidden"
|
||||
style="background-color: var(--color-surface, #ffffff); 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, #1a5c3a 0%, #1e6e42 20%, #2a8050 40%, #3a9060 60%, #4aa070 75%, #3a9060 90%, #2a8050 100%);">
|
||||
<div class="flex items-center justify-center h-full">
|
||||
<h2 class="text-white font-bold text-xl">{{ __('Join a Team') }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<p class="text-sm mb-4" style="color: var(--color-text-muted);">{{ __('Become a team member') }}</p>
|
||||
<div class="space-y-3 text-sm" style="color: var(--color-text);">
|
||||
<p>{{ __('Want to get more involved? Team applications open periodically and are announced via news articles on the hotel.') }}</p>
|
||||
<p>{{ __('Keep an eye out for announcements if you are interested in joining one of our teams!') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Members grid --}}
|
||||
<div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
@forelse ($users as $staff)
|
||||
<x-community.staff-card :user="$staff" />
|
||||
@empty
|
||||
<div class="col-span-full">
|
||||
<div class="rounded-xl border border-dashed p-6 text-center text-sm" style="border-color: var(--color-text-muted); color: var(--color-text-muted);">
|
||||
{{ __('We currently have no staff in this team') }}
|
||||
</div>
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</x-content.staff-content-section>
|
||||
</section>
|
||||
@empty
|
||||
<x-content.content-card icon="lighthouse-icon" classes="border dark:border-gray-900">
|
||||
<x-slot:title>{{ __('No teams found') }}</x-slot:title>
|
||||
<x-slot:under-title>{{ __('Please check back later.') }}</x-slot:under-title>
|
||||
<div class="px-2 text-sm space-y-4 dark:text-gray-200">
|
||||
<p>{{ __('There are no teams to display right now.') }}</p>
|
||||
</div>
|
||||
</x-content.content-card>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
||||
@@ -1,45 +1,28 @@
|
||||
@props(['article', 'forSlider' => false])
|
||||
|
||||
<div @class([
|
||||
'h-[180px] md:h-[210px] rounded w-full shadow-sm relative overflow-hidden transition ease-in-out duration-200',
|
||||
'hover:scale-[101%]' => !$forSlider,
|
||||
'swiper-slide group' => $forSlider,
|
||||
]) style="background-color: var(--color-surface)"
|
||||
@if (!$forSlider)
|
||||
onmouseover="slideImage({{ $article->id }})" onmouseleave="unslideImage({{ $article->id }})"
|
||||
@endif>
|
||||
<a href="{{ route('article.show', $article->slug) }}">
|
||||
<div id="article-{{ $article->id }}" style="background: url('/storage/{{ $article->image }}');" class="article-image">
|
||||
</div>
|
||||
'group rounded w-full relative overflow-hidden transition ease-in-out duration-200',
|
||||
'hover:scale-[101%]' => !$forSlider,
|
||||
'swiper-slide' => $forSlider,
|
||||
]) style="height: 215px; background-color: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
<div class="relative w-full h-full overflow-hidden rounded-[6px]">
|
||||
<a href="{{ route('article.show', $article->slug ?? $article->id) }}" class="block w-full h-full">
|
||||
<img src="{{ $article->image ? '/storage/' . $article->image : '' }}"
|
||||
onerror="this.parentElement.style.background='var(--color-surface)';this.style.display='none';"
|
||||
alt="{{ $article->title }}"
|
||||
class="object-cover w-full h-full transition-all duration-300 rounded-[6px] hover:scale-105"
|
||||
loading="lazy">
|
||||
|
||||
<div class="mt-3 md:mt-4 px-3 md:px-4">
|
||||
<p @class([
|
||||
'font-semibold text-base md:text-lg truncate',
|
||||
'group-hover:text-[var(--color-primary)] transition duration-200' => $forSlider,
|
||||
]) >
|
||||
{{ $article->title }}
|
||||
</p>
|
||||
|
||||
<div class="flex items-center gap-x-2">
|
||||
<div
|
||||
class="mt-2 md:mt-3 flex h-8 w-8 md:h-10 md:w-10 items-center justify-center overflow-hidden rounded-full" style="background-color: var(--color-background)">
|
||||
<img src="{{ setting('avatar_imager') }}{{ $article->user?->look }}&headonly=1" alt="">
|
||||
</div>
|
||||
|
||||
<p class="mt-2 md:mt-4 font-semibold text-sm md:text-base" style="color: var(--color-text-muted)">
|
||||
{{ $article->user->username ?? setting('hotel_name') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="absolute left-0 w-full p-2" style="bottom: -2px; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);">
|
||||
<h3 class="text-lg font-semibold text-white text-shadow-sm truncate">
|
||||
{{ $article->title }}
|
||||
</h3>
|
||||
@if($article->short_story)
|
||||
<p class="text-xs font-normal text-white text-shadow-sm truncate">
|
||||
{{ Str::limit($article->short_story, 80) }}
|
||||
</p>
|
||||
@endif
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function slideImage(articleId) {
|
||||
document.getElementById('article-' + articleId).classList.add('article-image-slide');
|
||||
}
|
||||
|
||||
function unslideImage(articleId) {
|
||||
document.getElementById('article-' + articleId).classList.remove('article-image-slide');
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -8,22 +8,26 @@
|
||||
<form class="flex flex-col gap-y-3" action="{{ route('login') }}" method="POST">
|
||||
@csrf
|
||||
|
||||
<div>
|
||||
<x-form.label for="username">
|
||||
{{ __('Username') }}
|
||||
</x-form.label>
|
||||
<div>
|
||||
<label for="username" style="color: var(--color-text);">
|
||||
{{ __('Username') }}
|
||||
</label>
|
||||
|
||||
<x-form.input error-bag="login" name="username" value="{{ old('username') }}" placeholder="{{ __('Username') }}"
|
||||
:autofocus="true" />
|
||||
</div>
|
||||
<input error-bag="login" name="username" 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>
|
||||
<x-form.label for="password">
|
||||
{{ __('Password') }}
|
||||
</x-form.label>
|
||||
<div>
|
||||
<label for="password" style="color: var(--color-text);">
|
||||
{{ __('Password') }}
|
||||
</label>
|
||||
|
||||
<x-form.input error-bag="login" name="password" placeholder="{{ __('Password') }}" type="password" />
|
||||
</div>
|
||||
<input error-bag="login" name="password" placeholder="{{ __('Password') }}" type="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>
|
||||
|
||||
@if (setting('google_recaptcha_enabled'))
|
||||
<div class="g-recaptcha" data-sitekey="{{ config('habbo.site.recaptcha_site_key') }}"></div>
|
||||
@@ -33,9 +37,9 @@
|
||||
<x-turnstile />
|
||||
@endif
|
||||
|
||||
<x-form.primary-button>
|
||||
{{ __('Login') }}
|
||||
</x-form.primary-button>
|
||||
<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 class="text-center text-sm font-semibold" style="color: var(--color-text-muted)">
|
||||
<a href="{{ route('forgot.password.get') }}" class="hover:underline" x-on:click="open = false" style="color: var(--link-color)">
|
||||
|
||||
@@ -5,86 +5,54 @@
|
||||
$rankName = $user->permission?->rank_name ?? 'Staff';
|
||||
@endphp
|
||||
|
||||
<style>
|
||||
@keyframes sparkle {
|
||||
0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
|
||||
50% { opacity: 1; transform: scale(1) rotate(180deg); }
|
||||
}
|
||||
@keyframes shimmer {
|
||||
0% { background-position: -200% center; }
|
||||
100% { background-position: 200% center; }
|
||||
}
|
||||
.sparkle-effect {
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
animation: sparkle 2s infinite;
|
||||
}
|
||||
.shimmer-text {
|
||||
background: linear-gradient(90deg, {{ $staffColor }}, white, {{ $staffColor }});
|
||||
background-size: 200% auto;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
animation: shimmer 3s linear infinite;
|
||||
}
|
||||
</style>
|
||||
<div class="relative rounded-lg overflow-hidden transition-all duration-300 hover:shadow-lg"
|
||||
style="background-color: var(--color-surface, #ffffff); border: 2px solid color-mix(in srgb, var(--color-text-muted) 20%, transparent);">
|
||||
<div class="relative w-full p-4">
|
||||
<div class="absolute top-3 right-3 z-20 flex flex-col items-center gap-2">
|
||||
<div class="rounded-md overflow-hidden flex justify-center items-center"
|
||||
style="width: 40px; height: 40px; border: 2px solid color-mix(in srgb, var(--color-text-muted) 30%, transparent); background-color: color-mix(in srgb, var(--color-surface) 80%, transparent);">
|
||||
<img src="{{ asset('assets/images/country/default.png') }}" alt="Flag" class="object-cover w-full h-full" />
|
||||
</div>
|
||||
<div class="px-2 py-1 rounded-full flex items-center justify-center"
|
||||
style="background-color: color-mix(in srgb, var(--color-surface) 80%, transparent);">
|
||||
@if($user->online)
|
||||
<span class="w-3 h-3 rounded-full bg-green-500 animate-pulse inline-block"></span>
|
||||
@else
|
||||
<span class="w-3 h-3 rounded-full bg-gray-400 inline-block"></span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group relative bg-white dark:bg-gray-800 rounded-2xl overflow-hidden border-2 transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl cursor-pointer"
|
||||
style="border-color: {{ $staffColor }}40; box-shadow: 0 4px 15px {{ $staffColor }}10;">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-white via-gray-50 to-gray-100 dark:from-gray-800 dark:via-gray-800 dark:to-gray-900 opacity-50"></div>
|
||||
|
||||
@php
|
||||
$sparklePositions = [
|
||||
['top' => '10%', 'left' => '15%', 'delay' => '0s'],
|
||||
['top' => '20%', 'right' => '10%', 'delay' => '0.5s'],
|
||||
['top' => '60%', 'left' => '5%', 'delay' => '1s'],
|
||||
['top' => '70%', 'right' => '15%', 'delay' => '1.5s'],
|
||||
];
|
||||
@endphp
|
||||
|
||||
@foreach($sparklePositions as $pos)
|
||||
<div class="sparkle-effect"
|
||||
style="{{ $pos['top'] }}; {{ $pos['left'] ?? '' }}; {{ $pos['right'] ?? '' }}; animation-delay: {{ $pos['delay'] }}; box-shadow: 0 0 6px {{ $staffColor }};">
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
<div class="relative p-5 flex flex-col items-center text-center">
|
||||
<div class="relative mb-3">
|
||||
<div class="w-22 h-22 rounded-full overflow-hidden border-4 transition-all duration-300 group-hover:scale-110 group-hover:rotate-3"
|
||||
style="border-color: {{ $staffColor }}; box-shadow: 0 0 15px {{ $staffColor }}50, inset 0 0 15px {{ $staffColor }}20;">
|
||||
<img style="image-rendering: pixelated;"
|
||||
src="{{ setting('avatar_imager') }}{{ $user->look }}&direction=3&head_direction=3&gesture=sml&action=wlk%2Cwav&size=l&img_format=gif&size=n"
|
||||
alt="{{ $user->username }}"
|
||||
class="w-full h-full object-cover">
|
||||
</div>
|
||||
@if($user->online)
|
||||
<div class="absolute bottom-0 right-0 w-4 h-4 rounded-full border-2 border-white dark:border-gray-800 bg-green-500 animate-pulse"
|
||||
style="box-shadow: 0 0 8px #22c55e;"></div>
|
||||
@endif
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="relative"
|
||||
style="width: 80px; height: 80px; border-radius: 50%; overflow: hidden; border: 3px solid {{ $staffColor }};">
|
||||
<img src="{{ setting('avatar_imager') }}{{ $user->look }}&headonly=0&direction=3&size=n&gesture=nrm"
|
||||
alt="{{ $user->username }}"
|
||||
class="object-cover object-top absolute inset-0"
|
||||
style="margin-top: -16px; margin-left: 5px;" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="{{ route('profile.show', $user->username) }}" class="block group/link">
|
||||
<h3 class="text-lg font-extrabold truncate transition-all duration-300 group-hover/link:scale-105 shimmer-text">
|
||||
{{ $user->username }}
|
||||
</h3>
|
||||
</a>
|
||||
|
||||
<div class="mt-1.5 px-3 py-0.5 rounded-full text-xs font-bold uppercase tracking-wide"
|
||||
style="background-color: {{ $staffColor }}15; color: {{ $staffColor }}; border: 1px solid {{ $staffColor }}30;">
|
||||
{{ $rankName }}
|
||||
</div>
|
||||
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mt-3 line-clamp-2 min-h-[2.5rem] px-2">
|
||||
{{ $user->motto ?: __('No motto set') }}
|
||||
</p>
|
||||
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 dark:border-gray-700 w-full flex items-center justify-center gap-2 text-xs">
|
||||
<span class="flex items-center gap-1.5 font-medium {{ $user->online ? 'text-green-500' : 'text-gray-400' }}">
|
||||
<span class="w-2 h-2 rounded-full {{ $user->online ? 'bg-green-500 animate-pulse' : 'bg-gray-400' }}"></span>
|
||||
{{ $user->online ? __('Online') : __('Offline') }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex flex-col justify-center flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<a href="{{ route('profile.show', $user->username) }}"
|
||||
class="text-lg font-bold truncate transition hover:opacity-80"
|
||||
style="color: var(--color-text, #1f2937);">{{ $user->username }}</a>
|
||||
@if($user->permission?->job_description)
|
||||
<span class="px-2 py-0.5 text-xs font-medium rounded-full whitespace-nowrap"
|
||||
style="background-color: color-mix(in srgb, {{ $staffColor }} 20%, transparent); color: {{ $staffColor }};">{{ $user->permission->job_description }}</span>
|
||||
@endif
|
||||
</div>
|
||||
<div class="flex gap-2 flex-wrap">
|
||||
@if($user->permission?->badge)
|
||||
<div class="rounded-md overflow-hidden flex justify-center items-center"
|
||||
style="width: 50px; height: 50px; border: 2px solid color-mix(in srgb, var(--color-text-muted) 30%, transparent); background-color: color-mix(in srgb, var(--color-surface) 80%, transparent);">
|
||||
<img src="{{ asset(setting('badges_path') . $user->permission->badge . '.gif') }}" alt="Staff Badge" class="object-cover" />
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,137 +1,99 @@
|
||||
<div class="relative hidden h-full w-full flex-col items-center gap-y-2 py-3 md:flex md:flex-row md:gap-x-8 md:gap-y-0 md:py-0" id="mobile-menu" style="color: var(--color-navbar-text)">
|
||||
@auth
|
||||
<x-navigation.dropdown icon="home" route-group="user*">
|
||||
{{ auth()->user()->username }}
|
||||
<div class="flex flex-col md:flex-row md:items-center md:justify-center w-full gap-y-3 md:gap-x-0 md:gap-y-0" id="mobile-menu"
|
||||
:class="{ 'show-mobile': dropdownVisible }">
|
||||
|
||||
<x-slot:children>
|
||||
<x-navigation.dropdown-child :route="route('me.show')">
|
||||
{{ __('Home') }}
|
||||
</x-navigation.dropdown-child>
|
||||
|
||||
<x-navigation.dropdown-child :route="route('draw-badge')">
|
||||
{{ __('Badge Drawer') }}
|
||||
</x-navigation.dropdown-child>
|
||||
|
||||
<x-navigation.dropdown-child :route="route('profile.show', auth()->user()->username)">
|
||||
{{ __('My Profile') }}
|
||||
</x-navigation.dropdown-child>
|
||||
</x-slot:children>
|
||||
</x-navigation.dropdown>
|
||||
@else
|
||||
<a href="{{ route('welcome') }}"
|
||||
class="nav-item {{ request()->routeIs('welcome') ? 'border-b-2 border-[var(--color-primary)]' : '' }}">
|
||||
<i class="mr-1 hidden navigation-icon home lg:inline-flex"></i>
|
||||
{{ __('Home') }}
|
||||
</a>
|
||||
@endauth
|
||||
|
||||
@auth
|
||||
<x-navigation.dropdown icon="community" route-group="community*" :uppercase="true">
|
||||
{{ __('Community') }}
|
||||
|
||||
<x-slot:children>
|
||||
<x-navigation.dropdown-child :route="route('article.index')">
|
||||
{{ __('Articles') }}
|
||||
</x-navigation.dropdown-child>
|
||||
|
||||
<x-navigation.dropdown-child :route="route('staff.index')">
|
||||
{{ __('Staff') }}
|
||||
</x-navigation.dropdown-child>
|
||||
|
||||
<x-navigation.dropdown-child :route="route('teams.index')">
|
||||
{{ __('Teams') }}
|
||||
</x-navigation.dropdown-child>
|
||||
|
||||
<x-navigation.dropdown-child :route="route('team-applications.index')">
|
||||
{{ __('Team applications') }}
|
||||
</x-navigation.dropdown-child>
|
||||
|
||||
<x-navigation.dropdown-child :route="route('staff-applications.index')">
|
||||
{{ __('Staff applications') }}
|
||||
</x-navigation.dropdown-child>
|
||||
|
||||
<x-navigation.dropdown-child :route="route('photos.index')">
|
||||
{{ __('Photos') }}
|
||||
</x-navigation.dropdown-child>
|
||||
</x-slot:children>
|
||||
</x-navigation.dropdown>
|
||||
|
||||
<a href="{{ route('leaderboard.index') }}"
|
||||
class="nav-item {{ request()->routeIs('leaderboard.*') ? 'border-b-2 border-[var(--color-primary)]' : '' }}">
|
||||
<i class="navigation-icon leaderboards mr-1 hidden lg:inline-flex"></i>
|
||||
{{ __('Leaderboards') }}
|
||||
</a>
|
||||
|
||||
<a href="{{ route('values.index') }}"
|
||||
class="nav-item {{ request()->routeIs('values.*') ? 'border-b-2 border-[var(--color-primary)]' : '' }}">
|
||||
<i class="navigation-icon leaderboards mr-1 hidden lg:inline-flex"></i>
|
||||
{{ __('Rare values') }}
|
||||
</a>
|
||||
|
||||
<a data-turbolinks="false" href="{{ route('shop.index') }}"
|
||||
class="nav-item {{ request()->routeIs('shop.*') ? 'border-b-2 border-[var(--color-primary)]' : '' }}">
|
||||
<i class="navigation-icon mr-1 hidden lg:inline-flex shop"></i>
|
||||
{{ __('Shop') }}
|
||||
</a>
|
||||
@endauth
|
||||
|
||||
<x-navigation.dropdown icon="rules" route-group="help-center*" :uppercase="true">
|
||||
{{ __('Assistance') }}
|
||||
|
||||
<x-slot:children>
|
||||
@auth
|
||||
<x-navigation.dropdown-child :route="route('help-center.index')">
|
||||
{{ __('Help center') }}
|
||||
</x-navigation.dropdown-child>
|
||||
|
||||
@if(hasPermission('manage_website_tickets'))
|
||||
<x-navigation.dropdown-child :route="route('help-center.ticket.index')">
|
||||
{{ __('Open tickets') }}
|
||||
</x-navigation.dropdown-child>
|
||||
@endif
|
||||
|
||||
@else
|
||||
<x-navigation.dropdown-child :route="route('help-center.rules.index')">
|
||||
{{ __('Rules') }}
|
||||
</x-navigation.dropdown-child>
|
||||
@endauth
|
||||
</x-slot:children>
|
||||
</x-navigation.dropdown>
|
||||
|
||||
<a href="{{ is_array(setting('discord_invitation_link')) ? '' : setting('discord_invitation_link') }}" target="_blank" class="nav-item">
|
||||
{{ __('Discord') }}
|
||||
</a>
|
||||
|
||||
<x-navigation.dropdown icon="music" route-group="radio*">
|
||||
{{ __('Radio') }}
|
||||
|
||||
<x-slot:children>
|
||||
<x-navigation.dropdown-child :route="route('radio.index')">
|
||||
{{ __('Radio Home') }}
|
||||
</x-navigation.dropdown-child>
|
||||
|
||||
<x-navigation.dropdown-child :route="route('radio.rooster')">
|
||||
{{ __('DJ Rooster') }}
|
||||
</x-navigation.dropdown-child>
|
||||
|
||||
<x-navigation.dropdown-child :route="route('radio.shouts')">
|
||||
{{ __('Live Shouts') }}
|
||||
</x-navigation.dropdown-child>
|
||||
|
||||
<x-navigation.dropdown-child :route="route('radio.apply')">
|
||||
{{ __('Word DJ') }}
|
||||
</x-navigation.dropdown-child>
|
||||
|
||||
<x-navigation.dropdown-child :route="route('radio.leaderboard')">
|
||||
{{ __('Radio punten') }}
|
||||
</x-navigation.dropdown-child>
|
||||
</x-slot:children>
|
||||
</x-navigation.dropdown>
|
||||
|
||||
<div class="w-full flex md:hidden gap-x-1 justify-center">
|
||||
<x-navigation.language-selector>
|
||||
<img src="/assets/images/icons/flags/{{ session()->has('locale') ? session()->get('locale') : config('habbo.site.default_language') }}.png"
|
||||
alt="">
|
||||
</x-navigation.language-selector>
|
||||
<div x-data="{ open: false }" class="w-full py-1 md:py-0 md:w-auto md:relative" x-on:click.outside="open = false">
|
||||
@auth
|
||||
<a href="#" class="flex gap-2 px-1 h-auto md:h-[60px] items-center text-[14px] font-semibold uppercase transition duration-200 ease-in-out md:border-b-4 md:border-transparent md:hover:border-b-[var(--color-primary)] md:px-4"
|
||||
style="color: var(--color-navbar-text);"
|
||||
x-on:click.prevent="open = !open">
|
||||
<img src="{{ asset('assets/images/icons/navigation/me.png') }}" alt="me" />
|
||||
<span>{{ auth()->user()->username }}</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor" style="color: var(--color-text-muted);"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
|
||||
</a>
|
||||
@else
|
||||
<a href="{{ route('welcome') }}" class="flex gap-2 px-1 h-auto md:h-[60px] items-center text-[14px] font-semibold uppercase transition duration-200 ease-in-out md:border-b-4 md:border-transparent md:hover:border-b-[var(--color-primary)] md:px-4"
|
||||
style="color: var(--color-navbar-text);">
|
||||
<img src="{{ asset('assets/images/icons/navigation/me.png') }}" alt="home" />
|
||||
<span>{{ __('Home') }}</span>
|
||||
</a>
|
||||
@endauth
|
||||
@auth
|
||||
<div x-show="open" x-cloak x-transition.duration.200ms
|
||||
class="w-full md:absolute md:top-full md:left-0 md:z-50 md:min-w-[220px] md:py-2 md:mt-1 rounded-xl"
|
||||
style="background-color: var(--color-dropdown); color: var(--color-text); border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent); box-shadow: 0 4px 24px rgba(0,0,0,0.25);">
|
||||
<a href="{{ route('me.show') }}" class="block py-4 px-8 font-semibold text-base transition hover:opacity-80 rounded-xl" style="color: var(--color-text);">{{ __('Home') }}</a>
|
||||
<a href="{{ route('draw-badge') }}" class="block py-4 px-8 font-semibold text-base transition hover:opacity-80 rounded-xl" style="color: var(--color-text);">{{ __('Badge Drawer') }}</a>
|
||||
<a href="{{ route('profile.show', auth()->user()->username) }}" class="block py-4 px-8 font-semibold text-base transition hover:opacity-80 rounded-xl" style="color: var(--color-text);">{{ __('My Profile') }}</a>
|
||||
</div>
|
||||
@endauth
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div x-data="{ open: false }" class="w-full py-1 md:py-0 md:w-auto md:relative" x-on:click.outside="open = false">
|
||||
<a href="#" class="flex gap-2 px-1 h-auto md:h-[60px] items-center text-[14px] font-semibold uppercase transition duration-200 ease-in-out md:border-b-4 md:border-transparent md:hover:border-b-[var(--color-primary)] md:px-4"
|
||||
style="color: var(--color-navbar-text);"
|
||||
x-on:click.prevent="open = !open">
|
||||
<img src="{{ asset('assets/images/icons/navigation/community.png') }}" alt="community" />
|
||||
<span>{{ __('Community') }}</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor" style="color: var(--color-text-muted);"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
|
||||
</a>
|
||||
<div x-show="open" x-cloak x-transition.duration.200ms
|
||||
class="w-full md:absolute md:top-full md:left-0 md:z-50 md:min-w-[220px] md:py-2 md:mt-1 rounded-xl"
|
||||
style="background-color: var(--color-dropdown); color: var(--color-text); border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent); box-shadow: 0 4px 24px rgba(0,0,0,0.25);">
|
||||
<a href="{{ route('article.index') }}" class="block py-4 px-8 font-semibold text-base transition hover:opacity-80 rounded-xl" style="color: var(--color-text);">{{ __('News') }}</a>
|
||||
<a href="{{ route('photos.index') }}" class="block py-4 px-8 font-semibold text-base transition hover:opacity-80 rounded-xl" style="color: var(--color-text);">{{ __('Photos') }}</a>
|
||||
<a href="{{ route('staff.index') }}" class="block py-4 px-8 font-semibold text-base transition hover:opacity-80 rounded-xl" style="color: var(--color-text);">{{ __('Staff') }}</a>
|
||||
<a href="{{ route('teams.index') }}" class="block py-4 px-8 font-semibold text-base transition hover:opacity-80 rounded-xl" style="color: var(--color-text);">{{ __('Teams') }}</a>
|
||||
<a href="{{ route('help-center.rules.index') }}" class="block py-4 px-8 font-semibold text-base transition hover:opacity-80 rounded-xl" style="color: var(--color-text);">{{ __('Rules') }}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div x-data="{ open: false }" class="w-full py-1 md:py-0 md:w-auto md:relative" x-on:click.outside="open = false">
|
||||
<a href="#" class="flex gap-2 px-1 h-auto md:h-[60px] items-center text-[14px] font-semibold uppercase transition duration-200 ease-in-out md:border-b-4 md:border-transparent md:hover:border-b-[var(--color-primary)] md:px-4"
|
||||
style="color: var(--color-navbar-text);"
|
||||
x-on:click.prevent="open = !open">
|
||||
<img src="{{ asset('assets/images/icons/navigation/goody.png') }}" alt="goodies" />
|
||||
<span>{{ __('Goodies') }}</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor" style="color: var(--color-text-muted);"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
|
||||
</a>
|
||||
<div x-show="open" x-cloak x-transition.duration.200ms
|
||||
class="w-full md:absolute md:top-full md:left-0 md:z-50 md:min-w-[220px] md:py-2 md:mt-1 rounded-xl"
|
||||
style="background-color: var(--color-dropdown); color: var(--color-text); border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent); box-shadow: 0 4px 24px rgba(0,0,0,0.25);">
|
||||
<a href="{{ route('shop.index') }}" class="block py-4 px-8 font-semibold text-base transition hover:opacity-80 rounded-xl" style="color: var(--color-text);">{{ __('Marketplace') }}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div x-data class="w-full py-1 md:py-0 md:w-auto md:relative">
|
||||
<a href="{{ route('leaderboard.index') }}" class="flex gap-2 px-1 h-auto md:h-[60px] items-center text-[14px] font-semibold uppercase transition duration-200 ease-in-out md:border-b-4 md:border-transparent md:hover:border-b-[var(--color-primary)] md:px-4"
|
||||
style="color: var(--color-navbar-text);">
|
||||
<img src="{{ asset('assets/images/icons/navigation/leaderboards.png') }}" alt="leaderboards" />
|
||||
<span>{{ __('Leaderboards') }}</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div x-data class="w-full py-1 md:py-0 md:w-auto md:relative">
|
||||
<a href="{{ route('shop.index') }}" class="flex gap-2 px-1 h-auto md:h-[60px] items-center text-[14px] font-semibold uppercase transition duration-200 ease-in-out md:border-b-4 md:border-transparent md:hover:border-b-[var(--color-primary)] md:px-4"
|
||||
style="color: var(--color-navbar-text);">
|
||||
<img src="{{ asset('assets/images/icons/navigation/shop.png') }}" alt="store" />
|
||||
<span>{{ __('Store') }}</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div x-data="{ open: false }" class="w-full py-1 md:py-0 md:w-auto md:relative" x-on:click.outside="open = false">
|
||||
<a href="#" class="flex gap-2 px-1 h-auto md:h-[60px] items-center text-[14px] font-semibold uppercase transition duration-200 ease-in-out md:border-b-4 md:border-transparent md:hover:border-b-[var(--color-primary)] md:px-4"
|
||||
style="color: var(--color-navbar-text);"
|
||||
x-on:click.prevent="open = !open">
|
||||
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>
|
||||
<span>{{ __('Radio') }}</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor" style="color: var(--color-text-muted);"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
|
||||
</a>
|
||||
<div x-show="open" x-cloak x-transition.duration.200ms
|
||||
class="w-full md:absolute md:top-full md:left-0 md:z-50 md:min-w-[220px] md:py-2 md:mt-1 rounded-xl"
|
||||
style="background-color: var(--color-dropdown); color: var(--color-text); border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent); box-shadow: 0 4px 24px rgba(0,0,0,0.25);">
|
||||
<a href="{{ route('radio.index') }}" class="block py-4 px-8 font-semibold text-base transition hover:opacity-80 rounded-xl" style="color: var(--color-text);">{{ __('Listen') }}</a>
|
||||
<a href="{{ route('radio.rooster') }}" class="block py-4 px-8 font-semibold text-base transition hover:opacity-80 rounded-xl" style="color: var(--color-text);">{{ __('Schedule') }}</a>
|
||||
<a href="{{ route('radio.leaderboard') }}" class="block py-4 px-8 font-semibold text-base transition hover:opacity-80 rounded-xl" style="color: var(--color-text);">{{ __('Points') }}</a>
|
||||
<a href="{{ route('radio.shouts') }}" class="block py-4 px-8 font-semibold text-base transition hover:opacity-80 rounded-xl" style="color: var(--color-text);">{{ __('Shouts') }}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,30 @@
|
||||
<button id="theme-switcher"
|
||||
type="button"
|
||||
class="mr-3 cursor-pointer items-center justify-center rounded-lg bg-gray-200 p-1 shadow-inner dark:bg-gray-800 hidden md:flex">
|
||||
<x-icons.moon class="h-5 w-5 text-gray-600 dark:text-white" />
|
||||
<button
|
||||
x-data="{
|
||||
toggle() {
|
||||
const currentTheme = localStorage.getItem('theme') || 'light';
|
||||
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
||||
localStorage.setItem('theme', newTheme);
|
||||
document.cookie = 'theme=' + newTheme + ';path=/;max-age=31536000;SameSite=Lax';
|
||||
|
||||
if (newTheme === 'dark') {
|
||||
document.documentElement.classList.add('dark');
|
||||
document.body.classList.add('dark', 'dark-mode');
|
||||
document.documentElement.style.cssText = 'background-color: #1a1d29 !important; color-scheme: dark;';
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark');
|
||||
document.body.classList.remove('dark', 'dark-mode');
|
||||
document.documentElement.style.cssText = 'color-scheme: light;';
|
||||
}
|
||||
}
|
||||
}"
|
||||
@click="toggle()"
|
||||
class="relative flex items-center justify-center text-gray-700 dark:text-white bg-white dark:bg-gray-900 rounded-full shadow-sm border border-gray-200 dark:border-gray-700 active:scale-95 transition-transform"
|
||||
style="width: 40px; height: 40px; min-width: 40px;"
|
||||
aria-label="Toggle theme">
|
||||
<svg class="w-5 h-5 hidden dark:block" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||
</svg>
|
||||
<svg class="w-5 h-5 block dark:hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
@@ -3,32 +3,33 @@
|
||||
<div class="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-4 xl:grid-cols-5">
|
||||
@forelse ($photos as $photo)
|
||||
<a href="{{ $photo->url }}" data-fancybox="gallery" class="group cursor-pointer block">
|
||||
<div class="relative rounded-lg overflow-hidden shadow-md border border-gray-600 hover:border-[#eeb425] transition-all duration-300">
|
||||
<div class="aspect-[4/3] relative overflow-hidden">
|
||||
<img class="h-full w-full object-cover object-center transition-transform duration-300 group-hover:scale-110"
|
||||
src="{{ $photo->url }}"
|
||||
alt="Photo by {{ $photo->user?->username ?? 'Unknown' }}">
|
||||
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||||
</div>
|
||||
|
||||
<div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black/90 to-transparent">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="flex h-7 w-7 items-center justify-center overflow-hidden rounded-full bg-gray-700 border border-gray-500">
|
||||
<img src="{{ setting('avatar_imager') }}{{ $photo->user?->look ?? '' }}&direction=2&headonly=1&head_direction=2&gesture=sml"
|
||||
alt="{{ $photo->user?->username ?? 'Unknown' }}"
|
||||
class="h-full w-full object-cover">
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-white text-sm font-semibold truncate ">{{ $photo->user?->username ?? __('Unknown') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative rounded-lg overflow-hidden shadow-md transition-all duration-300 group-hover:shadow-lg"
|
||||
style="border: 1px solid color-mix(in srgb, var(--color-text-muted) 20%, transparent);">
|
||||
<div class="aspect-[4/3] relative overflow-hidden">
|
||||
<img class="h-full w-full object-cover object-center transition-transform duration-300 group-hover:scale-110"
|
||||
src="{{ $photo->url }}"
|
||||
alt="Photo by {{ $photo->user?->username ?? 'Unknown' }}">
|
||||
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||||
</div>
|
||||
|
||||
<div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black/90 to-transparent">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="flex h-7 w-7 items-center justify-center overflow-hidden rounded-full" style="border: 1px solid color-mix(in srgb, var(--color-text-muted) 30%, transparent); background-color: color-mix(in srgb, var(--color-surface) 50%, transparent);">
|
||||
<img src="{{ setting('avatar_imager') }}{{ $photo->user?->look ?? '' }}&direction=2&headonly=1&head_direction=2&gesture=sml"
|
||||
alt="{{ $photo->user?->username ?? 'Unknown' }}"
|
||||
class="h-full w-full object-cover">
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-white text-sm font-semibold truncate">{{ $photo->user?->username ?? __('Unknown') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
@empty
|
||||
<div class="col-span-full text-center py-8">
|
||||
<p class="text-gray-500 dark:text-gray-400">No photos available</p>
|
||||
<p style="color: var(--color-text-muted);">{{ __('No photos available') }}</p>
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
|
||||
@@ -90,9 +90,9 @@
|
||||
@if($article->is_giftable)
|
||||
<x-modals.modal-wrapper>
|
||||
<div x-on:click="open = true">
|
||||
<x-form.primary-button type="button" classes="px-10">
|
||||
<x-icons.gift />
|
||||
</x-form.primary-button>
|
||||
<button type="button" class="rounded-lg px-4 py-2 text-sm font-semibold transition-all duration-200 hover:opacity-90 px-10" style="background-color: var(--color-primary); color: var(--button-text-color);">
|
||||
<x-icons.gift />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<x-modals.regular-modal>
|
||||
@@ -106,7 +106,7 @@
|
||||
<form action="{{ route('shop.buy', $article) }}" method="POST" class="w-full">
|
||||
@csrf
|
||||
|
||||
<x-form.input name="receiver" type="text" placeholder="Enter the name of the recipient you want to gift" classes="mb-2"/>
|
||||
<input type="text" name="receiver" placeholder="Enter the name of the recipient you want to gift" class="w-full rounded-lg px-3 py-2 text-sm border-2 focus:ring-0 mb-2" 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="w-full rounded bg-green-600 hover:bg-green-700 text-white p-2 border-2 border-green-500 transition ease-in-out duration-150 font-semibold">
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<div class="relative flex min-h-[13rem] h-52 w-full items-center justify-center header-bg"
|
||||
style="background: url({{ setting('cms_header') }});">
|
||||
<div class="relative flex min-h-[13rem] h-52 w-full items-center justify-center"
|
||||
style="background-image: url({{ asset('assets/images/mybobba_banner.png') }}); background-size: cover; background-position: center; background-repeat: no-repeat;">
|
||||
<div class="absolute h-full w-full bg-black/50"></div>
|
||||
|
||||
@auth
|
||||
@@ -51,37 +51,27 @@
|
||||
@endauth
|
||||
|
||||
@guest
|
||||
<x-modals.modal-wrapper>
|
||||
<div class="flex justify-center">
|
||||
<div class="font-semibold flex-col md:w-[600px]" style="color: #ffffff; text-shadow: 0 1px 4px rgba(0,0,0,0.7);">
|
||||
<p class="hidden text-center text-xl md:block" style="color: #ffffff; text-shadow: 0 1px 4px rgba(0,0,0,0.7);">
|
||||
{{ __('An online virtual world where you can create your own avatar, make friends, chat, create rooms and much more!') }}
|
||||
</p>
|
||||
<div x-data="{ open: false }" class="relative">
|
||||
<div class="flex flex-col items-center justify-center md:w-[600px] mx-auto">
|
||||
<a href="{{ route('welcome') }}" class="transition-all duration-300 hover:scale-110 mb-2.5">
|
||||
<img src="{{ setting('cms_logo') }}" alt="{{ setting('hotel_name') }}" class="drop-shadow block" />
|
||||
</a>
|
||||
|
||||
<div class="flex flex-col items-center justify-center gap-x-6 gap-y-4 md:mt-6 md:flex-row md:gap-y-0">
|
||||
<button type="button" x-on:click="open = true"
|
||||
class="rounded-full border-2 px-8! py-2! uppercase transition! duration-200! ease-in-out!"
|
||||
style="border-color: var(--color-primary); background-color: var(--color-primary); color: var(--button-text-color)">
|
||||
{{ __('Login') }}
|
||||
</button>
|
||||
<div class="relative flex items-center rounded-md h-[50px] px-4 mt-2 md:mt-0"
|
||||
style="margin-top: 5px; cursor: pointer; background-color: var(--color-surface, #ffffff); color: var(--color-text, #1f2937);" x-on:click="open = true">
|
||||
<div class="absolute w-6 h-6 z-0 diamond" aria-hidden="true" style="background-color: var(--color-surface, #ffffff);"></div>
|
||||
<div class="flex items-center space-x-2 relative z-10">
|
||||
<img src="{{ asset('assets/images/user-online.png') }}" alt="Online Icon" class="p-1"
|
||||
style="margin-top: -2px;" />
|
||||
<span class="whitespace-nowrap text-m text-gray-800 dark:text-white">{{ cache()->remember('online_user_count', 30, fn() => DB::table('users')->where('online', '1')->count()) }} {{ __('users online') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-sm uppercase" style="color: #ffffff; text-shadow: 0 1px 4px rgba(0,0,0,0.7);">{{ __('Or') }}</p>
|
||||
<x-modals.regular-modal x-model="show {{ session()->get('wrong-auth') }}">
|
||||
<x-auth.login-form />
|
||||
</x-modals.regular-modal>
|
||||
</div>
|
||||
|
||||
<a data-turbolinks="false" href="{{ route('register') }}">
|
||||
<button
|
||||
class="uppercase px-8! py-2.5! rounded-full transition! ease-in-out! duration-200!"
|
||||
style="background-color: var(--color-accent); color: var(--button-text-color, #ffffff);">
|
||||
{{ __('Create an account') }}
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-modals.regular-modal x-model="show {{ session()->get('wrong-auth') }}">
|
||||
<x-auth.login-form />
|
||||
</x-modals.regular-modal>
|
||||
</x-modals.modal-wrapper>
|
||||
|
||||
@endguest
|
||||
@endguest
|
||||
</div>
|
||||
|
||||
@@ -1,21 +1,20 @@
|
||||
<x-content.content-card icon="discord-icon" classes="border dark:border-gray-900">
|
||||
<x-slot:title>
|
||||
{{ __('Discord') }}
|
||||
</x-slot:title>
|
||||
|
||||
<x-slot:under-title>
|
||||
<span id="guildName"></span>
|
||||
</x-slot:under-title>
|
||||
|
||||
<div class="text-sm dark:text-gray-200">
|
||||
<div id="guildUsers" class="h-[129px] overflow-auto"> </div>
|
||||
<a id="guildInvite" target="blank">
|
||||
<x-form.secondary-button classes="mt-3">
|
||||
{{ __('Join server') }}
|
||||
</x-form.secondary-button>
|
||||
</a>
|
||||
<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">
|
||||
<h2 class="text-white font-bold text-lg">{{ __('Discord') }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
</x-content.content-card>
|
||||
<div class="p-4">
|
||||
<p class="text-sm mb-3" style="color: var(--color-text-muted);"><span id="guildName"></span></p>
|
||||
<div id="guildUsers" class="h-[129px] overflow-auto text-sm" style="color: var(--color-text);"> </div>
|
||||
<a id="guildInvite" target="blank">
|
||||
<button class="mt-3 w-full 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);">
|
||||
{{ __('Join server') }}
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@push('javascript')
|
||||
<script>
|
||||
@@ -27,10 +26,8 @@
|
||||
mode: 'cors',
|
||||
cache: 'reload'
|
||||
}
|
||||
//gets discord widget json from url with in settings specifed id
|
||||
fetch("https://discordapp.com/api/guilds/{{ setting('discord_widget_id') }}/widget.json", init).then(
|
||||
function(res) {
|
||||
//if there is a problem with discord or id sends an error message in console
|
||||
if (res.status != 200) {
|
||||
console.error("Discord widget cant connect to discord (" + res.status + ")");
|
||||
return;
|
||||
@@ -39,10 +36,8 @@
|
||||
res.json().then(function(data) {
|
||||
let users = data.members;
|
||||
let guildName = data.name;
|
||||
//sets the subtitle of the card to the guild name
|
||||
document.getElementById('guildName').innerText = guildName;
|
||||
|
||||
//loops over every user in json array and display them in the widget
|
||||
for (let i = 0; i < data.members.length; i++) {
|
||||
let container = document.createElement('div')
|
||||
let leftContainer = document.createElement('div')
|
||||
@@ -53,7 +48,6 @@
|
||||
let name = document.createElement('p')
|
||||
let motto = document.createElement('p')
|
||||
|
||||
//sets styleing
|
||||
container.classList.add('flex', 'items-center', 'gap-x-2')
|
||||
leftContainer.classList.add('relative')
|
||||
imgContainer.classList.add('h-9', 'w-9', 'bg-gray-100', 'dark:bg-gray-800',
|
||||
@@ -63,7 +57,6 @@
|
||||
name.classList.add('font-semibold')
|
||||
motto.classList.add('dark:text-gray-400')
|
||||
|
||||
//sets styling for exceptions
|
||||
if (i === 0) {
|
||||
name.classList.add('mt-1')
|
||||
}
|
||||
@@ -81,7 +74,6 @@
|
||||
status.style.backgroundColor = "#9c0017";
|
||||
}
|
||||
|
||||
//adds attributes to elements
|
||||
img.setAttribute('src', data.members[i].avatar_url);
|
||||
|
||||
if (users[i].nick === undefined) {
|
||||
@@ -93,7 +85,6 @@
|
||||
motto.innerText = users[i].game.name;
|
||||
}
|
||||
|
||||
//append all elements to each other
|
||||
container.appendChild(leftContainer)
|
||||
leftContainer.appendChild(imgContainer)
|
||||
imgContainer.appendChild(img)
|
||||
@@ -105,13 +96,10 @@
|
||||
document.getElementById('guildUsers').appendChild(container)
|
||||
}
|
||||
|
||||
//Checks if join server link is null and removes btn form webpage
|
||||
if (data.instant_invite === null) {
|
||||
document.getElementById('guildInvite').remove()
|
||||
document.getElementById('guildUsers').style.height = "176px"
|
||||
} else {
|
||||
//Gives the "Join server" button a href to the default selected channel in the server
|
||||
//link is recived from widget json
|
||||
document.getElementById('guildInvite').setAttribute('href', data.instant_invite)
|
||||
}
|
||||
})
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
@props(['colSpan'])
|
||||
|
||||
<div class="col-span-2 lg:col-span-{{ $colSpan }}">
|
||||
{{ $image }}
|
||||
{{ $image }}
|
||||
|
||||
<div class="shadow">
|
||||
<div class="flex gap-x-2 rounded-t border-b p-3" style="background-color: var(--color-surface); border-color: var(--color-text-muted);">
|
||||
<p class="font-semibold" style="color: var(--color-text)">{{ $title }}</p>
|
||||
</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="flex gap-x-2 border-b p-3" style="background-color: var(--color-surface); border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
<p class="font-semibold" style="color: var(--color-text)">{{ $title }}</p>
|
||||
</div>
|
||||
|
||||
<section class="rounded-b p-3" style="background-color: var(--color-surface); color: var(--color-text);">
|
||||
{{ $slot }}
|
||||
</section>
|
||||
</div>
|
||||
<section class="p-3" style="color: var(--color-text);">
|
||||
{{ $slot }}
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -6,50 +6,67 @@
|
||||
@push('title', auth()->user() ? auth()->user()->username : __('Help Center'))
|
||||
|
||||
<div class="col-span-12 flex flex-col lg:flex-row gap-4">
|
||||
<div class="flex flex-col gap-4 w-full lg:w-3/5">
|
||||
@foreach($categories->where('small_box', false) as $category)
|
||||
<x-content.content-card icon="duo-chat-icon" classes="border border-[var(--color-text-muted)]">
|
||||
<x-slot:title>
|
||||
{{ str_replace(':hotel', $hotelName, $category->name) }}
|
||||
</x-slot:title>
|
||||
<div class="flex flex-col gap-4 w-full lg:w-3/5">
|
||||
@foreach($categories->where('small_box', false) as $category)
|
||||
<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);">
|
||||
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-white font-bold text-sm">{{ str_replace(':hotel', $hotelName, $category->name) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-2 text-sm text-[var(--color-text)]">
|
||||
<img class="px-2" style="float: right !important;"
|
||||
src="{{ asset('/assets/images/help-center/' . $category->image_url) }}" alt="">
|
||||
{!! str_replace(':hotel', $hotelName, $category->content) !!}
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<div class="text-sm" style="color: var(--color-text);">
|
||||
<img class="px-2" style="float: right !important;" src="{{ asset('/assets/images/help-center/' . $category->image_url) }}" alt="">
|
||||
{!! str_replace(':hotel', $hotelName, $category->content) !!}
|
||||
</div>
|
||||
|
||||
<a data-turbolinks="false" href="{{ $category->button_url ?? '#' }}" class="mt-4 ml-2">
|
||||
<button
|
||||
style="background-color: {{ $category->button_color }}; border: {{ $category->button_border_color }} solid 2px; color: var(--button-text-color);"
|
||||
class="px-2 py-1 font-semibold rounded transition hover:scale-105">
|
||||
{{ str_replace(':hotel', $hotelName, $category->button_text) }}
|
||||
</button>
|
||||
</a>
|
||||
</x-content.content-card>
|
||||
@endforeach
|
||||
</div>
|
||||
<a data-turbolinks="false" href="{{ $category->button_url ?? '#' }}" class="mt-4 inline-block">
|
||||
<button style="background-color: {{ $category->button_color }}; border: {{ $category->button_border_color }} solid 2px; color: var(--button-text-color);" class="px-2 py-1 font-semibold rounded transition hover:scale-105">
|
||||
{{ str_replace(':hotel', $hotelName, $category->button_text) }}
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-4 w-full lg:w-2/5">
|
||||
@foreach($categories->where('small_box', true) as $category)
|
||||
<x-content.content-card icon="duo-chat-icon" classes="border border-[var(--color-text-muted)]">
|
||||
<x-slot:title>
|
||||
{{ str_replace(':hotel', $hotelName, $category->name) }}
|
||||
</x-slot:title>
|
||||
<div class="flex flex-col gap-4 w-full lg:w-2/5">
|
||||
@foreach($categories->where('small_box', true) as $category)
|
||||
<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);">
|
||||
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-white font-bold text-sm">{{ str_replace(':hotel', $hotelName, $category->name) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-2 text-sm text-[var(--color-text)]">
|
||||
{!! str_replace(':hotel', $hotelName, $category->content) !!}
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<div class="text-sm" style="color: var(--color-text);">
|
||||
{!! str_replace(':hotel', $hotelName, $category->content) !!}
|
||||
</div>
|
||||
|
||||
<a data-turbolinks="false" href="{{ $category->button_url ?? '#' }}" class="mt-4 ml-2">
|
||||
<button
|
||||
style="background-color: {{ $category->button_color }}; border: {{ $category->button_border_color }} solid 2px; color: var(--button-text-color);"
|
||||
class="px-2 py-1 font-semibold rounded transition hover:scale-105">
|
||||
{{ str_replace(':hotel', $hotelName, $category->button_text) }}
|
||||
</button>
|
||||
</a>
|
||||
</x-content.content-card>
|
||||
@endforeach
|
||||
</div>
|
||||
<a data-turbolinks="false" href="{{ $category->button_url ?? '#' }}" class="mt-4 inline-block">
|
||||
<button style="background-color: {{ $category->button_color }}; border: {{ $category->button_border_color }} solid 2px; color: var(--button-text-color);" class="px-2 py-1 font-semibold rounded transition hover:scale-105">
|
||||
{{ str_replace(':hotel', $hotelName, $category->button_text) }}
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
||||
@@ -1,78 +1,102 @@
|
||||
<x-app-layout>
|
||||
@push('title', 'Create a ticket')
|
||||
|
||||
<x-content.content-card icon="chat-icon" classes="border border-[var(--color-text-muted)] col-span-12 lg:col-span-9">
|
||||
<x-slot:title>
|
||||
{{ __('Create a ticket') }}
|
||||
</x-slot:title>
|
||||
<div class="col-span-12 lg:col-span-9">
|
||||
<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);">
|
||||
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-white font-bold text-sm">{{ __('Create a ticket') }}</p>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">{{ __('Please describe your request below') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-slot:under-title>
|
||||
{{ __('Please describe your request below') }}
|
||||
</x-slot:under-title>
|
||||
<div class="p-4">
|
||||
<form action="{{ route('help-center.ticket.store') }}" method="POST">
|
||||
@csrf
|
||||
|
||||
<form action="{{ route('help-center.ticket.store') }}" method="POST">
|
||||
@csrf
|
||||
<select name="category_id" id="category_id"
|
||||
class="focus:ring-0 border rounded-lg w-full text-sm px-3 py-2.5"
|
||||
style="background-color: var(--color-background); border-color: color-mix(in srgb, var(--color-text-muted) 20%, transparent); color: var(--color-text); @error('category_id') border-color: #ef4444 !important; @enderror">
|
||||
@foreach($categories as $category)
|
||||
<option value="{{ $category->id }}">
|
||||
{{ $category->name }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
|
||||
<select name="category_id" id="category_id"
|
||||
class="focus:ring-0 border-4 border-[var(--color-text-muted)] rounded bg-[var(--color-surface)] border-[var(--color-text-muted)] text-[var(--color-text)] focus:border-[var(--color-primary)] w-full @error('category_id') border-red-600 ring-red-500 @enderror">
|
||||
@foreach($categories as $category)
|
||||
<option value="{{ $category->id }}">
|
||||
{{ $category->name }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
<div class="mt-4">
|
||||
<label class="block text-sm font-semibold mb-1" style="color: var(--color-text);">
|
||||
{{ __('Title') }}
|
||||
</label>
|
||||
|
||||
<div class="mt-4 no-tailwind">
|
||||
<x-form.label for="password_confirmation">
|
||||
{{ __('Title') }}
|
||||
</x-form.label>
|
||||
<input name="title" type="text" value="{{ old('title') }}"
|
||||
placeholder="{{ __('Enter a title for your ticket') }}"
|
||||
class="focus:ring-0 border rounded-lg w-full text-sm px-3 py-2.5"
|
||||
style="background-color: var(--color-background); border-color: color-mix(in srgb, var(--color-text-muted) 20%, transparent); color: var(--color-text);">
|
||||
</div>
|
||||
|
||||
<x-form.input name="title" type="text"
|
||||
placeholder="{{ __('Enter a title for your ticket') }}"/>
|
||||
<div class="mt-4">
|
||||
<x-form.wysiwyg-editor />
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<button type="submit"
|
||||
class="px-4 py-2 rounded-lg text-sm font-semibold transition ease-in-out duration-150"
|
||||
style="background-color: var(--color-primary); color: var(--button-text-color);">
|
||||
{{ __('Submit ticket') }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-form.wysiwyg-editor/>
|
||||
|
||||
<x-form.secondary-button type="submit" classes="mt-4">
|
||||
{{ __('Submit ticket') }}
|
||||
</x-form.secondary-button>
|
||||
</form>
|
||||
</x-content.content-card>
|
||||
|
||||
<div class="col-span-12 lg:col-span-3">
|
||||
<x-content.content-card icon="duo-chat-icon"
|
||||
classes="border border-[var(--color-text-muted)] text-[var(--color-text)]">
|
||||
<x-slot:title>
|
||||
{{ __('Open tickets') }}
|
||||
</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">
|
||||
<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);">
|
||||
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-white font-bold text-sm">{{ __('Open tickets') }}</p>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">{{ __('Your current open tickets') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-slot:under-title>
|
||||
{{ __('Your current open tickets') }}
|
||||
</x-slot:under-title>
|
||||
<div class="p-4">
|
||||
<div class="flex flex-col gap-2">
|
||||
@forelse($openTickets as $ticket)
|
||||
<div class="w-full rounded-lg p-2" style="background-color: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));">
|
||||
<div class="flex items-center gap-x-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-4 h-4" style="color: var(--color-text-muted);">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5"/>
|
||||
</svg>
|
||||
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
@forelse($openTickets as $ticket)
|
||||
<div class="w-full rounded bg-[var(--color-background)] p-2">
|
||||
<div class="flex items-center gap-x-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-4 h-4">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5"/>
|
||||
</svg>
|
||||
|
||||
<a data-turbolinks="false" href="{{ route('help-center.ticket.show', $ticket) }}" class="hover:text-[var(--color-primary)]">
|
||||
{{ Str::limit($ticket->title, 20) }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<p>
|
||||
You currently have no open tickets.
|
||||
</p>
|
||||
|
||||
@endforelse
|
||||
</div>
|
||||
</x-content.content-card>
|
||||
<a data-turbolinks="false" href="{{ route('help-center.ticket.show', $ticket) }}" class="text-sm hover:underline" style="color: var(--color-text);">
|
||||
{{ Str::limit($ticket->title, 20) }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<p class="text-sm" style="color: var(--color-text-muted);">
|
||||
{{ __('You currently have no open tickets.') }}
|
||||
</p>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
||||
@@ -1,83 +1,107 @@
|
||||
<x-app-layout>
|
||||
@push('title', 'Create a ticket')
|
||||
@push('title', 'Edit ticket')
|
||||
|
||||
<x-content.content-card icon="chat-icon" classes="border border-[var(--color-text-muted)] col-span-12 lg:col-span-9">
|
||||
<x-slot:title>
|
||||
{{ __('Edit your ticket') }}
|
||||
</x-slot:title>
|
||||
<div class="col-span-12 lg:col-span-9">
|
||||
<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);">
|
||||
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-white font-bold text-sm">{{ __('Edit your ticket') }}</p>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">{{ __('Please describe your request below') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-slot:under-title>
|
||||
{{ __('Please describe your request below') }}
|
||||
</x-slot:under-title>
|
||||
<div class="p-4">
|
||||
<form action="{{ route('help-center.ticket.update', $ticket) }}" method="POST">
|
||||
@method('PUT')
|
||||
@csrf
|
||||
|
||||
<form action="{{ route('help-center.ticket.update', $ticket) }}" method="POST">
|
||||
@method('PUT')
|
||||
@csrf
|
||||
<select name="category_id" id="category_id"
|
||||
class="focus:ring-0 border rounded-lg w-full text-sm px-3 py-2.5"
|
||||
style="background-color: var(--color-background); border-color: color-mix(in srgb, var(--color-text-muted) 20%, transparent); color: var(--color-text); @error('category_id') border-color: #ef4444 !important; @enderror">
|
||||
<option value="{{ $ticket->category_id }}" selected>
|
||||
{{ $ticket->category->name }}
|
||||
</option>
|
||||
|
||||
<select name="category_id" id="category_id"
|
||||
class="focus:ring-0 border-4 border-[var(--color-text-muted)] rounded bg-[var(--color-surface)] border-[var(--color-text-muted)] text-[var(--color-text)] focus:border-[var(--color-primary)] w-full @error('category_id') border-red-600 ring-red-500 @enderror">
|
||||
<option value="{{ $ticket->category_id }}" selected>
|
||||
{{ $ticket->category->name }}
|
||||
</option>
|
||||
@foreach($categories as $category)
|
||||
<option value="{{ $category->id }}">
|
||||
{{ $category->name }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
|
||||
@foreach($categories as $category)
|
||||
<option value="{{ $category->id }}">
|
||||
{{ $category->name }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
<div class="mt-4">
|
||||
<label class="block text-sm font-semibold mb-1" style="color: var(--color-text);">
|
||||
{{ __('Title') }}
|
||||
</label>
|
||||
|
||||
<div class="mt-4 no-tailwind">
|
||||
<x-form.label for="password_confirmation">
|
||||
{{ __('Title') }}
|
||||
</x-form.label>
|
||||
<input name="title" type="text" value="{{ $ticket->title }}"
|
||||
placeholder="{{ __('Enter a title for your ticket') }}"
|
||||
class="focus:ring-0 border rounded-lg w-full text-sm px-3 py-2.5"
|
||||
style="background-color: var(--color-background); border-color: color-mix(in srgb, var(--color-text-muted) 20%, transparent); color: var(--color-text);">
|
||||
</div>
|
||||
|
||||
<x-form.input name="title" type="text" value="{{ $ticket->title }}"
|
||||
placeholder="{{ __('Enter a title for your ticket') }}"/>
|
||||
<div class="mt-4">
|
||||
<x-form.wysiwyg-editor :content="$ticket->content" />
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<button type="submit"
|
||||
class="px-4 py-2 rounded-lg text-sm font-semibold transition ease-in-out duration-150"
|
||||
style="background-color: var(--color-primary); color: var(--button-text-color);">
|
||||
{{ __('Update ticket') }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-form.wysiwyg-editor :content="$ticket->content"/>
|
||||
|
||||
<x-form.secondary-button type="submit" classes="mt-4">
|
||||
{{ __('Update ticket') }}
|
||||
</x-form.secondary-button>
|
||||
</form>
|
||||
</x-content.content-card>
|
||||
|
||||
<div class="col-span-12 lg:col-span-3">
|
||||
<x-content.content-card icon="duo-chat-icon"
|
||||
classes="border border-[var(--color-text-muted)] text-[var(--color-text)]">
|
||||
<x-slot:title>
|
||||
{{ __('Open tickets') }}
|
||||
</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">
|
||||
<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);">
|
||||
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-white font-bold text-sm">{{ __('Open tickets') }}</p>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">{{ __('Your current open tickets') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-slot:under-title>
|
||||
{{ __('Your current open tickets') }}
|
||||
</x-slot:under-title>
|
||||
<div class="p-4">
|
||||
<div class="flex flex-col gap-2">
|
||||
@forelse($openTickets as $ticket)
|
||||
<div class="w-full rounded-lg p-2" style="background-color: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));">
|
||||
<div class="flex items-center gap-x-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-4 h-4" style="color: var(--color-text-muted);">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5"/>
|
||||
</svg>
|
||||
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
@forelse($openTickets as $ticket)
|
||||
<div class="w-full rounded bg-[var(--color-background)] p-2">
|
||||
<div class="flex items-center gap-x-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-4 h-4">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5"/>
|
||||
</svg>
|
||||
|
||||
<a data-turbolinks="false" href="{{ route('help-center.ticket.show', $ticket) }}" class="hover:text-[var(--color-primary)]">
|
||||
{{ Str::limit($ticket->title, 20) }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<p>
|
||||
You currently have no open tickets.
|
||||
</p>
|
||||
|
||||
@endforelse
|
||||
</div>
|
||||
</x-content.content-card>
|
||||
<a data-turbolinks="false" href="{{ route('help-center.ticket.show', $ticket) }}" class="text-sm hover:underline" style="color: var(--color-text);">
|
||||
{{ Str::limit($ticket->title, 20) }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<p class="text-sm" style="color: var(--color-text-muted);">
|
||||
{{ __('You currently have no open tickets.') }}
|
||||
</p>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
||||
@@ -1,83 +1,99 @@
|
||||
<x-app-layout>
|
||||
@push('title', 'Create a ticket')
|
||||
|
||||
<x-content.content-card icon="chat-icon" classes="border col-span-12">
|
||||
<x-slot:title>
|
||||
{{ __('All tickets') }}
|
||||
</x-slot:title>
|
||||
<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);">
|
||||
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M16.5 6v.75M16.5 12v.75M16.5 18v.75M12 3v15M9 3v.75M6 3v.75M3 12h18M3 6h18M3 18h18" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-white font-bold text-sm">{{ __('All tickets') }}</p>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">{{ __('Manage all support tickets') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="overflow-hidden overflow-x-auto rounded border" style="border-color: var(--color-text-muted);">
|
||||
<table class="min-w-full text-sm divide-y" style="border-color: var(--color-text-muted);">
|
||||
<thead style="background-color: var(--color-surface);">
|
||||
<tr>
|
||||
<th class="whitespace-nowrap px-4 py-2 text-left font-medium">
|
||||
{{ __('Title') }}
|
||||
</th>
|
||||
<th class="whitespace-nowrap px-4 py-2 text-left font-medium">
|
||||
{{ __('Author') }}
|
||||
</th>
|
||||
<th class="whitespace-nowrap px-4 py-2 text-left font-medium">
|
||||
{{ __('Status') }}
|
||||
</th>
|
||||
<th class="whitespace-nowrap px-4 py-2 text-left font-medium">
|
||||
{{ __('Actions') }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<div class="p-4">
|
||||
<div class="overflow-hidden overflow-x-auto rounded-lg border" style="border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
<table class="min-w-full text-sm divide-y" style="border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
<thead style="background-color: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));">
|
||||
<tr>
|
||||
<th class="whitespace-nowrap px-4 py-2 text-left font-medium" style="color: var(--color-text);">
|
||||
{{ __('Title') }}
|
||||
</th>
|
||||
<th class="whitespace-nowrap px-4 py-2 text-left font-medium" style="color: var(--color-text);">
|
||||
{{ __('Author') }}
|
||||
</th>
|
||||
<th class="whitespace-nowrap px-4 py-2 text-left font-medium" style="color: var(--color-text);">
|
||||
{{ __('Status') }}
|
||||
</th>
|
||||
<th class="whitespace-nowrap px-4 py-2 text-left font-medium" style="color: var(--color-text);">
|
||||
{{ __('Actions') }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody class="divide-y" style="border-color: var(--color-text-muted); color: var(--color-text);">
|
||||
@forelse ($tickets as $ticket)
|
||||
<tr>
|
||||
<td class="whitespace-nowrap px-4 py-2 font-medium">
|
||||
{{ Str::limit($ticket->title, 80) }}
|
||||
</td>
|
||||
<td class="px-4 py-2">
|
||||
{{ $ticket->user->username }}</td>
|
||||
<td class="px-4 py-2">
|
||||
{{ $ticket->open ? 'Open' : 'Closed' }}
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-4 py-2 font-medium flex gap-x-3">
|
||||
<a data-turbolinks="false" href="{{ route('help-center.ticket.show', $ticket) }}" style="color: var(--link-color);">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
</a>
|
||||
<tbody class="divide-y" style="border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent); color: var(--color-text);">
|
||||
@forelse ($tickets as $ticket)
|
||||
<tr>
|
||||
<td class="whitespace-nowrap px-4 py-2 font-medium">
|
||||
{{ Str::limit($ticket->title, 80) }}
|
||||
</td>
|
||||
<td class="px-4 py-2">
|
||||
{{ $ticket->user->username }}
|
||||
</td>
|
||||
<td class="px-4 py-2">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium" style="background-color: {{ $ticket->open ? 'color-mix(in srgb, #22c55e 15%, transparent)' : 'color-mix(in srgb, #ef4444 15%, transparent)' }}; color: {{ $ticket->open ? '#22c55e' : '#ef4444' }};">
|
||||
{{ $ticket->open ? 'Open' : 'Closed' }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-4 py-2 font-medium flex gap-x-3">
|
||||
<a data-turbolinks="false" href="{{ route('help-center.ticket.show', $ticket) }}" style="color: var(--link-color);">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a data-turbolinks="false" href="{{ route('help-center.ticket.edit', $ticket) }}" style="color: var(--link-color);">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
|
||||
</svg>
|
||||
</a>
|
||||
<a data-turbolinks="false" href="{{ route('help-center.ticket.edit', $ticket) }}" style="color: var(--link-color);">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
@if(hasPermission('delete_website_tickets'))
|
||||
<form action="{{ route('help-center.ticket.destroy', $ticket) }}" method="POST">
|
||||
@method('DELETE')
|
||||
@csrf
|
||||
@if(hasPermission('delete_website_tickets'))
|
||||
<form action="{{ route('help-center.ticket.destroy', $ticket) }}" method="POST">
|
||||
@method('DELETE')
|
||||
@csrf
|
||||
|
||||
<button type="submit" style="color: #ef4444;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
@endif
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td class="whitespace-nowrap px-4 py-2 text-center"
|
||||
colspan="3">
|
||||
{{ __('No tickets available') }}
|
||||
</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
<button type="submit" style="color: #ef4444;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
@endif
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td class="whitespace-nowrap px-4 py-2 text-center" colspan="4">
|
||||
{{ __('No tickets available') }}
|
||||
</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
{{ $tickets->links() }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
{{ $tickets->links() }}
|
||||
</div>
|
||||
</x-content.content-card>
|
||||
</x-app-layout>
|
||||
|
||||
@@ -1,185 +1,219 @@
|
||||
<x-app-layout>
|
||||
@push('title', 'Create a ticket')
|
||||
@push('title', $ticket->title)
|
||||
|
||||
<x-content.content-card icon="chat-icon" classes="border border-[var(--color-text-muted)] text-[var(--color-text)] col-span-12 lg:col-span-9">
|
||||
<x-slot:title>
|
||||
<div class="flex gap-x-2">
|
||||
{{ $ticket->title }} [{{ $ticket->category->name }}]
|
||||
<div class="col-span-12 lg:col-span-9">
|
||||
<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);">
|
||||
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex items-center gap-x-2">
|
||||
<p class="text-white font-bold text-sm">{{ $ticket->title }}</p>
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium" style="background-color: color-mix(in srgb, rgba(255,255,255,0.2) 100%, transparent); color: rgba(255,255,255,0.9);">
|
||||
[{{ $ticket->category->name }}]
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if($ticket->canManageTicket())
|
||||
<a data-turbolinks="false" href="{{ route('help-center.ticket.edit', $ticket) }}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
|
||||
</svg>
|
||||
</a>
|
||||
@endif
|
||||
<div class="p-4">
|
||||
<div class="flex flex-wrap gap-3 mb-6">
|
||||
@if($ticket->isOpen())
|
||||
<form action="{{ route('help-center.ticket.toggle-status', $ticket) }}" method="POST">
|
||||
@method('PUT')
|
||||
@csrf
|
||||
<button type="submit"
|
||||
class="px-4 py-2 rounded-lg text-sm font-semibold transition ease-in-out duration-150"
|
||||
style="background-color: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)); color: var(--color-text); border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);">
|
||||
{{ __('Close') }}
|
||||
</button>
|
||||
</form>
|
||||
@else
|
||||
<form action="{{ route('help-center.ticket.toggle-status', $ticket) }}" method="POST">
|
||||
@method('PUT')
|
||||
@csrf
|
||||
<button type="submit"
|
||||
class="px-4 py-2 rounded-lg text-sm font-semibold transition ease-in-out duration-150"
|
||||
style="background-color: var(--color-primary); color: var(--button-text-color);">
|
||||
{{ __('Re-open') }}
|
||||
</button>
|
||||
</form>
|
||||
@endif
|
||||
|
||||
@if($ticket->canManageTicket())
|
||||
<a data-turbolinks="false" href="{{ route('help-center.ticket.edit', $ticket) }}">
|
||||
<button type="button"
|
||||
class="px-4 py-2 rounded-lg text-sm font-semibold transition ease-in-out duration-150"
|
||||
style="background-color: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)); color: var(--color-text); border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);">
|
||||
{{ __('Edit') }}
|
||||
</button>
|
||||
</a>
|
||||
@endif
|
||||
|
||||
<form action="{{ route('help-center.ticket.destroy', $ticket) }}" method="POST">
|
||||
@method('DELETE')
|
||||
@csrf
|
||||
<button type="submit"
|
||||
class="px-4 py-2 rounded-lg text-sm font-semibold transition ease-in-out duration-150"
|
||||
style="background-color: #ef4444; color: white;">
|
||||
{{ __('Delete') }}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<article class="prose-xl text-sm" style="color: var(--color-text); width: 100%;">
|
||||
{!! $ticket->content !!}
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg overflow-hidden mt-4" 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);">
|
||||
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-white font-bold text-sm">{{ __('Comments') }}</p>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">{{ __('Please submit your reply below') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4">
|
||||
@if($ticket->isOpen())
|
||||
<form action="{{ route('help-center.ticket.reply.store', $ticket) }}" method="POST">
|
||||
@csrf
|
||||
|
||||
<x-form.wysiwyg-editor />
|
||||
|
||||
<div class="mt-2">
|
||||
<button type="submit"
|
||||
class="px-4 py-2 rounded-lg text-sm font-semibold transition ease-in-out duration-150"
|
||||
style="background-color: var(--color-primary); color: var(--button-text-color);">
|
||||
{{ __('Submit reply') }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
@endif
|
||||
|
||||
<div class="flex flex-col gap-y-4 mt-4">
|
||||
@forelse($ticket->replies as $reply)
|
||||
@if($reply->user_id === auth()->user()->id)
|
||||
<div class="w-full rounded-lg overflow-hidden" style="background-color: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface)); border: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);">
|
||||
<div class="h-[50px] px-4 flex items-center justify-between relative overflow-hidden" style="border-bottom: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);">
|
||||
<div class="flex items-center gap-x-2">
|
||||
<img class="w-8 h-8 rounded-full" src="{{ setting('avatar_imager') }}/{{ $reply->user->look }}" alt="">
|
||||
<small class="font-semibold text-sm" style="color: var(--color-text);">{{ $reply->user->username }}</small>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-x-2">
|
||||
<small class="text-xs" style="color: var(--color-text-muted);">{{ $reply->created_at->diffForHumans() }}</small>
|
||||
|
||||
@if($reply->user_id === Auth::id() || hasPermission('delete_website_ticket_replies'))
|
||||
<form action="{{ route('help-center.ticket.reply.destroy', $reply) }}" method="POST">
|
||||
@method('DELETE')
|
||||
@csrf
|
||||
|
||||
<button type="submit" class="hover:opacity-75" style="color: #ef4444;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4 text-sm" style="color: var(--color-text);">
|
||||
{!! $reply->content !!}
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
<div class="w-full rounded-lg overflow-hidden" style="background-color: color-mix(in srgb, var(--color-background) 100%, transparent); border: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);">
|
||||
<div class="h-[50px] px-4 flex items-center justify-between relative overflow-hidden" style="border-bottom: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);">
|
||||
<div class="flex items-center gap-x-2">
|
||||
<small class="text-xs" style="color: var(--color-text-muted);">{{ $reply->created_at->diffForHumans() }}</small>
|
||||
|
||||
@if($reply->user_id === Auth::id() || hasPermission('delete_website_ticket_replies'))
|
||||
<form action="{{ route('help-center.ticket.reply.destroy', $reply) }}" method="POST">
|
||||
@method('DELETE')
|
||||
@csrf
|
||||
|
||||
<button type="submit" class="hover:opacity-75" style="color: #ef4444;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-x-2">
|
||||
<small class="font-semibold text-sm" style="color: var(--color-text);">{{ $reply->user->username }}</small>
|
||||
<img class="w-8 h-8 rounded-full scale-x-[-1]" src="{{ setting('avatar_imager') }}/{{ $reply->user->look }}" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4 text-sm" style="color: var(--color-text);">
|
||||
{!! $reply->content !!}
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
@empty
|
||||
<p class="text-sm" style="color: var(--color-text-muted);">
|
||||
{{ __('There is currently no replies') }}
|
||||
</p>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-slot:title>
|
||||
|
||||
<div class="w-full flex gap-x-3">
|
||||
@if($ticket->isOpen())
|
||||
<form action="{{ route('help-center.ticket.toggle-status', $ticket) }}" method="POST" class="w-full">
|
||||
@method('PUT')
|
||||
@csrf
|
||||
|
||||
<x-form.secondary-button>
|
||||
Close
|
||||
</x-form.secondary-button>
|
||||
</form>
|
||||
@else
|
||||
<form action="{{ route('help-center.ticket.toggle-status', $ticket) }}" method="POST" class="w-full">
|
||||
@method('PUT')
|
||||
@csrf
|
||||
|
||||
<x-form.primary-button>
|
||||
Re-open
|
||||
</x-form.primary-button>
|
||||
</form>
|
||||
@endif
|
||||
|
||||
<form action="{{ route('help-center.ticket.destroy', $ticket) }}" method="POST" class="w-full">
|
||||
@method('DELETE')
|
||||
@csrf
|
||||
|
||||
<x-form.danger-button>
|
||||
Delete
|
||||
</x-form.danger-button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<article class="prose-xl mt-8" style="width: 100%;">
|
||||
{!! $ticket->content !!}
|
||||
</article>
|
||||
</x-content.content-card>
|
||||
|
||||
<div class="col-span-12 lg:col-span-3">
|
||||
<x-content.content-card icon="duo-chat-icon"
|
||||
classes="border border-[var(--color-text-muted)] text-[var(--color-text)]">
|
||||
<x-slot:title>
|
||||
{{ __('Open tickets') }}
|
||||
</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">
|
||||
<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);">
|
||||
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-white font-bold text-sm">{{ __('Open tickets') }}</p>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">{{ __('Your current open tickets') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-slot:under-title>
|
||||
{{ __('Your current open tickets') }}
|
||||
</x-slot:under-title>
|
||||
<div class="p-4">
|
||||
<div class="flex flex-col gap-2">
|
||||
@forelse($openTickets as $ticket)
|
||||
<div class="w-full rounded-lg p-2" style="background-color: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));">
|
||||
<div class="flex items-center gap-x-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-4 h-4" style="color: var(--color-text-muted);">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5"/>
|
||||
</svg>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
@forelse($openTickets as $ticket)
|
||||
<div class="w-full rounded bg-gray-200 p-2 dark:bg-gray-700">
|
||||
<div class="flex items-center gap-x-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-4 h-4">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5"/>
|
||||
</svg>
|
||||
|
||||
<a data-turbolinks="false" href="{{ route('help-center.ticket.show', $ticket) }}" class="hover:text-[var(--color-primary)]">
|
||||
{{ Str::limit($ticket->title, 20) }}
|
||||
</a>
|
||||
<a data-turbolinks="false" href="{{ route('help-center.ticket.show', $ticket) }}" class="text-sm hover:underline" style="color: var(--color-text);">
|
||||
{{ Str::limit($ticket->title, 20) }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<p class="text-sm" style="color: var(--color-text-muted);">
|
||||
{{ __('You currently have no open tickets.') }}
|
||||
</p>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<p>
|
||||
You currently have no open tickets.
|
||||
</p>
|
||||
@endforelse
|
||||
</div>
|
||||
</x-content.content-card>
|
||||
</div>
|
||||
|
||||
<x-content.content-card icon="duo-chat-icon"
|
||||
classes="border border-[var(--color-text-muted)] text-[var(--color-text)] border border-[var(--color-text-muted)] text-[var(--color-text)] col-span-12 lg:col-span-9 -mt-4">
|
||||
<x-slot:title>
|
||||
{{ __('Comments') }}
|
||||
</x-slot:title>
|
||||
|
||||
<x-slot:under-title>
|
||||
{{ __('Please submit your reply below') }}
|
||||
</x-slot:under-title>
|
||||
|
||||
@if($ticket->isOpen())
|
||||
<form action="{{ route('help-center.ticket.reply.store', $ticket) }}" method="POST">
|
||||
@csrf
|
||||
|
||||
<x-form.wysiwyg-editor />
|
||||
|
||||
<x-form.secondary-button classes="mt-2">
|
||||
{{ __('Submit reply') }}
|
||||
</x-form.secondary-button>
|
||||
</form>
|
||||
@endif
|
||||
|
||||
<div class="flex flex-col gap-y-4 mt-4">
|
||||
@forelse($ticket->replies as $reply)
|
||||
@if($reply->user_id === auth()->user()->id)
|
||||
<div class="w-full rounded bg-[var(--color-background)]">
|
||||
<div class="h-[50px] px-4 flex items-center justify-between border-b border-[var(--color-text-muted)] relative overflow-hidden">
|
||||
<div class="flex">
|
||||
<small class="ml-14 text-[var(--color-text-muted)]">{{ $reply->user->username }}</small>
|
||||
<div class="absolute left-2 -bottom-10 flex gap-x-2">
|
||||
<img src="{{ setting('avatar_imager') }}/{{ $reply->user->look }}" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-x-2">
|
||||
<small class="text-[var(--color-text-muted)]">{{ $reply->created_at->diffForHumans() }}</small>
|
||||
|
||||
@if($reply->user_id === Auth::id() || hasPermission('delete_website_ticket_replies'))
|
||||
<form action="{{ route('help-center.ticket.reply.destroy', $reply) }}" method="POST">
|
||||
@method('DELETE')
|
||||
@csrf
|
||||
|
||||
<button type="submit">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4">
|
||||
{!! $reply->content !!}
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
<div class="w-full rounded bg-[var(--color-background)]">
|
||||
<div class="h-[50px] px-4 flex items-center justify-between border-b border-[var(--color-text-muted)] relative overflow-hidden">
|
||||
<div class="flex gap-x-2">
|
||||
<form action="{{ route('help-center.ticket.reply.destroy', $reply) }}" method="POST">
|
||||
@method('DELETE')
|
||||
@csrf
|
||||
|
||||
<button type="submit">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<small class="text-[var(--color-text-muted)]">{{ $reply->created_at->diffForHumans() }}</small>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex">
|
||||
<small class="mr-14 text-[var(--color-text-muted)]">{{ $reply->user->username }}</small>
|
||||
<div class="absolute right-2 -bottom-10 flex gap-x-2">
|
||||
<img class="scale-x-[-1]" src="{{ setting('avatar_imager') }}/{{ $reply->user->look }}" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4">
|
||||
{!! $reply->content !!}
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
@empty
|
||||
<p>
|
||||
{{ __('There is currently no replies') }}
|
||||
</p>
|
||||
@endforelse
|
||||
</div>
|
||||
</x-content.content-card>
|
||||
</x-app-layout>
|
||||
|
||||
@@ -1,45 +1,194 @@
|
||||
<x-app-layout>
|
||||
@push('title', __('Welcome to the best hotel on the web!'))
|
||||
|
||||
<div class="col-span-12 space-y-14">
|
||||
<div class="col-span-12">
|
||||
<x-content.guest-content-card icon="hotel-icon">
|
||||
<x-slot:title>
|
||||
{{ __('Latest news') }}
|
||||
</x-slot:title>
|
||||
<script>
|
||||
window.CONFIG = window.CONFIG || {};
|
||||
window.CONFIG.avatarImager = "{{ setting('avatar_imager') }}";
|
||||
</script>
|
||||
|
||||
<x-slot:under-title>
|
||||
{{ __('Keep up to date with the latest hotel gossip.') }}
|
||||
</x-slot:under-title>
|
||||
<div class="flex flex-col md:flex-row col-span-12 gap-4 md:gap-4">
|
||||
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
|
||||
@forelse($articles as $article)
|
||||
<x-article-card :article="$article" />
|
||||
@empty
|
||||
<x-filler-article-card />
|
||||
@endforelse
|
||||
</div>
|
||||
</x-content.guest-content-card>
|
||||
</div>
|
||||
{{-- Left sidebar --}}
|
||||
<div class="flex flex-col gap-4 w-full md:w-1/3 md:flex-shrink-0">
|
||||
|
||||
@if($photos)
|
||||
<div class="col-span-12">
|
||||
<x-content.guest-content-card icon="camera-icon">
|
||||
<x-slot:title>
|
||||
{{ __('Latest Photos') }}
|
||||
</x-slot:title>
|
||||
{{-- Login card --}}
|
||||
<div class="flex-shrink-0">
|
||||
<div class="border rounded-lg" style="background-color: var(--color-surface, #ffffff); border-color: var(--card-border-color, #d1d5db);">
|
||||
|
||||
<div class="relative overflow-hidden h-[180px] bg-center"
|
||||
style="background-image: url({{ asset('assets/images/kasja_mepage_header.png') }}); background-size: auto; background-repeat: no-repeat; background-position: calc(30% - 10px) calc(50% - 35px); border-top-left-radius: 6px; border-top-right-radius: 6px; max-height: 150px;">
|
||||
<div class="absolute inset-0 bg-black/30 z-10"></div>
|
||||
<div class="relative flex items-center justify-center w-full h-full px-3 z-20">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form id="loginForm" action="{{ route('login') }}" method="POST" autocomplete="off"
|
||||
class="flex flex-col gap-6 p-3 bg-gray-100 rounded-lg dark:bg-gray-800 relative">
|
||||
@csrf
|
||||
<fieldset class="flex flex-col w-full gap-1">
|
||||
<div class="flex flex-col gap-1">
|
||||
<label for="username" class="block font-semibold text-gray-700 dark:text-gray-200">{{ __('Username') }}</label>
|
||||
</div>
|
||||
<div class="relative flex items-center">
|
||||
<input class="focus:ring-0 border-4 border-gray-200 rounded dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200 focus:border-[#eeb425] w-full relative z-10"
|
||||
type="text" name="username" id="username" placeholder="" value="{{ old('username') }}" required autofocus />
|
||||
<div class="absolute right-3"></div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset class="flex flex-col w-full gap-1">
|
||||
<div class="flex flex-col gap-1">
|
||||
<label for="password" class="block font-semibold text-gray-700 dark:text-gray-200">{{ __('Password') }}</label>
|
||||
</div>
|
||||
<div class="relative flex items-center">
|
||||
<input class="focus:ring-0 border-4 border-gray-200 rounded dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200 focus:border-[#eeb425] w-full relative z-10"
|
||||
type="password" name="password" id="password" placeholder="" required />
|
||||
<div class="absolute right-3"></div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
@if (setting('cloudflare_turnstile_enabled'))
|
||||
<x-turnstile />
|
||||
@endif
|
||||
|
||||
<button type="submit"
|
||||
style="background-color: #27a44d; color: white; padding: 0.5rem; border-radius: 0.375rem; border: 2px solid #34d399; font-weight: 600; font-size: 16px; transition: background-color 0.3s; width: 100%; cursor: pointer;"
|
||||
onmouseover="this.style.backgroundColor='#006b2e'" onmouseout="this.style.backgroundColor='#27a44d'">
|
||||
{{ __('Login') }}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Register button --}}
|
||||
<div class="flex flex-col gap-2 relative">
|
||||
<a href="{{ route('register') }}">
|
||||
<button class="relative transition duration-300 ease-in-out hover:scale-105 overflow-visible"
|
||||
style="background: none; border: none; width: 100%; cursor: pointer; padding: 0;">
|
||||
<div class="inline-block border rounded-lg border-gray-400 dark:border-gray-700 overflow-hidden w-full">
|
||||
<img src="{{ asset('assets/images/EnterHubbly.png') }}" alt="Register" class="block w-full" style="display: block;" />
|
||||
</div>
|
||||
<span class="absolute inset-0 flex items-center text-white text-4xl font-extrabold pointer-events-none"
|
||||
style="text-shadow: 1px 1px 2px rgba(0,0,0,0.8); margin-left: 15px;">{{ __('REGISTER NOW') }}</span>
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{{-- Recent Users --}}
|
||||
@if($onlineUsers->isNotEmpty())
|
||||
<div class="border rounded-lg bg-white dark:bg-gray-800 border-gray-400 dark:border-gray-700 overflow-visible" style="margin-top: -7px;">
|
||||
<div class="relative w-full h-12" style="background: linear-gradient(140deg, #0A1F0A 0%, #0F2D0F 20%, #153C15 40%, #1B4A1B 60%, #205820 75%, #1A4A1A 90%, #143814 100%); border-radius: 6px 6px 0 0;">
|
||||
<div class="flex items-center justify-center h-full relative">
|
||||
<h2 class="text-white font-bold text-xl" style="padding: 2% 3%;">{{ __('Recent Users') }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; padding: 1rem;">
|
||||
@foreach($onlineUsers as $user)
|
||||
<div class="shadow-lg rounded-md p-0 bg-white dark:bg-gray-800"
|
||||
style="width: 50px; height: 50px; position: relative; overflow: visible; justify-self: center;">
|
||||
<img src="{{ setting('avatar_imager') }}{{ $user->look }}&head_direction=3&gesture=nrm&action=&headonly=1"
|
||||
alt="{{ $user->username }}" loading="lazy" decoding="async"
|
||||
style="position: absolute; top: -12px; left: 50%; transform: translateX(-50%); width: auto; height: auto; max-width: none; max-height: none;" />
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
</div>
|
||||
|
||||
{{-- Right main content --}}
|
||||
<div class="w-full md:w-2/3 flex flex-col gap-4">
|
||||
|
||||
{{-- Latest Photos --}}
|
||||
@if($photos->isNotEmpty())
|
||||
<div class="border rounded-lg bg-white dark:bg-gray-800 border-gray-400 dark:border-gray-700 overflow-hidden">
|
||||
<div class="relative w-full h-12" style="background: linear-gradient(140deg, #3A2068 0%, #3F2673 15%, #493085 30%, #523A97 45%, #5B44A9 60%, #654EBB 75%, #7068D0 90%, #786ED8 100%); border-radius: 6px 6px 0 0;">
|
||||
<div class="flex items-center justify-center h-full relative">
|
||||
<h2 class="text-white font-bold text-xl" style="padding: 2% 3%;">{{ __('Latest Photos') }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding: 1rem;">
|
||||
<div class="grid grid-cols-2 gap-3 sm:grid-cols-3">
|
||||
@forelse ($photos as $photo)
|
||||
<a href="{{ $photo->url }}" data-fancybox="gallery" class="group cursor-pointer block">
|
||||
<div class="relative rounded-lg overflow-hidden shadow-md border border-gray-600 hover:border-[#eeb425] transition-all duration-300">
|
||||
<div class="aspect-[4/3] relative overflow-hidden">
|
||||
<img class="h-full w-full object-cover object-center transition-transform duration-300 group-hover:scale-110"
|
||||
src="{{ $photo->url }}" alt="Photo by {{ $photo->user?->username ?? 'Unknown' }}">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||||
</div>
|
||||
<div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black/90 to-transparent">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="flex h-7 w-7 items-center justify-center overflow-hidden rounded-full bg-gray-700 border border-gray-500">
|
||||
<img src="{{ setting('avatar_imager') }}{{ $photo->user?->look ?? '' }}&direction=2&headonly=1&head_direction=2&gesture=sml"
|
||||
alt="{{ $photo->user?->username ?? 'Unknown' }}" class="h-full w-full object-cover">
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-white text-sm font-semibold truncate">{{ $photo->user?->username ?? __('Unknown') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
@empty
|
||||
<div class="col-span-full text-center py-8">
|
||||
<p class="text-gray-500 dark:text-gray-400">{{ __('No photos available') }}</p>
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- Latest News --}}
|
||||
<div class="border rounded-lg bg-white dark:bg-gray-800 border-gray-400 dark:border-gray-700 overflow-hidden">
|
||||
<div class="relative w-full h-12" style="background: linear-gradient(140deg, #1a3a5c 0%, #1e4a6e 20%, #2a5a80 40%, #3a6a90 60%, #4a7aa0 75%, #3a6a90 90%, #2a5a80 100%); border-radius: 6px 6px 0 0;">
|
||||
<div class="flex items-center justify-center h-full relative">
|
||||
<h2 class="text-white font-bold text-xl" style="padding: 2% 3%;">{{ __('Latest News') }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding: 1rem;">
|
||||
<div class="swiper articles-slider" style="padding-bottom: 2.5rem;">
|
||||
<div class="swiper-wrapper">
|
||||
@forelse($articles as $article)
|
||||
<x-article-card :article="$article" :forSlider="true" />
|
||||
@empty
|
||||
<div class="swiper-slide">
|
||||
<x-filler-article-card />
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
<div class="swiper-pagination" style="bottom: 0;"></div>
|
||||
<div class="swiper-button-prev" style="color: #eeb425;"></div>
|
||||
<div class="swiper-button-next" style="color: #eeb425;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<x-slot:under-title>
|
||||
{{ __('Have a look at some of the great moments captured by users around the hotel.') }}
|
||||
</x-slot:under-title>
|
||||
<x-photos :photos="$photos" />
|
||||
</x-content.guest-content-card>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@push('javascript')
|
||||
<script src="{{ config('habbo.cdn.fancybox_js') }}"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
new Swiper('.articles-slider', {
|
||||
slidesPerView: 1,
|
||||
spaceBetween: 16,
|
||||
loop: true,
|
||||
autoplay: { delay: 5000, disableOnInteraction: false },
|
||||
pagination: { el: '.swiper-pagination', clickable: true },
|
||||
navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },
|
||||
breakpoints: {
|
||||
640: { slidesPerView: 2 },
|
||||
768: { slidesPerView: 3 },
|
||||
1024: { slidesPerView: 3 },
|
||||
},
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
|
||||
<link rel="stylesheet" href="{{ config('habbo.cdn.fancybox_css') }}" />
|
||||
|
||||
@@ -179,20 +179,36 @@
|
||||
<x-site-header />
|
||||
|
||||
{{-- Navigation --}}
|
||||
<nav class="relative bg-white shadow-sm dark:bg-gray-900" style="background-color: var(--color-navbar)">
|
||||
<div class="max-w-7xl min-h-[60px] px-4 md:flex md:items-center md:justify-between md:mx-auto">
|
||||
<x-navigation.navigation-menu />
|
||||
<nav x-data="{
|
||||
dropdownVisible: false,
|
||||
isMobile: window.innerWidth < 768
|
||||
}"
|
||||
x-init="dropdownVisible = false; isMobile = window.innerWidth < 768; window.addEventListener('resize', () => { isMobile = window.innerWidth < 768; });"
|
||||
class="relative z-40 shadow overflow-visible" style="background-color: var(--color-navbar, #ffffff);"
|
||||
x-on:click.outside="dropdownVisible = false">
|
||||
<div class="max-w-7xl min-h-[60px] px-4 mx-auto flex items-center justify-between">
|
||||
<div class="relative flex flex-col items-center w-full h-full py-5 md:flex-row md:gap-x-8 md:py-0">
|
||||
|
||||
<div class="hidden lg:flex items-center">
|
||||
<x-navigation.theme-mode-switcher />
|
||||
<div class="flex items-center justify-between w-full md:w-auto">
|
||||
<button class="relative block text-gray-900 dark:text-white md:hidden" x-on:click="dropdownVisible = !dropdownVisible">
|
||||
<svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<x-navigation.language-selector>
|
||||
<img src="/assets/images/icons/flags/{{ session()->has('locale') ? session()->get('locale') : config('habbo.site.default_language') }}.png"
|
||||
alt="">
|
||||
</x-navigation.language-selector>
|
||||
<div class="flex items-center md:hidden">
|
||||
<x-navigation.theme-mode-switcher />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mobile-nav-menu flex flex-col md:flex-row md:items-center md:justify-center w-full gap-y-3 md:gap-x-8 md:gap-y-0"
|
||||
:class="{ 'show-mobile': dropdownVisible }">
|
||||
<x-navigation.navigation-menu />
|
||||
<div class="hidden md:flex items-center">
|
||||
<x-navigation.theme-mode-switcher />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-navigation.mobile-menu />
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
@@ -2,26 +2,28 @@
|
||||
@push('title', __('Leaderboard'))
|
||||
|
||||
<div class="col-span-12">
|
||||
<!-- Header -->
|
||||
<div class="mb-6 p-6 rounded-xl border-2" style="background-color: var(--color-surface); border-color: var(--color-primary);">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-16 h-16 rounded-full flex items-center justify-center text-3xl shadow-lg" style="background-color: var(--color-background);">
|
||||
🏆
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold" style="color: var(--color-text)">Leaderboard</h1>
|
||||
<p style="color: var(--color-text-muted)">Bekijk de beste spelers van {{ setting('hotel_name') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
<x-leaderboard-card title="{{ __('Top credits') }}" icon="credits.png" :data="$credits" valueKey="credits" valueType="Credits" />
|
||||
<x-leaderboard-card title="{{ __('Top duckets') }}" icon="duckets.png" :data="$duckets" relationship="user" valueKey="amount" valueType="Duckets" />
|
||||
<x-leaderboard-card title="{{ __('Top diamonds') }}" icon="diamond.png" :data="$diamonds" relationship="user" valueKey="amount" valueType="Diamonds" />
|
||||
<x-leaderboard-card title="{{ __('Hours online') }}" icon="clock.gif" :data="$mostOnline" relationship="user" valueKey="online_time" valueType="Hours online" :formatValue="fn($value) => round($value / 3600)" />
|
||||
<x-leaderboard-card title="{{ __('Respects received') }}" icon="heart.gif" :data="$respectsReceived" relationship="user" valueKey="respects_received" valueType="Respect received" />
|
||||
<x-leaderboard-card title="{{ __('Achievement score') }}" icon="star.gif" :data="$achievementScores" relationship="user" valueKey="achievement_score" valueType="Achievement points" />
|
||||
</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>
|
||||
<h1 class="text-white font-bold text-xl">{{ __('Leaderboard') }}</h1>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">{{ __('Bekijk de beste spelers van') }} {{ setting('hotel_name') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
<x-leaderboard-card title="{{ __('Top credits') }}" icon="credits.png" :data="$credits" valueKey="credits" valueType="Credits" />
|
||||
<x-leaderboard-card title="{{ __('Top duckets') }}" icon="duckets.png" :data="$duckets" relationship="user" valueKey="amount" valueType="Duckets" />
|
||||
<x-leaderboard-card title="{{ __('Top diamonds') }}" icon="diamond.png" :data="$diamonds" relationship="user" valueKey="amount" valueType="Diamonds" />
|
||||
<x-leaderboard-card title="{{ __('Hours online') }}" icon="clock.gif" :data="$mostOnline" relationship="user" valueKey="online_time" valueType="Hours online" :formatValue="fn($value) => round($value / 3600)" />
|
||||
<x-leaderboard-card title="{{ __('Respects received') }}" icon="heart.gif" :data="$respectsReceived" relationship="user" valueKey="respects_received" valueType="Respect received" />
|
||||
<x-leaderboard-card title="{{ __('Achievement score') }}" icon="star.gif" :data="$achievementScores" relationship="user" valueKey="achievement_score" valueType="Achievement points" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
||||
@@ -2,74 +2,77 @@
|
||||
@push('title', __('Generator'))
|
||||
|
||||
<div class="col-span-12">
|
||||
<x-content.content-card icon="hotel-icon" classes="border dark:border-gray-900">
|
||||
<x-slot:title>
|
||||
Logo generator
|
||||
</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" 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 py-3 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">Logo generator</p>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">{{ __('Generate your very own logo') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-slot:under-title>
|
||||
{{ __('Generate your very own logo') }}
|
||||
</x-slot:under-title>
|
||||
<div class="p-4 text-sm" style="color: var(--color-text)">
|
||||
<div x-data="logoGenerator()" class="mt-4">
|
||||
<div class="grid grid-cols-6 gap-3">
|
||||
<div x-bind:class="{'ring-2 ring-emerald-700': fontType === 'atom'}" class="h-24 rounded p-2 flex gap-2 justify-center items-center transition duration-300 ease-in-out cursor-pointer" style="background-color: var(--color-background); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);" x-on:click="selectFont('atom')">
|
||||
<img src="{{ asset('/assets/images/logo-generator/atom/a.png') }}" alt="Letter a">
|
||||
<img src="{{ asset('/assets/images/logo-generator/atom/b.png') }}" alt="Letter b">
|
||||
<img src="{{ asset('/assets/images/logo-generator/atom/c.png') }}" alt="Letter c">
|
||||
</div>
|
||||
|
||||
<div class="px-2 text-sm text-[var(--color-text)]">
|
||||
<div x-data="logoGenerator()" class="mt-4">
|
||||
<div class="grid grid-cols-6 gap-3">
|
||||
<div x-bind:class="{'bg-[var(--color-background)] ring-2 ring-emerald-700': fontType === 'atom'}" class="h-24 rounded border border-[var(--color-text-muted)] p-2 flex gap-2 justify-center items-center transition duration-300 ease-in-out hover:bg-[var(--color-background)] cursor-pointer" x-on:click="selectFont('atom')">
|
||||
<img src="{{ asset('/assets/images/logo-generator/atom/a.png') }}" alt="Letter a">
|
||||
<img src="{{ asset('/assets/images/logo-generator/atom/b.png') }}" alt="Letter b">
|
||||
<img src="{{ asset('/assets/images/logo-generator/atom/c.png') }}" alt="Letter c">
|
||||
</div>
|
||||
<div x-bind:class="{'ring-2 ring-emerald-700': fontType === 'sunrise'}" class="h-24 rounded p-2 flex gap-2 justify-center items-center transition duration-300 ease-in-out cursor-pointer" style="background-color: var(--color-background); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);" x-on:click="selectFont('sunrise')">
|
||||
<img src="{{ asset('/assets/images/logo-generator/sunrise/a.png') }}" alt="Letter a">
|
||||
<img src="{{ asset('/assets/images/logo-generator/sunrise/b.png') }}" alt="Letter b">
|
||||
<img src="{{ asset('/assets/images/logo-generator/sunrise/c.png') }}" alt="Letter c">
|
||||
</div>
|
||||
|
||||
<div x-bind:class="{'bg-[var(--color-background)] ring-2 ring-emerald-700': fontType === 'sunrise'}" class="h-24 rounded border border-[var(--color-text-muted)] p-2 flex gap-2 justify-center items-center transition duration-300 ease-in-out hover:bg-[var(--color-background)] cursor-pointer" x-on:click="selectFont('sunrise')">
|
||||
<img src="{{ asset('/assets/images/logo-generator/sunrise/a.png') }}" alt="Letter a">
|
||||
<img src="{{ asset('/assets/images/logo-generator/sunrise/b.png') }}" alt="Letter b">
|
||||
<img src="{{ asset('/assets/images/logo-generator/sunrise/c.png') }}" alt="Letter c">
|
||||
</div>
|
||||
<div x-bind:class="{'ring-2 ring-emerald-700': fontType === 'marine'}" class="h-24 rounded p-2 flex gap-2 justify-center items-center transition duration-300 ease-in-out cursor-pointer" style="background-color: var(--color-background); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);" x-on:click="selectFont('marine')">
|
||||
<img src="{{ asset('/assets/images/logo-generator/marine/a.png') }}" alt="Letter a">
|
||||
<img src="{{ asset('/assets/images/logo-generator/marine/b.png') }}" alt="Letter b">
|
||||
<img src="{{ asset('/assets/images/logo-generator/marine/c.png') }}" alt="Letter c">
|
||||
</div>
|
||||
|
||||
<div x-bind:class="{'bg-[var(--color-background)] ring-2 ring-emerald-700': fontType === 'marine'}" class="h-24 rounded border border-[var(--color-text-muted)] p-2 flex gap-2 justify-center items-center transition duration-300 ease-in-out hover:bg-[var(--color-background)] cursor-pointer" x-on:click="selectFont('marine')">
|
||||
<img src="{{ asset('/assets/images/logo-generator/marine/a.png') }}" alt="Letter a">
|
||||
<img src="{{ asset('/assets/images/logo-generator/marine/b.png') }}" alt="Letter b">
|
||||
<img src="{{ asset('/assets/images/logo-generator/marine/c.png') }}" alt="Letter c">
|
||||
</div>
|
||||
<div x-bind:class="{'ring-2 ring-emerald-700': fontType === 'danlie'}" class="h-24 rounded p-2 flex gap-2 justify-center items-center transition duration-300 ease-in-out cursor-pointer" style="background-color: var(--color-background); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);" x-on:click="selectFont('danlie')">
|
||||
<img src="{{ asset('/assets/images/logo-generator/danlie/a.png') }}" alt="Letter a">
|
||||
<img src="{{ asset('/assets/images/logo-generator/danlie/b.png') }}" alt="Letter b">
|
||||
<img src="{{ asset('/assets/images/logo-generator/danlie/c.png') }}" alt="Letter c">
|
||||
</div>
|
||||
|
||||
<div x-bind:class="{'bg-[var(--color-background)] ring-2 ring-emerald-700': fontType === 'danlie'}" class="h-24 rounded border border-[var(--color-text-muted)] p-2 flex gap-2 justify-center items-center transition duration-300 ease-in-out hover:bg-[var(--color-background)] cursor-pointer" x-on:click="selectFont('danlie')">
|
||||
<img src="{{ asset('/assets/images/logo-generator/danlie/a.png') }}" alt="Letter a">
|
||||
<img src="{{ asset('/assets/images/logo-generator/danlie/b.png') }}" alt="Letter b">
|
||||
<img src="{{ asset('/assets/images/logo-generator/danlie/c.png') }}" alt="Letter c">
|
||||
</div>
|
||||
<div x-bind:class="{'ring-2 ring-emerald-700': fontType === 'habton'}" class="h-24 rounded p-2 flex gap-2 justify-center items-center transition duration-300 ease-in-out cursor-pointer" style="background-color: var(--color-background); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);" x-on:click="selectFont('habton')">
|
||||
<img src="{{ asset('/assets/images/logo-generator/habton/a.png') }}" alt="Letter a">
|
||||
<img src="{{ asset('/assets/images/logo-generator/habton/b.png') }}" alt="Letter b">
|
||||
<img src="{{ asset('/assets/images/logo-generator/habton/c.png') }}" alt="Letter c">
|
||||
</div>
|
||||
|
||||
<div x-bind:class="{'bg-[var(--color-background)] ring-2 ring-emerald-700': fontType === 'habton'}" class="h-24 rounded border border-[var(--color-text-muted)] p-2 flex gap-2 justify-center items-center transition duration-300 ease-in-out hover:bg-[var(--color-background)] cursor-pointer" x-on:click="selectFont('habton')">
|
||||
<img src="{{ asset('/assets/images/logo-generator/habton/a.png') }}" alt="Letter a">
|
||||
<img src="{{ asset('/assets/images/logo-generator/habton/b.png') }}" alt="Letter b">
|
||||
<img src="{{ asset('/assets/images/logo-generator/habton/c.png') }}" alt="Letter c">
|
||||
</div>
|
||||
<div x-bind:class="{'ring-2 ring-emerald-700': fontType === 'habton_capitalized'}" class="h-24 rounded p-2 flex gap-2 justify-center items-center transition duration-300 ease-in-out cursor-pointer" style="background-color: var(--color-background); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);" x-on:click="selectFont('habton_capitalized')">
|
||||
<img src="{{ asset('/assets/images/logo-generator/habton_capitalized/a.png') }}" alt="Letter a">
|
||||
<img src="{{ asset('/assets/images/logo-generator/habton_capitalized/b.png') }}" alt="Letter b">
|
||||
<img src="{{ asset('/assets/images/logo-generator/habton_capitalized/c.png') }}" alt="Letter c">
|
||||
</div>
|
||||
|
||||
<div x-bind:class="{'bg-[var(--color-background)] ring-2 ring-emerald-700': fontType === 'habton_capitalized'}" class="h-24 rounded border border-[var(--color-text-muted)] p-2 flex gap-2 justify-center items-center transition duration-300 ease-in-out hover:bg-[var(--color-background)] cursor-pointer" x-on:click="selectFont('habton_capitalized')">
|
||||
<img src="{{ asset('/assets/images/logo-generator/habton_capitalized/a.png') }}" alt="Letter a">
|
||||
<img src="{{ asset('/assets/images/logo-generator/habton_capitalized/b.png') }}" alt="Letter b">
|
||||
<img src="{{ asset('/assets/images/logo-generator/habton_capitalized/c.png') }}" alt="Letter c">
|
||||
</div>
|
||||
<div x-bind:class="{'ring-2 ring-emerald-700': fontType === 'habbo_modern'}" class="h-24 rounded p-2 flex gap-2 justify-center items-center transition duration-300 ease-in-out cursor-pointer" style="background-color: var(--color-background); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);" x-on:click="selectFont('habbo_modern')">
|
||||
<img src="{{ asset('/assets/images/logo-generator/habbo_modern/a.png') }}" alt="Letter a">
|
||||
<img src="{{ asset('/assets/images/logo-generator/habbo_modern/b.png') }}" alt="Letter b">
|
||||
<img src="{{ asset('/assets/images/logo-generator/habbo_modern/c.png') }}" alt="Letter c">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div x-bind:class="{'bg-[var(--color-background)] ring-2 ring-emerald-700': fontType === 'habbo_modern'}" class="h-24 rounded border border-[var(--color-text-muted)] p-2 flex gap-2 justify-center items-center transition duration-300 ease-in-out hover:bg-[var(--color-background)] cursor-pointer" x-on:click="selectFont('habbo_modern')">
|
||||
<img src="{{ asset('/assets/images/logo-generator/habbo_modern/a.png') }}" alt="Letter a">
|
||||
<img src="{{ asset('/assets/images/logo-generator/habbo_modern/b.png') }}" alt="Letter b">
|
||||
<img src="{{ asset('/assets/images/logo-generator/habbo_modern/c.png') }}" alt="Letter c">
|
||||
<div class="mt-4">
|
||||
<label for="text" class="font-bold" style="color: var(--color-text)"> {{ __('Logo text') }} </label>
|
||||
<input x-model="text" class="w-full rounded-lg border px-3 py-2 text-sm focus:outline-none mt-2" style="background-color: var(--color-background); border-color: color-mix(in srgb, var(--color-text-muted) 20%, transparent); color: var(--color-text);" onfocus="this.style.borderColor='var(--color-primary)'" onblur="this.style.borderColor='color-mix(in srgb, var(--color-text-muted) 20%, transparent)'" id="text" type="text" name="text" placeholder="Type here...">
|
||||
<div id="logoContainer" class="flex mt-4" :class="text !== '' ? 'mb-4' : ''" style="gap: 2px;" x-html="generateLogoHtml"></div>
|
||||
<div class="flex gap-4 justify-between">
|
||||
<button @click="generateCanvas('download')" class="w-full rounded px-6 py-2.5 border-2 transition ease-in-out duration-200 font-semibold" style="background-color: var(--color-primary); color: var(--button-text-color); border-color: #eab308;"> {{ __('Download logo') }} </button>
|
||||
<button @click="generateCanvas('use')" class="w-full rounded px-6 py-2.5 border-2 transition ease-in-out duration-150 font-semibold" style="background-color: #16a34a; color: white; border-color: #22c55e;"> {{ __('Use logo') }} </button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<label for="text" class="font-bold"> {{ __('Logo text') }} </label>
|
||||
<input x-model="text" class="mt-2 focus:ring-0 border-4 border-[var(--color-text-muted)] rounded bg-[var(--color-surface)] border-[var(--color-text-muted)] text-[var(--color-text)] focus:border-[var(--color-primary)] w-full" id="text" type="text" name="text" placeholder="Type here...">
|
||||
<div id="logoContainer" class="flex mt-4" :class="text !== '' ? 'mb-4' : ''" style="gap: 2px;" x-html="generateLogoHtml"></div>
|
||||
<div class="flex gap-4 justify-between">
|
||||
<button @click="generateCanvas('download')" class="w-full rounded bg-[var(--color-primary)] text-white p-2 border-2 border-yellow-400 transition ease-in-out duration-200 hover:bg-[var(--color-primary)] font-semibold"> {{ __('Download logo') }} </button>
|
||||
<button @click="generateCanvas('use')" class="w-full rounded bg-green-600 hover:bg-green-700 text-white p-2 border-2 border-green-500 transition ease-in-out duration-150 font-semibold"> {{ __('Use logo') }} </button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-content.content-card>
|
||||
</div>
|
||||
|
||||
{{-- TODO: Selfhost --}}
|
||||
@@ -175,5 +178,3 @@
|
||||
}
|
||||
</script>
|
||||
</x-app-layout>
|
||||
|
||||
|
||||
|
||||
@@ -3,201 +3,241 @@
|
||||
|
||||
<div class="col-span-12 lg:col-span-9 lg:w-[96%]">
|
||||
<div class="flex flex-col gap-y-4">
|
||||
{{-- Statistics Card --}}
|
||||
@if(isset($statistics))
|
||||
<x-content.content-card icon="currency-icon">
|
||||
<x-slot:title>
|
||||
{{ __('Rare Statistics') }}
|
||||
</x-slot:title>
|
||||
@if(isset($statistics))
|
||||
<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" 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 py-3 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">{{ __('Rare Statistics') }}</p>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">{{ __('Overview of rare values on :hotel', ['hotel' => setting('hotel_name')]) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
|
||||
<div class="p-3 rounded" style="background-color: var(--color-surface);">
|
||||
<div class="text-2xl font-bold" style="color: var(--color-primary)">{{ $statistics['total_categories'] }}</div>
|
||||
<div class="text-sm" style="color: var(--color-text-muted)">{{ __('Categories') }}</div>
|
||||
</div>
|
||||
<div class="p-3 rounded" style="background-color: var(--color-surface);">
|
||||
<div class="text-2xl font-bold" style="color: var(--color-primary)">{{ $statistics['total_rares'] }}</div>
|
||||
<div class="text-sm" style="color: var(--color-text-muted)">{{ __('Total Rares') }}</div>
|
||||
</div>
|
||||
<div class="p-3 rounded" style="background-color: var(--color-surface);">
|
||||
<div class="text-2xl font-bold" style="color: var(--color-primary)">{{ round($statistics['average_rares_per_category']) }}</div>
|
||||
<div class="text-sm" style="color: var(--color-text-muted)">{{ __('Avg per Category') }}</div>
|
||||
</div>
|
||||
<div class="p-3 rounded" style="background-color: var(--color-surface);">
|
||||
<div class="text-lg font-bold truncate" style="color: var(--color-primary)">{{ $statistics['most_valuable_category'] }}</div>
|
||||
<div class="text-sm" style="color: var(--color-text-muted)">{{ __('Top Category') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<x-slot:under-title>
|
||||
{{ __('Overview of rare values on :hotel', ['hotel' => setting('hotel_name')]) }}
|
||||
</x-slot:under-title>
|
||||
@if(isset($searchTerm))
|
||||
<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" 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 py-3 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">{{ __('Search Results') }}</p>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">{{ __('Showing results for: :term', ['term' => $searchTerm]) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<p class="text-sm" style="color: var(--color-text-muted)">
|
||||
{{ __('Found :count categories', ['count' => $categories->count()]) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
|
||||
<div class="p-3 rounded" style="background-color: var(--color-surface);">
|
||||
<div class="text-2xl font-bold" style="color: var(--color-primary)">{{ $statistics['total_categories'] }}</div>
|
||||
<div class="text-sm" style="color: var(--color-text-muted)">{{ __('Categories') }}</div>
|
||||
</div>
|
||||
<div class="p-3 rounded" style="background-color: var(--color-surface);">
|
||||
<div class="text-2xl font-bold" style="color: var(--color-primary)">{{ $statistics['total_rares'] }}</div>
|
||||
<div class="text-sm" style="color: var(--color-text-muted)">{{ __('Total Rares') }}</div>
|
||||
</div>
|
||||
<div class="p-3 rounded" style="background-color: var(--color-surface);">
|
||||
<div class="text-2xl font-bold" style="color: var(--color-primary)">{{ round($statistics['average_rares_per_category']) }}</div>
|
||||
<div class="text-sm" style="color: var(--color-text-muted)">{{ __('Avg per Category') }}</div>
|
||||
</div>
|
||||
<div class="p-3 rounded" style="background-color: var(--color-surface);">
|
||||
<div class="text-lg font-bold truncate" style="color: var(--color-primary)">{{ $statistics['most_valuable_category'] }}</div>
|
||||
<div class="text-sm" style="color: var(--color-text-muted)">{{ __('Top Category') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-content.content-card>
|
||||
@endif
|
||||
@if(isset($category))
|
||||
<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" 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 py-3 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);">
|
||||
<img src="{{ sprintf('%s/%s.gif', setting('badges_path'), $category->badge) }}" alt="" class="w-5 h-5">
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-white font-bold text-sm">{{ $category->name }}</p>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">{{ __('All :count rares in :category', ['count' => $category->furniture->count(), 'category' => $category->name]) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<div class="mb-4 flex flex-wrap gap-2">
|
||||
<span class="text-sm self-center" style="color: var(--color-text-muted)">{{ __('Sort by:') }}</span>
|
||||
<a href="{{ route('values.category', ['id' => $category->id, 'sort' => 'name', 'order' => $sortBy === 'name' && $sortOrder === 'asc' ? 'desc' : 'asc']) }}"
|
||||
class="px-3 py-1 rounded text-sm" style="{{ $sortBy === 'name' ? 'background-color: var(--color-primary); color: var(--button-text-color)' : 'background-color: var(--color-surface); color: var(--color-text)' }}">
|
||||
{{ __('Name') }} {{ $sortBy === 'name' ? ($sortOrder === 'asc' ? '↑' : '↓') : '' }}
|
||||
</a>
|
||||
<a href="{{ route('values.category', ['id' => $category->id, 'sort' => 'credit_value', 'order' => $sortBy === 'credit_value' && $sortOrder === 'asc' ? 'desc' : 'asc']) }}"
|
||||
class="px-3 py-1 rounded text-sm" style="{{ $sortBy === 'credit_value' ? 'background-color: var(--color-primary); color: var(--button-text-color)' : 'background-color: var(--color-surface); color: var(--color-text)' }}">
|
||||
{{ __('Credits') }} {{ $sortBy === 'credit_value' ? ($sortOrder === 'asc' ? '↑' : '↓') : '' }}
|
||||
</a>
|
||||
<a href="{{ route('values.category', ['id' => $category->id, 'sort' => 'currency_value', 'order' => $sortBy === 'currency_value' && $sortOrder === 'asc' ? 'desc' : 'asc']) }}"
|
||||
class="px-3 py-1 rounded text-sm" style="{{ $sortBy === 'currency_value' ? 'background-color: var(--color-primary); color: var(--button-text-color)' : 'background-color: var(--color-surface); color: var(--color-text)' }}">
|
||||
{{ __('Currency') }} {{ $sortBy === 'currency_value' ? ($sortOrder === 'asc' ? '↑' : '↓') : '' }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{{-- Search Results Info --}}
|
||||
@if(isset($searchTerm))
|
||||
<x-content.content-card icon="search-icon">
|
||||
<x-slot:title>
|
||||
{{ __('Search Results') }}
|
||||
</x-slot:title>
|
||||
<x-slot:under-title>
|
||||
{{ __('Showing results for: :term', ['term' => $searchTerm]) }}
|
||||
</x-slot:under-title>
|
||||
<p class="text-sm" style="color: var(--color-text-muted)">
|
||||
{{ __('Found :count categories', ['count' => $categories->count()]) }}
|
||||
</p>
|
||||
</x-content.content-card>
|
||||
@endif
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
@foreach($category->furniture->sortBy($sortBy, SORT_REGULAR, $sortOrder === 'desc') as $rare)
|
||||
<x-rares.rare-card :rare="$rare" />
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@elseif(isset($categories) && $categories instanceof \Illuminate\Database\Eloquent\Collection)
|
||||
@forelse($categories as $cat)
|
||||
<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" 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 py-3 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);">
|
||||
<img src="{{ sprintf('%s/%s.gif', setting('badges_path'), $cat->badge) }}" alt="" class="w-5 h-5">
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-white font-bold text-sm">{{ $cat->name }}</p>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">{{ __(':count rares', ['count' => $cat->furniture->count()]) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
@foreach($cat->furniture->take(6) as $rare)
|
||||
<x-rares.rare-card :rare="$rare" />
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
@if(isset($category))
|
||||
{{-- Single Category View with Sorting --}}
|
||||
<x-content.content-card :icon="$category->badge">
|
||||
<x-slot:title>
|
||||
{{ $category->name }}
|
||||
</x-slot:title>
|
||||
|
||||
<x-slot:under-title>
|
||||
{{ __('All :count rares in :category', ['count' => $category->furniture->count(), 'category' => $category->name]) }}
|
||||
</x-slot:under-title>
|
||||
|
||||
{{-- Sort Controls --}}
|
||||
<div class="mb-4 flex flex-wrap gap-2">
|
||||
<span class="text-sm self-center" style="color: var(--color-text-muted)">{{ __('Sort by:') }}</span>
|
||||
<a href="{{ route('values.category', ['id' => $category->id, 'sort' => 'name', 'order' => $sortBy === 'name' && $sortOrder === 'asc' ? 'desc' : 'asc']) }}"
|
||||
class="px-3 py-1 rounded text-sm" :style="$sortBy === 'name' ? 'background-color: var(--color-primary); color: var(--button-text-color)' : 'background-color: var(--color-surface); color: var(--color-text)'">
|
||||
{{ __('Name') }} {{ $sortBy === 'name' ? ($sortOrder === 'asc' ? '↑' : '↓') : '' }}
|
||||
</a>
|
||||
<a href="{{ route('values.category', ['id' => $category->id, 'sort' => 'credit_value', 'order' => $sortBy === 'credit_value' && $sortOrder === 'asc' ? 'desc' : 'asc']) }}"
|
||||
class="px-3 py-1 rounded text-sm" :style="$sortBy === 'credit_value' ? 'background-color: var(--color-primary); color: var(--button-text-color)' : 'background-color: var(--color-surface); color: var(--color-text)'">
|
||||
{{ __('Credits') }} {{ $sortBy === 'credit_value' ? ($sortOrder === 'asc' ? '↑' : '↓') : '' }}
|
||||
</a>
|
||||
<a href="{{ route('values.category', ['id' => $category->id, 'sort' => 'currency_value', 'order' => $sortBy === 'currency_value' && $sortOrder === 'asc' ? 'desc' : 'asc']) }}"
|
||||
class="px-3 py-1 rounded text-sm" :style="$sortBy === 'currency_value' ? 'background-color: var(--color-primary); color: var(--button-text-color)' : 'background-color: var(--color-surface); color: var(--color-text)'">
|
||||
{{ __('Currency') }} {{ $sortBy === 'currency_value' ? ($sortOrder === 'asc' ? '↑' : '↓') : '' }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
@foreach($category->furniture->sortBy($sortBy, SORT_REGULAR, $sortOrder === 'desc') as $rare)
|
||||
<x-rares.rare-card :rare="$rare" />
|
||||
@endforeach
|
||||
</div>
|
||||
</x-content.content-card>
|
||||
@elseif(isset($categories) && $categories instanceof \Illuminate\Database\Eloquent\Collection)
|
||||
{{-- All Categories View --}}
|
||||
@forelse($categories as $cat)
|
||||
<x-content.content-card :icon="$cat->badge">
|
||||
<x-slot:title>
|
||||
{{ $cat->name }}
|
||||
</x-slot:title>
|
||||
|
||||
<x-slot:under-title>
|
||||
{{ __(':count rares', ['count' => $cat->furniture->count()]) }}
|
||||
</x-slot:under-title>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
@foreach($cat->furniture->take(6) as $rare)
|
||||
<x-rares.rare-card :rare="$rare" />
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
@if($cat->furniture->count() > 6)
|
||||
<div class="mt-4 text-center">
|
||||
<a href="{{ route('values.category', ['id' => $cat->id]) }}" class="text-primary hover:underline">
|
||||
{{ __('View all :count rares', ['count' => $cat->furniture->count()]) }} →
|
||||
</a>
|
||||
</div>
|
||||
@endif
|
||||
</x-content.content-card>
|
||||
@empty
|
||||
<x-content.content-card icon="currency-icon">
|
||||
<x-slot:title>
|
||||
{{ __('Rare values') }}
|
||||
</x-slot:title>
|
||||
|
||||
<x-slot:under-title>
|
||||
{{ __('Get an overview of all of the rares on :hotel', ['hotel' => setting('hotel_name')]) }}
|
||||
</x-slot:under-title>
|
||||
|
||||
<p class="text-center py-8">
|
||||
{{ __('We currently have no rares listed here') }}
|
||||
</p>
|
||||
</x-content.content-card>
|
||||
@endforelse
|
||||
@endif
|
||||
@if($cat->furniture->count() > 6)
|
||||
<div class="mt-4 text-center">
|
||||
<a href="{{ route('values.category', ['id' => $cat->id]) }}" style="color: var(--color-primary); text-decoration: underline;">
|
||||
{{ __('View all :count rares', ['count' => $cat->furniture->count()]) }} →
|
||||
</a>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<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" 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 py-3 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">{{ __('Rare values') }}</p>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">{{ __('Get an overview of all of the rares on :hotel', ['hotel' => setting('hotel_name')]) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<p class="text-center py-8" style="color: var(--color-text-muted)">
|
||||
{{ __('We currently have no rares listed here') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@endforelse
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 lg:col-span-3 lg:w-[110%] space-y-4 lg:-ml-[32px]">
|
||||
{{-- Enhanced Search --}}
|
||||
<x-content.content-card icon="catalog-icon" classes="border dark:border-gray-900">
|
||||
<x-slot:title>
|
||||
{{ __('Search Rares') }}
|
||||
</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" 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 py-3 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">{{ __('Search Rares') }}</p>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">{{ __('Find rares quickly') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-slot:under-title>
|
||||
{{ __('Find rares quickly') }}
|
||||
</x-slot:under-title>
|
||||
<div class="p-4" style="color: var(--color-text)">
|
||||
<form action="{{ route('values.search') }}" method="POST" class="space-y-3">
|
||||
@csrf
|
||||
|
||||
<form action="{{ route('values.search') }}" method="POST" class="space-y-3">
|
||||
@csrf
|
||||
<div class="relative">
|
||||
<input
|
||||
type="text"
|
||||
name="search"
|
||||
placeholder="Search for a rare..."
|
||||
value="{{ $searchTerm ?? '' }}"
|
||||
class="w-full rounded-lg border px-3 py-2 text-sm focus:outline-none mb-3"
|
||||
style="background-color: var(--color-background); border-color: color-mix(in srgb, var(--color-text-muted) 20%, transparent); color: var(--color-text);"
|
||||
onfocus="this.style.borderColor='var(--color-primary)'"
|
||||
onblur="this.style.borderColor='color-mix(in srgb, var(--color-text-muted) 20%, transparent)'">
|
||||
@if(isset($searchTerm))
|
||||
<a href="{{ route('values.index') }}" class="absolute right-3 top-3" style="color: var(--color-text-muted);">
|
||||
✕
|
||||
</a>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<x-form.input classes="mb-3 pr-10" name="search" placeholder="Search for a rare..." value="{{ $searchTerm ?? '' }}"/>
|
||||
@if(isset($searchTerm))
|
||||
<a href="{{ route('values.index') }}" class="absolute right-3 top-3 text-[var(--color-text-muted)] hover:text-[var(--color-text)]">
|
||||
✕
|
||||
</a>
|
||||
@endif
|
||||
@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 w-full" style="background-color: var(--color-background); color: var(--color-text); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
{{ __('Search') }}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
@if(isset($statistics))
|
||||
<div class="mt-4 pt-4" style="border-top: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
<p class="text-xs" style="color: var(--color-text-muted)">
|
||||
{{ __('Searching through :total rares', ['total' => $statistics['total_rares']]) }}
|
||||
</p>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (setting('google_recaptcha_enabled'))
|
||||
<div class="g-recaptcha" data-sitekey="{{ config('habbo.site.recaptcha_site_key') }}"></div>
|
||||
@endif
|
||||
<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" 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 py-3 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">{{ __('Categories') }}</p>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">{{ __(':count categories', ['count' => $categoriesNav->count() ?? 0]) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (setting('cloudflare_turnstile_enabled'))
|
||||
<x-turnstile />
|
||||
@endif
|
||||
<div class="p-4 text-sm space-y-2 max-h-96 overflow-y-auto" style="color: var(--color-text)">
|
||||
<a href="{{ route('values.index') }}"
|
||||
class="block rounded py-2 px-4 text-center transition duration-200 ease-in-out"
|
||||
style="{{ !isset($category) && !isset($searchTerm) ? 'background-color: var(--color-primary); color: var(--button-text-color);' : 'background-color: var(--color-background); color: var(--color-text);' }}">
|
||||
{{ __('All Rares') }}
|
||||
</a>
|
||||
|
||||
<x-form.secondary-button class="w-full">
|
||||
{{ __('Search') }}
|
||||
</x-form.secondary-button>
|
||||
</form>
|
||||
|
||||
{{-- Quick Stats --}}
|
||||
@if(isset($statistics))
|
||||
<div class="mt-4 pt-4 border-t border-gray-300 dark:border-gray-700">
|
||||
<p class="text-xs text-[var(--color-text-muted)]">
|
||||
{{ __('Searching through :total rares', ['total' => $statistics['total_rares']]) }}
|
||||
</p>
|
||||
@foreach($categoriesNav ?? [] as $cat)
|
||||
<a href="{{ route('values.category', ['id' => $cat->id]) }}"
|
||||
class="block text-center rounded py-2 px-4 text-sm transition"
|
||||
style="{{ isset($category) && $category->id === $cat->id ? 'background-color: var(--color-primary); color: var(--button-text-color);' : 'background-color: var(--color-surface); color: var(--color-text);' }}">
|
||||
{{ $cat->name }}
|
||||
<span class="float-right text-xs opacity-75">({{ $cat->furniture_count ?? $cat->furniture->count() }})</span>
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</x-content.content-card>
|
||||
|
||||
{{-- Categories Navigation --}}
|
||||
<x-content.content-card icon="inventory-icon" classes="border dark:border-gray-900">
|
||||
<x-slot:title>
|
||||
{{ __('Categories') }}
|
||||
</x-slot:title>
|
||||
|
||||
<x-slot:under-title>
|
||||
{{ __(':count categories', ['count' => $categoriesNav->count() ?? 0]) }}
|
||||
</x-slot:under-title>
|
||||
|
||||
<div class="px-2 text-sm text-[var(--color-text)] space-y-2 max-h-96 overflow-y-auto">
|
||||
<a href="{{ route('values.index') }}"
|
||||
class="block rounded py-2 px-4 transition duration-200 ease-in-out hover:scale-[102%] {{ !isset($category) && !isset($searchTerm) ? 'bg-[var(--color-primary)] text-[var(--button-text-color)]' : 'bg-[var(--color-background)]' }}">
|
||||
{{ __('All Rares') }}
|
||||
</a>
|
||||
|
||||
@foreach($categoriesNav ?? [] as $cat)
|
||||
<a href="{{ route('values.category', ['id' => $cat->id]) }}" class="block text-center text-sm transition hover:scale-[102%]" :style="'background-color: ' + (isset($category) && $category->id === $cat->id ? 'var(--color-primary)' : 'var(--color-surface)') + '; color: ' + (isset($category) && $category->id === $cat->id ? 'var(--button-text-color)' : 'var(--color-text)') + '; border-radius: 0.25rem; padding: 0.5rem 1rem;'" style="display: block; text-align: center; border-radius: 0.25rem; padding: 0.5rem 1rem;">
|
||||
{{ $cat->name }}
|
||||
<span class="float-right text-xs opacity-75">({{ $cat->furniture_count ?? $cat->furniture->count() }})</span>
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
</x-content.content-card>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-[var(--color-text)]">
|
||||
<div style="color: var(--color-text);">
|
||||
<h5 class="text-xl font-bold">{{ $room->name }}</h5>
|
||||
<a class="flex items-center" href="/profile/{{ $room->owner->username }}">
|
||||
<img class="h-12" src="{{ setting('avatar_imager') }}{{ $room->owner->look }}&direction=2&headonly=1&head_direction=2&gesture=sml" alt="{{ $room->owner->username }}">
|
||||
@@ -43,49 +43,41 @@
|
||||
|
||||
<div class="col-span-12 md:col-span-4">
|
||||
<div class="grid grid-cols-1 gap-y-2">
|
||||
<div class="shadow border dark:border-gray-900">
|
||||
<div class="flex gap-x-2 rounded-t border-b bg-[var(--color-surface)] p-3 border-[var(--color-text-muted)]">
|
||||
<p class="font-semibold text-[var(--color-text)]">
|
||||
{{ __('Room details') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<section class="rounded-b bg-[var(--color-surface)] p-3 text-[var(--color-text)]">
|
||||
<p>
|
||||
<span class="font-semibold">{{ __('Max users:') }} </span>
|
||||
{{ $room->users_max }}
|
||||
</p>
|
||||
@if (strlen($room->tags) > 0)
|
||||
<p>
|
||||
<span class="font-semibold">Tags: </span>
|
||||
@foreach (explode(";", $room->tags) as $tag)
|
||||
@if (empty($tag) === false)
|
||||
<span class="rounded bg-[var(--color-background)] px-2">{{ $tag }}</span>
|
||||
@endif
|
||||
@endforeach
|
||||
</p>
|
||||
@endif
|
||||
</section>
|
||||
<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">{{ __('Room details') }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 text-sm" style="color: var(--color-text);">
|
||||
<p>
|
||||
<span class="font-semibold">{{ __('Max users:') }} </span>
|
||||
{{ $room->users_max }}
|
||||
</p>
|
||||
@if (strlen($room->tags) > 0)
|
||||
<p>
|
||||
<span class="font-semibold">Tags: </span>
|
||||
@foreach (explode(";", $room->tags) as $tag)
|
||||
@if (empty($tag) === false)
|
||||
<span class="rounded px-2" style="background-color: var(--color-background); color: var(--color-text);">{{ $tag }}</span>
|
||||
@endif
|
||||
@endforeach
|
||||
</p>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@if ($room->guild !== null)
|
||||
<x-content.content-card icon="{{ $room->guild->badge }}-icon" classes="border dark:border-gray-900">
|
||||
<x-slot:title>
|
||||
{{ __('The room guild') }}
|
||||
</x-slot:title>
|
||||
|
||||
<x-slot:under-title>
|
||||
{{ $room->guild->name }}
|
||||
</x-slot:under-title>
|
||||
|
||||
<p class="text-[14px] text-[var(--color-text-muted)]">
|
||||
{{ $room->guild->description }}
|
||||
</p>
|
||||
</x-content.content-card>
|
||||
<style>
|
||||
.{{ $room->guild->badge }}-icon {
|
||||
background: #f68b08 url("/client/flash/c_images/Badgeparts/generated/{{ $room->guild->badge }}.png") no-repeat center;
|
||||
}
|
||||
</style>
|
||||
<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">{{ __('The room guild') }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<p class="text-sm font-semibold mb-1" style="color: var(--color-text);">{{ $room->guild->name }}</p>
|
||||
<p class="text-sm" style="color: var(--color-text-muted);">{{ $room->guild->description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,29 +1,43 @@
|
||||
<x-app-layout>
|
||||
@push('title', __('Rules'))
|
||||
|
||||
<div class="col-span-12 flex flex-col gap-y-3">
|
||||
<div class="mb-4 w-full rounded bg-red-600 p-4 text-[var(--color-text)]">
|
||||
{{ __('Rules and regulations are subject to change without notice. As a member of the :hotel community, you hereby agree to and understand the following terms and conditions above. Failure to comply with these rules and regulations will result in the necessary sanctions implemented upon your account. If you have any questions or concerns in regards to The :hotel Way, please do not hesitate to ask a member of the Hotel Staff.', ['hotel' => setting('hotel_name')]) }}
|
||||
</div>
|
||||
<div class="col-span-12 flex flex-col gap-y-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">
|
||||
<h1 class="text-white font-bold text-xl">{{ __('Website Rules') }}</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<div class="rounded-lg p-4 text-sm" style="background-color: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)); color: var(--color-text); border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);">
|
||||
<p>{{ __('Rules and regulations are subject to change without notice. As a member of the :hotel community, you hereby agree to and understand the following terms and conditions above. Failure to comply with these rules and regulations will result in the necessary sanctions implemented upon your account. If you have any questions or concerns in regards to The :hotel Way, please do not hesitate to ask a member of the Hotel Staff.', ['hotel' => setting('hotel_name')]) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-y-6">
|
||||
@foreach ($categories as $category)
|
||||
<x-content.content-card icon="{{ $category->badge }}" classes="border dark:border-[var(--color-text-muted)]">
|
||||
<x-slot:title>
|
||||
{{ $category->name }}
|
||||
</x-slot:title>
|
||||
|
||||
<x-slot:under-title>
|
||||
{{ $category->description }}
|
||||
</x-slot:under-title>
|
||||
|
||||
<ul class="rounded bg-[var(--color-surface)] p-2 dark:bg-[var(--color-background)] dark:text-[var(--color-text-muted)]">
|
||||
@foreach ($category->rules as $rule)
|
||||
<li><strong>{{ $rule->paragraph }}.</strong> {{ $rule->rule }}</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</x-content.content-card>
|
||||
@endforeach
|
||||
</div>
|
||||
<div class="flex flex-col gap-y-4">
|
||||
@foreach ($categories as $category)
|
||||
<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">
|
||||
<img src="{{ asset($category->badge) }}" class="flex items-center justify-center" style="image-rendering: pixelated;">
|
||||
<div class="flex flex-col">
|
||||
<h2 class="text-white font-bold text-lg">{{ $category->name }}</h2>
|
||||
<p class="text-white/80 text-xs">{{ $category->description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<ul class="space-y-2">
|
||||
@foreach ($category->rules as $rule)
|
||||
<li class="rounded-lg p-3 text-sm" style="background-color: var(--color-background); color: var(--color-text); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
<strong>{{ $rule->paragraph }}.</strong> {{ $rule->rule }}
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,28 +1,26 @@
|
||||
<x-app-layout>
|
||||
@push('title', auth()->user()->username)
|
||||
|
||||
<div class="col-span-12 space-y-4 lg:col-span-9">
|
||||
<div class="col-span-12 lg:col-span-9 space-y-4">
|
||||
<x-user.me-backdrop :user="$user" />
|
||||
|
||||
<div class="rounded-xl border-2 shadow-sm lg:flex lg:items-center lg:justify-between overflow-hidden"
|
||||
style="background-color: var(--color-surface); border-color: var(--border-color);">
|
||||
<div class="flex items-center gap-3 p-3" style="background-color: var(--color-primary);">
|
||||
<img src="{{ asset('/assets/images/icons/online-friends.png') }}" alt="{{ __('Online Friends') }}"
|
||||
class="w-6 h-6">
|
||||
<span class="text-sm font-semibold" style="color: var(--button-text-color)">{{ __('Online Friends') }}</span>
|
||||
<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="flex items-center gap-3 p-3" style="background: linear-gradient(140deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 80%, black) 100%);">
|
||||
<img src="{{ asset('/assets/images/icons/online-friends.png') }}" alt="{{ __('Online Friends') }}" class="w-6 h-6">
|
||||
<span class="text-sm font-semibold text-white">{{ __('Online Friends') }}</span>
|
||||
</div>
|
||||
|
||||
<div class="relative flex flex-wrap items-center justify-center gap-3 p-3">
|
||||
@foreach ($onlineFriends as $friend)
|
||||
@forelse ($onlineFriends as $friend)
|
||||
<div data-popover-target="friend-{{ $friend->username }}"
|
||||
class="inline-block h-12 w-12 rounded-full border-2 bg-center bg-no-repeat hover:border-[var(--border-color)] hover:scale-110 transition-all duration-300 cursor-pointer"
|
||||
style="image-rendering: pixelated; border-color: var(--color-text-muted); background-image: url({{ setting('avatar_imager') }}{{ $friend->look }}&direction=3&head_direction=3&gesture=sml&action=wlk,wav&size=l&img_format=gif);">
|
||||
class="inline-block h-12 w-12 rounded-full border-2 bg-center bg-no-repeat hover:scale-110 transition-all duration-300 cursor-pointer"
|
||||
style="image-rendering: pixelated; border-color: color-mix(in srgb, var(--color-text-muted) 30%, transparent); background-image: url({{ setting('avatar_imager') }}{{ $friend->look }}&direction=3&head_direction=3&gesture=sml&action=wlk,wav&size=l&img_format=gif);">
|
||||
</div>
|
||||
|
||||
<div data-popover id="friend-{{ $friend->username }}" role="tooltip"
|
||||
class="invisible absolute z-10 inline-block w-64 rounded-lg border shadow-xl opacity-0 transition-opacity duration-300"
|
||||
style="background-color: var(--color-surface); border-color: var(--color-text-muted); color: var(--color-text);">
|
||||
<div class="rounded-t-lg border-b px-4 py-3" style="border-color: var(--color-text-muted); background-color: var(--color-surface);">
|
||||
class="invisible absolute z-10 inline-block w-64 rounded-lg border shadow-xl opacity-0 transition-opacity duration-300"
|
||||
style="background-color: var(--color-surface); border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent); color: var(--color-text);">
|
||||
<div class="rounded-t-lg border-b px-4 py-3" style="border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent); background-color: var(--color-surface);">
|
||||
<div class="flex items-center justify-between font-semibold" style="color: var(--color-text)">
|
||||
{{ $friend->username }}
|
||||
<span class="w-2 h-2 rounded-full bg-green-500"></span>
|
||||
@@ -38,74 +36,86 @@
|
||||
<span class="ml-1" style="color: var(--color-text)">{{ date(config('habbo.site.date_format'), $friend->last_online) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div data-popper-arrow class="absolute h-2 w-2 rotate-45 border-l border-b" style="border-color: var(--color-text-muted); background-color: var(--color-surface);"></div>
|
||||
<div data-popper-arrow class="absolute h-2 w-2 rotate-45 border-l border-b" style="border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent); background-color: var(--color-surface);"></div>
|
||||
</div>
|
||||
@endforeach
|
||||
@empty
|
||||
<p class="text-sm" style="color: var(--color-text-muted)">{{ __('No friends online right now.') }}</p>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-content.content-card icon="friends-icon" classes="border-2 dark:border-gray-900" style="border-color: var(--border-color);">
|
||||
<x-slot:title>
|
||||
{{ sprintf(__('User Referrals (%s/%s)'), auth()->user()->referrals->referrals_total ?? 0, setting('referrals_needed')) }}
|
||||
</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="flex items-center gap-3 p-3" style="background: linear-gradient(140deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 80%, black) 100%);">
|
||||
<span class="text-white font-bold text-lg">{{ sprintf(__('User Referrals (%s/%s)'), auth()->user()->referrals->referrals_total ?? 0, setting('referrals_needed')) }}</span>
|
||||
</div>
|
||||
|
||||
<x-slot:under-title>
|
||||
{{ __('Referral new users and be rewarded by in-game goods') }}
|
||||
</x-slot:under-title>
|
||||
|
||||
<div class="px-2 text-sm text-[var(--color-text)] space-y-4">
|
||||
<div class="p-4 space-y-4 text-sm" style="color: var(--color-text);">
|
||||
<p>
|
||||
{{ __('Here at :hotel we have added a referral system, allowing you to obtain a bonus for every :needed users that registers through your referral link will allow you to claim a reward of :amount diamonds!', ['hotel' => setting('hotel_name'), 'needed' => setting('referrals_needed'), 'amount' => setting('referral_reward_amount')]) }}
|
||||
</p>
|
||||
|
||||
<div class="bg-yellow-500/10 border border-yellow-500/30 rounded-lg p-3">
|
||||
<p class="text-yellow-400/80 text-xs">
|
||||
⚠️ {{ __('Boosting referrals by making own accounts will lead to removal of all progress, currency, inventory and a potential ban') }}
|
||||
<div class="p-3 rounded-lg" style="background-color: color-mix(in srgb, #eab308 10%, transparent); border: 1px solid color-mix(in srgb, #eab308 30%, transparent);">
|
||||
<p class="text-xs" style="color: color-mix(in srgb, #ca8a04 80%, transparent);">
|
||||
‍⚠️ {{ __('Boosting referrals by making own accounts will lead to removal of all progress, currency, inventory and a potential ban') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-12 gap-2">
|
||||
<x-form.input classes="col-span-12 md:col-span-10 text-sm" name="referral"
|
||||
value="{{ sprintf('%s/register/%s', config('habbo.site.site_url'), auth()->user()->referral_code) }}"
|
||||
:autofocus="false" :readonly="true" />
|
||||
<div class="col-span-12 md:col-span-10">
|
||||
<input type="text" id="referral" readonly
|
||||
value="{{ sprintf('%s/register/%s', config('habbo.site.site_url'), auth()->user()->referral_code) }}"
|
||||
class="w-full rounded-lg border px-3 py-2 text-sm focus:outline-none"
|
||||
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="col-span-12 flex md:col-span-2" onclick="copyCode()">
|
||||
<x-form.secondary-button>
|
||||
<div class="col-span-12 md:col-span-2">
|
||||
<button onclick="copyCode()"
|
||||
class="w-full 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);">
|
||||
{{ __('Copy code') }}
|
||||
</x-form.secondary-button>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if ((auth()->user()->referrals->referrals_total ?? 0) >= (int) setting('referrals_needed'))
|
||||
<a href="{{ route('claim.referral-reward') }}" class="text-decoration-none">
|
||||
<x-form.secondary-button classes="mt-2">
|
||||
<a href="{{ route('claim.referral-reward') }}" class="block text-center">
|
||||
<button class="w-full rounded-lg px-4 py-3 text-sm font-semibold transition-all duration-200 hover:opacity-90"
|
||||
style="background-color: var(--color-primary); color: var(--button-text-color);">
|
||||
{{ __('Claim your referrals reward!') }}
|
||||
</x-form.secondary-button>
|
||||
</button>
|
||||
</a>
|
||||
@else
|
||||
<button disabled class="mt-2 w-full rounded bg-[var(--color-text-muted)] p-3 text-[var(--color-text)] cursor-not-allowed opacity-60">
|
||||
<button disabled class="mt-2 w-full rounded-lg p-3 text-sm cursor-not-allowed opacity-60"
|
||||
style="background-color: color-mix(in srgb, var(--color-text-muted) 20%, transparent); color: var(--color-text);">
|
||||
{{ sprintf(__('You need to refer :needed more users, before being able to claim your reward', ['needed' => max(0, (int) setting('referrals_needed') - (auth()->user()->referrals->referrals_total ?? 0))]), auth()->user()->referrals->referrals_total ?? 0) }}
|
||||
</button>
|
||||
@endif
|
||||
</div>
|
||||
</x-content.content-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 space-y-4 lg:col-span-3">
|
||||
<div class="relative w-full" style="height: 213px">
|
||||
<div class="relative swiper articles-slider">
|
||||
<div class="swiper-wrapper">
|
||||
@forelse ($articles as $article)
|
||||
<x-article-card :for-slider="true" :article="$article" />
|
||||
@empty
|
||||
<x-filler-article-card />
|
||||
@endforelse
|
||||
<div class="col-span-12 lg:col-span-3 space-y-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="flex items-center gap-3 p-3" style="background: linear-gradient(140deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 80%, black) 100%);">
|
||||
<span class="text-white font-bold text-lg">{{ __('Latest News') }}</span>
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<div class="relative w-full swiper articles-slider" style="height: 215px;">
|
||||
<div class="swiper-wrapper">
|
||||
@forelse ($articles as $article)
|
||||
<x-article-card :for-slider="true" :article="$article" />
|
||||
@empty
|
||||
<div class="swiper-slide flex items-center justify-center" style="color: var(--color-text-muted)">
|
||||
{{ __('No articles yet.') }}
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
<div class="swiper-pagination" style="bottom: 0px !important; z-index: 0;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-pagination" style="bottom: 0px !important; z-index: 0;"></div>
|
||||
</div>
|
||||
|
||||
<div class="!mt-3">
|
||||
<div>
|
||||
<x-user.discord-widget />
|
||||
</div>
|
||||
</div>
|
||||
@@ -136,4 +146,4 @@
|
||||
}
|
||||
</script>
|
||||
@endpush
|
||||
</x-app-layout>
|
||||
</x-app-layout>
|
||||
|
||||
@@ -1,240 +1,251 @@
|
||||
<x-app-layout>
|
||||
@push('title', $user->username)
|
||||
@push('title', $user->username)
|
||||
|
||||
<div class="col-span-12">
|
||||
<div class="grid grid-cols-1! gap-y-14">
|
||||
<div class="grid grid-cols-3! gap-x-8">
|
||||
<div
|
||||
class="col-span-3 md:col-span-1! h-[150px] lg:h-[220px] profile-bg rounded-lg relative flex gap-x-2 items-center overflow-hidden"
|
||||
style="color: var(--color-text)">
|
||||
<img class="mt-14 lg:mt-0" style="image-rendering: pixelated;"
|
||||
src="{{ setting('avatar_imager') }}{{ $user->look }}&direction=2&head_direction=3&gesture=sml&action=wav&size=l"
|
||||
alt="">
|
||||
<div class="col-span-12">
|
||||
<div class="flex flex-col gap-y-6">
|
||||
{{-- Profile Header --}}
|
||||
<div class="rounded-lg relative overflow-hidden" style="background: linear-gradient(140deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 60%, #000) 100%);">
|
||||
<div class="absolute inset-0 bg-black/30 z-10"></div>
|
||||
|
||||
<div class="flex flex-col">
|
||||
<h3 class="text-xl font-semibold" style="color: var(--color-text-muted)">{{ __('My name is,') }}</h3>
|
||||
<h2 class="text-4xl">
|
||||
{{ $user->username }}
|
||||
</h2>
|
||||
<div class="relative z-20 flex items-center gap-x-4 p-4 md:p-6">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="rounded-full overflow-hidden border-4" style="width: 100px; height: 100px; border-color: color-mix(in srgb, var(--color-primary) 50%, #fff); background-color: var(--color-surface);">
|
||||
<img style="image-rendering: pixelated; width: 100%; height: 100%; object-fit: cover; object-position: center -10px;"
|
||||
src="{{ setting('avatar_imager') }}{{ $user->look }}&direction=2&head_direction=3&gesture=sml&action=wav&size=l"
|
||||
alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="text-lg font-semibold italic" style="color: var(--color-text-muted)">{{ $user->motto }}</h4>
|
||||
@if(isset($showOnline) && $showOnline)
|
||||
<small class="text-xs mt-1 opacity-70">{{ __('Last online:') }} {{ $lastLogin ?? 'Unknown' }}</small>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col text-white">
|
||||
<h3 class="text-lg font-semibold opacity-80">{{ __('My name is,') }}</h3>
|
||||
<h2 class="text-3xl font-bold text-shadow">
|
||||
{{ $user->username }}
|
||||
</h2>
|
||||
<h4 class="text-base font-semibold italic opacity-80">{{ $user->motto }}</h4>
|
||||
@if(isset($showOnline) && $showOnline)
|
||||
<small class="text-xs mt-1 opacity-60">{{ __('Last online:') }} {{ $lastLogin ?? 'Unknown' }}</small>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if(isset($showStats) && $showStats)
|
||||
<div class="mt-4 flex flex-wrap gap-4 p-3 rounded-lg" style="background: var(--color-surface)">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4" style="color: var(--color-primary)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
<span class="text-sm" style="color: var(--color-text-muted)">{{ __('Account:') }}</span>
|
||||
<span class="font-semibold" style="color: var(--color-primary)">{{ $accountAge ?? 'Unknown' }}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||
</svg>
|
||||
<span class="text-sm" style="color: var(--color-text-muted)">{{ __('Friends:') }}</span>
|
||||
<span class="font-semibold text-blue-400">{{ $totalFriends ?? 0 }}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
|
||||
</svg>
|
||||
<span class="text-sm" style="color: var(--color-text-muted)">{{ __('Guilds:') }}</span>
|
||||
<span class="font-semibold text-purple-400">{{ $totalGuilds ?? 0 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
{{-- Stats Bar --}}
|
||||
@if(isset($showStats) && $showStats)
|
||||
<div class="flex flex-wrap gap-4 p-3 rounded-lg" style="background-color: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4" style="color: var(--color-primary)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
<span class="text-sm" style="color: var(--color-text-muted)">{{ __('Account:') }}</span>
|
||||
<span class="font-semibold" style="color: var(--color-primary)">{{ $accountAge ?? 'Unknown' }}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||
</svg>
|
||||
<span class="text-sm" style="color: var(--color-text-muted)">{{ __('Friends:') }}</span>
|
||||
<span class="font-semibold text-blue-400">{{ $totalFriends ?? 0 }}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
|
||||
</svg>
|
||||
<span class="text-sm" style="color: var(--color-text-muted)">{{ __('Guilds:') }}</span>
|
||||
<span class="font-semibold text-purple-400">{{ $totalGuilds ?? 0 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div
|
||||
class="col-span-3! mt-4 grid w-full grid-cols-1 space-y-3 md:space-y-0 md:col-span-2! md:mt-0 md:grid-cols-3">
|
||||
<div
|
||||
class="rounded-lg md:rounded-none md:rounded-l-lg bg-[#f8ef2b] flex flex-col gap-y-2 items-center justify-center py-3 md:py-0">
|
||||
<img src="{{ asset('/assets/images/profile/credits.png') }}" alt="">
|
||||
{{-- Currency Boxes --}}
|
||||
<div class="grid w-full grid-cols-1 gap-3 md:grid-cols-3">
|
||||
<div class="rounded-lg flex flex-col gap-y-2 items-center justify-center py-4" style="background: linear-gradient(135deg, #f8ef2b 0%, #f8ef2b 100%);">
|
||||
<img src="{{ asset('/assets/images/profile/credits.png') }}" alt="">
|
||||
<h4 class="font-semibold text-2xl" style="color: #b16d18;">
|
||||
{{ $user->credits }}
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<h4 class="text-[#b16d18] font-semibold text-2xl">
|
||||
{{ $user->credits }}
|
||||
</h4>
|
||||
</div>
|
||||
<div class="rounded-lg flex flex-col gap-y-2 items-center justify-center py-4" style="background: linear-gradient(135deg, #e99bdc 0%, #e99bdc 100%);">
|
||||
<img src="{{ asset('/assets/images/profile/duckets.png') }}" alt="">
|
||||
<h4 class="font-semibold text-2xl" style="color: #812378;">
|
||||
{{ $user->currency('duckets') }}
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="rounded-lg md:rounded-none bg-[#e99bdc] flex flex-col gap-y-2 items-center justify-center py-3 md:py-0">
|
||||
<img src="{{ asset('/assets/images/profile/duckets.png') }}" alt="">
|
||||
<div class="rounded-lg flex flex-col gap-y-2 items-center justify-center py-4" style="background: linear-gradient(135deg, #82d6db 0%, #82d6db 100%);">
|
||||
<img src="{{ asset('/assets/images/profile/diamonds.png') }}" alt="">
|
||||
<h4 class="font-semibold text-2xl" style="color: #146867;">
|
||||
{{ $user->currency('diamonds') }}
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="text-[#812378] font-semibold text-2xl">
|
||||
{{ $user->currency('duckets') }}
|
||||
</h4>
|
||||
</div>
|
||||
{{-- Badges + Groups --}}
|
||||
<div class="grid gap-4 grid-cols-1 md:grid-cols-2">
|
||||
<x-user.profile-info-card col-span="1">
|
||||
<x-slot:image>
|
||||
<img class="h-[100px] w-full object-cover object-left rounded-t-lg" src="{{ asset('/assets/images/profile/badges.png') }}" alt="">
|
||||
</x-slot:image>
|
||||
|
||||
<div
|
||||
class="rounded-lg md:rounded-none md:rounded-r-lg! bg-[#82d6db] flex flex-col gap-y-2 items-center justify-center py-3 md:py-0">
|
||||
<img src="{{ asset('/assets/images/profile/diamonds.png') }}" alt="">
|
||||
<x-slot:title>
|
||||
{{ __('Badges') }}
|
||||
</x-slot:title>
|
||||
|
||||
<h4 class="text-[#146867] font-semibold text-2xl">
|
||||
{{ $user->currency('diamonds') }}
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 justify-between">
|
||||
@forelse($badges as $badge)
|
||||
<div data-tippy-content="{{ $badge->badge_code }}"
|
||||
class="user-badge h-[70px] w-[70px] rounded-full flex items-center justify-center cursor-pointer"
|
||||
style="border: 2px solid color-mix(in srgb, var(--color-text-muted) 30%, transparent);">
|
||||
<img src="{{ setting('badges_path') }}/{{ $badge->badge_code }}.gif"
|
||||
class="max-h-[55px] max-w-[55px]" alt="">
|
||||
</div>
|
||||
@empty
|
||||
<div class="w-full text-center py-4" style="color: var(--color-text-muted)">
|
||||
{{ __('It seems like :user has no badges.', ['user' => $user->username]) }}
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</x-user.profile-info-card>
|
||||
|
||||
<div class="grid gap-14 grid-cols-1 md:grid-cols-2">
|
||||
<div class="col-span-1">
|
||||
<x-user.profile-info-card col-span="1">
|
||||
<x-slot:image>
|
||||
<img class="h-[140px] object-cover object-left" src="{{ asset('/assets/images/profile/badges.png') }}" alt="">
|
||||
</x-slot:image>
|
||||
<x-user.profile-info-card col-span="1">
|
||||
<x-slot:image>
|
||||
<img class="h-[100px] w-full object-cover object-left rounded-t-lg" src="{{ asset('/assets/images/profile/groups.png') }}" alt="">
|
||||
</x-slot:image>
|
||||
|
||||
<x-slot:title>
|
||||
{{ __('Badges') }}
|
||||
</x-slot:title>
|
||||
<x-slot:title>
|
||||
{{ __('Groups') }}
|
||||
</x-slot:title>
|
||||
|
||||
<div class="flex flex-wrap gap-2 justify-between">
|
||||
@forelse($badges as $badge)
|
||||
<div data-tippy-content="{{ $badge->badge_code }}"
|
||||
class="user-badge h-[70px] w-[70px] border-2 dark:border-gray-700 rounded-full flex items-center justify-center cursor-pointer">
|
||||
<img src="{{ setting('badges_path') }}/{{ $badge->badge_code }}.gif"
|
||||
class="max-h-[55px] max-w-[55px]" alt="">
|
||||
</div>
|
||||
@empty
|
||||
<div class="col-span-4">
|
||||
{{ __('It seems like :user has no badges.', ['user' => $user->username]) }}
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</x-user.profile-info-card>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-4 justify-between">
|
||||
@forelse($groups as $group)
|
||||
<div class="h-[70px] w-[70px] rounded-full overflow-hidden flex items-center justify-center p-1 cursor-pointer group-badge"
|
||||
data-tippy-content="{{ $group->guild?->name ?? 'Unknown' }}"
|
||||
style="border: 2px solid color-mix(in srgb, var(--color-text-muted) 30%, transparent);">
|
||||
<img src="{{ setting('group_badge_path') }}/{{ $group->guild?->badge }}.png"
|
||||
alt="">
|
||||
</div>
|
||||
@empty
|
||||
<div class="w-full text-center py-4" style="color: var(--color-text-muted)">
|
||||
{{ __('It seems like :user is not a member of any groups.', ['user' => $user->username]) }}
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</x-user.profile-info-card>
|
||||
</div>
|
||||
|
||||
<div class="col-span-1">
|
||||
<x-user.profile-info-card col-span="1">
|
||||
<x-slot:image>
|
||||
<img class="h-[140px] object-cover object-left" src="{{ asset('/assets/images/profile/groups.png') }}" alt="">
|
||||
</x-slot:image>
|
||||
{{-- Rooms + Friends --}}
|
||||
<div class="grid gap-4 grid-cols-1 md:grid-cols-2">
|
||||
<x-user.profile-info-card col-span="1">
|
||||
<x-slot:image>
|
||||
<img class="h-[100px] w-full object-cover object-left rounded-t-lg" src="{{ asset('/assets/images/profile/rooms.png') }}" alt="">
|
||||
</x-slot:image>
|
||||
|
||||
<x-slot:title>
|
||||
{{ __('Groups') }}
|
||||
</x-slot:title>
|
||||
<x-slot:title>
|
||||
{{ __('Rooms') }}
|
||||
</x-slot:title>
|
||||
|
||||
<div class="flex flex-wrap gap-4 justify-between">
|
||||
@forelse($groups as $group)
|
||||
<div class="h-[70px] w-[70px] rounded-full border-2 dark:border-gray-700 overflow-hidden flex items-center justify-center p-1 rounded-md cursor-pointer friend"
|
||||
data-tippy-content="{{ $group->name ?? 'Unknown' }}">
|
||||
<img src="{{ setting('group_badge_path') }}/{{ $group->badge }}.png"
|
||||
alt="">
|
||||
</div>
|
||||
@empty
|
||||
<div class="w-full">
|
||||
{{ __('It seems like :user is not a member of any groups.', ['user' => $user->username]) }}
|
||||
<div class="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||
@forelse($user->rooms as $room)
|
||||
<div class="flex flex-col gap-y-1 rounded-md overflow-hidden" style="background-color: color-mix(in srgb, var(--color-text-muted) 8%, transparent);">
|
||||
<div class="relative">
|
||||
<img
|
||||
class="w-full h-[80px] object-cover"
|
||||
src="{{ setting('room_thumbnail_path') }}/{{ $room->id }}.png"
|
||||
alt="{{ $room->name }}"
|
||||
onerror="this.onerror=null;this.src='{{ asset('/assets/images/profile/room_placeholder.png') }}';"
|
||||
>
|
||||
<div class="absolute bottom-1 left-1/2 transform -translate-x-1/2">
|
||||
<div class="{{ $room->users > 0 ? 'bg-[#00800B]' : '' }} px-1 py-[1px] font-semibold rounded flex gap-x-[3px] items-center text-xs" style="color: var(--color-text); {{ $room->users > 0 ? '' : 'background-color: var(--color-text-muted);' }}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-[12px]" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
{{ $room->users }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between px-1 py-1">
|
||||
<p class="truncate text-sm" style="color: var(--color-text)">{{ Str::limit($room->name, 10) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<div class="col-span-3 text-center py-4" style="color: var(--color-text-muted)">
|
||||
{{ __('It seems like :user got no rooms.', ['user' => $user->username]) }}
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</x-user.profile-info-card>
|
||||
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</x-user.profile-info-card>
|
||||
</div>
|
||||
</div>
|
||||
<x-user.profile-info-card col-span="1">
|
||||
<x-slot:image>
|
||||
<img class="h-[100px] w-full object-cover object-left rounded-t-lg" src="{{ asset('/assets/images/profile/friends.png') }}" alt="">
|
||||
</x-slot:image>
|
||||
|
||||
<div class="grid gap-14 grid-cols-1 md:grid-cols-2">
|
||||
<div class="col-span-1">
|
||||
<x-user.profile-info-card col-span="1">
|
||||
<x-slot:image>
|
||||
<img class="h-[140px] object-cover object-left" src="{{ asset('/assets/images/profile/rooms.png') }}" alt="">
|
||||
</x-slot:image>
|
||||
<x-slot:title>
|
||||
{{ __('Friends') }}
|
||||
</x-slot:title>
|
||||
|
||||
<x-slot:title>
|
||||
{{ __('Rooms') }}
|
||||
</x-slot:title>
|
||||
<div class="grid grid-cols-3 gap-2 sm:grid-cols-4 md:grid-cols-3 lg:grid-cols-4">
|
||||
@forelse($friends as $friend)
|
||||
<a href="{{ route('profile.show', $friend->user->username ?? 'SystemAccount') }}"
|
||||
class="rounded-full overflow-hidden flex items-center justify-center p-1 cursor-pointer friend"
|
||||
data-tippy-content="{{ $friend->user->username ?? 'Unknown' }}"
|
||||
style="border: 2px solid color-mix(in srgb, var(--color-text-muted) 30%, transparent); width: 70px; height: 70px;">
|
||||
<img class="transition duration-200 ease-in-out hover:scale-110"
|
||||
style="image-rendering: pixelated; margin-top: 15px;"
|
||||
src="{{ setting('avatar_imager') }}{{ $friend->user?->look }}&headonly=1"
|
||||
alt="">
|
||||
</a>
|
||||
@empty
|
||||
<div class="col-span-4 text-center py-4" style="color: var(--color-text-muted)">
|
||||
{{ __('It seems like :user has no friends.', ['user' => $user->username]) }}
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</x-user.profile-info-card>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 space-x-1">
|
||||
@forelse($user->rooms as $room)
|
||||
<div
|
||||
class="flex flex-col gap-y-1 rounded-md bg-[var(--color-surface)] p-1 overflow-hidden">
|
||||
<div class="h-full inline-block">
|
||||
<div class="h-full relative border border-gray-500 dark:border-gray-700 rounded flex items-center justify-center flex-col">
|
||||
<img
|
||||
class="rounded mt-1 mb-1"
|
||||
src="{{ setting('room_thumbnail_path') }}/{{ $room->id }}.png"
|
||||
alt="{{ $room->name }}"
|
||||
onerror="this.onerror=null;this.src='{{ asset('/assets/images/profile/room_placeholder.png') }}';"
|
||||
>
|
||||
{{-- Guestbook Section --}}
|
||||
@if(isset($guestbook) && $guestbook->count() > 0)
|
||||
<x-user.profile-info-card col-span="1">
|
||||
<x-slot:image>
|
||||
<div class="h-[60px] w-full rounded-t-lg flex items-center px-4" style="background: linear-gradient(140deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 60%, #000) 100%);">
|
||||
<span class="text-white font-bold text-lg">{{ __('Guestbook') }}</span>
|
||||
</div>
|
||||
</x-slot:image>
|
||||
|
||||
<div class="absolute bottom-1 left-1/2 transform -translate-x-1/2">
|
||||
<div class="{{ $room->users > 0 ? 'bg-[#00800B]' : 'bg-[var(--color-text-muted)]' }} px-1 py-[1px] font-semibold rounded flex gap-x-[3px] text-[var(--color-text)] items-center text-xs">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-[12px]" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<x-slot:title>
|
||||
{{ __('Recent Messages') }}
|
||||
</x-slot:title>
|
||||
|
||||
{{ $room->users }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3">
|
||||
@foreach($guestbook as $entry)
|
||||
<div class="flex gap-3 p-2 rounded-lg" style="background-color: color-mix(in srgb, var(--color-text-muted) 8%, transparent);">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="w-10 h-10 rounded-full overflow-hidden" style="border: 2px solid color-mix(in srgb, var(--color-text-muted) 30%, transparent);">
|
||||
<img src="{{ setting('avatar_imager') }}{{ $entry->user?->look }}&headonly=1"
|
||||
alt="" class="w-full h-full object-cover">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-semibold text-sm" style="color: var(--color-primary)">{{ $entry->user?->username ?? 'Unknown' }}</span>
|
||||
<span class="text-xs" style="color: var(--color-text-muted)">{{ $entry->created_at?->diffForHumans() ?? '' }}</span>
|
||||
</div>
|
||||
<p class="text-sm mt-1" style="color: var(--color-text)">{{ $entry->message }}</p>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</x-user.profile-info-card>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between px-1">
|
||||
<p class="truncate">{{ Str::limit($room->name, 6) }}</p>
|
||||
|
||||
<a href="#">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5 text-cyan-300 hover:text-cyan-400"
|
||||
viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd"
|
||||
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<div class="col-span-4">
|
||||
{{ __('It seems like :user got no rooms.', ['user' => $user->username]) }}
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</x-user.profile-info-card>
|
||||
</div>
|
||||
|
||||
<div class="col-span-1">
|
||||
<x-user.profile-info-card col-span="1">
|
||||
<x-slot:image>
|
||||
<img class="h-[140px] object-cover object-left" src="{{ asset('/assets/images/profile/friends.png') }}" alt="">
|
||||
</x-slot:image>
|
||||
|
||||
<x-slot:title>
|
||||
{{ __('Friends') }}
|
||||
</x-slot:title>
|
||||
|
||||
<div class="grid grid-cols-4 gap-2 xl:grid-cols-6 xl:pl-3">
|
||||
@forelse($friends as $friend)
|
||||
<a href="{{ route('profile.show', $friend->user->username ?? 'SystemAccount') }}"
|
||||
class="h-[70px] w-[70px] rounded-full border-2 dark:border-gray-700 overflow-hidden flex items-center p-1 rounded-md cursor-pointer friend"
|
||||
data-tippy-content="{{ $friend->user->username ?? 'Unknown' }}">
|
||||
<img class="mt-6 transition duration-200 ease-in-out hover:scale-110 min-w-[64px] h-[110px] -ml-1"
|
||||
src="{{ setting('avatar_imager') }}{{ $friend->user?->look }}"
|
||||
alt="">
|
||||
</a>
|
||||
@empty
|
||||
<div class="col-span-6">
|
||||
{{ __('It seems like :user has no friends.', ['user' => $user->username]) }}
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</x-user.profile-info-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@push('javascript')
|
||||
<script type="module">
|
||||
tippy('.user-badge');
|
||||
tippy('.friend');
|
||||
tippy('.group');
|
||||
</script>
|
||||
@endpush
|
||||
@push('javascript')
|
||||
<script type="module">
|
||||
tippy('.user-badge');
|
||||
tippy('.friend');
|
||||
tippy('.group-badge');
|
||||
</script>
|
||||
@endpush
|
||||
</x-app-layout>
|
||||
|
||||
@@ -6,71 +6,66 @@
|
||||
</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>
|
||||
{{ __('Account settings') }}
|
||||
</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="flex items-center gap-3 p-3" style="background: linear-gradient(140deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 80%, black) 100%);">
|
||||
<div>
|
||||
<h1 class="text-white font-bold text-lg">{{ __('Account settings') }}</h1>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">{{ __('Manage your account settings') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-slot:under-title>
|
||||
{{ __('Manage your account settings') }}
|
||||
</x-slot:under-title>
|
||||
<div class="p-4">
|
||||
<form action="{{ route('settings.account.update') }}" method="POST" class="flex flex-col gap-y-4">
|
||||
@method('PUT')
|
||||
@csrf
|
||||
|
||||
<form action="{{ route('settings.account.update') }}" method="POST" class="flex flex-col gap-y-4">
|
||||
@method('PUT')
|
||||
@csrf
|
||||
<div class="flex flex-col gap-y-1">
|
||||
<label class="block text-sm font-semibold" style="color: var(--color-text);" for="mail">
|
||||
{{ __('E-mail') }}
|
||||
</label>
|
||||
<p class="text-xs mb-1" style="color: var(--color-text-muted);">
|
||||
{{ __('Make sure to use an email that you remember, if you ever lose your password, your email will be required.') }}
|
||||
</p>
|
||||
<input name="mail" type="email" value="{{ $user->mail }}" 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 class="flex flex-col gap-y-1">
|
||||
<x-form.label for="mail">
|
||||
{{ __('E-mail') }}
|
||||
@if ($user->settings?->allow_name_change)
|
||||
<div class="flex flex-col gap-y-1">
|
||||
<label class="block text-sm font-semibold" style="color: var(--color-text);" for="username">
|
||||
{{ __('Username') }}
|
||||
</label>
|
||||
<p class="text-xs mb-1" style="color: var(--color-text-muted);">
|
||||
{{ __('Your username is what you and others will see in-game') }}
|
||||
</p>
|
||||
<input name="username" value="{{ $user->username }}" 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>
|
||||
@endif
|
||||
|
||||
<x-slot:info>
|
||||
{{ __('Make sure to use an email that you remember, if you ever lose your password, your email will be required.') }}
|
||||
</x-slot:info>
|
||||
</x-form.label>
|
||||
<div class="flex flex-col gap-y-1">
|
||||
<label class="block text-sm font-semibold" style="color: var(--color-text);" for="motto">
|
||||
{{ __('Motto') }}
|
||||
</label>
|
||||
<p class="text-xs mb-1" style="color: var(--color-text-muted);">
|
||||
{{ __('Spice up your profile with a nice motto') }}
|
||||
</p>
|
||||
<input name="motto" value="{{ $user->motto }}" 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 name="mail" type="email" value="{{ $user->mail }}" :autofocus="true" />
|
||||
</div>
|
||||
@if (setting('google_recaptcha_enabled'))
|
||||
<div class="g-recaptcha" data-sitekey="{{ config('habbo.site.recaptcha_site_key') }}"></div>
|
||||
@endif
|
||||
|
||||
@if ($user->settings?->allow_name_change)
|
||||
<div class="flex flex-col gap-y-1">
|
||||
<x-form.label for="username">
|
||||
{{ __('Username') }}
|
||||
@if (setting('cloudflare_turnstile_enabled'))
|
||||
<x-turnstile />
|
||||
@endif
|
||||
|
||||
<x-slot:info>
|
||||
{{ __('Your username is what you and others will see in-game') }}
|
||||
</x-slot:info>
|
||||
</x-form.label>
|
||||
|
||||
<x-form.input name="username" value="{{ $user->username }}" />
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="flex flex-col gap-y-1">
|
||||
<x-form.label for="motto">
|
||||
{{ __('Motto') }}
|
||||
|
||||
<x-slot:info>
|
||||
{{ __('Spice up your profile with a nice motto') }}
|
||||
</x-slot:info>
|
||||
</x-form.label>
|
||||
|
||||
<x-form.input name="motto" value="{{ $user->motto }}" />
|
||||
</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
|
||||
|
||||
<div class="flex w-full justify-start md:justify-end">
|
||||
<x-form.secondary-button classes="lg:w-1/4">
|
||||
{{ __('Update settings') }}
|
||||
</x-form.secondary-button>
|
||||
</div>
|
||||
</form>
|
||||
</x-content.content-card>
|
||||
<div class="flex w-full justify-start md:justify-end">
|
||||
<button type="submit" class="rounded-lg px-4 py-2 font-semibold transition-all duration-200 hover:opacity-90" style="background-color: var(--color-primary); color: var(--button-text-color);">
|
||||
{{ __('Update settings') }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
||||
@@ -6,69 +6,64 @@
|
||||
</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>
|
||||
{{ __('Password settings') }}
|
||||
</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="flex items-center gap-3 p-3" style="background: linear-gradient(140deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 80%, black) 100%);">
|
||||
<div>
|
||||
<h1 class="text-white font-bold text-lg">{{ __('Password settings') }}</h1>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">{{ __('Change your password by filling out the fields below') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-slot:under-title>
|
||||
{{ __('Change your password by filling out the fields below') }}
|
||||
</x-slot:under-title>
|
||||
<div class="p-4">
|
||||
<form action="{{ route('settings.password.update') }}" method="POST" class="flex flex-col gap-y-4">
|
||||
@method('PUT')
|
||||
@csrf
|
||||
|
||||
<form action="{{ route('settings.password.update') }}" method="POST" class="flex flex-col gap-y-4">
|
||||
@method('PUT')
|
||||
@csrf
|
||||
<div class="flex flex-col gap-y-1">
|
||||
<label class="block text-sm font-semibold" style="color: var(--color-text);" for="current_password">
|
||||
{{ __('Current password') }}
|
||||
</label>
|
||||
<p class="text-xs mb-1" style="color: var(--color-text-muted);">
|
||||
{{ __('Enter your current password') }}
|
||||
</p>
|
||||
<input name="current_password" type="password" 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 class="flex flex-col gap-y-1">
|
||||
<x-form.label for="current_password">
|
||||
{{ __('Current password') }}
|
||||
<div class="flex flex-col gap-y-1">
|
||||
<label class="block text-sm font-semibold" style="color: var(--color-text);" for="password">
|
||||
{{ __('New password') }}
|
||||
</label>
|
||||
<p class="text-xs mb-1" style="color: var(--color-text-muted);">
|
||||
{{ __('Enter a new secure password. Do not forget to save it somewhere safe') }}
|
||||
</p>
|
||||
<input name="password" type="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-slot:info>
|
||||
{{ __('Enter your current password') }}
|
||||
</x-slot:info>
|
||||
</x-form.label>
|
||||
<div class="flex flex-col gap-y-1">
|
||||
<label class="block text-sm font-semibold" style="color: var(--color-text);" for="password_confirmation">
|
||||
{{ __('Confirm new password') }}
|
||||
</label>
|
||||
<p class="text-xs mb-1" style="color: var(--color-text-muted);">
|
||||
{{ __('Please confirm your new password') }}
|
||||
</p>
|
||||
<input name="password_confirmation" type="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 name="current_password" type="password" :autofocus="true" />
|
||||
</div>
|
||||
@if (setting('google_recaptcha_enabled'))
|
||||
<div class="g-recaptcha" data-sitekey="{{ config('habbo.site.recaptcha_site_key') }}"></div>
|
||||
@endif
|
||||
|
||||
<div class="flex flex-col gap-y-1">
|
||||
<x-form.label for="password">
|
||||
{{ __('New password') }}
|
||||
@if (setting('cloudflare_turnstile_enabled'))
|
||||
<x-turnstile />
|
||||
@endif
|
||||
|
||||
<x-slot:info>
|
||||
{{ __('Enter a new secure password. Do not forget to save it somewhere safe') }}
|
||||
</x-slot:info>
|
||||
</x-form.label>
|
||||
|
||||
<x-form.input name="password" type="password" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-y-1">
|
||||
<x-form.label for="password_confirmation">
|
||||
{{ __('Confirm new password') }}
|
||||
|
||||
<x-slot:info>
|
||||
{{ __('Please confirm your new password') }}
|
||||
</x-slot:info>
|
||||
</x-form.label>
|
||||
|
||||
<x-form.input name="password_confirmation" type="password" />
|
||||
</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
|
||||
|
||||
<div class="flex w-full justify-start md:justify-end">
|
||||
<x-form.secondary-button classes="lg:w-1/4">
|
||||
{{ __('Update password') }}
|
||||
</x-form.secondary-button>
|
||||
</div>
|
||||
</form>
|
||||
</x-content.content-card>
|
||||
<div class="flex w-full justify-start md:justify-end">
|
||||
<button type="submit" class="rounded-lg px-4 py-2 font-semibold transition-all duration-200 hover:opacity-90" style="background-color: var(--color-primary); color: var(--button-text-color);">
|
||||
{{ __('Update password') }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
||||
@@ -6,204 +6,205 @@
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 flex flex-col gap-y-3 md:col-span-9">
|
||||
<x-content.content-card icon="cog-icon" classes="border">
|
||||
<x-slot:title>
|
||||
{{ __('Preferences') }}
|
||||
</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="flex items-center gap-3 p-3" style="background: linear-gradient(140deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 80%, black) 100%);">
|
||||
<div>
|
||||
<h1 class="text-white font-bold text-lg">{{ __('Preferences') }}</h1>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">{{ __('Manage your preferences') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-slot:under-title>
|
||||
{{ __('Manage your preferences') }}
|
||||
</x-slot:under-title>
|
||||
<div class="p-4">
|
||||
<form action="{{ route('settings.preferences.update') }}" method="POST" class="flex flex-col gap-y-6">
|
||||
@method('PUT')
|
||||
@csrf
|
||||
|
||||
<form action="{{ route('settings.preferences.update') }}" method="POST" class="flex flex-col gap-y-6">
|
||||
@method('PUT')
|
||||
@csrf
|
||||
{{-- Radio Settings --}}
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4" style="color: var(--color-text);">{{ __('Radio Settings') }}</h3>
|
||||
<div class="space-y-4">
|
||||
<label class="flex items-center justify-between cursor-pointer p-3 rounded-lg" style="background-color: color-mix(in srgb, var(--color-text-muted) 5%, transparent); border: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);">
|
||||
<div>
|
||||
<span class="font-semibold text-sm" style="color: var(--color-text);">{{ __('Auto-play radio') }}</span>
|
||||
<p class="text-xs" style="color: var(--color-text-muted);">{{ __('Automatically start playing radio when you visit the site') }}</p>
|
||||
</div>
|
||||
<input type="hidden" name="radio_auto_play" value="0">
|
||||
<input type="checkbox" name="radio_auto_play" value="1" {{ old('radio_auto_play', $preferences['radio_auto_play'] ?? false) ? 'checked' : '' }}
|
||||
class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
</label>
|
||||
|
||||
{{-- Radio Settings --}}
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4" style="color: var(--color-text);">{{ __('Radio Settings') }}</h3>
|
||||
<div class="space-y-4">
|
||||
<label class="flex items-center justify-between cursor-pointer p-3 rounded" style="background-color: var(--color-surface);">
|
||||
<div>
|
||||
<span class="font-semibold" style="color: var(--color-text);">{{ __('Auto-play radio') }}</span>
|
||||
<p class="text-sm" style="color: var(--color-text-muted);">{{ __('Automatically start playing radio when you visit the site') }}</p>
|
||||
</div>
|
||||
<input type="hidden" name="radio_auto_play" value="0">
|
||||
<input type="checkbox" name="radio_auto_play" value="1" {{ old('radio_auto_play', $preferences['radio_auto_play'] ?? false) ? 'checked' : '' }}
|
||||
class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
</label>
|
||||
<label class="flex items-center justify-between cursor-pointer p-3 rounded-lg" style="background-color: color-mix(in srgb, var(--color-text-muted) 5%, transparent); border: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);">
|
||||
<div>
|
||||
<span class="font-semibold text-sm" style="color: var(--color-text);">{{ __('Show radio shouts') }}</span>
|
||||
<p class="text-xs" style="color: var(--color-text-muted);">{{ __('Show live shouts panel on the radio player') }}</p>
|
||||
</div>
|
||||
<input type="hidden" name="radio_shouts" value="0">
|
||||
<input type="checkbox" name="radio_shouts" value="1" {{ old('radio_shouts', $preferences['radio_shouts'] ?? true) ? 'checked' : '' }}
|
||||
class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
</label>
|
||||
|
||||
<label class="flex items-center justify-between cursor-pointer p-3 rounded" style="background-color: var(--color-surface);">
|
||||
<div>
|
||||
<span class="font-semibold" style="color: var(--color-text);">{{ __('Show radio shouts') }}</span>
|
||||
<p class="text-sm" style="color: var(--color-text-muted);">{{ __('Show live shouts panel on the radio player') }}</p>
|
||||
</div>
|
||||
<input type="hidden" name="radio_shouts" value="0">
|
||||
<input type="checkbox" name="radio_shouts" value="1" {{ old('radio_shouts', $preferences['radio_shouts'] ?? true) ? 'checked' : '' }}
|
||||
class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
</label>
|
||||
<label class="flex items-center justify-between cursor-pointer p-3 rounded-lg" style="background-color: color-mix(in srgb, var(--color-text-muted) 5%, transparent); border: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);">
|
||||
<div>
|
||||
<span class="font-semibold text-sm" style="color: var(--color-text);">{{ __('Radio notifications') }}</span>
|
||||
<p class="text-xs" style="color: var(--color-text-muted);">{{ __('Show notifications when a new song plays') }}</p>
|
||||
</div>
|
||||
<input type="hidden" name="radio_notifications" value="0">
|
||||
<input type="checkbox" name="radio_notifications" value="1" {{ old('radio_notifications', $preferences['radio_notifications'] ?? true) ? 'checked' : '' }}
|
||||
class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label class="flex items-center justify-between cursor-pointer p-3 rounded" style="background-color: var(--color-surface);">
|
||||
<div>
|
||||
<span class="font-semibold" style="color: var(--color-text);">{{ __('Radio notifications') }}</span>
|
||||
<p class="text-sm" style="color: var(--color-text-muted);">{{ __('Show notifications when a new song plays') }}</p>
|
||||
</div>
|
||||
<input type="hidden" name="radio_notifications" value="0">
|
||||
<input type="checkbox" name="radio_notifications" value="1" {{ old('radio_notifications', $preferences['radio_notifications'] ?? true) ? 'checked' : '' }}
|
||||
class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<hr style="border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
|
||||
<hr style="border-color: var(--color-text-muted);">
|
||||
{{-- Social Settings --}}
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4" style="color: var(--color-text);">{{ __('Social Settings') }}</h3>
|
||||
<div class="space-y-4">
|
||||
<label class="flex items-center justify-between cursor-pointer p-3 rounded-lg" style="background-color: color-mix(in srgb, var(--color-text-muted) 5%, transparent); border: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);">
|
||||
<div>
|
||||
<span class="font-semibold text-sm" style="color: var(--color-text);">{{ __('Friend requests') }}</span>
|
||||
<p class="text-xs" style="color: var(--color-text-muted);">{{ __('Allow other users to send you friend requests') }}</p>
|
||||
</div>
|
||||
<input type="hidden" name="friend_requests" value="0">
|
||||
<input type="checkbox" name="friend_requests" value="1" {{ old('friend_requests', $preferences['friend_requests'] ?? true) ? 'checked' : '' }}
|
||||
class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
</label>
|
||||
|
||||
{{-- Social Settings --}}
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4" style="color: var(--color-text);">{{ __('Social Settings') }}</h3>
|
||||
<div class="space-y-4">
|
||||
<label class="flex items-center justify-between cursor-pointer p-3 rounded" style="background-color: var(--color-surface);">
|
||||
<div>
|
||||
<span class="font-semibold" style="color: var(--color-text);">{{ __('Friend requests') }}</span>
|
||||
<p class="text-sm" style="color: var(--color-text-muted);">{{ __('Allow other users to send you friend requests') }}</p>
|
||||
</div>
|
||||
<input type="hidden" name="friend_requests" value="0">
|
||||
<input type="checkbox" name="friend_requests" value="1" {{ old('friend_requests', $preferences['friend_requests'] ?? true) ? 'checked' : '' }}
|
||||
class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
</label>
|
||||
<label class="flex items-center justify-between cursor-pointer p-3 rounded-lg" style="background-color: color-mix(in srgb, var(--color-text-muted) 5%, transparent); border: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);">
|
||||
<div>
|
||||
<span class="font-semibold text-sm" style="color: var(--color-text);">{{ __('Room invites') }}</span>
|
||||
<p class="text-xs" style="color: var(--color-text-muted);">{{ __('Allow other users to invite you to rooms') }}</p>
|
||||
</div>
|
||||
<input type="hidden" name="room_invites" value="0">
|
||||
<input type="checkbox" name="room_invites" value="1" {{ old('room_invites', $preferences['room_invites'] ?? true) ? 'checked' : '' }}
|
||||
class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label class="flex items-center justify-between cursor-pointer p-3 rounded" style="background-color: var(--color-surface);">
|
||||
<div>
|
||||
<span class="font-semibold" style="color: var(--color-text);">{{ __('Room invites') }}</span>
|
||||
<p class="text-sm" style="color: var(--color-text-muted);">{{ __('Allow other users to invite you to rooms') }}</p>
|
||||
</div>
|
||||
<input type="hidden" name="room_invites" value="0">
|
||||
<input type="checkbox" name="room_invites" value="1" {{ old('room_invites', $preferences['room_invites'] ?? true) ? 'checked' : '' }}
|
||||
class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<hr style="border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
|
||||
<hr style="border-color: var(--color-text-muted);">
|
||||
{{-- Client Settings --}}
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4" style="color: var(--color-text);">{{ __('Client Settings') }}</h3>
|
||||
<div class="space-y-4">
|
||||
<label class="flex items-center justify-between cursor-pointer p-3 rounded-lg" style="background-color: color-mix(in srgb, var(--color-text-muted) 5%, transparent); border: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);">
|
||||
<div>
|
||||
<span class="font-semibold text-sm" style="color: var(--color-text);">{{ __('Open client in new window') }}</span>
|
||||
<p class="text-xs" style="color: var(--color-text-muted);">{{ __('When enabled, the game client will open in a new browser tab instead of navigating away from the site') }}</p>
|
||||
</div>
|
||||
<input type="hidden" name="client_open_mode" value="same">
|
||||
<input type="checkbox" name="client_open_mode" value="new_window" {{ old('client_open_mode', $preferences['client_open_mode'] ?? 'same') === 'new_window' ? 'checked' : '' }}
|
||||
class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
</label>
|
||||
|
||||
{{-- Client Settings --}}
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4" style="color: var(--color-text);">{{ __('Client Settings') }}</h3>
|
||||
<div class="space-y-4">
|
||||
<label class="flex items-center justify-between cursor-pointer p-3 rounded" style="background-color: var(--color-surface);">
|
||||
<div>
|
||||
<span class="font-semibold" style="color: var(--color-text);">{{ __('Open client in new window') }}</span>
|
||||
<p class="text-sm" style="color: var(--color-text-muted);">{{ __('When enabled, the game client will open in a new browser tab instead of navigating away from the site') }}</p>
|
||||
</div>
|
||||
<input type="hidden" name="client_open_mode" value="same">
|
||||
<input type="checkbox" name="client_open_mode" value="new_window" {{ old('client_open_mode', $preferences['client_open_mode'] ?? 'same') === 'new_window' ? 'checked' : '' }}
|
||||
class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
</label>
|
||||
<label class="flex items-center justify-between p-3 rounded-lg" style="background-color: color-mix(in srgb, var(--color-text-muted) 5%, transparent); border: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);">
|
||||
<div>
|
||||
<span class="font-semibold text-sm" style="color: var(--color-text);">{{ __('Client volume') }}</span>
|
||||
<p class="text-xs" style="color: var(--color-text-muted);">{{ __('Default volume for the game client') }}</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-sm" style="color: var(--color-text-muted);">0</span>
|
||||
<input type="range" name="client_volume" min="0" max="100" value="{{ old('client_volume', $preferences['client_volume'] ?? 50) }}"
|
||||
class="w-24 h-2 rounded-full cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
<span class="text-sm" style="color: var(--color-text-muted);">100</span>
|
||||
<span class="text-sm font-semibold min-w-[2rem] text-center" id="volume-display" style="color: var(--color-text);">{{ old('client_volume', $preferences['client_volume'] ?? 50) }}%</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label class="flex items-center justify-between p-3 rounded" style="background-color: var(--color-surface);">
|
||||
<div>
|
||||
<span class="font-semibold" style="color: var(--color-text);">{{ __('Client volume') }}</span>
|
||||
<p class="text-sm" style="color: var(--color-text-muted);">{{ __('Default volume for the game client') }}</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-sm" style="color: var(--color-text-muted);">0</span>
|
||||
<input type="range" name="client_volume" min="0" max="100" value="{{ old('client_volume', $preferences['client_volume'] ?? 50) }}"
|
||||
class="w-24 h-2 rounded-full cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
<span class="text-sm" style="color: var(--color-text-muted);">100</span>
|
||||
<span class="text-sm font-semibold min-w-[2rem] text-center" id="volume-display" style="color: var(--color-text);">{{ old('client_volume', $preferences['client_volume'] ?? 50) }}%</span>
|
||||
</div>
|
||||
</label>
|
||||
<hr style="border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{{-- Layout Settings --}}
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4" style="color: var(--color-text);">{{ __('Layout Settings') }}</h3>
|
||||
<div class="space-y-4">
|
||||
<label class="flex items-center justify-between cursor-pointer p-3 rounded-lg" style="background-color: color-mix(in srgb, var(--color-text-muted) 5%, transparent); border: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);">
|
||||
<div>
|
||||
<span class="font-semibold text-sm" style="color: var(--color-text);">{{ __('Compact mode') }}</span>
|
||||
<p class="text-xs" style="color: var(--color-text-muted);">{{ __('Use a more compact layout with tighter spacing') }}</p>
|
||||
</div>
|
||||
<input type="hidden" name="compact_mode" value="0">
|
||||
<input type="checkbox" name="compact_mode" value="1" {{ old('compact_mode', $preferences['compact_mode'] ?? false) ? 'checked' : '' }}
|
||||
class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
</label>
|
||||
|
||||
<hr style="border-color: var(--color-text-muted);">
|
||||
<label class="flex items-center justify-between p-3 rounded-lg" style="background-color: color-mix(in srgb, var(--color-text-muted) 5%, transparent); border: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);">
|
||||
<div>
|
||||
<span class="font-semibold text-sm" style="color: var(--color-text);">{{ __('Default page') }}</span>
|
||||
<p class="text-xs" style="color: var(--color-text-muted);">{{ __('Page to show after logging in') }}</p>
|
||||
</div>
|
||||
<select name="default_page"
|
||||
class="rounded-lg border px-3 py-2 text-sm focus:outline-none"
|
||||
style="background-color: var(--color-background); color: var(--color-text); border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
<option value="me" {{ old('default_page', $preferences['default_page'] ?? 'me') === 'me' ? 'selected' : '' }}>{{ __('Me page') }}</option>
|
||||
<option value="hotel" {{ old('default_page', $preferences['default_page'] ?? 'me') === 'hotel' ? 'selected' : '' }}>{{ __('Hotel') }}</option>
|
||||
<option value="community" {{ old('default_page', $preferences['default_page'] ?? 'me') === 'community' ? 'selected' : '' }}>{{ __('Community') }}</option>
|
||||
<option value="shop" {{ old('default_page', $preferences['default_page'] ?? 'me') === 'shop' ? 'selected' : '' }}>{{ __('Shop') }}</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Layout Settings --}}
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4" style="color: var(--color-text);">{{ __('Layout Settings') }}</h3>
|
||||
<div class="space-y-4">
|
||||
<label class="flex items-center justify-between cursor-pointer p-3 rounded" style="background-color: var(--color-surface);">
|
||||
<div>
|
||||
<span class="font-semibold" style="color: var(--color-text);">{{ __('Compact mode') }}</span>
|
||||
<p class="text-sm" style="color: var(--color-text-muted);">{{ __('Use a more compact layout with tighter spacing') }}</p>
|
||||
</div>
|
||||
<input type="hidden" name="compact_mode" value="0">
|
||||
<input type="checkbox" name="compact_mode" value="1" {{ old('compact_mode', $preferences['compact_mode'] ?? false) ? 'checked' : '' }}
|
||||
class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
</label>
|
||||
<hr style="border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
|
||||
<label class="flex items-center justify-between p-3 rounded" style="background-color: var(--color-surface);">
|
||||
<div>
|
||||
<span class="font-semibold" style="color: var(--color-text);">{{ __('Default page') }}</span>
|
||||
<p class="text-sm" style="color: var(--color-text-muted);">{{ __('Page to show after logging in') }}</p>
|
||||
</div>
|
||||
<select name="default_page"
|
||||
class="border-2 rounded-lg px-3 py-1.5 text-sm font-semibold cursor-pointer" style="background-color: var(--color-background); color: var(--color-text); border-color: var(--input-border-color, var(--color-text-muted));">
|
||||
<option value="me" {{ old('default_page', $preferences['default_page'] ?? 'me') === 'me' ? 'selected' : '' }}>{{ __('Me page') }}</option>
|
||||
<option value="hotel" {{ old('default_page', $preferences['default_page'] ?? 'me') === 'hotel' ? 'selected' : '' }}>{{ __('Hotel') }}</option>
|
||||
<option value="community" {{ old('default_page', $preferences['default_page'] ?? 'me') === 'community' ? 'selected' : '' }}>{{ __('Community') }}</option>
|
||||
<option value="shop" {{ old('default_page', $preferences['default_page'] ?? 'me') === 'shop' ? 'selected' : '' }}>{{ __('Shop') }}</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
{{-- Privacy Settings --}}
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4" style="color: var(--color-text);">{{ __('Privacy Settings') }}</h3>
|
||||
<div class="space-y-4">
|
||||
<label class="flex items-center justify-between cursor-pointer p-3 rounded-lg" style="background-color: color-mix(in srgb, var(--color-text-muted) 5%, transparent); border: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);">
|
||||
<div>
|
||||
<span class="font-semibold text-sm" style="color: var(--color-text);">{{ __('Hide online status') }}</span>
|
||||
<p class="text-xs" style="color: var(--color-text-muted);">{{ __('Hide your online status from other users on the site') }}</p>
|
||||
</div>
|
||||
<input type="hidden" name="hide_online" value="0">
|
||||
<input type="checkbox" name="hide_online" value="1" {{ old('hide_online', $preferences['hide_online'] ?? false) ? 'checked' : '' }}
|
||||
class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr style="border-color: var(--color-text-muted);">
|
||||
<hr style="border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
|
||||
{{-- Privacy Settings --}}
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4" style="color: var(--color-text);">{{ __('Privacy Settings') }}</h3>
|
||||
<div class="space-y-4">
|
||||
<label class="flex items-center justify-between cursor-pointer p-3 rounded" style="background-color: var(--color-surface);">
|
||||
<div>
|
||||
<span class="font-semibold" style="color: var(--color-text);">{{ __('Hide online status') }}</span>
|
||||
<p class="text-sm" style="color: var(--color-text-muted);">{{ __('Hide your online status from other users on the site') }}</p>
|
||||
</div>
|
||||
<input type="hidden" name="hide_online" value="0">
|
||||
<input type="checkbox" name="hide_online" value="1" {{ old('hide_online', $preferences['hide_online'] ?? false) ? 'checked' : '' }}
|
||||
class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
{{-- Notification Settings --}}
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4" style="color: var(--color-text);">{{ __('Notification Settings') }}</h3>
|
||||
<div class="space-y-4">
|
||||
<label class="flex items-center justify-between cursor-pointer p-3 rounded-lg" style="background-color: color-mix(in srgb, var(--color-text-muted) 5%, transparent); border: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);">
|
||||
<div>
|
||||
<span class="font-semibold text-sm" style="color: var(--color-text);">{{ __('Email notifications') }}</span>
|
||||
<p class="text-xs" style="color: var(--color-text-muted);">{{ __('Receive email notifications for important updates') }}</p>
|
||||
</div>
|
||||
<input type="hidden" name="email_notifications" value="0">
|
||||
<input type="checkbox" name="email_notifications" value="1" {{ old('email_notifications', $preferences['email_notifications'] ?? false) ? 'checked' : '' }}
|
||||
class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr style="border-color: var(--color-text-muted);">
|
||||
|
||||
{{-- Notification Settings --}}
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4" style="color: var(--color-text);">{{ __('Notification Settings') }}</h3>
|
||||
<div class="space-y-4">
|
||||
<label class="flex items-center justify-between cursor-pointer p-3 rounded" style="background-color: var(--color-surface);">
|
||||
<div>
|
||||
<span class="font-semibold" style="color: var(--color-text);">{{ __('Email notifications') }}</span>
|
||||
<p class="text-sm" style="color: var(--color-text-muted);">{{ __('Receive email notifications for important updates') }}</p>
|
||||
</div>
|
||||
<input type="hidden" name="email_notifications" value="0">
|
||||
<input type="checkbox" name="email_notifications" value="1" {{ old('email_notifications', $preferences['email_notifications'] ?? false) ? 'checked' : '' }}
|
||||
class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex w-full justify-start md:justify-end">
|
||||
<x-form.primary-button classes="lg:w-1/4">
|
||||
{{ __('Save preferences') }}
|
||||
</x-form.primary-button>
|
||||
</div>
|
||||
</form>
|
||||
</x-content.content-card>
|
||||
<div class="flex w-full justify-start md:justify-end">
|
||||
<button type="submit" class="rounded-lg px-4 py-2 font-semibold transition-all duration-200 hover:opacity-90" style="background-color: var(--color-primary); color: var(--button-text-color);">
|
||||
{{ __('Save preferences') }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@push('javascript')
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var volumeInput = document.querySelector('input[name="client_volume"]');
|
||||
var volumeDisplay = document.getElementById('volume-display');
|
||||
if (volumeInput && volumeDisplay) {
|
||||
volumeInput.addEventListener('input', function() {
|
||||
volumeDisplay.textContent = this.value + '%';
|
||||
});
|
||||
}
|
||||
});
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var volumeInput = document.querySelector('input[name="client_volume"]');
|
||||
var volumeDisplay = document.getElementById('volume-display');
|
||||
if (volumeInput && volumeDisplay) {
|
||||
volumeInput.addEventListener('input', function() {
|
||||
volumeDisplay.textContent = this.value + '%';
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
</x-app-layout>
|
||||
|
||||
@@ -6,67 +6,68 @@
|
||||
</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>
|
||||
{{ __('Session logs') }}
|
||||
</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="flex items-center gap-3 p-3" style="background: linear-gradient(140deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 80%, black) 100%);">
|
||||
<div>
|
||||
<h1 class="text-white font-bold text-lg">{{ __('Session logs') }}</h1>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">{{ __('Keep an eye on all your active sessions') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-slot:under-title>
|
||||
{{ __('Keep an eye on all your active sessions') }}
|
||||
</x-slot:under-title>
|
||||
<div class="p-4">
|
||||
<div class="overflow-hidden overflow-x-auto rounded-lg" style="border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
<table class="min-w-full text-sm divide-y" style="border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
<thead style="background-color: color-mix(in srgb, var(--color-text-muted) 5%, transparent);">
|
||||
<tr>
|
||||
<th class="whitespace-nowrap px-4 py-3 text-left font-medium" style="color: var(--color-text);">
|
||||
{{ __('IP') }}
|
||||
</th>
|
||||
<th class="whitespace-nowrap px-4 py-3 text-left font-medium" style="color: var(--color-text);">
|
||||
{{ __('IP Current Device') }}
|
||||
</th>
|
||||
<th class="whitespace-nowrap px-4 py-3 text-left font-medium" style="color: var(--color-text);">
|
||||
{{ __('Is Desktop') }}
|
||||
</th>
|
||||
<th class="whitespace-nowrap px-4 py-3 text-left font-medium" style="color: var(--color-text);">
|
||||
{{ __('Platform') }}
|
||||
</th>
|
||||
<th class="whitespace-nowrap px-4 py-3 text-left font-medium" style="color: var(--color-text);">
|
||||
{{ __('Browser') }}
|
||||
</th>
|
||||
<th class="whitespace-nowrap px-4 py-3 text-left font-medium" style="color: var(--color-text);">
|
||||
{{ __('Last Activity') }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<div class="overflow-hidden overflow-x-auto rounded border border-[var(--color-text-muted)]">
|
||||
<table class="min-w-full text-sm divide-y divide-[var(--color-text-muted)]">
|
||||
<thead class="bg-[var(--color-surface)]">
|
||||
<tr>
|
||||
<th class="whitespace-nowrap px-4 py-2 text-left font-medium text-[var(--color-text)]">
|
||||
{{ __('IP') }}
|
||||
</th>
|
||||
<th class="whitespace-nowrap px-4 py-2 text-left font-medium text-[var(--color-text)]">
|
||||
{{ __('IP Current Device') }}
|
||||
</th>
|
||||
<th class="whitespace-nowrap px-4 py-2 text-left font-medium text-[var(--color-text)]">
|
||||
{{ __('Is Desktop') }}
|
||||
</th>
|
||||
<th class="whitespace-nowrap px-4 py-2 text-left font-medium text-[var(--color-text)]">
|
||||
{{ __('Platform') }}
|
||||
</th>
|
||||
<th class="whitespace-nowrap px-4 py-2 text-left font-medium text-[var(--color-text)]">
|
||||
{{ __('Browser') }}
|
||||
</th>
|
||||
<th class="whitespace-nowrap px-4 py-2 text-left font-medium text-[var(--color-text)]">
|
||||
{{ __('Last Activity') }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody class="divide-y divide-[var(--color-text-muted)]">
|
||||
@forelse ($logs as $log)
|
||||
<tr>
|
||||
<td class="whitespace-nowrap px-4 py-2 font-medium text-[var(--color-text)]">
|
||||
{{ $log->ip_address }}
|
||||
</td>
|
||||
<td class="px-4 py-2 text-[var(--color-text-muted)]">
|
||||
{{ $log->is_current_device ? 'true' : 'false' }}</td>
|
||||
<td class="px-4 py-2 text-[var(--color-text-muted)]">
|
||||
{{ $log->agent['is_desktop'] ? 'true' : 'false' }}</td>
|
||||
<td class="px-4 py-2 text-[var(--color-text-muted)]">{{ $log->agent['platform'] }}
|
||||
</td>
|
||||
<td class="px-4 py-2 text-[var(--color-text-muted)]">{{ $log->agent['browser'] }}</td>
|
||||
<td class="whitespace-nowrap px-4 py-2 text-[var(--color-text-muted)]">
|
||||
{{ $log->last_active }}</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td class="whitespace-nowrap px-4 py-2 text-center text-[var(--color-text-muted)]"
|
||||
colspan="3">
|
||||
{{ __('No session logs found') }}
|
||||
</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</x-content.content-card>
|
||||
<tbody class="divide-y" style="border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
@forelse ($logs as $log)
|
||||
<tr>
|
||||
<td class="whitespace-nowrap px-4 py-3 font-medium" style="color: var(--color-text);">
|
||||
{{ $log->ip_address }}
|
||||
</td>
|
||||
<td class="px-4 py-3" style="color: var(--color-text-muted);">
|
||||
{{ $log->is_current_device ? 'true' : 'false' }}</td>
|
||||
<td class="px-4 py-3" style="color: var(--color-text-muted);">
|
||||
{{ $log->agent['is_desktop'] ? 'true' : 'false' }}</td>
|
||||
<td class="px-4 py-3" style="color: var(--color-text-muted);">{{ $log->agent['platform'] }}
|
||||
</td>
|
||||
<td class="px-4 py-3" style="color: var(--color-text-muted);">{{ $log->agent['browser'] }}</td>
|
||||
<td class="whitespace-nowrap px-4 py-3" style="color: var(--color-text-muted);">
|
||||
{{ $log->last_active }}</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td class="whitespace-nowrap px-4 py-3 text-center" style="color: var(--color-text-muted);"
|
||||
colspan="6">
|
||||
{{ __('No session logs found') }}
|
||||
</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
||||
@@ -6,102 +6,105 @@
|
||||
</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>
|
||||
{{ __('Two factor authentication') }}
|
||||
</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="flex items-center gap-3 p-3" style="background: linear-gradient(140deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 80%, black) 100%);">
|
||||
<div>
|
||||
<h1 class="text-white font-bold text-lg">{{ __('Two factor authentication') }}</h1>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">{{ __('Add an extra layer of security to your account by enabling two-factor authentication') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-slot:under-title>
|
||||
{{ __('Add an extra layer of security to your account by enabling two-factor authentication') }}
|
||||
</x-slot:under-title>
|
||||
<div class="p-4">
|
||||
@if (auth()->user()->two_factor_confirmed)
|
||||
<form action="{{ route('user.two-factor.disable') }}" method="post">
|
||||
@csrf
|
||||
@method('delete')
|
||||
|
||||
<!-- 2FA enabled, we display the QR code : -->
|
||||
@if (auth()->user()->two_factor_confirmed)
|
||||
<form action="{{ route('user.two-factor.disable') }}" method="post">
|
||||
@csrf
|
||||
@method('delete')
|
||||
<button type="submit" class="rounded-lg px-4 py-2 font-semibold transition-all duration-200 hover:opacity-90" style="background-color: color-mix(in srgb, var(--color-text-muted) 20%, transparent); color: var(--button-danger-color, #ef4444);">
|
||||
{{ __('Disable 2FA') }}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<x-form.danger-button>
|
||||
{{ __('Disable 2FA') }}
|
||||
</x-form.danger-button>
|
||||
</form>
|
||||
@elseif(auth()->user()->two_factor_secret)
|
||||
<div class="space-y-4">
|
||||
<p class="text-sm" style="color: var(--color-text);">{{ __('Validate your two-factor enabling by scanning the following QR-code and enter your auto-generated 2-factor code from your phone.') }}
|
||||
</p>
|
||||
|
||||
{{-- 2FA enabled but not yet confirmed, we show the QRcode and ask for confirmation --}}
|
||||
@elseif(auth()->user()->two_factor_secret)
|
||||
<p>{{ __('Validate your two-factor enabling by scanning the following QR-code and enter your auto-generated 2-factor code from your phone.') }}
|
||||
</p>
|
||||
<div class="flex flex-col items-center md:flex-row md:items-start md:justify-center">
|
||||
<div class="flex gap-x-8 rounded-lg px-4 py-3" style="background-color: color-mix(in srgb, var(--color-text-muted) 5%, transparent); border: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);">
|
||||
<span class="flex items-center">
|
||||
{!! auth()->user()->twoFactorQrCodeSvg() !!}
|
||||
</span>
|
||||
|
||||
<div class="mt-4 flex flex-col items-center md:flex-row md:items-start md:justify-center">
|
||||
<div class="flex gap-x-8 rounded bg-[var(--color-surface)] px-4 py-2">
|
||||
<span class="flex items-center">
|
||||
{!! auth()->user()->twoFactorQrCodeSvg() !!}
|
||||
</span>
|
||||
<div>
|
||||
<strong class="text-sm" style="color: var(--color-text);">
|
||||
{{ __('Recovery codes:') }}
|
||||
</strong>
|
||||
|
||||
<div>
|
||||
<strong>
|
||||
{{ __('Recovery codes:') }}
|
||||
</strong>
|
||||
<ul class="mt-2 space-y-1">
|
||||
@foreach (auth()->user()->recoveryCodes() as $code)
|
||||
<li class="text-sm" style="color: var(--color-text-muted);">{{ $code }}</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul>
|
||||
@foreach (auth()->user()->recoveryCodes() as $code)
|
||||
<li>{{ $code }}</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-xs italic" style="color: var(--color-text-muted);">
|
||||
{{ __('Please save your recovery codes somewhere safe! If you lose access to your 2FA codes, those recovery codes will be needed to regain access your account.') }}
|
||||
</div>
|
||||
|
||||
<div class="mt-2 flex justify-center text-xs italic text-[var(--color-text-muted)]">
|
||||
<div class="w-full lg:w-[480px]">
|
||||
{{ __('Please save your recovery codes somewhere safe! If you lose access to your 2FA codes, those recovery codes will be needed to regain access your account.') }}
|
||||
</div>
|
||||
</div>
|
||||
<form action="{{ route('two-factor.verify') }}" method="POST" class="flex flex-col gap-y-4">
|
||||
@csrf
|
||||
|
||||
<form action="{{ route('two-factor.verify') }}" method="POST" class="mt-8">
|
||||
@csrf
|
||||
<div class="flex flex-col gap-y-1">
|
||||
<label class="block text-sm font-semibold" style="color: var(--color-text);" for="code">
|
||||
{{ __('Code') }}
|
||||
</label>
|
||||
<p class="text-xs mb-1" style="color: var(--color-text-muted);">
|
||||
{{ __('Please scan the QR-code above with your phone to retrieve your two-factor authentication code.') }}
|
||||
</p>
|
||||
<input name="code" 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>
|
||||
|
||||
<x-form.label for="code">
|
||||
{{ __('Code') }}
|
||||
@if (setting('google_recaptcha_enabled'))
|
||||
<div class="g-recaptcha" data-sitekey="{{ config('habbo.site.recaptcha_site_key') }}"></div>
|
||||
@endif
|
||||
|
||||
<x-slot:info>
|
||||
{{ __('Please scan the QR-code above with your phone to retrieve your two-factor authentication code.') }}
|
||||
</x-slot:info>
|
||||
</x-form.label>
|
||||
@if (setting('cloudflare_turnstile_enabled'))
|
||||
<x-turnstile />
|
||||
@endif
|
||||
|
||||
<x-form.input classes="mb-3" name="code" placeholder="{{ __('Code') }}" />
|
||||
<div class="flex w-full justify-start md:justify-end">
|
||||
<button type="submit" class="rounded-lg px-4 py-2 font-semibold transition-all duration-200 hover:opacity-90" style="background-color: var(--color-primary); color: var(--button-text-color);">
|
||||
{{ __('Verify 2FA') }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@else
|
||||
<div class="flex flex-col">
|
||||
<div class="flex w-full flex-col gap-y-3 text-sm" style="color: var(--color-text);">
|
||||
<p>
|
||||
{{ __('Here at :hotel we take security very serious and therefore we offer you as a user a way to secure your beloved account even further, by allowing you to enable Googles 2-factor authentication!', ['hotel' => setting('hotel_name')]) }}
|
||||
</p>
|
||||
|
||||
@if (setting('google_recaptcha_enabled'))
|
||||
<div class="g-recaptcha" data-sitekey="{{ config('habbo.site.recaptcha_site_key') }}"></div>
|
||||
@endif
|
||||
<p>
|
||||
{{ __('2-factor authentication adds an extra layer of security to your account, making it physical impossible to access it without having access to your mobile phone as only your phone will contain the 2-factor authentication code which will be re-generated every 30 seconds automatically') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@if (setting('cloudflare_turnstile_enabled'))
|
||||
<x-turnstile />
|
||||
@endif
|
||||
|
||||
<x-form.secondary-button classes="mt-4">
|
||||
{{ __('Verify 2FA') }}
|
||||
</x-form.secondary-button>
|
||||
</form>
|
||||
@else
|
||||
<div class="flex flex-col items-end">
|
||||
<div class="flex w-full flex-col gap-y-3 text-[var(--color-text)]">
|
||||
<p>
|
||||
{{ __('Here at :hotel we take security very serious and therefore we offer you as a user a way to secure your beloved account even further, by allowing you to enable Googles 2-factor authentication!', ['hotel' => setting('hotel_name')]) }}
|
||||
</p>
|
||||
|
||||
<p>
|
||||
{{ __('2-factor authentication adds an extra layer of security to your account, making it physical impossible to access it without having access to your mobile phone as only your phone will contain the 2-factor authentication code which will be re-generated every 30 seconds automatically') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form action="{{ route('user.two-factor.enable') }}" method="post" class="mt-8">
|
||||
@csrf
|
||||
<x-form.secondary-button>
|
||||
{{ __('Activate 2FA') }}
|
||||
</x-form.secondary-button>
|
||||
</form>
|
||||
</div>
|
||||
@endif
|
||||
</x-content.content-card>
|
||||
<div class="flex w-full justify-start md:justify-end mt-6">
|
||||
<form action="{{ route('user.two-factor.enable') }}" method="post">
|
||||
@csrf
|
||||
<button type="submit" class="rounded-lg px-4 py-2 font-semibold transition-all duration-200 hover:opacity-90" style="background-color: var(--color-primary); color: var(--button-text-color);">
|
||||
{{ __('Activate 2FA') }}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
||||
@@ -3,46 +3,52 @@
|
||||
|
||||
<div class="col-span-12">
|
||||
<div class="flex flex-col gap-y-4">
|
||||
<a href="{{ route('values.index') }}" class="text-[var(--color-text)] underline flex gap-x-1 items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15m0 0l6.75 6.75M4.5 12l6.75-6.75" />
|
||||
</svg>
|
||||
<a href="{{ route('values.index') }}" class="flex gap-x-1 items-center" style="color: var(--color-text); text-decoration: underline;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15m0 0l6.75 6.75M4.5 12l6.75-6.75" />
|
||||
</svg>
|
||||
{{ __('Go back to values') }}
|
||||
</a>
|
||||
|
||||
{{ __('Go back to values') }}
|
||||
</a>
|
||||
<x-content.content-card icon="dragon.png">
|
||||
<x-slot:title>
|
||||
{{ $value->name }}
|
||||
</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" 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 py-3 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);">
|
||||
<img src="{{ asset('/assets/images/icons/dragon.png') }}" alt="" class="w-5 h-5">
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-white font-bold text-sm">{{ $value->name }}</p>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">{{ __('Here is a list of all the owned :value`s', ['value' => $value->name]) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-slot:under-title>
|
||||
{{ __('Here is a list of all the owned :value`s', ['value' => $value->name]) }}
|
||||
</x-slot:under-title>
|
||||
<div class="p-4" style="color: var(--color-text)">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
|
||||
@foreach($items as $item)
|
||||
<div class="px-3 h-[100px] rounded flex gap-4 items-center overflow-hidden" style="background-color: var(--color-background);">
|
||||
<div class="w-12 h-12 overflow-hidden rounded-full flex items-center justify-center" style="background-color: var(--color-surface);">
|
||||
<img src="{{ sprintf('%s/%s', setting('avatar_imager'), $item['user']->look) }}&headonly=1" alt="">
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
|
||||
@foreach($items as $item)
|
||||
<div class="px-3 h-[100px] rounded bg-[var(--color-background)] flex gap-4 items-center overflow-hidden">
|
||||
<div class="w-12 h-12 overflow-hidden rounded-full flex items-center justify-center bg-[var(--color-surface)]">
|
||||
<img src="{{ sprintf('%s/%s', setting('avatar_imager'), $item['user']->look) }}&headonly=1" alt="">
|
||||
</div>
|
||||
<div class="flex flex-col gap-y-2">
|
||||
<p style="color: var(--color-text)">{{ $item['user']->username }}</p>
|
||||
|
||||
<div class="flex flex-col gap-y-2">
|
||||
<p class="text-[var(--color-text)]">{{ $item['user']->username }}</p>
|
||||
<div class="w-full rounded h-[35px] flex items-center" style="background-color: var(--color-primary); opacity: 0.8">
|
||||
<div class="rounded-l px-2 h-full flex items-center justify-center" style="background-color: var(--color-primary)">
|
||||
<img class="h-[18px] w-[28px]" src="{{ asset('assets/images/icons/amount.png') }}" alt="">
|
||||
</div>
|
||||
|
||||
<div class="w-full rounded h-[35px] flex items-center" style="background-color: var(--color-primary); opacity: 0.8">
|
||||
<div class="rounded-l px-2 h-full flex items-center justify-center" style="background-color: var(--color-primary)">
|
||||
<img class="h-[18px] w-[28px]" src="{{ asset('assets/images/icons/amount.png') }}" alt="">
|
||||
</div>
|
||||
|
||||
<p class="w-full text-center truncate text-sm">
|
||||
{{ $item['item_count'] ?? 0 }} {{ __('owned') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</x-content.content-card>
|
||||
<p class="w-full text-center truncate text-sm" style="color: var(--button-text-color);">
|
||||
{{ $item['item_count'] ?? 0 }} {{ __('owned') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
||||
Reference in New Issue
Block a user