@jjlmoya/utils-motor 1.13.0 → 1.14.0

package/src/tool/vehicleTotalCostPerKilometreCalculator/vehicle-total-cost-per-kilometre-calculator.css

@@ -0,0 +1,417 @@
+.vehicle-cost-tool {
+  --n-ink: #182027;
+  --n-muted: #64727a;
+  --n-paper: #fffdf7;
+  --n-paper-soft: #f5efe3;
+  --n-line: #d9d0c1;
+  --n-road: #31444b;
+  --n-road-mark: #51636a;
+  --n-fuel: #e28a45;
+  --n-fixed: #78b6a2;
+  --n-accent: #b6493a;
+  --n-result-text: #fffdf7;
+  --n-result-muted: #c3d1cc;
+  --n-result-highlight: #f6c49c;
+
+  color: var(--n-ink);
+}
+
+.vehicle-cost-tool * {
+  box-sizing: border-box;
+}
+
+.vehicle-cost-surface {
+  display: grid;
+  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .9fr);
+  overflow: hidden;
+  border: 1px solid var(--n-line);
+  border-radius: 1.25rem;
+  background: var(--n-paper);
+}
+
+.vehicle-cost-controls {
+  padding: 1.35rem;
+  background: var(--n-paper-soft);
+}
+
+.vehicle-cost-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  justify-content: space-between;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--n-line);
+}
+
+.vehicle-cost-presets,
+.vehicle-cost-currency-picker {
+  display: flex;
+  flex-wrap: wrap;
+  gap: .45rem;
+  align-items: center;
+}
+
+.vehicle-cost-toolbar-label {
+  color: var(--n-muted);
+  font-size: .72rem;
+  letter-spacing: .05em;
+  text-transform: uppercase;
+}
+
+.vehicle-cost-presets button,
+.vehicle-cost-compare-button,
+.vehicle-cost-reset {
+  padding: .5rem .65rem;
+  border: 1px solid var(--n-line);
+  border-radius: .55rem;
+  background: var(--n-paper);
+  color: var(--n-ink);
+  cursor: pointer;
+  font: inherit;
+  font-size: .78rem;
+}
+
+.vehicle-cost-currency-picker select {
+  min-width: 11rem;
+  max-width: 15rem;
+  padding: .5rem 2rem .5rem .65rem;
+  border: 1px solid var(--n-line);
+  border-radius: .55rem;
+  background: var(--n-paper);
+  color: var(--n-ink);
+  cursor: pointer;
+  font: inherit;
+  font-size: .78rem;
+}
+
+.vehicle-cost-presets button:hover,
+.vehicle-cost-compare-button:hover,
+.vehicle-cost-reset:hover {
+  border-color: var(--n-accent);
+  color: var(--n-accent);
+}
+
+.vehicle-cost-currency-picker select:focus,
+.vehicle-cost-currency-picker select:hover {
+  border-color: var(--n-accent);
+  outline: 0;
+}
+
+.vehicle-cost-scenario {
+  padding-top: 1.35rem;
+}
+
+.vehicle-cost-section-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: .9rem;
+}
+
+.vehicle-cost-section-heading h2,
+.vehicle-cost-result-heading h2 {
+  margin: 0;
+  font-size: 1rem;
+  letter-spacing: -.02em;
+}
+
+.vehicle-cost-compare-button {
+  border-color: var(--n-accent);
+  color: var(--n-accent);
+}
+
+.vehicle-cost-fields {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: .8rem;
+}
+
+.vehicle-cost-field {
+  display: grid;
+  min-width: 0;
+  gap: .3rem;
+}
+
+.vehicle-cost-field-wide {
+  grid-column: span 2;
+}
+
+.vehicle-cost-field span {
+  font-size: .83rem;
+  font-weight: 700;
+}
+
+.vehicle-cost-field small {
+  min-height: 1.9em;
+  color: var(--n-muted);
+  font-size: .7rem;
+  line-height: 1.35;
+}
+
+.vehicle-cost-input-wrap {
+  display: flex;
+  align-items: center;
+  gap: .4rem;
+  border-bottom: 1px solid var(--n-line);
+}
+
+.vehicle-cost-input-wrap:focus-within {
+  border-color: var(--n-accent);
+}
+
+.vehicle-cost-input-wrap input {
+  width: 100%;
+  min-width: 0;
+  padding: .55rem .1rem;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: var(--n-ink);
+  font: inherit;
+  font-size: 1.05rem;
+}
+
+.vehicle-cost-input-wrap b {
+  color: var(--n-muted);
+  font-size: .72rem;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.vehicle-cost-comparison-panel {
+  border-top: 1px solid var(--n-line);
+}
+
+.vehicle-cost-comparison-panel[hidden] {
+  display: none;
+}
+
+.vehicle-cost-result {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  padding: 1.35rem;
+  background: var(--n-road);
+  color: var(--n-result-text);
+}
+
+.vehicle-cost-result-heading {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: start;
+  justify-content: space-between;
+  gap: .75rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--n-result-muted);
+}
+
+.vehicle-cost-result-heading > span {
+  width: 100%;
+  color: var(--n-result-highlight);
+  font-size: .7rem;
+  font-weight: 700;
+  letter-spacing: .1em;
+  text-transform: uppercase;
+}
+
+.vehicle-cost-reset {
+  border-color: var(--n-result-muted);
+  background: transparent;
+  color: var(--n-result-text);
+}
+
+.vehicle-cost-error {
+  margin: 1rem 0 0;
+  padding: .75rem;
+  border-left: 3px solid var(--n-fuel);
+  background: var(--n-road-mark);
+  color: var(--n-result-highlight);
+  font-size: .83rem;
+  line-height: 1.45;
+}
+
+.vehicle-cost-scene {
+  min-height: 10rem;
+  padding: .8rem 0 .35rem;
+}
+
+.vehicle-cost-scene svg {
+  display: block;
+  width: 100%;
+  height: auto;
+  overflow: visible;
+}
+
+.route-label {
+  fill: var(--n-result-text);
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.route-base {
+  fill: var(--n-road-mark);
+}
+
+.route-fixed {
+  fill: var(--n-fixed);
+}
+
+.route-fuel {
+  fill: var(--n-fuel);
+}
+
+.route-end {
+  fill: var(--n-result-text);
+  stroke: var(--n-fuel);
+  stroke-width: 3;
+}
+
+.route-path {
+  stroke: var(--n-result-muted);
+  stroke-dasharray: 3 8;
+  stroke-width: 2;
+}
+
+.route-path-secondary {
+  opacity: .35;
+}
+
+.route-meta {
+  fill: var(--n-result-muted);
+  font-size: 9px;
+}
+
+.route-total {
+  fill: var(--n-result-highlight);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.vehicle-cost-metrics {
+  display: grid;
+  gap: .8rem;
+  margin-top: auto;
+}
+
+.vehicle-cost-primary-metric {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: end;
+  gap: .45rem;
+  padding-top: .9rem;
+  border-top: 1px solid var(--n-result-muted);
+}
+
+.vehicle-cost-primary-metric span {
+  grid-column: 1 / -1;
+  color: var(--n-result-muted);
+  font-size: .76rem;
+}
+
+.vehicle-cost-primary-metric strong {
+  font-size: clamp(2.2rem, 5vw, 3.7rem);
+  line-height: .95;
+  letter-spacing: -.08em;
+}
+
+.vehicle-cost-primary-metric > b {
+  padding-bottom: .25rem;
+  color: var(--n-result-muted);
+  font-size: .8rem;
+}
+
+.vehicle-cost-primary-metric em {
+  grid-column: 1 / -1;
+  width: fit-content;
+  margin-top: .1rem;
+  padding: .28rem .5rem;
+  border-radius: 99rem;
+  background: var(--n-fixed);
+  color: var(--n-road);
+  font-size: .72rem;
+  font-style: normal;
+  font-weight: 700;
+}
+
+.vehicle-cost-secondary-metrics {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  border-top: 1px solid var(--n-result-muted);
+}
+
+.vehicle-cost-secondary-metrics > div {
+  display: grid;
+  gap: .25rem;
+  padding: .7rem .7rem .65rem 0;
+  border-bottom: 1px solid var(--n-result-muted);
+}
+
+.vehicle-cost-secondary-metrics > div:nth-child(even) {
+  padding-left: .7rem;
+  border-left: 1px solid var(--n-result-muted);
+}
+
+.vehicle-cost-secondary-metrics span,
+.vehicle-cost-secondary-metrics small {
+  color: var(--n-result-muted);
+  font-size: .72rem;
+}
+
+.vehicle-cost-secondary-metrics strong {
+  font-size: 1.05rem;
+}
+
+.vehicle-cost-comparison-summary {
+  margin: 1rem 0 0;
+  color: var(--n-result-highlight);
+  font-size: .84rem;
+  line-height: 1.45;
+}
+
+@media (prefers-color-scheme: dark) {
+  .vehicle-cost-tool {
+    --n-ink: #f5f0e7;
+    --n-muted: #afbbb7;
+    --n-paper: #182126;
+    --n-paper-soft: #202c31;
+    --n-line: #3b4a4c;
+    --n-road: #10171a;
+    --n-road-mark: #2f4045;
+    --n-fuel: #ef9b58;
+    --n-fixed: #75b9a2;
+    --n-accent: #f09179;
+    --n-result-text: #f5f0e7;
+    --n-result-muted: #afbbb7;
+    --n-result-highlight: #f6c49c;
+  }
+}
+
+@media (max-width: 760px) {
+  .vehicle-cost-surface {
+    grid-template-columns: 1fr;
+  }
+
+  .vehicle-cost-result {
+    min-height: 30rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .vehicle-cost-controls,
+  .vehicle-cost-result {
+    padding: 1rem;
+  }
+
+  .vehicle-cost-fields {
+    grid-template-columns: 1fr;
+  }
+
+  .vehicle-cost-field-wide {
+    grid-column: auto;
+  }
+
+  .vehicle-cost-primary-metric strong {
+    font-size: 2.65rem;
+  }
+}

package/src/tools.ts

@@ -6,9 +6,12 @@ import { REAL_FUEL_CONSUMPTION_CALCULATOR_TOOL } from './tool/realFuelConsumptio
 import { TIRE_PRESSURE_CONVERTER_TOOL } from './tool/tirePressureConverter';
 import { EV_CHARGING_TIME_COST_PLANNER_TOOL } from './tool/evChargingTimeCostPlanner';
 import { TRAILER_TONGUE_WEIGHT_CALCULATOR_TOOL } from './tool/trailerTongueWeightCalculator';
+import { VEHICLE_TOTAL_COST_PER_KILOMETRE_CALCULATOR_TOOL } from './tool/vehicleTotalCostPerKilometreCalculator';
 
-export const ALL_TOOLS = [BRAKING_DISTANCE_CALCULATOR_TOOL, REAL_FUEL_CONSUMPTION_CALCULATOR_TOOL, CAR_MOTORCYCLE_GEAR_RATIO_CALCULATOR_TOOL, TIRE_PRESSURE_CONVERTER_TOOL, MOTORCYCLE_SKID_MARK_SPEED_ESTIMATOR_TOOL, EV_CHARGING_TIME_COST_PLANNER_TOOL, TRAILER_TONGUE_WEIGHT_CALCULATOR_TOOL];
+export const ALL_TOOLS = [BRAKING_DISTANCE_CALCULATOR_TOOL, REAL_FUEL_CONSUMPTION_CALCULATOR_TOOL, CAR_MOTORCYCLE_GEAR_RATIO_CALCULATOR_TOOL, TIRE_PRESSURE_CONVERTER_TOOL, MOTORCYCLE_SKID_MARK_SPEED_ESTIMATOR_TOOL, EV_CHARGING_TIME_COST_PLANNER_TOOL, TRAILER_TONGUE_WEIGHT_CALCULATOR_TOOL, VEHICLE_TOTAL_COST_PER_KILOMETRE_CALCULATOR_TOOL];
 export { evChargingTimeCostPlanner } from './tool/evChargingTimeCostPlanner/entry';
 export type { EVChargingTimeCostPlannerLocaleContent } from './tool/evChargingTimeCostPlanner/entry';
 export { trailerTongueWeightCalculator } from './tool/trailerTongueWeightCalculator/entry';
 export type { TrailerTongueWeightCalculatorLocaleContent } from './tool/trailerTongueWeightCalculator/entry';
+export { vehicleTotalCostPerKilometreCalculator } from './tool/vehicleTotalCostPerKilometreCalculator/entry';
+export type { VehicleTotalCostPerKilometreCalculatorLocaleContent } from './tool/vehicleTotalCostPerKilometreCalculator/entry';