@jjlmoya/utils-cooking 1.2.0

package/src/tool/brine/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/cookware-guide/CookwareGuide.css

@@ -0,0 +1,487 @@
+:root {
+	--cw-primary: hsl(240deg, 94%, 60%);
+	--cw-primary-light: hsl(240deg, 100%, 95%);
+	--cw-primary-dark: hsl(240deg, 50%, 25%);
+	--cw-bg-card: hsl(0deg, 0%, 100%);
+	--cw-bg-dark: hsl(217deg, 33%, 17%);
+	--cw-bg-app: hsl(210deg, 40%, 98%);
+	--cw-border: hsl(210deg, 14%, 89%);
+	--cw-text-main: hsl(210deg, 40%, 14%);
+	--cw-text-muted: hsl(210deg, 8%, 40%);
+	--cw-text-light: hsl(0deg, 0%, 100%);
+	--cw-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
+	--cw-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
+	--cw-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
+	--cw-radius: 1.5rem;
+	--cw-radius-sm: 0.75rem;
+	--cw-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+	--cw-orange: hsl(33deg, 100%, 50%);
+	--cw-yellow: hsl(45deg, 100%, 50%);
+	--cw-red: hsl(0deg, 100%, 50%);
+	--cw-blue: hsl(217deg, 100%, 50%);
+	--cw-green: hsl(142deg, 76%, 36%);
+}
+
+.theme-dark {
+	--cw-bg-card: hsl(217deg, 33%, 12%);
+	--cw-bg-app: hsl(217deg, 39%, 8%);
+	--cw-border: hsl(217deg, 33%, 25%);
+	--cw-text-main: hsl(210deg, 40%, 98%);
+	--cw-text-muted: hsl(210deg, 14%, 55%);
+	--cw-primary-light: hsl(240deg, 100%, 12%);
+}
+
+.cw-container {
+	width: 100%;
+	max-width: 100%;
+	padding: 1rem;
+}
+
+.cw-card {
+	background: var(--cw-bg-card);
+	border: 1px solid var(--cw-border);
+	border-radius: var(--cw-radius);
+	box-shadow: var(--cw-shadow-xl);
+	overflow: hidden;
+	transition: var(--cw-transition);
+}
+
+.cw-progress-bar {
+	height: 0.375rem;
+	width: 0%;
+	background: linear-gradient(to right, var(--cw-primary), hsl(270deg, 94%, 60%));
+	transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.cw-content {
+	padding: 2rem;
+}
+
+@media (max-width: 1024px) {
+	.cw-content {
+		padding: 1.5rem;
+	}
+}
+
+@media (max-width: 640px) {
+	.cw-content {
+		padding: 1rem;
+	}
+}
+
+.cw-grid {
+	display: grid;
+	grid-template-columns: 1fr;
+	gap: 2rem;
+}
+
+@media (min-width: 1024px) {
+	.cw-grid {
+		grid-template-columns: 1.4fr 1fr;
+		gap: 2rem;
+	}
+}
+
+.cw-left {
+	display: flex;
+	flex-direction: column;
+	gap: 2rem;
+}
+
+.cw-right {
+	display: flex;
+	flex-direction: column;
+	gap: 1.5rem;
+}
+
+.cw-section {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+}
+
+.cw-step-label {
+	display: flex;
+	align-items: center;
+	gap: 0.75rem;
+	font-size: 0.625rem;
+	font-weight: 900;
+	color: var(--cw-text-muted);
+	text-transform: uppercase;
+	letter-spacing: 0.2em;
+}
+
+.cw-step-number {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 1.25rem;
+	height: 1.25rem;
+	border-radius: 50%;
+	background: var(--cw-primary-light);
+	color: var(--cw-primary);
+	font-weight: 900;
+	font-size: 0.625rem;
+	flex-shrink: 0;
+}
+
+.theme-dark .cw-step-number {
+	background: hsl(240deg, 100%, 20%);
+}
+
+/* Style Grid (4 buttons in 2x2) */
+.cw-style-grid {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: 0.75rem;
+}
+
+@media (min-width: 640px) {
+	.cw-style-grid {
+		grid-template-columns: repeat(2, 1fr);
+	}
+}
+
+.cw-style-btn {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 0.5rem;
+	padding: 1rem;
+	border: 2px solid var(--cw-border);
+	border-radius: var(--cw-radius-sm);
+	background: var(--cw-bg-card);
+	color: var(--cw-text-muted);
+	cursor: pointer;
+	transition: var(--cw-transition);
+	text-align: left;
+	font-size: inherit;
+}
+
+.cw-style-btn:hover {
+	border-color: var(--cw-primary-light);
+	box-shadow: var(--cw-shadow-md);
+}
+
+.cw-style-btn.active {
+	background: var(--cw-primary-light);
+	border-color: var(--cw-primary);
+	color: var(--cw-primary);
+}
+
+.theme-dark .cw-style-btn.active {
+	background: hsl(240deg, 100%, 20%);
+}
+
+.cw-icon {
+	width: 1.5rem;
+	height: 1.5rem;
+}
+
+.cw-icon-orange {
+	color: var(--cw-orange);
+}
+
+.cw-icon-yellow {
+	color: var(--cw-yellow);
+}
+
+.cw-icon-red {
+	color: var(--cw-red);
+}
+
+.cw-icon-blue {
+	color: var(--cw-blue);
+}
+
+.cw-icon-large {
+	width: 6rem;
+	height: 6rem;
+	color: var(--cw-text-light);
+}
+
+.cw-style-name {
+	font-size: 0.75rem;
+	font-weight: 900;
+	display: block;
+	color: var(--cw-text-main);
+}
+
+.cw-style-btn.active .cw-style-name {
+	color: var(--cw-primary);
+}
+
+.cw-style-desc {
+	font-weight: 600;
+	opacity: 0.7;
+	display: block;
+	text-transform: uppercase;
+}
+
+/* Maintenance Grid (3 buttons) */
+.cw-maint-grid {
+	display: grid;
+	grid-template-columns: 1fr;
+	gap: 0.75rem;
+}
+
+@media (min-width: 640px) {
+	.cw-maint-grid {
+		grid-template-columns: repeat(3, 1fr);
+	}
+}
+
+.cw-maint-btn {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	text-align: center;
+	gap: 0.75rem;
+	padding: 1.25rem;
+	border: 2px solid var(--cw-border);
+	border-radius: var(--cw-radius-sm);
+	background: var(--cw-bg-card);
+	color: var(--cw-text-muted);
+	cursor: pointer;
+	transition: var(--cw-transition);
+	font-size: inherit;
+}
+
+.cw-maint-btn:hover {
+	border-color: var(--cw-primary-light);
+	box-shadow: var(--cw-shadow-md);
+}
+
+.cw-maint-btn.active {
+	background: var(--cw-primary-light);
+	border-color: var(--cw-primary);
+}
+
+.theme-dark .cw-maint-btn.active {
+	background: hsl(240deg, 100%, 20%);
+}
+
+.cw-maint-icon {
+	width: 3rem;
+	height: 3rem;
+	border-radius: var(--cw-radius-sm);
+	background: var(--cw-bg-app);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: var(--cw-text-muted);
+	transition: var(--cw-transition);
+}
+
+.cw-maint-btn.active .cw-maint-icon {
+	color: var(--cw-primary);
+}
+
+.cw-maint-btn:hover .cw-maint-icon {
+	color: var(--cw-primary);
+}
+
+.cw-maint-name {
+	font-size: 0.75rem;
+	font-weight: 900;
+	display: block;
+	color: var(--cw-text-main);
+}
+
+.cw-maint-btn.active .cw-maint-name {
+	color: var(--cw-primary);
+}
+
+.cw-maint-desc {
+	font-size: 0.625rem;
+	font-weight: 500;
+	opacity: 0.7;
+	display: block;
+	line-height: 1.3;
+}
+
+/* Result Card */
+.cw-result-card {
+	background: var(--cw-bg-dark);
+	border-radius: var(--cw-radius);
+	padding: 2rem;
+	color: var(--cw-text-light);
+	box-shadow: var(--cw-shadow-xl);
+	position: relative;
+	overflow: hidden;
+	min-height: 320px;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	transition: var(--cw-transition);
+}
+
+.cw-card-bg {
+	position: absolute;
+	inset: 0;
+	background: linear-gradient(135deg, hsl(217deg, 33%, 17%), hsl(217deg, 33%, 7%));
+	transition: background 1s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.cw-card-glow {
+	position: absolute;
+	right: -3rem;
+	top: -3rem;
+	width: 12rem;
+	height: 12rem;
+	background: rgba(255, 255, 255, 0.1);
+	border-radius: 50%;
+	filter: blur(3rem);
+	transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.cw-result-card:hover .cw-card-glow {
+	transform: scale(1.25);
+}
+
+.cw-card-content {
+	position: relative;
+	z-index: 10;
+	display: flex;
+	flex-direction: column;
+	gap: 1.5rem;
+	text-align: center;
+}
+
+.cw-icon-container {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 6rem;
+}
+
+.cw-result-icon {
+	display: none;
+}
+
+.cw-result-icon:not(.cw-hidden) {
+	display: block;
+}
+
+.cw-result-label {
+	font-size: 0.625rem;
+	font-weight: 900;
+	text-transform: uppercase;
+	letter-spacing: 0.3em;
+	color: rgba(255, 255, 255, 0.4);
+	margin-bottom: 0.5rem;
+}
+
+.cw-result-name {
+	font-size: 1.875rem;
+	font-weight: 900;
+	letter-spacing: -0.02em;
+	margin: 0;
+}
+
+.cw-result-tag {
+	font-size: 0.75rem;
+	font-weight: 500;
+	color: rgba(255, 255, 255, 0.6);
+	margin: 0;
+}
+
+.cw-result-details {
+	display: none;
+	grid-template-columns: 1fr 1fr;
+	gap: 0.75rem;
+	padding-top: 1rem;
+	border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.cw-result-details:not(.cw-hidden) {
+	display: grid;
+}
+
+.cw-detail-box {
+	background: rgba(255, 255, 255, 0.05);
+	border: 1px solid rgba(255, 255, 255, 0.05);
+	border-radius: var(--cw-radius-sm);
+	padding: 0.75rem;
+}
+
+.cw-detail-pro .cw-detail-label {
+	color: hsl(142deg, 76%, 56%);
+}
+
+.cw-detail-con .cw-detail-label {
+	color: hsl(0deg, 84%, 60%);
+}
+
+.cw-detail-label {
+	font-size: 0.5rem;
+	font-weight: 900;
+	text-transform: uppercase;
+	letter-spacing: 0.1em;
+	display: block;
+	margin-bottom: 0.25rem;
+}
+
+.cw-detail-text {
+	font-size: 0.625rem;
+	line-height: 1.4;
+	color: rgba(255, 255, 255, 0.9);
+	margin: 0;
+}
+
+/* Tip Card */
+.cw-tip-card {
+	background: var(--cw-bg-app);
+	border: 1px solid var(--cw-border);
+	border-radius: var(--cw-radius);
+	padding: 1.5rem;
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+}
+
+.cw-tip-header {
+	display: flex;
+	align-items: center;
+	gap: 0.75rem;
+}
+
+.cw-tip-icon {
+	padding: 0.5rem;
+	background: var(--cw-primary-light);
+	border-radius: var(--cw-radius-sm);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: var(--cw-primary);
+	flex-shrink: 0;
+}
+
+.theme-dark .cw-tip-icon {
+	background: hsl(240deg, 100%, 20%);
+}
+
+.cw-tip-title {
+	font-size: 0.875rem;
+	font-weight: 900;
+	color: var(--cw-text-main);
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+}
+
+.cw-tip-text {
+	font-size: 0.6875rem;
+	line-height: 1.6;
+	color: var(--cw-text-muted);
+	font-weight: 300;
+	font-style: italic;
+	background: var(--cw-bg-card);
+	padding: 1rem;
+	border-radius: var(--cw-radius-sm);
+	border: 1px solid var(--cw-border);
+	margin: 0;
+}
+
+.cw-hidden {
+	display: none;
+}

package/src/tool/cookware-guide/bibliography.astro

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

package/src/tool/cookware-guide/component.astro

@@ -0,0 +1,164 @@
+---
+import { Icon } from 'astro-icon/components';
+import './CookwareGuide.css';
+
+interface Props {
+	ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="cw-container" id="cookware-selector">
+	<div class="cw-card">
+		<div class="cw-progress-bar" id="progress-bar" style="width: 0%"></div>
+
+		<div class="cw-content">
+			<div class="cw-grid">
+				<div class="cw-left">
+					<div class="cw-section">
+						<label class="cw-step-label">
+							<span class="cw-step-number">1</span>
+							{ui.step1}
+						</label>
+
+						<div class="cw-style-grid">
+							<button class="cw-style-btn style-btn" data-value="sear">
+								<Icon name="mdi:fire" class="cw-icon cw-icon-orange" />
+								<span class="cw-style-name">{ui.highHeat}</span>
+								<span class="cw-style-desc">{ui.sear}</span>
+							</button>
+
+							<button class="cw-style-btn style-btn" data-value="delicate">
+								<Icon name="mdi:egg-fried" class="cw-icon cw-icon-yellow" />
+								<span class="cw-style-name">{ui.delicate}</span>
+								<span class="cw-style-desc">{ui.fry}</span>
+							</button>
+
+							<button class="cw-style-btn style-btn" data-value="stew">
+								<Icon name="mdi:pot-mix" class="cw-icon cw-icon-red" />
+								<span class="cw-style-name">{ui.stew}</span>
+								<span class="cw-style-desc">{ui.slowCook}</span>
+							</button>
+
+							<button class="cw-style-btn style-btn" data-value="fast">
+								<Icon name="mdi:flash" class="cw-icon cw-icon-blue" />
+								<span class="cw-style-name">{ui.fast}</span>
+								<span class="cw-style-desc">{ui.quick}</span>
+							</button>
+						</div>
+					</div>
+
+					<div class="cw-section">
+						<label class="cw-step-label">
+							<span class="cw-step-number">2</span>
+							{ui.step2}
+						</label>
+
+						<div class="cw-maint-grid">
+							<button class="cw-maint-btn maint-btn" data-value="lazy">
+								<div class="cw-maint-icon">
+									<Icon name="mdi:dishwasher" class="cw-icon" />
+								</div>
+								<span class="cw-maint-name">{ui.maintenanceLazy}</span>
+								<span class="cw-maint-desc">{ui.maintenanceLazyDesc}</span>
+							</button>
+
+							<button class="cw-maint-btn maint-btn" data-value="care">
+								<div class="cw-maint-icon">
+									<Icon name="mdi:hand-water" class="cw-icon" />
+								</div>
+								<span class="cw-maint-name">{ui.maintenanceCare}</span>
+								<span class="cw-maint-desc">{ui.maintenanceCareDesc}</span>
+							</button>
+
+							<button class="cw-maint-btn maint-btn" data-value="ritual">
+								<div class="cw-maint-icon">
+									<Icon name="mdi:diamond-stone" class="cw-icon" />
+								</div>
+								<span class="cw-maint-name">{ui.maintenanceRitual}</span>
+								<span class="cw-maint-desc">{ui.maintenanceRitualDesc}</span>
+							</button>
+						</div>
+					</div>
+				</div>
+
+				<div class="cw-right">
+					<div class="cw-result-card" id="final-card">
+						<div class="cw-card-bg" id="card-grad"></div>
+						<div class="cw-card-glow"></div>
+
+						<div class="cw-card-content">
+							<div class="cw-icon-container" id="res-icon-container">
+								<div id="icon-placeholder" class="cw-result-icon">
+									<Icon name="mdi:chef-hat" class="cw-icon cw-icon-large" />
+								</div>
+								<div id="icon-stainless" class="cw-result-icon cw-hidden">
+									<Icon name="mdi:shield-star-outline" class="cw-icon cw-icon-large" />
+								</div>
+								<div id="icon-nonstick" class="cw-result-icon cw-hidden">
+									<Icon name="mdi:feather" class="cw-icon cw-icon-large" />
+								</div>
+								<div id="icon-castiron" class="cw-result-icon cw-hidden">
+									<Icon name="mdi:weight-kilogram" class="cw-icon cw-icon-large" />
+								</div>
+								<div id="icon-carbon" class="cw-result-icon cw-hidden">
+									<Icon name="mdi:chef-hat" class="cw-icon cw-icon-large" />
+								</div>
+								<div id="icon-enameled" class="cw-result-icon cw-hidden">
+									<Icon name="mdi:pot" class="cw-icon cw-icon-large" />
+								</div>
+							</div>
+
+							<span class="cw-result-label">{ui.idealPan}</span>
+							<h3 class="cw-result-name" id="res-name">{ui.selectOptions}</h3>
+							<p class="cw-result-tag" id="res-tag">{ui.seeRecommendation}</p>
+
+							<div class="cw-result-details cw-hidden" id="res-details">
+								<div class="cw-detail-box cw-detail-pro">
+									<span class="cw-detail-label">{ui.pro}</span>
+									<p class="cw-detail-text" id="res-pros">-</p>
+								</div>
+								<div class="cw-detail-box cw-detail-con">
+									<span class="cw-detail-label">{ui.con}</span>
+									<p class="cw-detail-text" id="res-cons">-</p>
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<div class="cw-tip-card">
+						<div class="cw-tip-header">
+							<div class="cw-tip-icon">
+								<Icon name="mdi:lightbulb-on-outline" class="cw-icon" />
+							</div>
+							<span class="cw-tip-title">{ui.masterTip}</span>
+						</div>
+						<p class="cw-tip-text" id="res-tip">
+							"{ui.defaultTip}"
+						</p>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+
+<script>
+	import { initCookwareGuide } from './init';
+	window.__initCookwareGuide = initCookwareGuide;
+</script>
+
+<script define:vars={{ ui }} is:inline>
+	const init = () => {
+		if (window.__initCookwareGuide) {
+			window.__initCookwareGuide(ui);
+		}
+	};
+
+	if (document.readyState === 'loading') {
+		document.addEventListener('DOMContentLoaded', init);
+	} else {
+		init();
+	}
+</script>