@jjlmoya/utils-diy 1.15.0 → 1.17.0

package/src/tool/stairCalculator/i18n/ru.ts

@@ -1,4 +1,4 @@
-import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { StairCalculatorUI } from '../ui';
 import { bibliography } from '../bibliography';
@@ -14,7 +14,7 @@ const faqData = [
   },
   {
     question: 'Какова максимальная высота ступени?',
-    answer: 'В жилых домах рекомендуется не превышать 18–19 см. Для общественных мест максимум по нормам обычно составляет 17,5 см. Более высокие ступени сильнее утомляют и могут быть опасны.',
+    answer: 'В жилых домах рекомендуется не превышать 18-19 см. Для общественных мест максимум по нормам обычно составляет 17,5 см. Более высокие ступени сильнее утомляют и могут быть опасны.',
   },
   {
     question: 'Как рассчитать, если мало места?',
@@ -33,7 +33,7 @@ const faqData = [
 const howToData = [
   { name: 'Измерить перепад высот', text: 'Измерьте общий перепад (H) от чистового пола нижнего уровня до чистового пола верхнего уровня. Это базовый параметр для всех расчетов.' },
   { name: 'Ввести доступную длину', text: 'Опционально: если у вас есть ограничения по месту, введите доступную горизонтальную длину. Используйте 0 для свободного расчета.' },
-  { name: 'Настроить количество ступеней', text: 'Калькулятор предложит начальное количество, но вы можете его изменить. Следите за индикатором Блонделя: он должен быть зеленым (62–64 см).' },
+  { name: 'Настроить количество ступеней', text: 'Калькулятор предложит начальное количество, но вы можете его изменить. Следите за индикатором Блонделя: он должен быть зеленым (62-64 см).' },
   { name: 'Определить параметры объекта', text: 'Укажите толщину плиты, отделку, марку бетона и ширину лестницы. Эти данные влияют на итоговый расчет материалов.' },
 ];
 
@@ -82,17 +82,17 @@ export const content: ToolLocaleContent<StairCalculatorUI> = {
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [
     { type: 'title', text: 'Геометрическое проектирование лестниц: закон Блонделя', level: 2 },
-    { type: 'paragraph', html: 'Комфорт лестницы зависит от длины человеческого шага. При подъеме или спуске тело ожидает предсказуемого ритма. Закон Блонделя гласит, что 2 высоты подступенка + 1 ширина проступи = 62–64 см — это стандарт, гарантирующий максимальный комфорт и безопасность.' },
+    { type: 'paragraph', html: 'Комфорт лестницы зависит от длины человеческого шага. При подъеме или спуске тело ожидает предсказуемого ритма. Закон Блонделя гласит, что 2 высоты подступенка + 1 ширина проступи = 62-64 см - это стандарт, гарантирующий максимальный комфорт и безопасность.' },
     { type: 'title', text: 'Учет конструкций и материалов', level: 3 },
     { type: 'paragraph', html: 'Для профессионального исполнения жизненно важно учитывать бетонную плиту основания. Игнорирование этого объема приведет к нехватке материала при заказе. Калькулятор автоматически включает этот расчет.' },
     { type: 'title', text: 'Разметка и накопленная ошибка', level: 3 },
-    { type: 'paragraph', html: 'В строительстве главный враг — миллиметровая ошибка. Если вы измеряете каждую ступень отдельно, сумма маленьких погрешностей может привести к тому, что последняя ступень окажется на 5 см выше или ниже первой.' },
+    { type: 'paragraph', html: 'В строительстве главный враг - миллиметровая ошибка. Если вы измеряете каждую ступень отдельно, сумма маленьких погрешностей может привести к тому, что последняя ступень окажется на 5 см выше или ниже первой.' },
   ],
   ui: {
     labelGeometry: 'Геометрия и габариты',
     labelTotalHeight: 'Общая высота (H)',
     labelAvailableLength: 'Доступная длина (L)',
-    labelAvailableLengthHint: '0 — без ограничений.',
+    labelAvailableLengthHint: '0 - без ограничений.',
     labelNumSteps: 'Кол-во ступеней',
     labelOptimize: 'Оптимизация (18см)',
     labelWork: 'Строительство и отделка',

package/src/tool/stairCalculator/stair-calculator.css

@@ -72,6 +72,7 @@
   }
 
   .sc-stat-box {
+    min-width: 0;
     background: rgba(255, 255, 255, 0.5);
     padding: 0.75rem 0.5rem;
     border-radius: 1.25rem;
@@ -93,9 +94,12 @@
   }
 
   .sc-stat-value {
+    display: inline-block;
+    max-width: 100%;
     font-size: 1.5rem;
     font-weight: 800;
     color: var(--sc-neutral);
+    overflow-wrap: anywhere;
   }
 
   .sc-stat-unit {
@@ -317,7 +321,7 @@
 
   .sc-table-wrapper {
     max-height: 220px;
-    overflow-y: auto;
+    overflow: auto;
   }
 
   .sc-table-wrapper table {
@@ -370,6 +374,7 @@
 
   .sc-material-row {
     display: flex;
+    gap: 0.75rem;
     justify-content: space-between;
     align-items: baseline;
     padding-bottom: 0.4rem;
@@ -384,6 +389,7 @@
   .sc-material-row strong {
     font-size: 1.15rem;
     color: var(--sc-primary);
+    overflow-wrap: anywhere;
   }
 
   .sc-actions-row {
@@ -459,20 +465,85 @@
   }
 
   @media (max-width: 480px) {
+    .sc-root {
+      padding: 0 0.5rem;
+    }
+
+    .sc-card {
+      border-radius: 1rem;
+    }
+
+    .sc-sidebar,
+    .sc-main {
+      padding: 1rem;
+    }
+
+    .sc-input-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .sc-step-btn {
+      width: 38px;
+      height: 38px;
+      font-size: 1.35rem;
+    }
+
+    .sc-stepper input {
+      height: 38px;
+      font-size: 1rem;
+    }
+
+    .sc-select {
+      font-size: 0.9rem;
+      padding: 0.7rem 2.5rem 0.7rem 0.85rem;
+    }
+
     .sc-results-header {
-      gap: 0.4rem;
+      grid-template-columns: 1fr;
+      gap: 0.5rem;
     }
 
     .sc-stat-box {
-      padding: 0.4rem;
-      border-radius: 1rem;
+      display: grid;
+      grid-template-columns: 1fr auto auto;
+      gap: 0.35rem;
+      align-items: baseline;
+      padding: 0.65rem 0.75rem;
+      text-align: left;
+      border-radius: 0.875rem;
     }
 
     .sc-stat-value {
       font-size: 1.1rem;
     }
 
+    .sc-stat-unit {
+      font-size: 0.7rem;
+    }
+
+    .sc-visualizer-container {
+      min-height: 210px;
+      padding: 0.5rem;
+      border-radius: 1rem;
+    }
+
+    #sc-stair-svg {
+      min-width: 360px;
+    }
+
+    .sc-table-card,
+    .sc-materials-card {
+      padding: 1rem;
+      border-radius: 1rem;
+    }
+
+    .sc-material-row {
+      align-items: flex-start;
+      flex-direction: column;
+      gap: 0.25rem;
+    }
+
     .sc-material-row strong {
       font-size: 1rem;
     }
-  }
+  }

package/src/tool/thermalExpansionCalculator/bibliography.ts

@@ -1,16 +1,16 @@
-import type { BibliographyEntry } from '../../types';
+import type { BibliographyEntry } from '../../types';
 
 export const bibliography: BibliographyEntry[] = [
   {
-    name: 'Coefficient of Thermal Expansion — Engineering Toolbox',
+    name: 'Coefficient of Thermal Expansion - Engineering Toolbox',
     url: 'https://www.engineeringtoolbox.com/linear-expansion-coefficients-d_95.html',
   },
   {
-    name: 'Thermal expansion and temperature — Britannica',
+    name: 'Thermal expansion and temperature - Britannica',
     url: 'https://www.britannica.com/science/thermal-expansion',
   },
   {
-    name: 'Linear Thermal Expansion — Physics Hypertextbook',
+    name: 'Linear Thermal Expansion - Physics Hypertextbook',
     url: 'https://physics.info/expansion/',
   },
 ];

package/src/tool/thermalExpansionCalculator/i18n/en.ts

@@ -1,4 +1,4 @@
-import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { ThermalExpansionCalculatorUI } from '../ui';
 import { bibliography } from '../bibliography';
@@ -97,7 +97,7 @@ export const content: ToolLocaleContent<ThermalExpansionCalculatorUI> = {
     { type: 'title', text: 'What is Thermal Expansion and How Does It Affect Structures', level: 2 },
     {
       type: 'paragraph',
-      html: '<strong>Thermal expansion</strong> is the physical process by which a material increases its length in response to a rise in temperature. At the microscopic level, particles vibrate with more energy and require a greater average spacing between them. In construction, this phenomenon is not a curiosity — it is a force that can crack concrete, deform steel beams and buckle railway tracks.',
+      html: '<strong>Thermal expansion</strong> is the physical process by which a material increases its length in response to a rise in temperature. At the microscopic level, particles vibrate with more energy and require a greater average spacing between them. In construction, this phenomenon is not a curiosity - it is a force that can crack concrete, deform steel beams and buckle railway tracks.',
     },
     { type: 'title', text: 'The Linear Expansion Formula', level: 3 },
     {

package/src/tool/thermalExpansionCalculator/i18n/fr.ts

@@ -1,4 +1,4 @@
-import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { ThermalExpansionCalculatorUI } from '../ui';
 import { bibliography } from '../bibliography';
@@ -97,14 +97,14 @@ export const content: ToolLocaleContent<ThermalExpansionCalculatorUI> = {
     { type: 'title', text: 'Qu\'est-ce que la Dilatation Thermique et comment affecte-t-elle les Structures', level: 2 },
     {
       type: 'paragraph',
-      html: 'La <strong>dilatation thermique</strong> est le processus physique par lequel un matériau augmente sa longueur en réponse à une élévation de température. À l\'échelle microscopique, les particules vibrent avec plus d\'énergie et nécessitent un espacement moyen plus grand entre elles. En construction, ce phénomène n\'est pas une curiosité : c\'est une force qui peut fissurer le béton, déformer des poutres en acier et faire se tordre les rails d\'un chemin de fer.',
+      html: 'La <strong>dilatation thermique</strong> est le processus physique par lequel un matériau augmente sa longueur en réponse à une élévation de température. À l\'échelle microscopique, les particules vibrent avec plus d\'énergie et nécessitent un espacement moyen plus grand entre elles. En construction, ce phénomène n\'est pas une curiosité: c\'est une force qui peut fissurer le béton, déformer des poutres en acier et faire se tordre les rails d\'un chemin de fer.',
     },
     { type: 'title', text: 'La Formule de la Dilatation Linéaire', level: 3 },
     {
       type: 'card',
       icon: 'mdi:math-log',
       title: 'Formule de Dilatation Linéaire',
-      html: '<p>L\'expansion d\'un élément structurel se calcule avec : <code>ΔL = L₀ · α · ΔT</code>. Où <strong>ΔL</strong> est l\'allongement total, <strong>L₀</strong> est la longueur originale, <strong>α</strong> est le coefficient de dilatation du matériau (en °C⁻¹) et <strong>ΔT</strong> est la différence de température. Cette formule est à la base du dimensionnement des joints de dilatation dans les ponts, les toitures et les façades.</p>',
+      html: '<p>L\'expansion d\'un élément structurel se calcule avec: <code>ΔL = L₀ · α · ΔT</code>. Où <strong>ΔL</strong> est l\'allongement total, <strong>L₀</strong> est la longueur originale, <strong>α</strong> est le coefficient de dilatation du matériau (en °C⁻¹) et <strong>ΔT</strong> est la différence de température. Cette formule est à la base du dimensionnement des joints de dilatation dans les ponts, les toitures et les façades.</p>',
     },
     { type: 'title', text: 'Coefficients de Dilatation par Matériau', level: 3 },
     {

package/src/tool/thermalExpansionCalculator/i18n/ru.ts

@@ -1,4 +1,4 @@
-import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { ThermalExpansionCalculatorUI } from '../ui';
 import { bibliography } from '../bibliography';
@@ -18,7 +18,7 @@ const faqData = [
   },
   {
     question: 'Расширяется ли дерево одинаково во всех направлениях?',
-    answer: 'Нет. Дерево — анизотропный материал. Оно очень мало расширяется вдоль волокон, но значительно в поперечном направлении (в ширину и толщину).',
+    answer: 'Нет. Дерево - анизотропный материал. Оно очень мало расширяется вдоль волокон, но значительно в поперечном направлении (в ширину и толщину).',
   },
   {
     question: 'Какую температуру использовать в качестве начальной?',
@@ -78,9 +78,9 @@ export const content: ToolLocaleContent<ThermalExpansionCalculatorUI> = {
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [
     { type: 'title', text: 'Что такое тепловое расширение и как оно влияет на конструкции', level: 2 },
-    { type: 'paragraph', html: '<strong>Тепловое расширение</strong> — это физический процесс, при котором материал увеличивает свою длину в ответ на повышение температуры. В строительстве это явление — сила, способная разрушить бетон, деформировать стальные балки и искривить железнодорожные рельсы.' },
+    { type: 'paragraph', html: '<strong>Тепловое расширение</strong> - это физический процесс, при котором материал увеличивает свою длину в ответ на повышение температуры. В строительстве это явление - сила, способная разрушить бетон, деформировать стальные балки и искривить железнодорожные рельсы.' },
     { type: 'title', text: 'Формула линейного расширения', level: 3 },
-    { type: 'card', icon: 'mdi:math-log', title: 'Формула линейного расширения', html: '<p>Расширение структурного элемента рассчитывается по формуле: <code>ΔL = L₀ · α · ΔT</code>. Где <strong>ΔL</strong> — общий рост, <strong>L₀</strong> — исходная длина, <strong>α</strong> — коэффициент расширения материала (в °C⁻¹), а <strong>ΔT</strong> — разница температур.</p>' },
+    { type: 'card', icon: 'mdi:math-log', title: 'Формула линейного расширения', html: '<p>Расширение структурного элемента рассчитывается по формуле: <code>ΔL = L₀ · α · ΔT</code>. Где <strong>ΔL</strong> - общий рост, <strong>L₀</strong> - исходная длина, <strong>α</strong> - коэффициент расширения материала (в °C⁻¹), а <strong>ΔT</strong> - разница температур.</p>' },
   ],
   ui: {
     configTitle: 'Настройка',

package/src/tool/twoStrokeMixtureCalculator/bibliography.astro

@@ -0,0 +1,6 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { bibliography } from './bibliography';
+---
+
+<SharedBibliography links={bibliography} />

package/src/tool/twoStrokeMixtureCalculator/bibliography.ts

@@ -0,0 +1,12 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'Two-Stroke Engine Fuel Mixture Ratios',
+    url: 'https://en.wikipedia.org/wiki/Two-stroke_engine',
+  },
+  {
+    name: 'Gasoline and Oil Mix Ratios for Small Engines',
+    url: 'https://homelivinghandbook.com/how-much-oil-should-you-mix-with-gas-for-small-engine-tools',
+  },
+];

package/src/tool/twoStrokeMixtureCalculator/component.astro

@@ -0,0 +1,266 @@
+---
+import { Icon } from 'astro-icon/components';
+import type { TwoStrokeMixtureCalculatorUI } from './ui';
+
+interface Props { ui?: TwoStrokeMixtureCalculatorUI; }
+const { ui } = Astro.props;
+const t = (ui ?? {}) as TwoStrokeMixtureCalculatorUI;
+---
+
+<div class="tsmc-root" data-tsmc-root data-ui={JSON.stringify(t)}>
+  <div class="tsmc-mission-selector">
+    <button class="tsmc-mission-btn active" data-mission="fuel">
+      <Icon name="mdi:gas-cylinder" />
+      <span>{t.copyTextFuel}</span>
+    </button>
+    <button class="tsmc-mission-btn" data-mission="oil">
+      <Icon name="mdi:beaker-outline" />
+      <span>{t.copyTextOil}</span>
+    </button>
+  </div>
+
+  <div class="tsmc-container">
+    <div class="tsmc-input-section">
+      <label id="tsmc-volume-label" class="tsmc-section-label">{t.labelVolume}</label>
+
+      <div class="tsmc-slider-container">
+        <input
+          type="range"
+          id="tsmc-slider"
+          min="1"
+          max="50"
+          step="1"
+          value="5"
+          class="tsmc-slider"
+        >
+        <div class="tsmc-slider-value-display">
+          <span id="tsmc-slider-value">5</span><span id="tsmc-slider-unit" class="tsmc-unit">L</span>
+        </div>
+      </div>
+
+      <div class="tsmc-quick-buttons">
+        <button class="tsmc-quick-btn fuel-btn" data-volume="2">2L</button>
+        <button class="tsmc-quick-btn fuel-btn active" data-volume="5">5L</button>
+        <button class="tsmc-quick-btn fuel-btn" data-volume="10">10L</button>
+        <button class="tsmc-quick-btn fuel-btn" data-volume="20">20L</button>
+
+        <button class="tsmc-quick-btn oil-btn hidden" data-volume="125">125ml</button>
+        <button class="tsmc-quick-btn oil-btn hidden" data-volume="250">250ml</button>
+        <button class="tsmc-quick-btn oil-btn hidden" data-volume="500">500ml</button>
+        <button class="tsmc-quick-btn oil-btn hidden" data-volume="1000">1L</button>
+      </div>
+    </div>
+
+    <div class="tsmc-ratio-section">
+      <label class="tsmc-section-label">{t.labelPresets}</label>
+      <div class="tsmc-ratio-cards">
+        <button class="tsmc-ratio-card" data-ratio="25">
+          <span class="tsmc-ratio-value">1:25</span>
+          <span class="tsmc-ratio-desc">{t.ratio25Desc}</span>
+        </button>
+        <button class="tsmc-ratio-card" data-ratio="33">
+          <span class="tsmc-ratio-value">1:33</span>
+          <span class="tsmc-ratio-desc">{t.ratio33Desc}</span>
+        </button>
+        <button class="tsmc-ratio-card active" data-ratio="40">
+          <span class="tsmc-ratio-value">1:40</span>
+          <span class="tsmc-ratio-desc">{t.ratio40Desc}</span>
+        </button>
+        <button class="tsmc-ratio-card" data-ratio="50">
+          <span class="tsmc-ratio-value">1:50</span>
+          <span class="tsmc-ratio-desc">{t.ratio50Desc}</span>
+        </button>
+      </div>
+    </div>
+
+    <div class="tsmc-mega-result">
+      <div class="tsmc-result-label">{t.labelOilRequired}</div>
+      <div class="tsmc-result-display">
+        <span id="tsmc-result-value" class="tsmc-result-big">--</span>
+        <span id="tsmc-result-unit" class="tsmc-result-unit">ml</span>
+      </div>
+
+      <svg id="tsmc-container-visual" class="tsmc-container-visual" viewBox="0 0 200 240">
+        <rect x="65" y="30" width="70" height="12" fill="#64748b" rx="3"/>
+        <rect x="70" y="22" width="60" height="8" fill="#475569" rx="2"/>
+        <path d="M 50 42 Q 45 50 45 70 L 45 160 Q 45 175 60 180 L 140 180 Q 155 175 155 160 L 155 70 Q 155 50 150 42 Z"
+              fill="none" stroke="#64748b" stroke-width="3" stroke-linejoin="round"/>
+        <rect id="tsmc-fuel-fill" x="50" y="160" width="100" height="0" fill="#fbbf24"/>
+        <rect id="tsmc-oil-fill" x="50" y="160" width="100" height="0" fill="#dc2626"/>
+        <text id="tsmc-ratio-display" x="100" y="105" text-anchor="middle" dominant-baseline="middle"
+              font-size="20" font-weight="bold" fill="#1e293b" />
+      </svg>
+
+      <button id="tsmc-share" class="tsmc-share-btn" title="Share">
+        <Icon name="mdi:share-variant" />
+      </button>
+    </div>
+  </div>
+</div>
+
+<style>
+  @import './two-stroke-fuel-mixture-calculator.css';
+</style>
+
+<script>
+  import { calculateMixture } from './logic';
+
+  const root = document.querySelector('.tsmc-root') as HTMLElement;
+  const ui = root ? JSON.parse(root.dataset.ui || '{}') : {};
+
+  const slider = document.getElementById('tsmc-slider') as HTMLInputElement;
+  const missionBtns = document.querySelectorAll('.tsmc-mission-btn');
+  const sliderUnit = document.getElementById('tsmc-slider-unit')!;
+  const sliderValue = document.getElementById('tsmc-slider-value')!;
+  const quickBtns = document.querySelectorAll('.tsmc-quick-btn');
+  const fuelBtns = document.querySelectorAll('.fuel-btn');
+  const oilBtns = document.querySelectorAll('.oil-btn');
+  const ratioCards = document.querySelectorAll('.tsmc-ratio-card');
+  const resultLabel = document.querySelector('.tsmc-result-label')!;
+  const resultValue = document.getElementById('tsmc-result-value')!;
+  const resultUnit = document.getElementById('tsmc-result-unit')!;
+  const fuelFill = document.getElementById('tsmc-fuel-fill')!;
+  const oilFill = document.getElementById('tsmc-oil-fill')!;
+  const ratioDisplay = document.getElementById('tsmc-ratio-display')!;
+  const shareBtn = document.getElementById('tsmc-share')!;
+  const volumeLabel = document.getElementById('tsmc-volume-label')!;
+  const container = document.querySelector('.tsmc-container')!;
+
+  const params = new URLSearchParams(window.location.search);
+  let currentMission: 'fuel' | 'oil' = (params.get('mode') as 'fuel' | 'oil') || 'fuel';
+  let currentVolume = parseFloat(params.get('volume') || '5');
+  let currentRatio = parseInt(params.get('ratio') || '40');
+
+  function setFuelMode(skipSliderUpdate: boolean) {
+    container.classList.remove('tsmc-oil-mode');
+    slider.min = '1';
+    slider.max = '50';
+    slider.step = '1';
+    if (!skipSliderUpdate) slider.value = '5';
+    sliderUnit.textContent = 'L';
+    volumeLabel.textContent = ui.labelVolume || 'Volume';
+    resultLabel.textContent = ui.labelOilRequired || 'Oil Required';
+    fuelBtns.forEach(btn => btn.classList.remove('hidden'));
+    oilBtns.forEach(btn => btn.classList.add('hidden'));
+  }
+
+  function setOilMode(skipSliderUpdate: boolean) {
+    container.classList.add('tsmc-oil-mode');
+    slider.min = '20';
+    slider.max = '1000';
+    slider.step = '10';
+    if (!skipSliderUpdate) slider.value = '125';
+    sliderUnit.textContent = 'ml';
+    volumeLabel.textContent = ui.labelOilRequired || 'Oil';
+    resultLabel.textContent = ui.labelFuelVolume || 'Fuel Required';
+    fuelBtns.forEach(btn => btn.classList.add('hidden'));
+    oilBtns.forEach(btn => btn.classList.remove('hidden'));
+  }
+
+  function setMission(mission: 'fuel' | 'oil', skipSliderUpdate = false) {
+    currentMission = mission;
+    missionBtns.forEach(btn => {
+      btn.classList.toggle('active', (btn as HTMLElement).getAttribute('data-mission') === mission);
+    });
+    if (mission === 'fuel') {
+      setFuelMode(skipSliderUpdate);
+    } else {
+      setOilMode(skipSliderUpdate);
+    }
+    sliderValue.textContent = currentVolume.toString();
+  }
+
+  function setVolume(volume: number) {
+    currentVolume = volume;
+    slider.value = String(volume);
+    sliderValue.textContent = volume.toFixed(1);
+    quickBtns.forEach(btn => {
+      btn.classList.toggle('active', parseFloat((btn as HTMLElement).getAttribute('data-volume') || '0') === volume);
+    });
+    calculate();
+  }
+
+  function setRatio(ratio: number) {
+    currentRatio = ratio;
+    ratioCards.forEach(card => {
+      card.classList.toggle('active', parseInt((card as HTMLElement).getAttribute('data-ratio') || '40') === ratio);
+    });
+    calculate();
+  }
+
+  function calculate() {
+    const calc = calculateMixture(currentVolume, currentRatio, ui);
+
+    if (calc.status === 'calculated') {
+      const oilMl = calc.oilRequired * (calc.displayUnit === 'ml' ? 1 : 1000);
+
+      if (oilMl < 1000) {
+        resultValue.textContent = oilMl.toFixed(0);
+        resultUnit.textContent = 'ml';
+      } else if (oilMl % 1000 === 0) {
+        resultValue.textContent = (oilMl / 1000).toFixed(0);
+        resultUnit.textContent = 'L';
+      } else {
+        resultValue.textContent = oilMl.toFixed(0);
+        resultUnit.textContent = 'ml';
+      }
+
+      ratioDisplay.textContent = `1:${currentRatio}`;
+
+      const containerHeight = 120;
+      const oilRatioHeight = (1 / (1 + currentRatio)) * containerHeight;
+
+      fuelFill.setAttribute('y', (160 - containerHeight).toString());
+      fuelFill.setAttribute('height', containerHeight.toString());
+
+      oilFill.setAttribute('y', (160 - oilRatioHeight).toString());
+      oilFill.setAttribute('height', oilRatioHeight.toString());
+    } else {
+      resultValue.textContent = '--';
+      resultUnit.textContent = 'ml';
+      ratioDisplay.textContent = '';
+      fuelFill.setAttribute('height', '0');
+      oilFill.setAttribute('height', '0');
+    }
+  }
+
+  missionBtns.forEach(btn => {
+    btn.addEventListener('click', () => {
+      setMission((btn as HTMLElement).getAttribute('data-mission') as 'fuel' | 'oil');
+    });
+  });
+
+  slider.addEventListener('input', (e) => {
+    setVolume(parseFloat((e.target as HTMLInputElement).value));
+  });
+
+  quickBtns.forEach(btn => {
+    btn.addEventListener('click', () => {
+      setVolume(parseFloat((btn as HTMLElement).getAttribute('data-volume') || '5'));
+    });
+  });
+
+  ratioCards.forEach(card => {
+    card.addEventListener('click', () => {
+      setRatio(parseInt((card as HTMLElement).getAttribute('data-ratio') || '40'));
+    });
+  });
+
+  shareBtn.addEventListener('click', () => {
+    const url = new URL(window.location.href);
+    url.searchParams.set('mode', currentMission);
+    url.searchParams.set('volume', String(currentVolume));
+    url.searchParams.set('ratio', String(currentRatio));
+    navigator.clipboard.writeText(url.toString()).then(() => {
+      const originalHTML = shareBtn.innerHTML;
+      shareBtn.innerHTML = '<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"/></svg>';
+      setTimeout(() => (shareBtn.innerHTML = originalHTML), 1500);
+    });
+  });
+
+  setMission(currentMission, true);
+  setRatio(currentRatio);
+  slider.value = String(currentVolume);
+  sliderValue.textContent = currentVolume.toString();
+  calculate();
+</script>

package/src/tool/twoStrokeMixtureCalculator/entry.ts

@@ -0,0 +1,24 @@
+import type { DiyToolEntry } from '../../types';
+import type { TwoStrokeMixtureCalculatorUI } from './ui';
+
+export const twoStrokeMixtureCalculator: DiyToolEntry<TwoStrokeMixtureCalculatorUI> = {
+  id: 'two-stroke-fuel-mixture-calculator',
+  icons: { bg: 'mdi:gas-cylinder', fg: 'mdi:beaker-outline' },
+  i18n: {
+    de: () => import('./i18n/de').then((m) => m.content),
+    en: () => import('./i18n/en').then((m) => m.content),
+    es: () => import('./i18n/es').then((m) => m.content),
+    fr: () => import('./i18n/fr').then((m) => m.content),
+    id: () => import('./i18n/id').then((m) => m.content),
+    it: () => import('./i18n/it').then((m) => m.content),
+    ja: () => import('./i18n/ja').then((m) => m.content),
+    ko: () => import('./i18n/ko').then((m) => m.content),
+    nl: () => import('./i18n/nl').then((m) => m.content),
+    pl: () => import('./i18n/pl').then((m) => m.content),
+    pt: () => import('./i18n/pt').then((m) => m.content),
+    ru: () => import('./i18n/ru').then((m) => m.content),
+    sv: () => import('./i18n/sv').then((m) => m.content),
+    tr: () => import('./i18n/tr').then((m) => m.content),
+    zh: () => import('./i18n/zh').then((m) => m.content),
+  },
+};