@jjlmoya/utils-cooking 1.2.0

package/src/tool/kitchen-timer/lib/KitchenTimer.ts

@@ -0,0 +1,264 @@
+import { getAudioContext, playBeep } from "./AudioHelper";
+
+export class KitchenTimer extends EventTarget {
+	element: HTMLElement;
+	private inputs: { h: HTMLInputElement; m: HTMLInputElement; s: HTMLInputElement };
+	private btnToggle: HTMLButtonElement;
+	private btnReset: HTMLButtonElement;
+	private btnAdd1m: HTMLButtonElement;
+	private btnAdd5m: HTMLButtonElement;
+	private statusText: HTMLElement;
+	private timerNameInput: HTMLInputElement;
+
+	totalSeconds: number = 0;
+	remainingSeconds: number = 0;
+	private intervalId: number | null = null;
+	isRunning: boolean = false;
+
+	private audioContext: AudioContext | null = null;
+
+	constructor(element: HTMLElement) {
+		super();
+		this.element = element;
+
+		const hoursInput = element.querySelector(".hours") as HTMLInputElement | null;
+		const minutesInput = element.querySelector(".minutes") as HTMLInputElement | null;
+		const secondsInput = element.querySelector(".seconds") as HTMLInputElement | null;
+
+		if (!minutesInput || !secondsInput) {
+			throw new Error("Missing required time input elements");
+		}
+
+		this.inputs = {
+			h: hoursInput || document.createElement('input'),
+			m: minutesInput,
+			s: secondsInput,
+		};
+
+		this.btnToggle = element.querySelector(".btn-toggle") as HTMLButtonElement;
+		this.btnReset = element.querySelector(".btn-reset") as HTMLButtonElement;
+		this.btnAdd1m = element.querySelector(".btn-add-1m") as HTMLButtonElement;
+		this.btnAdd5m = element.querySelector(".btn-add-5m") as HTMLButtonElement;
+		this.statusText = element.querySelector(".status-text") as HTMLElement;
+		this.timerNameInput = element.querySelector(".timer-name") as HTMLInputElement;
+
+		if (!this.btnToggle || !this.btnReset || !this.statusText || !this.timerNameInput) {
+			throw new Error("Missing required control elements");
+		}
+
+		this.initEvents();
+		this.validateInputs();
+	}
+
+	private initEvents() {
+		this.btnToggle.addEventListener("click", () => this.toggle());
+		this.btnReset.addEventListener("click", () => this.reset());
+		this.btnAdd1m.addEventListener("click", () => this.addTime(60));
+		this.btnAdd5m.addEventListener("click", () => this.addTime(300));
+
+		Object.values(this.inputs).forEach((input) => {
+			input.addEventListener("change", () => this.validateInputs());
+			input.addEventListener("input", () => {
+				if (this.isRunning) this.pause();
+				this.checkStartButton();
+			});
+		});
+
+		this.timerNameInput.addEventListener("input", () => {
+			this.dispatchUpdate();
+		});
+	}
+
+	private getInputSeconds(): number {
+		const h = parseInt(this.inputs.h.value) || 0;
+		const m = parseInt(this.inputs.m.value) || 0;
+		const s = parseInt(this.inputs.s.value) || 0;
+		return h * 3600 + m * 60 + s;
+	}
+
+	private setDisplay(totalSec: number) {
+		const h = Math.floor(totalSec / 3600);
+		const m = Math.floor((totalSec % 3600) / 60);
+		const s = totalSec % 60;
+
+		if (this.element.querySelector(".hours")) {
+			this.inputs.h.value = h.toString().padStart(2, "0");
+			this.inputs.m.value = m.toString().padStart(2, "0");
+		} else {
+			this.inputs.m.value = Math.floor(totalSec / 60).toString().padStart(2, "0");
+		}
+		this.inputs.s.value = s.toString().padStart(2, "0");
+	}
+
+	private validateInputs() {
+		let s = this.getInputSeconds();
+		if (s < 0) s = 0;
+		this.setDisplay(s);
+		this.remainingSeconds = s;
+		this.totalSeconds = s;
+		this.checkStartButton();
+		this.dispatchUpdate();
+	}
+
+	private addTime(seconds: number) {
+		const current = this.getInputSeconds();
+		this.pause();
+		this.setDisplay(current + seconds);
+		this.validateInputs();
+	}
+
+	toggle() {
+		if (this.isRunning) {
+			this.pause();
+		} else {
+			this.start();
+		}
+	}
+
+	start() {
+		if (this.remainingSeconds <= 0) this.validateInputs();
+		if (this.remainingSeconds <= 0) return;
+
+		this.isRunning = true;
+		this.updateUIState();
+		this.dispatchUpdate();
+
+		if (!this.audioContext) {
+			this.audioContext = getAudioContext();
+		}
+
+		if (this.audioContext?.state === "suspended") {
+			this.audioContext.resume().catch(() => {
+				console.warn("Could not resume AudioContext");
+			});
+		}
+
+		this.intervalId = window.setInterval(() => {
+			this.tick();
+		}, 1000);
+	}
+
+	pause() {
+		this.isRunning = false;
+		if (this.intervalId) {
+			clearInterval(this.intervalId);
+			this.intervalId = null;
+		}
+		this.updateUIState();
+		this.dispatchUpdate();
+	}
+
+	reset() {
+		this.pause();
+		this.setDisplay(0);
+		this.remainingSeconds = 0;
+		this.totalSeconds = 0;
+		this.statusText.textContent = "Listo";
+		this.statusText.classList.remove("running", "finished");
+		this.element.classList.remove("finished");
+		this.dispatchUpdate();
+	}
+
+	tick() {
+		if (this.remainingSeconds > 0) {
+			this.remainingSeconds--;
+			this.setDisplay(this.remainingSeconds);
+			this.updateProgressBar();
+			this.dispatchUpdate();
+		} else {
+			this.timeUp();
+		}
+	}
+
+	private timeUp() {
+		this.pause();
+		this.playAlarm();
+		this.statusText.textContent = "¡TIEMPO!";
+		this.statusText.classList.add("finished");
+		this.element.classList.add("finished");
+
+		if ("Notification" in window && Notification.permission === "granted") {
+			new Notification(`Temporizador Terminado de ${this.getName()}`);
+		}
+		this.dispatchUpdate();
+	}
+
+	private playAlarm() {
+		if (!this.audioContext) return;
+
+		const playTone = () => {
+			try {
+				playBeep(this.audioContext!, 880, 0.1);
+				setTimeout(() => playBeep(this.audioContext!, 440, 0.1), 200);
+				setTimeout(() => playBeep(this.audioContext!, 880, 0.2), 400);
+			} catch {
+				console.warn("Could not play alarm tone");
+			}
+		};
+
+		playTone();
+		let count = 0;
+		const alarmInterval = setInterval(() => {
+			if (++count > 5) clearInterval(alarmInterval);
+			else playTone();
+		}, 1000);
+	}
+
+	private updateUIState() {
+		if (this.isRunning) {
+			this.updateUIRunning();
+		} else {
+			this.updateUIPaused();
+		}
+		this.checkStartButton();
+	}
+
+	private updateUIRunning() {
+		const btnText = this.element.querySelector(".btn-toggle .btn-text");
+		const iconPlay = this.element.querySelector(".icon-play");
+		const iconPause = this.element.querySelector(".icon-pause");
+		if (btnText) btnText.textContent = "Pausar";
+		iconPlay?.setAttribute("style", "display: none;");
+		iconPause?.removeAttribute("style");
+		this.element.classList.add("running");
+		this.statusText.classList.add("running");
+		this.statusText.textContent = "Corriendo";
+		Object.values(this.inputs).forEach((i) => (i.disabled = true));
+	}
+
+	private updateUIPaused() {
+		const btnText = this.element.querySelector(".btn-toggle .btn-text");
+		const iconPlay = this.element.querySelector(".icon-play");
+		const iconPause = this.element.querySelector(".icon-pause");
+		if (btnText) btnText.textContent = "Iniciar";
+		iconPlay?.removeAttribute("style");
+		iconPause?.setAttribute("style", "display: none;");
+		this.element.classList.remove("running");
+		this.statusText.classList.remove("running");
+		this.statusText.textContent = this.remainingSeconds > 0 && this.remainingSeconds < this.totalSeconds ? "Pausado" : "Listo";
+		Object.values(this.inputs).forEach((i) => (i.disabled = false));
+	}
+
+	private checkStartButton() {
+		const canStart = this.isRunning || this.getInputSeconds() > 0;
+		this.btnToggle.disabled = !canStart;
+		this.btnToggle.classList.toggle("disabled", !canStart);
+	}
+
+	private updateProgressBar() {
+		if (this.totalSeconds === 0) return;
+		const progress = 1 - this.remainingSeconds / this.totalSeconds;
+		const progressFill = this.element.querySelector(".progress-fill") as HTMLElement;
+		if (progressFill) {
+			progressFill.style.transform = `scaleX(${progress})`;
+		}
+	}
+
+	private dispatchUpdate() {
+		this.dispatchEvent(new CustomEvent("update", { detail: this }));
+	}
+
+	public getName(): string {
+		return this.timerNameInput.value;
+	}
+}

package/src/tool/kitchen-timer/seo.astro

@@ -0,0 +1,8 @@
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { content } from './i18n/es';
+
+const locale = 'es';
+---
+
+<SEORenderer content={{ sections: content.seo, locale }} />

package/src/tool/meringue-peak/MeringueCalculator.css

@@ -0,0 +1,298 @@
+.meringue-calculator-container {
+    --primary: #f472b6;
+    --primary-dark: #db2777;
+    --text-dark: #1e293b;
+    --text-muted: #64748b;
+    --text-light: #cbd5e1;
+    --bg-light: #f1f5f9;
+    --border-dark: #334155;
+    --border-muted: #e2e8f0;
+    --pink-light: #f472b6;
+    --card-bg: #fff;
+    --card-border: #e2e8f0;
+    --card-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
+    --card-hover-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.15);
+    --input-bg: #fff;
+    --input-border: #e2e8f0;
+    --input-dark-bg: #334155;
+    --input-dark-border: #475569;
+    --time-bg: #f1f5f9;
+    --pro-tip-bg: #fdf2f8;
+    --pro-tip-border: #f472b6;
+
+    max-width: 800px;
+    margin: 2rem auto;
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+}
+
+.theme-dark .meringue-calculator-container {
+    --text-dark: #f1f5f9;
+    --text-muted: #94a3b8;
+    --text-light: #cbd5e1;
+    --bg-light: #1e293b;
+    --border-dark: #475569;
+    --border-muted: #334155;
+    --card-bg: #1e293b;
+    --card-border: #334155;
+    --card-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
+    --card-hover-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.3);
+    --input-bg: #334155;
+    --input-border: #475569;
+    --input-dark-bg: #1e293b;
+    --input-dark-border: #475569;
+    --time-bg: #1e293b;
+    --pro-tip-bg: #4c1d3a;
+    --pro-tip-border: #db2777;
+}
+
+.meringue-card {
+    background: var(--card-bg);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid var(--card-border);
+    border-radius: 24px;
+    padding: 2.5rem;
+    box-shadow: var(--card-shadow);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.meringue-card:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--card-hover-shadow);
+}
+
+.meringue-input-section {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+    margin-bottom: 2.5rem;
+}
+
+@media (max-width: 640px) {
+    .meringue-input-section {
+        grid-template-columns: 1fr;
+    }
+}
+
+.meringue-input-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.meringue-input-group label {
+    font-size: 0.875rem;
+    font-weight: 700;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.meringue-input-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+.meringue-input-wrapper input {
+    width: 100%;
+    padding: 1rem 1.25rem;
+    padding-right: 3rem;
+    border-radius: 16px;
+    border: 2px solid var(--input-border);
+    background: var(--input-bg);
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: var(--text-dark);
+    transition: all 0.2s ease;
+    outline: none;
+}
+
+.meringue-input-wrapper input:focus {
+    border-color: var(--primary);
+    box-shadow: 0 0 0 4px rgba(244, 114, 182, 0.1);
+}
+
+.theme-dark .meringue-input-wrapper input:focus {
+    box-shadow: 0 0 0 4px rgba(244, 114, 182, 0.2);
+}
+
+.meringue-input-unit {
+    position: absolute;
+    right: 1.25rem;
+    font-weight: 700;
+    color: var(--text-light);
+    pointer-events: none;
+}
+
+.meringue-type-selector {
+    display: flex;
+    background: var(--bg-light);
+    padding: 0.5rem;
+    border-radius: 16px;
+    gap: 0.25rem;
+}
+
+.meringue-type-btn {
+    flex: 1;
+    padding: 0.75rem;
+    border: none;
+    background: transparent;
+    border-radius: 12px;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--text-muted);
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.meringue-type-btn.active {
+    background: var(--card-bg);
+    color: var(--primary-dark);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+}
+
+.theme-dark .meringue-type-btn.active {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+.meringue-results-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 1.5rem;
+}
+
+.meringue-result-item {
+    background: var(--time-bg);
+    border: 1px solid var(--card-border);
+    border-radius: 20px;
+    padding: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    transition: all 0.2s ease;
+}
+
+.meringue-result-item:hover {
+    background: var(--card-bg);
+    transform: scale(1.02);
+}
+
+.meringue-result-label {
+    font-size: 0.75rem;
+    font-weight: 700;
+    color: var(--text-light);
+    text-transform: uppercase;
+}
+
+.meringue-result-value {
+    font-size: 1.5rem;
+    font-weight: 800;
+    color: var(--text-dark);
+    display: flex;
+    align-items: baseline;
+    gap: 0.25rem;
+}
+
+.meringue-result-unit {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--text-light);
+}
+
+.meringue-time-section {
+    margin-top: 2.5rem;
+    padding-top: 2.5rem;
+    border-top: 1px solid var(--card-border);
+}
+
+.meringue-time-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.meringue-time-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem 1.5rem;
+    border-radius: 16px;
+    background: var(--time-bg);
+    transition: all 0.2s ease;
+}
+
+.meringue-time-info {
+    display: flex;
+    flex-direction: column;
+}
+
+.meringue-time-stage {
+    font-weight: 700;
+    color: var(--border-dark);
+}
+
+.meringue-time-desc {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+}
+
+.meringue-time-val {
+    font-weight: 800;
+    color: var(--primary-dark);
+    font-size: 1.125rem;
+}
+
+.theme-dark .meringue-time-val {
+    color: var(--primary);
+}
+
+.meringue-pro-tip {
+    margin-top: 2rem;
+    padding: 1.25rem;
+    border-radius: 16px;
+    background: var(--pro-tip-bg);
+    border: 1px dashed var(--pro-tip-border);
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+}
+
+.meringue-pro-tip svg {
+    color: var(--primary-dark);
+    flex-shrink: 0;
+}
+
+.theme-dark .meringue-pro-tip svg {
+    color: var(--primary);
+}
+
+.meringue-pro-tip p {
+    font-size: 0.875rem;
+    color: var(--primary-dark);
+    line-height: 1.5;
+    margin: 0;
+}
+
+.theme-dark .meringue-pro-tip p {
+    color: var(--pink-light);
+}
+
+.meringue-fade-in {
+    animation: meringue-fade-in 0.5s ease forwards;
+}
+
+@keyframes meringue-fade-in {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}

package/src/tool/meringue-peak/bibliography.astro

@@ -0,0 +1,6 @@
+---
+import { Bibliography } from '@jjlmoya/utils-shared';
+import { content } from './i18n/es';
+---
+
+<Bibliography links={content.bibliography} />