<!DOCTYPE html>

<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>KINETIC VAULT | Terminal</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<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 id="tailwind-config">
        tailwind.config = {
          darkMode: "class",
          theme: {
            extend: {
              colors: {
                "inverse-surface": "#f9f9ff",
                "secondary-dim": "#ce7eec",
                "surface-container-low": "#10131a",
                "tertiary-container": "#00ffab",
                "on-secondary-container": "#f1bfff",
                "on-primary": "#004c5e",
                "on-tertiary": "#006642",
                "surface-container-high": "#1c2028",
                "surface-container-highest": "#22262f",
                "on-tertiary-fixed": "#00472d",
                "surface-container": "#161a21",
                "outline-variant": "#45484f",
                "secondary-container": "#6e208c",
                "primary-fixed": "#00d2ff",
                "inverse-on-surface": "#52555c",
                "surface-tint": "#72dcff",
                "surface-container-lowest": "#000000",
                "secondary-fixed-dim": "#ebadff",
                "primary-dim": "#00c3ed",
                "on-surface-variant": "#a9abb3",
                "surface-bright": "#282c36",
                "on-primary-container": "#004253",
                "on-error": "#490006",
                "on-secondary-fixed-variant": "#792c97",
                "tertiary": "#afffd1",
                "on-primary-fixed": "#002c38",
                "inverse-primary": "#00687f",
                "background": "#0b0e14",
                "primary-fixed-dim": "#00c3ed",
                "on-secondary": "#4c0068",
                "error-container": "#9f0519",
                "tertiary-fixed": "#00ffab",
                "tertiary-dim": "#00efa0",
                "on-primary-fixed-variant": "#004c5e",
                "primary-container": "#00d2ff",
                "tertiary-fixed-dim": "#00efa0",
                "outline": "#73757d",
                "on-tertiary-container": "#005c3b",
                "secondary": "#dd8bfb",
                "primary": "#72dcff",
                "on-tertiary-fixed-variant": "#006742",
                "on-secondary-fixed": "#580078",
                "surface": "#0b0e14",
                "error-dim": "#d7383b",
                "error": "#ff716c",
                "on-error-container": "#ffa8a3",
                "on-background": "#ecedf6",
                "secondary-fixed": "#f2c1ff",
                "surface-variant": "#22262f",
                "surface-dim": "#0b0e14",
                "on-surface": "#ecedf6"
              },
              fontFamily: {
                "headline": ["Space Grotesk"],
                "body": ["Manrope"],
                "label": ["Manrope"]
              },
              borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"},
            },
          },
        }
    </script>
<style>
        body { font-family: 'Manrope', sans-serif; }
        .font-headline { font-family: 'Space Grotesk', sans-serif; }
        .glass-panel {
            background: rgba(34, 38, 47, 0.4);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(69, 72, 79, 0.15);
        }
        .neon-glow-primary {
            box-shadow: 0 0 20px rgba(114, 220, 255, 0.15);
        }
        .neon-glow-tertiary {
            box-shadow: 0 0 25px rgba(175, 255, 209, 0.2);
        }
        .custom-scrollbar::-webkit-scrollbar {
            width: 4px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
            background: #0b0e14;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #22262f;
            border-radius: 10px;
        }
    </style>
<style>
    body {
      min-height: max(884px, 100dvh);
    }
  </style>
  </head>
<body class="bg-background text-on-surface custom-scrollbar min-h-screen">
<!-- TopAppBar -->
<header class="fixed top-0 w-full z-50 flex justify-between items-center px-6 h-16 bg-[#10131a] border-none">
<div class="flex items-center gap-4">
<button class="text-cyan-400 p-2 hover:bg-[#22262f] transition-colors duration-200 scale-95 active:duration-75">
<span class="material-symbols-outlined">menu</span>
</button>
<h1 class="text-xl font-bold tracking-tighter text-[#72dcff] uppercase font-headline">KINETIC VAULT</h1>
</div>
<div class="flex items-center gap-4">
<div class="hidden md:flex items-center gap-8 mr-8">
<a class="text-[#72dcff] font-bold font-label text-sm uppercase tracking-widest" href="#">Trade</a>
<a class="text-[#a9abb3] font-label text-sm uppercase tracking-widest hover:text-white transition-colors" href="#">Assets</a>
<a class="text-[#a9abb3] font-label text-sm uppercase tracking-widest hover:text-white transition-colors" href="#">Market</a>
</div>
<div class="w-10 h-10 rounded-full overflow-hidden border border-primary/20">
<img alt="User profile avatar" data-alt="Cyberpunk style user profile avatar headshot" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCkeJh6DQFHQuTTJWqMLC7t0g8Lt7EbKZKf29sj9bu_jTQ4FkDKUvevurin2d8FCKG5BCOoZsC5pNUicT5xuSjtx44w2nkKrl2ZWKefmobhNy_Iy42ijT0aFeW_2wEFcvmPqRX5IHm1crAJ2FpsrU8Dvwxr2MSS_XOoFU8kXIECc60UIOwQqhBeJSVQp1ZAzY4hVCVI5cKVv02CkBNfCmP7-IBEhHkxeYa8vtRqebCNQYCLJMTlvTSMegf5Neog56Xia2EGAjZjmrM"/>
</div>
</div>
</header>
<main class="pt-24 pb-32 px-4 md:px-8 max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-6">
<!-- Left Column: Chart & Market Info (Editorial Focus) -->
<div class="lg:col-span-8 space-y-6">
<!-- Asset Header -->
<div class="flex flex-col md:flex-row md:items-end justify-between gap-4">
<div>
<div class="flex items-center gap-3 mb-2">
<div class="w-8 h-8 rounded-lg bg-primary/20 flex items-center justify-center">
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">currency_bitcoin</span>
</div>
<h2 class="text-2xl font-bold font-headline tracking-tight">BTC / USDT</h2>
<span class="px-2 py-0.5 rounded bg-surface-container-highest text-on-surface-variant text-xs font-bold uppercase tracking-widest">Perpetual</span>
</div>
<div class="flex items-baseline gap-4">
<span class="text-4xl font-extrabold font-headline tracking-tighter">$64,281.90</span>
<span class="text-tertiary font-bold flex items-center gap-1">
<span class="material-symbols-outlined text-sm">trending_up</span>
                            +4.12%
                        </span>
</div>
</div>
<!-- Quick stats bento -->
<div class="grid grid-cols-2 md:flex gap-4 md:gap-8 pb-1">
<div class="flex flex-col">
<span class="text-[10px] text-on-surface-variant uppercase tracking-widest font-bold">24h High</span>
<span class="font-headline font-medium text-sm">65,120.00</span>
</div>
<div class="flex flex-col">
<span class="text-[10px] text-on-surface-variant uppercase tracking-widest font-bold">24h Low</span>
<span class="font-headline font-medium text-sm">62,840.45</span>
</div>
<div class="flex flex-col">
<span class="text-[10px] text-on-surface-variant uppercase tracking-widest font-bold">24h Vol</span>
<span class="font-headline font-medium text-sm text-secondary">1.24B</span>
</div>
</div>
</div>
<!-- Chart Canvas (Placeholder for futuristic feel) -->
<div class="relative w-full aspect-[16/9] md:aspect-[21/9] rounded-xl overflow-hidden glass-panel group">
<div class="absolute inset-0 bg-gradient-to-br from-primary/5 to-secondary/5 opacity-50"></div>
<!-- Mock Chart Lines -->
<div class="absolute inset-0 flex items-center justify-center">
<div class="w-full h-full p-6 flex flex-col justify-between">
<div class="flex justify-between text-[10px] text-on-surface-variant/30">
<span>65,000</span><span>64,500</span><span>64,000</span><span>63,500</span><span>63,000</span>
</div>
<div class="flex-1 relative">
<svg class="w-full h-full" viewbox="0 0 1000 400">
<path d="M0,350 Q100,320 200,340 T400,280 T600,200 T800,240 T1000,100" fill="none" stroke="url(#paint0_linear)" stroke-width="3"></path>
<defs>
<lineargradient gradientunits="userSpaceOnUse" id="paint0_linear" x1="0" x2="1000" y1="0" y2="0">
<stop stop-color="#72dcff"></stop>
<stop offset="1" stop-color="#dd8bfb"></stop>
</lineargradient>
</defs>
</svg>
</div>
</div>
</div>
<!-- Time Range Selector -->
<div class="absolute top-4 right-4 flex gap-1 p-1 rounded-lg bg-surface-container-lowest/50 backdrop-blur-md">
<button class="px-3 py-1 rounded-md text-[10px] font-bold text-primary bg-primary/10">1H</button>
<button class="px-3 py-1 rounded-md text-[10px] font-bold text-on-surface-variant hover:text-white transition-colors">4H</button>
<button class="px-3 py-1 rounded-md text-[10px] font-bold text-on-surface-variant hover:text-white transition-colors">1D</button>
<button class="px-3 py-1 rounded-md text-[10px] font-bold text-on-surface-variant hover:text-white transition-colors">1W</button>
</div>
</div>
<!-- Open Orders / Recent Trades -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="rounded-xl p-6 surface-container-high border-none glass-panel">
<h3 class="text-sm font-bold font-headline uppercase tracking-widest mb-6 flex items-center gap-2">
<span class="w-1.5 h-1.5 rounded-full bg-primary"></span>
                        Active Orders
                    </h3>
<div class="space-y-4">
<div class="flex justify-between items-center p-3 rounded-lg bg-surface-container-lowest/40 border-l-2 border-tertiary">
<div>
<div class="text-xs font-bold text-tertiary">BUY / LONG</div>
<div class="text-sm font-headline">63,940.00</div>
</div>
<div class="text-right">
<div class="text-[10px] text-on-surface-variant">Amount</div>
<div class="text-sm">0.042 BTC</div>
</div>
</div>
<div class="flex justify-between items-center p-3 rounded-lg bg-surface-container-lowest/40 border-l-2 border-error">
<div>
<div class="text-xs font-bold text-error">SELL / SHORT</div>
<div class="text-sm font-headline">64,800.00</div>
</div>
<div class="text-right">
<div class="text-[10px] text-on-surface-variant">Amount</div>
<div class="text-sm">0.125 BTC</div>
</div>
</div>
</div>
</div>
<div class="rounded-xl p-6 surface-container-high border-none glass-panel">
<h3 class="text-sm font-bold font-headline uppercase tracking-widest mb-6 flex items-center gap-2">
<span class="w-1.5 h-1.5 rounded-full bg-secondary"></span>
                        Order Book
                    </h3>
<div class="space-y-1.5 text-xs font-mono">
<div class="flex justify-between text-error/80">
<span>64,285.50</span><span>0.045</span>
</div>
<div class="flex justify-between text-error/80">
<span>64,284.10</span><span>0.112</span>
</div>
<div class="flex justify-between text-error/60">
<span>64,283.00</span><span>0.890</span>
</div>
<div class="py-2 border-y border-outline-variant/10 text-center font-headline text-lg font-bold text-on-surface">
                            64,281.90
                        </div>
<div class="flex justify-between text-tertiary/60">
<span>64,280.00</span><span>1.204</span>
</div>
<div class="flex justify-between text-tertiary/80">
<span>64,279.50</span><span>0.056</span>
</div>
</div>
</div>
</div>
</div>
<!-- Right Column: Trade Execution Console -->
<div class="lg:col-span-4 flex flex-col gap-6">
<div class="rounded-2xl p-6 surface-container-highest glass-panel border-none sticky top-24 neon-glow-primary">
<!-- Toggle Buy/Sell -->
<div class="flex p-1 bg-surface-container-lowest rounded-xl mb-8">
<button class="flex-1 py-3 rounded-lg text-sm font-bold uppercase tracking-widest transition-all bg-tertiary/10 text-tertiary">
                        Buy
                    </button>
<button class="flex-1 py-3 rounded-lg text-sm font-bold uppercase tracking-widest transition-all text-on-surface-variant hover:text-white">
                        Sell
                    </button>
</div>
<div class="space-y-6">
<!-- Order Type Selector -->
<div class="flex justify-between items-center text-xs font-bold uppercase tracking-widest text-on-surface-variant mb-2">
<span>Limit Order</span>
<span class="material-symbols-outlined text-sm">expand_more</span>
</div>
<!-- Price Input -->
<div class="space-y-2">
<label class="text-[10px] text-on-surface-variant uppercase tracking-[0.2em] font-bold">Price (USDT)</label>
<div class="relative group">
<input class="w-full bg-surface-container-lowest border border-transparent focus:border-primary focus:ring-0 rounded-xl py-4 px-5 text-xl font-headline transition-all outline-none" type="text" value="64,281.90"/>
<div class="absolute right-4 top-1/2 -translate-y-1/2 text-xs font-bold text-on-surface-variant group-focus-within:text-primary">USDT</div>
</div>
</div>
<!-- Amount Input -->
<div class="space-y-2">
<label class="text-[10px] text-on-surface-variant uppercase tracking-[0.2em] font-bold">Amount (BTC)</label>
<div class="relative group">
<input class="w-full bg-surface-container-lowest border border-transparent focus:border-primary focus:ring-0 rounded-xl py-4 px-5 text-xl font-headline transition-all outline-none" placeholder="0.00" type="text"/>
<div class="absolute right-4 top-1/2 -translate-y-1/2 text-xs font-bold text-on-surface-variant group-focus-within:text-primary">BTC</div>
</div>
</div>
<!-- Quick Percentages -->
<div class="flex justify-between gap-2">
<button class="flex-1 py-2 rounded-lg bg-surface-container-high hover:bg-surface-variant text-[10px] font-bold uppercase tracking-widest transition-colors">25%</button>
<button class="flex-1 py-2 rounded-lg bg-surface-container-high hover:bg-surface-variant text-[10px] font-bold uppercase tracking-widest transition-colors">50%</button>
<button class="flex-1 py-2 rounded-lg bg-surface-container-high hover:bg-surface-variant text-[10px] font-bold uppercase tracking-widest transition-colors">75%</button>
<button class="flex-1 py-2 rounded-lg bg-surface-container-high hover:bg-surface-variant text-[10px] font-bold uppercase tracking-widest transition-colors">100%</button>
</div>
<!-- Balance Info -->
<div class="pt-4 border-t border-outline-variant/10 space-y-3">
<div class="flex justify-between items-center text-sm">
<span class="text-on-surface-variant">Available</span>
<span class="font-headline font-bold">12,450.00 USDT</span>
</div>
<div class="flex justify-between items-center text-sm">
<span class="text-on-surface-variant">Est. Fee</span>
<span class="font-headline">0.45 USDT</span>
</div>
<div class="flex justify-between items-center pt-2">
<span class="text-on-surface-variant font-bold uppercase tracking-widest text-[10px]">Total Order</span>
<span class="text-lg font-headline font-extrabold text-primary">0.00 USDT</span>
</div>
</div>
<!-- Execution Button -->
<button class="w-full py-5 rounded-2xl bg-gradient-to-r from-tertiary to-tertiary-container text-on-tertiary-fixed font-black uppercase tracking-[0.25em] text-sm shadow-[0_8px_32px_rgba(0,255,171,0.2)] hover:scale-[1.02] active:scale-95 transition-all neon-glow-tertiary">
                        Place Buy Order
                    </button>
</div>
</div>
<!-- Promotion / Ad Slot -->
<div class="rounded-2xl overflow-hidden relative group aspect-video">
<img alt="Crypto network visualization" class="w-full h-full object-cover grayscale opacity-40 group-hover:grayscale-0 group-hover:opacity-100 transition-all duration-700" data-alt="Blue and purple abstract digital network connection lines" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBKVB8cwhLRRb34YYe1QWpgv9_aKTmA_RH3e9__GHCKUE0pfSL0-0xbmjYch-Z6Wd5b5Tyoy4nePkKMnRRbasK-cdIxbNDdJ65T5bdBlG9MYEQ16YT1oVn0KTDR5hSacUngFu-RNPeJ0plxPvMevmmfSaOCfnzeFQ02ZoDHc7fo2r8SCjfFuyeOcNMO6y5l1bgYZtsQXaW3AQ8FdWZ7o7uD-wYmWphnjy5Ol8dj3vPOvXSykkW7td_gPJasJ2MzNl-JDF-LbswUXs0"/>
<div class="absolute inset-0 bg-gradient-to-t from-background via-background/40 to-transparent p-6 flex flex-col justify-end">
<span class="text-[10px] font-black text-secondary uppercase tracking-[0.3em] mb-1">New Feature</span>
<h4 class="text-xl font-bold font-headline leading-tight">Smart Vault Staking Now Live</h4>
<p class="text-xs text-on-surface-variant mt-2 line-clamp-2">Earn up to 12.4% APY on idle USDT assets with Kinetic's algorithmic compounding engine.</p>
</div>
</div>
</div>
</main>
<!-- BottomNavBar -->
<nav class="fixed bottom-0 left-0 w-full z-50 flex justify-around items-center px-4 pb-6 pt-3 bg-[#0b0e14]/80 backdrop-blur-xl border-t border-[#45484f]/15 shadow-[0_-8px_32px_rgba(114,220,255,0.06)] md:hidden">
<a class="flex flex-col items-center justify-center text-[#72dcff] bg-[#72dcff]/10 rounded-xl px-4 py-1 scale-90 duration-200" href="#">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">swap_horiz</span>
<span class="text-[10px] font-medium Manrope uppercase tracking-widest">Trade</span>
</a>
<a class="flex flex-col items-center justify-center text-[#a9abb3] hover:text-white transition-all scale-90 duration-200" href="#">
<span class="material-symbols-outlined">account_balance_wallet</span>
<span class="text-[10px] font-medium Manrope uppercase tracking-widest">Assets</span>
</a>
<a class="flex flex-col items-center justify-center text-[#a9abb3] hover:text-white transition-all scale-90 duration-200" href="#">
<span class="material-symbols-outlined">monitoring</span>
<span class="text-[10px] font-medium Manrope uppercase tracking-widest">Market</span>
</a>
<a class="flex flex-col items-center justify-center text-[#a9abb3] hover:text-white transition-all scale-90 duration-200" href="#">
<span class="material-symbols-outlined">person</span>
<span class="text-[10px] font-medium Manrope uppercase tracking-widest">Profile</span>
</a>
</nav>
</body></html>