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

Adding a new block that shows which platforms are under development, and in the future, when users click on the interactive elements of the block, they will be directed to marketplaces or download the applications to their computer.

Browse Source
This commit is contained in:
lockbitchat
2025-08-17 00:10:33 -04:00
parent 12de75f882
commit 9f463c6672
2 changed files with 95 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
src/components/ui/DownloadApps.jsx Normal file
View File

@@ -0,0 +1,90 @@
const DownloadApps = () => {
const apps = [
{ id: 'web', name: 'Web App', subtitle: 'Browser Version', icon: 'fas fa-globe', platform: 'Web', isActive: true, url: 'https://securebitchat.github.io/securebit-chat/', color: 'green' },
{ id: 'windows', name: 'Windows', subtitle: 'Desktop App', icon: 'fab fa-windows', platform: 'Desktop', isActive: false, url: '#', color: 'blue' },
{ id: 'macos', name: 'macOS', subtitle: 'Desktop App', icon: 'fab fa-apple', platform: 'Desktop', isActive: false, url: '#', color: 'gray' },
{ id: 'linux', name: 'Linux', subtitle: 'Desktop App', icon: 'fab fa-linux', platform: 'Desktop', isActive: false, url: '#', color: 'orange' },
{ id: 'ios', name: 'iOS', subtitle: 'iPhone & iPad', icon: 'fab fa-apple', platform: 'Mobile', isActive: false, url: 'https://apps.apple.com/app/securebit-chat/', color: 'blue' },
{ id: 'android', name: 'Android', subtitle: 'Google Play', icon: 'fab fa-android', platform: 'Mobile', isActive: false, url: 'https://play.google.com/store/apps/details?id=com.securebit.chat', color: 'green' }
];
const handleDownload = (app) => {
if (app.isActive) window.open(app.url, '_blank');
};
const desktopApps = apps.filter(a => a.platform !== 'Mobile');
const mobileApps = apps.filter(a => a.platform === 'Mobile');
// Размер карточки
const cardSize = "w-28 h-28"; // квадратные
return React.createElement('div', { className: "mt-20 px-6" }, [
// Header
React.createElement('div', { key: 'header', className: "text-center max-w-3xl mx-auto mb-12" }, [
React.createElement('h3', { key: 'title', className: "text-3xl font-bold text-primary mb-3" }, 'Download SecureBit.chat'),
React.createElement('p', { key: 'subtitle', className: "text-secondary text-lg mb-5" }, 'Stay secure on every device. Choose your platform and start chatting privately.')
]),
// Верхний ряд: Desktop + Web (скрыт на мобильных)
React.createElement('div', { key: 'desktop-row', className: "hidden sm:flex justify-center flex-wrap gap-6 mb-6" },
desktopApps.map(app =>
React.createElement('div', {
key: app.id,
className: `group relative ${cardSize} rounded-2xl overflow-hidden card-minimal cursor-pointer`
}, [
React.createElement('i', {
key: 'bg-icon',
className: `${app.icon} absolute text-[3rem] text-white/10 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none transition-all duration-500 group-hover:scale-105`
}),
React.createElement('div', {
key: 'overlay',
className: "absolute inset-0 bg-black/30 backdrop-blur-md flex flex-col items-center justify-center text-center opacity-0 transition-opacity duration-300 group-hover:opacity-100"
}, [
React.createElement('h4', { key: 'name', className: `text-sm font-semibold text-primary mb-1` }, app.name),
React.createElement('p', { key: 'subtitle', className: `text-xs text-secondary mb-2` }, app.subtitle),
app.isActive ?
React.createElement('button', {
key: 'btn',
onClick: () => handleDownload(app),
className: `px-2 py-1 rounded-xl bg-emerald-500 text-black font-medium hover:bg-emerald-600 transition-colors text-xs`
}, app.id === "web" ? "Launch" : "Download")
:
React.createElement('span', { key: 'coming', className: "text-gray-400 font-medium text-xs" }, "Coming Soon")
])
])
)
),
// Нижний ряд: Mobile (всегда центрированы)
React.createElement('div', { key: 'mobile-row', className: "flex justify-center gap-6" },
mobileApps.map(app =>
React.createElement('div', {
key: app.id,
className: `group relative ${cardSize} rounded-2xl overflow-hidden card-minimal cursor-pointer`
}, [
React.createElement('i', {
key: 'bg-icon',
className: `${app.icon} absolute text-[3rem] text-white/10 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none transition-all duration-500 group-hover:scale-105`
}),
React.createElement('div', {
key: 'overlay',
className: "absolute inset-0 bg-black/30 backdrop-blur-md flex flex-col items-center justify-center text-center opacity-0 transition-opacity duration-300 group-hover:opacity-100"
}, [
React.createElement('h4', { key: 'name', className: `text-sm font-semibold text-primary mb-1` }, app.name),
React.createElement('p', { key: 'subtitle', className: `text-xs text-secondary mb-2` }, app.subtitle),
app.isActive ?
React.createElement('button', {
key: 'btn',
onClick: () => handleDownload(app),
className: `px-2 py-1 rounded-xl bg-emerald-500 text-black font-medium hover:bg-emerald-600 transition-colors text-xs`
}, "Download")
:
React.createElement('span', { key: 'coming', className: "text-gray-400 font-medium text-xs" }, "Coming Soon")
])
])
)
)
]);
};
window.DownloadApps = DownloadApps;