erman/scan-wave
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Styling of creator progress

Browse Source
This commit is contained in:
Roman Krček
2025-06-24 12:45:05 +02:00
parent 0fdf77a8c3
commit a42d102c4d
6 changed files with 164 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/routes/private/creator/steps/StepCraftEmail.svelte
View File

@@ -1 +1,26 @@
emaillk
<script lang="ts">
export let subject = '';
export let body = '';
</script>
<form class="flex flex-col space-y-4 bg-white p-8 rounded border border-gray-300 w-full shadow-none">
<h2 class="text-2xl font-semibold text-center mb-4">Craft Email</h2>
<label class="flex flex-col text-gray-700">
Subject
<input
type="text"
bind:value={subject}
class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200"
required
/>
</label>
<label class="flex flex-col text-gray-700">
Body
<textarea
bind:value={body}
class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200 resize-none"
rows="6"
required
></textarea>
</label>
</form>

51
src/routes/private/creator/steps/StepCreateEvent.svelte
View File

@@ -5,13 +5,50 @@
</script>
<p class="bg-grey-200">{JSON.stringify(events)}</p>
<form method="POST" action="?/create" use:enhance>
<input type="text" name="name" />
<input type="date" name="date" />
<textarea name="description"></textarea>
<button type="submit">Submit</button>
<form method="POST" action="?/create" use:enhance class="flex flex-col space-y-4 bg-white p-8 rounded border border-gray-300 w-full shadow-none">
<h2 class="text-2xl font-semibold text-center mb-4">Create Event</h2>
<label class="flex flex-col text-gray-700">
Name
<input
type="text"
name="name"
class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200"
required
/>
</label>
<label class="flex flex-col text-gray-700">
Date
<input
type="date"
name="date"
class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200"
required
/>
</label>
<label class="flex flex-col text-gray-700">
Description
<textarea
name="description"
class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200 resize-none"
rows="3"
required
></textarea>
</label>
<button
type="submit"
class="w-full py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition"
>
Submit
</button>
</form>
<p class="bg-grey-200">{JSON.stringify(new_event)}</p>
{#if Object.keys(new_event).length > 0}
<div class="rounded border-l-4 border-green-500 bg-green-100 p-4 text-green-700 mt-4">
<ol>
<li><strong>{new_event.name}</strong></li>
<li>{new_event.date}</li>
<li>{new_event.description}</li>
</ol>
</div>
{/if}

36
src/routes/private/creator/steps/StepOverview.svelte
View File

@@ -1,11 +1,35 @@
<script lang="ts">
let { new_event, participants } = $props();
let { new_event, participants, subject, body } = $props();
</script>
<p>New event:</p>
{JSON.stringify(new_event)}
<!-- New Event Overview -->
<div class="bg-white border border-gray-300 rounded p-6 mb-6">
<h2 class="text-xl font-bold mb-2">Event Overview</h2>
<ul class="space-y-1">
<li><span class="font-semibold">Name:</span> {new_event.name}</li>
<li><span class="font-semibold">Date:</span> {new_event.date}</li>
<li><span class="font-semibold">Description:</span> {new_event.description}</li>
</ul>
</div>
<!-- Email Overview -->
<div class="bg-white border border-gray-300 rounded p-6 mb-6">
<h2 class="text-xl font-bold mb-2">Email Preview</h2>
<div class="mb-2"><span class="font-semibold">Subject:</span> {subject}</div>
<div class="whitespace-pre-line border rounded p-2 bg-gray-50 text-gray-700"><span class="font-semibold">Body:</span>
<div class="mt-1">{body}</div>
</div>
</div>
<br />
<p>Participants</p>
{JSON.stringify(participants)}
<!-- Participants Overview -->
<div class="bg-white border border-gray-300 rounded p-6">
<h2 class="text-xl font-bold mb-2">Participants ({participants.length})</h2>
<ul class="space-y-1">
{#each participants as p}
<li class="flex items-center gap-2 border-b last:border-b-0 pb-1">
<span class="font-semibold">{p.name} {p.surname}</span>
<span class="font-mono text-xs text-gray-600">{p.email}</span>
</li>
{/each}
</ul>
</div>

52
src/routes/private/creator/steps/StepUploadFiles.svelte
View File

@@ -3,32 +3,44 @@
let { participants = [] } = $props();
function removeParticipant(index: number) {
participants = participants.slice(0, index).concat(participants.slice(index + 1));
}
</script>
<form method="POST" action="?/participants" use:enhance enctype="multipart/form-data">
<input type="file" name="participants" id="participants" accept=".csv" required />
<button type="submit"> Submit </button>
<form method="POST" action="?/participants" use:enhance enctype="multipart/form-data" class="flex flex-col space-y-4 bg-white p-8 rounded border border-gray-300 w-full shadow-none">
<h2 class="text-2xl font-semibold text-center mb-4">Upload Participants</h2>
<label class="flex flex-col text-gray-700">
CSV File
<input
type="file"
name="participants"
id="participants"
accept=".csv"
class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200"
required
/>
</label>
<button
type="submit"
class="w-full py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition"
>
Submit
</button>
</form>
{JSON.stringify(participants)}
{#if participants.length === 0}
<p class="text-gray-500">No participants added yet.</p>
<p class="text-gray-500 mt-4">No participants added yet.</p>
{/if}
{#if participants.length > 0}
<ul class="mt-4 space-y-2">
{#each participants as p, i}
<li class="flex items-center gap-2 border-b pb-1">
<span>{p.name} {p.surname} ({p.email})</span>
<button class="ml-auto text-red-600 hover:underline" type="button" onclick={() => removeParticipant(i)}>
Remove
</button>
</li>
{/each}
</ul>
<div class="rounded border-l-4 border-green-500 bg-green-50 p-4 text-green-700 mt-4">
<ul class="space-y-2">
{#each participants as p, i}
<li class="flex items-center justify-between border-b pb-1">
<div>
<div class="font-semibold">{p.name} {p.surname}</div>
<div class="text-xs font-mono text-gray-600">{p.email}</div>
</div>
</li>
{/each}
</ul>
</div>
{/if}