+ {history.map((line, i) => ( +

+ {line.text} +

+ ))} +

+ $ + setInput(e.target.value)} + onKeyDown={handleCommand} + autoFocus + /> +

+ {currentTaskState} +

+ ); +}; + +const styles = { + container: { backgroundColor: '#1e1e1e', color: '#00ff00', padding: '20px', fontFamily: 'monospace', height: '400px', display: 'flex', flexDirection: 'column' as const, borderRadius: '8px' }, + terminal: { flex: 1, overflowY: 'auto' as const, marginBottom: '10px' }, + line: { marginBottom: '4px', whiteSpace: 'pre-wrap' as const, textAlign: 'justify' as const }, + user: { color: '#fff' }, + error: { color: '#ff5555' }, + system: { color: '#aaa' }, + inputLine: { display: 'flex', alignItems: 'center' }, + prompt: { marginRight: '8px', fontWeight: 'bold' }, + input: { background: 'transparent', border: 'none', color: '#00ff00', outline: 'none', flex: 1, fontFamily: 'monospace', fontSize: '16px' } +}; + +export default TerminalApp; diff --git a/src/apps/vscode/vscode.css b/src/apps/vscode/vscode.css new file mode 100644 index 0000000..21f0f7b --- /dev/null +++ b/src/apps/vscode/vscode.css @@ -0,0 +1,3 @@ +.vscode_main_window { + background: blue; +} \ No newline at end of file diff --git a/src/apps/vscode/vscode.tsx b/src/apps/vscode/vscode.tsx new file mode 100644 index 0000000..e351194 --- /dev/null +++ b/src/apps/vscode/vscode.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import './vscode.css'; + +const VScodeApp: React.FC = () => { + return ( +

Vscode

+ + +

+ ); +}; + +export default VScodeApp; \ No newline at end of file diff --git a/src/apps/yandex/Yandex.css b/src/apps/yandex/Yandex.css new file mode 100644 index 0000000..e11efdd --- /dev/null +++ b/src/apps/yandex/Yandex.css @@ -0,0 +1,5 @@ +.yandex { + width: 100%; + height: 100%; + background: url("/yandex_search.jpg"); +} \ No newline at end of file diff --git a/src/apps/yandex/Yandex.tsx b/src/apps/yandex/Yandex.tsx new file mode 100644 index 0000000..e19f119 --- /dev/null +++ b/src/apps/yandex/Yandex.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import './Yandex.css'; + +const YandexApp: React.FC = () => { + return ( +

+ {/*

Vscode

+ + */} +

+ ); +}; + +export default YandexApp; \ No newline at end of file diff --git a/src/assets/hero.png b/src/assets/hero.png new file mode 100644 index 0000000..cc51a3d Binary files /dev/null and b/src/assets/hero.png differ diff --git a/src/assets/react.svg b/src/assets/react.svg new file mode 100644 index 0000000..6c87de9 --- /dev/null +++ b/src/assets/react.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/vite.svg b/src/assets/vite.svg new file mode 100644 index 0000000..5101b67 --- /dev/null +++ b/src/assets/vite.svg @@ -0,0 +1 @@ + diff --git a/src/components/DekstopIcon.css b/src/components/DekstopIcon.css new file mode 100644 index 0000000..a355606 --- /dev/null +++ b/src/components/DekstopIcon.css @@ -0,0 +1,29 @@ +.desktop-icon { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 80px; + padding: 10px; + cursor: pointer; + border-radius: 8px; + transition: all 0.2s; + color: white; + text-shadow: 0 1px 2px rgba(0,0,0,0.5); +} + +.desktop-icon:hover { + background: rgba(255,255,255,0.2); + transform: scale(1.05); +} + +.icon-image { + font-size: 48px; + margin-bottom: 8px; +} + +.icon-name { + font-size: 12px; + text-align: center; + font-weight: 500; +} \ No newline at end of file diff --git a/src/components/DesktopIcon.tsx b/src/components/DesktopIcon.tsx new file mode 100644 index 0000000..0f6b098 --- /dev/null +++ b/src/components/DesktopIcon.tsx @@ -0,0 +1,54 @@ +import React from 'react'; + +interface DesktopIconProps { + icon: string; + name: string; + onClick: () => void; +} + +const DesktopIcon: React.FC = ({ icon, name, onClick }) => { + const styles = { + desktopIcon: { + display: 'flex' as const, + flexDirection: 'column' as const, + alignItems: 'center', + justifyContent: 'center', + width: '80px', + padding: '10px', + cursor: 'pointer', + borderRadius: '8px', + transition: 'all 0.2s', + color: 'white', + textShadow: '0 1px 2px rgba(0,0,0,0.5)', + }, + iconImage: { + fontSize: '48px', + marginBottom: '8px', + }, + iconName: { + fontSize: '12px', + textAlign: 'center' as const, + fontWeight: 500, + }, + }; + + return ( +

{ + e.currentTarget.style.background = 'rgba(255,255,255,0.2)'; + e.currentTarget.style.transform = 'scale(1.05)'; + }} + onMouseLeave={(e) => { + e.currentTarget.style.background = 'transparent'; + e.currentTarget.style.transform = 'scale(1)'; + }} + > +

{icon}

+ {name} +

+ ); +}; + +export default DesktopIcon; \ No newline at end of file diff --git a/src/components/Sidebar.css b/src/components/Sidebar.css new file mode 100644 index 0000000..15bb794 --- /dev/null +++ b/src/components/Sidebar.css @@ -0,0 +1,66 @@ +.sidebar-bottom { + position: fixed; + bottom: 0; + left: 0; + right: 0; + background: rgba(32, 32, 32, 0.95); + backdrop-filter: blur(10px); + display: flex; + gap: 4px; + padding: 8px 16px; + z-index: 1000; + border-top: 1px solid rgba(255,255,255,0.2); + overflow-x: auto; +} + +.sidebar-item { + display: flex; + align-items: center; + gap: 8px; + padding: 6px 12px; + background: rgba(255,255,255,0.1); + border-radius: 8px; + cursor: pointer; + transition: all 0.2s; + color: white; + font-size: 13px; + min-width: 120px; + justify-content: space-between; +} + +.sidebar-item:hover { + background: rgba(255,255,255,0.2); + transform: translateY(-2px); +} + +.sidebar-item.minimized { + background: rgba(255,255,255,0.05); + opacity: 0.7; +} + +.sidebar-icon { + font-size: 16px; +} + +.sidebar-title { + flex: 1; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.sidebar-close { + background: transparent; + border: none; + color: white; + cursor: pointer; + font-size: 14px; + padding: 2px 6px; + border-radius: 4px; + transition: all 0.2s; +} + +.sidebar-close:hover { + background: rgba(255,255,255,0.2); + color: #ff4444; +} \ No newline at end of file diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx new file mode 100644 index 0000000..addd8e1 --- /dev/null +++ b/src/components/Sidebar.tsx @@ -0,0 +1,125 @@ +import React from 'react'; + +interface WindowData { + id: string; + title: string; + content: string; + icon: string; + isMinimized: boolean; + url: string; +} + +interface SidebarProps { + windows: WindowData[]; + onRestore: (id: string) => void; + onClose: (id: string) => void; +} + +const Sidebar: React.FC = ({ windows, onRestore, onClose }) => { + const styles = { + sidebar: { + position: 'fixed' as const, + bottom: 0, + left: 0, + right: 0, + background: 'rgba(32, 32, 32, 0.95)', + backdropFilter: 'blur(10px)', + display: 'flex', + gap: '4px', + padding: '8px 16px', + zIndex: 1000, + borderTop: '1px solid rgba(255,255,255,0.2)', + overflowX: 'auto' as const, + }, + item: { + display: 'flex', + alignItems: 'center', + gap: '8px', + padding: '6px 12px', + background: 'rgba(255,255,255,0.1)', + borderRadius: '8px', + cursor: 'pointer', + transition: 'all 0.2s', + color: 'white', + fontSize: '13px', + minWidth: '120px', + justifyContent: 'space-between' as const, + }, + itemMinimized: { + background: 'rgba(255,255,255,0.05)', + opacity: 0.7, + }, + icon: { + fontSize: '16px', + }, + title: { + flex: 1, + whiteSpace: 'nowrap' as const, + overflow: 'hidden' as const, + textOverflow: 'ellipsis', + }, + closeBtn: { + background: 'transparent', + border: 'none', + color: 'white', + cursor: 'pointer', + fontSize: '14px', + padding: '2px 6px', + borderRadius: '4px', + transition: 'all 0.2s', + }, + }; + + if (windows.length === 0) return null; + + return ( +

+ {windows.map((window) => ( +

{ + if (window.isMinimized) { + onRestore(window.id); + } + }} + onMouseEnter={(e) => { + e.currentTarget.style.background = 'rgba(255,255,255,0.2)'; + e.currentTarget.style.transform = 'translateY(-2px)'; + }} + onMouseLeave={(e) => { + e.currentTarget.style.background = window.isMinimized + ? 'rgba(255,255,255,0.05)' + : 'rgba(255,255,255,0.1)'; + e.currentTarget.style.transform = 'translateY(0)'; + }} + > + {window.icon} + {window.title} + +

+ ))} +

+ ); +}; + +export default Sidebar; \ No newline at end of file diff --git a/src/components/WallpaperSelector.css b/src/components/WallpaperSelector.css new file mode 100644 index 0000000..53308d1 --- /dev/null +++ b/src/components/WallpaperSelector.css @@ -0,0 +1,117 @@ +.wallpaper-selector { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + display: flex; + justify-content: center; + align-items: center; + z-index: 9999; +} + +.selector-container { + background: rgba(255, 255, 255, 0.98); + border-radius: 20px; + padding: 50px; + text-align: center; + box-shadow: 0 30px 80px rgba(0,0,0,0.3); + max-width: 1200px; + width: 90%; +} + +.quest-badge { + display: inline-block; + background: linear-gradient(135deg, #667eea, #764ba2); + color: white; + padding: 5px 15px; + border-radius: 20px; + font-size: 14px; + margin-bottom: 20px; +} + +.windows-logo { + font-size: 60px; + margin-bottom: 20px; +} + +.selector-container h1 { + font-size: 32px; + color: #333; + margin-bottom: 10px; +} + +.subtitle { + color: #666; + font-size: 16px; + margin-bottom: 40px; +} + +.wallpaper-options { + display: flex; + gap: 30px; + justify-content: center; + margin-bottom: 50px; + flex-wrap: wrap; +} + +.wallpaper-option { + cursor: pointer; + text-align: center; + transition: all 0.3s ease; + border-radius: 12px; + overflow: hidden; + background: #f5f5f5; +} + +.wallpaper-option:hover { + transform: translateY(-10px); + box-shadow: 0 15px 40px rgba(0,0,0,0.2); +} + +.wallpaper-preview { + width: 280px; + height: 200px; + display: flex; + align-items: center; + justify-content: center; + font-size: 60px; +} + +.xp-preview { + background: linear-gradient(135deg, #3a8c3a 0%, #1e5c1e 100%); +} + +.win7-preview { + background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%); +} + +.win10-preview { + background: linear-gradient(135deg, #0078d7 0%, #005a9e 100%); +} + +.option-info { + padding: 15px; + background: white; +} + +.option-info h3 { + margin: 0 0 5px 0; + color: #333; + font-size: 18px; +} + +.option-info p { + margin: 0; + color: #666; + font-size: 14px; +} + +.selector-footer { + margin-top: 40px; + padding-top: 20px; + border-top: 1px solid #e0e0e0; + color: #999; + font-size: 14px; +} \ No newline at end of file diff --git a/src/components/WallpaperSelector.tsx b/src/components/WallpaperSelector.tsx new file mode 100644 index 0000000..632cffc --- /dev/null +++ b/src/components/WallpaperSelector.tsx @@ -0,0 +1,52 @@ +import React from 'react'; +import type { WallpaperType } from '../App'; +import './WallpaperSelector.css'; + +interface WallpaperSelectorProps { + onSelect: (type: WallpaperType) => void; +} + +const WallpaperSelector: React.FC = ({ onSelect }) => { + return ( +

День 1

🪟

Квест: Выбор темы

Попробуй разные версии Windows и почувствуй разницу!

+ +

onSelect('xp')}> +

🏔️

Windows XP

Классический стиль 2001 года

+ +

onSelect('win7')}> +

🐟

Windows 7

Современная классика 2009 года

+ +

onSelect('win10')}> +

🪟

Windows 10

Современный дизайн 2015 года

+ +

💡 Подсказка: Выберите любую тему, чтобы продолжить квест

+ ); +}; + +export default WallpaperSelector; diff --git a/src/components/Window.css b/src/components/Window.css new file mode 100644 index 0000000..0c2dce1 --- /dev/null +++ b/src/components/Window.css @@ -0,0 +1,91 @@ +.window { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 100%; + height: 100%; + min-width: 600px; + min-height: 400px; + background: rgb(255, 255, 255); + border-radius: 12px; + box-shadow: 0 20px 60px rgba(0,0,0,0.3); + display: flex; + flex-direction: column; + overflow: hidden; + animation: fadeIn 0.2s ease; + z-index: 100; +} + +@keyframes fadeIn { + from { + opacity: 0; + transform: translate(-50%, -50%) scale(0.95); + } + to { + opacity: 1; + transform: translate(-50%, -50%) scale(1); + } +} + +.window-header { + background: #1a0000; + padding: 12px 16px; + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid #ddd; + cursor: move; +} + +.window-title { + display: flex; + align-items: center; + gap: 8px; + font-weight: 600; + font-size: 14px; + color: #333; +} + +.window-icon { + font-size: 18px; +} + +.window-controls { + display: flex; + gap: 8px; +} + +.window-btn { + width: 28px; + height: 28px; + border: none; + background: transparent; + cursor: pointer; + border-radius: 4px; + font-size: 14px; + transition: all 0.2s; + display: flex; + align-items: center; + justify-content: center; +} + +.window-btn.minimize:hover { + background: #e0e0e0; +} + +.window-btn.close:hover { + background: #e81123; + color: white; +} + +.window-content { + flex: 1; + overflow: hidden; +} + +.window-iframe { + width: 100%; + height: 100%; + border: none; +} \ No newline at end of file diff --git a/src/components/Window.tsx b/src/components/Window.tsx new file mode 100644 index 0000000..27492c2 --- /dev/null +++ b/src/components/Window.tsx @@ -0,0 +1,49 @@ +import React from 'react'; +import './Window.css'; +import type { WindowType } from '../MainApp'; + +interface WindowProps { + window: WindowType; + onClose: (id: string) => void; + onMinimize: (id: string) => void; +} + +const Window: React.FC = ({ window, onClose, onMinimize }) => { + return ( +

+ {window.icon} + {window.title} +

+ + +

+ {window.content} + {/*

Ошибка

Vscode

Vscode

Квест: Выбор темы

Windows XP

Windows 7

Windows 10