admin/domain-wall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui refactor: yuhhhhhh 80% done

Browse Source
This commit is contained in:
user
2025-10-21 18:10:39 +03:00
parent 6a0571fcfa
commit 1a89236449
12 changed files with 606 additions and 359 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
apps/frontend/src/routes/(main)/checkout/terminated/+page.svelte
View File

@@ -2,9 +2,10 @@
import { page } from "$app/state";
import Icon from "$lib/components/atoms/icon.svelte";
import Title from "$lib/components/atoms/title.svelte";
import MaxWidthWrapper from "$lib/components/molecules/max-width-wrapper.svelte";
import { onMount } from "svelte";
import CloseIcon from "~icons/mdi/window-close";
import ExclamationIcon from "~icons/heroicons/exclamation-triangle-20-solid";
import ClockIcon from "~icons/heroicons/clock-20-solid";
import SupportIcon from "~icons/heroicons/chat-bubble-left-right-20-solid";
let canRedirect = $state(false);
@@ -18,25 +19,90 @@
});
</script>
<div class="grid min-h-[80vh] w-full place-items-center">
<MaxWidthWrapper
cls="flex flex-col gap-8 items-center justify-center p-4 md:p-8"
>
<div
class="flex w-full flex-col items-center justify-center gap-8 rounded-xl bg-white p-4 drop-shadow-lg md:p-8 md:py-12 lg:w-max"
>
<div
class="rounded-full bg-rose-100 p-2 text-rose-600 drop-shadow-lg"
>
<Icon icon={CloseIcon} cls="w-12 h-12" />
<div class="flex min-h-screen w-full items-center justify-center bg-gradient-to-br from-red-50 via-orange-50 to-yellow-50 p-4">
<div class="w-full max-w-lg">
<div class="animate-scale-in rounded-3xl bg-white p-8 shadow-2xl md:p-12">
<!-- Error Icon with Animation -->
<div class="mb-8 flex justify-center">
<div class="animate-pulse-slow rounded-full bg-gradient-to-br from-red-400 to-red-600 p-4 shadow-lg">
<Icon icon={ExclamationIcon} cls="h-16 w-16 text-white" />
</div>
</div>
<Title size="h3" center weight="medium">Session Terminated</Title>
<p class="w-full max-w-prose text-center text-gray-600">
Unfortunately, your session has been terminated due to inactivity
or something went wrong, please contact us to walk through the
steps again.
<!-- Title -->
<Title size="h3" weight="medium" center>Session Terminated</Title>
<!-- Description -->
<p class="mb-8 mt-4 text-center text-base text-gray-600">
Your checkout session has been terminated. This may have occurred due to inactivity or a connection issue.
</p>
<!-- Reason Cards -->
<div class="mb-8 space-y-3">
<div class="flex items-start gap-3 rounded-lg border border-gray-200 bg-gray-50 p-4">
<div class="flex-shrink-0">
<div class="rounded-lg bg-orange-100 p-2">
<Icon icon={ClockIcon} cls="h-5 w-5 text-orange-600" />
</div>
</div>
<div class="flex-1">
<p class="mb-1 text-sm font-semibold text-gray-900">
Session Timeout
</p>
<p class="text-sm text-gray-600">
Sessions expire after a period of inactivity for security.
</p>
</div>
</div>
<div class="flex items-start gap-3 rounded-lg border border-gray-200 bg-gray-50 p-4">
<div class="flex-shrink-0">
<div class="rounded-lg bg-blue-100 p-2">
<Icon icon={SupportIcon} cls="h-5 w-5 text-blue-600" />
</div>
</div>
<div class="flex-1">
<p class="mb-1 text-sm font-semibold text-gray-900">
Need Help?
</p>
<p class="text-sm text-gray-600">
Contact our support team to continue your order.
</p>
</div>
</div>
</div>
</div>
</MaxWidthWrapper>
</div>
</div>
<style>
@keyframes scale-in {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes pulse-slow {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.8;
}
}
.animate-scale-in {
animation: scale-in 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.animate-pulse-slow {
animation: pulse-slow 2s ease-in-out infinite;
}
</style>