Glassmorphic Crypto Trading Dashboard Layout

<div
  class="animate-blurIn delay-500 relative overflow-hidden bg-gradient-to-br from-[#0e1311]/95 to-[#0b0f0d]/10 border-white/15 border rounded-2xl shadow-[0_0_80px_rgba(16,185,129,0.25)] backdrop-blur-xl">
  <div class="pointer-events-none absolute inset-x-0 -top-1 h-10 rounded-t-2xl"
    style="background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(16,185,129,0.8) 0%, rgba(16,185,129,0.4) 40%, rgba(16,185,129,0.1) 80%, transparent 100%);">
  </div>
  <div
    class="pointer-events-none absolute inset-x-4 top-1 h-[2px] rounded-full bg-gradient-to-r from-transparent via-white/40 to-transparent">
  </div>

  <div class="grid grid-cols-1 xl:grid-cols-12 gap-4 lg:gap-6 lg:p-6 pt-4 pr-4 pb-4 pl-4"
    style="background: rgba(255,255,255,0.05); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2);">
    <aside class="xl:col-span-3 2xl:col-span-2">
      <div
        class="lg:p-5 bg-black/40 h-full border-white/15 border rounded-xl pt-4 pr-4 pb-4 pl-4 shadow-inner backdrop-blur-sm"
        style="box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 0 20px rgba(0,0,0,0.3);">
        <div class="flex items-center justify-between mb-6">
          <div class="flex items-center gap-3">
            <div
              class="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-emerald-500/20 ring-1 ring-emerald-500/40 shadow-[0_0_15px_rgba(16,185,129,0.5)]">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                class="h-4 w-4 text-emerald-400">
                <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" class=""></path>
              </svg>
            </div>
            <div>
              <p class="text-sm font-semibold tracking-tight text-white">CryptoTrade</p>
              <p class="text-xs text-slate-400">Trading Suite</p>
            </div>
          </div>
        </div>

        <nav class="space-y-1.5 text-sm">
          <a class="flex items-center gap-3 rounded-lg px-3 py-2.5 bg-white/15 text-white font-medium backdrop-blur-sm shadow-sm border border-white/10 transition-all duration-200"
            href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="w-4 h-4 text-emerald-400">
              <rect width="7" height="9" x="3" y="3" rx="1" class=""></rect>
              <rect width="7" height="5" x="14" y="3" rx="1" class=""></rect>
              <rect width="7" height="9" x="14" y="12" rx="1" class=""></rect>
              <rect width="7" height="5" x="3" y="16" rx="1" class=""></rect>
            </svg>
            Dashboard
          </a>
          <a class="flex items-center gap-3 rounded-lg px-3 py-2.5 hover:bg-white/10 text-slate-300 backdrop-blur-sm transition-all duration-200 group"
            href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="w-4 h-4 group-hover:text-white transition-colors duration-200">
              <path d="M3 3v5l7-7" class=""></path>
              <path d="m14 5 4 4L7 20l-4-4" class=""></path>
            </svg>
            Trading
          </a>
          <a class="flex items-center gap-3 rounded-lg px-3 py-2.5 hover:bg-white/10 text-slate-300 backdrop-blur-sm transition-all duration-200 group"
            href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="w-4 h-4 group-hover:text-white transition-colors duration-200">
              <path
                d="M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1"
                class=""></path>
              <path d="M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4" class=""></path>
            </svg>
            Portfolio
          </a>
          <a class="flex items-center gap-3 rounded-lg px-3 py-2.5 hover:bg-white/10 text-slate-300 backdrop-blur-sm transition-all duration-200 group"
            href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="w-4 h-4 group-hover:text-white transition-colors duration-200">
              <path d="M16 7h6v6" class=""></path>
              <path d="m22 7-8.5 8.5-5-5L2 17" class=""></path>
            </svg>
            Analytics
          </a>
          <a class="flex items-center gap-3 rounded-lg px-3 py-2.5 hover:bg-white/10 text-slate-300 backdrop-blur-sm transition-all duration-200 group"
            href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="w-4 h-4 group-hover:text-white transition-colors duration-200">
              <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" class=""></path>
              <path d="M3 3v5h5" class=""></path>
              <path d="M12 7v5l4 2" class=""></path>
            </svg>
            History
          </a>
          <a class="flex items-center gap-3 rounded-lg px-3 py-2.5 hover:bg-white/10 text-slate-300 backdrop-blur-sm transition-all duration-200 group"
            href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="w-4 h-4 group-hover:text-white transition-colors duration-200">
              <path d="M9 12l2 2 4-4" class=""></path>
              <path
                d="M21 12c-.714 0-1.263-.008-1.263 0 0 4.5-3.5 7.5-7.66 8.95a1 1 0  1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1v6"
                class=""></path>
            </svg>
            Security
          </a>
        </nav>

        <div class="mt-auto pt-4 border-t border-white/10">
          <div class="flex items-center gap-3 mb-4">
            <div
              class="ring-2 ring-emerald-400/40 flex w-10 h-10 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/40430c9b-2a63-4dcf-b77b-a5d18739f948_320w.jpg)] bg-cover rounded-full items-center justify-center">

            </div>
            <div class="flex-1 min-w-0">
              <p class="text-sm font-medium text-white truncate">John Doe</p>
              <p class="text-xs text-slate-400 truncate">john@example.com</p>
            </div>
          </div>

          <div class="space-y-2">
            <div class="flex items-center justify-between text-xs">
              <span class="text-slate-400">Account Status</span>
              <div class="flex items-center gap-1">
                <div class="h-2 w-2 bg-emerald-400 rounded-full shadow-[0_0_4px_rgba(16,185,129,0.8)]"></div>
                <span class="text-emerald-300">Pro</span>
              </div>
            </div>

            <div class="flex items-center justify-between text-xs">
              <span class="text-slate-400">2FA Status</span>
              <div class="flex items-center gap-1">
                <div class="h-2 w-2 bg-emerald-400 rounded-full"></div>
                <span class="text-emerald-300">Active</span>
              </div>
            </div>

            <div class="flex items-center justify-between text-xs">
              <span class="text-slate-400">Last Sync</span>
              <span class="text-slate-300">2 min ago</span>
            </div>
          </div>

          <div class="mt-4 pt-3 border-t border-white/10">
            <button class="w-full flex items-center justify-center gap-2 px-3 py-2 text-xs text-slate-300 hover:text-white hover:bg-white/10 rounded-lg transition-all duration-200 group">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3 h-3 group-hover:text-emerald-400 transition-colors duration-200">
          <path d="M9 0 1-2-2V5a2 2 0 0 1 2-2h4" class=""></path>
          <polyline points="16,17 21,12 16,7" class=""></polyline>
          <line x1="21" x2="9" y1="12" y2="12" class=""></line>
        </svg>
        Sign Out
      </button>
          </div>
        </div>
      </div>
    </aside>

    <main class="xl:col-span-9 2xl:col-span-10 space-y-6">
      <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div class="">
          <div class="flex items-center gap-2 text-xs text-slate-400 mb-1">
            <span>Trading</span>
            <span>/</span>
            <span>Dashboard</span>
          </div>
          <h1 class="text-2xl lg:text-3xl font-semibold tracking-tight text-white">Main Dashboard</h1>
        </div>
        <div class="flex items-center gap-3">
          <div class="relative">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400">
              <path d="m21 21-4.34-4.34" class=""></path>
              <circle cx="11" cy="11" r="8" class=""></circle>
            </svg>
            <input class="w-full sm:w-48 lg:w-64 rounded-lg border border-white/15 bg-white/10 pl-9 pr-4 py-2.5 text-sm placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/50 focus:border-emerald-500/50 backdrop-blur-sm transition-all duration-200" placeholder="Search...">
          </div>
          <button class="rounded-lg p-2.5 hover:bg-white/10 backdrop-blur-sm transition-colors duration-200 relative">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 text-slate-300"><path d="M10.268 21a2 2 0 0 0 3.464 0" class=""></path><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" class=""></path></svg>
              <span class="absolute -top-1 -right-1 h-3 w-3 bg-emerald-400 rounded-full animate-pulse"></span>
            </button>
        </div>
      </div>

      <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
        <div
          class="lg:col-span-8 rounded-xl border border-white/15 bg-black/40 p-6 backdrop-blur-sm relative overflow-hidden shadow-lg"
          style="box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 30px rgba(16,185,129,0.1);">
          <div class="pointer-events-none absolute inset-1 rounded-lg"
            style="background: radial-gradient(ellipse 70% 50% at 50% 20%, rgba(16,185,129,0.12), transparent 70%);">
          </div>

          <div class="relative flex flex-col lg:flex-row lg:items-start lg:justify-between gap-6">
            <div class="">
              <p class="text-sm text-slate-400 font-medium">Balance</p>
              <div class="mt-2 flex flex-wrap items-baseline gap-3">
                <span class="text-4xl lg:text-5xl font-semibold tracking-tight text-white">€22,193.05</span>
                <span class="text-sm font-medium text-emerald-400 bg-emerald-400/10 px-3 py-1 rounded-full">+47.3%</span>
              </div>
            </div>

            <div class="flex items-center gap-4">
              <div class="hidden sm:flex items-center gap-2">
                <button class="rounded-lg px-3 py-2 text-sm bg-white/10 hover:bg-white/15 border border-white/10">1D</button>
                <button class="rounded-lg px-3 py-2 text-sm bg-white/10 hover:bg-white/15 border border-white/10">7D</button>
                <button class="rounded-lg px-3 py-2 text-sm bg-white/10 hover:bg-white/15 border border-white/10">1M</button>
                <button class="rounded-lg px-3 py-2 text-sm bg-white text-black border border-white/10">1Y</button>
              </div>
            </div>
          </div>

          <div class="relative mt-8">
            <div class="relative h-48 lg:h-56">
              <canvas id="mainChart" class="w-full h-full" width="1040" height="448"
                style="display: block; box-sizing: border-box; height: 224px; width: 520px;"></canvas>
            </div>
            <div class="mt-4 grid grid-cols-3 gap-4 text-xs">
              <div class="rounded-lg border border-white/10 bg-white/5 px-3 py-2">
                <p class="text-slate-400">High</p>
                <p class="mt-1 text-white font-medium">€25,400</p>
              </div>
              <div class="rounded-lg border border-white/10 bg-white/5 px-3 py-2">
                <p class="text-slate-400">Low</p>
                <p class="mt-1 text-white font-medium">€14,800</p>
              </div>
              <div class="rounded-lg border border-white/10 bg-white/5 px-3 py-2">
                <p class="text-slate-400">Avg. Monthly</p>
                <p class="mt-1 text-white font-medium">+3.9%</p>
              </div>
            </div>
          </div>
        </div>

        <div class="lg:col-span-4 rounded-xl border border-white/15 bg-black/40 p-5 backdrop-blur-sm shadow-lg"
          style="box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);">
          <h3 class="text-base font-semibold tracking-tight text-white mb-5">Portfolio Distribution</h3>
          <div class="relative h-48">
            <canvas id="pieChart" class="w-full h-full" width="462" height="384"
              style="display: block; box-sizing: border-box; height: 192px; width: 231px;"></canvas>
          </div>
          <div class="mt-4 space-y-2">
            <div class="flex items-center justify-between">
              <div class="flex items-center gap-2">
                <div class="h-3 w-3 rounded-full"
                  style="background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.75) 50%, rgba(255,255,255,0.6) 100%);">
                </div>
                <span class="text-sm text-slate-300">Bitcoin</span>
              </div>
              <span class="text-sm text-white font-medium">45.2%</span>
            </div>
            <div class="flex items-center justify-between">
              <div class="flex items-center gap-2">
                <div class="h-3 w-3 rounded-full"
                  style="background: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.3) 100%);">
                </div>
                <span class="text-sm text-slate-300">Ethereum</span>
              </div>
              <span class="text-sm text-white font-medium">32.8%</span>
            </div>
            <div class="flex items-center justify-between">
              <div class="flex items-center gap-2">
                <div class="h-3 w-3 rounded-full bg-gray-500"></div>
                <span class="text-sm text-slate-300">USDC</span>
              </div>
              <span class="text-sm text-white font-medium">14.7%</span>
            </div>
            <div class="flex items-center justify-between">
              <div class="flex items-center gap-2">
                <div class="h-3 w-3 rounded-full bg-gray-600"></div>
                <span class="text-sm text-slate-300">Others</span>
              </div>
              <span class="text-sm text-white font-medium">7.3%</span>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</div>