Component Wizard v1

<div class="flex flex-col items-center justify-center h-screen bg-gray-100">
    <input type="file" id="filePicker" accept="video/*" class="mb-4 border border-gray-300 rounded p-2 bg-white" />
    <video id="videoPlayer" class="border border-gray-300 rounded" controls width="640" height="360">
        <source id="videoSource" src="" type="video/mp4">
        Your browser does not support the video tag.
    </video>
</div>

<script>
    const filePicker = document.getElementById('filePicker');
    const videoPlayer = document.getElementById('videoPlayer');
    const videoSource = document.getElementById('videoSource');

    filePicker.addEventListener('change', function() {
        const file = filePicker.files[0];
        const fileURL = URL.createObjectURL(file);
        videoSource.src = fileURL;
        videoPlayer.load();
    });
</script>

<div class="max-w-sm mx-auto mt-10 p-6 bg-white rounded-lg shadow-lg">
    <h2 class="text-2xl font-semibold text-center">Calculator</h2>
    <div class="mt-4">
        <input type="text" class="w-full p-2 border rounded" placeholder="0" readonly />
    </div>
    <div class="grid grid-cols-4 gap-4 mt-4">
        <button class="p-4 bg-blue-500 text-white rounded">7</button>
        <button class="p-4 bg-blue-500 text-white rounded">8</button>
        <button class="p-4 bg-blue-500 text-white rounded">9</button>
        <button class="p-4 bg-orange-500 text-white rounded">/</button>
        <button class="p-4 bg-blue-500 text-white rounded">4</button>
        <button class="p-4 bg-blue-500 text-white rounded">5</button>
        <button class="p-4 bg-blue-500 text-white rounded">6</button>
        <button class="p-4 bg-orange-500 text-white rounded">*</button>
        <button class="p-4 bg-blue-500 text-white rounded">1</button>
        <button class="p-4 bg-blue-500 text-white rounded">2</button>
        <button class="p-4 bg-blue-500 text-white rounded">3</button>
        <button class="p-4 bg-orange-500 text-white rounded">-</button>
        <button class="p-4 bg-blue-500 text-white rounded col-span-2">0</button>
        <button class="p-4 bg-blue-500 text-white rounded">.</button>
        <button class="p-4 bg-orange-500 text-white rounded">+</button>
        <button class="p-4 bg-green-500 text-white rounded col-span-4">=</button>
    </div>
</div>

<div class="relative">
    <button class="p-2 text-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-gray-200" onclick="toggleNotificationPanel()">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2 2h20M2 12h20M2 22h20" />
        </svg>
    </button>
    <div id="notification-panel" class="hidden absolute right-0 mt-2 w-80 bg-white shadow-lg rounded-lg overflow-hidden z-20">
        <div class="p-4 border-b">
            <h2 class="text-lg font-semibold">Notifications</h2>
        </div>
        <div class="max-h-60 overflow-y-auto">
            <div class="p-4 border-b">You have 3 new messages.</div>
            <div class="p-4 border-b">Your profile was viewed 5 times.</div>
            <div class="p-4 border-b">New comment on your post.</div>
            <div class="p-4 border-b">Your password was changed successfully.</div>
            <div class="p-4 border-b">Reminder: Meeting scheduled for tomorrow.</div>
        </div>
        <div class="p-2 text-center">
            <button class="text-blue-500 hover:underline">View all notifications</button>
        </div>
    </div>
</div>

<script>
    function toggleNotificationPanel() {
        const panel = document.getElementById('notification-panel');
        panel.classList.toggle('hidden');
    }
</script>