دانیا

# Follow the official installation guide for your framework.
# https://tailwindcss.com/docs/installation

# Used for styling rich text and typography.
npm install -D @tailwindcss/typography

# Download the Estedad font from:
# https://github.com/aminabedi68/Estedad

# Used for interactive components and UI behavior.
npm install alpinejs

# Used to persist Alpine.js state across page reloads.
npm install @alpinejs/persist

# Used for sliders and carousels.
npm install swiper

:root {
    --surface-color: oklch(1 0 0);
    --surface-content-color: oklch(0 0 0);

    --surface-1-color: oklch(96.5% 0 0);
    --surface-1-content-color: oklch(14.5% 0 0);

    --surface-2-color: oklch(92.7% 0.001 286.375);
    --surface-2-content-color: oklch(55.2% 0.016 285.938);

    --surface-3-color: oklch(85.7% 0.001 286.375);
    --surface-3-content-color: oklch(55.2% 0.016 285.938);

    --card-color: oklch(1 0 0);
    --card-content-color: oklch(0 0 0);

    --primary-color: oklch(58.8% 0.158 241.966);
    --primary-content-color: oklch(1 0 0);

    --accent-color: oklch(83.7% 0.128 66.29);
    --accent-content-color: oklch(20.8% 0.042 265.755);

    --success-color: oklch(43.2% 0.095 166.913);
    --success-content-color: oklch(95% 0.052 163.051);

    --warning-color: oklch(84.1% 0.238 128.85);
    --warning-content-color: oklch(12.9% 0.042 264.695);

    --info-color: oklch(52% 0.105 223.128);
    --info-content-color: oklch(95.6% 0.045 203.388);

    --destructive-color: oklch(44.4% 0.177 26.899);
    --destructive-content-color: oklch(97.1% 0.013 17.38);

    --border-color: oklch(92% 0.004 286.32);
    --input-color: oklch(92% 0.004 286.32);
    --ring-color: oklch(92% 0.004 286.32);
}

.dark {
    --surface-color: oklch(0.173 0 0);
    --surface-content-color: oklch(1 0 0);

    --surface-1-color: oklch(18.674% 0.00002 271.152);
    --surface-1-content-color: oklch(92.797% 0.00011 271.152);

    --surface-2-color: oklch(22.213% 0.00003 271.152);
    --surface-2-content-color: oklch(75.423% 0.01568 285.945);

    --surface-3-color: oklch(30.118% 0.00003 271.152);
    --surface-3-content-color: oklch(63.736% 0.01784 285.832);

    --card-color: oklch(0.173 0 0);
    --card-content-color: oklch(1 0 0);

    --primary-color: oklch(58.8% 0.158 241.966);
    --primary-content-color: oklch(1 0 0);

    --accent-color: oklch(83.7% 0.128 66.29);
    --accent-content-color: oklch(12.9% 0.042 264.695);

    --success-color: oklch(43.2% 0.095 166.913);
    --success-content-color: oklch(95% 0.052 163.051);

    --warning-color: oklch(84.1% 0.238 128.85);
    --warning-content-color: oklch(12.9% 0.042 264.695);

    --info-color: oklch(52% 0.105 223.128);
    --info-content-color: oklch(95.6% 0.045 203.388);

    --destructive-color: oklch(44.4% 0.177 26.899);
    --destructive-content-color: oklch(97.1% 0.013 17.38);

    --border-color: oklch(24.354% 0.00003 271.152);
    --input-color: oklch(34.07% 0.00004 271.152);
    --ring-color: oklch(36.002% 0.00004 271.152);
}

@import "tailwindcss";
@plugin "@tailwindcss/typography";

@import "./theme/colors.css";

@custom-variant dark (&:where(.dark, .dark *));

@theme {
    --font-fa: "Estedad";

    --text-2xs: 0.65rem;

    --color-surface: var(--surface-color);
    --color-surface-content: var(--surface-content-color);

    --color-surface-1: var(--surface-1-color);
    --color-surface-1-content: var(--surface-1-content-color);

    --color-surface-2: var(--surface-2-color);
    --color-surface-2-content: var(--surface-2-content-color);

    --color-surface-3: var(--surface-3-color);
    --color-surface-3-content: var(--surface-3-content-color);

    --color-card: var(--card-color);
    --color-card-content: var(--card-content-color);

    --color-primary: var(--primary-color);
    --color-primary-content: var(--primary-content-color);

    --color-accent: var(--accent-color);
    --color-accent-content: var(--accent-content-color);

    --color-info: var(--info-color);
    --color-info-content: var(--info-content-color);

    --color-success: var(--success-color);
    --color-success-content: var(--success-content-color);

    --color-warning: var(--warning-color);
    --color-warning-content: var(--warning-content-color);

    --color-destructive: var(--destructive-color);
    --color-destructive-content: var(--destructive-content-color);

    --color-border: var(--border-color);
    --color-input: var(--input-color);
    --color-ring: var(--ring-color);
}

@layer base {
    * {
        @apply border-border ring-ring;
    }

    *::-webkit-scrollbar {
        @apply w-3.5
    }

    *::-webkit-scrollbar-track {
        @apply bg-transparent
    }

    *::-webkit-scrollbar-thumb {
        @apply bg-surface-2 border-4 border-transparent rounded-2xl bg-clip-content;
    }

    *::-webkit-scrollbar-button {
        @apply hidden;
    }

    *::-webkit-scrollbar-corner {
        @apply bg-transparent
    }

    html {
        @apply scroll-smooth;
    }

    body {
        @apply bg-surface-1 font-fa font-medium text-surface-content overflow-x-hidden;
        /* If you are using the Estedad font, enable Persian numerals. */
        font-feature-settings: "ss20";
    }

    [x-cloak] {
        @apply !hidden;
    }
}

function timer() {
    return {
        endTime: null,
        days: 0,
        hours: 0,
        minutes: 0,
        seconds: 0,
        intervalId: null,

        startTimer(timestamp) {
            this.endTime = new Date(parseInt(timestamp) * 1000);
            this.updateTimer();
            this.intervalId = setInterval(() => this.updateTimer(), 1000);
        },

        updateTimer() {
            if (!this.endTime) return;

            const now = new Date();
            const distance = this.endTime.getTime() - now.getTime();

            if (distance < 0) {
                clearInterval(this.intervalId);
                this.days = 0;
                this.hours = 0;
                this.minutes = 0;
                this.seconds = 0;
                return;
            }

            this.days = Math.floor(distance / (1000 * 60 * 60 * 24));
            this.hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            this.minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            this.seconds = Math.floor((distance % (1000 * 60)) / 1000);
        },
    };
}

function otpTimer(minutes = 2) {
    return {
        totalTime: minutes * 60,
        remainingTime: minutes * 60,
        countdown: null,

        startTimer() {
            this.stopTimer();
            this.remainingTime = this.totalTime;
            this.countdown = setInterval(() => {
                this.remainingTime--;
                if (this.remainingTime <= 0) {
                    this.stopTimer();
                }
            }, 1000);
        },

        stopTimer() {
            if (this.countdown) clearInterval(this.countdown);
        },

        restartTimer() {
            this.startTimer();
        },

        get minutes() {
            return Math.floor(this.remainingTime / 60)
                .toString()
                .padStart(2, "0");
        },

        get seconds() {
            return (this.remainingTime % 60).toString().padStart(2, "0");
        },

        isExpired() {
            return this.remainingTime <= 0;
        },
    };
}

export { timer, otpTimer };

import "../css/style.css";

import Alpine from "alpinejs";
import persist from "@alpinejs/persist";

// Swiper JS + autoplay, navigation, pagination modules:
import Swiper from "swiper";
import { Autoplay, Navigation, Pagination } from "swiper/modules";
// import Swiper and modules styles
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";

import { timer, otpTimer } from "./utils/timer";

Alpine.plugin(persist);

document.addEventListener("alpine:init", () => {
    Alpine.store("darkMode", {
        on: Alpine.$persist(false).as("ui_dark"),

        toggle() {
            this.on = !this.on;
        },
    });

    Alpine.data("timer", timer);
    Alpine.data("otpTimer", otpTimer);
});

window.Alpine = Alpine;

Alpine.start();

const swiperWidthAuto = new Swiper(".swiper-w-auto-slide", {
    // configure Swiper to use modules
    modules: [Navigation],

    // Optional parameters
    slidesPerView: "auto",

    // Navigation arrows
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
});

const swiperWidthAutoAutoplay = new Swiper(".swiper-w-auto-autoplay-slide", {
    // configure Swiper to use modules
    modules: [Autoplay, Navigation, Pagination],

    // Optional parameters
    slidesPerView: "auto",

    autoplay: {
        delay: 3500,
    },

    // Navigation arrows
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },

    pagination: {
        el: ".swiper-pagination",
        clickable: true,
    },
});