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

Looking much better
All checks were successful
Build Docker image / build (pull_request) Successful in 1m47s
Details

Browse Source
This commit is contained in:
Roman Krček
2025-06-21 23:34:49 +02:00
parent 4468d03103
commit 8cc59b89da
7 changed files with 137 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/routes/+page.svelte
View File

@@ -1,6 +1,22 @@
<script lang="ts"> <div class="min-h-screen flex flex-col justify-center items-center">
<!-- SVG QR Code Art on Top -->
</script> <div class="mb-8">
<!-- Simple QR code SVG (static, for illustration) -->
<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
<p>hello world</p> <rect width="96" height="96" rx="16" fill="#F3F4F6"/>
<rect x="12" y="12" width="20" height="20" fill="#111827"/>
<rect x="64" y="12" width="20" height="20" fill="#111827"/>
<rect x="12" y="64" width="20" height="20" fill="#111827"/>
<rect x="40" y="40" width="8" height="8" fill="#111827"/>
<rect x="56" y="56" width="8" height="8" fill="#111827"/>
<rect x="72" y="40" width="8" height="8" fill="#111827"/>
<rect x="40" y="72" width="8" height="8" fill="#111827"/>
</svg>
</div>
<h1 class="text-3xl font-bold text-center mb-2">ESN Scanner App</h1>
<h2 class="text-lg text-gray-600 text-center mb-8">Make entrance to your events a breeze.</h2>
<div class="flex space-x-4 w-full justify-center">
<a href="/auth/login" class="w-32 py-2 bg-blue-600 text-white rounded text-center hover:bg-blue-700 transition">Login</a>
<a href="/auth/signup" class="w-32 py-2 bg-gray-200 text-blue-700 rounded text-center hover:bg-gray-300 transition">Signup</a>
</div>
</div>

16
src/routes/auth/+page.svelte
View File

@@ -1,2 +1,14 @@
<a href="/auth/login"><button>Login</button></a> <div class="flex items-center justify-center min-h-screen">
<a href="/auth/singup"><button>Signup</button></a> <div class="flex flex-col space-y-4">
<a href="/auth/login">
<button class="w-40 py-2 bg-white border border-gray-300 text-gray-800 rounded hover:border-gray-400 transition">
Login
</button>
</a>
<a href="/auth/singup">
<button class="w-40 py-2 bg-white border border-gray-300 text-gray-800 rounded hover:border-gray-400 transition">
Signup
</button>
</a>
</div>
</div>

44
src/routes/auth/login/+page.svelte
View File

@@ -1,11 +1,33 @@
<form method="POST" action="?/login"> <div class="flex items-center justify-center min-h-screen bg-gray-50">
<label> <form method="POST" action="?/login" class="flex flex-col space-y-4 bg-white p-8 rounded border border-gray-300 w-80 shadow-none">
Email <h2 class="text-2xl font-semibold text-center mb-4">Login</h2>
<input name="email" type="email" /> <label class="flex flex-col text-gray-700">
</label> Email
<label> <input
Password name="email"
<input name="password" type="password" /> type="email"
</label> class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200"
<button>Login</button> required
</form> />
</label>
<label class="flex flex-col text-gray-700">
Password
<input
name="password"
type="password"
class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200"
required
/>
</label>
<button
type="submit"
class="w-full py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition"
>
Login
</button>
<div class="text-center text-sm text-gray-500 mt-2">
Don't have an account?
<a href="/auth/signup" class="text-blue-600 hover:underline">Signup</a>
</div>
</form>
</div>

58
src/routes/auth/signup/+page.svelte
View File

@@ -1,15 +1,43 @@
<form method="POST" action="?/login"> <div class="flex items-center justify-center min-h-screen bg-gray-50">
<label> <form method="POST" action="?/login" class="flex flex-col space-y-4 bg-white p-8 rounded border border-gray-300 w-80 shadow-none">
Email <h2 class="text-2xl font-semibold text-center mb-4">Sign Up</h2>
<input name="email" type="email" /> <label class="flex flex-col text-gray-700">
</label> Email
<label> <input
Password name="email"
<input name="password" type="password" /> type="email"
</label> class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200"
<label> required
Display name />
<input name="display_name" type="text" /> </label>
</label> <label class="flex flex-col text-gray-700">
<button formaction="?/signup">Sign up</button> Password
</form> <input
name="password"
type="password"
class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200"
required
/>
</label>
<label class="flex flex-col text-gray-700">
Display name
<input
name="display_name"
type="text"
class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200"
required
/>
</label>
<button
type="submit"
formaction="?/signup"
class="w-full py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition"
>
Sign up
</button>
<div class="text-center text-sm text-gray-500 mt-2">
Already have an account?
<a href="/auth/login" class="text-blue-600 hover:underline">Login</a>
</div>
</form>
</div>

12
src/routes/private/+layout.svelte
View File

@@ -2,12 +2,12 @@
// Add any navbar logic here if needed // Add any navbar logic here if needed
</script> </script>
<nav class="bg-gray-800 text-white p-4 flex items-center justify-between"> <nav class="bg-white border-b border-gray-300 text-gray-900 p-4 flex items-center justify-between">
<div class="font-bold text-lg">ESN Scanner</div> <div class="font-bold text-lg">ESN Scanner</div>
<ul class="flex space-x-4"> <ul class="flex space-x-4">
<li><a href="/private/home" class="hover:underline">Home</a></li> <li><a href="/private/home" class="hover:underline">Home</a></li>
<li><a href="/private/scanner" class="hover:underline">Scanner</a></li> <li><a href="/private/scanner" class="hover:underline">Scanner</a></li>
</ul> </ul>
</nav> </nav>
<div class="container p-2 bg-white "> <div class="container p-2 bg-white ">

9
src/routes/private/scanner/QRScanner.svelte
View File

@@ -39,7 +39,7 @@
}); });
</script> </script>
<div id="qr-scanner" class="w-full h-full max-w-none bg-slate-700 overflow-hidden"></div> <div id="qr-scanner" class="w-full h-full max-w-none overflow-hidden rounded-sm"></div>
<style> <style>
/* Hide unwanted icons */ /* Hide unwanted icons */
@@ -49,7 +49,7 @@
} }
#qr-scanner { #qr-scanner {
color: white !important; color: black !important;
} }
/* Change camera permission button text */ /* Change camera permission button text */
@@ -64,4 +64,9 @@
visibility: visible; visibility: visible;
padding: 10px 0; padding: 10px 0;
} }
#qr-scanner :global(#qr-scanner__scan_region) {
min-height: auto !important;
aspect-ratio: 1 !important;
}
</style> </style>

19
src/routes/private/scanner/TicketDisplay.svelte
View File

@@ -25,13 +25,18 @@
</div> </div>
{:else if scan_state === ScanState.scan_successful} {:else if scan_state === ScanState.scan_successful}
{#if ticket_data.scanned} {#if ticket_data.scanned}
<div class="rounded border-l-4 border-red-500 bg-red-100 p-4 text-red-700"> <div class="rounded border-l-4 border-red-500 bg-red-100 p-4 text-red-700">
<p>Ticket already scanned!</p> <p>Ticket already scanned!</p>
<p> <p>
By {ticket_data.scanned_by?.display_name} on By {ticket_data.scanned_by?.display_name} on
{formatScannedAt(ticket_data.scanned_at)} {formatScannedAt(ticket_data.scanned_at)}
</p> </p>
</div> <hr class="my-2 border-t border-red-300" />
<ol>
<li>{ticket_data.event.name}</li>
<li>{ticket_data.name} {ticket_data.surname}</li>
</ol>
</div>
{:else} {:else}
<div class="rounded border-l-4 border-green-500 bg-green-100 p-4 text-green-700"> <div class="rounded border-l-4 border-green-500 bg-green-100 p-4 text-green-700">
<ol> <ol>