Загрузка данных
Полные файлы cadence.html и wheelcalc.html
Похоже, при вставке потерялись секции. Вот полностью готовые файлы с всеми разделами: кнопками, результатами, формулами с расшифровкой символов и дисклеймером.
---
cadence.html (полный)
```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Калькулятор каденса велосипеда</title>
<link rel="stylesheet" href="css/calculators.css">
</head>
<body>
<div class="container">
<div class="calculator">
<h1>Калькулятор каденса велосипеда</h1>
<p class="subtitle">Расчёт частоты вращения педалей, скорости, передаточных отношений, подбор передач и сравнение каденсов.</p>
<!-- 1. ПАРАМЕТРЫ -->
<section>
<h2>1. Основные параметры</h2>
<div class="input-group">
<label for="speed">Скорость движения, км/ч</label>
<input id="speed" type="number" min="0" max="150" step="0.1" value="25">
<p>Скорость велосипеда относительно дороги.</p>
</div>
<div class="input-group">
<label for="wheelMode">Способ задания размера колеса</label>
<select id="wheelMode">
<option value="circumference">Окружность колеса</option>
<option value="diameter">Наружный диаметр колеса</option>
</select>
<p>Окружность точнее, диаметр удобнее ввести.</p>
</div>
<div class="input-group">
<label for="wheelSize">Размер колеса, мм</label>
<input id="wheelSize" type="number" min="500" max="3000" step="1" value="2205">
<p>Окружность качения или наружный диаметр в мм — в зависимости от режима выше.</p>
</div>
<div class="input-group">
<label for="front">Количество зубьев передней звезды</label>
<input id="front" type="number" min="1" max="100" step="1" value="34">
<p>Число зубьев на передней звезде.</p>
</div>
<div class="input-group">
<label for="rear">Количество зубьев задней звезды</label>
<input id="rear" type="number" min="1" max="60" step="1" value="17">
<p>Число зубьев на выбранной задней звезде.</p>
</div>
<div class="actions">
<button id="calculate">Рассчитать каденс</button>
<button id="reset" class="secondary">Сбросить</button>
</div>
</section>
<!-- 2. РЕЗУЛЬТАТЫ -->
<section>
<h2>2. Результаты расчёта</h2>
<div class="results">
<div class="result-row"><span>Окружность колеса</span><output id="circumferenceResult">—</output></div>
<div class="result-row"><span>Передаточное отношение</span><output id="ratio">—</output></div>
<div class="result-row"><span>Обороты колеса</span><output id="wheelRPM">—</output></div>
<div class="result-row"><span>Каденс</span><output id="cadence">—</output></div>
<div class="result-row"><span>Расстояние за оборот шатунов</span><output id="distancePerCrank">—</output></div>
<div class="result-row"><span>Расстояние за оборот колеса</span><output id="distancePerWheel">—</output></div>
<div class="result-row"><span>Расстояние за минуту</span><output id="distanceMinute">—</output></div>
<div class="result-row"><span>Расстояние за час</span><output id="distanceHour">—</output></div>
<div class="result-row"><span>Оценка диапазона каденса</span><output id="zone">—</output></div>
</div>
</section>
<!-- 3. ОБРАТНЫЙ РАСЧЁТ -->
<section>
<h2>3. Обратный расчёт скорости по каденсу</h2>
<div class="input-group">
<label for="targetCadence">Целевой каденс, об/мин</label>
<input id="targetCadence" type="number" min="0" max="250" step="1" value="90">
<p>Желаемое число оборотов шатунов в минуту.</p>
</div>
<div class="actions">
<button id="reverse">Рассчитать скорость</button>
</div>
<div class="results">
<div class="result-row"><span>Расчётная скорость</span><output id="predictedSpeed">—</output></div>
<div class="result-row"><span>Обороты колеса</span><output id="predictedWheelRPM">—</output></div>
<div class="result-row"><span>Дистанция за минуту</span><output id="predictedMinute">—</output></div>
<div class="result-row"><span>Дистанция за час</span><output id="predictedHour">—</output></div>
</div>
</section>
<!-- 4. ПОДБОР ПЕРЕДАЧИ -->
<section>
<h2>4. Подбор передачи под каденс и скорость</h2>
<div class="input-group">
<label for="targetSpeed">Желаемая скорость, км/ч</label>
<input id="targetSpeed" type="number" min="0" max="150" step="0.1" value="25">
<p>Темп, который нужно удерживать.</p>
</div>
<div class="input-group">
<label for="desiredCadence">Желаемый каденс, об/мин</label>
<input id="desiredCadence" type="number" min="1" max="200" step="1" value="90">
<p>Комфортные обороты шатунов.</p>
</div>
<div class="input-group">
<label for="frontList">Передние звёзды через запятую</label>
<input id="frontList" type="text" value="30, 32, 34, 36, 38, 40, 42, 50">
<p>Список целых чисел — количество зубьев.</p>
</div>
<div class="input-group">
<label for="rearList">Задние звёзды через запятую</label>
<input id="rearList" type="text" value="11, 13, 15, 17, 19, 21, 24, 28, 32">
<p>Список целых чисел — количество зубьев.</p>
</div>
<div class="actions">
<button id="findGear">Подобрать передачу</button>
</div>
<div class="results">
<div class="result-row"><span>Ближайшая комбинация</span><output id="bestGear">—</output></div>
<div class="result-row"><span>Каденс выбранной комбинации</span><output id="bestCadence">—</output></div>
<div class="result-row"><span>Отклонение от целевого</span><output id="bestDifference">—</output></div>
</div>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>Передняя</th>
<th>Задняя</th>
<th>Отношение</th>
<th>Каденс</th>
<th>Отклонение</th>
</tr>
</thead>
<tbody id="gearResults">
<tr><td colspan="5">Нажмите «Подобрать передачу».</td></tr>
</tbody>
</table>
</div>
</section>
<!-- 5. ТАБЛИЦА ПЕРЕДАЧ -->
<section>
<h2>5. Полная таблица передач</h2>
<p>Таблица показывает каденс для всех заданных комбинаций при текущей скорости.</p>
<div class="actions">
<button id="allGears">Построить таблицу передач</button>
</div>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>Передняя, зубьев</th>
<th>Задняя, зубьев</th>
<th>Отношение</th>
<th>Каденс</th>
<th>Расстояние за оборот шатунов, м</th>
</tr>
</thead>
<tbody id="allGearResults">
<tr><td colspan="5">Нажмите «Построить таблицу передач».</td></tr>
</tbody>
</table>
</div>
</section>
<!-- 6. СРАВНЕНИЕ КАДЕНСОВ -->
<section>
<h2>6. Сравнение скорости при разных каденсах</h2>
<div class="input-group">
<label for="cadenceList">Каденсы через запятую, об/мин</label>
<input id="cadenceList" type="text" value="50, 60, 70, 80, 90, 100, 110, 120">
<p>Для каждого значения рассчитывается скорость и расстояние.</p>
</div>
<div class="actions">
<button id="compareCadences">Сравнить скорости</button>
</div>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>Каденс, об/мин</th>
<th>Скорость, км/ч</th>
<th>Обороты колеса, об/мин</th>
<th>Расстояние за минуту, м</th>
</tr>
</thead>
<tbody id="cadenceResults">
<tr><td colspan="4">Нажмите «Сравнить скорости».</td></tr>
</tbody>
</table>
</div>
</section>
<!-- 7. ФОРМУЛЫ -->
<section>
<h2>7. Формулы и расшифровка символов</h2>
<h3>Передаточное отношение</h3>
<div class="formula"><var>i</var> = <span class="frac"><span class="num"><var>Z</var><sub>перед</sub></span><span class="den"><var>Z</var><sub>зад</sub></span></span></div>
<p class="symbols"><var>i</var> — отношение; <var>Z</var><sub>перед</sub>, <var>Z</var><sub>зад</sub> — число зубьев.</p>
<h3>Обороты колеса</h3>
<div class="formula"><var>n</var><sub>кол</sub> = <span class="frac"><span class="num"><var>v</var></span><span class="den"><var>C</var></span></span> · 60</div>
<p class="symbols"><var>v</var> — м/с; <var>C</var> — окружность, м; <var>n</var><sub>кол</sub> — об/мин.</p>
<h3>Каденс</h3>
<div class="formula"><var>n</var> = <span class="frac"><span class="num"><var>n</var><sub>кол</sub></span><span class="den"><var>i</var></span></span></div>
<p class="symbols"><var>n</var> — каденс, об/мин; <var>n</var><sub>кол</sub> — обороты колеса.</p>
<h3>Скорость по каденсу</h3>
<div class="formula"><var>V</var> = <span class="frac"><span class="num"><var>n</var> · <var>i</var> · <var>C</var> · 60</span><span class="den">1000</span></span></div>
<p class="symbols"><var>n</var> — каденс; <var>C</var> — м; <var>V</var> — км/ч.</p>
<h3>Расстояние за оборот шатунов</h3>
<div class="formula"><var>D</var> = <var>C</var> · <var>i</var></div>
<p class="symbols"><var>D</var> — м; <var>C</var> — окружность, м.</p>
<h3>Окружность по диаметру</h3>
<div class="formula"><var>C</var> = <var>π</var> · <var>d</var></div>
<p class="symbols"><var>d</var> — наружный диаметр колеса.</p>
</section>
<!-- 8. ДИСКЛЕЙМЕР -->
<section>
<h2>Дисклеймер и ограничения</h2>
<p><strong>Все значения — кинематическая оценка.</strong> Калькулятор рассчитывает теоретические соотношения оборотов, а не реально достижимую скорость.</p>
<ul>
<li>Скорость рассчитана для заданной окружности колеса. Фактическая окружность качения зависит от давления, ширины обода, нагрузки и модели покрышки.</li>
<li>Не учитываются мощность велосипедиста, уклон, ветер, сопротивление воздуха и качению.</li>
<li>Потери в трансмиссии (цепь, переключатель, втулки) не моделируются.</li>
<li>Модель предполагает жёсткую связь шатунов и колеса без проскальзывания — справедливо для обычной цепной передачи.</li>
<li>Диапазон 70–100 об/мин — типичный ориентир, но оптимальный каденс зависит от подготовки, рельефа, нагрузки и стиля езды.</li>
<li>Ограничения конкретной трансмиссии (перекос цепи, ёмкость переключателя, совместимость звёзд) не учитываются.</li>
<li>Значения в таблицах — для идеальной кинематики; на практике возможны отклонения из‑за износа, трения и проскальзывания.</li>
</ul>
</section>
</div>
</div>
<script src="js/cadence.js"></script>
</body>
</html>
```
JS cadence.js — как в предыдущем ответе (без изменений).
---
wheelcalc.html (полный)
```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Калькулятор колёс велосипеда</title>
<link rel="stylesheet" href="css/calculators.css">
</head>
<body>
<div class="container">
<div class="calculator">
<h1>Калькулятор колёс велосипеда</h1>
<p class="subtitle">Расчёт геометрии колеса, наружного диаметра, окружности, скорости, передаточного отношения и оценка давления.</p>
<!-- 1. ГЕОМЕТРИЯ -->
<section>
<h2>1. Геометрия колеса</h2>
<div class="input-group">
<label for="wheelMethod">Способ ввода размера</label>
<select id="wheelMethod" onchange="updateWheelMethod()">
<option value="etrto">По ISO / ETRTO</option>
<option value="inch">По дюймовому размеру</option>
<option value="manual">Вручную (BSD + высота)</option>
</select>
<p>ETRTO — стандартный способ; остальные — для удобства.</p>
</div>
<div class="input-group">
<label for="bsd">Посадочный диаметр BSD, мм</label>
<select id="bsd" onchange="calculateWheel()">
<option value="622" selected>622 мм — 700C / 29"</option>
<option value="584">584 мм — 650B / 27,5"</option>
<option value="559">559 мм — 26"</option>
<option value="507">507 мм — 24"</option>
<option value="406">406 мм — 20" / BMX</option>
<option value="451">451 мм — 20" (вариант)</option>
<option value="305">305 мм — 16"</option>
<option value="custom">Другой</option>
</select>
<p>Диаметр посадочного места борта покрышки.</p>
</div>
<div class="input-group">
<label for="customBSD">Другой BSD, мм</label>
<input id="customBSD" type="number" min="100" max="800" value="622">
<p>Для нестандартных размеров.</p>
</div>
<div class="input-group">
<label for="tireWidth">Ширина покрышки по маркировке, мм</label>
<input id="tireWidth" type="number" min="15" max="150" step="1" value="40">
<p>Как указано на боковине.</p>
</div>
<div class="input-group">
<label for="tireHeight">Фактическая высота покрышки, мм</label>
<input id="tireHeight" type="number" min="10" max="150" step="1" value="40">
<p>От посадочного диаметра до наружной поверхности.</p>
</div>
<div class="input-group">
<label for="measuredCircumference">Измеренная окружность качения, мм</label>
<input id="measuredCircumference" type="number" min="500" max="3000" step="1" value="">
<p>Если пусто — используется геометрическая оценка.</p>
</div>
<div class="actions">
<button onclick="calculateWheel()">Рассчитать колесо</button>
</div>
<h3>Результаты</h3>
<div class="results">
<div class="result-row"><span>BSD</span><output id="outBSD">—</output></div>
<div class="result-row"><span>Наружный диаметр</span><output id="outDiameter">—</output></div>
<div class="result-row"><span>Окружность</span><output id="outCircumference">—</output></div>
<div class="result-row"><span>Радиус</span><output id="outRadius">—</output></div>
<div class="result-row"><span>Длина оборота</span><output id="outRollout">—</output></div>
<div class="result-row"><span>Источник окружности</span><output id="circumferenceSource">—</output></div>
<div class="result-row"><span>Обозначение</span><output id="sizeLabel">—</output></div>
</div>
</section>
<!-- 2. ETRTO -->
<section>
<h2>2. Разбор ETRTO</h2>
<div class="input-group">
<label for="etrtoInput">Маркировка, например 40-622</label>
<input id="etrtoInput" type="text" value="40-622">
<p>Формат: ширина-BSD.</p>
</div>
<div class="actions">
<button onclick="parseETRTO()">Разобрать</button>
</div>
<div class="results">
<div class="result-row"><span>Ширина</span><output id="parsedWidth">—</output></div>
<div class="result-row"><span>BSD</span><output id="parsedBSD">—</output></div>
<div class="result-row"><span>Пояснение</span><output id="etrtoExplanation">—</output></div>
</div>
</section>
<!-- 3. ТРАНСМИССИЯ -->
<section>
<h2>3. Трансмиссия</h2>
<div class="input-group">
<label for="frontTeeth">Передняя звезда, зубьев</label>
<input id="frontTeeth" type="number" min="1" max="100" value="40">
<p>Число зубьев передней звезды.</p>
</div>
<div class="input-group">
<label for="rearTeeth">Задняя звезда, зубьев</label>
<input id="rearTeeth" type="number" min="1" max="60" value="11">
<p>Число зубьев задней звезды.</p>
</div>
<div class="input-group">
<label for="cadence">Каденс, об/мин</label>
<input id="cadence" type="number" min="1" max="250" value="90">
<p>Обороты шатунов в минуту.</p>
</div>
<div class="input-group">
<label for="targetSpeed">Скорость, км/ч</label>
<input id="targetSpeed" type="number" min="0" max="150" step="0.1" value="30">
<p>Для обратного расчёта каденса.</p>
</div>
<div class="actions">
<button onclick="calculateDrivetrain()">Рассчитать трансмиссию</button>
</div>
<div class="results">
<div class="result-row"><span>Передаточное отношение</span><output id="gearRatio">—</output></div>
<div class="result-row"><span>Развитие</span><output id="gearDevelopment">—</output></div>
<div class="result-row"><span>Скорость при каденсе</span><output id="calculatedSpeed">—</output></div>
<div class="result-row"><span>Каденс при скорости</span><output id="calculatedCadence">—</output></div>
<div class="result-row"><span>Обороты колеса в минуту</span><output id="wheelRPM">—</output></div>
<div class="result-row"><span>Расстояние за 100 оборотов</span><output id="distance100">—</output></div>
</div>
</section>
<!-- 4. ДАВЛЕНИЕ -->
<section>
<h2>4. Оценка давления</h2>
<div class="input-group">
<label for="totalMass">Общая масса, кг</label>
<input id="totalMass" type="number" min="20" max="250" step="0.5" value="90">
<p>Велосипедист + велосипед + багаж.</p>
</div>
<div class="input-group">
<label for="frontWidth">Ширина передней покрышки, мм</label>
<input id="frontWidth" type="number" min="15" max="150" value="40">
<p>По маркировке на боковине.</p>
</div>
<div class="input-group">
<label for="rearWidth">Ширина задней покрышки, мм</label>
<input id="rearWidth" type="number" min="15" max="150" value="40">
<p>По маркировке на боковине.</p>
</div>
<div class="input-group">
<label for="frontLoad">Доля массы на переднее колесо, %</label>
<input id="frontLoad" type="number" min="20" max="60" value="45">
<p>Обычно 40–50%.</p>
</div>
<div class="input-group">
<label for="surface">Тип поверхности</label>
<select id="surface">
<option value="smooth">Гладкий асфальт</option>
<option value="rough">Грубый асфальт</option>
<option value="gravel">Гравий</option>
<option value="dirt">Грунт</option>
</select>
<p>Влияет на поправку давления.</p>
</div>
<div class="input-group">
<label for="pressureSystem">Система</label>
<select id="pressureSystem">
<option value="tube">С камерой</option>
<option value="tubeless">Бескамерная</option>
</select>
<p>Бескамерная обычно допускает чуть более низкое давление.</p>
</div>
<div class="input-group">
<label for="maxTirePressure">Макс. давление покрышки, bar</label>
<input id="maxTirePressure" type="number" min="1" max="12" step="0.1" value="5">
<p>С боковины покрышки.</p>
</div>
<div class="input-group">
<label for="maxRimPressure">Макс. давление обода, bar (0 если неизвестно)</label>
<input id="maxRimPressure" type="number" min="0" max="12" step="0.1" value="0">
<p>Из документации обода. Неизвестное ограничение нужно проверить.</p>
</div>
<div class="actions">
<button onclick="estimatePressure()">Оценить давление</button>
</div>
<div class="results">
<div class="result-row"><span>Нагрузка на переднее</span><output id="frontLoadKg">—</output></div>
<div class="result-row"><span>Нагрузка на заднее</span><output id="rearLoadKg">—</output></div>
<div class="result-row"><span>Давление спереди</span><output id="frontPressure">—</output></div>
<div class="result-row"><span>Давление сзади</span><output id="rearPressure">—</output></div>
<div class="result-row"><span>Предупреждения</span><output id="pressureWarnings">—</output></div>
</div>
</section>
<!-- 5. ФОРМУЛЫ -->
<section>
<h2>5. Формулы и расшифровка символов</h2>
<h3>Наружный диаметр</h3>
<div class="formula"><var>D</var> = BSD + 2<var>h</var><sub>tire</sub></div>
<p class="symbols"><var>h</var><sub>tire</sub> — высота покрышки, мм.</p>
<h3>Окружность</h3>
<div class="formula"><var>C</var> = <var>π</var> · <var>D</var></div>
<p class="symbols"><var>D</var> — наружный диаметр; <var>π</var> ≈ 3,14159.</p>
<h3>Радиус</h3>
<div class="formula"><var>R</var> = <span class="frac"><span class="num"><var>D</var></span><span class="den">2</span></span></div>
<p class="symbols">Половина диаметра.</p>
<h3>Передаточное отношение</h3>
<div class="formula"><var>i</var> = <span class="frac"><span class="num"><var>Z</var><sub>перед</sub></span><span class="den"><var>Z</var><sub>зад</sub></span></span></div>
<p class="symbols"><var>Z</var> — число зубьев.</p>
<h3>Развитие</h3>
<div class="formula"><var>d</var> = <var>C</var> · <var>i</var></div>
<p class="symbols"><var>d</var> — расстояние за оборот шатунов, м.</p>
<h3>Скорость по каденсу</h3>
<div class="formula"><var>V</var> = <span class="frac"><span class="num"><var>C</var> · <var>i</var> · <var>n</var> · 60</span><span class="den">1000</span></span></div>
<p class="symbols"><var>n</var> — каденс, об/мин; <var>V</var> — км/ч.</p>
<h3>Каденс по скорости</h3>
<div class="formula"><var>n</var> = <span class="frac"><span class="num"><var>V</var> · 1000</span><span class="den"><var>C</var> · <var>i</var> · 60</span></span></div>
<p class="symbols">Обратная к предыдущей.</p>
</section>
<!-- 6. ДИСКЛЕЙМЕР -->
<section>
<h2>Дисклеймер и ограничения</h2>
<p><strong>Все значения — теоретическая оценка.</strong> Фактическая геометрия колеса, скорость и давление зависят от параметров, которые калькулятор не учитывает.</p>
<ul>
<li>Наружный диаметр <var>D</var> = BSD + 2·высота — приближённая формула. Реальный диаметр зависит от модели покрышки, ширины обода, давления и нагрузки.</li>
<li>Предположение «высота покрышки = ширине» не универсально. У разных моделей высота отличается на несколько мм при одинаковой ширине.</li>
<li>Окружность качения лучше измерять накатом под нагрузкой. Геометрическая оценка может отличаться от реальной на 1–3%.</li>
<li>Скорость и каденс рассчитываются для заданной окружности и передаточного отношения. Реальная скорость зависит от мощности, уклона, ветра и сопротивления.</li>
<li>Оценка давления — эвристика, а не валидированная модель. Не учитывает конструкцию покрышки (TPI, компаунд, каркас), профиль обода, стиль езды.</li>
<li>Ограничения производителя покрышки и обода по давлению имеют приоритет. Не превышайте максимальное давление, указанное на боковине.</li>
<li>Бескамерные системы чувствительны к совместимости покрышки и обода, герметику, ленте и давлению. Оценка не подтверждает совместимость.</li>
<li>ETRTO задаёт только ширину и посадочный диаметр. По нему нельзя точно узнать наружный диаметр и окружность конкретной покрышки.</li>
<li>Давление, оптимальное для вас, зависит от веса, стиля езды, покрытия, температуры. Используйте оценку как отправную точку, а не как рекомендацию.</li>
</ul>
</section>
</div>
</div>
<script src="js/wheelcalc.js"></script>
</body>
</html>
```
JS wheelcalc.js — как в предыдущем ответе (без изменений).
---
Проверка: что должно быть на странице
Для cadence.html — 8 секций: параметры, результаты, обратный расчёт, подбор передачи, таблица передач, сравнение каденсов, формулы, дисклеймер. Кнопки: «Рассчитать каденс», «Сбросить», «Рассчитать скорость», «Подобрать передачу», «Построить таблицу передач», «Сравнить скорости».
Для wheelcalc.html — 6 секций: геометрия, ETRTO, трансмиссия, давление, формулы, дисклеймер. Кнопки: «Рассчитать колесо», «Разобрать», «Рассчитать трансмиссию», «Оценить давление».
Если какие-то кнопки или секции всё ещё не отображаются — скорее всего, в css/calculators.css отсутствует блок .symbols (это только косметика, но проверьте, что файл подключён). И убедитесь, что js/cadence.js и js/wheelcalc.js лежат рядом с HTML в папке js/.