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 {
|
:root {
|
||||||
--background: 0 0% 100%;
|
--background: 0 0% 100%;
|
||||||
--foreground: 222.2 84% 4.9%;
|
--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: 0 0% 100%;
|
||||||
--card-foreground: 222.2 84% 4.9%;
|
--card-foreground: 222.2 84% 4.9%;
|
||||||
|
--popover: 0 0% 100%;
|
||||||
--border: 214.3 31.8% 91.4%;
|
--popover-foreground: 222.2 84% 4.9%;
|
||||||
--input: 214.3 31.8% 91.4%;
|
--primary: 221.2 83.2% 53.3%;
|
||||||
|
|
||||||
--primary: 222.2 47.4% 11.2%;
|
|
||||||
--primary-foreground: 210 40% 98%;
|
--primary-foreground: 210 40% 98%;
|
||||||
|
|
||||||
--secondary: 210 40% 96.1%;
|
--secondary: 210 40% 96.1%;
|
||||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
--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: 210 40% 96.1%;
|
||||||
--accent-foreground: 222.2 47.4% 11.2%;
|
--accent-foreground: 222.2 47.4% 11.2%;
|
||||||
|
--destructive: 0 72.22% 50.59%;
|
||||||
--destructive: 0 72.2% 50.6%;
|
|
||||||
--destructive-foreground: 210 40% 98%;
|
--destructive-foreground: 210 40% 98%;
|
||||||
|
--border: 214.3 31.8% 91.4%;
|
||||||
--ring: 222.2 84% 4.9%;
|
--input: 214.3 31.8% 91.4%;
|
||||||
|
--ring: 221.2 83.2% 53.3%;
|
||||||
--radius: 0.5rem;
|
--radius: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark {
|
.dark {
|
||||||
--background: 222.2 84% 4.9%;
|
--background: 222.2 84% 4.9%;
|
||||||
--foreground: 210 40% 98%;
|
--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: 222.2 84% 4.9%;
|
||||||
--card-foreground: 210 40% 98%;
|
--card-foreground: 210 40% 98%;
|
||||||
|
--popover: 222.2 84% 4.9%;
|
||||||
--border: 217.2 32.6% 17.5%;
|
--popover-foreground: 210 40% 98%;
|
||||||
--input: 217.2 32.6% 17.5%;
|
--primary: 217.2 91.2% 59.8%;
|
||||||
|
|
||||||
--primary: 210 40% 98%;
|
|
||||||
--primary-foreground: 222.2 47.4% 11.2%;
|
--primary-foreground: 222.2 47.4% 11.2%;
|
||||||
|
|
||||||
--secondary: 217.2 32.6% 17.5%;
|
--secondary: 217.2 32.6% 17.5%;
|
||||||
--secondary-foreground: 210 40% 98%;
|
--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: 217.2 32.6% 17.5%;
|
||||||
--accent-foreground: 210 40% 98%;
|
--accent-foreground: 210 40% 98%;
|
||||||
|
|
||||||
--destructive: 0 62.8% 30.6%;
|
--destructive: 0 62.8% 30.6%;
|
||||||
--destructive-foreground: 210 40% 98%;
|
--destructive-foreground: 210 40% 98%;
|
||||||
|
--border: 217.2 32.6% 17.5%;
|
||||||
--ring: 212.7 26.8% 83.9%;
|
--input: 217.2 32.6% 17.5%;
|
||||||
}
|
--ring: 224.3 76.3% 48%;
|
||||||
}
|
|
||||||
|
|
||||||
@layer base {
|
|
||||||
* {
|
|
||||||
@apply border-border;
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
@apply bg-background text-foreground;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
@ -1,11 +1,11 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import sampleQR from "./sampleqrlfkselfservice.png";
|
|
||||||
import { Button } from "$lib/components/ui/button/index.js";
|
import { Button } from "$lib/components/ui/button/index.js";
|
||||||
import * as Card from "$lib/components/ui/card/index.js";
|
import * as Card from "$lib/components/ui/card/index.js";
|
||||||
import Checkbox from "$lib/components/ui/checkbox/checkbox.svelte";
|
import Checkbox from "$lib/components/ui/checkbox/checkbox.svelte";
|
||||||
import { Input } from "$lib/components/ui/input";
|
import { Input } from "$lib/components/ui/input";
|
||||||
import { Label } from "$lib/components/ui/label";
|
import { Label } from "$lib/components/ui/label";
|
||||||
import { Progress } from "$lib/components/ui/progress";
|
import { Progress } from "$lib/components/ui/progress";
|
||||||
|
import sampleQR from "./sampleqrlfkselfservice.png";
|
||||||
|
|
||||||
const Steps = {
|
const Steps = {
|
||||||
WELCOME: {
|
WELCOME: {
|
||||||
@ -62,35 +62,6 @@
|
|||||||
let firstname = $state<string>("");
|
let firstname = $state<string>("");
|
||||||
let lastname = $state<string>("");
|
let lastname = $state<string>("");
|
||||||
let remainingseconds = $state<number>(5);
|
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>
|
</script>
|
||||||
|
|
||||||
<div class="pt-48">
|
<div class="pt-48">
|
||||||
@ -216,9 +187,9 @@
|
|||||||
Alright that's it, just walk up to the next available person and
|
Alright that's it, just walk up to the next available person and
|
||||||
tell them your name.<br />
|
tell them your name.<br />
|
||||||
You can scan this qr code to login to our selfservice.
|
You can scan this qr code to login to our selfservice.
|
||||||
|
<!-- TODO: generate actual qr code -->
|
||||||
|
<img src={sampleQR} alt="" />
|
||||||
</p>
|
</p>
|
||||||
<img src={sampleQR} alt="">
|
|
||||||
TODO:
|
|
||||||
{:else if currentStep.name == Steps.SIGNIN.name}
|
{:else if currentStep.name == Steps.SIGNIN.name}
|
||||||
<div class="grid gap-2">
|
<div class="grid gap-2">
|
||||||
<Button
|
<Button
|
||||||
@ -306,9 +277,6 @@
|
|||||||
currentStep = Steps.WELCOME;
|
currentStep = Steps.WELCOME;
|
||||||
}}>Done</Button
|
}}>Done</Button
|
||||||
>
|
>
|
||||||
<p class="text-center">
|
|
||||||
Returning to the home screen in {remainingseconds} seconds...
|
|
||||||
</p>
|
|
||||||
{/if}
|
{/if}
|
||||||
</Card.Footer>
|
</Card.Footer>
|
||||||
</Card.Root>
|
</Card.Root>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user