Это персональный инструмент для работы с таймштампами. По долгу службы, мне приходится часто проверять интервалы между временем в штампе на разных фото. Объемы достаточно большие, нередко штампы приходится корректировать вручную. Самая большая проблема - каждый раз высчитывать новые интервалы под строгое соответствие регламенту.
Нередко на композиции помимо основных объектов присутствуют и аналоговые часы. Помимо корректного штампа, приходится добиваться чтобы время на штампе и видимом на фото аналоговом циферблате были приведены к единому соответствию.
Я уже знал что под такие задачи существует множество готовых сервисов, но все они были раскиданы по разным ссылкам и не всегда предлагали оптимальный функционал именно под мой порядок работы. Поэтому было решено объединить все инструменты на одной странице, дабы иметь их всегда под рукой.
Часы и визуализация Гибрид: Аналоговый циферблат Ретро-цифровое табло (для наглядности).
Режим «Freeze» Можно нажать на паузу (или просто начать вводить время), и часы зафиксируются — удобно, чтобы замерить конкретный момент и не отвлекаться на тиканье.
Адаптивность Сверстал так, чтобы удобно сидело и на втором мониторе, и на телефоне.
Пресеты (моя любимая часть) Быстрые шаблоны: В работе в основном используются типовые значения, либо вечер, либо утро. Популярные тайминги (19:32, 20:21 и т.д.) кликаются сразу.
Свои слоты: Один раз указав нужное время, можно сохранить его в виде пресета в один клик. На случай если к этому значению еще придется возвращаться. Слотов всего 6 - больше обычно не требуется. Если надо подправить значешние в шаблоне — нажал на карандаш, изменил цифры прямо в ячейке, готово. Никаких лишних меню. ВАЖНО: Хранятся в рамках одной сессии, чтобы не утяжелять проект слабо обоснованным внедрением БД и прочего гемора. После перезахода на страницу - шаблоны сбросятся.
Калькулятор и анализ Математика: Считает сдвиги (например, +8.5 ч.) и разницу интервалов. Даты: Сдвиг календаря на N дней с выводом человеческого дня недели. Лингвистика: Переводит время в текст (русский/английский), если нужно быстро вставить в сообщение или документацию.
Интерфейс спроектирован по принципу «всё на одном экране» (Single Page Application) с использованием чистого HTML5, CSS3 (переменные, Flexbox, Grid) и ванильного JavaScript.
|
|
|
По сути весь инструмент представляет из себя единый index.html файл, который умеет всё, что мне нужно, и не просит установки. Развернут на GitHub pages для универсального доступа из любой точки мира и с любого устройства. Страница максимально адаптивна и на мобильных устройствах есть дополнительные кнопки для удобного переключения между функциями.
Я не хотел тащить сюда React или тяжелые фреймворки, поэтому всё написано на Vanilla JS. Frontend: Чистый HTML5, CSS3 (Flexbox/Grid, переменные), никакого мусора. Графика: Векторные SVG-иконки — легкие и быстрые. Сборка: Отсутствует. Это просто монолитный файл.
- Работает по ссылке на GitHub pages: Github Pages
- Есть возможность запустить локально, просто скачайте index.html и откройте его в браузере.
Таймер рабочих часов — инструмент автоматизации тайм-трекинга, разработанный для специалистов с фиксированным или гибким графиком (например, стандартный 8-часовой рабочий день). Будет особенно полезен тем кто часто перерабатывает\недорабатывает. В отличие от обычных секундомеров, данный модуль интегрирован с калькулятором интервалов и аналитическими функциями приложения, преобразуя «сухой» ход времени в наглядные числа.
Выводит итог в конце рабочей сессии:
По нажатиюю кнопки "Стоп" - таймер выводит подробную сводку, время начала и окончания отсчеты, количество пауз, интервалы между паузами. Закрывая смену, ты получаешь наглядное представление о том, сколько часов ты уделил выполнению задач. Иногда это служит подтверждением твоей продуктивности, а иногда - повод задуматься.
Учитывает время перерыва:
Отошел на обед или попить чай — ткнул паузу, рабочий таймер замер, включился счетчик отдыха. В итоге учитывается каждая минута твоего реального присутствия в задаче.
Собирает статистику:
Каждая сводка автоматически сохраняется в текстовый файл с единым форматированием. Спустя неделю или месяц можно поднять логи и посмотреть полную картину: в какие дни ты работал, сколько часов набежало, сопоставить свой КПД и количество перерывов.
Подбадривает в начале дня и на перерывах:
При взаимодействии с основными кнопкапи начало\пауза\стоп - таймер не просто бездушно считает, но и подкидывает бодрящие фразы максимально соответствующие контексту событий.
-
Шрифт - В приложении имеется три предустановленных шрифта: Roboto, Inter, Martian
-
Тема - Три предустановленных темы для разных сценариев использования: Ночная, стандарт, дневная.
|
|
|
Настройки и элементы управления
1. Консоль. Вы можете открывать и закрывать консоль вывода лога тапом по ее верхней части. Присутствуют быстрые действия "Копировать" и "Экспорт" для взаимодействия с содержимым лога.
2. Формат. Позволяет выбрать формат вывода даты в лог. По умолчанию оптимизирован под поведение стандартного проводника Windows. Все записи будут сортироваться хронологически A-Z.
3. Авто-экспорт. После нажатия кнопки "Стоп" - лог будет сохранен автоматически в вашу папку загрузок. Отключаемо.
4. Скрывать элементы управления. Скрывает всё лишнее, оставляя только таймер - для достижения наиболее чистого визуала. Повторное нажатие восстановит исходное отображение элементов.
5. Редирект. Кнопка возврата к основному функционалу Smart Clock Assistant (Циферблат, интервалы)
6. Авто-сохранение настроек. По возможности, страница будет помнить все выставленные настройки даже между сессиями. Хранятся в cookies, после очистки - сбрасываются.
Структура html-страницы полностью адаптивна и учитывает 3 варианта использования:
1. Десктопный - традиционное горизонтальное отображение в окне бразура.
2. Мобильный вертикальный - адаптируется под вертикальное разрешение, масштабируя все элементы и меняя положение кнопок.
3. Мобильный горизонтальный - адаптируется под горизонтальное разрешение, масштабируя все элементы и меняя положение кнопок. В данном режиме часть кнопок может быть скрыта в целях достижения чистого визуала.
|
|
|
На втором мониторе (при наличии оного)
- Перед началом работы, просто откройте страницу Github Pages на втором (при наличии) или основном мониторе.
- Выберите подходящий шрифт и тему для отображения. При желании, можно скрыть лог-консоль, настроить форматирование и вкл\выкл автосохранение лога при остановке таймера.
- Нажмите кнопку "Начать сессию"
- Рекомендуется: Нажать кнопку "Спрятать элементы управления" в правом нижнем углу, для достижения наиболее чистого визуала.
- Опционально: Находясь на вкладке с таймером нажмите F11 для перехода в полноэкранный режим. Выход из режима осуществляется повторным нажатием.
На мобильном устройстве.
- Откройте в мобильном браузере страницу Github Pages
- Выберите подходящий шрифт и тему для отображения. При желании, можно скрыть лог-консоль, настроить форматирование и вкл\выкл автосохранение лога при остановке таймера.
- Рекомендуется: Перевести дисплей мобильного устройства в режим горизонтальной ориентаци Таймер сам определяет ориентацию и работоспособен в любом, но оптимальный сценарий использования именно горизонтальный вид. Само устройство тоже рекомендуется разместить так, чтобы дисплей всегда находился в прямой видимости (идеально при наличии подставки).
- Нажмите кнопку "Начать сессию"
- Рекомендуется: Нажать кнопку "Спрятать элементы управления" в правом нижнем углу, для достижения наиболее чистого визуала.
- Опционально: Активируйте полноэкранный режим, если ваш мобильный браузер поддерживает такую функцию. Метод активации режима может отличаться на различных устройствах\ОС.