@jjlmoya/utils-diy 1.14.0 → 1.16.0

package/src/tool/twoStrokeMixtureCalculator/two-stroke-fuel-mixture-calculator.css

@@ -0,0 +1,405 @@
+:root {
+  --tsmc-primary: #ea580c;
+  --tsmc-secondary: #fbbf24;
+  --tsmc-accent-oil: #dc2626;
+  --tsmc-neutral: #1e293b;
+  --tsmc-neutral-light: #64748b;
+  --tsmc-border: #e2e8f0;
+  --tsmc-bg: #fff;
+  --tsmc-bg-light: #f8fafc;
+}
+
+:root.theme-dark {
+  --tsmc-primary: #f97316;
+  --tsmc-secondary: #fcd34d;
+  --tsmc-accent-oil: #ef4444;
+  --tsmc-neutral: #f1f5f9;
+  --tsmc-neutral-light: #9ca3af;
+  --tsmc-border: rgba(255, 255, 255, 0.1);
+  --tsmc-bg: #0f172a;
+  --tsmc-bg-light: rgba(15, 23, 42, 0.8);
+}
+
+.tsmc-root {
+  width: 100%;
+  color: var(--tsmc-neutral);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background: var(--tsmc-bg);
+}
+
+.tsmc-mission-selector {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.4rem;
+  padding: 0.75rem;
+  background: var(--tsmc-bg-light);
+  border-bottom: 2px solid var(--tsmc-primary);
+}
+
+.tsmc-mission-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4rem;
+  padding: 0.6rem;
+  border: 2px solid var(--tsmc-border);
+  border-radius: 0.5rem;
+  background: var(--tsmc-bg);
+  color: var(--tsmc-neutral-light);
+  font-weight: 700;
+  font-size: 0.85rem;
+  cursor: pointer;
+  transition: all 150ms ease;
+}
+
+.tsmc-mission-btn.active {
+  border-color: var(--tsmc-primary);
+  background: var(--tsmc-primary);
+  color: #fff;
+  box-shadow: 0 4px 8px rgba(234, 88, 12, 0.25);
+}
+
+.tsmc-mission-btn svg {
+  width: 18px;
+  height: 18px;
+}
+
+.tsmc-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
+  max-width: 100%;
+  transition: background-color 300ms ease;
+}
+
+.tsmc-container.tsmc-oil-mode {
+  background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, rgba(34, 197, 94, 0.04) 100%);
+}
+
+.tsmc-oil-mode .tsmc-mission-selector {
+  background: rgba(34, 197, 94, 0.1);
+  border-bottom-color: #22c55e;
+}
+
+.tsmc-oil-mode .tsmc-mission-btn.active {
+  background: #22c55e;
+  border-color: #22c55e;
+  box-shadow: 0 4px 8px rgba(34, 197, 94, 0.25);
+}
+
+.tsmc-oil-mode .tsmc-slider {
+  background: linear-gradient(to right, #86efac, #22c55e);
+}
+
+.tsmc-oil-mode .tsmc-slider::-webkit-slider-thumb {
+  background: #22c55e;
+  box-shadow: 0 2px 6px rgba(34, 197, 94, 0.4);
+}
+
+.tsmc-oil-mode .tsmc-slider::-moz-range-thumb {
+  background: #22c55e;
+  box-shadow: 0 2px 6px rgba(34, 197, 94, 0.4);
+}
+
+.tsmc-oil-mode .tsmc-slider-value-display {
+  color: #22c55e;
+}
+
+.tsmc-oil-mode .tsmc-quick-btn.active {
+  background: #22c55e;
+  border-color: #22c55e;
+  box-shadow: 0 3px 8px rgba(34, 197, 94, 0.25);
+}
+
+.tsmc-oil-mode .tsmc-mega-result {
+  border-color: #22c55e;
+  background: linear-gradient(135deg, rgba(34, 197, 94, 0.12) 0%, rgba(34, 197, 94, 0.06) 100%);
+}
+
+.tsmc-oil-mode .tsmc-result-label,
+.tsmc-oil-mode .tsmc-result-big {
+  color: #22c55e;
+}
+
+.tsmc-oil-mode .tsmc-reset-btn {
+  border-color: #22c55e;
+  color: #22c55e;
+}
+
+.tsmc-oil-mode .tsmc-reset-btn:hover {
+  background: #22c55e;
+  color: #fff;
+}
+
+.tsmc-input-section,
+.tsmc-ratio-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+}
+
+.tsmc-section-label {
+  font-size: 0.65rem;
+  font-weight: 800;
+  color: var(--tsmc-neutral);
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+}
+
+.tsmc-slider-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+}
+
+.tsmc-slider {
+  width: 100%;
+  height: 10px;
+  border-radius: 5px;
+  background: linear-gradient(to right, #fcd34d, #f97316);
+  outline: none;
+  -webkit-appearance: none;
+  appearance: none;
+  cursor: pointer;
+}
+
+.tsmc-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: var(--tsmc-primary);
+  cursor: grab;
+  box-shadow: 0 2px 6px rgba(234, 88, 12, 0.4);
+  border: 2px solid var(--tsmc-bg);
+}
+
+.tsmc-slider::-moz-range-thumb {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: var(--tsmc-primary);
+  cursor: grab;
+  box-shadow: 0 2px 6px rgba(234, 88, 12, 0.4);
+  border: 2px solid var(--tsmc-bg);
+}
+
+.tsmc-slider-value-display {
+  text-align: center;
+  font-size: 1.8rem;
+  font-weight: 800;
+  color: var(--tsmc-primary);
+  line-height: 1;
+}
+
+.tsmc-unit {
+  font-size: 1rem;
+  margin-left: 0.3rem;
+  color: var(--tsmc-neutral);
+}
+
+.tsmc-quick-buttons {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 0.4rem;
+}
+
+.tsmc-quick-btn {
+  padding: 0.6rem 0.5rem;
+  border: 2px solid var(--tsmc-border);
+  border-radius: 0.4rem;
+  background: var(--tsmc-bg-light);
+  color: var(--tsmc-neutral);
+  font-weight: 700;
+  font-size: 0.8rem;
+  cursor: pointer;
+  transition: all 120ms ease;
+}
+
+.tsmc-quick-btn:active {
+  transform: scale(0.95);
+}
+
+.tsmc-quick-btn.active {
+  background: var(--tsmc-primary);
+  color: #fff;
+  border-color: var(--tsmc-primary);
+  box-shadow: 0 3px 8px rgba(234, 88, 12, 0.25);
+}
+
+.tsmc-quick-btn.hidden {
+  display: none;
+}
+
+.tsmc-ratio-cards {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.5rem;
+}
+
+.tsmc-ratio-card {
+  padding: 0.75rem;
+  border: 2px solid var(--tsmc-border);
+  border-radius: 0.5rem;
+  background: var(--tsmc-bg-light);
+  color: var(--tsmc-neutral);
+  cursor: pointer;
+  transition: all 150ms ease;
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+  align-items: center;
+  text-align: center;
+}
+
+.tsmc-ratio-card:hover {
+  border-color: var(--tsmc-primary);
+  background: var(--tsmc-bg);
+}
+
+.tsmc-ratio-card.active {
+  background: var(--tsmc-primary);
+  color: #fff;
+  border-color: var(--tsmc-primary);
+  box-shadow: 0 4px 10px rgba(234, 88, 12, 0.25);
+}
+
+.tsmc-ratio-value {
+  font-size: 1rem;
+  font-weight: 800;
+}
+
+.tsmc-ratio-desc {
+  font-size: 0.7rem;
+  font-weight: 700;
+  opacity: 0.9;
+  line-height: 1.3;
+}
+
+.tsmc-mega-result {
+  background: linear-gradient(135deg, rgba(234, 88, 12, 0.12) 0%, rgba(251, 191, 36, 0.06) 100%);
+  border: 2.5px solid var(--tsmc-primary);
+  border-radius: 0.75rem;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+  align-items: center;
+  text-align: center;
+}
+
+.tsmc-result-label {
+  font-size: 0.65rem;
+  font-weight: 800;
+  color: var(--tsmc-primary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.tsmc-result-display {
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+  gap: 0.3rem;
+}
+
+.tsmc-result-big {
+  font-size: 2.8rem;
+  font-weight: 900;
+  color: var(--tsmc-primary);
+  line-height: 1;
+  letter-spacing: -1px;
+}
+
+.tsmc-result-unit {
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--tsmc-neutral);
+}
+
+.tsmc-container-visual {
+  width: 100%;
+  max-width: 120px;
+  height: auto;
+}
+
+.tsmc-share-btn {
+  padding: 0.6rem;
+  border: 2px solid var(--tsmc-primary);
+  border-radius: 0.4rem;
+  background: var(--tsmc-bg);
+  color: var(--tsmc-primary);
+  cursor: pointer;
+  transition: all 150ms ease;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tsmc-share-btn:hover {
+  background: var(--tsmc-primary);
+  color: #fff;
+}
+
+.tsmc-share-btn svg {
+  width: 20px;
+  height: 20px;
+}
+
+.tsmc-oil-mode .tsmc-share-btn {
+  border-color: #22c55e;
+  color: #22c55e;
+}
+
+.tsmc-oil-mode .tsmc-share-btn:hover {
+  background: #22c55e;
+  color: #fff;
+}
+
+.tsmc-checklist {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  background: var(--tsmc-bg-light);
+  border-radius: 0.5rem;
+  border: 1.5px solid var(--tsmc-border);
+}
+
+.tsmc-checklist-item {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  font-weight: 600;
+  font-size: 0.8rem;
+  color: var(--tsmc-neutral);
+}
+
+.tsmc-checklist-item svg {
+  width: 18px;
+  height: 18px;
+  color: var(--tsmc-primary);
+  flex-shrink: 0;
+}
+
+@media (min-width: 480px) {
+  .tsmc-quick-buttons {
+    grid-template-columns: repeat(5, 1fr);
+  }
+}
+
+@media (min-width: 768px) {
+  .tsmc-container {
+    padding: 1.5rem;
+    max-width: 500px;
+    margin: 0 auto;
+  }
+
+  .tsmc-ratio-cards {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}

package/src/tool/twoStrokeMixtureCalculator/ui.ts

@@ -0,0 +1,81 @@
+export interface TwoStrokeMixtureCalculatorUI extends Record<string, string> {
+  titleMain: string;
+  labelFuelVolume: string;
+  labelRatio: string;
+  labelOilRequired: string;
+  labelTotalMixture: string;
+  labelRichness: string;
+  labelPresets: string;
+  labelCustomRatio: string;
+  btnClear: string;
+  btnCopyResults: string;
+  btnSwitchMode: string;
+  unitLiters: string;
+  unitMilliliters: string;
+  richLean: string;
+  richBalanced: string;
+  richRich: string;
+  msgReady: string;
+  msgMixtureReady: string;
+  tooltipFuelVolume: string;
+  tooltipRatio: string;
+  recipientLabel: string;
+  oilPercentage: string;
+  labelVolume: string;
+  labelRatioShort: string;
+  labelOilTip: string;
+  labelMixingTips: string;
+  labelMixingTipsDesc: string;
+  recipePrefix: string;
+  recipeAt: string;
+  recipeAdd: string;
+  recipeOfOil: string;
+  copyTextPrefix: string;
+  copyTextFuel: string;
+  copyTextOil: string;
+  ratio25Desc: string;
+  ratio33Desc: string;
+  ratio40Desc: string;
+  ratio50Desc: string;
+}
+
+export const twoStrokeMixtureCalculatorUI: TwoStrokeMixtureCalculatorUI = {
+  titleMain: 'Two Stroke Fuel Mixture Calculator',
+  labelFuelVolume: 'Fuel Volume',
+  labelRatio: 'Mix Ratio',
+  labelOilRequired: 'Oil Required',
+  labelTotalMixture: 'Total Mixture',
+  labelRichness: 'Mixture Richness',
+  labelPresets: 'Common Ratios',
+  labelCustomRatio: 'Custom Ratio (1:X)',
+  btnClear: 'Clear',
+  btnCopyResults: 'Copy Results',
+  btnSwitchMode: 'Switch Mode',
+  unitLiters: 'L',
+  unitMilliliters: 'ml',
+  richLean: 'Lean (less oil, risk of seizure)',
+  richBalanced: 'Balanced (standard mix)',
+  richRich: 'Rich (more oil, more smoke, engine protection)',
+  msgReady: 'Ready',
+  msgMixtureReady: 'Mixture calculated',
+  tooltipFuelVolume: 'Enter the amount of gasoline',
+  tooltipRatio: 'Enter ratio as 25, 33, 40, or 50 (for 1:25, 1:33, etc.)',
+  recipientLabel: 'Mixture Container',
+  oilPercentage: 'Oil %',
+  labelVolume: 'Volume',
+  labelRatioShort: 'Ratio',
+  labelOilTip: '2% oil mix = 1:50 ratio',
+  labelMixingTips: 'Mixing Tips',
+  labelMixingTipsDesc: 'Mix in a clean container—gasoline first, add measured oil, then remaining fuel. Shake well (1-2 minutes) for homogeneous blend. Label with date and ratio.',
+  recipePrefix: 'For',
+  recipeAt: 'of fuel at',
+  recipeAdd: 'add exactly',
+  recipeOfOil: 'of 2-stroke oil.',
+  copyTextPrefix: '2-Stroke Mix',
+  copyTextFuel: 'fuel',
+  copyTextOil: 'oil',
+  ratio25Desc: 'Old machines',
+  ratio33Desc: 'Classic models',
+  ratio40Desc: 'Standard recommended',
+  ratio50Desc: 'Modern chainsaws',
+};

package/src/tools.ts

@@ -15,6 +15,7 @@ import { STAIR_CALCULATOR_TOOL } from './tool/stairCalculator/index';
 import { DRILL_SHARPENER_TOOL } from './tool/drillSharpener/index';
 import { WORKSHOP_FRACTION_CONVERTER_TOOL } from './tool/workshopFractionConverter/index';
 import { PYTHAGOREAN_RIGHT_ANGLE_CALCULATOR_TOOL } from './tool/pythagoreanRightAngleCalculator/index';
+import { TWO_STROKE_MIXTURE_CALCULATOR_TOOL } from './tool/twoStrokeMixtureCalculator/index';
 
-export const ALL_TOOLS: ToolDefinition[] = [CLAY_CALCULATOR_TOOL, EPOXY_CALCULATOR_TOOL, BALUSTER_CALCULATOR_TOOL, MORTAR_CALCULATOR_TOOL, PASSEPARTOUT_CALCULATOR_TOOL, CONCRETE_CALCULATOR_TOOL, CUT_OPTIMIZER_TOOL, VOLTAGE_DROP_CALCULATOR_TOOL, FURNITURE_FIT_TOOL, THERMAL_EXPANSION_CALCULATOR_TOOL, DRILL_CALCULATOR_TOOL, STAIR_CALCULATOR_TOOL, DRILL_SHARPENER_TOOL, WORKSHOP_FRACTION_CONVERTER_TOOL, PYTHAGOREAN_RIGHT_ANGLE_CALCULATOR_TOOL];
+export const ALL_TOOLS: ToolDefinition[] = [CLAY_CALCULATOR_TOOL, EPOXY_CALCULATOR_TOOL, BALUSTER_CALCULATOR_TOOL, MORTAR_CALCULATOR_TOOL, PASSEPARTOUT_CALCULATOR_TOOL, CONCRETE_CALCULATOR_TOOL, CUT_OPTIMIZER_TOOL, VOLTAGE_DROP_CALCULATOR_TOOL, FURNITURE_FIT_TOOL, THERMAL_EXPANSION_CALCULATOR_TOOL, DRILL_CALCULATOR_TOOL, STAIR_CALCULATOR_TOOL, DRILL_SHARPENER_TOOL, WORKSHOP_FRACTION_CONVERTER_TOOL, PYTHAGOREAN_RIGHT_ANGLE_CALCULATOR_TOOL, TWO_STROKE_MIXTURE_CALCULATOR_TOOL];