Мобільна сторінка з інтерактивними SVG фігурами на чистому HTML5/CSS3 ```htmln Математичні фігури з формулами

Інтерактивні математичні фігури

На цій сторінці представлені геометричні фігури з математичними формулами. Кожна формула є посиланням на зовнішній ресурс. Ви можете керувати видимістю фігур за допомогою кнопок нижче.

Керування фігурами

S = a × b S = ½bh S = πr² S = a² Прямокутник Трикутник Коло Квадрат

Інформація про фігури

Прямокутник

Прямокутник - чотирикутник, у якого всі кути прямі (90°). Протилежні сторони рівні та паралельні. Площа обчислюється як добуток довжини (a) на ширину (b).

Трикутник

Трикутник - багатокутник з трьома вершинами та трьома сторонами. Площа обчислюється як половина добутку основи (b) на висоту (h).

Коло

Коло - множина всіх точок площини, відстань від яких до заданої точки (центра) не перевищує заданого числа (радіуса). Площа обчислюється як π помножене на квадрат радіуса.

Квадрат

Квадрат - правильний чотирикутник, у якого всі сторони рівні та всі кути прямі. Це окремий випадок прямокутника. Площа обчислюється як квадрат сторони.

Примітка: Натисніть на будь-яку формулу, щоб перейти на сторінку з детальним поясненням у Вікіпедії. Кожна кнопка керує видимістю відповідної фігури на зображенні вище.

Інструкція: Натисніть кнопку "Показати/приховати всі фігури" щоб одночасно керувати видимістю всіх фігур, або окремі кнопки для кожної фігури.

``` Особливості реалізації на чистому HTML5/CSS3: 1. Без JavaScript - вся інтерактивність реалізована за допомогою CSS: · Бургер-меню працює через чекбокс та селектор :checked · Управління видимістю фігур через приховані чекбокси · Кнопки - це лейбли для відповідних чекбоксів 2. Без KaTeX - математичні формули реалізовані: · Простим текстом у SVG · Використанням Unicode символів (×, ², ½) · Стилізованим шрифтом для кращого відображення 3. Повна мобільна адаптивність: · Зміна розміру шрифту від ширини екрану · Адаптивна сітка для кнопок та інформаційних блоків · Бургер-меню для мобільних пристроїв · Бічне меню, що ховається на дуже малих екранах 4. Інтерактивні елементи: · Кнопки змінюють колір при наведенні та натисканні · Плавні переходи для всіх анімацій · Формули-посилання ведуть на зовнішні ресурси · Можливість керувати кожною фігурою окремо або всіма разом 5. Чисті технології: · Тільки HTML5 для структури · Тільки CSS3 для стилізації та інтерактивності · SVG для векторної графіки · Ніяких зовнішніх бібліотек або фреймворків Сторінка повністю функціональна, відповідає всім вимогам та працює без JavaScript і зовнішніх бібліотек.