@jjlmoya/utils-nature 1.20.0 → 1.22.0

package/src/tool/urbanGardenPlanner/urban-garden-rainwater-and-soil-planner.css

@@ -0,0 +1,531 @@
+.ugrp-root {
+  --n-page: #f4f1e8;
+  --n-surface: #fffdf7;
+  --n-surface-soft: #f7f5ed;
+  --n-ink: #26342d;
+  --n-muted: #718076;
+  --n-line: #d8ded0;
+  --n-moss: #3f6b4a;
+  --n-moss-soft: #dfeadd;
+  --n-water: #2f7b87;
+  --n-water-soft: #cfe8e7;
+  --n-soil: #8a6142;
+  --n-soil-dark: #634531;
+  --n-gold: #d99a42;
+  --n-status: #295d45;
+  --n-status-bg: #e2f0e3;
+  --ugrp-water-progress: 45%;
+  --ugrp-soil-progress: 50%;
+  --ugrp-rain-progress: 30%;
+
+  display: block;
+  max-width: 76rem;
+  margin: 0 auto;
+  padding: 1rem;
+  color: var(--n-ink);
+}
+
+.theme-dark .ugrp-root {
+  --n-page: #171b19;
+  --n-surface: #202724;
+  --n-surface-soft: #252e2a;
+  --n-ink: #edf2e9;
+  --n-muted: #a5b2a7;
+  --n-line: #3b4940;
+  --n-moss: #91c294;
+  --n-moss-soft: #2e4434;
+  --n-water: #77c7ce;
+  --n-water-soft: #24474a;
+  --n-soil: #be9168;
+  --n-soil-dark: #906747;
+  --n-gold: #e6b766;
+  --n-status: #b8e1bb;
+  --n-status-bg: #294331;
+}
+
+.ugrp-shell {
+  display: grid;
+  grid-template-columns: minmax(18rem, 0.85fr) minmax(22rem, 1.15fr);
+  overflow: hidden;
+  background: var(--n-surface);
+  border: 1px solid var(--n-line);
+  border-radius: 1.5rem;
+  box-shadow: 0 1rem 2.5rem rgba(38, 52, 45, 0.12);
+}
+
+.ugrp-input-panel,
+.ugrp-result-panel {
+  padding: clamp(1.4rem, 3vw, 2.5rem);
+}
+
+.ugrp-input-panel {
+  background: var(--n-surface-soft);
+  border-right: 1px solid var(--n-line);
+}
+
+.ugrp-result-panel {
+  background: var(--n-page);
+}
+
+.ugrp-kicker {
+  color: var(--n-moss);
+  font-size: 0.72rem;
+  font-weight: 800;
+  letter-spacing: 0.12em;
+  line-height: 1.4;
+  text-transform: uppercase;
+}
+
+.ugrp-heading {
+  display: flex;
+  align-items: center;
+  gap: 0.7rem;
+  margin: 0.8rem 0 1.8rem;
+  color: var(--n-ink);
+  font-size: clamp(1.25rem, 2vw, 1.6rem);
+  line-height: 1.15;
+}
+
+.ugrp-step {
+  display: inline-grid;
+  width: 2rem;
+  height: 2rem;
+  flex: 0 0 auto;
+  place-items: center;
+  border-radius: 0.65rem;
+  background: var(--n-moss);
+  color: var(--n-surface);
+  font-size: 0.9rem;
+}
+
+.ugrp-step-light {
+  background: var(--n-water);
+}
+
+.ugrp-fields {
+  display: grid;
+  gap: 1.15rem;
+}
+
+.ugrp-field {
+  display: grid;
+  gap: 0.4rem;
+}
+
+.ugrp-label {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+  color: var(--n-ink);
+  font-size: 0.85rem;
+  font-weight: 750;
+}
+
+.ugrp-label svg {
+  color: var(--n-moss);
+  font-size: 1.2rem;
+}
+
+.ugrp-input-line {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  border: 1px solid var(--n-line);
+  border-radius: 0.8rem;
+  background: var(--n-surface);
+}
+
+.ugrp-input-line:focus-within {
+  border-color: var(--n-water);
+  outline: 2px solid var(--n-water-soft);
+}
+
+.ugrp-input-line input {
+  width: 100%;
+  min-width: 0;
+  border: 0;
+  outline: 0;
+  padding: 0.72rem 0.8rem;
+  background: transparent;
+  color: var(--n-ink);
+  font: inherit;
+  font-size: 1.1rem;
+  font-weight: 750;
+}
+
+.ugrp-input-line > span {
+  padding-right: 0.8rem;
+  color: var(--n-muted);
+  font-size: 0.82rem;
+  font-weight: 750;
+}
+
+.ugrp-help {
+  color: var(--n-muted);
+  font-size: 0.73rem;
+  line-height: 1.4;
+}
+
+.ugrp-presets {
+  margin-top: 1.7rem;
+  padding-top: 1.4rem;
+  border-top: 1px solid var(--n-line);
+}
+
+.ugrp-subheading {
+  margin-bottom: 0.65rem;
+  color: var(--n-muted);
+  font-size: 0.72rem;
+  font-weight: 800;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.ugrp-preset-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+}
+
+.ugrp-preset {
+  border: 1px solid var(--n-line);
+  border-radius: 99rem;
+  padding: 0.5rem 0.72rem;
+  background: var(--n-surface);
+  color: var(--n-moss);
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.75rem;
+  font-weight: 750;
+}
+
+.ugrp-preset:hover,
+.ugrp-preset:focus-visible {
+  border-color: var(--n-moss);
+  background: var(--n-moss-soft);
+  outline: 0;
+}
+
+.ugrp-note {
+  display: flex;
+  gap: 0.7rem;
+  margin-top: 1.6rem;
+  border-top: 1px solid var(--n-line);
+  padding-top: 1.1rem;
+  color: var(--n-muted);
+  font-size: 0.73rem;
+  line-height: 1.45;
+}
+
+.ugrp-note > svg {
+  flex: 0 0 auto;
+  color: var(--n-gold);
+  font-size: 1.3rem;
+}
+
+.ugrp-note div {
+  display: grid;
+  gap: 0.2rem;
+}
+
+.ugrp-note strong {
+  color: var(--n-ink);
+  font-size: 0.78rem;
+}
+
+.ugrp-result-topline {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.ugrp-result-topline .ugrp-heading {
+  margin-bottom: 1rem;
+}
+
+.ugrp-status {
+  max-width: 10rem;
+  border-radius: 0.7rem;
+  padding: 0.55rem 0.7rem;
+  background: var(--n-status-bg);
+  color: var(--n-status);
+  font-size: 0.72rem;
+  font-weight: 800;
+  line-height: 1.3;
+  text-align: right;
+}
+
+.ugrp-landscape {
+  position: relative;
+  min-height: 19rem;
+  overflow: hidden;
+  border: 1px solid var(--n-line);
+  border-radius: 1.1rem;
+  background: var(--n-surface);
+}
+
+.ugrp-landscape::after {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 22%;
+  background: var(--n-moss-soft);
+  content: '';
+}
+
+.ugrp-cloud {
+  position: absolute;
+  top: 1.2rem;
+  left: 1.3rem;
+  color: var(--n-water);
+  font-size: 3rem;
+  opacity: 0.65;
+}
+
+.ugrp-catchment {
+  position: absolute;
+  top: 4.7rem;
+  left: 1.2rem;
+  width: 7rem;
+  height: 2.4rem;
+  transform: skewX(-22deg);
+  border: 2px solid var(--n-soil-dark);
+  border-radius: 0.35rem;
+  background: var(--n-soil);
+}
+
+.ugrp-catchment span {
+  position: absolute;
+  right: 0.3rem;
+  bottom: 0.3rem;
+  transform: skewX(22deg);
+  color: var(--n-surface);
+  font-size: 0.62rem;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.ugrp-pipe {
+  position: absolute;
+  top: 6.8rem;
+  left: 7.5rem;
+  width: 4.3rem;
+  height: 5rem;
+  border-right: 0.35rem solid var(--n-water);
+  border-bottom: 0.35rem solid var(--n-water);
+  border-radius: 0 0 0.8rem;
+}
+
+.ugrp-pipe i,
+.ugrp-pipe b {
+  position: absolute;
+  display: block;
+  width: 0.35rem;
+  height: 0.35rem;
+  border-radius: 50%;
+  background: var(--n-water);
+}
+
+.ugrp-pipe i {
+  top: 0.3rem;
+  right: -0.35rem;
+}
+
+.ugrp-pipe b {
+  right: 0.1rem;
+  bottom: -0.35rem;
+}
+
+.ugrp-bed {
+  position: absolute;
+  right: 1.2rem;
+  bottom: 2.2rem;
+  width: min(48%, 13rem);
+  height: 8.2rem;
+  border: 0.45rem solid var(--n-soil-dark);
+  border-radius: 0.5rem 0.5rem 0.8rem 0.8rem;
+  background: var(--n-soil);
+  z-index: 2;
+}
+
+.ugrp-bed-frame {
+  position: absolute;
+  inset: 0;
+  border: 0.45rem solid var(--n-soil);
+}
+
+.ugrp-soil-fill {
+  position: absolute;
+  right: 0.45rem;
+  bottom: 0.45rem;
+  left: 0.45rem;
+  height: var(--ugrp-soil-progress);
+  border-radius: 0 0 0.25rem 0.25rem;
+  background: var(--n-soil-dark);
+  transition: height 0.35s ease;
+}
+
+.ugrp-bed > span {
+  position: absolute;
+  right: 0.7rem;
+  bottom: 0.7rem;
+  left: 0.7rem;
+  color: var(--n-surface);
+  font-size: 0.65rem;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.ugrp-leaves {
+  position: absolute;
+  top: -2.1rem;
+  left: 15%;
+  display: flex;
+  gap: 0.6rem;
+  color: var(--n-moss);
+  font-size: 2.6rem;
+}
+
+.ugrp-leaves svg:nth-child(2) { transform: translateY(-0.65rem) scale(0.8); }
+.ugrp-leaves svg:nth-child(3) { transform: translateY(-0.2rem) scale(0.7); }
+
+.ugrp-water-vessel {
+  position: absolute;
+  bottom: 1.5rem;
+  left: 1.4rem;
+  width: 5.4rem;
+  height: 5rem;
+  overflow: hidden;
+  border: 0.25rem solid var(--n-water);
+  border-radius: 0.5rem 0.5rem 1.1rem 1.1rem;
+  background: var(--n-water-soft);
+  color: var(--n-water);
+  z-index: 3;
+}
+
+.ugrp-water-vessel > div {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: var(--ugrp-water-progress);
+  background: var(--n-water);
+  opacity: 0.78;
+  transition: height 0.35s ease;
+}
+
+.ugrp-water-vessel svg {
+  position: absolute;
+  top: 0.6rem;
+  left: 1.75rem;
+  color: var(--n-surface);
+  font-size: 1.7rem;
+}
+
+.ugrp-water-vessel span {
+  position: absolute;
+  right: 0.25rem;
+  bottom: 0.35rem;
+  left: 0.25rem;
+  color: var(--n-surface);
+  font-size: 0.55rem;
+  font-weight: 800;
+  text-align: center;
+  text-transform: uppercase;
+}
+
+.ugrp-rain-dots {
+  position: absolute;
+  top: 5.1rem;
+  left: 4rem;
+  width: var(--ugrp-rain-progress);
+  max-width: 8rem;
+  height: 4rem;
+  background-image: radial-gradient(circle, var(--n-water) 0.12rem, transparent 0.13rem);
+  background-size: 1rem 1rem;
+  opacity: 0.72;
+  transition: width 0.35s ease;
+}
+
+.ugrp-status-note {
+  margin: 0.95rem 0 0;
+  color: var(--n-muted);
+  font-size: 0.75rem;
+  line-height: 1.45;
+}
+
+.ugrp-metrics {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.65rem;
+  margin-top: 1.2rem;
+}
+
+.ugrp-metric {
+  display: grid;
+  gap: 0.35rem;
+  min-height: 4.2rem;
+  border-top: 1px solid var(--n-line);
+  padding: 0.75rem 0.1rem 0;
+}
+
+.ugrp-metric span {
+  color: var(--n-muted);
+  font-size: 0.68rem;
+  font-weight: 750;
+  line-height: 1.25;
+  text-transform: uppercase;
+}
+
+.ugrp-metric strong {
+  color: var(--n-ink);
+  font-size: 1.25rem;
+}
+
+.ugrp-metric-main {
+  grid-column: 1 / -1;
+  min-height: 5.2rem;
+  border-top: 0;
+  border-radius: 0.9rem;
+  padding: 1rem;
+  background: var(--n-water-soft);
+}
+
+.ugrp-metric-main strong {
+  color: var(--n-water);
+  font-size: clamp(2rem, 5vw, 3.2rem);
+  letter-spacing: -0.04em;
+  line-height: 1;
+}
+
+@media (max-width: 800px) {
+  .ugrp-shell {
+    grid-template-columns: 1fr;
+  }
+
+  .ugrp-input-panel {
+    border-right: 0;
+    border-bottom: 1px solid var(--n-line);
+  }
+}
+
+@media (max-width: 480px) {
+  .ugrp-result-topline {
+    display: grid;
+  }
+
+  .ugrp-status {
+    max-width: none;
+    text-align: left;
+  }
+
+  .ugrp-landscape {
+    min-height: 17rem;
+  }
+
+  .ugrp-bed {
+    width: 48%;
+  }
+}

package/src/tools.ts

@@ -4,11 +4,14 @@ import { CRICKET_THERMOMETER_TOOL } from './tool/cricketThermometer/index';
 import { SEED_CALCULATOR_TOOL } from './tool/seedCalculator/index';
 import { RAIN_HARVESTER_TOOL } from './tool/rainHarvester/index';
 import { DIGITAL_CARBON_TOOL } from './tool/digitalCarbon/index';
+import { URBAN_GARDEN_PLANNER_TOOL } from './tool/urbanGardenPlanner/index';
+import { COMPOST_BIN_VOLUME_RATIO_CALCULATOR_TOOL } from './tool/compostBinVolumeRatioCalculator/index';
 
 export const ALL_TOOLS: ToolDefinition[] = [
   CRICKET_THERMOMETER_TOOL,
   SEED_CALCULATOR_TOOL,
   RAIN_HARVESTER_TOOL,
-  DIGITAL_CARBON_TOOL
+  DIGITAL_CARBON_TOOL,
+  URBAN_GARDEN_PLANNER_TOOL,
+  COMPOST_BIN_VOLUME_RATIO_CALCULATOR_TOOL
 ];
-

package/src/types.ts

@@ -5,7 +5,7 @@ export type { SEOSection };
 
 export type KnownLocale =
   | 'ar' | 'da' | 'de' | 'en' | 'es' | 'fi'
-  | 'fr' | 'it' | 'ja' | 'ko' | 'nb' | 'nl'
+  | 'fr' | 'id' | 'it' | 'ja' | 'ko' | 'nb' | 'nl'
   | 'pl' | 'pt' | 'ru' | 'sv' | 'tr' | 'zh';
 
 export interface FAQItem {
@@ -23,7 +23,7 @@ export interface HowToStep {
   text: string;
 }
 
-export interface ToolLocaleContent<TUI extends Record<string, string> = Record<string, string>> {
+export interface ToolLocaleContent<TUI = Record<string, string>> {
   slug: string;
   title: string;
   description: string;
@@ -46,7 +46,7 @@ export type LocaleLoader<T> = () => Promise<T>;
 
 export type LocaleMap<T> = Partial<Record<KnownLocale, LocaleLoader<T>>>;
 
-export interface NatureToolEntry<TUI extends Record<string, string> = Record<string, string>> {
+export interface NatureToolEntry<TUI = Record<string, string>> {
   id: string;
   icons: {
     bg: string;
@@ -57,7 +57,7 @@ export interface NatureToolEntry<TUI extends Record<string, string> = Record<str
 
 export interface NatureCategoryEntry {
   icon: string;
-  tools: NatureToolEntry[];
+  tools: NatureToolEntry<Record<string, string>>[];
   i18n: LocaleMap<CategoryLocaleContent>;
 }