Spaces:

igorvkarpov
/

win

Running

App Files Files Community

igorvkarpov commited on Mar 31, 2025

Commit

cdf0905

verified ·

1 Parent(s): 7bf94f0

Upload 24 files

Browse files

Files changed (25) hide show

.gitattributes +2 -0
index.html +69 -18
js/appManager.js +226 -0
js/desktop.js +42 -0
js/main.js +123 -0
js/startMenu.js +148 -0
js/taskbar.js +23 -0
js/windows.js +704 -0
src/images/browser-icon.png +0 -0
src/images/calculator-icon.png +0 -0
src/images/computer-icon.png +0 -0
src/images/default-app-icon.png +0 -0
src/images/disk-c-icon.png +0 -0
src/images/disk-d-icon.png +0 -0
src/images/explorer-icon.png +0 -0
src/images/folder-icon.png +0 -0
src/images/notepad-icon.png +0 -0
src/images/photos-icon.png +0 -0
src/images/recycle-bin-icon.png +0 -0
src/images/settings-icon.png +0 -0
src/images/text-file-icon.png +0 -0
src/images/user-icon.png +13 -0
src/images/windows-icon.png +3 -0
src/images/windows10-bg.jpg +3 -0
styles/main.css +336 -0

.gitattributes CHANGED Viewed

@@ -33,3 +33,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text

 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+src/images/windows-icon.png filter=lfs diff=lfs merge=lfs -text
+src/images/windows10-bg.jpg filter=lfs diff=lfs merge=lfs -text

index.html CHANGED Viewed

@@ -1,19 +1,70 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Windows 10 Simulator</title>
+  <link rel="stylesheet" href="/styles/main.css">
+</head>
+<body>
+  <div id="windows-container"></div>
+  <!-- Меню "Пуск" -->
+  <div id="start-menu">
+    <div id="start-menu-header">
+      <img src="src/images/user-icon.png" alt="Пользователь">
+      <span>Пользователь</span>
+    </div>
+    <div id="start-menu-apps">
+      <!--div class="start-menu-app" data-app-id="explorer">
+        <img src="src/images/explorer-icon.png" alt="Проводник">
+        <span>Проводник</span>
+      </div>
+      <div class="start-menu-app" data-app-id="browser">
+        <img src="src/images/browser-icon.png" alt="Браузер">
+        <span>Браузер</span>
+      </div>
+      <div class="start-menu-app" data-app-id="calculator">
+        <img src="src/images/calculator-icon.png" alt="Калькулятор">
+        <span>Калькулятор</span>
+      </div>
+      <div class="start-menu-app" data-app-id="notepad">
+        <img src="src/images/notepad-icon.png" alt="Заметки">
+        <span>Заметки</span>
+      </div>
+      <div class="start-menu-app" data-app-id="photos">
+        <img src="src/images/photos-icon.png" alt="Фотографии">
+        <span>Фотографии</span>
+      </div>
+      <div class="start-menu-app" data-app-id="settings">
+        <img src="src/images/settings-icon.png" alt="Настройки">
+        <span>Настройки</span>
+      </div-->
+    </div>
+  </div>
+  <!-- Панель задач -->
+  <div id="taskbar">
+    <div id="start-button">
+      <img src="src/images/windows-icon.png" alt="Пуск">
+    </div>
+    <div id="taskbar-programs"></div>
+  </div>
+  <script src="/js/appManager.js"></script>
+  <script src="/js/windows.js"></script>
+  <script src="/js/taskbar.js"></script>
+  <script src="/js/desktop.js"></script>
+  <script src="/js/startMenu.js"></script>
+  <script src="/js/main.js"></script>
+</body>
 </html>

js/appManager.js ADDED Viewed

	@@ -0,0 +1,226 @@

+// Определения приложений с их содержимым
+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
+        });
+}

js/desktop.js ADDED Viewed

	@@ -0,0 +1,42 @@

+// Функция для инициализации рабочего стола
+function initializeDesktop(container) {
+    // Список иконок на рабочем столе
+    const desktopIcons = [
+        { name: 'Этот компьютер', icon: 'computer-icon.png', appId: 'computer' },
+        { name: 'Корзина', icon: 'recycle-bin-icon.png', appId: 'recycle-bin' },
+        { name: 'Проводник', icon: 'explorer-icon.png', appId: 'explorer' },
+        { name: 'Браузер', icon: 'browser-icon.png', appId: 'browser' }
+    ];
+    console.log('Инициализация рабочего стола');
+    // Создаем иконки на рабочем столе
+    desktopIcons.forEach((icon, index) => {
+        const desktopIcon = document.createElement('div');
+        desktopIcon.className = 'desktop-icon';
+        desktopIcon.dataset.appId = icon.appId;
+        const iconImg = document.createElement('img');
+        iconImg.src = `src/images/${icon.icon}`;
+        iconImg.alt = icon.name;
+        const iconName = document.createElement('div');
+        iconName.textContent = icon.name;
+        desktopIcon.appendChild(iconImg);
+        desktopIcon.appendChild(iconName);
+        // Позиционируем иконку на рабочем столе
+        desktopIcon.style.position = 'absolute';
+        desktopIcon.style.left = '20px';
+        desktopIcon.style.top = `${20 + index * 100}px`;
+        container.appendChild(desktopIcon);
+        // Добавляем обработчик события для запуска приложения при клике на иконку
+        desktopIcon.addEventListener('click', (e) => {
+            console.log(`Клик по иконке: ${icon.name}`);
+            launchApp(icon.appId);
+        });
+    });
+}

js/main.js ADDED Viewed

	@@ -0,0 +1,123 @@

+console.log('Загрузка main.js');
+// Инициализация основных компонентов Windows 10
+document.addEventListener('DOMContentLoaded', () => {
+  console.log('DOM полностью загружен');
+  // Создаем основной контейнер для Windows 10
+  const windowsContainer = document.getElementById('windows-container');
+  console.log('Контейнер окон:', windowsContainer);
+  // Инициализируем компоненты
+  initializeDesktop(windowsContainer);
+  // Важно: инициализируем startMenu до taskbar,
+  // чтобы избежать конфликтов при инициализации
+  initializeStartMenu();
+  initializeTaskbar();
+  initializeWindows();
+  console.log('Windows 10 simulator started');
+  // Добавляем тестовую функцию для проверки работы окон
+  window.testCreateWindow = () => {
+    console.log('Тестовое создание окна');
+    createWindow({
+      title: 'Тестовое окно',
+      icon: 'default-app-icon.png',
+      content: '<div style="padding: 20px;">Это тестовое окно для проверки работы системы</div>',
+      width: 500,
+      height: 300,
+      x: 100,
+      y: 100,
+      isActive: true
+    });
+  };
+  // Добавим подсветку для кнопки "Пуск"
+  const startButtonElement = document.getElementById('start-button');
+  if (startButtonElement) {
+    console.log('Кнопка "Пуск" найдена в DOM:', startButtonElement);
+    /*
+    startButtonElement.style.animation = 'pulse 1.5s infinite';
+    // Добавляем стиль для анимации
+    const style = document.createElement('style');
+    style.textContent = `
+      @keyframes pulse {
+        0% { box-shadow: 0 0 0 0 rgba(0, 120, 215, 0.7); }
+        70% { box-shadow: 0 0 0 10px rgba(0, 120, 215, 0); }
+        100% { box-shadow: 0 0 0 0 rgba(0, 120, 215, 0); }
+      }
+    `;
+    document.head.appendChild(style);
+     */
+  }
+  // Создаем тестовое окно при загрузке для проверки
+  /*
+  setTimeout(() => {
+    createWindow({
+      title: 'Подсказка',
+      icon: 'default-app-icon.png',
+      content: '<div style="padding: 20px; text-align: center;"><h3>Добро пожаловать в Windows 10 Simulator!</h3><p>Нажмите на кнопку <strong>Пуск</strong> в левом нижнем углу, чтобы открыть меню "Пуск".</p><p>Вы также можете кликнуть по иконкам на рабочем столе, чтобы открыть программы.</p></div>',
+      width: 400,
+      height: 200,
+      x: 200,
+      y: 150,
+      isActive: true
+    });
+  }, 1000);
+  */
+  // Добавляем прямой обработчик кнопки "Пуск", заменяя все предыдущие
+  setTimeout(() => {
+    console.log('Настройка обработчика кнопки "Пуск"');
+    const startButton = document.getElementById('start-button');
+    const startMenu = document.getElementById('start-menu');
+    if (startButton && startMenu) {
+      // Удаляем предыдущие обработчики с кнопки "Пуск"
+      startButton.addEventListener('click', (event) => {
+        event.stopPropagation();
+        console.log('Клик по кнопке "Пуск" в main.js');
+        // Переключаем класс active для меню
+        const isActive = startMenu.classList.contains('active');
+        if (isActive) {
+          console.log('Скрываем меню "Пуск"');
+          startMenu.classList.remove('active');
+          startButton.classList.remove('active');
+        } else {
+          console.log('Показываем меню "Пуск"');
+          startMenu.classList.add('active');
+          startButton.classList.add('active');
+          // Проверка видимости меню после добавления класса active
+          setTimeout(() => {
+            const computedStyle = window.getComputedStyle(startMenu);
+            console.log(`Проверка стилей меню: opacity=${computedStyle.opacity}, transform=${computedStyle.transform}`);
+          }, 50);
+        }
+      });
+      // Добавляем обработчик для закрытия меню при клике вне его
+      document.addEventListener('click', (event) => {
+        // Проверяем, открыто ли меню и кликнули ли мы вне его
+        if (startMenu.classList.contains('active') &&
+            !startMenu.contains(event.target) &&
+            !startButton.contains(event.target)) {
+          console.log('Клик вне меню "Пуск", закрываем');
+          startMenu.classList.remove('active');
+          startButton.classList.remove('active');
+        }
+      });
+      console.log('Обработчик события для кнопки "Пуск" установлен');
+    } else {
+      console.error('Не найдена кнопка "Пуск" или меню "Пуск"');
+    }
+  }, 500);
+});

js/startMenu.js ADDED Viewed

	@@ -0,0 +1,148 @@

+// Переменные для управления меню "Пуск"
+let isStartMenuVisible = false;
+let startMenu = null;
+// Функция для создания меню "Пуск"
+function initializeStartMenu() {
+    console.log('Инициализация меню "Пуск"');
+    // Проверяем, существует ли уже меню "Пуск"
+    if (document.getElementById('start-menu')) {
+        console.log('Меню "Пуск" уже существует');
+        startMenu = document.getElementById('start-menu');
+        // Добавляем обработчики событий для приложений в меню "Пуск"
+        const appElements = startMenu.querySelectorAll('.start-menu-app');
+        appElements.forEach(appElement => {
+            const appId = appElement.dataset.appId;
+            appElement.addEventListener('click', () => {
+                console.log(`Клик по приложению в меню Пуск: ${appId}`);
+                launchApp(appId);
+                toggleStartMenu(); // Закрываем меню "Пуск" после запуска приложения
+            });
+        });
+        return;
+    }
+    // Создаем меню "Пуск"
+    startMenu = document.createElement('div');
+    startMenu.id = 'start-menu';
+    // Создаем заголовок меню "Пуск"
+    const startMenuHeader = document.createElement('div');
+    startMenuHeader.id = 'start-menu-header';
+    const userIcon = document.createElement('img');
+    userIcon.src = 'src/images/user-icon.png';
+    userIcon.alt = 'Пользователь';
+    const userName = document.createElement('span');
+    userName.textContent = 'Пользователь';
+    startMenuHeader.appendChild(userIcon);
+    startMenuHeader.appendChild(userName);
+    startMenu.appendChild(startMenuHeader);
+    // Создаем контейнер для приложений в меню "Пуск"
+    const startMenuApps = document.createElement('div');
+    startMenuApps.id = 'start-menu-apps';
+    startMenu.appendChild(startMenuApps);
+    // Добавляем приложения в меню "Пуск"
+    const apps = [
+        { name: 'Браузер', icon: 'browser-icon.png', appId: 'browser' },
+        /*{ name: 'Проводник', icon: 'explorer-icon.png', appId: 'explorer' },
+        { name: 'Калькулятор', icon: 'calculator-icon.png', appId: 'calculator' },
+        { name: 'Заметки', icon: 'notepad-icon.png', appId: 'notepad' },
+        { name: 'Фотографии', icon: 'photos-icon.png', appId: 'photos' },*/
+        { name: 'Настройки', icon: 'settings-icon.png', appId: 'settings' }
+    ];
+    apps.forEach(app => {
+        const appElement = document.createElement('div');
+        appElement.className = 'start-menu-app';
+        appElement.dataset.appId = app.appId;
+        const appIcon = document.createElement('img');
+        appIcon.src = `src/images/${app.icon}`;
+        appIcon.alt = app.name;
+        const appName = document.createElement('span');
+        appName.textContent = app.name;
+        appElement.appendChild(appIcon);
+        appElement.appendChild(appName);
+        startMenuApps.appendChild(appElement);
+        // Добавляем обработчик клика
+        appElement.addEventListener('click', () => {
+            console.log(`Клик по приложению в меню Пуск: ${app.name}`);
+            launchApp(app.appId);
+            toggleStartMenu(); // Закрываем меню "Пуск" после запуска приложения
+        });
+    });
+    // Добавляем меню "Пуск" в DOM - сразу после body, чтобы избежать проблем с z-index
+    document.body.insertBefore(startMenu, document.body.firstChild);
+    console.log('Меню "Пуск" добавлено в DOM');
+    // Добавляем обработчик события для закрытия меню "Пуск" при клике вне его
+    document.addEventListener('mousedown', (e) => {
+        if (
+            isStartMenuVisible &&
+            startMenu &&
+            !startMenu.contains(e.target) &&
+            e.target.id !== 'start-button' &&
+            !e.target.closest('#start-button')
+        ) {
+            console.log('Клик вне меню "Пуск", закрываем меню');
+            toggleStartMenu();
+        }
+    });
+    // Принудительно обновляем меню "Пуск" для стилей
+    setTimeout(() => {
+        if (startMenu) {
+            startMenu.style.display = 'flex';
+            console.log('Стили меню "Пуск" обновлены');
+        }
+    }, 100);
+}
+// Функция для показа/скрытия меню "Пуск"
+function toggleStartMenu() {
+    console.log('Вызов функции toggleStartMenu');
+    // Получаем меню и кнопку по необходимости
+    const startMenu = document.getElementById('start-menu');
+    const startButton = document.getElementById('start-button');
+    if (!startMenu) {
+        console.error('Меню "Пуск" не найдено в DOM');
+        return;
+    }
+    // Определяем текущее состояние
+    const isActive = startMenu.classList.contains('active');
+    console.log(`Переключение меню "Пуск": ${isActive ? 'скрыть' : 'показать'}`);
+    // Переключаем классы
+    if (isActive) {
+        startMenu.classList.remove('active');
+        if (startButton) startButton.classList.remove('active');
+        console.log('Меню "Пуск" скрыто');
+    } else {
+        startMenu.classList.add('active');
+        if (startButton) startButton.classList.add('active');
+        console.log('Меню "Пуск" активировано');
+        // Проверка видимости
+        setTimeout(() => {
+            const computedStyle = window.getComputedStyle(startMenu);
+            console.log(`Меню "Пуск" видимость: opacity=${computedStyle.opacity}, transform=${computedStyle.transform}`);
+        }, 50);
+    }
+}

js/taskbar.js ADDED Viewed

	@@ -0,0 +1,23 @@

+// Инициализация панели задач
+function initializeTaskbar() {
+  console.log('Инициализация панели задач');
+  // Получаем существующую панель задач
+  const taskbar = document.getElementById('taskbar');
+  if (!taskbar) {
+    console.error('Панель задач не найдена в DOM');
+    return;
+  }
+  // Получаем кнопку "Пуск"
+  const startButton = document.getElementById('start-button');
+  if (!startButton) {
+    console.error('Кнопка "Пуск" не найдена в DOM');
+    return;
+  }
+  console.log('Панель задач найдена в DOM');
+  // Не добавляем обработчик событий здесь, так как он будет добавлен в main.js
+  console.log('Обработчик события для кнопки "Пуск" будет добавлен в main.js');
+}

js/windows.js ADDED Viewed

	@@ -0,0 +1,704 @@

+// Глобальный массив для хранения всех окон
+let windows = [];
+let activeWindowId = null;
+let zIndex = 100;
+// Глобальное хранилище открытых приложений (appId -> windowId)
+const openApps = {};
+// Функция для создания нового окна
+function createWindow(options = {}) {
+    console.log('Создание окна с параметрами:', options);
+    const {
+        title = 'Новое окно',
+        icon = 'default-app-icon.png',
+        content = '',
+        width = 600,
+        height = 400,
+        x = 100,
+        y = 100,
+        isActive = true,
+        appId
+    } = options;
+    // Проверяем, существует ли уже открытое окно с таким appId
+    if (appId && openApps[appId]) {
+        const existingWindowId = openApps[appId];
+        const existingWindow = windows.find(w => w.id === existingWindowId);
+        // Если окно существует, активируем его и возвращаем
+        if (existingWindow) {
+            console.log(`Приложение ${appId} уже открыто, активируем существующее окно:`, existingWindowId);
+            // Если окно свёрнуто, восстанавливаем его
+            if (existingWindow.isMinimized) {
+                restoreWindow(existingWindowId);
+            }
+            // Активируем окно
+            activateWindow(existingWindowId);
+            return existingWindow;
+        }
+    }
+    // Создаем уникальный ID для окна
+    const windowId = `window-${Date.now()}-${Math.floor(Math.random() * 1000)}`;
+    // Создаем DOM элемент окна
+    const windowElement = document.createElement('div');
+    windowElement.className = `window ${isActive ? 'active' : ''}`;
+    windowElement.id = windowId;
+    windowElement.dataset.appId = appId || '';
+    windowElement.style.width = `${width}px`;
+    windowElement.style.height = `${height}px`;
+    windowElement.style.left = `${x}px`;
+    windowElement.style.top = `${y}px`;
+    windowElement.style.zIndex = isActive ? ++zIndex : zIndex;
+    // Создаем заголовок окна
+    const windowHeader = document.createElement('div');
+    windowHeader.className = 'window-header';
+    const windowTitle = document.createElement('div');
+    windowTitle.className = 'window-title';
+    const iconImg = document.createElement('img');
+    iconImg.src = `src/images/${icon}`;
+    iconImg.alt = title;
+    const titleText = document.createElement('span');
+    titleText.textContent = title;
+    windowTitle.appendChild(iconImg);
+    windowTitle.appendChild(titleText);
+    // Создаем кнопки управления окном
+    const windowControls = document.createElement('div');
+    windowControls.className = 'window-controls';
+    const minimizeButton = document.createElement('div');
+    minimizeButton.className = 'window-control minimize';
+    minimizeButton.innerHTML = '&#8211;';
+    minimizeButton.title = 'Свернуть';
+    const maximizeButton = document.createElement('div');
+    maximizeButton.className = 'window-control maximize';
+    maximizeButton.innerHTML = '&#9744;';
+    maximizeButton.title = 'Развернуть';
+    const closeButton = document.createElement('div');
+    closeButton.className = 'window-control close';
+    closeButton.innerHTML = '&#10005;';
+    closeButton.title = 'Закрыть';
+    windowControls.appendChild(minimizeButton);
+    windowControls.appendChild(maximizeButton);
+    windowControls.appendChild(closeButton);
+    windowHeader.appendChild(windowTitle);
+    windowHeader.appendChild(windowControls);
+    // Создаем содержимое окна
+    const windowContent = document.createElement('div');
+    windowContent.className = 'window-content';
+    windowContent.innerHTML = content;
+    // Собираем окно вместе
+    windowElement.appendChild(windowHeader);
+    windowElement.appendChild(windowContent);
+    // Добавляем окно в DOM
+    const container = document.getElementById('windows-container');
+    console.log('Контейнер для окон:', container);
+    if (container) {
+        container.appendChild(windowElement);
+        console.log('Окно добавлено в DOM');
+    } else {
+        console.error('Не найден контейнер для окон с id="windows-container"');
+        return null;
+    }
+    // Добавляем окно в массив окон
+    const windowObject = {
+        id: windowId,
+        element: windowElement,
+        appId: appId || '',
+        title,
+        icon,
+        isMinimized: false,
+        isMaximized: false,
+        // Сохраняем оригинальные размеры и позицию для восстановления из полноэкранного режима
+        originalSize: {
+            width,
+            height,
+            x,
+            y
+        }
+    };
+    windows.push(windowObject);
+    console.log('Окно добавлено в массив, всего окон:', windows.length);
+    // Если окно активное, делаем его активным
+    if (isActive) {
+        activateWindow(windowId);
+    }
+    // Сохраняем ID окна для приложения, чтобы избежать дублирования
+    if (appId) {
+        openApps[appId] = windowId;
+        console.log(`Приложение ${appId} зарегистрировано с окном ${windowId}`);
+    }
+    // Добавляем кнопку в панель задач
+    addWindowToTaskbar(windowObject);
+    // Добавляем обработчики событий
+    setupWindowEvents(windowObject);
+    return windowObject;
+}
+// Функция для активации окна
+function activateWindow(windowId) {
+    console.log('Активация окна:', windowId);
+    // Если активно другое окно, делаем его неактивным
+    if (activeWindowId && activeWindowId !== windowId) {
+        const activeWindow = document.getElementById(activeWindowId);
+        if (activeWindow) {
+            activeWindow.classList.remove('active');
+        }
+        // Обновляем стили в панели задач
+        const taskbarItem = document.querySelector(`.taskbar-program[data-window-id="${activeWindowId}"]`);
+        if (taskbarItem) {
+            taskbarItem.classList.remove('active');
+        }
+    }
+    // Активируем новое окно
+    const windowToActivate = document.getElementById(windowId);
+    if (windowToActivate) {
+        windowToActivate.classList.add('active');
+        windowToActivate.style.zIndex = ++zIndex;
+        activeWindowId = windowId;
+        // Обновляем стили в панели задач
+        const taskbarItem = document.querySelector(`.taskbar-program[data-window-id="${windowId}"]`);
+        if (taskbarItem) {
+            taskbarItem.classList.add('active');
+        }
+    } else {
+        console.error('Не найдено окно для активации с id', windowId);
+    }
+}
+// Функция для добавления окна в панель задач
+function addWindowToTaskbar(windowObject) {
+    const taskbarPrograms = document.getElementById('taskbar-programs');
+    if (!taskbarPrograms) {
+        console.error('Не найден контейнер для программ в панели задач');
+        return;
+    }
+    // Проверяем, существует ли уже программа в панели задач
+    const existingTaskbarItem = document.querySelector(`.taskbar-program[data-app-id="${windowObject.appId}"]`);
+    if (existingTaskbarItem && windowObject.appId) {
+        // Если программа уже есть, добавляем к ней ссылку на новое окно
+        existingTaskbarItem.dataset.windowId = windowObject.id;
+        existingTaskbarItem.classList.add('active');
+    } else {
+        // Если программы нет, создаем новую иконку в панели задач
+        const taskbarItem = document.createElement('div');
+        taskbarItem.className = 'taskbar-program active';
+        taskbarItem.dataset.windowId = windowObject.id;
+        taskbarItem.dataset.appId = windowObject.appId || '';
+        const iconImg = document.createElement('img');
+        iconImg.src = `src/images/${windowObject.icon}`;
+        iconImg.alt = windowObject.title;
+        taskbarItem.appendChild(iconImg);
+        taskbarPrograms.appendChild(taskbarItem);
+        // Добавляем обработчик события для кнопки в панели задач
+        taskbarItem.addEventListener('click', () => {
+            console.log('Клик по кнопке в панели задач:', windowObject.id);
+            // Найдем окно по ID
+            const window = windows.find(w => w.id === windowObject.id);
+            if (!window) {
+                console.error('Не найдено окно с ID:', windowObject.id);
+                return;
+            }
+            console.log('Состояние окна:', window.isMinimized ? 'свернуто' : 'открыто', 'активно:', activeWindowId === window.id);
+            // Проверяем, свернуто ли окно
+            if (window.isMinimized) {
+                console.log('Восстанавливаем свернутое окно:', window.id);
+                restoreWindow(window.id);
+            }
+            // Если окно активно, сворачиваем его
+            else if (activeWindowId === window.id) {
+                console.log('Сворачиваем активное окно:', window.id);
+                minimizeWindow(window.id);
+            }
+            // Если окно не активно, делаем его активным
+            else {
+                console.log('Активируем неактивное окно:', window.id);
+                activateWindow(window.id);
+            }
+        });
+    }
+}
+// Функция для сворачивания окна
+function minimizeWindow(windowId) {
+    const windowObj = windows.find(w => w.id === windowId);
+    if (windowObj) {
+        windowObj.isMinimized = true;
+        windowObj.element.classList.add('minimized');
+        // Если это активное окно, сбрасываем активное окно
+        if (activeWindowId === windowId) {
+            activeWindowId = null;
+        }
+        // Обновляем стили в панели задач
+        const taskbarItem = document.querySelector(`.taskbar-program[data-window-id="${windowId}"]`);
+        if (taskbarItem) {
+            taskbarItem.classList.remove('active');
+        }
+    }
+}
+// Функция для восстановления окна
+function restoreWindow(windowId) {
+    const windowObj = windows.find(w => w.id === windowId);
+    if (windowObj) {
+        windowObj.isMinimized = false;
+        windowObj.element.classList.remove('minimized');
+        activateWindow(windowId);
+    }
+}
+// Функция для разворачивания окна на весь экран
+function maximizeWindow(windowId) {
+    const windowObj = windows.find(w => w.id === windowId);
+    if (!windowObj) return;
+    const container = document.getElementById('windows-container');
+    if (!container) return;
+    const windowElement = windowObj.element;
+    // Если окно уже развернуто, восстанавливаем его оригинальный размер
+    if (windowObj.isMaximized) {
+        console.log('Восстановление окна из полноэкранного режима:', windowId);
+        // Восстанавливаем оригинальные размеры и позицию
+        windowElement.style.width = `${windowObj.originalSize.width}px`;
+        windowElement.style.height = `${windowObj.originalSize.height}px`;
+        windowElement.style.left = `${windowObj.originalSize.x}px`;
+        windowElement.style.top = `${windowObj.originalSize.y}px`;
+        // Обновляем иконку кнопки разворачивания
+        const maximizeButton = windowElement.querySelector('.window-control.maximize');
+        if (maximizeButton) {
+            maximizeButton.innerHTML = '&#9744;'; // Иконка "развернуть"
+            maximizeButton.title = 'Развернуть';
+        }
+        windowObj.isMaximized = false;
+        windowElement.classList.remove('maximized');
+    }
+    // Иначе разворачиваем окно на весь экран
+    else {
+        console.log('Разворачивание окна на весь экран:', windowId);
+        // Сохраняем текущие размеры и позицию перед разворачиванием
+        // (только если они еще не сохранены)
+        if (!windowObj.originalSize) {
+            windowObj.originalSize = {
+                width: parseInt(windowElement.style.width),
+                height: parseInt(windowElement.style.height),
+                x: parseInt(windowElement.style.left),
+                y: parseInt(windowElement.style.top)
+            };
+        }
+        // Получаем размеры контейнера (рабочего стола)
+        const containerRect = container.getBoundingClientRect();
+        // Устанавливаем размеры окна равными размерам контейнера
+        windowElement.style.width = `${containerRect.width}px`;
+        windowElement.style.height = `${containerRect.height}px`;
+        windowElement.style.left = '0px';
+        windowElement.style.top = '0px';
+        // Обновляем иконку кнопки разворачивания
+        const maximizeButton = windowElement.querySelector('.window-control.maximize');
+        if (maximizeButton) {
+            maximizeButton.innerHTML = '&#9744;&#9744;'; // Иконка "восстановить"
+            maximizeButton.title = 'Восстановить';
+        }
+        windowObj.isMaximized = true;
+        windowElement.classList.add('maximized');
+    }
+    // Активируем окно
+    activateWindow(windowId);
+}
+// Функция для закрытия окна
+function closeWindow(windowId) {
+    const windowIndex = windows.findIndex(w => w.id === windowId);
+    if (windowIndex !== -1) {
+        const windowObj = windows[windowIndex];
+        // Удаляем окно из DOM
+        if (windowObj.element) {
+            windowObj.element.remove();
+        }
+        // Если это было активное окно, сбрасываем активное окно
+        if (activeWindowId === windowId) {
+            activeWindowId = null;
+        }
+        // Удаляем регистрацию открытого приложения
+        if (windowObj.appId && openApps[windowObj.appId] === windowId) {
+            delete openApps[windowObj.appId];
+            console.log(`Удалена регистрация приложения ${windowObj.appId}`);
+        }
+        // Удаляем из массива окон
+        windows.splice(windowIndex, 1);
+        // Проверяем, есть ли еще окна с таким же appId
+        const sameAppWindows = windows.filter(w => w.appId === windowObj.appId && w.appId !== '');
+        // Если других окон с таким же appId нет, удаляем кнопку из панели задач
+        if (sameAppWindows.length === 0) {
+            const taskbarItem = document.querySelector(`.taskbar-program[data-app-id="${windowObj.appId}"]`);
+            if (taskbarItem) {
+                taskbarItem.remove();
+            }
+        } else {
+            // Иначе обновляем ссылку на последнее окно этого приложения
+            const lastWindow = sameAppWindows[sameAppWindows.length - 1];
+            const taskbarItem = document.querySelector(`.taskbar-program[data-app-id="${windowObj.appId}"]`);
+            if (taskbarItem) {
+                taskbarItem.dataset.windowId = lastWindow.id;
+            }
+        }
+    }
+}
+// Функция для настройки событий окна
+function setupWindowEvents(windowObj) {
+    const windowElement = windowObj.element;
+    const header = windowElement.querySelector('.window-header');
+    const minimizeButton = windowElement.querySelector('.window-control.minimize');
+    const maximizeButton = windowElement.querySelector('.window-control.maximize');
+    const closeButton = windowElement.querySelector('.window-control.close');
+    // Добавляем возможность перетаскивания окна
+    let isDragging = false;
+    let offsetX, offsetY;
+    // Функция для обработки начала перетаскивания (как для мыши, так и для сенсорного ввода)
+    const handleStartDrag = (clientX, clientY, target) => {
+        // Если окно развернуто на весь экран, не даем его перетаскивать
+        if (windowObj.isMaximized) return;
+        if (target === header || target.closest('.window-title')) {
+            isDragging = true;
+            offsetX = clientX - windowElement.getBoundingClientRect().left;
+            offsetY = clientY - windowElement.getBoundingClientRect().top;
+            // Активируем окно при начале перетаскивания
+            activateWindow(windowObj.id);
+        }
+    };
+    // Функция для обработки перемещения (как для мыши, так и для сенсорного ввода)
+    const handleDrag = (clientX, clientY) => {
+        if (!isDragging) return;
+        // Получаем размеры контейнера рабочего стола
+        const container = document.getElementById('windows-container');
+        const containerRect = container.getBoundingClientRect();
+        // Получаем размеры окна
+        const windowRect = windowElement.getBoundingClientRect();
+        const windowWidth = windowRect.width;
+        const windowHeight = windowRect.height;
+        // Вычисляем новые координаты с учетом ограничений
+        let newX = clientX - offsetX;
+        let newY = clientY - offsetY;
+        // Ограничиваем перемещение окна, чтобы оно не выходило за пределы рабочего стола
+        // Задаем минимальное значение заголовка, которое должно быть видимым (чтобы можно было перетащить окно обратно)
+        const minVisibleHeader = 30; // минимальная видимая часть заголовка окна
+        // Ограничение по X (горизонтали)
+        if (newX < -windowWidth + minVisibleHeader) {
+            newX = -windowWidth + minVisibleHeader;
+        } else if (newX > containerRect.width - minVisibleHeader) {
+            newX = containerRect.width - minVisibleHeader;
+        }
+        // Ограничение по Y (вертикали)
+        if (newY < 0) {
+            newY = 0;
+        } else if (newY > containerRect.height - minVisibleHeader) {
+            newY = containerRect.height - minVisibleHeader;
+        }
+        // Применяем новые координаты
+        windowElement.style.left = `${newX}px`;
+        windowElement.style.top = `${newY}px`;
+    };
+    // Функция для обработки окончания перетаскивания
+    const handleEndDrag = () => {
+        isDragging = false;
+    };
+    // Обработчики событий мыши
+    header.addEventListener('mousedown', (e) => {
+        handleStartDrag(e.clientX, e.clientY, e.target);
+    });
+    document.addEventListener('mousemove', (e) => {
+        handleDrag(e.clientX, e.clientY);
+    });
+    document.addEventListener('mouseup', handleEndDrag);
+    // Обработчики сенсорных событий
+    header.addEventListener('touchstart', (e) => {
+        const touch = e.touches[0];
+        handleStartDrag(touch.clientX, touch.clientY, e.target);
+        e.preventDefault(); // Предотвращаем скролл страницы
+    });
+    document.addEventListener('touchmove', (e) => {
+        if (isDragging) {
+            const touch = e.touches[0];
+            handleDrag(touch.clientX, touch.clientY);
+            e.preventDefault(); // Предотвращаем скролл страницы
+        }
+    });
+    document.addEventListener('touchend', handleEndDrag);
+    document.addEventListener('touchcancel', handleEndDrag);
+    // Добавляем двойной клик на заголовок для разворачивания/восстановления
+    header.addEventListener('dblclick', () => {
+        maximizeWindow(windowObj.id);
+    });
+    // Также добавляем обработчик двойного тапа для мобильных устройств
+    let lastTap = 0;
+    header.addEventListener('touchend', (e) => {
+        const currentTime = new Date().getTime();
+        const tapLength = currentTime - lastTap;
+        if (tapLength < 300 && tapLength > 0) {
+            // Двойной тап - разворачиваем/восстанавливаем окно
+            maximizeWindow(windowObj.id);
+            e.preventDefault();
+        }
+        lastTap = currentTime;
+    });
+    // Активируем окно при клике на него
+    windowElement.addEventListener('mousedown', () => {
+        activateWindow(windowObj.id);
+    });
+    windowElement.addEventListener('touchstart', () => {
+        activateWindow(windowObj.id);
+    });
+    // Обработчики для кнопок управления окном
+    if (minimizeButton) {
+        minimizeButton.addEventListener('click', () => {
+            minimizeWindow(windowObj.id);
+        });
+        minimizeButton.addEventListener('touchend', (e) => {
+            minimizeWindow(windowObj.id);
+            e.preventDefault();
+        });
+    }
+    if (maximizeButton) {
+        maximizeButton.addEventListener('click', () => {
+            maximizeWindow(windowObj.id);
+        });
+        maximizeButton.addEventListener('touchend', (e) => {
+            maximizeWindow(windowObj.id);
+            e.preventDefault();
+        });
+    }
+    if (closeButton) {
+        closeButton.addEventListener('click', () => {
+            closeWindow(windowObj.id);
+        });
+        closeButton.addEventListener('touchend', (e) => {
+            closeWindow(windowObj.id);
+            e.preventDefault();
+        });
+    }
+    // Добавляем поддержку изменения размера окна на мобильных устройствах
+    // с помощью жеста "pinch" (щипка)
+    let initialDistance = 0;
+    let initialWidth = 0;
+    let initialHeight = 0;
+    windowElement.addEventListener('touchstart', (e) => {
+        if (e.touches.length === 2) {
+            // Два пальца - жест изменения размера
+            const touch1 = e.touches[0];
+            const touch2 = e.touches[1];
+            // Вычисляем расстояние между пальцами
+            initialDistance = Math.hypot(
+                touch2.clientX - touch1.clientX,
+                touch2.clientY - touch1.clientY
+            );
+            // Запоминаем начальные размеры окна
+            initialWidth = windowElement.offsetWidth;
+            initialHeight = windowElement.offsetHeight;
+            e.preventDefault();
+        }
+    });
+    windowElement.addEventListener('touchmove', (e) => {
+        if (e.touches.length === 2 && initialDistance > 0) {
+            // Два пальца - жест изменения размера
+            const touch1 = e.touches[0];
+            const touch2 = e.touches[1];
+            // Вычисляем новое расстояние между пальцами
+            const newDistance = Math.hypot(
+                touch2.clientX - touch1.clientX,
+                touch2.clientY - touch1.clientY
+            );
+            // Вычисляем коэффициент масштабирования
+            const scale = newDistance / initialDistance;
+            // Применяем новые размеры с ограничениями
+            const newWidth = Math.max(300, Math.min(initialWidth * scale, window.innerWidth));
+            const newHeight = Math.max(200, Math.min(initialHeight * scale, window.innerHeight - 50));
+            windowElement.style.width = `${newWidth}px`;
+            windowElement.style.height = `${newHeight}px`;
+            e.preventDefault();
+        }
+    });
+    windowElement.addEventListener('touchend', () => {
+        initialDistance = 0;
+    });
+}
+// Инициализация системы окон
+function initializeWindows() {
+    console.log('Инициализация системы окон');
+    // Обновляем обработчики для существующих кнопок в панели задач
+    setTimeout(() => {
+        updateTaskbarHandlers();
+    }, 500);
+    // Настраиваем глобальный обработчик клика для снятия активации со всех окон при клике на рабочий стол
+    const windowsContainer = document.getElementById('windows-container');
+    if (windowsContainer) {
+        windowsContainer.addEventListener('mousedown', (e) => {
+            if (e.target === document.getElementById('windows-container')) {
+                // Если клик был непосредственно на рабочем столе
+                if (activeWindowId) {
+                    const activeWindow = document.getElementById(activeWindowId);
+                    if (activeWindow) {
+                        activeWindow.classList.remove('active');
+                    }
+                    // Обновляем стили в панели задач
+                    const taskbarItem = document.querySelector(`.taskbar-program[data-window-id="${activeWindowId}"]`);
+                    if (taskbarItem) {
+                        taskbarItem.classList.remove('active');
+                    }
+                    activeWindowId = null;
+                }
+            }
+        });
+    } else {
+        console.error('Не найден контейнер для окон с id="windows-container"');
+    }
+}
+// Функция для обновления обработчиков событий для кнопок в панели задач
+function updateTaskbarHandlers() {
+    const taskbarItems = document.querySelectorAll('.taskbar-program');
+    console.log('Найдено кнопок в панели задач:', taskbarItems.length);
+    taskbarItems.forEach(item => {
+        const windowId = item.dataset.windowId;
+        if (!windowId) return;
+        console.log('Добавление обработчика для кнопки в панели задач:', windowId);
+        // Удаляем старые обработчики, чтобы избежать дублирования
+        const newItem = item.cloneNode(true);
+        if (item.parentNode) {
+            item.parentNode.replaceChild(newItem, item);
+        }
+        newItem.addEventListener('click', () => {
+            console.log('Клик по кнопке в панели задач:', windowId);
+            // Проверим, есть ли такое окно
+            const windowObj = windows.find(w => w.id === windowId);
+            if (!windowObj) {
+                console.error('Не найдено окно с ID:', windowId);
+                return;
+            }
+            console.log('Состояние окна:', windowObj.isMinimized ? 'свернуто' : 'открыто', 'активно:', activeWindowId === windowObj.id);
+            // Проверяем, свернуто ли окно
+            if (windowObj.isMinimized) {
+                console.log('Восстанавливаем свернутое окно:', windowObj.id);
+                restoreWindow(windowObj.id);
+            }
+            // Если окно активно, сворачиваем его
+            else if (activeWindowId === windowObj.id) {
+                console.log('Сворачиваем активное окно:', windowObj.id);
+                minimizeWindow(windowObj.id);
+            }
+            // Если окно не активно, делаем его активным
+            else {
+                console.log('Активируем неактивное окно:', windowObj.id);
+                activateWindow(windowObj.id);
+            }
+        });
+    });
+}

src/images/browser-icon.png ADDED Viewed

src/images/calculator-icon.png ADDED Viewed

src/images/computer-icon.png ADDED Viewed

src/images/default-app-icon.png ADDED Viewed

src/images/disk-c-icon.png ADDED Viewed

src/images/disk-d-icon.png ADDED Viewed

src/images/explorer-icon.png ADDED Viewed

src/images/folder-icon.png ADDED Viewed

src/images/notepad-icon.png ADDED Viewed

src/images/photos-icon.png ADDED Viewed

src/images/recycle-bin-icon.png ADDED Viewed

src/images/settings-icon.png ADDED Viewed

src/images/text-file-icon.png ADDED Viewed

src/images/user-icon.png ADDED Viewed

src/images/windows-icon.png ADDED Viewed

Git LFS Details

SHA256: 3e1cf9aa3f18afa49afc776fe8e6d573223bd264d3875ca95197edc2a76efb8f
Pointer size: 131 Bytes
Size of remote file: 211 kB

src/images/windows10-bg.jpg ADDED Viewed

Git LFS Details

SHA256: 46e96390f443294ff42bf6ca227c7976f5d7be97b003b743523bb8163dd847c5
Pointer size: 132 Bytes
Size of remote file: 9.24 MB

styles/main.css ADDED Viewed

	@@ -0,0 +1,336 @@

+/* Основные сбросы стилей */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+:root {
+  --taskbar-height: 40px;
+  --taskbar-bg: #202020;
+  --start-menu-bg: #2d2d2d;
+  --window-header-bg: #1f1f1f;
+  --window-border: #0078d7;
+  --window-bg: #fff;
+  --hover-color: #333;
+  --active-program-bg: #3a3a3a;
+  --desktop-bg: #004275;
+}
+body {
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+  background-color: var(--desktop-bg);
+  background-image: url('../images/windows10-bg.jpg');
+  background-size: cover;
+  background-position: center;
+  position: relative;
+}
+/* Стили для рабочего стола */
+#windows-container {
+  width: 100%;
+  height: calc(100vh - var(--taskbar-height));
+  position: relative;
+  overflow: hidden;
+}
+/* Иконки на рабочем столе */
+.desktop-icon {
+  width: 80px;
+  height: 90px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 10px;
+  margin: 10px;
+  color: #fff;
+  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
+  position: relative;
+  cursor: pointer;
+  text-align: center;
+  font-size: 12px;
+}
+.desktop-icon img {
+  width: 40px;
+  height: 40px;
+  margin-bottom: 5px;
+}
+.desktop-icon:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+/* Стили для панели задач */
+#taskbar {
+  width: 100%;
+  height: var(--taskbar-height);
+  background-color: var(--taskbar-bg);
+  position: fixed;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  z-index: 1000;
+}
+#start-button {
+  height: 100%;
+  width: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  background-color: rgba(0, 120, 215, 0.7);
+  transition: background-color 0.2s ease;
+}
+#start-button img {
+  width: 24px;
+  height: 24px;
+}
+#start-button:hover {
+  background-color: rgba(0, 120, 215, 1);
+}
+/* Добавляем активное состояние для кнопки Пуск */
+#start-button.active {
+  background-color: rgba(0, 120, 215, 1);
+}
+#taskbar-programs {
+  display: flex;
+  height: 100%;
+}
+.taskbar-program {
+  height: 100%;
+  padding: 0 10px;
+  min-width: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+}
+.taskbar-program img {
+  width: 24px;
+  height: 24px;
+}
+.taskbar-program:hover {
+  background-color: var(--hover-color);
+}
+.taskbar-program.active {
+  background-color: var(--active-program-bg);
+  border-bottom: 2px solid #0078d7;
+}
+/* Стили для меню "Пуск" */
+#start-menu {
+  position: absolute;
+  bottom: var(--taskbar-height);
+  left: 0;
+  width: 350px;
+  height: 500px;
+  background-color: var(--start-menu-bg);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  z-index: 9999;
+  color: #fff;
+  transform: translateY(100%);
+  opacity: 0;
+  pointer-events: none;
+  display: flex;
+  flex-direction: column;
+  transition: transform 0.3s ease, opacity 0.3s ease;
+  visibility: hidden;
+}
+#start-menu.active {
+  transform: translateY(0);
+  opacity: 1;
+  pointer-events: auto;
+  visibility: visible;
+}
+#start-menu-header {
+  padding: 15px;
+  display: flex;
+  align-items: center;
+}
+#start-menu-header img {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  margin-right: 10px;
+}
+#start-menu-apps {
+  flex: 1;
+  overflow-y: auto;
+  padding: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+}
+.start-menu-app {
+  width: 90px;
+  height: 90px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin: 5px;
+  padding: 10px;
+  cursor: pointer;
+  text-align: center;
+  font-size: 12px;
+}
+.start-menu-app img {
+  width: 32px;
+  height: 32px;
+  margin-bottom: 5px;
+}
+.start-menu-app:hover {
+  background-color: var(--hover-color);
+}
+/* Стили для окон программ */
+.window {
+  position: absolute;
+  min-width: 300px;
+  min-height: 200px;
+  background-color: var(--window-bg);
+  border: 1px solid var(--window-border);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+  display: flex;
+  flex-direction: column;
+  z-index: 100;
+  resize: both;
+  overflow: hidden;
+}
+.window.minimized {
+  display: none;
+}
+.window.active {
+  z-index: 101;
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+}
+/* Стили для окна в полноэкранном режиме */
+.window.maximized {
+  width: 100% !important;
+  height: calc(100vh - var(--taskbar-height)) !important;
+  top: 0 !important;
+  left: 0 !important;
+  border-radius: 0;
+  resize: none;
+  border: none;
+}
+.window-header {
+  background-color: var(--window-header-bg);
+  color: #fff;
+  padding: 5px 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: move;
+}
+/* Изменение курсора при наведении на заголовок окна (указывает на возможность двойного клика) */
+.window.maximized .window-header {
+  cursor: default;
+}
+.window-title {
+  display: flex;
+  align-items: center;
+}
+.window-title img {
+  width: 16px;
+  height: 16px;
+  margin-right: 5px;
+}
+.window-controls {
+  display: flex;
+}
+.window-control {
+  width: 14px;
+  height: 14px;
+  margin-left: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  cursor: pointer;
+}
+.window-control:hover {
+  background-color: var(--hover-color);
+}
+.window-control.minimize:hover {
+  background-color: #0078d7;
+}
+.window-control.maximize:hover {
+  background-color: #00a65a;
+}
+.window-control.close:hover {
+  background-color: #d9534f;
+}
+.window-content {
+  flex: 1;
+  padding-bottom: 20px;
+  /*overflow: auto;*/
+}
+/* Адаптивные стили */
+@media (max-width: 768px) {
+  :root {
+    --taskbar-height: 50px;
+  }
+  #start-menu {
+    width: 100%;
+    height: 70vh;
+  }
+  .desktop-icon {
+    width: 70px;
+    height: 80px;
+  }
+}
+@media (max-width: 480px) {
+  .desktop-icon {
+    width: 60px;
+    height: 70px;
+    font-size: 10px;
+  }
+  .window {
+    min-width: 90%;
+    min-height: 300px;
+    width: 90% !important;
+    left: 5% !important;
+  }
+}