{"id":25208373,"url":"https://github.com/black-evil-dragon/interval-slider-task","last_synced_at":"2026-02-04T17:05:35.113Z","repository":{"id":268230661,"uuid":"900885950","full_name":"black-evil-dragon/interval-slider-task","owner":"black-evil-dragon","description":"Тестовое задание | UI idea","archived":false,"fork":false,"pushed_at":"2024-12-17T17:01:07.000Z","size":1182,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-18T16:54:23.776Z","etag":null,"topics":["gsap","react","scss","swiper","typescript","webpack"],"latest_commit_sha":null,"homepage":"https://dist-theta-orcin.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/black-evil-dragon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-09T16:45:49.000Z","updated_at":"2025-03-20T11:09:40.000Z","dependencies_parsed_at":"2025-02-10T12:43:25.569Z","dependency_job_id":null,"html_url":"https://github.com/black-evil-dragon/interval-slider-task","commit_stats":null,"previous_names":["black-evil-dragon/onlydigital-task","black-evil-dragon/interval-slider-task"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/black-evil-dragon/interval-slider-task","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/black-evil-dragon%2Finterval-slider-task","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/black-evil-dragon%2Finterval-slider-task/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/black-evil-dragon%2Finterval-slider-task/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/black-evil-dragon%2Finterval-slider-task/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/black-evil-dragon","download_url":"https://codeload.github.com/black-evil-dragon/interval-slider-task/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/black-evil-dragon%2Finterval-slider-task/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29091317,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-04T03:31:03.593Z","status":"ssl_error","status_checked_at":"2026-02-04T03:29:50.742Z","response_time":62,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gsap","react","scss","swiper","typescript","webpack"],"created_at":"2025-02-10T12:43:13.762Z","updated_at":"2026-02-04T17:05:35.098Z","avatar_url":"https://github.com/black-evil-dragon.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Компонент IntervalSlider\n\nПример использования интервального слайдера в проекте React.ts+Webpack\n\u003e Увидел возможность использовать его не только для дат, но и для любых других числовых промежутков. Здесь также можно добавить возможность использовать пре/пост-фиксы, например для отображения выделенного бюджета на что-либо: \"$500-100 тыс. \"\n\nВ проекте тренировал Feature-Sliced Design\n\u003e Кажется сейчас излишним, и часть логики все еще можно вынести в model. Компоненты Spinner и SpinnerPoint не имеют свои css классы и стили, что надо исправить (наверное)\n\n## Инструкция по запуску проекта\n\n##### Клонирование\n\n```\ngit clone https://github.com/black-evil-dragon/onlydigital-task.git\ncd onlydigital-task\n```\n\n\n##### Запуск\n\n```\ncd ./app\n```\n\n```\nnpm install\n```\n\n```\nnpm run start\n```\n\n##### Запуск с помощью Docker compose (в папке onlydigital-task)\n\n```\ndocker-compose -f docker-compose.dev.yml up --build\n```\nили для production\n```\ndocker-compose -f docker-compose.prod.yml up --build\n```\n\n\n## Описание тестового задания\nРеализовать следующий блок в соответствии с макетом \n\u003e https://novokuznetsk.hh.ru/vacancy/106883136?hhtmFrom=employer_vacancies\n\nБлок содержит информацию о временных отрезках, в каждом из которых существует несколько событий. \nПри переключении временных отрезков изменяются соответствующие числа и под ними показывается новый слайдер, который содержит подробную информацию по ключевым событиям на активном временном отрезке.\n\nВозможно существование от 2 до 6 временных отрезков. Все интерактивные точки на окружности располагаются на одинаковом расстоянии друг от друга\n\nВесь блок стоит сделать независимым от другой логики на странице. \nНапример, если добавить на страницу ещё один такой же блок, верстка и логика работы этих блоков не будет нарушена\n\nДемонстрация работы блока - пример с максимальным количеством временных отрезков\n\u003e https://disk.yandex.ru/d/um6QeDGxLT8wnQ\n\nВсе существующие в макете линии — это не разметочная сетка, а часть верстки \n\n## Требования к реализации\n\n- Необходимо использовать Typescript\n- Можно использовать React.js или нативный JS на Ваш выбор\n- В случае использования нативного JS, можно воспользоваться любым удобным для Вас HTML-шаблонизатором или обычным HTML\n- Стилизация с использованием SASS/SCSS (В случае работы с React.js, возможно использование styled-components)\n- Сборка проекта с помощью Webpack\n- Для работы со слайдерами необходимо использовать библиотеку Swiper\n- Для реализации js-анимаций можно использовать библиотеку gsap\n- Не использовать JQuery\n- Не использовать Bootstrap, Tailwind и т.п.\n- Не использовать библиотеки с готовыми UI-компонентами такие, как MaterialUI, AntDesign и т.п.\n\nВыполненное задание необходимо прислать в виде ссылки на git-репозиторий. Актуальная версия кода должна находится в основной ветке.\nФайл README.md должен содержать инструкцию по запуску проекта\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblack-evil-dragon%2Finterval-slider-task","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fblack-evil-dragon%2Finterval-slider-task","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblack-evil-dragon%2Finterval-slider-task/lists"}