85 lines
2.7 KiB
Plaintext
85 lines
2.7 KiB
Plaintext
package page
|
|
|
|
import "git.haelnorr.com/h/oslstats/internal/view/layout"
|
|
|
|
// Page content for the test notification page
|
|
templ Test() {
|
|
@layout.Global("Notification Test") {
|
|
<div class="flex items-center justify-center min-h-[calc(100vh-200px)]">
|
|
<div class="w-full max-w-md px-4">
|
|
<!-- Title -->
|
|
<h1 class="text-4xl font-bold text-center text-text mb-8">
|
|
Notification Test
|
|
</h1>
|
|
<!-- Form Card -->
|
|
<div class="bg-surface0 rounded-lg shadow-lg p-6 border border-overlay0">
|
|
<form hx-post="/notification-tester" hx-swap="none" class="flex flex-col gap-4">
|
|
<!-- Notification Type -->
|
|
<div class="flex flex-col gap-2">
|
|
<label for="type" class="text-sm font-semibold text-subtext1">
|
|
Notification Type
|
|
</label>
|
|
<select
|
|
name="type"
|
|
id="type"
|
|
class="bg-base text-text border border-overlay0 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-mauve"
|
|
>
|
|
<option value="success">Success Toast</option>
|
|
<option value="info">Info Toast</option>
|
|
<option value="warn">Warning Toast</option>
|
|
<option value="error">Error Modal</option>
|
|
</select>
|
|
</div>
|
|
<!-- Target Input -->
|
|
<div class="flex flex-col gap-2">
|
|
<label for="target" class="text-sm font-semibold text-subtext1">
|
|
Target
|
|
</label>
|
|
<input
|
|
type="text"
|
|
name="target"
|
|
id="target"
|
|
placeholder="Enter target ID"
|
|
class="bg-base text-text border border-overlay0 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-mauve"
|
|
/>
|
|
</div>
|
|
<!-- Title Input -->
|
|
<div class="flex flex-col gap-2">
|
|
<label for="title" class="text-sm font-semibold text-subtext1">
|
|
Title
|
|
</label>
|
|
<input
|
|
type="text"
|
|
name="title"
|
|
id="title"
|
|
placeholder="Enter notification title"
|
|
class="bg-base text-text border border-overlay0 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-mauve"
|
|
/>
|
|
</div>
|
|
<!-- Message Input -->
|
|
<div class="flex flex-col gap-2">
|
|
<label for="message" class="text-sm font-semibold text-subtext1">
|
|
Message
|
|
</label>
|
|
<input
|
|
type="text"
|
|
name="message"
|
|
id="message"
|
|
placeholder="Enter notification message"
|
|
class="bg-base text-text border border-overlay0 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-mauve"
|
|
/>
|
|
</div>
|
|
<!-- Submit Button -->
|
|
<button
|
|
type="submit"
|
|
class="mt-2 bg-mauve text-crust font-semibold px-6 py-3 rounded-lg hover:bg-mauve/75 transition hover:cursor-pointer"
|
|
>
|
|
Send Notification
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
}
|