Spaces:
Running
Running
// Определения приложений с их содержимым | |
const appDefinitions = { | |
'explorer': { | |
name: 'Проводник', | |
icon: 'explorer-icon.png', | |
width: 800, | |
height: 500, | |
getContent: () => ` | |
<div style="padding: 10px;"> | |
<h3>Проводник</h3> | |
<div style="display: flex; margin-top: 10px;"> | |
<div style="width: 200px; border-right: 1px solid #ddd; padding-right: 10px;"> | |
<div style="margin-bottom: 5px;">Desktop</div> | |
<div style="margin-bottom: 5px;">Documents</div> | |
<div style="margin-bottom: 5px;">Downloads</div> | |
<div style="margin-bottom: 5px;">Music</div> | |
<div style="margin-bottom: 5px;">Pictures</div> | |
<div style="margin-bottom: 5px;">Videos</div> | |
</div> | |
<div style="flex: 1; padding-left: 10px;"> | |
<div style="display: flex; flex-wrap: wrap;"> | |
<div style="text-align: center; margin: 10px; width: 80px;"> | |
<img src="src/images/folder-icon.png" style="width: 40px; height: 40px;"> | |
<div>Folder 1</div> | |
</div> | |
<div style="text-align: center; margin: 10px; width: 80px;"> | |
<img src="src/images/folder-icon.png" style="width: 40px; height: 40px;"> | |
<div>Folder 2</div> | |
</div> | |
<div style="text-align: center; margin: 10px; width: 80px;"> | |
<img src="src/images/text-file-icon.png" style="width: 40px; height: 40px;"> | |
<div>Document.txt</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
` | |
}, | |
'browser': { | |
name: 'Браузер', | |
icon: 'browser-icon.png', | |
width: 900, | |
height: 600, | |
getContent: () => ` | |
<iframe | |
src="https://www.saucedemo.com/" | |
referrerpolicy="no-referrer" | |
sandbox="allow-scripts allow-same-origin" | |
style="width: 100%; height: 100%; border: none;"></iframe> | |
` | |
}, | |
'calculator': { | |
name: 'Калькулятор', | |
icon: 'calculator-icon.png', | |
width: 300, | |
height: 400, | |
getContent: () => ` | |
<div style="display: flex; flex-direction: column; padding: 10px;"> | |
<input type="text" value="0" style="text-align: right; padding: 10px; margin-bottom: 10px; font-size: 20px;"> | |
<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px;"> | |
<button style="padding: 10px;">7</button> | |
<button style="padding: 10px;">8</button> | |
<button style="padding: 10px;">9</button> | |
<button style="padding: 10px;">/</button> | |
<button style="padding: 10px;">4</button> | |
<button style="padding: 10px;">5</button> | |
<button style="padding: 10px;">6</button> | |
<button style="padding: 10px;">*</button> | |
<button style="padding: 10px;">1</button> | |
<button style="padding: 10px;">2</button> | |
<button style="padding: 10px;">3</button> | |
<button style="padding: 10px;">-</button> | |
<button style="padding: 10px;">0</button> | |
<button style="padding: 10px;">.</button> | |
<button style="padding: 10px;">=</button> | |
<button style="padding: 10px;">+</button> | |
</div> | |
</div> | |
` | |
}, | |
'notepad': { | |
name: 'Заметки', | |
icon: 'notepad-icon.png', | |
width: 500, | |
height: 400, | |
getContent: () => ` | |
<div style="display: flex; flex-direction: column; height: 100%;"> | |
<div style="padding: 5px; border-bottom: 1px solid #ddd;"> | |
<span style="margin-right: 10px;">File</span> | |
<span style="margin-right: 10px;">Edit</span> | |
<span style="margin-right: 10px;">Format</span> | |
<span style="margin-right: 10px;">View</span> | |
<span style="margin-right: 10px;">Help</span> | |
</div> | |
<textarea style="flex: 1; padding: 10px; border: none; resize: none; font-family: 'Consolas', monospace;">Это текстовый редактор Windows...</textarea> | |
</div> | |
` | |
}, | |
'photos': { | |
name: 'Фотографии', | |
icon: 'photos-icon.png', | |
width: 700, | |
height: 500, | |
getContent: () => ` | |
<div style="display: flex; flex-direction: column; height: 100%;"> | |
<div style="padding: 5px; border-bottom: 1px solid #ddd;"> | |
<span style="margin-right: 10px;">File</span> | |
<span style="margin-right: 10px;">Edit</span> | |
<span style="margin-right: 10px;">View</span> | |
<span style="margin-right: 10px;">Help</span> | |
</div> | |
<div style="flex: 1; display: flex; align-items: center; justify-content: center; background-color: #f0f0f0;"> | |
<div style="text-align: center; color: #888;"> | |
<div style="font-size: 48px;">🖼️</div> | |
<div>Нет доступных изображений</div> | |
</div> | |
</div> | |
</div> | |
` | |
}, | |
'settings': { | |
name: 'Настройки', | |
icon: 'settings-icon.png', | |
width: 800, | |
height: 600, | |
getContent: () => ` | |
<div style="display: flex; height: 100%;"> | |
<div style="width: 200px; border-right: 1px solid #ddd; padding: 10px;"> | |
<div style="margin-bottom: 10px; font-weight: bold;">Система</div> | |
<div style="margin-bottom: 10px;">Дисплей</div> | |
<div style="margin-bottom: 10px;">Звук</div> | |
<div style="margin-bottom: 10px;">Уведомления</div> | |
<div style="margin-bottom: 10px; font-weight: bold;">Сеть и Интернет</div> | |
<div style="margin-bottom: 10px;">Wi-Fi</div> | |
<div style="margin-bottom: 10px;">Ethernet</div> | |
<div style="margin-bottom: 10px; font-weight: bold;">Персонализация</div> | |
<div style="margin-bottom: 10px;">Фон</div> | |
<div style="margin-bottom: 10px;">Цвета</div> | |
<div style="margin-bottom: 10px;">Темы</div> | |
</div> | |
<div style="flex: 1; padding: 20px;"> | |
<h2>Настройки Windows</h2> | |
<p>Выберите категорию слева, чтобы изменить настройки.</p> | |
</div> | |
</div> | |
` | |
}, | |
'computer': { | |
name: 'Этот компьютер', | |
icon: 'computer-icon.png', | |
width: 700, | |
height: 500, | |
getContent: () => ` | |
<div style="padding: 10px;"> | |
<h3>Этот компьютер</h3> | |
<div style="display: flex; flex-wrap: wrap; margin-top: 20px;"> | |
<div style="text-align: center; margin: 10px; width: 100px;"> | |
<img src="src/images/disk-c-icon.png" style="width: 40px; height: 40px;"> | |
<div>Локальный диск (C:)</div> | |
</div> | |
<div style="text-align: center; margin: 10px; width: 100px;"> | |
<img src="src/images/disk-d-icon.png" style="width: 40px; height: 40px;"> | |
<div>Локальный диск (D:)</div> | |
</div> | |
<div style="text-align: center; margin: 10px; width: 100px;"> | |
<img src="src/images/folder-icon.png" style="width: 40px; height: 40px;"> | |
<div>Desktop</div> | |
</div> | |
<div style="text-align: center; margin: 10px; width: 100px;"> | |
<img src="src/images/folder-icon.png" style="width: 40px; height: 40px;"> | |
<div>Documents</div> | |
</div> | |
<div style="text-align: center; margin: 10px; width: 100px;"> | |
<img src="src/images/folder-icon.png" style="width: 40px; height: 40px;"> | |
<div>Downloads</div> | |
</div> | |
</div> | |
</div> | |
` | |
}, | |
'recycle-bin': { | |
name: 'Корзина', | |
icon: 'recycle-bin-icon.png', | |
width: 600, | |
height: 400, | |
getContent: () => ` | |
<div style="padding: 10px;"> | |
<h3>Корзина</h3> | |
<div style="margin-top: 20px; text-align: center; color: #888;"> | |
<p>Корзина пуста</p> | |
</div> | |
</div> | |
` | |
} | |
}; | |
// Функция для получения информации о приложении по его ID | |
function getAppInfo(appId) { | |
return appDefinitions[appId] || null; | |
} | |
// Функция для запуска приложения | |
function launchApp(appId) { | |
const appInfo = getAppInfo(appId); | |
if (!appInfo) { | |
console.error(`Не найдено определение для приложения с ID: ${appId}`); | |
return; | |
} | |
console.log(`Запуск приложения: ${appInfo.name}`); | |
createWindow({ | |
title: appInfo.name, | |
icon: appInfo.icon, | |
content: appInfo.getContent(), | |
width: appInfo.width, | |
height: appInfo.height, | |
x: Math.random() * (window.innerWidth - appInfo.width - 200) + 100, | |
y: Math.random() * (window.innerHeight - appInfo.height - 200) + 100, | |
isActive: true, | |
appId: appId | |
}); | |
} |