Old Times Pomodorro

When the love of time management goes beyond the management of love over time. ~ Rogue agent

This tailwind example is contributed by Hasan AlDoy (McDoy), on 26-Apr-2026. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Timer,Time counter

Other Countdown Timer

Author Hasan AlDoy (McDoy)

Tailwind v3.4 425

Fork Fullscreen

<div class="luxury-toolbar">
        <div class="toolbar-title">
            <span id="mainTitle">الوقت الآن</span>
            <small id="mainSubtitle">Luxury 3D Leather Cube Clock</small>
            <em id="liveDateLine" dir="ltr"></em>
        </div>

<details class="target-picker">
            <summary>تغيير التاريخ والوقت</summary>

<div class="picker-panel" dir="ltr">
                <label>
                    Target Date & Time
                    <input id="targetDateTimeInput" type="datetime-local" />
                </label>

<button id="applyTargetDate" type="button">Apply Countdown</button>
                <button id="returnClockMode" type="button">Return to Clock</button>
            </div>
        </details>
    </div>

<div id="countdownLabels" class="countdown-labels" dir="ltr">
        <span>Day</span>
        <span>Hour</span>
        <span>Minute</span>
        <span>Second</span>
    </div>

<aside id="pomodoroPanel" class="pomodoro-panel" dir="ltr">
        <button id="pomodoroToggle" class="pomodoro-tab" type="button">
            <span>🍅</span>
            <strong>Pomodoro</strong>
        </button>

<div class="pomodoro-body">
            <div class="pomodoro-head">
                <div>
                    <span id="pomodoroModeLabel">Focus</span>
                    <small id="pomodoroPatternLabel">Adaptive pattern ready</small>
                </div>

<button id="pomodoroClear" type="button">Clear</button>
            </div>

<div>
                    <strong id="pomodoroTime">25:00</strong>
                    <small id="pomodoroState">Ready</small>
                </div>
            </div>

<div class="pomodoro-actions">
                <button id="pomodoroStartPause" type="button">Start</button>
                <button id="pomodoroSkip" type="button">Skip</button>
                <button id="pomodoroReset" type="button">Restart</button>
            </div>

<div class="pomodoro-presets">
                <button type="button" data-preset="classic">Classic</button>
                <button type="button" data-preset="deep">Deep</button>
                <button type="button" data-preset="sprint">Sprint</button>
            </div>

<div class="pomodoro-settings">
                <label>
                    Focus
                    <input id="pomodoroFocusInput" type="number" min="1" max="180" step="1" />
                </label>

<label>
                    Short Break
                    <input id="pomodoroShortInput" type="number" min="1" max="90" step="1" />
                </label>

<label>
                    Long Break
                    <input id="pomodoroLongInput" type="number" min="1" max="180" step="1" />
                </label>

<label>
                    Long Every
                    <input id="pomodoroEveryInput" type="number" min="2" max="12" step="1" />
                </label>
            </div>

<div class="pomodoro-switches">
                <label>
                    <input id="pomodoroAutoStart" type="checkbox" />
                    Auto start next phase
                </label>

<label>
                    <input id="pomodoroSmartPause" type="checkbox" />
                    Smart pause handoff
                </label>

<label>
                    <input id="pomodoroSound" type="checkbox" />
                    Soft tragic chime
                </label>
            </div>

<div class="pomodoro-stats">
                <div>
                    <strong id="pomodoroFocusCount">0</strong>
                    <span>Focus</span>
                </div>

<div>
                    <strong id="pomodoroBreakCount">0</strong>
                    <span>Breaks</span>
                </div>

<div>
                    <strong id="pomodoroStreak">0</strong>
                    <span>Streak</span>
                </div>
            </div>
        </div>
    </aside>

#luxury-countdown-app {
            position: fixed;
            inset: 0;
            overflow: hidden;
            isolation: isolate;
            background:
                radial-gradient(circle at 18% 8%, rgba(255, 255, 255, .11), transparent 30%),
                radial-gradient(circle at 82% 16%, rgba(245, 222, 179, .13), transparent 34%),
                radial-gradient(circle at 50% 118%, rgba(178, 92, 38, .27), transparent 50%),
                linear-gradient(180deg, #111827 0%, #05070d 48%, #020617 100%);
            font-family:
                ui-sans-serif,
                system-ui,
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                sans-serif;
            transition: background 1.2s ease;
        }

#luxury-countdown-app.sorrow {
            background:
                radial-gradient(circle at 18% 8%, rgba(148, 163, 184, .05), transparent 30%),
                radial-gradient(circle at 82% 16%, rgba(120, 53, 15, .08), transparent 34%),
                radial-gradient(circle at 50% 118%, rgba(88, 28, 28, .3), transparent 50%),
                linear-gradient(180deg, #090b10 0%, #020617 52%, #000 100%);
        }

#luxury-countdown-app::before {
            content: "";
            position: absolute;
            inset: -75%;
            z-index: 0;
            pointer-events: none;
            background:
                conic-gradient(from 120deg, transparent, rgba(255, 255, 255, .13), transparent 28%),
                radial-gradient(circle, rgba(255, 255, 255, .2) 0 1px, transparent 1px 100%);
            background-size: 100% 100%, 30px 30px;
            opacity: .34;
            animation: ambient-spin 32s linear infinite;
        }

@keyframes ambient-spin {
            to {
                transform: rotate(360deg);
            }
        }

.cinematic-veil {
            position: fixed;
            inset: 0;
            z-index: 30;
            pointer-events: none;
            opacity: 0;
            background:
                radial-gradient(circle at 50% 45%, transparent 0 20%, rgba(0, 0, 0, .45) 56%, rgba(0, 0, 0, .94) 100%),
                linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 35%, rgba(0, 0, 0, .9));
            transition: opacity 1.15s cubic-bezier(.17, .84, .25, 1);
        }

.cinematic-veil.playing {
            opacity: 1;
        }

.luxury-toolbar {
            position: absolute;
            top: 22px;
            left: 22px;
            right: 22px;
            z-index: 12;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 16px;
            pointer-events: none;
        }

.toolbar-title {
            pointer-events: auto;
            padding: 14px 18px;
            border-radius: 20px;
            color: #f8fafc;
            background:
                linear-gradient(135deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .045)),
                rgba(15, 23, 42, .5);
            border: 1px solid rgba(255, 255, 255, .12);
            box-shadow:
                0 20px 50px rgba(0, 0, 0, .28),
                inset 0 1px 0 rgba(255, 255, 255, .17);
            backdrop-filter: blur(16px);
            transition: filter .9s ease, transform .9s ease;
        }

#luxury-countdown-app.sorrow .toolbar-title {
            filter: grayscale(.45) brightness(.76);
            transform: translateY(3px);
        }

.toolbar-title span {
            display: block;
            font-size: clamp(22px, 3vw, 38px);
            font-weight: 950;
            line-height: 1.05;
            letter-spacing: -.04em;
            text-shadow: 0 12px 28px rgba(0, 0, 0, .42);
        }

.toolbar-title small,
        .toolbar-title em {
            display: block;
            margin-top: 5px;
            direction: ltr;
            color: rgba(248, 250, 252, .68);
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .12em;
            text-transform: uppercase;
            font-style: normal;
        }

.toolbar-title em {
            color: rgba(253, 230, 138, .85);
            letter-spacing: .08em;
        }

.target-picker {
            position: relative;
            pointer-events: auto;
            direction: rtl;
        }

.target-picker summary {
            list-style: none;
            cursor: pointer;
            user-select: none;
            padding: 12px 15px;
            border-radius: 999px;
            color: #fef3c7;
            font-size: 13px;
            font-weight: 900;
            background:
                linear-gradient(135deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04)),
                rgba(30, 41, 59, .56);
            border: 1px solid rgba(251, 191, 36, .24);
            box-shadow:
                0 18px 45px rgba(0, 0, 0, .28),
                inset 0 1px 0 rgba(255, 255, 255, .14);
            backdrop-filter: blur(16px);
        }

.target-picker summary::-webkit-details-marker {
            display: none;
        }

.picker-panel {
            position: absolute;
            top: calc(100% + 10px);
            right: 0;
            width: 265px;
            padding: 14px;
            border-radius: 18px;
            color: #f8fafc;
            background: linear-gradient(145deg, rgba(15, 23, 42, .94), rgba(2, 6, 23, .86));
            border: 1px solid rgba(255, 255, 255, .12);
            box-shadow:
                0 26px 70px rgba(0, 0, 0, .45),
                inset 0 1px 0 rgba(255, 255, 255, .12);
            backdrop-filter: blur(18px);
        }

.picker-panel label {
            display: grid;
            gap: 8px;
            color: rgba(248, 250, 252, .76);
            font-size: 11px;
            font-weight: 900;
            letter-spacing: .08em;
            text-transform: uppercase;
        }

.picker-panel input {
            width: 100%;
            box-sizing: border-box;
            border: 0;
            outline: 0;
            border-radius: 12px;
            padding: 11px 12px;
            color: #0f172a;
            background: #fff7ed;
            font: inherit;
            font-size: 13px;
            font-weight: 800;
            box-shadow: inset 0 0 0 1px rgba(251, 191, 36, .35);
        }

.picker-panel button {
            width: 100%;
            margin-top: 11px;
            border: 0;
            cursor: pointer;
            border-radius: 12px;
            padding: 11px 12px;
            color: #1c1917;
            background: linear-gradient(135deg, #fde68a, #f59e0b);
            font-size: 13px;
            font-weight: 950;
            box-shadow:
                0 14px 28px rgba(245, 158, 11, .24),
                inset 0 1px 0 rgba(255, 255, 255, .48);
        }

.picker-panel button + button {
            background: linear-gradient(135deg, #e2e8f0, #94a3b8);
        }

.three-countdown-stage {
            position: absolute;
            inset: 0;
            z-index: 1;
        }

.three-countdown-stage canvas {
            display: block;
            width: 100%;
            height: 100%;
        }

.countdown-labels {
            position: absolute;
            left: 50%;
            bottom: clamp(26px, 5vh, 54px);
            z-index: 8;
            width: min(78vw, 940px);
            transform: translateX(-50%);
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: clamp(8px, 3vw, 42px);
            color: rgba(248, 250, 252, .78);
            font-size: clamp(10px, 1.2vw, 14px);
            font-weight: 950;
            letter-spacing: .16em;
            text-transform: uppercase;
            text-align: center;
            text-shadow: 0 8px 22px rgba(0, 0, 0, .52);
            pointer-events: none;
            transition: opacity .8s ease, filter .8s ease, transform .8s ease;
        }

#luxury-countdown-app.sorrow .countdown-labels {
            opacity: .72;
            filter: grayscale(.5) brightness(.76);
            transform: translateX(-50%) translateY(4px);
        }

.pomodoro-panel {
            position: fixed;
            z-index: 40;
            right: 0;
            bottom: 24px;
            width: 338px;
            max-width: calc(100vw - 26px);
            transform: translateX(calc(100% - 48px));
            transition: transform .48s cubic-bezier(.18, .9, .18, 1);
            color: #f8fafc;
            pointer-events: auto;
        }

.pomodoro-panel.open {
            transform: translateX(0);
        }

.pomodoro-tab {
            position: absolute;
            left: 0;
            top: 24px;
            transform: translateX(-100%);
            width: 48px;
            min-height: 148px;
            border: 0;
            cursor: pointer;
            border-radius: 18px 0 0 18px;
            color: #fff7ed;
            background:
                linear-gradient(180deg, rgba(248, 113, 113, .98), rgba(127, 29, 29, .92)),
                rgba(15, 23, 42, .76);
            box-shadow:
                0 22px 55px rgba(0, 0, 0, .42),
                inset 0 1px 0 rgba(255, 255, 255, .24);
            display: grid;
            place-items: center;
            gap: 8px;
        }

.pomodoro-tab strong {
            writing-mode: vertical-rl;
            text-orientation: mixed;
            font-size: 12px;
            letter-spacing: .08em;
            text-transform: uppercase;
        }

.pomodoro-body {
            border-radius: 24px 0 0 24px;
            padding: 16px;
            background:
                radial-gradient(circle at 20% 0%, rgba(255, 255, 255, .16), transparent 34%),
                linear-gradient(145deg, rgba(15, 23, 42, .93), rgba(2, 6, 23, .88));
            border: 1px solid rgba(255, 255, 255, .12);
            border-right: 0;
            box-shadow:
                0 28px 80px rgba(0, 0, 0, .5),
                inset 0 1px 0 rgba(255, 255, 255, .13);
            backdrop-filter: blur(18px);
        }

.pomodoro-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
        }

.pomodoro-head span {
            display: block;
            font-size: 18px;
            font-weight: 950;
            letter-spacing: -.03em;
        }

.pomodoro-head small,
        .pomodoro-clock small {
            display: block;
            margin-top: 3px;
            color: rgba(248, 250, 252, .62);
            font-size: 11px;
            font-weight: 800;
        }

.pomodoro-head button,
        .pomodoro-actions button,
        .pomodoro-presets button {
            border: 0;
            cursor: pointer;
            border-radius: 12px;
            font-weight: 950;
            font-size: 12px;
        }

.pomodoro-head button {
            padding: 8px 10px;
            color: #fecaca;
            background: rgba(127, 29, 29, .38);
            box-shadow: inset 0 0 0 1px rgba(248, 113, 113, .2);
        }

.pomodoro-clock {
            position: relative;
            margin: 16px auto;
            width: 176px;
            height: 176px;
            display: grid;
            place-items: center;
        }

.pomodoro-clock svg,
        .pomodoro-clock > div {
            grid-area: 1 / 1;
        }

.pomodoro-clock svg {
            width: 176px;
            height: 176px;
            transform: rotate(-90deg);
            filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .32));
        }

.pomodoro-ring-bg {
            fill: none;
            stroke: rgba(255, 255, 255, .09);
            stroke-width: 8;
        }

.pomodoro-ring {
            fill: none;
            stroke: #f97316;
            stroke-width: 8;
            stroke-linecap: round;
            stroke-dasharray: 326.7256;
            stroke-dashoffset: 0;
            transition: stroke-dashoffset .4s linear, stroke .28s ease;
        }

.pomodoro-clock > div {
            text-align: center;
        }

.pomodoro-clock strong {
            display: block;
            font-size: 38px;
            line-height: 1;
            letter-spacing: -.06em;
            font-weight: 950;
            text-shadow: 0 18px 38px rgba(0, 0, 0, .5);
        }

.pomodoro-actions {
            display: grid;
            grid-template-columns: 1.4fr 1fr 1fr;
            gap: 8px;
        }

.pomodoro-actions button {
            padding: 11px 10px;
            color: #fff7ed;
            background: rgba(255, 255, 255, .08);
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
        }

.pomodoro-actions button:first-child {
            color: #1c1917;
            background: linear-gradient(135deg, #fed7aa, #f97316);
        }

.pomodoro-presets {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
            margin-top: 10px;
        }

.pomodoro-presets button {
            padding: 9px 8px;
            color: #fde68a;
            background: rgba(251, 191, 36, .1);
            box-shadow: inset 0 0 0 1px rgba(251, 191, 36, .18);
        }

.pomodoro-settings {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 9px;
            margin-top: 12px;
        }

.pomodoro-settings label {
            display: grid;
            gap: 5px;
            color: rgba(248, 250, 252, .68);
            font-size: 10px;
            font-weight: 900;
            letter-spacing: .08em;
            text-transform: uppercase;
        }

.pomodoro-settings input {
            width: 100%;
            min-width: 0;
            box-sizing: border-box;
            border: 0;
            outline: 0;
            border-radius: 11px;
            padding: 9px 10px;
            color: #fff7ed;
            background: rgba(255, 255, 255, .075);
            font-weight: 900;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
        }

.pomodoro-switches {
            display: grid;
            gap: 7px;
            margin-top: 12px;
        }

.pomodoro-switches label {
            display: flex;
            align-items: center;
            gap: 8px;
            color: rgba(248, 250, 252, .74);
            font-size: 12px;
            font-weight: 800;
        }

.pomodoro-switches input {
            accent-color: #f97316;
        }

.pomodoro-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
            margin-top: 13px;
        }

.pomodoro-stats div {
            padding: 10px 8px;
            border-radius: 14px;
            text-align: center;
            background: rgba(255, 255, 255, .065);
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
        }

.pomodoro-stats strong {
            display: block;
            font-size: 20px;
            font-weight: 950;
        }

.pomodoro-stats span {
            display: block;
            margin-top: 2px;
            color: rgba(248, 250, 252, .58);
            font-size: 10px;
            font-weight: 900;
            letter-spacing: .08em;
            text-transform: uppercase;
        }

.pomodoro-panel.focus .pomodoro-ring {
            stroke: #f97316;
        }

.pomodoro-panel.shortBreak .pomodoro-ring {
            stroke: #22c55e;
        }

.pomodoro-panel.longBreak .pomodoro-ring {
            stroke: #38bdf8;
        }

@media (max-width: 720px) {
            .luxury-toolbar {
                top: 14px;
                left: 14px;
                right: 14px;
            }

.toolbar-title {
                padding: 12px 14px;
            }

.toolbar-title small {
                display: none;
            }

.target-picker summary {
                font-size: 0;
                padding: 12px;
            }

.target-picker summary::before {
                content: "⚙";
                font-size: 18px;
            }

.picker-panel {
                right: 0;
                width: min(265px, calc(100vw - 28px));
            }

.pomodoro-panel {
                bottom: 12px;
                width: min(338px, calc(100vw - 60px));
            }
        }
    </style>

const app = document.getElementById("luxury-countdown-app");
            const veil = document.getElementById("cinematicVeil");

const targetDateTimeInput = document.getElementById("targetDateTimeInput");
            const applyTargetDate = document.getElementById("applyTargetDate");
            const returnClockMode = document.getElementById("returnClockMode");

const pomodoroPanel = document.getElementById("pomodoroPanel");
            const pomodoroToggle = document.getElementById("pomodoroToggle");
            const pomodoroModeLabel = document.getElementById("pomodoroModeLabel");
            const pomodoroPatternLabel = document.getElementById("pomodoroPatternLabel");
            const pomodoroTime = document.getElementById("pomodoroTime");
            const pomodoroState = document.getElementById("pomodoroState");
            const pomodoroRing = document.getElementById("pomodoroRing");
            const pomodoroStartPause = document.getElementById("pomodoroStartPause");
            const pomodoroSkip = document.getElementById("pomodoroSkip");
            const pomodoroReset = document.getElementById("pomodoroReset");
            const pomodoroClear = document.getElementById("pomodoroClear");

const pomodoroFocusInput = document.getElementById("pomodoroFocusInput");
            const pomodoroShortInput = document.getElementById("pomodoroShortInput");
            const pomodoroLongInput = document.getElementById("pomodoroLongInput");
            const pomodoroEveryInput = document.getElementById("pomodoroEveryInput");
            const pomodoroAutoStart = document.getElementById("pomodoroAutoStart");
            const pomodoroSmartPause = document.getElementById("pomodoroSmartPause");
            const pomodoroSound = document.getElementById("pomodoroSound");

const pomodoroFocusCount = document.getElementById("pomodoroFocusCount");
            const pomodoroBreakCount = document.getElementById("pomodoroBreakCount");
            const pomodoroStreak = document.getElementById("pomodoroStreak");

const clone = (value) => JSON.parse(JSON.stringify(value));

const pad = (value, length = 2) => String(Math.max(0, Math.floor(value))).padStart(length, "0");

const clampNumber = (value, min, max, fallback) => {
                const parsed = Number.parseInt(value, 10);
                return Number.isNaN(parsed) ? fallback : Math.max(min, Math.min(max, parsed));
            };

const toLocalDateTimeValue = (timestamp) => {
                const date = new Date(timestamp);
                const offset = date.getTimezoneOffset();
                const local = new Date(date.getTime() - offset * 60000);
                return local.toISOString().slice(0, 16);
            };

const defaultTarget = new Date();
            defaultTarget.setFullYear(defaultTarget.getFullYear() + 1);

let targetDate = Number(localStorage.getItem(TARGET_KEY)) || defaultTarget.getTime();

targetDateTimeInput.value = toLocalDateTimeValue(targetDate);

const defaults = {
                settings: {
                    focus: 25,
                    short: 5,
                    long: 15,
                    every: 4,
                    autoStart: false,
                    smartPause: true,
                    sound: true
                },
                mode: "focus",
                remaining: 25 * 60,
                running: false,
                active: false,
                completedFocus: 0,
                completedBreaks: 0,
                streak: 0,
                pausePatterns: {
                    focusPaused: 0,
                    breakPaused: 0,
                    quickResume: 0
                },
                lastPauseAt: null,
                lastSavedAt: Date.now()
            };

let pomodoro = loadPomodoro();
            let appMode = pomodoro.active ? "pomodoro" : "clock";
            let lastTick = Date.now();
            let audioContext = null;

function loadPomodoro() {
                try {
                    const saved = JSON.parse(localStorage.getItem(POMODORO_KEY) || "null");

if (!saved || typeof saved !== "object") {
                        return clone(defaults);
                    }

return {
                        ...clone(defaults),
                        ...saved,
                        settings: {
                            ...defaults.settings,
                            ...(saved.settings || {})
                        },
                        pausePatterns: {
                            ...defaults.pausePatterns,
                            ...(saved.pausePatterns || {})
                        }
                    };
                } catch {
                    return clone(defaults);
                }
            }

function savePomodoro() {
                pomodoro.lastSavedAt = Date.now();
                localStorage.setItem(POMODORO_KEY, JSON.stringify(pomodoro));
            }

function modeDuration(mode = pomodoro.mode) {
                if (mode === "focus") {
                    return pomodoro.settings.focus * 60;
                }

if (mode === "longBreak") {
                    return pomodoro.settings.long * 60;
                }

return pomodoro.settings.short * 60;
            }

function nextMode() {
                if (pomodoro.mode !== "focus") {
                    return "focus";
                }

const nextFocus = pomodoro.completedFocus + 1;

return nextFocus % pomodoro.settings.every === 0 ? "longBreak" : "shortBreak";
            }

function formatTime(seconds) {
                const safe = Math.max(0, Math.ceil(seconds));
                const minutes = Math.floor(safe / 60);
                const secs = safe % 60;

return `${pad(minutes)}:${pad(secs)}`;
            }

function phaseText(mode) {
                if (mode === "longBreak") {
                    return "Long Break";
                }

if (mode === "shortBreak") {
                    return "Short Break";
                }

return "Focus";
            }

function patternText() {
                const { focusPaused, breakPaused, quickResume } = pomodoro.pausePatterns;

if (breakPaused >= 3 && breakPaused > focusPaused) {
                    return "Pattern: breaks hand off into focus";
                }

if (focusPaused >= 3 && focusPaused > breakPaused) {
                    return "Pattern: focus asks for recovery";
                }

if (quickResume >= 4) {
                    return "Pattern: quick resume detected";
                }

return "Adaptive pattern ready";
            }

function renderPomodoro() {
                pomodoroPanel.classList.toggle("focus", pomodoro.mode === "focus");
                pomodoroPanel.classList.toggle("shortBreak", pomodoro.mode === "shortBreak");
                pomodoroPanel.classList.toggle("longBreak", pomodoro.mode === "longBreak");

pomodoroModeLabel.textContent = phaseText(pomodoro.mode);
                pomodoroPatternLabel.textContent = patternText();
                pomodoroTime.textContent = formatTime(pomodoro.remaining);
                pomodoroState.textContent = pomodoro.running ? "Running" : pomodoro.active ? "Paused" : "Ready";
                pomodoroStartPause.textContent = pomodoro.running ? "Pause" : "Start";

pomodoroFocusInput.value = pomodoro.settings.focus;
                pomodoroShortInput.value = pomodoro.settings.short;
                pomodoroLongInput.value = pomodoro.settings.long;
                pomodoroEveryInput.value = pomodoro.settings.every;
                pomodoroAutoStart.checked = pomodoro.settings.autoStart;
                pomodoroSmartPause.checked = pomodoro.settings.smartPause;
                pomodoroSound.checked = pomodoro.settings.sound;

pomodoroFocusCount.textContent = pomodoro.completedFocus;
                pomodoroBreakCount.textContent = pomodoro.completedBreaks;
                pomodoroStreak.textContent = pomodoro.streak;

const progress = 1 - pomodoro.remaining / Math.max(1, modeDuration());

pomodoroRing.style.strokeDashoffset = String(RING_LENGTH * Math.max(0, Math.min(1, progress)));
            }

function chime() {
                if (!pomodoro.settings.sound) {
                    return;
                }

try {
                    audioContext ||= new (window.AudioContext || window.webkitAudioContext)();

const now = audioContext.currentTime;
                    const gain = audioContext.createGain();

gain.gain.setValueAtTime(.0001, now);
                    gain.gain.exponentialRampToValueAtTime(.055, now + .04);
                    gain.gain.exponentialRampToValueAtTime(.0001, now + 1.2);
                    gain.connect(audioContext.destination);

[392, 349.23, 293.66].forEach((frequency, index) => {
                        const oscillator = audioContext.createOscillator();
                        oscillator.type = "sine";
                        oscillator.frequency.setValueAtTime(frequency, now + index * .18);
                        oscillator.connect(gain);
                        oscillator.start(now + index * .18);
                        oscillator.stop(now + 1.1 + index * .18);
                    });
                } catch {}
            }

function playCinematic(mode) {
                appMode = mode;
                app.classList.toggle("sorrow", mode === "pomodoro");

veil.classList.remove("playing");
                void veil.offsetWidth;
                veil.classList.add("playing");

setTimeout(() => {
                    veil.classList.remove("playing");
                }, 1200);

window.dispatchEvent(new CustomEvent("luxury-mode-change", {
                    detail: {
                        mode: appMode,
                        force: true,
                        targetDate,
                        pomodoro: clone(pomodoro)
                    }
                }));
            }

function updateStage(force = false) {
                window.dispatchEvent(new CustomEvent("luxury-stage-update", {
                    detail: {
                        mode: appMode,
                        force,
                        targetDate,
                        pomodoro: clone(pomodoro)
                    }
                }));
            }

function completePomodoro() {
                if (pomodoro.mode === "focus") {
                    pomodoro.completedFocus++;
                    pomodoro.streak++;
                } else {
                    pomodoro.completedBreaks++;
                }

chime();

pomodoro.mode = nextMode();
                pomodoro.remaining = modeDuration(pomodoro.mode);
                pomodoro.running = pomodoro.settings.autoStart;
                pomodoro.active = true;
                pomodoro.lastPauseAt = null;

savePomodoro();
                renderPomodoro();
                playCinematic("pomodoro");
            }

function smartPauseHandoff() {
                if (!pomodoro.settings.smartPause) {
                    return false;
                }

const duration = modeDuration();
                const elapsed = duration - pomodoro.remaining;
                const ratio = elapsed / Math.max(1, duration);

if (pomodoro.mode === "focus") {
                    pomodoro.pausePatterns.focusPaused++;

if (ratio >= .55) {
                        pomodoro.completedFocus++;
                        pomodoro.streak++;
                        pomodoro.mode = nextMode();
                        pomodoro.remaining = modeDuration(pomodoro.mode);
                        pomodoro.running = true;
                        pomodoro.active = true;
                        savePomodoro();
                        renderPomodoro();
                        playCinematic("pomodoro");
                        return true;
                    }
                } else {
                    pomodoro.pausePatterns.breakPaused++;

if (ratio >= .25) {
                        pomodoro.completedBreaks++;
                        pomodoro.mode = "focus";
                        pomodoro.remaining = modeDuration("focus");
                        pomodoro.running = true;
                        pomodoro.active = true;
                        savePomodoro();
                        renderPomodoro();
                        playCinematic("pomodoro");
                        return true;
                    }
                }

return false;
            }

function tickPomodoro() {
                const now = Date.now();
                const delta = Math.floor((now - lastTick) / 1000);

if (delta <= 0) {
                    return;
                }

lastTick += delta * 1000;

if (!pomodoro.running) {
                    return;
                }

pomodoro.remaining -= delta;

if (pomodoro.remaining <= 0) {
                    pomodoro.remaining = 0;
                    completePomodoro();
                    return;
                }

pomodoro.active = true;
                savePomodoro();
                renderPomodoro();

if (appMode === "pomodoro") {
                    updateStage(false);
                }
            }

pomodoroToggle.addEventListener("click", () => {
                pomodoroPanel.classList.toggle("open");
            });

pomodoroStartPause.addEventListener("click", () => {
                lastTick = Date.now();
                pomodoro.active = true;

if (pomodoro.running) {
                    pomodoro.running = false;
                    pomodoro.lastPauseAt = Date.now();

if (smartPauseHandoff()) {
                        return;
                    }
                } else {
                    if (pomodoro.lastPauseAt && Date.now() - pomodoro.lastPauseAt < 90000) {
                        pomodoro.pausePatterns.quickResume++;
                    }

pomodoro.running = true;
                    pomodoro.lastPauseAt = null;
                }

savePomodoro();
                renderPomodoro();
                playCinematic("pomodoro");
            });

pomodoroSkip.addEventListener("click", () => {
                pomodoro.active = true;
                completePomodoro();
            });

pomodoroReset.addEventListener("click", () => {
                pomodoro.active = true;
                pomodoro.running = false;
                pomodoro.remaining = modeDuration();
                pomodoro.lastPauseAt = null;

savePomodoro();
                renderPomodoro();
                playCinematic("pomodoro");
            });

pomodoroClear.addEventListener("click", () => {
                pomodoro = clone(defaults);
                savePomodoro();
                renderPomodoro();
                playCinematic("clock");
            });

document.querySelectorAll("[data-preset]").forEach((button) => {
                button.addEventListener("click", () => {
                    const preset = {
                        classic: { focus: 25, short: 5, long: 15, every: 4 },
                        deep: { focus: 50, short: 10, long: 25, every: 3 },
                        sprint: { focus: 15, short: 3, long: 10, every: 4 }
                    }[button.dataset.preset];

pomodoro.settings.focus = preset.focus;
                    pomodoro.settings.short = preset.short;
                    pomodoro.settings.long = preset.long;
                    pomodoro.settings.every = preset.every;
                    pomodoro.mode = "focus";
                    pomodoro.remaining = modeDuration("focus");
                    pomodoro.running = false;
                    pomodoro.active = true;

savePomodoro();
                    renderPomodoro();
                    playCinematic("pomodoro");
                });
            });

[
                pomodoroFocusInput,
                pomodoroShortInput,
                pomodoroLongInput,
                pomodoroEveryInput,
                pomodoroAutoStart,
                pomodoroSmartPause,
                pomodoroSound
            ].forEach((control) => {
                control.addEventListener("change", () => {
                    pomodoro.settings.focus = clampNumber(pomodoroFocusInput.value, 1, 180, 25);
                    pomodoro.settings.short = clampNumber(pomodoroShortInput.value, 1, 90, 5);
                    pomodoro.settings.long = clampNumber(pomodoroLongInput.value, 1, 180, 15);
                    pomodoro.settings.every = clampNumber(pomodoroEveryInput.value, 2, 12, 4);
                    pomodoro.settings.autoStart = pomodoroAutoStart.checked;
                    pomodoro.settings.smartPause = pomodoroSmartPause.checked;
                    pomodoro.settings.sound = pomodoroSound.checked;

if (!pomodoro.running) {
                        pomodoro.remaining = Math.min(pomodoro.remaining, modeDuration());
                    }

savePomodoro();
                    renderPomodoro();

if (pomodoro.active) {
                        playCinematic("pomodoro");
                    }
                });
            });

applyTargetDate.addEventListener("click", () => {
                const parsed = new Date(targetDateTimeInput.value).getTime();

if (Number.isNaN(parsed)) {
                    return;
                }

targetDate = parsed;
                localStorage.setItem(TARGET_KEY, String(targetDate));
                playCinematic("countdown");
            });

returnClockMode.addEventListener("click", () => {
                pomodoro.active = false;
                pomodoro.running = false;
                savePomodoro();
                renderPomodoro();
                playCinematic("clock");
            });

targetDateTimeInput.addEventListener("keydown", (event) => {
                if (event.key === "Enter") {
                    applyTargetDate.click();
                }
            });

window.addEventListener("luxury-three-ready", () => {
                renderPomodoro();
                updateStage(true);

if (pomodoro.active) {
                    playCinematic("pomodoro");
                }
            });

renderPomodoro();

setInterval(tickPomodoro, 250);
            setInterval(() => updateStage(false), 1000);
        })();
    </script>

const app = document.getElementById("luxury-countdown-app");
        const mount = document.getElementById("three-countdown-stage");
        const mainTitle = document.getElementById("mainTitle");
        const mainSubtitle = document.getElementById("mainSubtitle");
        const liveDateLine = document.getElementById("liveDateLine");
        const countdownLabels = document.getElementById("countdownLabels");

const pad = (value, length = 2) => String(Math.max(0, Math.floor(value))).padStart(length, "0");

const ordinal = (number) => {
            const rem10 = number % 10;
            const rem100 = number % 100;

if (rem10 === 1 && rem100 !== 11) return `${number}st`;
            if (rem10 === 2 && rem100 !== 12) return `${number}nd`;
            if (rem10 === 3 && rem100 !== 13) return `${number}rd`;

return `${number}th`;
        };

const scene = new THREE.Scene();
        scene.background = new THREE.Color(0x05070d);
        scene.fog = new THREE.FogExp2(0x05070d, 0.05);

const renderer = new THREE.WebGLRenderer({
            antialias: true,
            alpha: false,
            powerPreference: "high-performance"
        });

renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 1.75));
        renderer.setSize(mount.clientWidth, mount.clientHeight);
        renderer.shadowMap.enabled = true;
        renderer.shadowMap.type = THREE.PCFSoftShadowMap;
        renderer.outputColorSpace = THREE.SRGBColorSpace;
        renderer.toneMapping = THREE.ACESFilmicToneMapping;
        renderer.toneMappingExposure = 1.12;
        mount.appendChild(renderer.domElement);

const camera = new THREE.PerspectiveCamera(36, mount.clientWidth / mount.clientHeight, 0.1, 100);
        camera.position.set(0, 4.15, 11.7);
        camera.lookAt(0, 0.2, 0);

const sceneClock = new THREE.Clock();
        const textureCache = new Map();
        const materialCache = new Map();

const hemi = new THREE.HemisphereLight(0xfff4dd, 0x111827, 0.82);
        scene.add(hemi);

const keyLight = new THREE.SpotLight(0xffdfad, 410, 28, Math.PI * 0.15, 0.57, 1.24);
        keyLight.position.set(-5.7, 8.9, 6.9);
        keyLight.target.position.set(0.15, 0.18, 0.15);
        keyLight.castShadow = true;
        keyLight.shadow.mapSize.set(3072, 3072);
        keyLight.shadow.camera.near = 0.4;
        keyLight.shadow.camera.far = 34;
        keyLight.shadow.camera.fov = 32;
        keyLight.shadow.bias = -0.00004;
        keyLight.shadow.normalBias = 0.035;
        keyLight.shadow.radius = 6;
        scene.add(keyLight, keyLight.target);

const crossLight = new THREE.SpotLight(0xffaf66, 145, 22, Math.PI * 0.19, 0.62, 1.18);
        crossLight.position.set(5.8, 5.6, 4.8);
        crossLight.target.position.set(-0.65, -0.12, 0.05);
        crossLight.castShadow = true;
        crossLight.shadow.mapSize.set(1536, 1536);
        crossLight.shadow.camera.near = 0.5;
        crossLight.shadow.camera.far = 26;
        crossLight.shadow.camera.fov = 40;
        crossLight.shadow.bias = -0.000035;
        crossLight.shadow.normalBias = 0.035;
        crossLight.shadow.radius = 5;
        scene.add(crossLight, crossLight.target);

const rimLight = new THREE.SpotLight(0xbfd7ff, 82, 22, Math.PI * 0.2, 0.5, 1.2);
        rimLight.position.set(5.6, 4.6, -4.6);
        rimLight.target.position.set(0, 0.18, 0);
        scene.add(rimLight, rimLight.target);

const deskWarmLight = new THREE.PointLight(0xff9f55, 34, 8, 2);
        deskWarmLight.position.set(0, 0.28, 2.75);
        scene.add(deskWarmLight);

function makeWoodTexture() {
            const c = document.createElement("canvas");
            c.width = 1200;
            c.height = 900;

const ctx = c.getContext("2d");
            const g = ctx.createLinearGradient(0, 0, c.width, c.height);

g.addColorStop(0, "#27150c");
            g.addColorStop(0.24, "#6d4325");
            g.addColorStop(0.52, "#3a2012");
            g.addColorStop(0.78, "#8a5732");
            g.addColorStop(1, "#1b0d07");

ctx.fillStyle = g;
            ctx.fillRect(0, 0, c.width, c.height);

for (let i = 0; i < 620; i++) {
                const y = Math.random() * c.height;

ctx.beginPath();
                ctx.moveTo(-120, y);

for (let x = -120; x <= c.width + 120; x += 72) {
                    ctx.lineTo(
                        x,
                        y +
                        Math.sin(x * 0.009 + i * 0.31) * (6 + Math.random() * 18) +
                        Math.sin(x * 0.026 + i) * (1 + Math.random() * 5)
                    );
                }

ctx.strokeStyle = Math.random() > 0.52
                    ? `rgba(255, 220, 160, ${0.035 + Math.random() * 0.09})`
                    : `rgba(18, 8, 3, ${0.035 + Math.random() * 0.09})`;

ctx.lineWidth = 0.4 + Math.random() * 3.2;
                ctx.stroke();
            }

const texture = new THREE.CanvasTexture(c);
            texture.colorSpace = THREE.SRGBColorSpace;
            texture.wrapS = THREE.RepeatWrapping;
            texture.wrapT = THREE.RepeatWrapping;
            texture.repeat.set(2.8, 1.75);
            texture.anisotropy = 12;

return texture;
        }

function makeLeatherNumberTexture(value, digits = 2) {
            const textValue = String(value);
            const key = `${digits}:${textValue}`;

if (textureCache.has(key)) {
                return textureCache.get(key);
            }

const c = document.createElement("canvas");
            c.width = 768;
            c.height = 768;

const ctx = c.getContext("2d");
            const leather = ctx.createRadialGradient(265, 170, 60, 384, 405, 650);

leather.addColorStop(0, "#742b1f");
            leather.addColorStop(0.28, "#471710");
            leather.addColorStop(0.68, "#1b0806");
            leather.addColorStop(1, "#070202");

ctx.fillStyle = leather;
            ctx.fillRect(0, 0, c.width, c.height);

for (let i = 0; i < 22000; i++) {
                ctx.fillStyle = Math.random() > 0.52
                    ? `rgba(255, 214, 176, ${Math.random() * 0.08})`
                    : `rgba(0, 0, 0, ${Math.random() * 0.08})`;

ctx.fillRect(
                    Math.random() * c.width,
                    Math.random() * c.height,
                    Math.random() * 1.45,
                    Math.random() * 1.45
                );
            }

const border = ctx.createLinearGradient(0, 0, c.width, c.height);

border.addColorStop(0, "rgba(255,220,170,.42)");
            border.addColorStop(0.46, "rgba(60,16,10,.1)");
            border.addColorStop(1, "rgba(0,0,0,.62)");

ctx.lineWidth = 26;
            ctx.strokeStyle = border;
            ctx.strokeRect(26, 26, c.width - 52, c.height - 52);

ctx.save();
            ctx.strokeStyle = "rgba(255, 204, 154, .16)";
            ctx.lineWidth = 3;
            ctx.setLineDash([14, 14]);
            ctx.strokeRect(56, 56, c.width - 112, c.height - 112);
            ctx.restore();

const isWord = /[A-Za-z\u0600-\u06FF]/.test(textValue);
            const fontSize = isWord ? (textValue.length > 4 ? 118 : 156) : (digits >= 3 ? 248 : 292);

if (textValue.length) {
                ctx.font = `950 ${fontSize}px ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial`;
                ctx.textAlign = "center";
                ctx.textBaseline = "middle";

ctx.save();
                ctx.globalCompositeOperation = "multiply";
                ctx.lineJoin = "round";
                ctx.lineCap = "round";
                ctx.shadowColor = "rgba(0,0,0,.96)";
                ctx.shadowBlur = 22;
                ctx.shadowOffsetY = 17;
                ctx.strokeStyle = "rgba(2, 1, 1, .92)";
                ctx.lineWidth = isWord ? 18 : 30;
                ctx.strokeText(textValue, 384, 396);
                ctx.fillStyle = "rgba(8, 3, 2, .8)";
                ctx.fillText(textValue, 384, 396);
                ctx.restore();

ctx.save();
                ctx.globalCompositeOperation = "screen";
                ctx.strokeStyle = "rgba(255, 224, 186, .37)";
                ctx.lineWidth = isWord ? 4 : 7;
                ctx.strokeText(textValue, 379, 375);
                ctx.fillStyle = "rgba(255, 238, 212, .12)";
                ctx.fillText(textValue, 378, 374);
                ctx.restore();
            }

const gloss = ctx.createLinearGradient(0, 0, c.width, c.height);
            gloss.addColorStop(0, "rgba(255,255,255,.31)");
            gloss.addColorStop(0.19, "rgba(255,255,255,.06)");
            gloss.addColorStop(0.42, "rgba(255,255,255,0)");
            gloss.addColorStop(1, "rgba(0,0,0,.22)");

ctx.fillStyle = gloss;
            ctx.fillRect(0, 0, c.width, c.height);

const texture = new THREE.CanvasTexture(c);
            texture.colorSpace = THREE.SRGBColorSpace;
            texture.anisotropy = 12;
            texture.needsUpdate = true;

textureCache.set(key, texture);

return texture;
        }

function makeLeatherMaterial(value, digits = 2) {
            const key = `mat:${digits}:${value}`;

if (materialCache.has(key)) {
                return materialCache.get(key);
            }

const material = new THREE.MeshPhysicalMaterial({
                map: makeLeatherNumberTexture(value, digits),
                color: 0xffffff,
                roughness: 0.74,
                metalness: 0.025,
                clearcoat: 0.72,
                clearcoatRoughness: 0.48,
                sheen: 0.76,
                sheenColor: new THREE.Color(0x9b3b28),
                sheenRoughness: 0.67
            });

materialCache.set(key, material);

return material;
        }

const sideMaterial = makeLeatherMaterial("", 2);

const desk = new THREE.Mesh(
            new THREE.BoxGeometry(18, 0.62, 9.5),
            new THREE.MeshPhysicalMaterial({
                map: makeWoodTexture(),
                color: 0xffffff,
                roughness: 0.48,
                metalness: 0.055,
                clearcoat: 0.88,
                clearcoatRoughness: 0.26
            })
        );

desk.position.set(0, -1.55, 0.72);
        desk.receiveShadow = true;
        desk.castShadow = true;
        scene.add(desk);

const deskFront = new THREE.Mesh(
            new THREE.BoxGeometry(18.2, 2.4, 0.38),
            new THREE.MeshStandardMaterial({
                color: 0x1f120b,
                roughness: 0.8,
                metalness: 0.04
            })
        );

deskFront.position.set(0, -2.55, 5.28);
        deskFront.receiveShadow = true;
        scene.add(deskFront);

const backWall = new THREE.Mesh(
            new THREE.PlaneGeometry(26, 15),
            new THREE.MeshStandardMaterial({
                color: 0x080d15,
                roughness: 0.92,
                metalness: 0
            })
        );

backWall.position.set(0, 3, -5.65);
        backWall.receiveShadow = true;
        scene.add(backWall);

const shadowCatcher = new THREE.Mesh(
            new THREE.PlaneGeometry(11.8, 4.1),
            new THREE.ShadowMaterial({
                opacity: 0.46,
                transparent: true
            })
        );

shadowCatcher.position.set(0, -1.222, 0.55);
        shadowCatcher.rotation.x = -Math.PI / 2;
        shadowCatcher.receiveShadow = true;
        scene.add(shadowCatcher);

const stageGlow = new THREE.Mesh(
            new THREE.CircleGeometry(5.5, 96),
            new THREE.MeshBasicMaterial({
                color: 0xffb46b,
                transparent: true,
                opacity: 0.13,
                depthWrite: false
            })
        );

stageGlow.position.set(0, -1.224, 1.72);
        stageGlow.rotation.x = -Math.PI / 2;
        scene.add(stageGlow);

const cubeGeometry = new RoundedBoxGeometry(1.82, 1.82, 1.82, 8, 0.18);

class FlipCube {
            constructor(x) {
                this.value = null;
                this.nextValue = null;
                this.digits = 2;
                this.nextDigits = 2;
                this.isFlipping = false;
                this.startTime = 0;
                this.duration = 0.9;
                this.baseX = x;

this.group = new THREE.Group();
                this.group.position.set(x, 0.04, 0.08);
                this.group.rotation.set(-0.06, 0, 0);

this.cube = new THREE.Mesh(cubeGeometry, [
                    sideMaterial,
                    sideMaterial,
                    sideMaterial,
                    sideMaterial,
                    sideMaterial,
                    sideMaterial
                ]);

this.cube.castShadow = true;
                this.cube.receiveShadow = true;
                this.group.add(this.cube);

this.contactShadow = new THREE.Mesh(
                    new THREE.CircleGeometry(1.35, 48),
                    new THREE.MeshBasicMaterial({
                        color: 0x000000,
                        transparent: true,
                        opacity: 0.18,
                        depthWrite: false
                    })
                );

this.contactShadow.position.set(x, -1.212, 0.28);
                this.contactShadow.rotation.x = -Math.PI / 2;
                this.contactShadow.scale.set(1.25, 0.46, 1);

scene.add(this.contactShadow);
                scene.add(this.group);
            }

setMaterials(frontValue, topValue, frontDigits, topDigits) {
                this.cube.material = [
                    sideMaterial,
                    sideMaterial,
                    makeLeatherMaterial(topValue, topDigits),
                    sideMaterial,
                    makeLeatherMaterial(frontValue, frontDigits),
                    sideMaterial
                ];
            }

setInitial(value, digits = 2) {
                this.value = value;
                this.nextValue = null;
                this.digits = digits;
                this.nextDigits = digits;
                this.isFlipping = false;
                this.cube.rotation.x = 0;
                this.group.rotation.z = 0;
                this.group.position.y = 0.04;
                this.setMaterials(value, value, digits, digits);
            }

flipTo(value, digits = 2) {
                if (this.value === null || this.digits !== digits) {
                    this.setInitial(value, digits);
                    return;
                }

if (this.value === value || this.isFlipping) {
                    return;
                }

this.nextValue = value;
                this.nextDigits = digits;
                this.isFlipping = true;
                this.startTime = sceneClock.elapsedTime;
                this.cube.rotation.x = 0;
                this.group.position.y = 0.04;
                this.group.rotation.z = 0;
                this.setMaterials(this.value, value, this.digits, digits);
            }

update(t, mode) {
                if (!this.isFlipping) {
                    this.group.rotation.y = Math.sin(t * 0.43 + this.baseX) * 0.018;
                    this.contactShadow.material.opacity = 0.18 + Math.sin(t * 0.8 + this.baseX) * 0.015;
                    return;
                }

const p = Math.min((t - this.startTime) / this.duration, 1);
                const ease = p < 0.5 ? 4 * p * p * p : 1 - Math.pow(-2 * p + 2, 3) / 2;
                const sorrowFactor = mode === "pomodoro" ? 0.72 : 1;
                const anticipation = Math.sin(Math.min(p * 2.2, 1) * Math.PI) * -0.045 * sorrowFactor;
                const overshoot = Math.sin(p * Math.PI) * 0.06 * sorrowFactor;
                const settle = Math.sin(p * Math.PI * 3.4) * (1 - p) * 0.028 * sorrowFactor;

this.cube.rotation.x = anticipation + (Math.PI / 2) * ease + overshoot + settle;
                this.group.position.y = 0.04 + Math.sin(p * Math.PI) * (mode === "pomodoro" ? 0.28 : 0.42);
                this.group.rotation.z = Math.sin(p * Math.PI) * 0.02;

const squash = Math.sin(p * Math.PI);
                this.contactShadow.scale.set(1.28 + squash * 0.34, 0.48 + squash * 0.1, 1);
                this.contactShadow.material.opacity = 0.2 + squash * 0.2;

if (p >= 1) {
                    this.value = this.nextValue;
                    this.digits = this.nextDigits;
                    this.nextValue = null;
                    this.isFlipping = false;
                    this.cube.rotation.x = 0;
                    this.group.rotation.z = 0;
                    this.group.position.y = 0.04;
                    this.contactShadow.scale.set(1.25, 0.46, 1);
                    this.contactShadow.material.opacity = 0.18;
                    this.setMaterials(this.value, this.value, this.digits, this.digits);
                }
            }
        }

const cubes = [
            new FlipCube(-4.05),
            new FlipCube(-1.35),
            new FlipCube(1.35),
            new FlipCube(4.05)
        ];

const separators = [];

function makeSeparator(x) {
            const group = new THREE.Group();
            group.position.set(x, 0.05, 0.28);

const material = new THREE.MeshPhysicalMaterial({
                color: 0xd6a46d,
                roughness: 0.25,
                metalness: 0.76,
                clearcoat: 0.82,
                clearcoatRoughness: 0.16
            });

const dotGeo = new THREE.SphereGeometry(0.105, 28, 14);

const top = new THREE.Mesh(dotGeo, material);
            top.position.y = 0.39;
            top.castShadow = true;
            top.receiveShadow = true;

const bottom = new THREE.Mesh(dotGeo, material);
            bottom.position.y = -0.39;
            bottom.castShadow = true;
            bottom.receiveShadow = true;

group.add(top, bottom);
            scene.add(group);
            separators.push(group);
        }

makeSeparator(-2.7);
        makeSeparator(0);
        makeSeparator(2.7);

let stageMode = "clock";
        let stageTargetDate = Date.now();
        let stagePomodoro = null;

function setLabels(items) {
            countdownLabels.innerHTML = items.map((item) => `<span>${item}</span>`).join("");
        }

function getClockParts() {
            const now = new Date();
            const day = now.toLocaleDateString("en-US", { weekday: "short" });
            const month = now.toLocaleDateString("en-US", { month: "long" });

return {
                title: "الوقت الآن",
                subtitle: "Luxury 3D Leather Cube Clock",
                dateLine: `${day} | ${ordinal(now.getDate())} | ${month}`,
                values: [
                    pad(now.getDate(), 2),
                    pad(now.getHours(), 2),
                    pad(now.getMinutes(), 2),
                    pad(now.getSeconds(), 2)
                ],
                digits: [2, 2, 2, 2],
                labels: ["Day", "Hour", "Minute", "Second"]
            };
        }

function getCountdownParts() {
            const distance = stageTargetDate - Date.now();

if (distance <= 0) {
                return {
                    title: "انتهى العد",
                    subtitle: "The countdown has reached silence.",
                    dateLine: "Expired",
                    values: ["000", "00", "00", "00"],
                    digits: [3, 2, 2, 2],
                    labels: ["Days", "Hours", "Minutes", "Seconds"]
                };
            }

const days = Math.floor(distance / 86400000);
            const hours = Math.floor((distance % 86400000) / 3600000);
            const minutes = Math.floor((distance % 3600000) / 60000);
            const seconds = Math.floor((distance % 60000) / 1000);

return {
                title: "عداد تنازلي",
                subtitle: "Luxury 3D Engraved Leather Cube Countdown",
                dateLine: new Date(stageTargetDate).toLocaleString("en-GB", {
                    weekday: "short",
                    day: "2-digit",
                    month: "long",
                    year: "numeric",
                    hour: "2-digit",
                    minute: "2-digit"
                }),
                values: [pad(days, 3), pad(hours), pad(minutes), pad(seconds)],
                digits: [3, 2, 2, 2],
                labels: ["Days", "Hours", "Minutes", "Seconds"]
            };
        }

function getPomodoroParts() {
            const p = stagePomodoro || {
                mode: "focus",
                remaining: 25 * 60,
                running: false
            };

const remaining = Math.max(0, Math.ceil(p.remaining || 0));
            const hours = Math.floor(remaining / 3600);
            const minutes = Math.floor((remaining % 3600) / 60);
            const seconds = remaining % 60;

const phase = p.mode === "longBreak"
                ? "LONG"
                : p.mode === "shortBreak"
                    ? "REST"
                    : "WORK";

return {
                title: "بومودورو",
                subtitle: p.running ? "The room dims. Time becomes heavier." : "Paused under a fading light.",
                dateLine: p.mode === "focus"
                    ? "Work phase — the countdown is now personal"
                    : p.mode === "longBreak"
                        ? "A long pause under low warm light"
                        : "A short silence before the next work session",
                values: [phase, pad(hours, 2), pad(minutes, 2), pad(seconds, 2)],
                digits: [4, 2, 2, 2],
                labels: ["Phase", "Hours", "Minutes", "Seconds"]
            };
        }

function syncStage(force = false) {
            const parts = stageMode === "pomodoro"
                ? getPomodoroParts()
                : stageMode === "countdown"
                    ? getCountdownParts()
                    : getClockParts();

mainTitle.textContent = parts.title;
            mainSubtitle.textContent = parts.subtitle;
            liveDateLine.textContent = parts.dateLine;
            setLabels(parts.labels);

parts.values.forEach((value, index) => {
                if (force) {
                    cubes[index].setInitial(value, parts.digits[index]);
                } else {
                    cubes[index].flipTo(value, parts.digits[index]);
                }
            });
        }

function receivePayload(event) {
            const detail = event.detail || {};

stageMode = detail.mode || stageMode;
            stageTargetDate = detail.targetDate || stageTargetDate;
            stagePomodoro = detail.pomodoro || stagePomodoro;

syncStage(!!detail.force);
        }

window.addEventListener("luxury-mode-change", receivePayload);
        window.addEventListener("luxury-stage-update", receivePayload);

function resize() {
            const w = mount.clientWidth;
            const h = mount.clientHeight;
            const ratio = w / h;

renderer.setSize(w, h);
            camera.aspect = ratio;
            camera.updateProjectionMatrix();

const narrow = w < 780;
            const veryWide = ratio > 2.1;

if (narrow) {
                camera.position.set(0, 4.45, 13.8);

const xs = [-3.25, -1.08, 1.08, 3.25];
                const sepXs = [-2.16, 0, 2.16];

cubes.forEach((cube, index) => {
                    cube.baseX = xs[index];
                    cube.group.position.x = xs[index];
                    cube.contactShadow.position.x = xs[index];
                });

separators.forEach((sep, index) => {
                    sep.position.x = sepXs[index];
                });
            } else {
                camera.position.set(0, veryWide ? 4.0 : 4.15, veryWide ? 10.65 : 11.7);

const xs = [-4.05, -1.35, 1.35, 4.05];
                const sepXs = [-2.7, 0, 2.7];

separators.forEach((sep, index) => {
                    sep.position.x = sepXs[index];
                });
            }

camera.lookAt(0, 0.22, 0);
        }

window.addEventListener("resize", resize, { passive: true });
        resize();

syncStage(true);
        window.dispatchEvent(new CustomEvent("luxury-three-ready"));

function animate() {
            requestAnimationFrame(animate);

const t = sceneClock.getElapsedTime();

cubes.forEach((cube) => cube.update(t, stageMode));

separators.forEach((sep, index) => {
                sep.rotation.y = Math.sin(t * 0.7 + index) * 0.13;
                sep.position.y = 0.05 + Math.sin(t * 2 + index) * 0.018;
            });

if (stageMode === "pomodoro") {
                renderer.toneMappingExposure += (0.62 - renderer.toneMappingExposure) * 0.035;
                keyLight.intensity = 150 + Math.sin(t * 0.55) * 7;
                crossLight.intensity = 55 + Math.sin(t * 0.7 + 1.4) * 5;
                deskWarmLight.intensity = 10 + Math.sin(t * 1.1) * 1.6;
            } else {
                renderer.toneMappingExposure += (1.12 - renderer.toneMappingExposure) * 0.035;
                keyLight.intensity = 390 + Math.sin(t * 0.85) * 24;
                crossLight.intensity = 142 + Math.sin(t * 0.7 + 1.4) * 13;
                deskWarmLight.intensity = 34 + Math.sin(t * 1.25) * 5;
                app.classList.remove("sorrow");
            }

const baseY = mount.clientWidth < 780
                ? 4.45
                : mount.clientWidth / mount.clientHeight > 2.1
                    ? 4.0
                    : 4.15;

const baseZ = mount.clientWidth / mount.clientHeight > 2.1 ? 10.65 : 11.7;
            const sadnessPullback = stageMode === "pomodoro" ? 0.8 : 0;

camera.position.x = Math.sin(t * 0.16) * 0.065;
            camera.position.y += (baseY + Math.sin(t * 0.2) * 0.02 - camera.position.y) * 0.025;
            camera.position.z += (baseZ + sadnessPullback - camera.position.z) * 0.025;
            camera.lookAt(0, 0.22, 0);

renderer.render(scene, camera);
        }

animate();
    </script>
</div>

Related Examples

Simple count down timer

Gopi Yadav

3 years ago

15.6k
3D Count downer

Hasan AlDoy (McDoy)

5 months ago

321
default template

Anonymous

1 year ago

751
Responsive Sign-Up Form with TailwindCSS
Create a visually appealing and fully responsive sign-up form using TailwindCSS. This form includes input fields for full name, mobile number, email, password, and confirm password, along with a gradient sign-up button. Designed with simplicity and flexibility, it is perfect for modern web applications and easy to integrate into any project.

SHARIFUL ISLAM

1 year ago

1.8k
AI Trends Showcase
A clean and modern intelligence feed component for showcasing AI, technology, startup, and research updates with automatic rotation, smooth navigation, and responsive layouts. Perfect For Showcase AI, technology, and innovation stories using a premium editorial-style carousel. Designed with a clean dark aesthetic, automatic slide rotation, interactive breadcrumbs, navigation controls, and a responsive layout that works seamlessly across desktop and mobile devices.

Ayyamperumal S

4 months ago

284
default images playground
an images gallery

mingderwang

4 months ago

113
simple responsive blog layout with sidebar

Isabella Kowalski

3 years ago

10.4k
Todo List
A simple tool to track tasks: add, edit, complete, or delete items to stay organized daily.

Muzammil Riaz

1 year ago

1.6k
spotify web player

Lokesh H

4 months ago

332
card

Raul antonio de la cruz hernandez

9 months ago

753
Verify OTP
Verify OTP

Tanvir Hasan Bappy (Tanvir)

9 months ago

773
Customer support chatbox
Floating chatbox

gmer33

3 years ago

12.2k