211 lines
12 KiB
HTML
211 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>代付页面预览 - Premium FriendPay</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
|
|
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
|
|
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;900&family=JetBrains+Mono:wght@700&display=swap" rel="stylesheet">
|
|
<style>
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background-color: #050505;
|
|
color: white;
|
|
margin: 0;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
.font-mono {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
}
|
|
@keyframes pulse-slow {
|
|
0%, 100% { opacity: 0.3; }
|
|
50% { opacity: 0.6; }
|
|
}
|
|
.animate-pulse-slow {
|
|
animation: pulse-slow 8s infinite;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
|
|
<script type="text/babel">
|
|
const { useState, useEffect } = React;
|
|
|
|
// Simple Icon component to wrap Lucide
|
|
const Icon = ({ name, className }) => {
|
|
useEffect(() => {
|
|
lucide.createIcons();
|
|
}, [name]);
|
|
return <i data-lucide={name} className={className}></i>;
|
|
};
|
|
|
|
function App() {
|
|
const [viewMode, setViewMode] = useState('payer');
|
|
|
|
const content = {
|
|
payer: {
|
|
title: '帮他付款',
|
|
productName: 'AI 提效实战课：从入门到精通',
|
|
productDesc: '第 123 场直播回放 · 包含所有课件与实战案例',
|
|
requesterName: '好**',
|
|
requesterMsg: '“ 这门课对我很有帮助，希望能帮我代付一下，非常感谢！ ”',
|
|
amount: '199.00',
|
|
buttonText: '立即帮他付款',
|
|
buttonIcon: 'credit-card',
|
|
},
|
|
requester: {
|
|
title: '找朋友代付',
|
|
productName: '3000万流水如何跑出来 (退税模式解析)',
|
|
productDesc: '深度解析企业退税合规与流水结构优化',
|
|
requesterName: '你自己',
|
|
requesterMsg: '分享给好友，好友打开后即可为你完成支付。',
|
|
amount: '299.00',
|
|
buttonText: '发送给好友',
|
|
buttonIcon: 'share-2',
|
|
}
|
|
};
|
|
|
|
const current = content[viewMode];
|
|
|
|
return (
|
|
<div className="min-h-screen flex flex-col relative overflow-x-hidden">
|
|
{/* View Switcher */}
|
|
<div className="fixed top-6 left-1/2 -translate-x-1/2 z-50 flex bg-zinc-900/80 backdrop-blur-xl rounded-full p-1 border border-white/5 shadow-2xl">
|
|
<button
|
|
onClick={() => setViewMode('payer')}
|
|
className={`px-5 py-2 rounded-full text-xs font-bold tracking-wide transition-all duration-300 ${viewMode === 'payer' ? 'bg-[#14b8a6] text-black shadow-[0_0_15px_rgba(20,184,166,0.4)]' : 'text-zinc-500 hover:text-zinc-300'}`}
|
|
>
|
|
代付视角
|
|
</button>
|
|
<button
|
|
onClick={() => setViewMode('requester')}
|
|
className={`px-5 py-2 rounded-full text-xs font-bold tracking-wide transition-all duration-300 ${viewMode === 'requester' ? 'bg-[#14b8a6] text-black shadow-[0_0_15px_rgba(20,184,166,0.4)]' : 'text-zinc-500 hover:text-zinc-300'}`}
|
|
>
|
|
发起视角
|
|
</button>
|
|
</div>
|
|
|
|
<div className="max-w-md mx-auto w-full min-h-screen flex flex-col relative">
|
|
{/* Navigation */}
|
|
<header className="px-6 py-8 flex items-center justify-between sticky top-0 bg-[#050505]/60 backdrop-blur-xl z-10">
|
|
<button className="w-10 h-10 flex items-center justify-center bg-zinc-900/50 border border-white/5 rounded-full hover:bg-zinc-800 transition-colors">
|
|
<Icon name="chevron-left" className="w-5 h-5" />
|
|
</button>
|
|
<h1 className="text-sm font-bold uppercase tracking-[0.2em] text-zinc-400">{current.title}</h1>
|
|
<div className="flex items-center gap-2 bg-zinc-900/50 border border-white/5 rounded-full px-3 py-1.5">
|
|
<Icon name="more-horizontal" className="w-4 h-4 text-zinc-500" />
|
|
<div className="w-[1px] h-3 bg-white/10" />
|
|
<Icon name="circle" className="w-3 h-3 fill-white text-white" />
|
|
</div>
|
|
</header>
|
|
|
|
<main className="flex-1 px-6 pb-40 space-y-8">
|
|
{/* Product Hero Card */}
|
|
<section className="relative group">
|
|
<div className="absolute -inset-0.5 bg-gradient-to-b from-[#14b8a6]/20 to-transparent rounded-[2rem] blur-xl opacity-50"></div>
|
|
<div className="relative bg-zinc-900/80 border border-white/10 rounded-[2rem] p-8 overflow-hidden transition-all duration-500 hover:border-[#14b8a6]/30">
|
|
<div className="absolute top-0 right-0 p-6 opacity-10">
|
|
<Icon name="info" className="w-12 h-12" />
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div className="inline-block px-3 py-1 rounded-full bg-[#14b8a6]/10 border border-[#14b8a6]/20 text-[#14b8a6] text-[10px] font-black uppercase tracking-widest">
|
|
订单详情
|
|
</div>
|
|
<h2 className="text-2xl font-bold leading-tight tracking-tight">
|
|
{current.productName}
|
|
</h2>
|
|
<p className="text-zinc-400 text-sm font-medium">
|
|
{current.productDesc}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mt-10 pt-8 border-t border-white/5 flex items-center justify-between">
|
|
<div className="space-y-1">
|
|
<p className="text-[10px] uppercase tracking-widest text-zinc-500 font-bold">应付金额</p>
|
|
<div className="flex items-baseline gap-1">
|
|
<span className="text-[#14b8a6] text-lg font-bold">¥</span>
|
|
<span className="text-3xl font-mono font-bold tracking-tighter">{current.amount}</span>
|
|
</div>
|
|
</div>
|
|
<div className="w-12 h-12 rounded-2xl bg-[#14b8a6]/10 border border-[#14b8a6]/20 flex items-center justify-center">
|
|
<Icon name="arrow-right" className="w-5 h-5 text-[#14b8a6]" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Requester Info */}
|
|
<section className="bg-zinc-900/30 border border-white/5 rounded-3xl p-6 space-y-4">
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-12 h-12 rounded-full bg-gradient-to-br from-zinc-700 to-zinc-900 border border-white/10 flex items-center justify-center shadow-inner">
|
|
<Icon name="user" className="w-6 h-6 text-zinc-400" />
|
|
</div>
|
|
<div>
|
|
<h4 className="text-sm font-bold text-zinc-200">{current.requesterName}</h4>
|
|
<p className="text-[10px] uppercase tracking-widest text-zinc-500 font-bold">发起代付请求</p>
|
|
</div>
|
|
</div>
|
|
<div className="relative">
|
|
<div className="absolute left-0 top-0 bottom-0 w-1 bg-[#14b8a6]/30 rounded-full" />
|
|
<p className="pl-5 text-zinc-400 text-sm italic leading-relaxed">
|
|
{current.requesterMsg}
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Security Badge */}
|
|
<div className="flex items-center justify-center gap-2 py-4">
|
|
<Icon name="shield-check" className="w-4 h-4 text-[#14b8a6]/60" />
|
|
<span className="text-[10px] uppercase tracking-[0.2em] text-zinc-600 font-bold">
|
|
安全支付保障 · 资金由平台托管
|
|
</span>
|
|
</div>
|
|
</main>
|
|
|
|
{/* Floating Action Bar */}
|
|
<footer className="fixed bottom-0 left-0 right-0 p-8 z-20">
|
|
<div className="max-w-md mx-auto relative">
|
|
<div className="absolute inset-0 bg-zinc-900/80 backdrop-blur-2xl border border-white/10 rounded-[2.5rem] shadow-[0_20px_50px_rgba(0,0,0,0.5)]" />
|
|
|
|
<div className="relative p-3 flex items-center gap-4">
|
|
<div className="flex-1 pl-6">
|
|
<p className="text-[10px] uppercase tracking-widest text-zinc-500 font-bold mb-0.5">合计</p>
|
|
<p className="text-xl font-mono font-bold tracking-tighter">
|
|
<span className="text-[#14b8a6] text-sm mr-1">¥</span>
|
|
{current.amount}
|
|
</p>
|
|
</div>
|
|
|
|
<button
|
|
className="bg-[#14b8a6] hover:bg-[#0d9488] text-black font-black px-8 py-4 rounded-[1.8rem] flex items-center justify-center transition-all shadow-[0_8px_20px_rgba(20,184,166,0.3)] active:scale-95"
|
|
>
|
|
<Icon name={current.buttonIcon} className="w-5 h-5 mr-2" />
|
|
<span className="text-sm uppercase tracking-wider">{current.buttonText}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
{/* Ambient Background Effects */}
|
|
<div className="fixed top-0 left-0 w-full h-full overflow-hidden pointer-events-none -z-10">
|
|
<div className="absolute top-[-20%] left-[-10%] w-[80%] h-[60%] bg-[#14b8a6]/5 blur-[150px] rounded-full animate-pulse-slow" />
|
|
<div className="absolute bottom-[-10%] right-[-10%] w-[60%] h-[50%] bg-[#14b8a6]/5 blur-[120px] rounded-full" />
|
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-full opacity-[0.02] bg-[radial-gradient(#fff_1px,transparent_1px)] [background-size:32px_32px]" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const root = ReactDOM.createRoot(document.getElementById('root'));
|
|
root.render(<App />);
|
|
</script>
|
|
</body>
|
|
</html>
|