fix

Author: nickwhite

README.md

@@ -4,76 +4,141 @@
 
 ## ✨ Особенности
 
-- **Единый режим**: TypeScript + JavaScript с подсветкой синтаксиса
-- **Автозапуск**: Автоматическое выполнение кода при изменении
-- **Подсветка синтаксиса**: Улучшенная подсветка для TypeScript и JavaScript
-- **Космический дизайн**: Современный UI с анимациями
+- **🌐 Универсальный язык**: Поддержка TypeScript и JavaScript в едином режиме
+- **🎨 Подсветка синтаксиса**: Красивая подсветка кода с темой Monokai
+- **⚡ Автоматический запуск**: Код выполняется автоматически при изменении
+- **🔍 Отображение ошибок**: Подробная информация об ошибках TypeScript с указанием строки
+- **📱 Адаптивный дизайн**: Полная поддержка мобильных устройств и планшетов
+- **🌙 Космическая тема**: Современный темный интерфейс
 
-## 🎯 Функциональность
+## 📱 Адаптивность
 
-### Подсветка синтаксиса
-- TypeScript типы и интерфейсы
-- JavaScript синтаксис
-- Ключевые слова и операторы
-- Строки, числа, комментарии
+Проект полностью адаптирован для различных устройств:
+
+- **🖥️ Десктоп**: Полнофункциональный интерфейс с большими областями редактирования
+- **📱 Мобильные устройства**: Оптимизированный интерфейс с вертикальным расположением элементов
+- **📟 Планшеты**: Адаптированный дизайн для средних экранов
+- **🔄 Поворот экрана**: Автоматическая адаптация при смене ориентации
+
+### Поддерживаемые разрешения:
+- **Мобильные**: 320px - 768px
+- **Планшеты**: 769px - 1024px  
+- **Десктоп**: 1025px+
+
+## 🚀 Функциональность
+
+### Редактор кода
+- Подсветка синтаксиса TypeScript/JavaScript
+- Нумерация строк
+- Автоматическое завершение строк
+- Темная тема Monokai
 
 ### Выполнение кода
-- Компиляция TypeScript в JavaScript
-- Безопасная среда выполнения
-- Вывод результатов в реальном времени
-- Обработка ошибок
+- Автоматическая компиляция TypeScript
+- Безопасное выполнение в песочнице
+- Перехват console.log и console.error
+- Отображение результатов в реальном времени
+
+### Отображение ошибок
+- Подробная диагностика TypeScript
+- Указание строки и символа ошибки
+- Цветовое кодирование типов ошибок
+- Иконки для быстрой идентификации
+
+## 🛠️ Быстрый старт
 
-## 🚀 Быстрый старт
+1. **Клонируйте репозиторий**
+   ```bash
+   git clone [url-репозитория]
+   cd JavaScript-Universe-Code
+   ```
 
-1. Откройте `index.html` в браузере
-2. Начните писать код в редакторе
-3. Используйте `Ctrl+Enter` для запуска
-4. Наслаждайтесь подсветкой синтаксиса
+2. **Откройте index.html**
+   - В браузере или через локальный сервер
 
-## 💡 Примеры использования
+3. **Начните писать код**
+   - Используйте TypeScript или JavaScript
+   - Код выполняется автоматически
 
-### TypeScript интерфейсы
+4. **Наслаждайтесь подсветкой синтаксиса**
+   - Красивая подсветка ключевых слов
+   - Цветовое кодирование типов
+   - Подсветка строк и комментариев
+
+## 📝 Примеры использования
+
+### Базовый TypeScript
 ```typescript
 interface User {
-    id: number;
     name: string;
-    email: string;
-    age?: number;
+    age: number;
 }
+
+const user: User = {
+    name: "Иван",
+    age: 25
+};
+
+console.log(user);
 ```
 
-### Классы и методы
+### Работа с массивами
 ```typescript
-class UserService {
-    private users: User[] = [];
+const numbers: number[] = [1, 2, 3, 4, 5];
+const doubled = numbers.map(n => n * 2);
+console.log(doubled);
+```
 
-    addUser(user: User): void {
-        this.users.push(user);
-        console.log('✅ Пользователь добавлен:', user);
+### Асинхронные функции
+```typescript
+async function fetchData() {
+    try {
+        const response = await fetch('https://api.example.com/data');
+        const data = await response.json();
+        console.log(data);
+    } catch (error) {
+        console.error('Ошибка:', error);
     }
 }
 ```
 
-### Работа с массивами
-```typescript
-const arr: number[] = [1, 2, 3, 4, 5];
-arr.map(x => x * 2).filter(x => x > 5);
-```
+## 🎯 Технологии
+
+- **HTML5**: Семантическая разметка
+- **CSS3**: Адаптивные стили и анимации
+- **JavaScript ES6+**: Современный JavaScript
+- **TypeScript**: Типизированный JavaScript
+- **CodeMirror**: Редактор кода
+- **Monokai**: Темная тема
+
+## 📱 Мобильная оптимизация
 
-## 🎨 Дизайн
+- **Сенсорная поддержка**: Оптимизировано для касаний
+- **Предотвращение зума**: Настроено для предотвращения случайного масштабирования
+- **Адаптивные кнопки**: Увеличенные области касания на мобильных
+- **Оптимизированные шрифты**: Читаемые размеры на всех устройствах
+- **Горизонтальная прокрутка**: Поддержка ландшафтной ориентации
 
-- Космическая тема с анимациями
-- Адаптивный дизайн
-- Темная цветовая схема
-- Плавные переходы и эффекты
+## 🔧 Настройка
+
+Проект не требует установки зависимостей - все библиотеки загружаются через CDN.
+
+### Локальная разработка
+```bash
+# Запуск через Python
+python -m http.server 8000
+
+# Запуск через Node.js
+npx serve .
+
+# Запуск через PHP
+php -S localhost:8000
+```
 
-## 🔧 Технологии
+## 📄 Лицензия
 
-- **CodeMirror 5**: Редактор кода
-- **TypeScript**: Компилятор
-- **CSS3**: Анимации и стили
-- **Vanilla JavaScript**: Логика приложения
+MIT License - свободное использование и модификация.
 
-## 📝 Лицензия
+---
 
-MIT License 
+**Создано с ❤️ для изучения JavaScript и TypeScript** 

index.html

@@ -2,13 +2,12 @@
 <html lang="ru">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>🚀 JavaScript Universe</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>JavaScript Universe - Редактор кода</title>
     <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/theme/monokai.min.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/hint/show-hint.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/lint/lint.css">
+    <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600&display=swap" rel="stylesheet">
 </head>
 <body>
     <div class="container">
@@ -74,16 +73,10 @@ <h3>🌟 Результат выполнения</h3>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/javascript/javascript.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/typescript/typescript.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/hint/show-hint.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/hint/javascript-hint.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/hint/anyword-hint.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/edit/closebrackets.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/edit/matchbrackets.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/lint/lint.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/lint/javascript-lint.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/selection/active-line.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/edit/trailingspace.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/mode/simple.js"></script>
     <script src="https://unpkg.com/typescript@latest/lib/typescript.js"></script>
     <script src="script.js"></script>
 </body>

script.js

@@ -10,12 +10,78 @@ class CodePlayground {
         this.autoRunTimeout = null;
         this.autoRunDelay = 1000; // 1 секунда задержки
 
-        this.initEditor();
+        this.initializeEditor();
         this.bindEvents();
         this.loadDefaultCode();
+        this.setupMobileOptimizations();
     }
 
-    initEditor() {
+    setupMobileOptimizations() {
+        // Предотвращение двойного касания для зума
+        let lastTouchEnd = 0;
+        document.addEventListener('touchend', (event) => {
+            const now = (new Date()).getTime();
+            if (now - lastTouchEnd <= 300) {
+                event.preventDefault();
+            }
+            lastTouchEnd = now;
+        }, false);
+
+        // Оптимизация для мобильных устройств
+        if (window.innerWidth <= 768) {
+            this.setupMobileEditor();
+        }
+
+        // Обработка изменения ориентации
+        window.addEventListener('orientationchange', () => {
+            setTimeout(() => {
+                this.editor.refresh();
+            }, 100);
+        });
+
+        // Обработка изменения размера окна
+        window.addEventListener('resize', () => {
+            setTimeout(() => {
+                this.editor.refresh();
+            }, 100);
+        });
+    }
+
+    setupMobileEditor() {
+        // Уменьшаем задержку авто-запуска на мобильных
+        this.autoRunDelay = 1000;
+        
+        // Оптимизируем CodeMirror для мобильных
+        this.editor.setOption('lineWrapping', true);
+        this.editor.setOption('scrollbarStyle', 'native');
+        
+        // Улучшаем обработку касаний
+        this.editor.on('touchstart', () => {
+            // Предотвращаем конфликты с системными жестами
+        });
+
+        // Дополнительные оптимизации для очень маленьких экранов
+        if (window.innerWidth <= 480) {
+            this.setupTinyScreenOptimizations();
+        }
+    }
+
+    setupTinyScreenOptimizations() {
+        // Уменьшаем размеры шрифтов
+        this.editor.setOption('lineHeight', 1.1);
+        
+        // Уменьшаем отступы
+        const editorElement = this.editor.getWrapperElement();
+        editorElement.style.fontSize = '10px';
+        
+        // Оптимизируем для касаний
+        this.editor.setOption('cursorBlinkRate', 0); // Отключаем мигание курсора для экономии ресурсов
+        
+        // Уменьшаем задержку авто-запуска для быстрого отклика
+        this.autoRunDelay = 800;
+    }
+
+    initializeEditor() {
         const textarea = document.getElementById('codeEditor');
 
         this.editor = CodeMirror.fromTextArea(textarea, {