kccleoc/seedpgp-web
0
0
Fork 0
mirror of https://github.com/kccleoc/seedpgp-web.git synced 2026-03-07 09:57:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: transform UI to dark cyberpunk theme

Browse Source 
- Eliminate all white/light boxes and backgrounds
- Fix drag-drop zone with neon cyberpunk colors (#00f0ff, #ff006e, #16213e)
- Fix restored mnemonic display with matrix green (#39ff14)
- Fix security options panel with dark gradient
- Fix all remaining slate-700/slate-800 labels to cyberpunk neon
- Fix info banners and text colors
- Update badge components with cyberpunk color scheme
- Apply consistent dark theme across all components
This commit is contained in:
LC mac
2026-02-08 22:27:41 +08:00
parent 0ab99ce493
commit 7c4fc1460c
12 changed files with 649 additions and 515 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/QRScanner.tsx
View File

@@ -128,43 +128,43 @@ export default function QRScanner({ onScanSuccess, onClose, onError }: QRScanner
return (
<div className="fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center z-50">
<div className="bg-slate-800 rounded-xl border border-slate-700 p-6 max-w-md w-full mx-4 shadow-2xl">
<div className="bg-[#16213e] rounded-xl border-2 border-[#00f0ff]/50 p-6 max-w-md w-full mx-4 shadow-[0_0_40px_rgba(0,240,255,0.3)]">
<div className="flex items-center justify-between mb-4">
<h3 className="text-lg font-semibold text-white flex items-center gap-2">
<h3 className="text-lg font-semibold text-[#00f0ff] flex items-center gap-2" style={{ textShadow: '0 0 10px rgba(0,240,255,0.7)' }}>
<Camera size={20} />
Scan QR Code
</h3>
<button onClick={onClose} className="p-2 hover:bg-slate-700 rounded-lg transition-colors">
<X size={20} className="text-slate-400" />
<button onClick={onClose} className="p-2 hover:bg-[#1a1a2e] rounded-lg transition-colors border-2 border-[#00f0ff]/30">
<X size={20} className="text-[#6ef3f7]" />
</button>
</div>
{internalError && (
<div className="mb-4 p-3 bg-red-500/10 border border-red-500/50 rounded-lg flex items-start gap-2 text-red-400 text-sm">
<div className="mb-4 p-3 bg-[#ff006e]/10 border-2 border-[#ff006e]/30 rounded-lg flex items-start gap-2 text-[#ff006e] text-sm">
<AlertCircle size={16} className="shrink-0 mt-0.5" />
<span>{internalError}</span>
</div>
)}
{success && (
<div className="mb-4 p-3 bg-green-500/10 border border-green-500/50 rounded-lg flex items-center gap-2 text-green-400 text-sm">
<div className="mb-4 p-3 bg-[#39ff14]/10 border-2 border-[#39ff14]/30 rounded-lg flex items-center gap-2 text-[#39ff14] text-sm">
<CheckCircle2 size={16} />
<span>QR Code detected!</span>
</div>
)}
<div className="relative bg-black rounded-lg overflow-hidden">
<div className="relative bg-black rounded-lg overflow-hidden border-2 border-[#00f0ff]/30">
<video ref={videoRef} className="w-full h-64 object-cover" playsInline muted />
<canvas ref={canvasRef} className="hidden" />
</div>
{!hasPermission && !internalError && (
<p className="text-sm text-slate-400 mt-3 text-center">Requesting camera access...</p>
<p className="text-sm text-[#6ef3f7] mt-3 text-center">Requesting camera access...</p>
)}
<button
onClick={onClose}
className="w-full mt-4 py-2 bg-slate-700 hover:bg-slate-600 rounded-lg text-white font-medium transition-colors"
className="w-full mt-4 py-2 bg-[#1a1a2e] hover:bg-[#16213e] rounded-lg text-[#00f0ff] font-medium transition-all border-2 border-[#00f0ff]/50 hover:shadow-[0_0_15px_rgba(0,240,255,0.3)]"
>
Cancel
</button>