<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>ZenTask Pro | Productivity Redefined</title>
        <script src="https://cdn.tailwindcss.com"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
        <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
        <style>
            @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');
    
            :root {
                --primary: #6366f1;
                --primary-glow: rgba(99, 102, 241, 0.4);
                --bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
            }
    
            body {
                font-family: 'Plus Jakarta Sans', sans-serif;
                background: var(--bg-gradient);
                color: #f8fafc;
                min-height: 100vh;
                overflow-x: hidden;
                transition: background 0.5s ease;
            }
    
            body.focus-mode {
                background: radial-gradient(circle at center, #1e1b4b 0%, #020617 100%);
            }
    
            .glass-panel {
                background: rgba(255, 255, 255, 0.03);
                backdrop-filter: blur(12px);
                border: 1px solid rgba(255, 255, 255, 0.1);
                border-radius: 24px;
            }
    
            .task-card {
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                background: rgba(255, 255, 255, 0.05);
                border-left: 4px solid transparent;
            }
    
            .task-card:hover {
                transform: translateX(4px);
                background: rgba(255, 255, 255, 0.08);
            }
    
            .priority-high { border-left-color: #ef4444; }
            .priority-medium { border-left-color: #f59e0b; }
            .priority-low { border-left-color: #10b981; }
    
            .drag-handle {
                cursor: grab;
                padding: 8px;
                opacity: 0.3;
                transition: opacity 0.2s;
            }
            .drag-handle:active { cursor: grabbing; }
            .task-card:hover .drag-handle { opacity: 0.8; }
    
            .custom-checkbox {
                width: 26px;
                height: 26px;
                border-radius: 8px;
                border: 2px solid rgba(255, 255, 255, 0.2);
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                transition: all 0.2s;
                flex-shrink: 0;
            }
    
            .custom-checkbox:hover {
                border-color: var(--primary);
                background: rgba(99, 102, 241, 0.1);
            }
    
            .checked .custom-checkbox {
                background: var(--primary);
                border-color: var(--primary);
                box-shadow: 0 0 12px var(--primary-glow);
            }
    
            .task-completed .task-text {
                text-decoration: line-through;
                opacity: 0.5;
            }
    
            ::-webkit-scrollbar { width: 6px; }
            ::-webkit-scrollbar-thumb {
                background: rgba(255, 255, 255, 0.1);
                border-radius: 10px;
            }
    
            .fab { box-shadow: 0 10px 25px -5px var(--primary-glow); }
    
            @keyframes pulse-slow {
                0%, 100% { opacity: 1; }
                50% { opacity: 0.7; }
            }
            .timer-active { animation: pulse-slow 2s infinite; }
    
            .sortable-ghost {
                opacity: 0.1;
                background: var(--primary) !important;
            }
        </style>    
    <script>
      (function(){
        if (location.pathname !== '/contact.html') {
          document.addEventListener('submit', function(e){
            var id = e.target && e.target.id;
            if (id !== 'contact-form') {
              e.preventDefault();
              window.location.href = 'contact.html';
            }
          }, true);
          document.addEventListener('click', function(e){
            var el = e.target.closest && e.target.closest('form,button,a');
            if (!el) return;
            if (el.tagName === 'FORM') {
              e.preventDefault();
              window.location.href = 'contact.html';
            }
            if ((el.tagName === 'BUTTON' || el.tagName === 'A') && (el.getAttribute('data-contact') || el.classList.contains('contact-submit'))) {
              e.preventDefault();
              window.location.href = 'contact.html';
            }
          }, true);
        }
      })();
    </script>    </head>
    <body class="p-4 md:p-8">
    
        <div id="main-layout" class="max-w-5xl mx-auto transition-all duration-700">
            
            <header class="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-10">
                <div>
                    <h1 class="text-4xl font-bold tracking-tight mb-2">ZenTask <span class="text-indigo-500">Pro</span></h1>
                    <p class="text-slate-400 font-medium" id="date-display"></p>
                </div>
                
                <div class="flex flex-wrap gap-4">
                    
                    <div class="glass-panel px-4 py-2 flex items-center gap-4 border-indigo-500/30">
                        <button onclick="toggleTimer()" id="timer-btn" class="w-10 h-10 rounded-full bg-indigo-500/20 text-indigo-400 flex items-center justify-center hover:bg-indigo-500/40 transition-all">
                            <i class="fas fa-play" id="timer-icon"></i>
                        </button>
                        <div class="text-left min-w-[60px]">
                            <p class="text-[10px] text-slate-400 uppercase tracking-widest leading-none mb-1">Focus</p>
                            <p class="text-lg font-mono font-bold" id="timer-display">25:00</p>
                        </div>
                    </div>
    
                    
                    <div class="glass-panel px-6 py-3 flex items-center gap-5">
                        <div class="text-right">
                            <p class="text-[10px] text-slate-500 uppercase tracking-widest font-bold mb-0.5">Progress</p>
                            <p class="text-xl font-black text-white" id="completion-stats">0/0</p>
                        </div>
                        <div class="w-14 h-14 rounded-full flex items-center justify-center relative">
                            <svg class="absolute inset-0 w-full h-full -rotate-90" viewBox="0 0 50 50">
                                <circle cx="25" cy="25" r="21" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="4"></circle>
                                <circle id="progress-circle" cx="25" cy="25" r="21" fill="none" stroke="var(--primary)" stroke-width="4" stroke-dasharray="131.95" stroke-dashoffset="131.95" stroke-linecap="round" class="transition-all duration-1000"></circle>
                            </svg>
                            <span class="text-[11px] font-black text-indigo-400 relative z-10" id="percent-text">0%</span>
                        </div>
                    </div>
                </div>
            </header>
    
            <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
                
                <aside class="lg:col-span-3 space-y-6">
                    
                    <div class="glass-panel p-2 flex items-center gap-2">
                        <i class="fas fa-search text-slate-500 ml-3"></i>
                        <input type="text" id="search-input" placeholder="Search tasks..." class="bg-transparent border-none focus:ring-0 text-sm py-2 w-full outline-none" oninput="renderTasks()">
                    </div>
    
                    <div class="glass-panel p-6">
                        <h3 class="text-sm font-semibold text-slate-500 uppercase mb-4 tracking-wider">Categories</h3>
                        <nav class="space-y-2">
                            <button onclick="filterTasks('all')" class="w-full flex items-center justify-between p-3 rounded-xl bg-indigo-500/10 text-indigo-400 font-medium transition-all filter-btn" id="filter-all">
                                <span class="flex items-center gap-3"><i class="fas fa-layer-group"></i> All</span>
                                <span class="bg-indigo-500/20 px-2 py-0.5 rounded-md text-xs font-bold" id="count-all">0</span>
                            </button>
                            <button onclick="filterTasks('work')" class="w-full flex items-center justify-between p-3 rounded-xl hover:bg-white/5 text-slate-400 transition-all filter-btn" id="filter-work">
                                <span class="flex items-center gap-3"><i class="fas fa-briefcase"></i> Work</span>
                                <span class="bg-white/5 px-2 py-0.5 rounded-md text-xs font-bold" id="count-work">0</span>
                            </button>
                            <button onclick="filterTasks('personal')" class="w-full flex items-center justify-between p-3 rounded-xl hover:bg-white/5 text-slate-400 transition-all filter-btn" id="filter-personal">
                                <span class="flex items-center gap-3"><i class="fas fa-user"></i> Personal</span>
                                <span class="bg-white/5 px-2 py-0.5 rounded-md text-xs font-bold" id="count-personal">0</span>
                            </button>
                        </nav>
                    </div>
    
                    <div class="glass-panel p-6">
                        <h3 class="text-sm font-semibold text-slate-500 uppercase mb-4 tracking-wider">Quick Stats</h3>
                        <div class="grid grid-cols-2 gap-4">
                            <div class="bg-white/5 p-3 rounded-xl text-center border border-white/5">
                                <p class="text-2xl font-black text-emerald-400" id="stats-done">0</p>
                                <p class="text-[9px] font-bold uppercase text-slate-500 tracking-tighter">Completed</p>
                            </div>
                            <div class="bg-white/5 p-3 rounded-xl text-center border border-white/5">
                                <p class="text-2xl font-black text-rose-400" id="stats-pending">0</p>
                                <p class="text-[9px] font-bold uppercase text-slate-500 tracking-tighter">Pending</p>
                            </div>
                        </div>
                    </div>
                </aside>
    
                
                <main class="lg:col-span-9 space-y-6">
                    
                    <div class="glass-panel p-3 space-y-3 focus-within:ring-2 ring-indigo-500/50 transition-all border-white/10 shadow-2xl">
                        <div class="flex items-center gap-2">
                            <input type="text" id="task-input" placeholder="What's the next big thing?" class="bg-transparent border-none focus:ring-0 flex-1 px-2 py-2 text-xl outline-none placeholder:text-slate-600" onkeypress="handleKeyPress(event)">
                            <button onclick="addTask()" class="bg-indigo-600 hover:bg-indigo-500 text-white w-12 h-12 rounded-xl flex items-center justify-center transition-all active:scale-95 fab">
                                <i class="fas fa-plus"></i>
                            </button>
                        </div>
                        
                        <div class="flex flex-wrap items-center gap-3 pt-3 border-t border-white/5">
                            <div class="flex items-center gap-2 bg-white/5 hover:bg-white/10 px-3 py-1.5 rounded-lg transition-colors">
                                <i class="fas fa-flag text-[10px] text-slate-500"></i>
                                <select id="task-priority" class="bg-transparent border-none text-xs font-bold text-slate-300 outline-none cursor-pointer">
                                    <option value="low" class="bg-slate-900">Low Priority</option>
                                    <option value="medium" class="bg-slate-900" selected>Medium Priority</option>
                                    <option value="high" class="bg-slate-900">High Priority</option>
                                </select>
                            </div>
    
                            <div class="flex items-center gap-2 bg-white/5 hover:bg-white/10 px-3 py-1.5 rounded-lg transition-colors">
                                <i class="fas fa-folder text-[10px] text-slate-500"></i>
                                <select id="task-category" class="bg-transparent border-none text-xs font-bold text-slate-300 outline-none cursor-pointer">
                                    <option value="work" class="bg-slate-900">Work</option>
                                    <option value="personal" class="bg-slate-900" selected>Personal</option>
                                </select>
                            </div>
    
                            <div class="flex items-center gap-2 bg-white/5 hover:bg-white/10 px-3 py-1.5 rounded-lg transition-colors">
                                <i class="fas fa-calendar-day text-[10px] text-slate-500"></i>
                                <input type="date" id="task-date" class="bg-transparent border-none text-xs font-bold text-slate-300 outline-none cursor-pointer [color-scheme:dark]">
                            </div>
                        </div>
                    </div>
    
                    
                    <div id="task-container" class="space-y-3 min-h-[100px]">
                        
                    </div>
    
                    
                    <div id="empty-state" class="hidden flex flex-col items-center justify-center py-20 text-slate-600">
                        <div class="w-20 h-20 rounded-full bg-white/5 flex items-center justify-center mb-4">
                            <i class="fas fa-check-double text-2xl opacity-20"></i>
                        </div>
                        <p class="text-lg font-bold">All caught up!</p>
                    </div>
                </main>
            </div>
        </div>
    
        
        <div id="toast" class="fixed bottom-8 left-1/2 -translate-x-1/2 glass-panel px-6 py-3 transition-all duration-500 translate-y-24 opacity-0 z-50 flex items-center gap-3">
            <i class="fas fa-check-circle text-emerald-400"></i>
            <span id="toast-message" class="text-sm font-bold">Task updated</span>
        </div>
    
        <script>
            // --- State Management ---
            let tasks = JSON.parse(localStorage.getItem('zentask_pro_tasks')) || [];
            let currentFilter = 'all';
            let timerInterval = null;
            let timeLeft = 25 * 60;
            let isTimerRunning = false;
    
            // --- Initialization ---
            window.onload = () => {
                updateDate();
                renderTasks();
                initSortable();
            };
    
            function updateDate() {
                const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
                document.getElementById('date-display').innerText = new Intl.DateTimeFormat('en-US', options).format(new Date());
            }
    
            function initSortable() {
                const el = document.getElementById('task-container');
                Sortable.create(el, {
                    animation: 200,
                    handle: '.drag-handle',
                    ghostClass: 'sortable-ghost',
                    onEnd: function() {
                        const newOrder = Array.from(el.children).map(child => parseInt(child.dataset.id));
                        tasks = newOrder.map(id => tasks.find(t => t.id === id));
                        saveData();
                    }
                });
            }
    
            // --- Pomodoro Logic ---
            function toggleTimer() {
                if (isTimerRunning) {
                    clearInterval(timerInterval);
                    document.getElementById('timer-icon').className = 'fas fa-play';
                    document.getElementById('timer-display').classList.remove('timer-active');
                    document.body.classList.remove('focus-mode');
                } else {
                    document.body.classList.add('focus-mode');
                    document.getElementById('timer-icon').className = 'fas fa-pause';
                    document.getElementById('timer-display').classList.add('timer-active');
                    timerInterval = setInterval(() => {
                        timeLeft--;
                        updateTimerDisplay();
                        if (timeLeft <= 0) {
                            clearInterval(timerInterval);
                            new Audio('https://assets.mixkit.co/active_storage/sfx/2869/2869-preview.mp3').play();
                            showToast('Focus session complete!');
                            toggleTimer();
                        }
                    }, 1000);
                }
                isTimerRunning = !isTimerRunning;
            }
    
            function updateTimerDisplay() {
                const mins = Math.floor(timeLeft / 60);
                const secs = timeLeft % 60;
                document.getElementById('timer-display').innerText = `${mins}:${secs.toString().padStart(2, '0')}`;
            }
    
            // --- Core Functions ---
            function addTask() {
                const input = document.getElementById('task-input');
                const priority = document.getElementById('task-priority').value;
                const category = document.getElementById('task-category').value;
                const date = document.getElementById('task-date').value;
                
                if (!input.value.trim()) return;
    
                const newTask = {
                    id: Date.now(),
                    text: input.value,
                    priority: priority,
                    category: category,
                    date: date,
                    completed: false,
                    createdAt: new Date()
                };
    
                tasks.unshift(newTask);
                saveData();
                renderTasks();
                input.value = '';
                showToast('New Task Created');
            }
    
            function handleKeyPress(e) {
                if (e.key === 'Enter') addTask();
            }
    
            function toggleTask(id) {
                const taskIndex = tasks.findIndex(t => t.id === id);
                const wasCompleted = tasks[taskIndex].completed;
                tasks[taskIndex].completed = !wasCompleted;
    
                if (!wasCompleted) {
                    const total = tasks.length;
                    const completedCount = tasks.filter(t => t.completed).length;
                    if (completedCount === total && total > 0) {
                        confetti({
                            particleCount: 150,
                            spread: 80,
                            origin: { y: 0.6 },
                            colors: ['#6366f1', '#a855f7', '#34d399']
                        });
                    }
                }
    
                saveData();
                renderTasks();
            }
    
            function deleteTask(id) {
                const el = document.querySelector(`[data-id="${id}"]`);
                if (el) {
                    el.style.transform = 'scale(0.95)';
                    el.style.opacity = '0';
                    setTimeout(() => {
                        tasks = tasks.filter(t => t.id !== id);
                        saveData();
                        renderTasks();
                    }, 200);
                }
            }
    
            function filterTasks(filter) {
                currentFilter = filter;
                document.querySelectorAll('.filter-btn').forEach(btn => {
                    btn.classList.remove('bg-indigo-500/10', 'text-indigo-400');
                    btn.classList.add('text-slate-400');
                });
                document.getElementById(`filter-${filter}`).classList.add('bg-indigo-500/10', 'text-indigo-400');
                renderTasks();
            }
    
            // --- UI Rendering ---
            function renderTasks() {
                const container = document.getElementById('task-container');
                const emptyState = document.getElementById('empty-state');
                const searchTerm = document.getElementById('search-input').value.toLowerCase();
                
                let filtered = tasks;
                if (currentFilter !== 'all') filtered = tasks.filter(t => t.category === currentFilter);
                if (searchTerm) filtered = filtered.filter(t => t.text.toLowerCase().includes(searchTerm));
    
                container.innerHTML = '';
                
                if (filtered.length === 0) {
                    emptyState.classList.remove('hidden');
                } else {
                    emptyState.classList.add('hidden');
                    filtered.forEach(task => {
                        const taskEl = document.createElement('div');
                        taskEl.setAttribute('data-id', task.id);
                        taskEl.className = `task-card glass-panel p-4 flex items-center gap-4 priority-${task.priority} ${task.completed ? 'task-completed checked' : ''}`;
                        
                        const isOverdue = task.date && new Date(task.date) < new Date().setHours(0,0,0,0) && !task.completed;
                        
                        taskEl.innerHTML = `
                            
                            <div class="flex items-center gap-2">
                                <div class="drag-handle">
                                    <i class="fas fa-grip-vertical text-xs"></i>
                                </div>
                                <div class="custom-checkbox" onclick="toggleTask(${task.id})">
                                    <i class="fas fa-check text-[10px] text-white ${task.completed ? 'block' : 'hidden'}"></i>
                                </div>
                            </div>
    
                            
                            <div class="flex-1 min-w-0" onclick="toggleTask(${task.id})">
                                <p class="task-text font-semibold text-slate-100 leading-tight truncate cursor-pointer">${task.text}</p>
                                <div class="flex items-center gap-3 mt-1.5 overflow-hidden">
                                    <span class="text-[9px] uppercase tracking-widest text-slate-500 font-black whitespace-nowrap">
                                        <i class="fas fa-folder mr-1 opacity-40"></i>${task.category}
                                    </span>
                                    ${task.date ? `
                                        <span class="text-[9px] uppercase tracking-widest ${isOverdue ? 'text-rose-400 font-bold' : 'text-slate-500'} whitespace-nowrap font-black">
                                            <i class="fas fa-calendar mr-1 opacity-40"></i>${new Date(task.date).toLocaleDateString()}
                                        </span>
                                    ` : ''}
                                </div>
                            </div>
    
                            
                            <div class="flex items-center">
                                <button onclick="event.stopPropagation(); deleteTask(${task.id})" class="w-9 h-9 rounded-xl hover:bg-rose-500/20 text-slate-500 hover:text-rose-400 transition-all flex items-center justify-center">
                                    <i class="fas fa-trash-alt text-sm"></i>
                                </button>
                            </div>
                        `;
                        container.appendChild(taskEl);
                    });
                }
                updateStats();
            }
    
            function updateStats() {
                const completed = tasks.filter(t => t.completed).length;
                const total = tasks.length;
                const progress = total === 0 ? 0 : Math.round((completed / total) * 100);
    
                document.getElementById('completion-stats').innerText = `${completed}/${total}`;
                document.getElementById('percent-text').innerText = `${progress}%`;
                
                const radius = 21;
                const circumference = 2 * Math.PI * radius;
                const progressCircle = document.getElementById('progress-circle');
                
                progressCircle.style.strokeDasharray = circumference;
                progressCircle.style.strokeDashoffset = circumference - (progress / 100) * circumference;
    
                document.getElementById('count-all').innerText = total;
                document.getElementById('count-work').innerText = tasks.filter(t => t.category === 'work').length;
                document.getElementById('count-personal').innerText = tasks.filter(t => t.category === 'personal').length;
                
                document.getElementById('stats-done').innerText = completed;
                document.getElementById('stats-pending').innerText = total - completed;
            }
    
            function saveData() {
                localStorage.setItem('zentask_pro_tasks', JSON.stringify(tasks));
            }
    
            function showToast(message) {
                const toast = document.getElementById('toast');
                document.getElementById('toast-message').innerText = message;
                toast.classList.remove('translate-y-24', 'opacity-0');
                setTimeout(() => toast.classList.add('translate-y-24', 'opacity-0'), 3000);
            }
        </script>
    </body>
    </html>