sion/monisuo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: 删除所有文本文件

Browse Source
This commit is contained in:
sion123
2026-03-28 17:20:10 +08:00
parent cf1e3667ec
commit b6747b1c44
5 changed files with 0 additions and 1255 deletions
Download Patch File Download Diff File Expand all files Collapse all files

347
页面样式/交易.txt
View File

@@ -1,347 +0,0 @@
<!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>

195
页面样式/充值弹窗.txt
View File

@@ -1,195 +0,0 @@
<!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>

219
页面样式/我的.txt
View File

@@ -1,219 +0,0 @@
<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>CyberPulse Neo Profile</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: {
"error": "#ff716c",
"secondary-fixed-dim": "#ebadff",
"secondary-fixed": "#f2c1ff",
"on-error": "#490006",
"on-secondary-fixed": "#580078",
"on-tertiary": "#006642",
"tertiary-fixed-dim": "#00efa0",
"tertiary-container": "#00ffab",
"on-surface": "#ecedf6",
"outline": "#73757d",
"primary": "#72dcff",
"on-tertiary-fixed-variant": "#006742",
"on-primary-fixed-variant": "#004c5e",
"inverse-primary": "#00687f",
"surface-bright": "#282c36",
"tertiary-dim": "#00efa0",
"surface-dim": "#0b0e14",
"on-secondary": "#4c0068",
"surface-container-low": "#10131a",
"surface-variant": "#22262f",
"surface-tint": "#72dcff",
"surface-container-lowest": "#000000",
"primary-fixed-dim": "#00c3ed",
"on-tertiary-fixed": "#00472d",
"secondary": "#dd8bfb",
"primary-container": "#00d2ff",
"surface-container-highest": "#22262f",
"on-secondary-fixed-variant": "#792c97",
"on-error-container": "#ffa8a3",
"outline-variant": "#45484f",
"surface": "#0b0e14",
"on-surface-variant": "#a9abb3",
"primary-fixed": "#00d2ff",
"tertiary": "#afffd1",
"surface-container": "#161a21",
"on-background": "#ecedf6",
"primary-dim": "#00c3ed",
"tertiary-fixed": "#00ffab",
"error-container": "#9f0519",
"secondary-dim": "#ce7eec",
"surface-container-high": "#1c2028",
"inverse-on-surface": "#52555c",
"error-dim": "#d7383b",
"on-primary-fixed": "#002c38",
"inverse-surface": "#f9f9ff",
"secondary-container": "#6e208c",
"on-primary-container": "#004253",
"on-primary": "#004c5e",
"background": "#0b0e14",
"on-secondary-container": "#f1bfff",
"on-tertiary-container": "#005c3b"
},
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(115, 117, 125, 0.1);
}
.neon-glow-primary {
box-shadow: 0 0 15px rgba(114, 220, 255, 0.3);
}
.neon-glow-secondary {
box-shadow: 0 0 15px rgba(221, 139, 251, 0.3);
}
</style>
<style>
body {
min-height: max(884px, 100dvh);
}
</style>
</head>
<body class="bg-background text-on-surface font-body selection:bg-primary selection:text-on-primary">
<!-- Top App Bar -->
<header class="fixed top-0 w-full z-50 bg-[#0b0e14]/80 backdrop-blur-xl border-b border-[#45484f]/15 shadow-[0_8px_32px_rgba(114,220,255,0.06)] flex items-center justify-between px-6 h-16 w-full">
<div class="flex items-center gap-4">
<span class="material-symbols-outlined text-[#72dcff] active:scale-95 duration-200 cursor-pointer">arrow_back</span>
<h1 class="font-['Space_Grotesk'] uppercase tracking-widest text-sm text-[#72dcff] font-bold">SECURITY VAULT</h1>
</div>
<span class="material-symbols-outlined text-[#a9abb3] hover:text-[#dd8bfb] transition-colors cursor-pointer active:scale-95 duration-200">settings_heart</span>
</header>
<main class="pt-24 pb-32 px-6 max-w-2xl mx-auto space-y-8">
<!-- Hero Profile Section -->
<section class="relative flex flex-col items-center py-8">
<div class="relative">
<div class="absolute -inset-1 rounded-full bg-gradient-to-tr from-primary via-secondary to-tertiary blur opacity-40 animate-pulse"></div>
<div class="relative p-1 rounded-full bg-surface-container-high border-2 border-primary/30">
<img alt="User avatar" class="w-24 h-24 rounded-full" data-alt="Cybernetic male avatar with neon accents" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDPG8f6cGBm3xqBjBuY5sw1RCGSiKxDN-IA5wDo1H-30SIcg3e_FI82VsXAPOCouYTDqCWtM5El4DHJQYERfUQ1BtK8NTS6d6rlWVoqc79DhsJfWVk2a2nyVz8jWrV04eJOqjk0FTs8u-c1GkLlxIEdvGENmCPmBElvN8A8uH6w1XAK-YslVWz0wLFwjwYRcWIiCr4Jat5I0_O2aLNukB431cRZWTEk79BvSuC2XMILEhpi11ch1744m5x49WQR-tQn4_zPtdZb2N8"/>
</div>
<div class="absolute bottom-0 right-0 bg-tertiary text-on-tertiary rounded-full p-1 border-2 border-background shadow-lg">
<span class="material-symbols-outlined text-xs font-bold" style="font-variation-settings: 'FILL' 1;">verified</span>
</div>
</div>
<div class="mt-6 text-center">
<h2 class="font-headline text-3xl font-bold tracking-tight text-on-surface">sion321</h2>
<div class="mt-2 inline-flex items-center px-3 py-1 rounded-full bg-primary/10 border border-primary/20 text-primary text-[10px] font-black uppercase tracking-[0.2em] font-headline">
Normal User
</div>
</div>
</section>
<!-- Stats Bento Grid -->
<section class="grid grid-cols-2 gap-4">
<div class="glass-card p-4 rounded-xl flex flex-col gap-1">
<span class="text-on-surface-variant font-headline text-[10px] uppercase tracking-wider">Level Status</span>
<span class="text-xl font-bold font-headline text-primary">TIER_01</span>
</div>
<div class="glass-card p-4 rounded-xl flex flex-col gap-1">
<span class="text-on-surface-variant font-headline text-[10px] uppercase tracking-wider">Node Uptime</span>
<span class="text-xl font-bold font-headline text-secondary">99.8%</span>
</div>
</section>
<!-- List Content Section -->
<section class="space-y-3">
<div class="group flex items-center justify-between p-4 glass-card rounded-2xl cursor-pointer hover:bg-surface-variant transition-all active:scale-[0.98]">
<div class="flex items-center gap-4">
<div class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20 group-hover:border-primary/50 transition-colors">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">fingerprint</span>
</div>
<span class="font-headline text-lg font-medium">Real-name verification</span>
</div>
<span class="material-symbols-outlined text-on-surface-variant">chevron_right</span>
</div>
<div class="group flex items-center justify-between p-4 glass-card rounded-2xl cursor-pointer hover:bg-surface-variant transition-all active:scale-[0.98]">
<div class="flex items-center gap-4">
<div class="w-10 h-10 rounded-xl bg-secondary/10 flex items-center justify-center text-secondary border border-secondary/20 group-hover:border-secondary/50 transition-colors">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">security</span>
</div>
<span class="font-headline text-lg font-medium">Security settings</span>
</div>
<span class="material-symbols-outlined text-on-surface-variant">chevron_right</span>
</div>
<div class="group flex items-center justify-between p-4 glass-card rounded-2xl cursor-pointer hover:bg-surface-variant transition-all active:scale-[0.98]">
<div class="flex items-center gap-4">
<div class="w-10 h-10 rounded-xl bg-tertiary/10 flex items-center justify-center text-tertiary border border-tertiary/20 group-hover:border-tertiary/50 transition-colors">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">notifications_active</span>
</div>
<span class="font-headline text-lg font-medium">Message notification</span>
</div>
<div class="flex items-center gap-2">
<span class="bg-error text-on-error text-[10px] font-bold px-2 py-0.5 rounded-full">3</span>
<span class="material-symbols-outlined text-on-surface-variant">chevron_right</span>
</div>
</div>
<div class="group flex items-center justify-between p-4 glass-card rounded-2xl cursor-pointer hover:bg-surface-variant transition-all active:scale-[0.98]">
<div class="flex items-center gap-4">
<div class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20 group-hover:border-primary/50 transition-colors">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">manufacturing</span>
</div>
<span class="font-headline text-lg font-medium">System settings</span>
</div>
<span class="material-symbols-outlined text-on-surface-variant">chevron_right</span>
</div>
<div class="group flex items-center justify-between p-4 glass-card rounded-2xl cursor-pointer hover:bg-surface-variant transition-all active:scale-[0.98]">
<div class="flex items-center gap-4">
<div class="w-10 h-10 rounded-xl bg-on-surface-variant/10 flex items-center justify-center text-on-surface-variant border border-on-surface-variant/20 group-hover:border-on-surface-variant/50 transition-colors">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">info</span>
</div>
<span class="font-headline text-lg font-medium">About us</span>
</div>
<span class="material-symbols-outlined text-on-surface-variant">chevron_right</span>
</div>
</section>
<!-- Exit Action -->
<section class="pt-8">
<button class="w-full h-16 rounded-2xl bg-gradient-to-r from-error-dim to-error text-on-error font-headline font-black text-lg uppercase tracking-widest shadow-[0_12px_24px_-8px_rgba(255,113,108,0.4)] active:scale-95 transition-transform flex items-center justify-center gap-3">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">logout</span>
Logout Terminal
</button>
<p class="text-center mt-6 text-on-surface-variant text-[10px] font-headline uppercase tracking-[0.3em] opacity-40">System Build v2.4.9-Neo</p>
</section>
</main>
<!-- Bottom Navigation Bar -->
<nav class="fixed bottom-0 left-0 w-full flex justify-around items-center px-4 pb-6 pt-3 bg-[#10131a]/90 backdrop-blur-2xl border-t border-[#45484f]/10 shadow-[0_-10px_40px_rgba(0,0,0,0.5)] z-50 rounded-t-[2rem]">
<div class="flex flex-col items-center justify-center text-[#a9abb3] opacity-60 px-5 py-2 hover:opacity-100 hover:text-[#dd8bfb] active:translate-y-1 transition-all">
<span class="material-symbols-outlined">account_balance_wallet</span>
<span class="font-['Manrope'] text-[10px] font-bold uppercase tracking-wider">Vault</span>
</div>
<div class="flex flex-col items-center justify-center text-[#a9abb3] opacity-60 px-5 py-2 hover:opacity-100 hover:text-[#dd8bfb] active:translate-y-1 transition-all">
<span class="material-symbols-outlined">swap_calls</span>
<span class="font-['Manrope'] text-[10px] font-bold uppercase tracking-wider">Trade</span>
</div>
<div class="flex flex-col items-center justify-center text-[#a9abb3] opacity-60 px-5 py-2 hover:opacity-100 hover:text-[#dd8bfb] active:translate-y-1 transition-all">
<span class="material-symbols-outlined">insights</span>
<span class="font-['Manrope'] text-[10px] font-bold uppercase tracking-wider">Analysis</span>
</div>
<div class="flex flex-col items-center justify-center text-[#72dcff] bg-[#72dcff]/10 rounded-2xl px-5 py-2 active:translate-y-1 transition-all">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">person_2</span>
<span class="font-['Manrope'] text-[10px] font-bold uppercase tracking-wider">Profile</span>
</div>
</nav>
</body></html>

198
页面样式/提现弹窗.txt
View File

@@ -1,198 +0,0 @@
<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>The Kinetic Vault - Withdraw</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: {
"on-secondary-fixed": "#580078",
"outline-variant": "#45484f",
"primary": "#72dcff",
"secondary-fixed": "#f2c1ff",
"on-primary-fixed": "#002c38",
"error-dim": "#d7383b",
"on-tertiary-fixed": "#00472d",
"secondary": "#dd8bfb",
"surface-container-low": "#10131a",
"tertiary-fixed-dim": "#00efa0",
"on-secondary-container": "#f1bfff",
"inverse-surface": "#f9f9ff",
"outline": "#73757d",
"surface-bright": "#282c36",
"surface": "#0b0e14",
"on-error": "#490006",
"on-secondary-fixed-variant": "#792c97",
"background": "#0b0e14",
"secondary-container": "#6e208c",
"primary-dim": "#00c3ed",
"on-tertiary-fixed-variant": "#006742",
"tertiary": "#afffd1",
"surface-dim": "#0b0e14",
"on-background": "#ecedf6",
"on-tertiary": "#006642",
"on-tertiary-container": "#005c3b",
"surface-container-high": "#1c2028",
"on-primary-fixed-variant": "#004c5e",
"tertiary-dim": "#00efa0",
"on-surface": "#ecedf6",
"surface-container-highest": "#22262f",
"on-surface-variant": "#a9abb3",
"surface-tint": "#72dcff",
"inverse-on-surface": "#52555c",
"on-primary-container": "#004253",
"surface-container-lowest": "#000000",
"inverse-primary": "#00687f",
"primary-container": "#00d2ff",
"primary-fixed": "#00d2ff",
"tertiary-fixed": "#00ffab",
"tertiary-container": "#00ffab",
"error-container": "#9f0519",
"secondary-fixed-dim": "#ebadff",
"on-error-container": "#ffa8a3",
"surface-container": "#161a21",
"primary-fixed-dim": "#00c3ed",
"on-secondary": "#4c0068",
"secondary-dim": "#ce7eec",
"surface-variant": "#22262f",
"error": "#ff716c",
"on-primary": "#004c5e"
},
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(40, 44, 54, 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">
<!-- Background UI Mockup (Simulating the Dashboard behind the modal) -->
<header class="fixed top-0 w-full z-50 flex justify-between items-center px-6 h-16 w-full bg-[#282c36]/40 backdrop-blur-xl shadow-[0_32px_64px_-15px_rgba(114,220,255,0.06)]">
<div class="text-[#72dcff] font-['Space_Grotesk'] font-black tracking-tight">The Kinetic Vault</div>
<div class="flex items-center gap-4">
<span class="material-symbols-outlined text-on-surface-variant">search</span>
<div class="w-8 h-8 rounded-full bg-surface-container-highest flex items-center justify-center overflow-hidden">
<img alt="User Profile" data-alt="Abstract digital user avatar with neon accents" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCfG29jWuVFA3FmcjV2VjJQMfdoXUZsgAoHuGoiML-yDi-UOtdh4uDx9tuTvaBiPbNANr8ZKlsnplL3se3oEpbzn1cGzqxYz8RX75r_QKaJxWUwxBI4ctbL3uCHyuyfc0pideVjfu9tiCh4KSDPqktP7JOfhg2tCR-3vsKABYKdVuHM-9_Ipm1c2TBzP88o4fOG0TAdiuufOnJSW-2wBeOVu9Gc3XKFGDwZtSrCo6M6PkfOW4iELgX22l_zN-MF-m9D6BPominfK0g"/>
</div>
</div>
</header>
<main class="pt-20 px-6 space-y-8 opacity-40 select-none pointer-events-none">
<section>
<p class="font-headline text-on-surface-variant text-sm tracking-widest uppercase">Portfolio Value</p>
<h1 class="font-headline text-6xl font-bold tracking-tighter text-on-surface">$124,592.00</h1>
</section>
<div class="grid grid-cols-2 gap-4">
<div class="bg-surface-container-high rounded-xl p-6 h-32 flex flex-col justify-between">
<span class="text-on-surface-variant text-xs">BTC / USDT</span>
<span class="text-2xl font-headline font-bold text-tertiary">+4.28%</span>
</div>
<div class="bg-surface-container-high rounded-xl p-6 h-32 flex flex-col justify-between">
<span class="text-on-surface-variant text-xs">ETH / USDT</span>
<span class="text-2xl font-headline font-bold text-error">-1.12%</span>
</div>
</div>
</main>
<!-- Withdraw Modal Overlay -->
<div class="fixed inset-0 z-[100] flex items-center justify-center bg-black/60 backdrop-blur-md p-4">
<!-- Modal Card -->
<div class="glass-panel w-full max-w-md rounded-[2rem] p-8 shadow-[0_32px_64px_-15px_rgba(114,220,255,0.1)] border border-outline-variant/15 flex flex-col gap-8">
<!-- Header Section -->
<div class="space-y-2">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center">
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">account_balance_wallet</span>
</div>
<h2 class="font-headline text-2xl font-bold tracking-tight text-on-surface">提现 (Withdraw)</h2>
</div>
<p class="text-on-surface-variant text-sm">Securely transfer your assets to an external wallet address.</p>
</div>
<!-- Form Fields -->
<div class="space-y-5">
<!-- Amount Field -->
<div class="space-y-2">
<label class="font-headline text-xs font-bold text-on-surface-variant tracking-wider uppercase ml-1">Withdrawal Amount</label>
<div class="relative group">
<div class="absolute inset-y-0 left-4 flex items-center pointer-events-none">
<span class="text-primary text-sm font-bold">USDT</span>
</div>
<input class="w-full bg-surface-container-lowest border border-outline-variant/30 rounded-xl py-4 pl-16 pr-4 text-on-surface placeholder:text-on-surface-variant/40 focus:ring-0 focus:border-primary transition-all font-body text-sm" placeholder="Enter withdrawal amount (USDT)" type="number"/>
</div>
</div>
<!-- Address Field -->
<div class="space-y-2">
<label class="font-headline text-xs font-bold text-on-surface-variant tracking-wider uppercase ml-1">Destination Address</label>
<div class="relative group">
<input class="w-full bg-surface-container-lowest border border-outline-variant/30 rounded-xl py-4 px-4 text-on-surface placeholder:text-on-surface-variant/40 focus:ring-0 focus:border-primary transition-all font-body text-sm" placeholder="Enter withdrawal address" type="text"/>
<div class="absolute inset-y-0 right-4 flex items-center pointer-events-none">
<span class="material-symbols-outlined text-on-surface-variant text-lg">qr_code_scanner</span>
</div>
</div>
</div>
<!-- Contact Field -->
<div class="space-y-2">
<label class="font-headline text-xs font-bold text-on-surface-variant tracking-wider uppercase ml-1">Contact Info</label>
<input class="w-full bg-surface-container-lowest border border-outline-variant/30 rounded-xl py-4 px-4 text-on-surface placeholder:text-on-surface-variant/40 focus:ring-0 focus:border-primary transition-all font-body text-sm" placeholder="Contact info (optional)" type="text"/>
</div>
</div>
<!-- Action Buttons -->
<div class="flex flex-col gap-3 pt-2">
<button class="w-full bg-gradient-to-r from-primary to-primary-container text-on-primary-fixed font-headline font-bold py-4 rounded-2xl shadow-[0_0_20px_rgba(114,220,255,0.3)] hover:opacity-90 active:scale-[0.98] transition-all">
确认 (Confirm)
</button>
<button class="w-full border border-outline-variant/30 text-on-surface-variant font-headline font-bold py-4 rounded-2xl hover:bg-surface-variant/20 active:scale-[0.98] transition-all">
取消 (Cancel)
</button>
</div>
<!-- Security Footer -->
<div class="flex items-center justify-center gap-2 opacity-50">
<span class="material-symbols-outlined text-[14px]">verified_user</span>
<span class="text-[10px] font-label uppercase tracking-widest">End-to-End Encrypted Transaction</span>
</div>
</div>
</div>
<!-- Bottom Nav Bar (Supressed but defined in shell) -->
<nav class="fixed bottom-0 left-0 w-full z-50 flex justify-around items-center px-4 pb-6 pt-2 bg-[#10131a]/80 backdrop-blur-lg rounded-t-[2rem] border-t border-[#45484f]/15 opacity-30 select-none pointer-events-none">
<div class="flex flex-col items-center justify-center text-[#a9abb3] p-3">
<span class="material-symbols-outlined">home</span>
</div>
<div class="flex flex-col items-center justify-center text-[#a9abb3] p-3">
<span class="material-symbols-outlined">insert_chart</span>
</div>
<div class="flex flex-col items-center justify-center bg-[#72dcff]/10 text-[#72dcff] rounded-2xl p-3 shadow-[0_0_15px_rgba(114,220,255,0.3)]">
<span class="material-symbols-outlined">swap_horiz</span>
</div>
<div class="flex flex-col items-center justify-center text-[#a9abb3] p-3">
<span class="material-symbols-outlined">account_balance_wallet</span>
</div>
<div class="flex flex-col items-center justify-center text-[#a9abb3] p-3">
<span class="material-symbols-outlined">person</span>
</div>
</nav>
</body></html>

296
页面样式/行情.txt
View File

@@ -1,296 +0,0 @@
<!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>