<!DOCTYPE html>

<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&amp;family=Manrope:wght@300;400;500;600;700;800&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
      tailwind.config = {
        darkMode: "class",
        theme: {
          extend: {
            colors: {
              "surface": "#0b0e14",
              "secondary-fixed-dim": "#ebadff",
              "tertiary": "#afffd1",
              "background": "#0b0e14",
              "inverse-on-surface": "#52555c",
              "on-primary": "#004c5e",
              "surface-container-lowest": "#000000",
              "on-tertiary-container": "#005c3b",
              "surface-container": "#161a21",
              "on-surface": "#ecedf6",
              "secondary": "#dd8bfb",
              "secondary-container": "#6e208c",
              "surface-variant": "#22262f",
              "primary-fixed-dim": "#00c3ed",
              "on-primary-container": "#004253",
              "inverse-primary": "#00687f",
              "on-tertiary": "#006642",
              "surface-container-high": "#1c2028",
              "on-primary-fixed-variant": "#004c5e",
              "tertiary-fixed": "#00ffab",
              "tertiary-container": "#00ffab",
              "on-secondary-fixed-variant": "#792c97",
              "error-dim": "#d7383b",
              "primary": "#72dcff",
              "error": "#ff716c",
              "on-secondary": "#4c0068",
              "surface-tint": "#72dcff",
              "on-tertiary-fixed": "#00472d",
              "on-secondary-fixed": "#580078",
              "inverse-surface": "#f9f9ff",
              "secondary-fixed": "#f2c1ff",
              "primary-fixed": "#00d2ff",
              "surface-container-highest": "#22262f",
              "on-secondary-container": "#f1bfff",
              "outline": "#73757d",
              "on-error-container": "#ffa8a3",
              "on-error": "#490006",
              "surface-bright": "#282c36",
              "primary-dim": "#00c3ed",
              "outline-variant": "#45484f",
              "surface-container-low": "#10131a",
              "on-primary-fixed": "#002c38",
              "surface-dim": "#0b0e14",
              "on-surface-variant": "#a9abb3",
              "tertiary-dim": "#00efa0",
              "on-tertiary-fixed-variant": "#006742",
              "primary-container": "#00d2ff",
              "on-background": "#ecedf6",
              "error-container": "#9f0519",
              "tertiary-fixed-dim": "#00efa0",
              "secondary-dim": "#ce7eec"
            },
            fontFamily: {
              "headline": ["Space Grotesk"],
              "body": ["Manrope"],
              "label": ["Manrope"]
            },
            borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"},
          },
        },
      }
    </script>
<style>
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        .glass-card {
            background: rgba(34, 38, 47, 0.4);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(69, 72, 79, 0.15);
        }
        .neon-glow-blue {
            box-shadow: 0 0 15px rgba(114, 220, 255, 0.3);
        }
    </style>
<style>
    body {
      min-height: max(884px, 100dvh);
    }
  </style>
  </head>
<body class="bg-background text-on-surface font-body selection:bg-primary/30 selection:text-primary min-h-screen">
<!-- TopAppBar -->
<header class="bg-[#0b0e14] fixed top-0 w-full z-50 shadow-[0_8px_32px_rgba(114,220,255,0.06)]">
<div class="flex items-center justify-between px-6 h-16 w-full">
<div class="flex items-center gap-4">
<button class="text-[#72dcff] active:scale-95 transition-transform">
<span class="material-symbols-outlined">menu</span>
</button>
<h1 class="text-2xl font-black text-[#72dcff] uppercase tracking-tighter font-['Space_Grotesk']">CyberPulse</h1>
</div>
<div class="flex items-center gap-4">
<button class="text-[#72dcff] hover:text-[#dd8bfb] transition-colors duration-300 active:scale-95 transition-transform">
<span class="material-symbols-outlined">search</span>
</button>
</div>
</div>
</header>
<main class="pt-20 pb-24 px-4 max-w-2xl mx-auto">
<!-- Search & Filter Section -->
<section class="mb-8 space-y-6">
<div class="relative group">
<div class="absolute inset-y-0 left-4 flex items-center pointer-events-none text-on-surface-variant group-focus-within:text-primary transition-colors">
<span class="material-symbols-outlined text-xl">search</span>
</div>
<input class="w-full bg-surface-container-lowest border-none focus:ring-1 focus:ring-primary rounded-xl py-4 pl-12 pr-4 text-on-surface placeholder:text-on-surface-variant font-medium transition-all" placeholder="Search markets..." type="text"/>
</div>
<!-- Category Tabs -->
<div class="flex items-center gap-2 overflow-x-auto no-scrollbar pb-2">
<button class="px-6 py-2.5 rounded-full bg-primary/10 text-primary font-bold text-sm tracking-wide whitespace-nowrap neon-glow-blue border border-primary/20">
                    All
                </button>
<button class="px-6 py-2.5 rounded-full bg-surface-container-high text-on-surface-variant font-bold text-sm tracking-wide whitespace-nowrap hover:text-on-surface transition-colors">
                    Real-time
                </button>
<button class="px-6 py-2.5 rounded-full bg-surface-container-high text-on-surface-variant font-bold text-sm tracking-wide whitespace-nowrap hover:text-on-surface transition-colors">
                    Hot
                </button>
<button class="px-6 py-2.5 rounded-full bg-surface-container-high text-on-surface-variant font-bold text-sm tracking-wide whitespace-nowrap hover:text-on-surface transition-colors">
                    Favorites
                </button>
</div>
</section>
<!-- Market List -->
<section class="space-y-3">
<div class="flex justify-between px-4 mb-2 text-xs font-bold uppercase tracking-widest text-on-surface-variant">
<span>Trading Pair</span>
<div class="flex gap-12">
<span>Price</span>
<span>24h Change</span>
</div>
</div>
<!-- BTC Row -->
<div class="glass-card p-4 rounded-xl flex items-center justify-between group hover:bg-surface-variant/60 transition-all cursor-pointer">
<div class="flex items-center gap-4">
<div class="w-12 h-12 rounded-full bg-surface-container-highest flex items-center justify-center border border-outline-variant/20">
<img alt="Bitcoin Icon" class="hidden" src="https://lh3.googleusercontent.com/aida-public/AB6AXuApVuPkjAQNdllrEfZFEHmaQw_kpu4_ssXwAmA9wdRljaKU5_uc1JSuSROch2xE6pzAXhAtD8NOQ98CUiHlPpME126eC_II2KBsTeVn-0SeXTJcyw5I2aqQrVZQd48WA842NaucTOxEWdORbQzrdyOoUgBAf0biMAaZ5bqPk_pcdFrD5-Z9mDubPtZ38zGBAqew1Fniw8zSW_Xg06Zu65gHGPn-SjPJAcD4v9JAjc4FTfNsXxRt4JE4-SWI4O3BWy-LS1L1J0YVhRk"/>
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">currency_bitcoin</span>
</div>
<div>
<div class="flex items-center gap-1">
<h3 class="font-headline font-bold text-lg">BTC</h3>
<span class="text-xs text-on-surface-variant">/USDT</span>
</div>
<p class="text-xs text-on-surface-variant font-medium">Bitcoin</p>
</div>
</div>
<div class="flex items-center gap-8">
<div class="text-right">
<p class="font-headline font-bold text-base">64,231.50</p>
<p class="text-[10px] text-on-surface-variant">≈ $64,231.50</p>
</div>
<div class="bg-tertiary/10 text-tertiary px-3 py-1.5 rounded-lg border border-tertiary/20 min-w-[72px] text-center">
<span class="text-xs font-black tracking-tighter">+2.45%</span>
</div>
</div>
</div>
<!-- ETH Row -->
<div class="glass-card p-4 rounded-xl flex items-center justify-between group hover:bg-surface-variant/60 transition-all cursor-pointer">
<div class="flex items-center gap-4">
<div class="w-12 h-12 rounded-full bg-surface-container-highest flex items-center justify-center border border-outline-variant/20">
<span class="material-symbols-outlined text-secondary" style="font-variation-settings: 'FILL' 1;">diamond</span>
</div>
<div>
<div class="flex items-center gap-1">
<h3 class="font-headline font-bold text-lg">ETH</h3>
<span class="text-xs text-on-surface-variant">/USDT</span>
</div>
<p class="text-xs text-on-surface-variant font-medium">Ethereum</p>
</div>
</div>
<div class="flex items-center gap-8">
<div class="text-right">
<p class="font-headline font-bold text-base">3,452.12</p>
<p class="text-[10px] text-on-surface-variant">≈ $3,452.12</p>
</div>
<div class="bg-tertiary/10 text-tertiary px-3 py-1.5 rounded-lg border border-tertiary/20 min-w-[72px] text-center">
<span class="text-xs font-black tracking-tighter">+0.89%</span>
</div>
</div>
</div>
<!-- SOL Row -->
<div class="glass-card p-4 rounded-xl flex items-center justify-between group hover:bg-surface-variant/60 transition-all cursor-pointer">
<div class="flex items-center gap-4">
<div class="w-12 h-12 rounded-full bg-surface-container-highest flex items-center justify-center border border-outline-variant/20">
<span class="material-symbols-outlined text-primary-fixed-dim" style="font-variation-settings: 'FILL' 1;">token</span>
</div>
<div>
<div class="flex items-center gap-1">
<h3 class="font-headline font-bold text-lg">SOL</h3>
<span class="text-xs text-on-surface-variant">/USDT</span>
</div>
<p class="text-xs text-on-surface-variant font-medium">Solana</p>
</div>
</div>
<div class="flex items-center gap-8">
<div class="text-right">
<p class="font-headline font-bold text-base">143.88</p>
<p class="text-[10px] text-on-surface-variant">≈ $143.88</p>
</div>
<div class="bg-error/10 text-error px-3 py-1.5 rounded-lg border border-error/20 min-w-[72px] text-center">
<span class="text-xs font-black tracking-tighter">-1.12%</span>
</div>
</div>
</div>
<!-- ARB Row -->
<div class="glass-card p-4 rounded-xl flex items-center justify-between group hover:bg-surface-variant/60 transition-all cursor-pointer">
<div class="flex items-center gap-4">
<div class="w-12 h-12 rounded-full bg-surface-container-highest flex items-center justify-center border border-outline-variant/20">
<span class="material-symbols-outlined text-secondary-fixed-dim" style="font-variation-settings: 'FILL' 1;">layers</span>
</div>
<div>
<div class="flex items-center gap-1">
<h3 class="font-headline font-bold text-lg">ARB</h3>
<span class="text-xs text-on-surface-variant">/USDT</span>
</div>
<p class="text-xs text-on-surface-variant font-medium">Arbitrum</p>
</div>
</div>
<div class="flex items-center gap-8">
<div class="text-right">
<p class="font-headline font-bold text-base">1.043</p>
<p class="text-[10px] text-on-surface-variant">≈ $1.04</p>
</div>
<div class="bg-tertiary/10 text-tertiary px-3 py-1.5 rounded-lg border border-tertiary/20 min-w-[72px] text-center">
<span class="text-xs font-black tracking-tighter">+5.67%</span>
</div>
</div>
</div>
<!-- PEPE Row -->
<div class="glass-card p-4 rounded-xl flex items-center justify-between group hover:bg-surface-variant/60 transition-all cursor-pointer">
<div class="flex items-center gap-4">
<div class="w-12 h-12 rounded-full bg-surface-container-highest flex items-center justify-center border border-outline-variant/20">
<span class="material-symbols-outlined text-tertiary-dim" style="font-variation-settings: 'FILL' 1;">face</span>
</div>
<div>
<div class="flex items-center gap-1">
<h3 class="font-headline font-bold text-lg">PEPE</h3>
<span class="text-xs text-on-surface-variant">/USDT</span>
</div>
<p class="text-xs text-on-surface-variant font-medium">Pepe Coin</p>
</div>
</div>
<div class="flex items-center gap-8">
<div class="text-right">
<p class="font-headline font-bold text-base">0.000012</p>
<p class="text-[10px] text-on-surface-variant">≈ $0.000012</p>
</div>
<div class="bg-tertiary/10 text-tertiary px-3 py-1.5 rounded-lg border border-tertiary/20 min-w-[72px] text-center">
<span class="text-xs font-black tracking-tighter">+12.4%</span>
</div>
</div>
</div>
</section>
<!-- Floating Action Button for Trade -->
<div class="fixed bottom-24 right-6">
<button class="w-14 h-14 rounded-2xl bg-gradient-to-br from-primary to-primary-container flex items-center justify-center shadow-lg shadow-primary/20 active:scale-90 transition-all group">
<span class="material-symbols-outlined text-on-primary-fixed text-3xl group-hover:rotate-180 transition-transform duration-500">add</span>
</button>
</div>
</main>
<!-- BottomNavBar -->
<nav class="fixed bottom-0 left-0 w-full flex justify-around items-center px-4 h-20 pb-safe bg-[#0b0e14]/80 backdrop-blur-xl z-50 rounded-t-[2rem] shadow-[0_-8px_32px_rgba(0,0,0,0.5)] border-t border-[#45484f]/15">
<div class="flex flex-col items-center justify-center text-[#72dcff] bg-[#72dcff]/10 rounded-xl px-4 py-1 active:scale-90 transition-all duration-200">
<span class="material-symbols-outlined">equalizer</span>
<span class="font-['Manrope'] text-[10px] font-bold uppercase tracking-widest mt-0.5">Market</span>
</div>
<div class="flex flex-col items-center justify-center text-[#a9abb3] hover:text-[#dd8bfb] active:scale-90 transition-all duration-200">
<span class="material-symbols-outlined">swap_horiz</span>
<span class="font-['Manrope'] text-[10px] font-bold uppercase tracking-widest mt-0.5">Trade</span>
</div>
<div class="flex flex-col items-center justify-center text-[#a9abb3] hover:text-[#dd8bfb] active:scale-90 transition-all duration-200">
<span class="material-symbols-outlined">account_balance_wallet</span>
<span class="font-['Manrope'] text-[10px] font-bold uppercase tracking-widest mt-0.5">Wallet</span>
</div>
<div class="flex flex-col items-center justify-center text-[#a9abb3] hover:text-[#dd8bfb] active:scale-90 transition-all duration-200">
<span class="material-symbols-outlined">article</span>
<span class="font-['Manrope'] text-[10px] font-bold uppercase tracking-widest mt-0.5">News</span>
</div>
</nav>
</body></html>