@jjlmoya/utils-home 1.17.0 → 1.24.0

package/src/tool/acTonnageCalculator/ac-tonnage-calculator.css

@@ -0,0 +1,467 @@
+.ac-wrapper {
+  --ac-accent: #0ea5e9;
+  --ac-accent-dim: rgba(14,165,233,0.12);
+  --ac-surface: var(--bg-surface);
+  --ac-border: var(--border-color);
+  --ac-text: var(--text-main);
+  --ac-muted: var(--text-muted);
+
+  width: 100%;
+  padding: 1rem 0;
+}
+
+.ac-card {
+  background: var(--ac-surface);
+  width: calc(100% - 24px);
+  max-width: 900px;
+  margin: 0 auto;
+  border-radius: 24px;
+  overflow: hidden;
+  border: 1px solid var(--ac-border);
+  color: var(--ac-text);
+  display: flex;
+  flex-direction: column;
+}
+
+@media (min-width: 1024px) {
+  .ac-card {
+    flex-direction: row;
+    min-height: 600px;
+  }
+}
+
+.ac-left {
+  flex: 0 0 auto;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+@media (min-width: 1024px) {
+  .ac-left {
+    flex: 1 1 auto;
+    width: auto;
+    min-width: 280px;
+  }
+}
+
+.ac-unit-toggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  border-radius: 10px;
+  background: var(--bg-page);
+  border: 1px solid var(--ac-border);
+  align-self: flex-start;
+}
+
+.ac-unit-toggle button {
+  padding: 5px 10px;
+  border-radius: 6px;
+  border: none;
+  background: transparent;
+  color: var(--ac-muted);
+  font-size: 0.6875rem;
+  font-weight: 800;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.ac-power-toggle {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 6px;
+  border-radius: 8px;
+  background: var(--bg-page);
+  border: 1px solid var(--ac-border);
+}
+
+.ac-power-toggle button {
+  padding: 4px 8px;
+  border-radius: 5px;
+  border: none;
+  background: transparent;
+  color: var(--ac-muted);
+  font-size: 0.625rem;
+  font-weight: 800;
+  cursor: pointer;
+  transition: all 0.15s;
+  white-space: nowrap;
+}
+
+.ac-power-toggle button.active {
+  background: var(--ac-accent);
+  color: #fff;
+}
+
+.ac-unit-toggle button.active {
+  background: var(--ac-accent);
+  color: #fff;
+}
+
+.ac-field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.ac-field-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.ac-label {
+  font-size: 0.6875rem;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--ac-muted);
+  flex-shrink: 0;
+}
+
+.ac-val {
+  font-size: 0.875rem;
+  font-weight: 900;
+  color: var(--ac-accent);
+  white-space: nowrap;
+}
+
+.ac-slider {
+  width: 100%;
+  height: 6px;
+  border-radius: 3px;
+  background: var(--bg-muted);
+  outline: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.ac-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--ac-accent);
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgba(14,165,233,0.3);
+  transition: transform 0.15s;
+}
+
+.ac-slider::-webkit-slider-thumb:hover {
+  transform: scale(1.15);
+}
+
+.ac-slider::-moz-range-thumb {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--ac-accent);
+  cursor: pointer;
+  border: none;
+  box-shadow: 0 2px 8px rgba(14,165,233,0.3);
+}
+
+.ac-steps {
+  display: flex;
+  gap: 6px;
+}
+
+.ac-step {
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  border: 1px solid var(--ac-border);
+  background: var(--bg-page);
+  color: var(--ac-text);
+  font-size: 1rem;
+  font-weight: 700;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s;
+}
+
+.ac-step:hover {
+  border-color: var(--ac-accent);
+  color: var(--ac-accent);
+}
+
+.ac-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.ac-select-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.ac-select {
+  padding: 10px 36px 10px 12px;
+  border-radius: 10px;
+  border: 1px solid var(--ac-border);
+  background: var(--bg-page);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 12px center;
+  color: var(--ac-text);
+  font-size: 0.875rem;
+  font-weight: 700;
+  outline: none;
+  cursor: pointer;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.ac-select:focus {
+  border-color: var(--ac-accent);
+  box-shadow: 0 0 0 3px var(--ac-accent-dim);
+}
+
+.ac-right {
+  flex: 0 0 auto;
+  width: 100%;
+  padding: 24px;
+  border-top: 1px solid var(--ac-border);
+  background: var(--bg-page);
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+}
+
+@media (min-width: 1024px) {
+  .ac-right {
+    width: 300px;
+    border-top: none;
+    border-left: 1px solid var(--ac-border);
+  }
+}
+
+.ac-ring-wrap {
+  position: relative;
+  width: 160px;
+  height: 160px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ac-ring-wrap svg {
+  position: absolute;
+  inset: 0;
+  transform: rotate(-90deg);
+}
+
+.ac-ring-glow {
+  position: absolute;
+  width: 160px;
+  height: 160px;
+  border-radius: 50%;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.5s;
+}
+
+.ac-ring-glow.active {
+  opacity: 1;
+  animation: ac-glow-pulse 2s ease-in-out infinite;
+}
+
+@keyframes ac-glow-pulse {
+  0%, 100% {
+    box-shadow: 0 0 20px rgba(14,165,233,0.2);
+    transform: scale(1);
+  }
+  50% {
+    box-shadow: 0 0 40px rgba(14,165,233,0.4);
+    transform: scale(1.05);
+  }
+}
+
+.ac-ring-bg {
+  fill: none;
+  stroke: var(--bg-muted);
+  stroke-width: 10;
+}
+
+.ac-ring-fill {
+  fill: none;
+  stroke-width: 10;
+  stroke-linecap: round;
+  transition: stroke-dashoffset 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), stroke 0.5s ease;
+}
+
+.ac-ring-inner {
+  position: relative;
+  z-index: 2;
+  text-align: center;
+}
+
+.ac-ring-label {
+  font-size: 0.625rem;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--ac-muted);
+}
+
+.ac-ring-btu {
+  font-size: 1.75rem;
+  font-weight: 900;
+  line-height: 1;
+  color: var(--ac-text);
+}
+
+.ac-ring-unit {
+  font-size: 0.625rem;
+  font-weight: 700;
+  color: var(--ac-muted);
+}
+
+.ac-mini-room {
+  padding: 10px;
+  border-radius: 14px;
+  background: var(--ac-surface);
+  border: 1px solid var(--ac-border);
+  transition: all 0.5s;
+}
+
+.ac-mini-room svg {
+  display: block;
+}
+
+.ac-room-wall {
+  fill: var(--bg-page);
+  stroke: var(--ac-border);
+  stroke-width: 1.5;
+  transition: fill 0.5s;
+}
+
+.ac-room-window {
+  fill: #bfdbfe;
+  transition: fill 0.5s;
+}
+
+.ac-room-person {
+  fill: #94a3b8;
+  transition: fill 0.5s;
+}
+
+.ac-room-pc {
+  fill: #475569;
+  transition: fill 0.5s;
+}
+
+.ac-room-sun {
+  fill: #fbbf24;
+  transition: fill 0.5s;
+}
+
+.ac-theme-low .ac-room-wall { fill: #e0f2fe; }
+.ac-theme-low .ac-card { border-color: #7dd3fc; }
+
+.ac-theme-med .ac-room-wall { fill: #fef3c7; }
+.ac-theme-med .ac-card { border-color: #fcd34d; }
+
+.ac-theme-high .ac-room-wall { fill: #fee2e2; }
+.ac-theme-high .ac-card { border-color: #fca5a5; }
+
+.ac-stats {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+
+.ac-stat {
+  padding: 12px;
+  border-radius: 12px;
+  background: var(--ac-surface);
+  border: 1px solid var(--ac-border);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  text-align: center;
+}
+
+.ac-stat-label {
+  font-size: 0.625rem;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--ac-muted);
+}
+
+.ac-stat-val {
+  font-size: 1.25rem;
+  font-weight: 900;
+  color: var(--ac-accent);
+}
+
+.ac-breakdown {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.ac-bd-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 7px 9px;
+  border-radius: 8px;
+  background: var(--ac-surface);
+  border: 1px solid var(--ac-border);
+}
+
+.ac-bd-label {
+  font-size: 0.6875rem;
+  font-weight: 700;
+  color: var(--ac-text);
+  min-width: 100px;
+}
+
+.ac-bd-bar-wrap {
+  flex: 1;
+  height: 6px;
+  border-radius: 3px;
+  background: var(--bg-muted);
+  overflow: hidden;
+}
+
+.ac-bd-bar {
+  height: 100%;
+  border-radius: 3px;
+  background: linear-gradient(90deg, #0ea5e9, #22c55e);
+  transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.ac-bd-val {
+  font-size: 0.6875rem;
+  font-weight: 800;
+  color: var(--ac-muted);
+  min-width: 48px;
+  text-align: right;
+}
+
+.ac-peak {
+  animation: ac-peak-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+@keyframes ac-peak-in {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.02); }
+  100% { transform: scale(1); }
+}

package/src/tool/acTonnageCalculator/bibliography.astro

@@ -0,0 +1,14 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { acTonnageCalculator } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await acTonnageCalculator.i18n[locale]?.();
+---
+
+{content && <SharedBibliography links={content.bibliography} />}

package/src/tool/acTonnageCalculator/bibliography.ts

@@ -0,0 +1,5 @@
+export const bibliography = [
+  { name: 'ASHRAE Fundamentals Handbook 2021', url: 'https://www.ashrae.org/technical-resources/ashrae-handbook' },
+  { name: 'Energy Star Room Air Conditioners', url: 'https://www.energystar.gov/products/room_air_conditioners' },
+  { name: 'Carrier BTU Sizing Guide', url: 'https://www.carrier.com/residential/en/us/products/air-conditioners/' },
+];

package/src/tool/acTonnageCalculator/client-animations.ts

@@ -0,0 +1,80 @@
+function getLabels(): Record<string, string> {
+  const el = document.getElementById('ac-labels');
+  if (!el) return {};
+  try {
+    return JSON.parse(el.dataset.labels ?? '{}');
+  } catch {
+    return {};
+  }
+}
+
+export function updateTheme(btu: number) {
+  const card = document.getElementById('ac-card');
+  if (!card) return;
+  card.classList.remove('ac-theme-low', 'ac-theme-med', 'ac-theme-high');
+  if (btu < 18000) card.classList.add('ac-theme-low');
+  else if (btu < 36000) card.classList.add('ac-theme-med');
+  else card.classList.add('ac-theme-high');
+}
+
+function roomLabel(btu: number): string {
+  const labels = getLabels();
+  if (btu < 18000) return labels.labelRoomCozy ?? '';
+  if (btu < 36000) return labels.labelRoomWarm ?? '';
+  return labels.labelRoomHot ?? '';
+}
+
+export function updateMiniRoom(btu: number) {
+  const svg = document.querySelector('.ac-mini-room svg');
+  if (!svg) return;
+  const txt = svg.querySelector('text');
+  if (txt) txt.textContent = roomLabel(btu);
+}
+
+export function spawnRipple() {
+  const wrap = document.querySelector('.ac-ring-wrap');
+  if (!wrap) return;
+  const el = document.getElementById('ac-ring-fill');
+  const color = el ? getComputedStyle(el).stroke : '#0ea5e9';
+  const ripple = document.createElement('div');
+  ripple.className = 'ac-ripple';
+  ripple.style.left = '50%';
+  ripple.style.top = '50%';
+  ripple.style.transform = 'translate(-50%, -50%)';
+  ripple.style.border = `2px solid ${color}`;
+  wrap.appendChild(ripple);
+  setTimeout(() => ripple.remove(), 800);
+}
+
+export function pulseGlow() {
+  const glow = document.getElementById('ac-ring-glow');
+  if (!glow) return;
+  glow.classList.add('active');
+  setTimeout(() => glow.classList.remove('active'), 2000);
+}
+
+function makeParticle(): HTMLElement {
+  const p = document.createElement('div');
+  p.className = 'ac-particle';
+  p.style.left = `${Math.random() * 100}%`;
+  p.style.animationDuration = `${2 + Math.random() * 3}s`;
+  p.style.animationDelay = `${Math.random() * 2}s`;
+  return p;
+}
+
+export function spawnParticles() {
+  const container = document.getElementById('ac-particles');
+  if (!container) return;
+  container.innerHTML = '';
+  for (let i = 0; i < 12; i++) {
+    container.appendChild(makeParticle());
+  }
+}
+
+export function buildBdRow(key: string, val: number, total: number): string {
+  const labels = getLabels();
+  const labelKey = `bd${key.charAt(0).toUpperCase()}${key.slice(1)}`;
+  const label = labels[labelKey] ?? key;
+  const pct = total > 0 ? Math.min(100, (val / total) * 100) : 0;
+  return `<div class="ac-bd-row"><span class="ac-bd-label">${label}</span><div class="ac-bd-bar-wrap"><div class="ac-bd-bar" style="width:${pct}%"></div></div><span class="ac-bd-val">${val.toLocaleString()}</span></div>`;
+}