68 lines
3.1 KiB
Markdown
68 lines
3.1 KiB
Markdown
# Требования к проекту Calculator
|
||
|
||
## 1. Псевдоавторизация
|
||
|
||
- Экран входа с полем "Логин" и кнопкой "Войти"
|
||
- Принимается любой непустой логин (без пароля)
|
||
- Логин сохраняется в localStorage
|
||
- При повторном входе пользователь попадает сразу в калькулятор
|
||
- Кнопка "Выйти" в интерфейсе калькулятора (очищает localStorage)
|
||
- Отображение текущего логина в шапке
|
||
|
||
## 2. Калькулятор
|
||
|
||
### Операции
|
||
- Сложение (+)
|
||
- Вычитание (-)
|
||
- Умножение (*)
|
||
- Деление (/)
|
||
- Процент (%)
|
||
- Смена знака (+/-)
|
||
- Десятичная точка
|
||
- Равно (=)
|
||
- Очистка (C) - полный сброс
|
||
- Удаление последнего символа (Backspace)
|
||
|
||
### Дисплей
|
||
- Поле ввода/результата с крупным шрифтом
|
||
- Отображение текущего выражения (например "12 + 3")
|
||
- Отображение результата
|
||
- Текст уменьшается при длинных числах (auto-fit)
|
||
|
||
### Клавиатурная панель
|
||
- Кнопки расположены сеткой (стандартная раскладка калькулятора)
|
||
- Визуальная обратная связь при нажатии (hover, active состояния)
|
||
|
||
## 3. Управление с клавиатуры
|
||
|
||
| Клавиша | Действие |
|
||
|---------|----------|
|
||
| 0-9 | Ввод цифры |
|
||
| . | Десятичная точка |
|
||
| + | Сложение |
|
||
| - | Вычитание |
|
||
| * | Умножение |
|
||
| / | Деление |
|
||
| Enter или = | Вычислить результат |
|
||
| Escape | Полный сброс (C) |
|
||
| Backspace | Удалить последний символ |
|
||
| % | Процент |
|
||
|
||
- Нажатие клавиши визуально подсвечивает соответствующую кнопку на экране
|
||
- Фокус не должен уходить с калькулятора при работе с клавиатуры
|
||
|
||
## 4. Адаптивность
|
||
|
||
- Минимальная поддерживаемая ширина: 320px
|
||
- Калькулятор центрирован на экране (по горизонтали и вертикали)
|
||
- На маленьких экранах калькулятор занимает почти всю ширину
|
||
- На больших экранах калькулятор имеет фиксированную максимальную ширину
|
||
- Кнопки достаточно крупные для тач-устройств (минимум 48px)
|
||
|
||
## 5. UI/UX
|
||
|
||
- Чистый минималистичный дизайн
|
||
- Цветовое разделение: цифры / операторы / функции
|
||
- Плавные анимации при нажатии кнопок
|
||
- Отображение имени пользователя и кнопки выхода в шапке
|