<!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 - Deposit</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&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: {
                "surface-variant": "#22262f",
                "on-tertiary-fixed": "#00472d",
                "inverse-primary": "#00687f",
                "on-surface-variant": "#a9abb3",
                "tertiary": "#afffd1",
                "primary-dim": "#00c3ed",
                "background": "#0b0e14",
                "tertiary-container": "#00ffab",
                "surface-container": "#161a21",
                "on-secondary-fixed": "#580078",
                "on-tertiary": "#006642",
                "inverse-surface": "#f9f9ff",
                "error-container": "#9f0519",
                "on-secondary-container": "#f1bfff",
                "on-error-container": "#ffa8a3",
                "surface-tint": "#72dcff",
                "secondary-fixed-dim": "#ebadff",
                "on-secondary": "#4c0068",
                "error": "#ff716c",
                "secondary-dim": "#ce7eec",
                "on-primary-fixed-variant": "#004c5e",
                "tertiary-dim": "#00efa0",
                "error-dim": "#d7383b",
                "surface-dim": "#0b0e14",
                "surface-container-high": "#1c2028",
                "on-tertiary-fixed-variant": "#006742",
                "secondary-container": "#6e208c",
                "primary-fixed-dim": "#00c3ed",
                "surface-bright": "#282c36",
                "secondary-fixed": "#f2c1ff",
                "tertiary-fixed": "#00ffab",
                "inverse-on-surface": "#52555c",
                "on-background": "#ecedf6",
                "surface-container-lowest": "#000000",
                "surface-container-highest": "#22262f",
                "primary-container": "#00d2ff",
                "on-surface": "#ecedf6",
                "primary": "#72dcff",
                "on-primary-container": "#004253",
                "secondary": "#dd8bfb",
                "tertiary-fixed-dim": "#00efa0",
                "on-primary-fixed": "#002c38",
                "on-primary": "#004c5e",
                "on-tertiary-container": "#005c3b",
                "on-error": "#490006",
                "on-secondary-fixed-variant": "#792c97",
                "surface-container-low": "#10131a",
                "outline-variant": "#45484f",
                "outline": "#73757d",
                "surface": "#0b0e14",
                "primary-fixed": "#00d2ff"
              },
              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-panel {
            background: rgba(34, 38, 47, 0.4);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
        }
      </style>
<style>
    body {
      min-height: max(884px, 100dvh);
    }
  </style>
  </head>
<body class="bg-background text-on-background font-body min-h-screen flex flex-col">
<!-- TopAppBar -->
<header class="fixed top-0 w-full z-50 flex justify-between items-center px-6 h-16 bg-[#0b0e14] dark:bg-[#0b0e14]">
<div class="flex items-center gap-4">
<span class="material-symbols-outlined text-[#72dcff] cursor-pointer hover:text-[#dd8bfb] transition-colors scale-95 duration-200">menu</span>
<h1 class="text-xl font-black text-[#72dcff] tracking-widest font-['Space_Grotesk'] font-bold tracking-tight uppercase">KINETIC VAULT</h1>
</div>
<div class="w-8 h-8 rounded-full bg-surface-container-highest border border-outline-variant flex items-center justify-center overflow-hidden">
<img alt="User Profile" class="w-full h-full object-cover" data-alt="User profile avatar icon" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBANk2SpRtHHAsLEdKMgvyKuatu6pL3RrmMX1RNqvdlKFiy455H8zMuib7q-uJ9kURRUg7fmITlkx9hQsoZnaeYP4tTVAdaKfPNI9do0CBhD8xF-FFxF4WXUKZIB7Vxoa77IDzwNMawLuHEFelTVTo0gAqkioBh5Ce8ZY3AEDtbnI6Ey-3Y8Jj8ZEalLc77HUjAs29UOriOjlcg7CYMUmRUfIjEaFIb9wYL4jynk80QUxKk6fz775oNDMVxv_Kt1SDCtO3YseFeWAI"/>
</div>
</header>
<main class="flex-1 pt-24 pb-32 px-6 flex items-center justify-center relative overflow-hidden">
<!-- Background Decorative Elements (Cyberpunk Flair) -->
<div class="absolute top-1/4 -left-20 w-96 h-96 bg-primary/10 rounded-full blur-[120px] pointer-events-none"></div>
<div class="absolute bottom-1/4 -right-20 w-96 h-96 bg-secondary/10 rounded-full blur-[120px] pointer-events-none"></div>
<!-- Deposit Modal Container -->
<div class="w-full max-w-md glass-panel rounded-[2rem] border border-outline-variant/20 shadow-2xl relative z-10 p-8">
<!-- Header Section -->
<div class="flex justify-between items-start mb-8">
<div>
<h2 class="font-headline text-3xl font-bold text-on-surface tracking-tight leading-none mb-1">Deposit (充值)</h2>
<p class="font-label text-sm text-on-surface-variant uppercase tracking-widest">Asset: Kinetic Core (KNC)</p>
</div>
<div class="bg-surface-container-high p-2 rounded-xl">
<span class="material-symbols-outlined text-secondary" style="font-variation-settings: 'FILL' 1;">account_balance_wallet</span>
</div>
</div>
<!-- Content Section -->
<div class="space-y-6">
<!-- Balance Status Chip -->
<div class="flex items-center justify-between px-4 py-2 bg-surface-container-lowest rounded-full border border-outline-variant/10">
<span class="text-xs font-label text-on-surface-variant uppercase tracking-widest">Available Balance</span>
<span class="text-xs font-headline font-bold text-tertiary">1,248.50 KNC</span>
</div>
<!-- Input Group -->
<div class="space-y-2">
<label class="font-label text-[10px] uppercase tracking-widest text-on-surface-variant ml-1">Amount to Transfer</label>
<div class="relative group">
<div class="absolute inset-0 bg-primary/5 rounded-2xl blur-md opacity-0 group-focus-within:opacity-100 transition-opacity"></div>
<div class="relative bg-surface-container-lowest border border-outline-variant/30 group-focus-within:border-primary rounded-2xl p-4 flex items-center gap-4 transition-all">
<input class="bg-transparent border-none focus:ring-0 text-2xl font-headline font-bold text-on-surface w-full placeholder:text-outline-variant/50" placeholder="0.00" type="text"/>
<button class="bg-primary/10 hover:bg-primary/20 text-primary font-headline text-xs font-bold px-3 py-1.5 rounded-lg transition-colors border border-primary/20">
                                MAX
                            </button>
</div>
</div>
</div>
<!-- Network Info (Asymmetric Detail) -->
<div class="grid grid-cols-2 gap-4">
<div class="bg-surface-container-high rounded-2xl p-4 border-l-2 border-secondary">
<span class="block text-[9px] font-label text-on-surface-variant uppercase mb-1">Estimated Gas</span>
<span class="block text-sm font-headline font-semibold text-secondary">0.002 ETH</span>
</div>
<div class="bg-surface-container-high rounded-2xl p-4 border-l-2 border-tertiary">
<span class="block text-[9px] font-label text-on-surface-variant uppercase mb-1">Time Delay</span>
<span class="block text-sm font-headline font-semibold text-tertiary">~2 Mins</span>
</div>
</div>
<!-- Visual Soul: Decorative Separator -->
<div class="py-2 flex items-center gap-4 opacity-30">
<div class="h-[1px] flex-1 bg-gradient-to-r from-transparent to-outline"></div>
<span class="material-symbols-outlined text-[12px]">bolt</span>
<div class="h-[1px] flex-1 bg-gradient-to-l from-transparent to-outline"></div>
</div>
<!-- Action Buttons -->
<div class="space-y-3 pt-2">
<button class="w-full h-14 bg-gradient-to-br from-primary to-primary-container rounded-2xl font-headline font-bold text-on-primary-fixed text-lg shadow-lg shadow-primary/20 hover:scale-[1.02] active:scale-95 transition-all">
                        Confirm Deposit
                    </button>
<button class="w-full h-12 bg-transparent border border-outline-variant/30 hover:border-primary/50 text-on-surface-variant hover:text-on-surface font-headline font-medium text-sm rounded-2xl transition-all">
                        Cancel (取消)
                    </button>
</div>
</div>
<!-- Security Footer -->
<div class="mt-8 flex items-center justify-center gap-2 opacity-50">
<span class="material-symbols-outlined text-xs">verified_user</span>
<span class="text-[9px] font-label uppercase tracking-[0.2em]">Encrypted Kinetic Protocol v4.2</span>
</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-[#10131a]/80 backdrop-blur-xl border-t border-[#45484f]/15 shadow-[0_-8px_32px_rgba(114,220,255,0.06)] md:hidden rounded-t-3xl">
<div class="flex flex-col items-center justify-center text-[#72dcff] bg-[#72dcff]/10 rounded-xl px-4 py-1 Active: scale-90 transition-transform">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">account_balance_wallet</span>
<span class="font-['Manrope'] text-[10px] font-medium uppercase tracking-widest">Vault</span>
</div>
<div class="flex flex-col items-center justify-center text-[#a9abb3] hover:text-[#dd8bfb]">
<span class="material-symbols-outlined">swap_calls</span>
<span class="font-['Manrope'] text-[10px] font-medium uppercase tracking-widest">Trade</span>
</div>
<div class="flex flex-col items-center justify-center text-[#a9abb3] hover:text-[#dd8bfb]">
<span class="material-symbols-outlined">insights</span>
<span class="font-['Manrope'] text-[10px] font-medium uppercase tracking-widest">Market</span>
</div>
<div class="flex flex-col items-center justify-center text-[#a9abb3] hover:text-[#dd8bfb]">
<span class="material-symbols-outlined">person</span>
<span class="font-['Manrope'] text-[10px] font-medium uppercase tracking-widest">Profile</span>
</div>
</nav>
</body></html>