SecureBitChat/securebit-chat
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(ui): add glowing border effect and improve card hover interactions

Browse Source 
- implemented glowing border effect on cards when cursor is near
- multiple cards can glow simultaneously within proximity
- smooth fade-out without flicker on mouse leave
- improved hover animation for better user experience
This commit is contained in:
lockbitchat
2025-10-02 16:52:31 -04:00
parent 6bed472e09
commit 7682f57889
11 changed files with 161 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/app.jsx
View File

@@ -473,53 +473,7 @@
]),
React.createElement('div', {
key: 'security-features',
className: "grid grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4 max-w-6xl mx-auto mt-8"
}, [
React.createElement('div', { key: 'feature1', className: "text-center p-3 sm:p-4" }, [
React.createElement('div', { key: 'icon', className: "w-10 h-10 sm:w-12 sm:h-12 rounded-lg flex items-center justify-center mx-auto mb-2 sm:mb-3" }, [
React.createElement('i', { className: 'fas fa-key accent-green' })
]),
React.createElement('h4', { key: 'title', className: "text-xs sm:text-sm font-medium text-primary mb-1" }, "ECDH P-384 Key Exchange"),
React.createElement('p', { key: 'desc', className: "text-xs text-muted leading-tight" }, "Military-grade elliptic curve key exchange")
]),
React.createElement('div', { key: 'feature2', className: "text-center p-3 sm:p-4" }, [
React.createElement('div', { key: 'icon', className: "w-10 h-10 sm:w-12 sm:h-12 rounded-lg flex items-center justify-center mx-auto mb-2 sm:mb-3" }, [
React.createElement('i', { className: 'fas fa-user-shield accent-purple' })
]),
React.createElement('h4', { key: 'title', className: "text-xs sm:text-sm font-medium text-primary mb-1" }, "MITM Protection"),
React.createElement('p', { key: 'desc', className: "text-xs text-muted leading-tight" }, "Out-of-band verification against attacks")
]),
React.createElement('div', { key: 'feature3', className: "text-center p-3 sm:p-4" }, [
React.createElement('div', { key: 'icon', className: "w-10 h-10 sm:w-12 sm:h-12 rounded-lg flex items-center justify-center mx-auto mb-2 sm:mb-3" }, [
React.createElement('i', { className: 'fas fa-lock accent-orange' })
]),
React.createElement('h4', { key: 'title', className: "text-xs sm:text-sm font-medium text-primary mb-1" }, "AES-GCM 256 Encryption"),
React.createElement('p', { key: 'desc', className: "text-xs text-muted leading-tight" }, "Authenticated encryption standard")
]),
React.createElement('div', { key: 'feature4', className: "text-center p-3 sm:p-4" }, [
React.createElement('div', { key: 'icon', className: "w-10 h-10 sm:w-12 sm:h-12 rounded-lg flex items-center justify-center mx-auto mb-2 sm:mb-3" }, [
React.createElement('i', { className: 'fas fa-sync-alt accent-cyan' })
]),
React.createElement('h4', { key: 'title', className: "text-xs sm:text-sm font-medium text-primary mb-1" }, "Perfect Forward Secrecy"),
React.createElement('p', { key: 'desc', className: "text-xs text-muted leading-tight" }, "Automatic key rotation every 5 minutes")
]),
React.createElement('div', { key: 'feature5', className: "text-center p-3 sm:p-4" }, [
React.createElement('div', { key: 'icon', className: "w-10 h-10 sm:w-12 sm:h-12 rounded-lg flex items-center justify-center mx-auto mb-2 sm:mb-3" }, [
React.createElement('i', { className: 'fas fa-signature accent-blue' })
]),
React.createElement('h4', { key: 'title', className: "text-xs sm:text-sm font-medium text-primary mb-1" }, "ECDSA P-384 Signatures"),
React.createElement('p', { key: 'desc', className: "text-xs text-muted leading-tight" }, "Digital signatures for message integrity")
]),
React.createElement('div', { key: 'feature6', className: "text-center p-3 sm:p-4" }, [
React.createElement('div', { key: 'icon', className: "w-10 h-10 sm:w-12 sm:h-12 rounded-lg flex items-center justify-center mx-auto mb-2 sm:mb-3" }, [
React.createElement('i', { className: 'fas fa-shield-alt accent-red' })
]),
React.createElement('h4', { key: 'title', className: "text-xs sm:text-sm font-medium text-primary mb-1" }, "SAS Security"),
React.createElement('p', { key: 'desc', className: "text-xs text-muted leading-tight" }, "Revolutionary key exchange & MITM protection")
]),
]),
React.createElement(SecurityFeatures, { key: 'security-features' }),
React.createElement(UniqueFeatureSlider, { key: 'unique-features-slider' }),