mirror of
https://github.com/kccleoc/seedpgp-web.git
synced 2026-03-07 09:57:50 +08:00
restyle the butoon to match theme style
This commit is contained in:
22
src/App.tsx
22
src/App.tsx
@@ -875,17 +875,19 @@ function App() {
|
||||
Send Generated Seed To
|
||||
</label>
|
||||
<div className="grid grid-cols-2 gap-3 max-w-sm mx-auto">
|
||||
<label className={`p-4 rounded-lg border-2 cursor-pointer transition-all ${seedDestination === 'backup' ? 'bg-[#1a1a2e] border-[#ff006e] shadow-[0_0_15px_rgba(255,0,110,0.5)]' : 'bg-[#16213e] border-[#00f0ff]/30 hover:border-[#00f0ff]/50'}`}>
|
||||
<label className={`p-3 md:p-4 rounded-lg border-2 cursor-pointer transition-all ${seedDestination === 'backup' ? 'bg-[#1a1a2e] border-[#ff006e] shadow-[0_0_15px_rgba(255,0,110,0.5)]' : 'bg-[#16213e] border-[#00f0ff]/30 hover:border-[#00f0ff]/50'}`}>
|
||||
<input type="radio" name="destination" value="backup" checked={seedDestination === 'backup'} onChange={(e) => setSeedDestination(e.target.value as 'backup' | 'seedblender')} className="hidden" />
|
||||
<div className="text-center space-y-1">
|
||||
<div className={`text-sm font-bold ${seedDestination === 'backup' ? 'text-[#00f0ff]' : 'text-[#9d84b7]'}`}>📦 Backup</div>
|
||||
<div className="flex flex-col items-center justify-center gap-1 md:gap-2">
|
||||
<Lock className={`w-5 h-5 md:w-6 md:h-6 transition-colors ${seedDestination === 'backup' ? 'text-[#00f0ff]' : 'text-[#9d84b7]'}`} />
|
||||
<div className={`text-xs md:text-sm font-bold ${seedDestination === 'backup' ? 'text-[#00f0ff]' : 'text-[#9d84b7]'}`}>Backup</div>
|
||||
<p className="text-[10px] text-[#6ef3f7]">Encrypt immediately</p>
|
||||
</div>
|
||||
</label>
|
||||
<label className={`p-4 rounded-lg border-2 cursor-pointer transition-all ${seedDestination === 'seedblender' ? 'bg-[#1a1a2e] border-[#ff006e] shadow-[0_0_15px_rgba(255,0,110,0.5)]' : 'bg-[#16213e] border-[#00f0ff]/30 hover:border-[#00f0ff]/50'}`}>
|
||||
<label className={`p-3 md:p-4 rounded-lg border-2 cursor-pointer transition-all ${seedDestination === 'seedblender' ? 'bg-[#1a1a2e] border-[#ff006e] shadow-[0_0_15px_rgba(255,0,110,0.5)]' : 'bg-[#16213e] border-[#00f0ff]/30 hover:border-[#00f0ff]/50'}`}>
|
||||
<input type="radio" name="destination" value="seedblender" checked={seedDestination === 'seedblender'} onChange={(e) => setSeedDestination(e.target.value as 'backup' | 'seedblender')} className="hidden" />
|
||||
<div className="text-center space-y-1">
|
||||
<div className={`text-sm font-bold ${seedDestination === 'seedblender' ? 'text-[#00f0ff]' : 'text-[#9d84b7]'}`}>🎨 Seed Blender</div>
|
||||
<div className="flex flex-col items-center justify-center gap-1 md:gap-2">
|
||||
<Dices className={`w-5 h-5 md:w-6 md:h-6 transition-colors ${seedDestination === 'seedblender' ? 'text-[#00f0ff]' : 'text-[#9d84b7]'}`} />
|
||||
<div className={`text-xs md:text-sm font-bold ${seedDestination === 'seedblender' ? 'text-[#00f0ff]' : 'text-[#9d84b7]'}`}>Seed Blender</div>
|
||||
<p className="text-[10px] text-[#6ef3f7]">Use for XOR blending</p>
|
||||
</div>
|
||||
</label>
|
||||
@@ -893,8 +895,12 @@ function App() {
|
||||
</div>
|
||||
|
||||
{/* Send Button */}
|
||||
<button onClick={handleSendToDestination} className="w-full py-3 bg-gradient-to-r from-[#ff006e] to-[#ff4d8f] text-white text-sm rounded-xl font-bold uppercase hover:shadow-[0_0_30px_rgba(255,0,110,0.8)] transition-all">
|
||||
Send to {seedDestination === 'backup' ? 'Backup' : 'Seed Blender'}
|
||||
<button
|
||||
onClick={handleSendToDestination}
|
||||
className="w-full py-2.5 bg-[#1a1a2e] border-2 border-[#ff006e] text-[#00f0ff] text-xs md:text-sm rounded-lg font-bold uppercase tracking-wide hover:shadow-[0_0_25px_rgba(255,0,110,0.7)] active:scale-95 transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-[0_0_15px_rgba(255,0,110,0.5)]"
|
||||
style={{ textShadow: '0 0 8px rgba(0,240,255,0.7)' }}
|
||||
>
|
||||
Continue to {seedDestination === 'backup' ? 'Backup' : 'Seed Blender'}
|
||||
</button>
|
||||
|
||||
<button onClick={() => { setGeneratedSeed(''); setEntropySource(null); setEntropyStats(null); }} className="w-full py-2 bg-[#16213e] border-2 border-[#00f0ff] text-[#00f0ff] rounded-lg text-sm font-bold hover:bg-[#00f0ff]/20 transition-all">
|
||||
|
||||
Reference in New Issue
Block a user