<!-- Islamic Date Converter Widget -->
    <div class="bg-white dark:bg-slate-800 p-6 rounded-2xl shadow-sm w-full transition-colors duration-200 border border-gray-100 dark:border-slate-700">
        <label for="gregorianPicker" class="block text-sm font-semibold mb-2 text-slate-800 dark:text-slate-100">Islamic Date Converter</label>
        <input type="date" id="gregorianPicker" class="w-full px-3 py-2 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 focus:outline-none focus:ring-2 focus:ring-blue-500 mb-4">
        <div class="space-y-1 text-sm border-t border-slate-200 dark:border-slate-700 pt-3">
            <div class="flex justify-between">
                <span class="text-slate-500 dark:text-slate-400">Date:</span> 
                <span id="gregorianOutput" class="font-medium text-slate-800 dark:text-slate-100">-</span>
            </div>
            <div class="flex justify-between">
                <span class="text-slate-500 dark:text-slate-400">Hijri:</span> 
                <span id="hijriOutput" class="font-medium text-slate-800 dark:text-slate-100">-</span>
            </div>
        </div>
    </div>

</div>

</div>