You've already forked Atomcms-edit
root
77 lines
2.4 KiB
PHP
Executable File
77 lines
2.4 KiB
PHP
Executable File
<x-app-layout>
|
|
@push('title', 'Stuur een Shout')
|
|
|
|
<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>
|
|
|
|
<x-slot:under-title>
|
|
Stuur een bericht naar de DJ!
|
|
</x-slot:under-title>
|
|
|
|
<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 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>
|
|
</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>
|
|
|
|
<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>
|
|
</x-content.content-card>
|
|
</div>
|
|
</x-app-layout>
|