1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
<script>
import { browser } from "$app/environment";
import { scale } from "svelte/transition";
import Amount from "$comp/Amount.svelte";
import { Confetti } from "svelte-confetti";
const { amount, tip, rate, currency, title } = $props();
let loaded = $state(false);
$effect(() => {
if (browser)
window.requestAnimationFrame((p) => {
loaded = true;
});
});
</script>
<div class="text-center mt-20 md:mt-0">
{#if loaded}
<div class="relative flex justify-center">
<div class="absolute top-64 pointer-events-none">
<Confetti
amount="20"
size="40"
duration="1600"
delay={[0, 500]}
fallDistance="50px"
colorArray={["url(/images/bolt.svg)"]}
/>
<Confetti
amount="40"
delay={[0, 500]}
size="15"
fallDistance="50px"
duration="1600"
colorArray={[
"#FFD700", // Gold
"#FF6F61", // Coral
"#6BCB77", // Mint green
"#4D96FF", // Light blue
"#FF9CEE", // Light pink
"#FFD580", // Soft orange
"#87CEEB", // Sky blue
"#FFB6C1", // Light coral pink
"#C1C7FF", // Lavender
]}
/>
</div>
</div>
<iconify-icon
icon="ph:check-fat-fill"
class="text-green-400"
width="160"
in:scale={{ start: 0.2, duration: 500 }}
/>
{/if}
<h1 class="text-3xl md:text-4xl font-bold mb-6">{title}</h1>
<Amount {amount} {tip} {rate} {currency} />
</div>
|
