Інтерактивний 2D-віджет теплоізоляції стіни на чистому HTML5 Canvas / CSS3
Бюджет:
11 000 UAH
Термін виконання:
6 днів
Подано відгуків:
0 пропозицій
Опис завдання
Потрібно розробити легкий інтерактивний віджет для сайту енергоефективного будівництва: наочний 2D-калькулятор розрізу стіни будинку на HTML5 Canvas та CSS3.
Сценарій взаємодії:
Користувач бачить поперечний розріз стіни. При наведенні курсору або кліку на конкретний шар (газоблок, мінеральна вата, паробар'єр, облицювальна цегла) шар м'яко виділяється контуром через CSS3 keyframes, і з'являється спливаюча плашка з товщиною та коефіцієнтом тепловтрат. Поруч розташований повзунок товщини утеплювача (від 100 до 250 мм) — при перетягуванні товщина шару на полотні динамічно змінюється, а знизу перераховується орієнтовна економія на опаленні в грн/сезон.
Технічні вимоги та обмеження:
❌ Без React, Vue, jQuery чи Three.js (віджет має підключатися на будь-який сайт через один незалежний скрипт)
❌ Без растрових важких зображень: уся графіка будується через Canvas API або векторні примітиви
✅ Чистий ванільний JavaScript + HTML5 Canvas (використання requestAnimationFrame для плавної анімації 60 FPS)
✅ Повна підтримка тач-подій на смартфонах (touch events, свайп повзунка)
✅ Загальна вага віджета разом зі стилями — до 60 Кб
Макети шарів і математичну формулу тепловтрат надам у перший день. Бюджет 11 000 грн, дедлайн 6 днів.