🌍 Умный гид-переводчик

Одностраничное веб-приложение для туристов: переводчик с русского на английский, гид по достопримечательностям Санкт-Петербурга и интерактивная карта.

✨ Возможности

🗣 Переводчик

• Перевод текста с русского на английский
• Использует MyMemory API (бесплатно, ~5000 слов/день)
• Автоматический fallback на локальный словарь при ошибке API
• Поддержка горячих клавиш (Ctrl+Enter для перевода)

🏛 Гид

• 5 главных достопримечательностей Санкт-Петербурга
• Двухязычные описания (RU/EN)
• Добавление в избранное (★)
• Сохранение избранного в localStorage

🗺 Карта

• Интерактивная карта на Leaflet.js + OpenStreetMap
• Маркеры всех достопримечательностей
• Popup с информацией при клике на маркер
• Автоматическое масштабирование

🚀 Запуск

Локальный запуск

Просто откройте index.html в браузере:

# macOS/Linux
open index.html

# Windows
start index.html

Важно: Для корректной загрузки data.json рекомендуется использовать локальный сервер.

Вариант 1: Python

# Python 3
python -m http.server 8000

# Python 2
python -m SimpleHTTPServer 8000

Вариант 2: Node.js

npx serve .

Вариант 3: PHP

php -S localhost:8000

Затем откройте http://localhost:8000 в браузере.

🌐 Деплой

GitHub Pages

1. Создайте репозиторий на GitHub
2. Загрузите все файлы проекта
3. Перейдите в Settings → Pages
4. Выберите ветку main и папку / (root)
5. Нажмите Save

Приложение будет доступно по адресу: https://<username>.github.io/<repo-name>/

Vercel

npm i -g vercel
vercel

Следуйте инструкциям в терминале.

Netlify

1. Перетащите папку с проектом на app.netlify.com/drop
2. Готово!

📁 Структура проекта

/project-root
  ├── index.html           # Главная страница
  ├── data.json            # Данные о достопримечательностях
  ├── css/
  │   └── style.css        # Стили приложения
  ├── js/
  │   ├── app.js           # Основная логика, роутинг вкладок
  │   ├── translator.js    # Модуль переводчика (API + словарь)
  │   ├── guide.js         # Модуль гида (данные + localStorage)
  │   └── map.js           # Модуль карты (Leaflet)
  └── README.md            # Документация

🛠 Технологический стек

• HTML5 + CSS3 + Vanilla JavaScript — без фреймворков
• Leaflet.js — интерактивная карта
• OpenStreetMap — тайлы карты
• MyMemory API — перевод текста
• localStorage — хранение избранного

📊 API лимиты

Сервис	Лимит	Ключ
MyMemory API	~5000 слов/день	Не требуется
OpenStreetMap	Разумное использование	Не требуется

📱 Совместимость

• ✅ Chrome / Edge (последние версии)
• ✅ Firefox (последние версии)
• ✅ Safari (последние версии)
• ✅ Мобильные браузеры

📝 Лицензия

MIT

---

Сделано с ❤️ для туристов Санкт-Петербурга