Floating Neumorphic Cmd + K Command Palette

<!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>Cmd + K Command Palette</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = { darkMode: 'class' };
    </script>
</head>
<body class="bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-100 min-h-screen flex items-center justify-center p-6 transition-colors duration-300">

    <div class="text-center space-y-4">
        <h1 class="text-3xl font-extrabold text-slate-900 dark:text-white">Command Palette Widget</h1>
        <p class="text-xs text-slate-500 dark:text-slate-400">Press <kbd class="px-2 py-1 rounded bg-slate-200 dark:bg-slate-800 font-mono text-cyan-500 font-bold">Cmd + K</kbd> or <kbd class="px-2 py-1 rounded bg-slate-200 dark:bg-slate-800 font-mono text-cyan-500 font-bold">Ctrl + K</kbd> to open</p>
        <button onclick="openModal()" class="px-5 py-2.5 rounded-2xl bg-cyan-500 hover:bg-cyan-400 text-slate-950 font-bold text-xs shadow-lg shadow-cyan-500/20 transition">Open Search Palette</button>
    </div>

    <!-- Modal Backdrop -->
    <div id="paletteModal" class="fixed inset-0 z-50 flex items-start justify-center pt-20 p-4 bg-slate-950/80 backdrop-blur-md hidden">
        <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-3xl max-w-lg w-full p-4 space-y-4 shadow-2xl">
            <!-- Search Input -->
            <div class="flex items-center gap-3 px-3 py-2 border-b border-slate-100 dark:border-slate-800">
                <span class="text-slate-400 text-sm">🔍</span>
                <input type="text" id="paletteSearch" onkeyup="filterItems()" placeholder="Type a command or search..." class="w-full bg-transparent text-slate-900 dark:text-white text-sm focus:outline-none">
                <button onclick="closeModal()" class="text-xs font-mono text-slate-400 hover:text-white">ESC</button>
            </div>

            <!-- List Options -->
            <div id="itemList" class="space-y-1 max-h-64 overflow-y-auto">
                <div class="item flex items-center justify-between p-3 rounded-2xl hover:bg-cyan-500/10 hover:text-cyan-500 cursor-pointer transition">
                    <span class="text-xs font-semibold">📊 Open SaaS Dashboard</span>
                    <span class="text-[10px] font-mono text-slate-400">Navigation</span>
                </div>
                <div class="item flex items-center justify-between p-3 rounded-2xl hover:bg-cyan-500/10 hover:text-cyan-500 cursor-pointer transition">
                    <span class="text-xs font-semibold">⚡ View Kanban Task Board</span>
                    <span class="text-[10px] font-mono text-slate-400">Tool</span>
                </div>
                <div class="item flex items-center justify-between p-3 rounded-2xl hover:bg-cyan-500/10 hover:text-cyan-500 cursor-pointer transition">
                    <span class="text-xs font-semibold">🎨 Change Theme Colors</span>
                    <span class="text-[10px] font-mono text-slate-400">Settings</span>
                </div>
            </div>
        </div>
    </div>

    <script>
        function openModal() {
            document.getElementById("paletteModal").classList.remove("hidden");
            document.getElementById("paletteSearch").focus();
        }
        function closeModal() {
            document.getElementById("paletteModal").classList.add("hidden");
        }
        function filterItems() {
            const query = document.getElementById("paletteSearch").value.toLowerCase();
            const items = document.querySelectorAll("#itemList .item");
            items.forEach(item => {
                const text = item.innerText.toLowerCase();
                item.style.display = text.includes(query) ? "flex" : "none";
            });
        }

        window.addEventListener("keydown", (e) => {
            if ((e.metaKey || e.ctrlKey) && e.key === "k") {
                e.preventDefault();
                openModal();
            }
            if (e.key === "Escape") {
                closeModal();
            }
        });
    </script>
</body>
</html>

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

// Interactive scripts included inside demo view file