Interactive Drag & Drop Kanban Task Board

<!DOCTYPE html>
<html lang="en" class="h-full">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Drag & Drop Kanban Board</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = { darkMode: 'class' };
    </script>
    <style>
        body { font-family: sans-serif; }
        .dragging { opacity: 0.5; transform: scale(0.98); }
    </style>
</head>
<body class="bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-100 min-h-screen p-6 sm:p-10 transition-colors duration-300">

    <header class="max-w-6xl mx-auto mb-8 flex items-center justify-between">
        <div>
            <h1 class="text-2xl sm:text-3xl font-extrabold text-slate-900 dark:text-white">Product Roadmap Kanban</h1>
            <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">Drag task cards between workflow columns</p>
        </div>
        <span class="px-3 py-1 rounded-full bg-cyan-500/10 text-cyan-600 dark:text-cyan-400 border border-cyan-500/20 text-xs font-bold font-mono">
            HTML5 Drag & Drop
        </span>
    </header>

    <main class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-6">
        <!-- Column 1: To Do -->
        <div class="column bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-3xl p-5 space-y-4 shadow-sm" data-status="todo">
            <div class="flex items-center justify-between pb-2 border-b border-slate-100 dark:border-slate-800">
                <span class="text-xs font-extrabold text-slate-500 dark:text-slate-400 uppercase tracking-wider">📋 To Do</span>
                <span class="count bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 text-xs px-2 py-0.5 rounded-full font-bold">2</span>
            </div>
            <div class="task-list space-y-3 min-h-[300px]" ondragover="allowDrop(event)" ondrop="drop(event)">
                <div class="card p-4 bg-slate-50 dark:bg-slate-800 rounded-2xl border border-slate-200 dark:border-slate-700 cursor-grab active:cursor-grabbing space-y-2 shadow-sm" draggable="true" ondragstart="drag(event)" id="task1">
                    <span class="text-[10px] font-bold text-rose-600 dark:text-rose-400 bg-rose-500/10 px-2 py-0.5 rounded-md border border-rose-500/20">High Priority</span>
                    <h3 class="font-bold text-sm text-slate-900 dark:text-white">Design Dark Mode Navigation Bar</h3>
                    <p class="text-xs text-slate-500 dark:text-slate-400">Create smooth CSS blur glassmorphism background token for header.</p>
                </div>
                <div class="card p-4 bg-slate-50 dark:bg-slate-800 rounded-2xl border border-slate-200 dark:border-slate-700 cursor-grab active:cursor-grabbing space-y-2 shadow-sm" draggable="true" ondragstart="drag(event)" id="task2">
                    <span class="text-[10px] font-bold text-amber-600 dark:text-amber-400 bg-amber-500/10 px-2 py-0.5 rounded-md border border-amber-500/20">Medium Priority</span>
                    <h3 class="font-bold text-sm text-slate-900 dark:text-white">Setup Database Migrations</h3>
                    <p class="text-xs text-slate-500 dark:text-slate-400">Define foreign key constraints for project categories and model accessors.</p>
                </div>
            </div>
        </div>

        <!-- Column 2: In Progress -->
        <div class="column bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-3xl p-5 space-y-4 shadow-sm" data-status="in-progress">
            <div class="flex items-center justify-between pb-2 border-b border-slate-100 dark:border-slate-800">
                <span class="text-xs font-extrabold text-cyan-600 dark:text-cyan-400 uppercase tracking-wider">⚡ In Progress</span>
                <span class="count bg-cyan-500/10 text-cyan-600 dark:text-cyan-400 text-xs px-2 py-0.5 rounded-full font-bold">1</span>
            </div>
            <div class="task-list space-y-3 min-h-[300px]" ondragover="allowDrop(event)" ondrop="drop(event)">
                <div class="card p-4 bg-slate-50 dark:bg-slate-800 rounded-2xl border border-cyan-500/30 cursor-grab active:cursor-grabbing space-y-2 shadow-sm" draggable="true" ondragstart="drag(event)" id="task3">
                    <span class="text-[10px] font-bold text-cyan-600 dark:text-cyan-400 bg-cyan-500/10 px-2 py-0.5 rounded-md border border-cyan-500/20">Active Task</span>
                    <h3 class="font-bold text-sm text-slate-900 dark:text-white">Build Live Viewport Frame</h3>
                    <p class="text-xs text-slate-500 dark:text-slate-400">Implement responsive iframe viewport switcher for Desktop, Tablet, and Mobile.</p>
                </div>
            </div>
        </div>

        <!-- Column 3: Done -->
        <div class="column bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-3xl p-5 space-y-4 shadow-sm" data-status="done">
            <div class="flex items-center justify-between pb-2 border-b border-slate-100 dark:border-slate-800">
                <span class="text-xs font-extrabold text-emerald-600 dark:text-emerald-400 uppercase tracking-wider">✅ Completed</span>
                <span class="count bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 text-xs px-2 py-0.5 rounded-full font-bold">1</span>
            </div>
            <div class="task-list space-y-3 min-h-[300px]" ondragover="allowDrop(event)" ondrop="drop(event)">
                <div class="card p-4 bg-slate-50 dark:bg-slate-800 rounded-2xl border border-emerald-500/30 cursor-grab active:cursor-grabbing space-y-2 shadow-sm opacity-80" draggable="true" ondragstart="drag(event)" id="task4">
                    <span class="text-[10px] font-bold text-emerald-600 dark:text-emerald-400 bg-emerald-500/10 px-2 py-0.5 rounded-md border border-emerald-500/20">Verified</span>
                    <h3 class="font-bold text-sm text-slate-900 dark:text-white">Projects Platform Architecture</h3>
                    <p class="text-xs text-slate-500 dark:text-slate-400">Setup Eloquent models, ZIP Archive streamer controller, and routes.</p>
                </div>
            </div>
        </div>
    </main>

    <script>
        function allowDrop(ev) {
            ev.preventDefault();
        }

        function drag(ev) {
            ev.dataTransfer.setData("text", ev.target.id);
            ev.target.classList.add("dragging");
        }

        function drop(ev) {
            ev.preventDefault();
            const data = ev.dataTransfer.getData("text");
            const draggedElement = document.getElementById(data);
            draggedElement.classList.remove("dragging");

            let targetList = ev.target;
            if (!targetList.classList.contains("task-list")) {
                targetList = targetList.closest(".task-list");
            }
            if (targetList) {
                targetList.appendChild(draggedElement);
            }
        }
    </script>
</body>
</html>

/* Supports both Dark and Light mode via Tailwind class variant */

// Interactive scripts included inside demo view file