@jjlmoya/utils-chrono 1.2.0

package/src/tool/watch-savings-planner/watch-savings-planner.css

@@ -0,0 +1,460 @@
+.tool-main-card {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-color);
+  border-radius: 1.25rem;
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 1.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  box-shadow: var(--shadow-base);
+
+  --color-white: #fff;
+  --color-success: #22c55e;
+  --color-danger: #ef4444;
+  --color-success-bg: rgba(34, 197, 94, 0.12);
+  --color-danger-bg: rgba(239, 68, 68, 0.08);
+}
+
+.savings-summary {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+}
+
+.summary-stat {
+  flex: 1;
+  text-align: center;
+  padding: 1rem;
+  background: var(--bg-page);
+  border-radius: 0.875rem;
+  border: 1px solid var(--border-base);
+}
+
+.summary-value {
+  display: block;
+  font-size: 1.5rem;
+  font-weight: 800;
+  color: var(--accent);
+  font-variant-numeric: tabular-nums;
+  line-height: 1.2;
+}
+
+.summary-label {
+  display: block;
+  font-size: 0.75rem;
+  color: var(--text-dimmed);
+  margin-top: 0.2rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  font-weight: 600;
+}
+
+.add-goal-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.75rem;
+  border: 2px dashed var(--border-base);
+  border-radius: 0.875rem;
+  background: transparent;
+  color: var(--text-dimmed);
+  font-size: 0.9375rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.add-goal-trigger:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+  background: rgba(99, 102, 241, 0.04);
+}
+
+.sim-month-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  padding: 0.35rem 0.75rem;
+  border: 1px solid var(--border-base);
+  border-radius: 2rem;
+  background: var(--bg-page);
+  color: var(--text-dimmed);
+  font-size: 0.75rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  align-self: flex-end;
+}
+
+.sim-month-btn:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+.add-goal-form {
+  background: var(--bg-page);
+  border: 1px solid var(--border-base);
+  border-radius: 0.875rem;
+  overflow: hidden;
+}
+
+.form-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.875rem 1.125rem;
+  border-bottom: 1px solid var(--border-base);
+}
+
+.form-header h3 {
+  margin: 0;
+  font-size: 0.9375rem;
+  font-weight: 700;
+  color: var(--text-base);
+}
+
+.form-close {
+  background: none;
+  border: none;
+  color: var(--text-dimmed);
+  cursor: pointer;
+  padding: 0.25rem;
+  border-radius: 0.375rem;
+}
+
+.form-close:hover {
+  color: var(--text-base);
+  background: var(--bg-surface);
+}
+
+.form-body {
+  padding: 1.125rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.875rem;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.form-label {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--text-dimmed);
+}
+
+.form-input {
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--border-base);
+  border-radius: 0.5rem;
+  background: var(--bg-surface);
+  color: var(--text-base);
+  font-size: 0.9375rem;
+  outline: none;
+  transition: border-color 0.2s ease;
+}
+
+.form-input:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+}
+
+.form-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.75rem;
+}
+
+.range-group {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.form-range {
+  flex: 1;
+  -webkit-appearance: none;
+  appearance: none;
+  height: 4px;
+  border-radius: 2px;
+  background: var(--border-base);
+  outline: none;
+}
+
+.form-range::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--accent);
+  cursor: pointer;
+  border: 2px solid var(--bg-surface);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
+}
+
+.range-value {
+  font-size: 0.9375rem;
+  font-weight: 700;
+  color: var(--accent);
+  min-width: 4rem;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+.form-submit {
+  padding: 0.625rem;
+  border: none;
+  border-radius: 0.5rem;
+  background: var(--accent);
+  color: var(--color-white);
+  font-size: 0.9375rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.form-submit:hover {
+  opacity: 0.9;
+  transform: translateY(-1px);
+}
+
+.goals-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.goals-empty {
+  text-align: center;
+  padding: 2.5rem 1rem;
+  color: var(--text-dimmed);
+}
+
+.empty-title {
+  font-size: 1rem;
+  font-weight: 600;
+  margin: 0.75rem 0 0.25rem;
+  color: var(--text-base);
+}
+
+.empty-sub {
+  font-size: 0.8125rem;
+  margin: 0;
+  opacity: 0.7;
+}
+
+.goal-card {
+  background: var(--bg-page);
+  border: 1px solid var(--border-base);
+  border-radius: 0.875rem;
+  padding: 1.125rem;
+  transition: all 0.3s ease;
+}
+
+.goal-card:hover {
+  border-color: rgba(99, 102, 241, 0.2);
+}
+
+.goal-achieved {
+  border-color: rgba(34, 197, 94, 0.3);
+  background: linear-gradient(135deg, var(--bg-page) 0%, rgba(34, 197, 94, 0.04) 100%);
+}
+
+.goal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+}
+
+.goal-name-wrap {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.goal-name {
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--text-base);
+}
+
+.goal-achieved-badge {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  padding: 0.2rem 0.5rem;
+  border-radius: 1rem;
+  background: var(--color-success-bg);
+  color: var(--color-success);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.goal-delete {
+  background: none;
+  border: none;
+  color: var(--text-dimmed);
+  cursor: pointer;
+  padding: 0.375rem;
+  border-radius: 0.375rem;
+  opacity: 0.5;
+  transition: all 0.2s ease;
+}
+
+.goal-delete:hover {
+  opacity: 1;
+  color: var(--color-danger);
+  background: var(--color-danger-bg);
+}
+
+.goal-ring-section {
+  display: flex;
+  gap: 1.25rem;
+  align-items: center;
+}
+
+.goal-ring {
+  position: relative;
+  width: 100px;
+  height: 100px;
+  flex-shrink: 0;
+}
+
+.goal-ring svg {
+  width: 100%;
+  height: 100%;
+  transform: rotate(-90deg);
+}
+
+.goal-ring-bg {
+  fill: none;
+  stroke: var(--border-base);
+  stroke-width: 6;
+  opacity: 0.4;
+}
+
+.goal-ring-fill {
+  fill: none;
+  stroke: var(--accent);
+  stroke-width: 6;
+  stroke-linecap: round;
+  transition: stroke-dashoffset 0.5s ease;
+}
+
+.goal-achieved .goal-ring-fill {
+  stroke: var(--color-success);
+}
+
+.goal-ring-text {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+}
+
+.goal-percent {
+  display: block;
+  font-size: 1.25rem;
+  font-weight: 800;
+  color: var(--text-base);
+  line-height: 1;
+}
+
+.goal-ring-label {
+  display: block;
+  font-size: 0.625rem;
+  color: var(--text-dimmed);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-top: 0.15rem;
+}
+
+.goal-meta {
+  flex: 1;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.5rem;
+}
+
+.meta-row {
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+}
+
+.meta-label {
+  font-size: 0.6875rem;
+  color: var(--text-dimmed);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  font-weight: 600;
+}
+
+.meta-value {
+  font-size: 0.9375rem;
+  font-weight: 700;
+  color: var(--text-base);
+  font-variant-numeric: tabular-nums;
+}
+
+.goal-monthly-adjust {
+  margin-top: 0.75rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--border-base);
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.adjust-label {
+  font-size: 0.75rem;
+  color: var(--text-dimmed);
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.goal-slider {
+  flex: 1;
+  -webkit-appearance: none;
+  appearance: none;
+  height: 4px;
+  border-radius: 2px;
+  background: var(--border-base);
+  outline: none;
+}
+
+.goal-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--accent);
+  cursor: pointer;
+  border: 2px solid var(--bg-surface);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
+}
+
+@media (max-width: 480px) {
+  .goal-ring-section {
+    flex-direction: column;
+    text-align: center;
+  }
+
+  .goal-meta {
+    grid-template-columns: 1fr 1fr;
+    width: 100%;
+  }
+
+  .form-row {
+    grid-template-columns: 1fr;
+  }
+}

package/src/tool/water-resistance-converter/bibliography.astro

@@ -0,0 +1,16 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { waterResistanceConverter } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'en' } = Astro.props as Props;
+const loader = waterResistanceConverter.i18n[locale] || waterResistanceConverter.i18n.en;
+const content = await loader?.();
+if (!content) return null;
+---
+
+{content && <SharedBibliography links={content.bibliography} />}

package/src/tool/water-resistance-converter/bibliography.ts

@@ -0,0 +1,16 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'Watch Water Resistance Ratings Explained — Crown & Caliber',
+    url: 'https://www.crownandcaliber.com/blogs/stories/watch-water-resistance-ratings',
+  },
+  {
+    name: 'Water Resistance in Watches — ISO 6425 Standard',
+    url: 'https://en.wikipedia.org/wiki/Water_Resistance_Watch_ISO_6425',
+  },
+  {
+    name: 'What Do Water Resistance Numbers Actually Mean?',
+    url: 'https://www.watchfinder.com/water-resistance-guide',
+  },
+];

package/src/tool/water-resistance-converter/client.ts

@@ -0,0 +1,56 @@
+const depthInput = document.getElementById('depth-input') as HTMLInputElement;
+const unitSelect = document.getElementById('unit-select') as HTMLSelectElement;
+const convM = document.getElementById('conv-m') as HTMLElement;
+const convFt = document.getElementById('conv-ft') as HTMLElement;
+const convAtm = document.getElementById('conv-atm') as HTMLElement;
+const convBar = document.getElementById('conv-bar') as HTMLElement;
+const ratingName = document.getElementById('rating-name') as HTMLElement;
+const usageCards = document.querySelectorAll('.usage-card') as NodeListOf<HTMLElement>;
+
+function toMeters(value: number, unit: string): number {
+  switch (unit) {
+    case 'ft': return value / 3.28084;
+    case 'atm': return value * 10;
+    case 'bar': return value * 10;
+    default: return value;
+  }
+}
+
+function round(v: number): number {
+  return v < 10 ? Math.round(v * 10) / 10 : Math.round(v);
+}
+
+function getRating(m: number): { name: string; active: string } {
+  if (m < 30) return { name: 'Not Water Resistant', active: 'none' };
+  if (m < 50) return { name: 'Splash Resistant', active: 'handwash' };
+  if (m < 100) return { name: 'Shower & Surface Swim', active: 'shower' };
+  if (m < 200) return { name: 'Swimming & Snorkeling', active: 'snorkel' };
+  if (m < 500) return { name: 'Recreational Scuba', active: 'scuba' };
+  return { name: 'Deep / Saturation Diving', active: 'extreme' };
+}
+
+function update() {
+  const val = parseFloat(depthInput.value) || 0;
+  const unit = unitSelect.value;
+  const m = toMeters(val, unit);
+
+  const atm = round(m / 10);
+  const bar = round(m / 10);
+  const ft = round(m * 3.28084);
+
+  convM.textContent = round(m) + ' m';
+  convFt.textContent = ft + ' ft';
+  convAtm.textContent = atm + ' ATM';
+  convBar.textContent = bar + ' bar';
+
+  const rating = getRating(m);
+  ratingName.textContent = rating.name;
+
+  usageCards.forEach((card) => {
+    card.classList.toggle('active', card.dataset.rating === rating.active);
+  });
+}
+
+depthInput.addEventListener('input', update);
+unitSelect.addEventListener('change', update);
+update();

package/src/tool/water-resistance-converter/component.astro

@@ -0,0 +1,15 @@
+---
+import ConverterPanel from './components/ConverterPanel.astro';
+
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="tool-main-card" data-ui={JSON.stringify(ui)}>
+  <ConverterPanel labels={ui} />
+</div>
+
+<script src="./client.ts"></script>

package/src/tool/water-resistance-converter/components/ConverterPanel.astro

@@ -0,0 +1,113 @@
+---
+interface Props {
+  labels: Record<string, string>;
+}
+
+const { labels } = Astro.props;
+---
+
+<div class="converter-panel">
+  <div class="panel-section">
+    <div class="section-label">{labels.depthLabel || "Water Resistance"}</div>
+    <div class="input-unit-group">
+      <input type="number" class="depth-input" id="depth-input" min="0" max="10000" value="30" placeholder="30" />
+      <select class="unit-select" id="unit-select">
+        <option value="m">{labels.unitMeters || "Meters (m)"}</option>
+        <option value="ft">{labels.unitFeet || "Feet (ft)"}</option>
+        <option value="atm">{labels.unitATM || "Atmospheres (ATM)"}</option>
+        <option value="bar">{labels.unitBar || "Bar (bar)"}</option>
+      </select>
+    </div>
+  </div>
+
+  <div class="conversions-card" id="conversions-card">
+    <div class="conversions-header">{labels.convertedValues || "Equivalent Ratings"}</div>
+    <div class="conversions-grid">
+      <div class="conv-item">
+        <span class="conv-label">{labels.unitMeters || "Meters"}</span>
+        <span class="conv-value" id="conv-m">30 m</span>
+      </div>
+      <div class="conv-item">
+        <span class="conv-label">{labels.unitFeet || "Feet"}</span>
+        <span class="conv-value" id="conv-ft">100 ft</span>
+      </div>
+      <div class="conv-item">
+        <span class="conv-label">{labels.unitATM || "ATM"}</span>
+        <span class="conv-value" id="conv-atm">3 ATM</span>
+      </div>
+      <div class="conv-item">
+        <span class="conv-label">{labels.unitBar || "Bar"}</span>
+        <span class="conv-value" id="conv-bar">3 bar</span>
+      </div>
+    </div>
+  </div>
+
+  <div class="rating-badge" id="rating-badge">
+    <div class="rating-label">{labels.ratingLabel || "Rating"}</div>
+    <div class="rating-name" id="rating-name">{labels.handWash || "Splash Resistant"}</div>
+  </div>
+
+  <div class="usage-cards" id="usage-cards">
+    <div class="usage-card" data-rating="none">
+      <div class="usage-icon">
+        <svg viewBox="0 0 24 24" width="18" height="18"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill="currentColor"/></svg>
+      </div>
+      <div>
+        <div class="usage-title">{labels.notWaterResistant || "Not Water Resistant"}</div>
+        <div class="usage-desc">{labels.notWaterResistantDesc || "No splashes. Keep away from water entirely."}</div>
+      </div>
+    </div>
+    <div class="usage-card" data-rating="handwash">
+      <div class="usage-icon">
+        <svg viewBox="0 0 24 24" width="18" height="18"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill="currentColor"/></svg>
+      </div>
+      <div>
+        <div class="usage-title">{labels.handWash || "Splash Resistant"}</div>
+        <div class="usage-desc">{labels.handWashDesc || "Hand washing, rain, splashes. Not for swimming."}</div>
+      </div>
+    </div>
+    <div class="usage-card" data-rating="shower">
+      <div class="usage-icon">
+        <svg viewBox="0 0 24 24" width="18" height="18"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill="currentColor"/></svg>
+      </div>
+      <div>
+        <div class="usage-title">{labels.showerSwim || "Shower & Light Swim"}</div>
+        <div class="usage-desc">{labels.showerSwimDesc || "Showering, light swimming. Not for diving."}</div>
+      </div>
+    </div>
+    <div class="usage-card" data-rating="snorkel">
+      <div class="usage-icon">
+        <svg viewBox="0 0 24 24" width="18" height="18"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill="currentColor"/></svg>
+      </div>
+      <div>
+        <div class="usage-title">{labels.snorkeling || "Swimming & Snorkeling"}</div>
+        <div class="usage-desc">{labels.snorkelingDesc || "Pool swimming, snorkeling, water sports."}</div>
+      </div>
+    </div>
+    <div class="usage-card" data-rating="scuba">
+      <div class="usage-icon">
+        <svg viewBox="0 0 24 24" width="18" height="18"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill="currentColor"/></svg>
+      </div>
+      <div>
+        <div class="usage-title">{labels.scubaDiving || "Recreational Scuba"}</div>
+        <div class="usage-desc">{labels.scubaDivingDesc || "Scuba diving, snorkeling, water sports."}</div>
+      </div>
+    </div>
+    <div class="usage-card" data-rating="extreme">
+      <div class="usage-icon">
+        <svg viewBox="0 0 24 24" width="18" height="18"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill="currentColor"/></svg>
+      </div>
+      <div>
+        <div class="usage-title">{labels.saturationDiving || "Saturation Diving"}</div>
+        <div class="usage-desc">{labels.saturationDivingDesc || "Professional saturation diving. Extreme depths."}</div>
+      </div>
+    </div>
+  </div>
+
+  <div class="tip-row">
+    <svg class="tip-icon" viewBox="0 0 24 24" width="16" height="16">
+      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill="currentColor" />
+    </svg>
+    <span class="tip-text">{labels.tipContent || "Water resistance degrades over time. Gaskets and seals should be tested yearly and replaced every 3\u20135 years."}</span>
+  </div>
+</div>