You've already forked Atomcms-edit
Complete Hubbly theme conversion: all pages rewritten with CSS variable theming
- Converted all views from Dusk components (x-content.content-card, x-form.*) to inline Hubbly style - All pages use consistent card pattern: rounded-lg, gradient headers, color-mix borders - Added Hubbly-style homepage with 2-column layout, login card, swiper news carousel - Rewrote navigation with Alpine.js dropdowns, CSS variable colors, Hubbly assets - Updated profile page with Hubbly cards, fixed data bugs (friend/guild relationships) - Rewrote register page to match Hubbly layout: banner header, avatar preview with Frank GIF, 2-column form, avatar carousel selector, border-4 inputs - Rewrote login, settings, help center, radio, applications, utility pages - All colors use CSS variables controlled by Filament theme editor - Added Hubbly assets: banner, Frank GIF, navigation icons, online badge - Removed all dependencies on x-content.* and x-form.* components
This commit is contained in:
root
@@ -1,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>
|
||||
|
||||
Reference in New Issue
Block a user