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

96
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 class="flex flex-grow flex-col items-center text-center">
<div <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" 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> </div>
<div class="flex flex-col"> <h2 class="text-xl font-semibold text-gray-900">{data.profile?.display_name}</h2>
<span class="text-lg font-semibold text-gray-800">{data.profile?.display_name}</span> <p class="text-sm text-gray-500">{data.user?.email}</p>
<div class="text-sm text-gray-500">{data.user?.email}</div> </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>
</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>
<!-- 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"> <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 To scan a QR code, head over to <strong>Scanner</strong> in the top right corner. Click
allow camera permissions. If you close and open your browser and your camera is stuck, simply 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 refresh the page or click "Stop Scanning" and then "Start Scanning" again. When you scan
code, a request is sent to the server to get the user's personal information and to mark their a QR code, the participant's ticket is automatically marked as scanned.
tickets as scanned.
</p> </p>
</div>
<!-- Events Manager Guide -->
{#if data.profile?.section_position === 'events_manager'} {#if data.profile?.section_position === 'events_manager'}
<h2 class="mt-4 mb-2 text-lg">Events manager guide</h2> <div class="rounded-lg border border-gray-300 bg-white p-6">
<p class="text-sm leading-relaxed text-gray-700">You can view events</p> <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} {/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>