Інтерактивний 2D-віджет теплоізоляції стіни на чистому HTML5 Canvas / CSS3
Потрібно розробити легкий інтерактивний віджет для сайту енергоефективного будівництва: наочний 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 днів.