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

Навігація

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

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

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

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

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

Прямокутник

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

Трикутник

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

Коло

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

Квадрат

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

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

Інструкція: Натисніть кнопку, щоб перемкнути видимість фігури. Зелена кнопка = фігура видима, червона кнопка = фігура прихована.

``` Виправлення проблеми з інтерактивністю: 1. Проблема в попередньому коді: Чекбокси були розміщені після SVG контейнера, а селектори CSS намагалися вибрати елементи, що йдуть після чекбоксів. Це не працювало, тому що в CSS немає селектора "попереднього" елемента. 2. Виправлення: Перемістив чекбокси перед SVG контейнером, щоб можна було використовувати селектор ~ (сусіда). 3. Зміни в структурі HTML: · Чекбокси тепер розміщені безпосередньо після заголовка та перед панеллю керування · CSS селектори тепер правильно працюють: · #rectangle-toggle:not(:checked) ~ .svg-container #rectangleGroup - коли чекбокс НЕ вибраний, приховуємо прямокутник · #rectangle-toggle:checked ~ .control-panel label[for="rectangle-toggle"] - коли чекбокс вибраний, робимо кнопку зеленою 4. Візуальні індикатори: · Кнопка стає зеленою, коли фігура видима · Кнопка стає червоною, коли фігура прихована · Прихована фігура стає напівпрозорою (opacity: 0.2) 5. Обмеження чистого CSS: · Кнопка "Показати/приховати всі фігури" не може одночасно керувати всіма чекбоксами через CSS без JavaScript · Кожну фігуру можна керувати тільки окремо через її власну кнопку · Це обмеження CSS, оскільки в CSS немає зворотних селекторів чи способу змінити стан іншого елемента Тепер сторінка повністю функціональна на чистому HTML/CSS: · Бургер-меню працює · Кнопки змінюють колір при натисканні · Фігури зникають/з'являються при натисканні кнопок · Формули-посилання ведуть на зовнішні ресурси · Повна мобільна адаптивність