@jjlmoya/utils-motor 1.1.0 → 1.2.0

package/src/tool/realFuelConsumptionCalculator/real-fuel-consumption-calculator.css

@@ -0,0 +1,692 @@
+.rfc-shell {
+  --rfc-ink: #17211e;
+  --rfc-muted: #66736d;
+  --rfc-paper: #f5f0e7;
+  --rfc-panel: #fffaf2;
+  --rfc-line: #d8cdbc;
+  --rfc-teal: #159c91;
+  --rfc-red: #d85b48;
+  --rfc-blue: #597cc4;
+  --rfc-gold: #dfa83e;
+  --rfc-shadow: #17211e1a;
+
+  container-type: inline-size;
+  color: var(--rfc-ink);
+}
+
+.theme-dark .rfc-shell {
+  --rfc-ink: #f5f0e7;
+  --rfc-muted: #aab7b0;
+  --rfc-paper: #18221f;
+  --rfc-panel: #202c28;
+  --rfc-line: #43534b;
+  --rfc-shadow: #0008;
+}
+
+.rfc-console {
+  overflow: visible;
+  border: 1px solid var(--rfc-line);
+  border-radius: 1.6rem;
+  background: var(--rfc-paper);
+  box-shadow: 0 1.5rem 4rem var(--rfc-shadow);
+}
+
+  .rfc-toolbar,
+  .rfc-choice-group,
+  .rfc-currency-picker,
+  .rfc-result-lead,
+  .rfc-comparison-heading,
+  .rfc-setting-row,
+.rfc-footer {
+  display: flex;
+  align-items: center;
+}
+
+.rfc-toolbar {
+  position: relative;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 1rem;
+  padding: 1.1rem clamp(1.1rem, 4vw, 2.4rem);
+  border-bottom: 1px solid var(--rfc-line);
+}
+
+.rfc-choice-group,
+.rfc-currency-picker {
+  gap: 0.45rem;
+}
+
+.rfc-choice-group > span,
+.rfc-currency-picker > span,
+.rfc-eyebrow,
+.rfc-field > span,
+.rfc-field > small,
+.rfc-comparison-heading > span,
+.rfc-setting-heading > span,
+.rfc-card-cost span,
+.rfc-result-cost span,
+.rfc-footer {
+  color: var(--rfc-muted);
+  font-size: 0.68rem;
+  font-weight: 850;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+}
+
+.rfc-choice-group > span,
+.rfc-currency-picker > span {
+  margin-right: 0.3rem;
+}
+
+.rfc-choice-group button,
+.rfc-currency-trigger,
+.rfc-currency-menu button,
+.rfc-reset {
+  border: 1px solid var(--rfc-line);
+  color: var(--rfc-ink);
+  background: transparent;
+  font: inherit;
+  font-size: 0.76rem;
+  font-weight: 800;
+  cursor: pointer;
+}
+
+.rfc-choice-group button,
+.rfc-currency-trigger {
+  padding: 0.55rem 0.82rem;
+  border-radius: 999px;
+}
+
+.rfc-choice-group button[aria-pressed="true"] {
+  border-color: var(--rfc-ink);
+  color: var(--rfc-paper);
+  background: var(--rfc-ink);
+}
+
+.rfc-currency-picker {
+  position: relative;
+}
+
+.rfc-currency-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.7rem;
+  min-width: 7.2rem;
+  justify-content: space-between;
+  background: var(--rfc-panel);
+}
+
+.rfc-currency-chevron {
+  width: 0.45rem;
+  height: 0.45rem;
+  flex: 0 0 auto;
+  border-right: 1.5px solid currentcolor;
+  border-bottom: 1.5px solid currentcolor;
+  transform: translateY(-0.12rem) rotate(45deg);
+  transition: transform 180ms ease;
+}
+
+.rfc-currency-trigger[aria-expanded="true"] .rfc-currency-chevron {
+  transform: translateY(0.12rem) rotate(225deg);
+}
+
+.rfc-currency-rate {
+  color: var(--rfc-muted);
+  font-size: 0.62rem;
+  white-space: nowrap;
+}
+
+.rfc-currency-menu {
+  position: absolute;
+  z-index: 5;
+  top: calc(100% + 0.5rem);
+  right: 0;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(4rem, 1fr));
+  gap: 0.25rem;
+  width: min(16rem, 80vw);
+  padding: 0.45rem;
+  border: 1px solid var(--rfc-line);
+  border-radius: 0.8rem;
+  background: var(--rfc-panel);
+  box-shadow: 0 0.8rem 2rem var(--rfc-shadow);
+}
+
+.rfc-currency-menu[hidden] {
+  display: none;
+}
+
+.rfc-currency-menu button {
+  padding: 0.55rem 0.35rem;
+  border: 0;
+  border-radius: 0.45rem;
+}
+
+.rfc-currency-menu button:hover,
+.rfc-currency-menu button[aria-selected="true"] {
+  color: var(--rfc-paper);
+  background: var(--rfc-ink);
+}
+
+.rfc-reset {
+  padding: 0.45rem 0.5rem;
+  border: 0;
+  color: var(--rfc-muted);
+}
+
+.rfc-intake,
+.rfc-results,
+.rfc-details {
+  padding: 1.8rem clamp(1.1rem, 4vw, 2.4rem);
+}
+
+.rfc-section-heading {
+  margin-bottom: 1rem;
+}
+
+.rfc-section-heading h2,
+.rfc-comparison-heading h2 {
+  margin: 0.25rem 0 0;
+  font-size: clamp(1.15rem, 2vw, 1.55rem);
+  letter-spacing: -0.04em;
+}
+
+.rfc-eyebrow {
+  margin: 0;
+  color: var(--rfc-teal);
+  font-size: 0.66rem;
+}
+
+.rfc-main-fields {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.8rem;
+}
+
+.rfc-field {
+  display: grid;
+  gap: 0.42rem;
+  min-width: 0;
+  padding: 1.05rem;
+  border: 1px solid var(--rfc-line);
+  border-radius: 1rem;
+  background: var(--rfc-panel);
+}
+
+.rfc-field > span {
+  color: var(--rfc-ink);
+  letter-spacing: 0.03em;
+}
+
+.rfc-field > small {
+  min-height: 2.1em;
+  font-size: 0.72rem;
+  font-weight: 550;
+  letter-spacing: 0;
+  line-height: 1.4;
+  text-transform: none;
+}
+
+.rfc-field strong {
+  display: flex;
+  align-items: baseline;
+  gap: 0.35rem;
+  font-size: 1.35rem;
+}
+
+.rfc-field strong input[type="number"],
+.rfc-setting-row input[type="number"] {
+  min-width: 0;
+  border: 0;
+  color: var(--rfc-ink);
+  background: transparent;
+  font: inherit;
+  font-weight: 850;
+}
+
+.rfc-field strong input[type="number"] {
+  width: 7rem;
+}
+
+.rfc-field strong em,
+.rfc-setting-row em {
+  color: var(--rfc-muted);
+  font-size: 0.72rem;
+  font-style: normal;
+  font-weight: 750;
+  white-space: nowrap;
+}
+
+.rfc-field input[type="range"] {
+  width: 100%;
+  accent-color: var(--rfc-teal);
+}
+
+.rfc-price-field {
+  border-color: var(--rfc-teal);
+  box-shadow: inset 0 0 0 1px var(--rfc-teal);
+}
+
+.rfc-results {
+  border-top: 1px solid var(--rfc-line);
+  background: var(--rfc-panel);
+}
+
+.rfc-result-lead {
+  flex-wrap: wrap;
+  gap: 1.5rem 2.5rem;
+  padding-bottom: 1.7rem;
+}
+
+.rfc-result-lead > div:first-child {
+  display: grid;
+  gap: 0.2rem;
+  min-width: min(100%, 16rem);
+}
+
+.rfc-result-lead > div:first-child strong {
+  font-size: clamp(2rem, 5vw, 3.7rem);
+  letter-spacing: -0.075em;
+  line-height: 1;
+}
+
+.rfc-result-lead > div:first-child span {
+  color: var(--rfc-muted);
+  font-size: 0.78rem;
+  font-weight: 750;
+}
+
+.rfc-result-cost {
+  display: grid;
+  gap: 0.25rem;
+  margin-left: auto;
+}
+
+.rfc-result-cost strong {
+  color: var(--rfc-red);
+  font-size: 1.75rem;
+  letter-spacing: -0.06em;
+}
+
+.rfc-result-cost small {
+  color: var(--rfc-muted);
+  font-size: 0.75rem;
+}
+
+.rfc-status {
+  flex: 1 1 100%;
+  margin: 0;
+  padding: 0.75rem 0.9rem;
+  border-left: 0.25rem solid var(--rfc-gold);
+  color: var(--rfc-muted);
+  background: color-mix(in srgb, var(--rfc-gold) 10%, transparent);
+  font-size: 0.8rem;
+  line-height: 1.45;
+}
+
+[data-status="better"] .rfc-status {
+  border-color: var(--rfc-teal);
+  background: color-mix(in srgb, var(--rfc-teal) 10%, transparent);
+}
+
+[data-status="higher"] .rfc-status {
+  border-color: var(--rfc-red);
+  background: color-mix(in srgb, var(--rfc-red) 10%, transparent);
+}
+
+.rfc-comparison-heading {
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1.7rem 1.2rem 1.25rem;
+  background: linear-gradient(135deg, color-mix(in srgb, var(--rfc-teal) 8%, transparent), transparent 55%);
+}
+
+.rfc-comparison-heading > span,
+.rfc-setting-heading > span {
+  max-width: 18rem;
+  font-size: 0.72rem;
+  font-weight: 550;
+  letter-spacing: 0;
+  line-height: 1.4;
+  text-align: right;
+  text-transform: none;
+}
+
+.rfc-comparison-heading h2 {
+  position: relative;
+  padding-bottom: 0.35rem;
+}
+
+.rfc-comparison-heading h2::after {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 3.5rem;
+  height: 0.18rem;
+  border-radius: 999px;
+  background: linear-gradient(90deg, var(--rfc-teal), var(--rfc-gold));
+  content: '';
+}
+
+.rfc-comparison-box {
+  position: relative;
+  overflow: hidden;
+  border: 1px solid var(--rfc-line);
+  border-radius: 1.1rem;
+  background: var(--rfc-paper);
+  box-shadow: 0 0.8rem 2rem var(--rfc-shadow);
+}
+
+.rfc-comparison-box::before {
+  position: absolute;
+  top: 0;
+  right: 12%;
+  left: 12%;
+  height: 0.25rem;
+  border-radius: 0 0 999px 999px;
+  background: linear-gradient(90deg, var(--rfc-red), var(--rfc-gold), var(--rfc-blue));
+  content: '';
+}
+
+.rfc-fuel-dot {
+  display: inline-block;
+  width: 0.65rem;
+  height: 0.65rem;
+  flex: 0 0 auto;
+  border-radius: 50%;
+  background: var(--rfc-teal);
+}
+
+.rfc-dot-gasoline { background: var(--rfc-red); }
+.rfc-dot-diesel { background: var(--rfc-gold); }
+.rfc-dot-electric { background: var(--rfc-blue); }
+
+.rfc-price-table {
+  display: grid;
+}
+
+.rfc-price-row {
+  --rfc-bar: 0%;
+
+  display: grid;
+  grid-template-columns: minmax(7.5rem, 0.7fr) minmax(12rem, 2fr) minmax(8.5rem, 0.7fr);
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem 1.2rem;
+  border-top: 1px solid var(--rfc-line);
+}
+
+.rfc-price-row:first-child {
+  border-top: 0;
+}
+
+.rfc-price-row[data-ready="true"] {
+  background: color-mix(in srgb, var(--rfc-teal) 4%, transparent);
+}
+
+.rfc-price-row[data-rank="cheapest"] {
+  background: color-mix(in srgb, var(--rfc-teal) 11%, var(--rfc-paper));
+  box-shadow: inset 0.28rem 0 0 var(--rfc-teal);
+}
+
+.rfc-row-identity {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.rfc-row-identity h3 {
+  margin: 0;
+  font-size: 0.9rem;
+}
+
+.rfc-row-identity small {
+  grid-column: 2;
+  color: var(--rfc-muted);
+  font-size: 0.68rem;
+}
+
+.rfc-row-bar-area {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 0.8rem;
+}
+
+.rfc-row-bar-track {
+  height: 1.45rem;
+  overflow: hidden;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--rfc-line) 45%, transparent);
+}
+
+.rfc-row-bar {
+  width: var(--rfc-bar);
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, var(--rfc-teal), color-mix(in srgb, var(--rfc-teal) 55%, var(--rfc-paper)));
+  transition: width 350ms ease;
+}
+
+.rfc-price-row[data-rank="cheapest"] .rfc-row-bar {
+  box-shadow: 0 0 0.9rem color-mix(in srgb, var(--rfc-teal) 45%, transparent);
+}
+
+[data-rfc-comparison-row="gasoline"] .rfc-row-bar { background: linear-gradient(90deg, var(--rfc-red), #ef9a62); }
+[data-rfc-comparison-row="diesel"] .rfc-row-bar { background: linear-gradient(90deg, var(--rfc-gold), #f0d27d); }
+[data-rfc-comparison-row="electric"] .rfc-row-bar { background: linear-gradient(90deg, var(--rfc-blue), #9cb5ec); }
+
+.rfc-row-cost {
+  display: grid;
+  gap: 0.15rem;
+  min-width: 4.6rem;
+  text-align: right;
+}
+
+.rfc-row-cost small,
+.rfc-row-consumption > small {
+  color: var(--rfc-muted);
+  font-size: 0.6rem;
+  font-weight: 850;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.rfc-row-cost strong {
+  color: var(--rfc-ink);
+  font-size: 1rem;
+}
+
+.rfc-row-consumption {
+  display: grid;
+  gap: 0.15rem;
+  justify-items: start;
+}
+
+.rfc-row-consumption > div {
+  display: flex;
+  align-items: baseline;
+  gap: 0.35rem;
+}
+
+.rfc-row-consumption strong {
+  font-size: 1.2rem;
+  letter-spacing: -0.04em;
+}
+
+.rfc-row-consumption span {
+  color: var(--rfc-muted);
+  font-size: 0.68rem;
+  white-space: nowrap;
+}
+
+.rfc-comparison-punchline {
+  margin: 0;
+  padding: 0.9rem 1.2rem;
+  border-top: 1px solid var(--rfc-line);
+  color: var(--rfc-ink);
+  background: color-mix(in srgb, var(--rfc-gold) 11%, transparent);
+  font-size: 0.76rem;
+  font-weight: 800;
+}
+
+.rfc-comparison-punchline::before {
+  margin-right: 0.45rem;
+  color: var(--rfc-gold);
+  content: '★';
+}
+
+.rfc-details {
+  border-top: 1px solid var(--rfc-line);
+}
+
+.rfc-details summary {
+  color: var(--rfc-ink);
+  font-size: 0.76rem;
+  font-weight: 850;
+  cursor: pointer;
+}
+
+.rfc-details-body {
+  display: grid;
+  grid-template-columns: minmax(14rem, 0.7fr) minmax(0, 1.3fr);
+  gap: 2rem;
+  padding-top: 1.2rem;
+}
+
+.rfc-setting-heading {
+  display: grid;
+  gap: 0.4rem;
+  margin-bottom: 0.7rem;
+}
+
+.rfc-setting-heading > span {
+  display: block;
+  text-align: left;
+}
+
+.rfc-setting-row {
+  gap: 0.7rem;
+  padding: 0.7rem 0;
+  border-top: 1px solid var(--rfc-line);
+}
+
+.rfc-setting-row > strong {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+  min-width: 5.6rem;
+  font-size: 0.78rem;
+}
+
+.rfc-setting-row label {
+  display: grid;
+  grid-template-columns: auto minmax(3rem, 5rem) auto;
+  align-items: center;
+  gap: 0.3rem;
+  min-width: 0;
+}
+
+.rfc-setting-row label > span {
+  color: var(--rfc-muted);
+  font-size: 0.65rem;
+}
+
+.rfc-setting-row input[type="number"] {
+  width: 100%;
+  padding: 0.2rem 0.15rem;
+  border-bottom: 1px solid var(--rfc-ink);
+  font-size: 0.82rem;
+}
+
+.rfc-footer {
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 0.6rem 1.4rem;
+  padding: 0  clamp(1.1rem, 4vw, 2.4rem) 1.5rem;
+  font-size: 0.63rem;
+  line-height: 1.45;
+}
+
+.rfc-footer b {
+  color: var(--rfc-ink);
+  font-weight: 750;
+  letter-spacing: 0;
+  text-transform: none;
+}
+
+@container (max-width: 48rem) {
+  .rfc-main-fields {
+    grid-template-columns: 1fr;
+  }
+
+  .rfc-price-row {
+    grid-template-columns: minmax(6.5rem, 0.65fr) minmax(9rem, 1.35fr);
+  }
+
+  .rfc-row-consumption {
+    grid-column: 2;
+  }
+
+  .rfc-details-body {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+}
+
+@container (max-width: 36rem) {
+  .rfc-toolbar {
+    align-items: flex-start;
+  }
+
+  .rfc-choice-group {
+    flex-wrap: wrap;
+  }
+
+  .rfc-currency-picker {
+    order: 3;
+    width: 100%;
+    flex-wrap: wrap;
+  }
+
+  .rfc-currency-rate {
+    width: 100%;
+    padding-left: 0.2rem;
+  }
+
+  .rfc-currency-menu {
+    left: 0;
+    right: auto;
+  }
+
+  .rfc-result-cost {
+    margin-left: 0;
+  }
+
+  .rfc-comparison-heading {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .rfc-comparison-heading > span {
+    text-align: left;
+  }
+
+  .rfc-setting-row {
+    align-items: flex-start;
+    flex-wrap: wrap;
+  }
+
+  .rfc-setting-row > strong {
+    width: 100%;
+  }
+
+  .rfc-setting-row label {
+    flex: 1 1 9rem;
+  }
+
+  .rfc-footer {
+    display: grid;
+  }
+}

package/src/tool/realFuelConsumptionCalculator/seo.astro

@@ -0,0 +1,15 @@
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { realFuelConsumptionCalculator } from './entry';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'en' } = Astro.props;
+const loader = realFuelConsumptionCalculator.i18n[locale] ?? realFuelConsumptionCalculator.i18n.en;
+const content = await loader?.();
+---
+
+{content && <SEORenderer content={{ locale, sections: content.seo }} />}