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
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user