remco/Atomcms-edit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
c53a5a8a2c6200e3aaf72d9c00ddf7077ec3bed3
Atomcms-edit/resources/themes/atom/views/community/radio/apply.blade.php
T
root c53a5a8a2c 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
2026-06-27 17:01:02 +02:00

279 lines
12 KiB
PHP
Executable File
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<x-app-layout>
@push('title', 'Word DJ')
<div class="col-span-12 lg:col-span-9 lg:w-[96%]">
<div class="flex flex-col gap-y-4">
<div class="rounded-lg overflow-hidden" style="background-color: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
<div class="relative w-full" 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>
<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
@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 ($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 ($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>
<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>
<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 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>
<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 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 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 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 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 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 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 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>
</div>
</div>
<div class="col-span-12 lg:col-span-3 lg:w-[110%] space-y-4 lg:-ml-[32px]">
<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>
<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="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>
<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>
<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>
</div>
</x-app-layout>
Reference in New Issue View Git Blame Copy Permalink