86 lines
2.3 KiB
Vue
86 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import { motion } from "motion-v";
|
|
|
|
const STEPS = [
|
|
"بررسی سیستمهای ایمنی",
|
|
"تأیید استانداردهای بینالمللی",
|
|
"بارگذاری تجهیزات حفاظت فردی",
|
|
"محیط کاری آماده است",
|
|
];
|
|
|
|
const emit = defineEmits<{ complete: [] }>();
|
|
|
|
const progress = ref(0);
|
|
let done = false;
|
|
let t: ReturnType<typeof setInterval> | undefined;
|
|
|
|
onMounted(() => {
|
|
let v = 0;
|
|
t = setInterval(() => {
|
|
v += Math.floor(Math.random() * 11) + 7;
|
|
if (v >= 100) {
|
|
v = 100;
|
|
clearInterval(t);
|
|
if (!done) {
|
|
done = true;
|
|
setTimeout(() => emit("complete"), 450);
|
|
}
|
|
}
|
|
progress.value = v;
|
|
}, 140);
|
|
});
|
|
onBeforeUnmount(() => clearInterval(t));
|
|
|
|
const step = computed(
|
|
() =>
|
|
STEPS[
|
|
Math.min(STEPS.length - 1, Math.floor((progress.value / 100) * STEPS.length))
|
|
],
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<motion.div
|
|
:exit="{ y: '-100%' }"
|
|
:transition="{ duration: 0.85, ease: [0.76, 0, 0.24, 1] }"
|
|
class="fixed inset-0 z-[200] flex flex-col items-center justify-center bg-bg"
|
|
>
|
|
<div class="hazard absolute inset-x-0 top-0 h-3" />
|
|
<div class="hazard absolute inset-x-0 bottom-0 h-3" />
|
|
|
|
<div class="flex items-center gap-4">
|
|
<span
|
|
class="flex size-12 items-center justify-center rounded-xl bg-white shadow-[0_0_28px_rgba(255,90,0,0.3)] ring-1 ring-white/10"
|
|
>
|
|
<img
|
|
src="/images/logo.png"
|
|
alt="ایمن پیشگامان"
|
|
width="32"
|
|
height="32"
|
|
class="size-8 object-contain"
|
|
/>
|
|
</span>
|
|
<span class="font-mono text-xs tracking-[0.35em] text-muted">
|
|
IMEN PISHGAMAN CO.
|
|
</span>
|
|
</div>
|
|
|
|
<div class="mt-12 font-mono text-7xl font-semibold tabular-nums md:text-8xl">
|
|
{{ progress.toLocaleString("fa-IR") }}<span class="text-accent">٪</span>
|
|
</div>
|
|
|
|
<div class="mt-8 h-[3px] w-64 overflow-hidden rounded-full bg-line md:w-80">
|
|
<div
|
|
class="h-full bg-accent transition-all duration-200"
|
|
:style="{ width: `${progress}%` }"
|
|
/>
|
|
</div>
|
|
|
|
<div class="mt-6 flex items-center gap-3 text-xs text-muted">
|
|
<span class="size-1.5 animate-pulse rounded-full bg-accent" />
|
|
{{ step }}
|
|
<span class="animate-blink text-accent">▍</span>
|
|
</div>
|
|
</motion.div>
|
|
</template>
|