Compare commits
3 Commits
38e6c145e2
...
9f63e3a77a
Author | SHA1 | Date | |
---|---|---|---|
9f63e3a77a | |||
4c5499d050 | |||
497a108647 |
65
src/app.css
65
src/app.css
@ -6,73 +6,44 @@
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 222.2 84% 4.9%;
|
||||
|
||||
--muted: 210 40% 96.1%;
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222.2 84% 4.9%;
|
||||
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222.2 84% 4.9%;
|
||||
|
||||
--border: 214.3 31.8% 91.4%;
|
||||
--input: 214.3 31.8% 91.4%;
|
||||
|
||||
--primary: 222.2 47.4% 11.2%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222.2 84% 4.9%;
|
||||
--primary: 221.2 83.2% 53.3%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
|
||||
--secondary: 210 40% 96.1%;
|
||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--muted: 210 40% 96.1%;
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
--accent: 210 40% 96.1%;
|
||||
--accent-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--destructive: 0 72.2% 50.6%;
|
||||
--destructive: 0 72.22% 50.59%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
|
||||
--ring: 222.2 84% 4.9%;
|
||||
|
||||
--radius: 0.5rem;
|
||||
--border: 214.3 31.8% 91.4%;
|
||||
--input: 214.3 31.8% 91.4%;
|
||||
--ring: 221.2 83.2% 53.3%;
|
||||
--radius: 0.75rem;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 222.2 84% 4.9%;
|
||||
--foreground: 210 40% 98%;
|
||||
|
||||
--muted: 217.2 32.6% 17.5%;
|
||||
--muted-foreground: 215 20.2% 65.1%;
|
||||
|
||||
--popover: 222.2 84% 4.9%;
|
||||
--popover-foreground: 210 40% 98%;
|
||||
|
||||
--card: 222.2 84% 4.9%;
|
||||
--card-foreground: 210 40% 98%;
|
||||
|
||||
--border: 217.2 32.6% 17.5%;
|
||||
--input: 217.2 32.6% 17.5%;
|
||||
|
||||
--primary: 210 40% 98%;
|
||||
--popover: 222.2 84% 4.9%;
|
||||
--popover-foreground: 210 40% 98%;
|
||||
--primary: 217.2 91.2% 59.8%;
|
||||
--primary-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--secondary: 217.2 32.6% 17.5%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
|
||||
--muted: 217.2 32.6% 17.5%;
|
||||
--muted-foreground: 215 20.2% 65.1%;
|
||||
--accent: 217.2 32.6% 17.5%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
|
||||
--ring: 212.7 26.8% 83.9%;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
--border: 217.2 32.6% 17.5%;
|
||||
--input: 217.2 32.6% 17.5%;
|
||||
--ring: 224.3 76.3% 48%;
|
||||
}
|
||||
}
|
@ -1,11 +1,11 @@
|
||||
<script lang="ts">
|
||||
import sampleQR from "./sampleqrlfkselfservice.png";
|
||||
import { Button } from "$lib/components/ui/button/index.js";
|
||||
import * as Card from "$lib/components/ui/card/index.js";
|
||||
import Checkbox from "$lib/components/ui/checkbox/checkbox.svelte";
|
||||
import { Input } from "$lib/components/ui/input";
|
||||
import { Label } from "$lib/components/ui/label";
|
||||
import { Progress } from "$lib/components/ui/progress";
|
||||
import sampleQR from "./sampleqrlfkselfservice.png";
|
||||
|
||||
const Steps = {
|
||||
WELCOME: {
|
||||
@ -62,35 +62,6 @@
|
||||
let firstname = $state<string>("");
|
||||
let lastname = $state<string>("");
|
||||
let remainingseconds = $state<number>(5);
|
||||
|
||||
// Function to handle automatic return to welcome screen
|
||||
function startCountdown() {
|
||||
if (currentStep.progress === 100) {
|
||||
remainingseconds = 10;
|
||||
const timer = setInterval(() => {
|
||||
remainingseconds -= 1;
|
||||
if (remainingseconds <= 0) {
|
||||
clearInterval(timer);
|
||||
currentStep = Steps.WELCOME;
|
||||
}
|
||||
}, 1000);
|
||||
return timer;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
import { onDestroy } from "svelte";
|
||||
|
||||
// Watch for changes to currentStep
|
||||
$effect(() => {
|
||||
if (currentStep.progress === 100) {
|
||||
const timer = startCountdown();
|
||||
// Cleanup when component is destroyed
|
||||
onDestroy(() => {
|
||||
if (timer) clearInterval(timer);
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="pt-48">
|
||||
@ -216,9 +187,9 @@
|
||||
Alright that's it, just walk up to the next available person and
|
||||
tell them your name.<br />
|
||||
You can scan this qr code to login to our selfservice.
|
||||
<!-- TODO: generate actual qr code -->
|
||||
<img src={sampleQR} alt="" />
|
||||
</p>
|
||||
<img src={sampleQR} alt="">
|
||||
TODO:
|
||||
{:else if currentStep.name == Steps.SIGNIN.name}
|
||||
<div class="grid gap-2">
|
||||
<Button
|
||||
@ -306,9 +277,6 @@
|
||||
currentStep = Steps.WELCOME;
|
||||
}}>Done</Button
|
||||
>
|
||||
<p class="text-center">
|
||||
Returning to the home screen in {remainingseconds} seconds...
|
||||
</p>
|
||||
{/if}
|
||||
</Card.Footer>
|
||||
</Card.Root>
|
||||
|
Loading…
x
Reference in New Issue
Block a user