bottomnav.html

<div class="fixed bottom-0 left-0 right-0 max-w-md mx-auto z-50 h-24 pointer-events-none">
  <div class="absolute bottom-0 w-full h-16 bg-white dark:bg-brand-card shadow-[0_-10px_20px_rgba(0,0,0,0.05)] nav-cutout pointer-events-auto transition-colors border-t border-gray-100 dark:border-[#2b2532]"></div>
  
  <nav class="absolute bottom-0 w-full h-16 flex justify-between items-center px-10 pointer-events-auto">
    <button class="flex flex-col items-center text-brand-red transition-colors nav-tab-btn" onclick="switchTab('tab-history')">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
      </svg>
      <span class="text-[10px] mt-1 font-semibold">Dashboard</span>
    </button>
    
    <button class="flex flex-col items-center text-gray-400 hover:text-brand-red transition-colors nav-tab-btn" onclick="switchTab('tab-grafik')">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"></path>
      </svg>
      <span class="text-[10px] mt-1 font-semibold">Progress</span>
    </button>
  </nav>

  <div class="absolute bottom-6 left-1/2 -translate-x-1/2 pointer-events-auto">
    <button id="btn-open-modal" class="bg-gradient-to-tr from-brand-red to-red-500 text-white p-4 rounded-full shadow-[0_10px_25px_rgba(255,77,77,0.4)] hover:scale-105 active:scale-95 transition-all flex items-center justify-center">
      <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
      </svg>
    </button>
  </div>
</div>