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

Home styling

Browse Source
This commit is contained in:
Roman Krček
2025-07-14 21:39:49 +02:00
parent 5d957b18ee
commit ffbd3c7cda
1 changed files with 65 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
src/routes/private/home/+page.svelte
View File

@@ -2,53 +2,75 @@
let { data } = $props(); let { data } = $props();
</script> </script>
<h1 class="mt-2 mb-4 text-center text-2xl font-bold">User Profile</h1> <div class="p-4 sm:p-6">
<h1 class="mb-6 text-2xl font-bold text-gray-800">User Dashboard</h1>
<div class="mb-4 rounded border border-gray-300 bg-white p-6"> <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
<div class="flex flex-col gap-2"> <!-- Left Column: User Profile -->
<div class="rounded-lg overflow-hidden border border-gray-200"> <div class="lg:col-span-1">
<div class="bg-gray-50 p-4 flex items-center gap-4 border-b border-gray-200"> <div class="flex h-full flex-col rounded-lg border border-gray-300 bg-white p-6">
<div <div class="flex flex-grow flex-col items-center text-center">
class="flex h-14 w-14 items-center justify-center rounded-full bg-gray-200 text-xl font-bold text-gray-600 flex-shrink-0" <div
> class="mb-4 flex h-24 w-24 items-center justify-center rounded-full bg-gray-200 text-4xl font-bold text-gray-600"
{data.user?.user_metadata.display_name?.[0] ?? 'U'} >
{data.profile?.display_name?.[0]?.toUpperCase() ?? 'U'}
</div>
<h2 class="text-xl font-semibold text-gray-900">{data.profile?.display_name}</h2>
<p class="text-sm text-gray-500">{data.user?.email}</p>
</div> </div>
<div class="flex flex-col"> <div class="mt-6 text-center">
<span class="text-lg font-semibold text-gray-800">{data.profile?.display_name}</span> <a
<div class="text-sm text-gray-500">{data.user?.email}</div> href="/auth/signout"
class="text-sm text-red-500 transition hover:text-red-700 hover:underline"
>Sign Out</a
>
</div> </div>
</div> </div>
<table class="min-w-full">
<tbody class="divide-y divide-gray-200 bg-white">
<tr>
<td class="whitespace-nowrap px-4 py-3 font-medium text-gray-700 w-1/3">Section</td>
<td class="whitespace-nowrap px-4 py-3 text-gray-900">{data.profile?.section?.name ?? 'N/A'}</td>
</tr>
<tr>
<td class="whitespace-nowrap px-4 py-3 font-medium text-gray-700 w-1/3">Position</td>
<td class="whitespace-nowrap px-4 py-3 text-gray-900">{data.profile?.section_position ?? 'N/A'}</td>
</tr>
</tbody>
</table>
</div> </div>
<h2 class="mt-4 mb-2 text-lg">User guide</h2>
<p class="text-sm leading-relaxed text-gray-700"> <!-- Right Column: Information -->
To scan a QR code, head over to Scanner in the top right corner. Click on Start scanning and <div class="space-y-6 lg:col-span-2">
allow camera permissions. If you close and open your browser and your camera is stuck, simply <!-- Role Information -->
refresh the page or click Stop scanning and then Start scanning again. When you scan a QR <div class="rounded-lg border border-gray-300 bg-white p-6">
code, a request is sent to the server to get the user's personal information and to mark their <h2 class="mb-4 text-lg font-semibold text-gray-900">Your Role</h2>
tickets as scanned. <dl class="grid grid-cols-1 gap-x-4 gap-y-4 sm:grid-cols-2">
</p> <div class="sm:col-span-1">
{#if data.profile?.section_position === 'events_manager'} <dt class="text-sm font-medium text-gray-500">Section</dt>
<h2 class="mt-4 mb-2 text-lg">Events manager guide</h2> <dd class="mt-1 text-sm font-semibold text-gray-900">
<p class="text-sm leading-relaxed text-gray-700">You can view events</p> {data.profile?.section?.name ?? 'N/A'}
{/if} </dd>
</div>
<div class="sm:col-span-1">
<dt class="text-sm font-medium text-gray-500">Position</dt>
<dd class="mt-1 text-sm font-semibold text-gray-900">
{data.profile?.section_position ?? 'N/A'}
</dd>
</div>
</dl>
</div>
<!-- User Guide -->
<div class="rounded-lg border border-gray-300 bg-white p-6">
<h2 class="mb-2 text-lg font-semibold text-gray-900">User Guide</h2>
<p class="text-sm leading-relaxed text-gray-700">
To scan a QR code, head over to <strong>Scanner</strong> in the top right corner. Click
on "Start Scanning" and allow camera permissions. If your camera gets stuck, simply
refresh the page or click "Stop Scanning" and then "Start Scanning" again. When you scan
a QR code, the participant's ticket is automatically marked as scanned.
</p>
</div>
<!-- Events Manager Guide -->
{#if data.profile?.section_position === 'events_manager'}
<div class="rounded-lg border border-gray-300 bg-white p-6">
<h2 class="mb-2 text-lg font-semibold text-gray-900">Events Manager Guide</h2>
<p class="text-sm leading-relaxed text-gray-700">
As an Events Manager, you have access to the <strong>Events</strong> section. Here you
can create new events, manage participants by syncing with Google Sheets, send email
invitations with QR codes, and view event statistics.
</p>
</div>
{/if}
</div>
</div> </div>
</div> </div>
<a
href="/auth/signout"
class="fixed bottom-6 left-1/2 z-50 -translate-x-1/2 rounded-full border border-gray-300 bg-red-500 px-8 py-3 font-semibold text-white shadow-none transition hover:bg-red-600"
>
Sign out
</a>