@jjlmoya/utils-cooking 1.2.0

package/src/tool/cookware-guide/init.ts

@@ -0,0 +1,174 @@
+type CookingStyle = 'sear' | 'delicate' | 'stew' | 'fast';
+type MaintenanceLevel = 'lazy' | 'care' | 'ritual';
+
+interface State {
+	style: CookingStyle | null;
+	maint: MaintenanceLevel | null;
+}
+
+interface MaterialData {
+	name: string;
+	tag: string;
+	grad: string;
+	icon: string;
+	pros: string;
+	cons: string;
+	tip: string;
+}
+
+interface MaterialGrads {
+	stainless: string;
+	nonstick: string;
+	castiron: string;
+	carbon: string;
+	enameled: string;
+}
+
+const GRADS: MaterialGrads = {
+	stainless: 'linear-gradient(135deg, hsl(217, 33%, 37%), hsl(217, 33%, 17%))',
+	nonstick: 'linear-gradient(135deg, hsl(280, 8%, 43%), hsl(217, 33%, 7%))',
+	castiron: 'linear-gradient(135deg, hsl(24, 77%, 25%), hsl(217, 33%, 7%))',
+	carbon: 'linear-gradient(135deg, hsl(217, 60%, 27%), hsl(217, 33%, 7%))',
+	enameled: 'linear-gradient(135deg, hsl(0, 74%, 42%), hsl(0, 74%, 17%))',
+};
+
+function createMaterial(ui: Record<string, string>, prefix: string, grad: string, icon: string): MaterialData {
+	return {
+		name: ui[`${prefix}Name`],
+		tag: ui[`${prefix}Tag`],
+		grad,
+		icon,
+		pros: ui[`${prefix}Pro`],
+		cons: ui[`${prefix}Con`],
+		tip: ui[`${prefix}Tip`],
+	};
+}
+
+function buildMaterialDB(ui: Record<string, string>): Record<string, MaterialData> {
+	return {
+		stainless: createMaterial(ui, 'stainless', GRADS.stainless, 'stainless'),
+		nonstick: createMaterial(ui, 'nonstick', GRADS.nonstick, 'nonstick'),
+		castiron: createMaterial(ui, 'castiron', GRADS.castiron, 'castiron'),
+		carbon: createMaterial(ui, 'carbon', GRADS.carbon, 'carbon'),
+		enameled: createMaterial(ui, 'enamel', GRADS.enameled, 'enameled'),
+	};
+}
+
+const LOGIC: Record<CookingStyle, Record<MaintenanceLevel, string>> = {
+	sear: { lazy: 'stainless', care: 'stainless', ritual: 'castiron' },
+	delicate: { lazy: 'nonstick', care: 'nonstick', ritual: 'carbon' },
+	stew: { lazy: 'stainless', care: 'enameled', ritual: 'enameled' },
+	fast: { lazy: 'stainless', care: 'stainless', ritual: 'carbon' },
+};
+
+interface CookwareElements {
+	styleButtons: NodeListOf<Element>;
+	maintButtons: NodeListOf<Element>;
+	progressBar: HTMLElement;
+	cardGrad: HTMLElement;
+	resName: HTMLElement;
+	resTag: HTMLElement;
+	resPros: HTMLElement;
+	resCons: HTMLElement;
+	resTip: HTMLElement;
+	resDetails: HTMLElement;
+	iconPlaceholder: HTMLElement | null;
+	resultIcons: NodeListOf<Element>;
+}
+
+function getRequiredElement(id: string): HTMLElement | null {
+	return document.getElementById(id);
+}
+
+function setupElements(): CookwareElements | null {
+	const progressBar = getRequiredElement('progress-bar');
+	const cardGrad = getRequiredElement('card-grad');
+	const resName = getRequiredElement('res-name');
+	const resTag = getRequiredElement('res-tag');
+	const resPros = getRequiredElement('res-pros');
+	const resCons = getRequiredElement('res-cons');
+	const resTip = getRequiredElement('res-tip');
+	const resDetails = getRequiredElement('res-details');
+
+	const required = [progressBar, cardGrad, resName, resTag, resPros, resCons, resTip, resDetails];
+	if (required.some((el) => !el)) return null;
+
+	return {
+		styleButtons: document.querySelectorAll('.style-btn'),
+		maintButtons: document.querySelectorAll('.maint-btn'),
+		progressBar: progressBar as HTMLElement,
+		cardGrad: cardGrad as HTMLElement,
+		resName: resName as HTMLElement,
+		resTag: resTag as HTMLElement,
+		resPros: resPros as HTMLElement,
+		resCons: resCons as HTMLElement,
+		resTip: resTip as HTMLElement,
+		resDetails: resDetails as HTMLElement,
+		iconPlaceholder: getRequiredElement('icon-placeholder'),
+		resultIcons: document.querySelectorAll('.cw-result-icon'),
+	};
+}
+
+function updateDisplay(state: State, els: CookwareElements, db: Record<string, MaterialData>): void {
+	const progress = (state.style ? 50 : 0) + (state.maint ? 50 : 0);
+	els.progressBar.style.width = `${progress}%`;
+
+	if (!state.style || !state.maint) return;
+
+	const key = LOGIC[state.style][state.maint];
+	const data = db[key];
+
+	els.cardGrad.style.background = data.grad;
+	els.resName.textContent = data.name;
+	els.resTag.textContent = data.tag;
+	els.resPros.textContent = data.pros;
+	els.resCons.textContent = data.cons;
+	els.resTip.textContent = `"${data.tip}"`;
+	els.resDetails.classList.remove('cw-hidden');
+
+	if (els.iconPlaceholder) {
+		els.iconPlaceholder.classList.add('cw-hidden');
+	}
+	els.resultIcons.forEach((icon) => icon.classList.add('cw-hidden'));
+	const targetIcon = document.getElementById(`icon-${key}`);
+	if (targetIcon) {
+		targetIcon.classList.remove('cw-hidden');
+	}
+}
+
+function setupStyleButtons(styleButtons: NodeListOf<Element>, state: State, els: CookwareElements, db: Record<string, MaterialData>): void {
+	styleButtons.forEach((btn) => {
+		btn.addEventListener('click', () => {
+			styleButtons.forEach((b) => b.classList.remove('active'));
+			btn.classList.add('active');
+			state.style = (btn as HTMLElement).dataset.value as CookingStyle;
+			updateDisplay(state, els, db);
+		});
+	});
+}
+
+function setupMaintenanceButtons(maintButtons: NodeListOf<Element>, state: State, els: CookwareElements, db: Record<string, MaterialData>): void {
+	maintButtons.forEach((btn) => {
+		btn.addEventListener('click', () => {
+			maintButtons.forEach((b) => b.classList.remove('active'));
+			btn.classList.add('active');
+			state.maint = (btn as HTMLElement).dataset.value as MaintenanceLevel;
+			updateDisplay(state, els, db);
+		});
+	});
+}
+
+export function initCookwareGuide(ui: Record<string, string>): void {
+	const els = setupElements();
+	if (!els) return;
+
+	const state: State = { style: null, maint: null };
+	const db = buildMaterialDB(ui);
+
+	if (ui.defaultTip) {
+		els.resTip.textContent = `"${ui.defaultTip}"`;
+	}
+
+	setupStyleButtons(els.styleButtons, state, els, db);
+	setupMaintenanceButtons(els.maintButtons, state, els, db);
+}

package/src/tool/cookware-guide/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/egg-timer/EggTimer.css

@@ -0,0 +1,503 @@
+.egg-timer-wrapper {
+    --color-primary: #eab308;
+    --color-secondary: #f59e0b;
+    --color-tertiary: #ea580c;
+    --color-bg: #fff;
+    --color-bg-secondary: #f9fafb;
+    --color-border: #e5e7eb;
+    --color-text-primary: #111827;
+    --color-text-secondary: #4b5563;
+    --color-text-tertiary: #6b7280;
+    --color-soft: #fef08a;
+    --color-soft-bg: #fef08a;
+    --color-soft-text: #713f12;
+    --color-mollet: #fbbf24;
+    --color-mollet-bg: #fbbf24;
+    --color-mollet-text: #92400e;
+    --color-hard: #b45309;
+    --color-hard-text: #78350f;
+    --color-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+    --color-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+    --color-ring: rgba(234, 179, 8, 0.5);
+}
+
+.theme-dark .egg-timer-wrapper {
+    --color-bg: #1f2937;
+    --color-bg-secondary: #111827;
+    --color-border: #374151;
+    --color-text-primary: #f3f4f6;
+    --color-text-secondary: #d1d5db;
+    --color-text-tertiary: #9ca3af;
+    --color-soft-bg: #78350f;
+    --color-soft-text: #fef08a;
+    --color-mollet-bg: #92400e;
+    --color-mollet-text: #fbbf24;
+    --color-hard-text: #fbbf24;
+    --color-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
+    --color-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
+    --color-ring: rgba(234, 179, 8, 0.3);
+}
+
+.egg-timer-container {
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem 1rem;
+}
+
+.egg-timer-grid {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    gap: 2rem;
+    margin-bottom: 2rem;
+}
+
+@media (max-width: 1024px) {
+    .egg-timer-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+.egg-timer-card {
+    background-color: var(--color-bg);
+    border: 1px solid var(--color-border);
+    border-radius: 1.5rem;
+    padding: 1.5rem;
+    box-shadow: var(--color-shadow);
+    transition: all 0.3s ease;
+}
+
+.egg-timer-card:hover {
+    box-shadow: var(--color-shadow-lg);
+}
+
+.egg-timer-title {
+    font-size: 1.125rem;
+    font-weight: 700;
+    color: var(--color-text-primary);
+    margin-bottom: 1rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.egg-timer-title svg {
+    width: 1.25rem;
+    height: 1.25rem;
+    color: var(--color-primary);
+}
+
+.egg-timer-controls-space {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.egg-timer-control-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.egg-timer-label-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.5rem;
+}
+
+.egg-timer-label {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--color-text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.egg-timer-buttons-group {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.5rem;
+}
+
+.egg-timer-btn {
+    padding: 0.75rem;
+    border-radius: 0.75rem;
+    border: 1px solid var(--color-border);
+    background-color: var(--color-bg-secondary);
+    color: var(--color-text-secondary);
+    font-size: 0.875rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.25rem;
+}
+
+.egg-timer-btn:hover {
+    background-color: var(--color-bg);
+    border-color: var(--color-primary);
+}
+
+.egg-timer-btn.active {
+    border-color: var(--color-primary);
+    background-color: var(--color-soft);
+    color: var(--color-text-primary);
+    box-shadow: 0 0 0 1px var(--color-primary);
+}
+
+.theme-dark .egg-timer-btn.active {
+    background-color: rgba(234, 179, 8, 0.1);
+    color: var(--color-primary);
+}
+
+.egg-timer-btn svg {
+    width: 1.25rem;
+    height: 1.25rem;
+}
+
+.egg-timer-size-buttons {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 0.5rem;
+}
+
+.egg-timer-size-btn {
+    padding: 0.5rem;
+    border-radius: 0.75rem;
+    border: 1px solid var(--color-border);
+    background-color: var(--color-bg-secondary);
+    color: var(--color-text-secondary);
+    font-size: 0.875rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.egg-timer-size-btn:hover {
+    border-color: var(--color-primary);
+    background-color: var(--color-bg);
+}
+
+.egg-timer-size-btn.active {
+    border-color: var(--color-primary);
+    background-color: var(--color-soft);
+    color: var(--color-text-primary);
+    box-shadow: 0 0 0 1px var(--color-primary);
+}
+
+.theme-dark .egg-timer-size-btn.active {
+    background-color: rgba(234, 179, 8, 0.1);
+    color: var(--color-primary);
+}
+
+.egg-timer-input-wrapper {
+    position: relative;
+    display: flex;
+}
+
+.egg-timer-input {
+    width: 100%;
+    padding: 0.75rem 3rem 0.75rem 1rem;
+    border-radius: 0.75rem;
+    border: 1px solid var(--color-border);
+    background-color: var(--color-bg-secondary);
+    color: var(--color-text-primary);
+    font-size: 1rem;
+    transition: all 0.2s ease;
+}
+
+.egg-timer-input:focus {
+    outline: none;
+    border-color: var(--color-primary);
+    box-shadow: 0 0 0 2px var(--color-ring);
+}
+
+.egg-timer-input-buttons {
+    position: absolute;
+    right: 0.5rem;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    gap: 0.25rem;
+}
+
+.egg-timer-quick-btn {
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.5rem;
+    border: 1px solid var(--color-border);
+    background-color: var(--color-bg-secondary);
+    color: var(--color-text-secondary);
+    font-size: 0.625rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.egg-timer-quick-btn:hover {
+    background-color: var(--color-bg);
+    border-color: var(--color-primary);
+    color: var(--color-primary);
+}
+
+.egg-timer-help-text {
+    font-size: 0.75rem;
+    color: var(--color-text-tertiary);
+    margin-top: 0.5rem;
+}
+
+.egg-timer-results {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.egg-timer-result-card {
+    background-color: var(--color-bg);
+    border: 1px solid var(--color-border);
+    border-radius: 1.5rem;
+    padding: 1.5rem;
+    transition: all 0.3s ease;
+    cursor: default;
+}
+
+.egg-timer-result-card:hover {
+    box-shadow: var(--color-shadow-lg);
+    border-color: var(--color-primary);
+}
+
+.egg-timer-result-card.soft {
+    background-color: var(--color-bg);
+}
+
+.egg-timer-result-card.mollet {
+    background-color: var(--color-bg);
+    border: 2px solid var(--color-mollet);
+    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.1);
+}
+
+.theme-dark .egg-timer-result-card.mollet {
+    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15);
+}
+
+.egg-timer-result-card.hard {
+    background-color: var(--color-bg);
+}
+
+.egg-timer-result-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+}
+
+.egg-timer-result-title {
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: var(--color-text-primary);
+}
+
+.egg-timer-result-subtitle {
+    font-size: 0.875rem;
+    color: var(--color-text-secondary);
+    margin-top: 0.25rem;
+}
+
+.egg-timer-result-icon {
+    width: 2rem;
+    height: 2rem;
+    color: var(--color-primary);
+}
+
+.egg-timer-result-card.mollet .egg-timer-result-icon {
+    color: var(--color-mollet);
+}
+
+.egg-timer-result-card.hard .egg-timer-result-icon {
+    color: var(--color-hard);
+}
+
+.egg-timer-result-time {
+    font-size: 2.25rem;
+    font-weight: 900;
+    color: var(--color-text-primary);
+    letter-spacing: -0.05em;
+}
+
+.egg-timer-result-card.mollet .egg-timer-result-time {
+    color: var(--color-mollet);
+}
+
+.egg-timer-result-card.hard .egg-timer-result-time {
+    color: var(--color-hard);
+}
+
+.egg-timer-seo-section {
+    background-color: var(--color-bg);
+    border: 1px solid var(--color-border);
+    border-radius: 1.5rem;
+    padding: 2rem;
+    margin-top: 2rem;
+}
+
+.egg-timer-seo-title {
+    font-size: 1.875rem;
+    font-weight: 700;
+    color: var(--color-text-primary);
+    margin-bottom: 1.5rem;
+}
+
+.egg-timer-seo-subtitle {
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: var(--color-text-primary);
+    margin-bottom: 1rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-top: 1.5rem;
+}
+
+.egg-timer-seo-subtitle:not(:first-of-type) {
+    margin-top: 2rem;
+}
+
+.egg-timer-seo-subtitle svg {
+    width: 1.5rem;
+    height: 1.5rem;
+    color: var(--color-primary);
+}
+
+.egg-timer-seo-text {
+    font-size: 1rem;
+    line-height: 1.625;
+    color: var(--color-text-secondary);
+    margin-bottom: 1rem;
+}
+
+.egg-timer-seo-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 1.5rem;
+    margin-bottom: 1.5rem;
+}
+
+.egg-timer-seo-card {
+    background-color: var(--color-bg-secondary);
+    border-radius: 1rem;
+    padding: 1.5rem;
+    transition: all 0.2s ease;
+}
+
+.egg-timer-seo-card:hover {
+    background-color: var(--color-soft);
+}
+
+.theme-dark .egg-timer-seo-card:hover {
+    background-color: rgba(234, 179, 8, 0.1);
+}
+
+.egg-timer-seo-card-title {
+    font-weight: 700;
+    color: var(--color-primary);
+    margin-bottom: 0.75rem;
+    font-size: 0.875rem;
+}
+
+.egg-timer-seo-card-heading {
+    font-weight: 700;
+    color: var(--color-text-primary);
+    margin-bottom: 0.5rem;
+}
+
+.egg-timer-seo-card-text {
+    font-size: 0.875rem;
+    color: var(--color-text-secondary);
+    line-height: 1.5;
+}
+
+.egg-timer-formula-box {
+    background-color: var(--color-bg-secondary);
+    border-radius: 0.75rem;
+    padding: 1rem;
+    font-size: 0.875rem;
+    color: var(--color-text-secondary);
+    margin-bottom: 1rem;
+    overflow-x: auto;
+}
+
+.egg-timer-formula-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.egg-timer-formula-list li {
+    font-size: 0.875rem;
+    color: var(--color-text-secondary);
+}
+
+.egg-timer-formula-list strong {
+    color: var(--color-text-primary);
+}
+
+.egg-timer-tips-list {
+    list-style-position: inside;
+    color: var(--color-text-secondary);
+    font-size: 0.95rem;
+    line-height: 1.75;
+    margin-bottom: 1rem;
+}
+
+.egg-timer-tips-list li {
+    margin-bottom: 0.75rem;
+}
+
+.egg-timer-tips-list strong {
+    color: var(--color-text-primary);
+}
+
+.egg-timer-links {
+    font-size: 0.75rem;
+    color: var(--color-text-tertiary);
+    border-top: 1px solid var(--color-border);
+    padding-top: 1.5rem;
+    margin-top: 1.5rem;
+}
+
+.egg-timer-links-title {
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+    color: var(--color-text-secondary);
+}
+
+.egg-timer-links-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+
+.egg-timer-links-list a {
+    color: inherit;
+    text-decoration: none;
+    transition: color 0.2s ease;
+}
+
+.egg-timer-links-list a:hover {
+    color: var(--color-primary);
+}
+
+.egg-timer-hr {
+    border: none;
+    border-top: 1px solid var(--color-border);
+    margin: 2rem 0;
+}

package/src/tool/egg-timer/bibliography.astro

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