402 lines
14 KiB
TypeScript
402 lines
14 KiB
TypeScript
import React, { useState } from 'react';
|
||
import type { WallpaperType } from '../App';
|
||
import AmneziaVPN from '../apps/amneziavpn/AmneziaVPN';
|
||
|
||
interface Case4DesktopProps {
|
||
onComplete: (type: WallpaperType) => void;
|
||
}
|
||
|
||
type OpenWindow = 'vpn' | 'browser' | null;
|
||
|
||
const Case4Desktop: React.FC<Case4DesktopProps> = ({ onComplete }) => {
|
||
const [vpnConnected, setVpnConnected] = useState(
|
||
() => localStorage.getItem('amnezia_connected') === 'true'
|
||
);
|
||
const [openWindow, setOpenWindow] = useState<OpenWindow>(null);
|
||
const [showVpnWarning, setShowVpnWarning] = useState(false);
|
||
const [browserPage, setBrowserPage] = useState<'new-tab' | 'bank'>('new-tab');
|
||
const [completed, setCompleted] = useState(false);
|
||
|
||
const openBrowser = () => {
|
||
if (!vpnConnected) {
|
||
setShowVpnWarning(true);
|
||
} else {
|
||
setOpenWindow('browser');
|
||
}
|
||
};
|
||
|
||
const handleWarningContinue = () => {
|
||
setShowVpnWarning(false);
|
||
setOpenWindow('browser');
|
||
};
|
||
|
||
return (
|
||
<div style={s.root}>
|
||
{/* Фон — кафе */}
|
||
<div style={s.cafeBar}>
|
||
<span style={s.wifiIcon}>📶</span>
|
||
<span style={s.wifiText}>Подключено: <b>CafeNet_Free</b></span>
|
||
<span style={s.wifiUnsafe}>⚠ Публичная сеть</span>
|
||
</div>
|
||
|
||
{/* Легенда */}
|
||
<div style={s.story}>
|
||
<p>Вы пришли в кафе и подключились к бесплатному Wi-Fi. Ваш трафик может перехватываться.<br/>
|
||
Перед тем как открывать браузер — рекомендуется включить VPN.</p>
|
||
</div>
|
||
|
||
{/* Иконки рабочего стола */}
|
||
<div style={s.desktop}>
|
||
<button style={s.icon} onClick={() => setOpenWindow('vpn')}>
|
||
<span style={s.iconImg}>🔒</span>
|
||
<span style={s.iconLabel}>AmneziaVPN</span>
|
||
</button>
|
||
<button style={s.icon} onClick={openBrowser}>
|
||
<span style={s.iconImg}>🌐</span>
|
||
<span style={s.iconLabel}>Браузер</span>
|
||
</button>
|
||
</div>
|
||
|
||
{/* Статус VPN */}
|
||
<div style={{ ...s.vpnStatus, ...(vpnConnected ? s.vpnOn : s.vpnOff) }}>
|
||
{vpnConnected ? '🛡 VPN включён — соединение защищено' : '⚡ VPN выключен — трафик не защищён'}
|
||
</div>
|
||
|
||
{/* Кнопка завершения */}
|
||
{vpnConnected && !completed && (
|
||
<button style={s.completeBtn} onClick={() => { setCompleted(true); onComplete('win10'); }}>
|
||
✓ Завершить кейс
|
||
</button>
|
||
)}
|
||
|
||
{/* Окно VPN */}
|
||
{openWindow === 'vpn' && (
|
||
<div style={s.windowOverlay}>
|
||
<div style={s.window}>
|
||
<div style={s.windowBar}>
|
||
<span>AmneziaVPN</span>
|
||
<button style={s.closeBtn} onClick={() => setOpenWindow(null)}>✕</button>
|
||
</div>
|
||
<AmneziaVPN onConnectedChange={setVpnConnected} />
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Окно браузера */}
|
||
{openWindow === 'browser' && (
|
||
<div style={s.windowOverlay}>
|
||
<div style={{ ...s.window, width: 700, maxWidth: '95vw' }}>
|
||
<div style={s.windowBar}>
|
||
<span>Браузер</span>
|
||
<button style={s.closeBtn} onClick={() => { setOpenWindow(null); setBrowserPage('new-tab'); }}>✕</button>
|
||
</div>
|
||
<div style={s.browserChrome}>
|
||
<div style={s.urlBar}>
|
||
{vpnConnected && <span style={s.httpsIcon}>🔒</span>}
|
||
{!vpnConnected && <span style={s.httpIcon}>⚠</span>}
|
||
<span style={s.urlText}>
|
||
{browserPage === 'bank' ? 'http://bank-online.ru' : 'about:newtab'}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div style={s.browserContent}>
|
||
{browserPage === 'new-tab' ? (
|
||
<div style={s.newTab}>
|
||
<div style={s.newTabTitle}>Новая вкладка</div>
|
||
{!vpnConnected && (
|
||
<div style={s.browserWarn}>
|
||
⚠ Вы используете незащищённое соединение. Ваш трафик виден другим пользователям сети.
|
||
</div>
|
||
)}
|
||
<div style={s.bookmarks}>
|
||
<button style={s.bookmark} onClick={() => setBrowserPage('bank')}>
|
||
🏦 Онлайн-банк
|
||
</button>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div style={s.bankPage}>
|
||
{!vpnConnected && (
|
||
<div style={s.interceptAlert}>
|
||
<div style={s.interceptTitle}>🚨 ВНИМАНИЕ: Перехват трафика!</div>
|
||
<div style={s.interceptBody}>
|
||
Злоумышленник в сети перехватил ваш запрос к банку.<br/>
|
||
Логин, пароль и данные карты переданы в открытом виде через HTTP.<br/><br/>
|
||
<b>Если бы был включён VPN</b> — весь трафик был бы зашифрован и недоступен для перехвата.
|
||
</div>
|
||
<button style={s.warnBtn} onClick={() => setBrowserPage('new-tab')}>← Назад</button>
|
||
</div>
|
||
)}
|
||
{vpnConnected && (
|
||
<div style={s.safeBank}>
|
||
<div style={s.safeBankTitle}>🏦 Онлайн-банк</div>
|
||
<div style={s.safeBankBody}>
|
||
🛡 Соединение защищено VPN-шифрованием.<br/>
|
||
Ваши данные надёжно зашифрованы и недоступны другим пользователям сети.
|
||
</div>
|
||
<button style={s.warnBtn} onClick={() => setBrowserPage('new-tab')}>← Назад</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Предупреждение при открытии браузера без VPN */}
|
||
{showVpnWarning && (
|
||
<div style={s.modalOverlay}>
|
||
<div style={s.modal}>
|
||
<div style={s.modalIcon}>⚠️</div>
|
||
<div style={s.modalTitle}>VPN не подключён</div>
|
||
<div style={s.modalText}>
|
||
Вы подключены к публичной сети <b>CafeNet_Free</b>.<br/>
|
||
Без VPN ваш трафик может быть перехвачен злоумышленниками в этой же сети.<br/><br/>
|
||
Рекомендуется сначала включить AmneziaVPN.
|
||
</div>
|
||
<div style={{ display: 'flex', gap: 12, justifyContent: 'center' }}>
|
||
<button style={s.modalBtnSecondary} onClick={() => { setShowVpnWarning(false); setOpenWindow('vpn'); }}>
|
||
Включить VPN
|
||
</button>
|
||
<button style={s.modalBtnDanger} onClick={handleWarningContinue}>
|
||
Всё равно открыть
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
const s: Record<string, React.CSSProperties> = {
|
||
root: {
|
||
minHeight: '100vh',
|
||
background: 'linear-gradient(135deg, #1a0a00 0%, #0d1117 50%, #001a1a 100%)',
|
||
color: '#ccc',
|
||
fontFamily: "'Share Tech Mono', monospace",
|
||
position: 'relative',
|
||
overflow: 'hidden',
|
||
},
|
||
cafeBar: {
|
||
background: 'rgba(0,0,0,0.6)',
|
||
borderBottom: '1px solid rgba(0,255,255,0.15)',
|
||
padding: '10px 24px',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: 12,
|
||
fontSize: 14,
|
||
},
|
||
wifiIcon: { fontSize: 18 },
|
||
wifiText: { color: '#ccc' },
|
||
wifiUnsafe: { color: '#f5a623', marginLeft: 8 },
|
||
story: {
|
||
maxWidth: 700,
|
||
margin: '24px auto 0',
|
||
padding: '16px 24px',
|
||
background: 'rgba(0,255,255,0.04)',
|
||
border: '1px solid rgba(0,255,255,0.15)',
|
||
borderRadius: 8,
|
||
fontSize: 14,
|
||
lineHeight: 1.7,
|
||
color: '#aaa',
|
||
textAlign: 'center',
|
||
},
|
||
desktop: {
|
||
display: 'flex',
|
||
gap: 40,
|
||
justifyContent: 'center',
|
||
marginTop: 48,
|
||
},
|
||
icon: {
|
||
background: 'rgba(255,255,255,0.04)',
|
||
border: '1px solid rgba(255,255,255,0.1)',
|
||
borderRadius: 12,
|
||
padding: '20px 28px',
|
||
cursor: 'pointer',
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
alignItems: 'center',
|
||
gap: 10,
|
||
transition: 'all 0.2s',
|
||
color: '#ccc',
|
||
},
|
||
iconImg: { fontSize: 40 },
|
||
iconLabel: { fontSize: 13, fontFamily: "'Share Tech Mono', monospace" },
|
||
vpnStatus: {
|
||
textAlign: 'center',
|
||
marginTop: 32,
|
||
fontSize: 13,
|
||
padding: '8px 20px',
|
||
borderRadius: 6,
|
||
display: 'inline-block',
|
||
position: 'relative',
|
||
left: '50%',
|
||
transform: 'translateX(-50%)',
|
||
},
|
||
vpnOn: { background: 'rgba(0,255,65,0.1)', border: '1px solid #00FF41', color: '#00FF41' },
|
||
vpnOff: { background: 'rgba(245,166,35,0.1)', border: '1px solid #f5a623', color: '#f5a623' },
|
||
completeBtn: {
|
||
display: 'block',
|
||
margin: '24px auto 0',
|
||
padding: '12px 36px',
|
||
background: '#00FF41',
|
||
border: 'none',
|
||
borderRadius: 6,
|
||
color: '#000',
|
||
fontFamily: "'Orbitron', monospace",
|
||
fontSize: 14,
|
||
fontWeight: 700,
|
||
cursor: 'pointer',
|
||
},
|
||
windowOverlay: {
|
||
position: 'fixed',
|
||
inset: 0,
|
||
background: 'rgba(0,0,0,0.5)',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
zIndex: 100,
|
||
},
|
||
window: {
|
||
background: '#0d0d22',
|
||
border: '1px solid rgba(0,255,255,0.25)',
|
||
borderRadius: 10,
|
||
overflow: 'hidden',
|
||
width: 360,
|
||
boxShadow: '0 0 40px rgba(0,255,255,0.1)',
|
||
},
|
||
windowBar: {
|
||
background: '#080818',
|
||
borderBottom: '1px solid rgba(0,255,255,0.15)',
|
||
padding: '10px 16px',
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
fontSize: 13,
|
||
color: '#00FFFF',
|
||
fontFamily: "'Orbitron', monospace",
|
||
},
|
||
closeBtn: {
|
||
background: 'transparent',
|
||
border: '1px solid rgba(255,0,64,0.4)',
|
||
color: '#ff6b6b',
|
||
cursor: 'pointer',
|
||
borderRadius: 4,
|
||
padding: '2px 8px',
|
||
fontSize: 12,
|
||
},
|
||
browserChrome: {
|
||
background: '#080818',
|
||
borderBottom: '1px solid rgba(0,255,255,0.1)',
|
||
padding: '8px 12px',
|
||
},
|
||
urlBar: {
|
||
background: '#0a0a1a',
|
||
border: '1px solid rgba(0,255,255,0.2)',
|
||
borderRadius: 4,
|
||
padding: '6px 12px',
|
||
fontSize: 13,
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: 8,
|
||
},
|
||
httpsIcon: { color: '#00FF41', fontSize: 14 },
|
||
httpIcon: { color: '#f5a623', fontSize: 14 },
|
||
urlText: { color: '#888', flex: 1 },
|
||
browserContent: { minHeight: 300, background: '#0a0a0a' },
|
||
newTab: { padding: 24 },
|
||
newTabTitle: { color: '#555', fontSize: 13, marginBottom: 16, fontFamily: "'Orbitron', monospace" },
|
||
browserWarn: {
|
||
background: 'rgba(245,166,35,0.1)',
|
||
border: '1px solid #f5a623',
|
||
borderRadius: 6,
|
||
padding: '10px 14px',
|
||
fontSize: 13,
|
||
color: '#f5a623',
|
||
marginBottom: 20,
|
||
},
|
||
bookmarks: { display: 'flex', gap: 12, flexWrap: 'wrap' },
|
||
bookmark: {
|
||
background: 'rgba(0,255,255,0.05)',
|
||
border: '1px solid rgba(0,255,255,0.2)',
|
||
borderRadius: 8,
|
||
padding: '12px 18px',
|
||
color: '#aaa',
|
||
cursor: 'pointer',
|
||
fontSize: 13,
|
||
fontFamily: "'Share Tech Mono', monospace",
|
||
},
|
||
bankPage: { padding: 24 },
|
||
interceptAlert: {
|
||
background: 'rgba(255,0,64,0.08)',
|
||
border: '1px solid #FF0040',
|
||
borderRadius: 8,
|
||
padding: 20,
|
||
},
|
||
interceptTitle: { color: '#FF0040', fontFamily: "'Orbitron', monospace", fontSize: 15, marginBottom: 12, fontWeight: 700 },
|
||
interceptBody: { color: '#ccc', fontSize: 13, lineHeight: 1.7, marginBottom: 16 },
|
||
safeBank: {
|
||
background: 'rgba(0,255,65,0.06)',
|
||
border: '1px solid #00FF41',
|
||
borderRadius: 8,
|
||
padding: 20,
|
||
},
|
||
safeBankTitle: { color: '#00FF41', fontFamily: "'Orbitron', monospace", fontSize: 15, marginBottom: 12, fontWeight: 700 },
|
||
safeBankBody: { color: '#ccc', fontSize: 13, lineHeight: 1.7, marginBottom: 16 },
|
||
warnBtn: {
|
||
background: 'transparent',
|
||
border: '1px solid rgba(0,255,255,0.3)',
|
||
color: '#888',
|
||
borderRadius: 6,
|
||
padding: '8px 16px',
|
||
cursor: 'pointer',
|
||
fontSize: 13,
|
||
fontFamily: "'Share Tech Mono', monospace",
|
||
},
|
||
modalOverlay: {
|
||
position: 'fixed',
|
||
inset: 0,
|
||
background: 'rgba(0,0,0,0.7)',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
zIndex: 200,
|
||
},
|
||
modal: {
|
||
background: '#0d0d22',
|
||
border: '1px solid #f5a623',
|
||
borderRadius: 10,
|
||
padding: '32px 28px',
|
||
maxWidth: 420,
|
||
textAlign: 'center',
|
||
boxShadow: '0 0 30px rgba(245,166,35,0.2)',
|
||
},
|
||
modalIcon: { fontSize: 40, marginBottom: 12 },
|
||
modalTitle: { color: '#f5a623', fontFamily: "'Orbitron', monospace", fontSize: 16, marginBottom: 12, fontWeight: 700 },
|
||
modalText: { color: '#aaa', fontSize: 13, lineHeight: 1.7, marginBottom: 24 },
|
||
modalBtnSecondary: {
|
||
background: '#00FF41',
|
||
border: 'none',
|
||
borderRadius: 6,
|
||
padding: '10px 20px',
|
||
color: '#000',
|
||
cursor: 'pointer',
|
||
fontFamily: "'Orbitron', monospace",
|
||
fontSize: 12,
|
||
fontWeight: 700,
|
||
},
|
||
modalBtnDanger: {
|
||
background: 'transparent',
|
||
border: '1px solid rgba(255,0,64,0.5)',
|
||
borderRadius: 6,
|
||
padding: '10px 20px',
|
||
color: '#FF0040',
|
||
cursor: 'pointer',
|
||
fontFamily: "'Share Tech Mono', monospace",
|
||
fontSize: 12,
|
||
},
|
||
};
|
||
|
||
export default Case4Desktop;
|