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

Minor styling changes

Browse Source
This commit is contained in:
Roman Krček
2025-07-14 16:05:29 +02:00
parent f14213a5d4
commit d0f555a7c5
3 changed files with 96 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,46 +1,54 @@
<script lang="ts">
let { data } = $props();
let { data } = $props();
</script>
<h1 class="mt-2 mb-4 text-center text-2xl font-bold">User Profile</h1>
<div class="mb-4 rounded border border-gray-300 bg-white p-6">
<div class="flex flex-col gap-2">
<div class="flex items-center gap-3 mb-4">
<div class="h-12 w-12 rounded-full bg-gray-200 flex items-center justify-center text-xl font-bold text-gray-600">
{data.user?.user_metadata.display_name?.[0] ?? "U"}
</div>
<div>
<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>
</div>
<div class="flex flex-col gap-1">
<div>
<span class="font-medium text-gray-700">Section:</span>
<span class="text-gray-900">{data.profile?.section.name ?? "N/A"}</span>
</div>
<div>
<span class="font-medium text-gray-700">Position:</span>
<span class="text-gray-900">{data.profile?.section_position ?? "N/A"}</span>
</div>
</div>
<h2 class="text-lg mb-2 mt-4">User guide</h2>
<p class="text-gray-700 text-sm leading-relaxed">
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>
<h2 class="text-lg mb-2 mt-4">Administrator guide</h2>
<p class="text-gray-700 text-sm leading-relaxed">
You can view events
</p>
</div>
<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>
<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>
</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}
</div>
</div>
<a
href="/auth/signout"
class="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 bg-red-500 hover:bg-red-600 text-white font-semibold py-3 px-8 rounded-full shadow-none border border-gray-300 transition"
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
Sign out
</a>