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

Styling changes and rebrand to ScanWave

Browse Source
This commit is contained in:
Roman Krček
2025-06-25 14:53:51 +02:00
parent 906f0376d2
commit c28c338de4
5 changed files with 72 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,13 +7,45 @@
};
</script>
<div class="user-profile">
<h2 class="mb-2 text-2xl font-bold">Currently logged in</h2>
<p><strong>Username:</strong> {data.user?.user_metadata.display_name}</p>
<p><strong>Email:</strong> {data.user?.email}</p>
<p><strong>Section:</strong> {data.user_profile?.section.name}</p>
<p><strong>Position:</strong> {data.user_profile?.section_position}</p>
<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.user?.user_metadata.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.user_profile?.section.name ?? "N/A"}</span>
</div>
<div>
<span class="font-medium text-gray-700">Position:</span>
<span class="text-gray-900">{data.user_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>
<button class="mt-4 rounded bg-red-500 px-4 py-2 text-white hover:bg-red-600">
<a href="/auth/signout">Sign out</a>
</button>
<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"
>
Sign out
</a>