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();
</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="flex flex-col gap-2">
<div class="rounded-lg overflow-hidden border border-gray-200">
<div class="bg-gray-50 p-4 flex items-center gap-4 border-b border-gray-200">
<div
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"
>
{data.user?.user_metadata.display_name?.[0] ?? 'U'}
<div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
<!-- Left Column: User Profile -->
<div class="lg:col-span-1">
<div class="flex h-full flex-col rounded-lg border border-gray-300 bg-white p-6">
<div class="flex flex-grow flex-col items-center text-center">
<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.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 class="flex flex-col">
<span class="text-lg font-semibold text-gray-800">{data.profile?.display_name}</span>
<div class="text-sm text-gray-500">{data.user?.email}</div>
<div class="mt-6 text-center">
<a
href="/auth/signout"
class="text-sm text-red-500 transition hover:text-red-700 hover:underline"
>Sign Out</a
>
</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>
<h2 class="mt-4 mb-2 text-lg">User guide</h2>
<p class="text-sm leading-relaxed text-gray-700">
To scan a QR code, head over to Scanner in the top right corner. Click on Start scanning and
allow camera permissions. If you close and open your browser and your camera is stuck, simply
refresh the page or click Stop scanning and then Start scanning again. When you scan a QR
code, a request is sent to the server to get the user's personal information and to mark their
tickets as scanned.
</p>
{#if data.profile?.section_position === 'events_manager'}
<h2 class="mt-4 mb-2 text-lg">Events manager guide</h2>
<p class="text-sm leading-relaxed text-gray-700">You can view events</p>
{/if}
<!-- Right Column: Information -->
<div class="space-y-6 lg:col-span-2">
<!-- Role Information -->
<div class="rounded-lg border border-gray-300 bg-white p-6">
<h2 class="mb-4 text-lg font-semibold text-gray-900">Your Role</h2>
<dl class="grid grid-cols-1 gap-x-4 gap-y-4 sm:grid-cols-2">
<div class="sm:col-span-1">
<dt class="text-sm font-medium text-gray-500">Section</dt>
<dd class="mt-1 text-sm font-semibold text-gray-900">
{data.profile?.section?.name ?? 'N/A'}
</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>
<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>