@jjlmoya/utils-cooking 1.2.0

package/src/tool/roux-guide/RouxGuide.css

@@ -0,0 +1,483 @@
+:root {
+	--rg-primary: hsl(38deg, 92%, 50%);
+	--rg-primary-light: hsl(38deg, 92%, 90%);
+	--rg-primary-dark: hsl(38deg, 92%, 35%);
+	--rg-secondary: hsl(25deg, 95%, 53%);
+	--rg-bg-card: hsl(0deg, 0%, 100%);
+	--rg-bg-app: hsl(210deg, 20%, 98%);
+	--rg-border: hsl(210deg, 20%, 90%);
+	--rg-text-main: hsl(210deg, 30%, 20%);
+	--rg-text-muted: hsl(210deg, 15%, 50%);
+	--rg-text-disabled: hsl(210deg, 15%, 75%);
+	--rg-shadow-sm: 0 1px 2px 0 rgb(0, 0, 0, 0.05);
+	--rg-shadow-md: 0 4px 6px -1px rgb(0, 0, 0, 0.1), 0 2px 4px -2px rgb(0, 0, 0, 0.1);
+	--rg-shadow-lg: 0 10px 15px -3px rgb(0, 0, 0, 0.1), 0 4px 6px -4px rgb(0, 0, 0, 0.1);
+	--rg-radius: 1rem;
+	--rg-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.theme-dark {
+	--rg-bg-card: hsl(220deg, 25%, 12%);
+	--rg-bg-app: hsl(220deg, 30%, 7%);
+	--rg-border: hsl(220deg, 20%, 20%);
+	--rg-text-main: hsl(210deg, 20%, 95%);
+	--rg-text-muted: hsl(210deg, 15%, 70%);
+	--rg-text-disabled: hsl(210deg, 15%, 50%);
+	--rg-primary-light: hsl(38deg, 92%, 12%);
+}
+
+.rg-container {
+	width: 100%;
+	max-width: 100%;
+	padding: 1rem;
+}
+
+.rg-card {
+	background: var(--rg-bg-card);
+	border: 1px solid var(--rg-border);
+	border-radius: var(--rg-radius);
+	box-shadow: var(--rg-shadow-lg);
+	overflow: hidden;
+}
+
+.rg-progress-wrapper {
+	height: 0.375rem;
+	width: 100%;
+	background: var(--rg-bg-app);
+	position: relative;
+}
+
+.rg-progress-bar {
+	height: 100%;
+	background: linear-gradient(to right, var(--rg-primary), var(--rg-secondary));
+	transition: width var(--rg-transition);
+	width: 50%;
+}
+
+.rg-content {
+	padding: 2rem;
+}
+
+@media (max-width: 1024px) {
+	.rg-content {
+		padding: 1.5rem;
+	}
+}
+
+@media (max-width: 640px) {
+	.rg-content {
+		padding: 1rem;
+	}
+}
+
+.rg-grid {
+	display: grid;
+	grid-template-columns: 1fr;
+	gap: 3rem;
+}
+
+@media (min-width: 1024px) {
+	.rg-grid {
+		grid-template-columns: 1fr 1fr;
+	}
+}
+
+.rg-controls {
+	display: flex;
+	flex-direction: column;
+	gap: 2.5rem;
+}
+
+.rg-control-group {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+}
+
+.rg-label {
+	font-size: 0.75rem;
+	font-weight: 700;
+	color: var(--rg-text-muted);
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	display: flex;
+	align-items: center;
+	gap: 0.75rem;
+}
+
+.rg-step {
+	width: 1.5rem;
+	height: 1.5rem;
+	border-radius: 50%;
+	background: hsl(38deg, 92%, 90%);
+	color: var(--rg-primary);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-weight: 700;
+	font-size: 0.75rem;
+}
+
+.theme-dark .rg-step {
+	background: hsl(38deg, 92%, 12%);
+}
+
+.rg-volume-wrapper {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+}
+
+@media (min-width: 640px) {
+	.rg-volume-wrapper {
+		flex-direction: row;
+		gap: 1rem;
+	}
+}
+
+.rg-input-group {
+	position: relative;
+	flex: 1;
+}
+
+.rg-input {
+	width: 100%;
+	padding: 1rem 2rem 1rem 1rem;
+	border: 2px solid var(--rg-border);
+	border-radius: 0.75rem;
+	background: var(--rg-bg-app);
+	color: var(--rg-text-main);
+	font-weight: 600;
+	font-size: 1.875rem;
+	text-align: center;
+	transition: var(--rg-transition);
+}
+
+.rg-input:focus {
+	outline: none;
+	border-color: var(--rg-primary);
+	box-shadow: 0 0 0 3px hsl(38deg, 92%, 50%, 0.1);
+}
+
+.rg-unit {
+	position: absolute;
+	right: 1rem;
+	top: 50%;
+	transform: translateY(-50%);
+	color: var(--rg-text-muted);
+	font-weight: 600;
+	font-size: 0.875rem;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	pointer-events: none;
+}
+
+.rg-liquid-buttons {
+	display: grid;
+	grid-template-columns: repeat(4, 1fr);
+	gap: 0.5rem;
+}
+
+@media (max-width: 640px) {
+	.rg-liquid-buttons {
+		grid-template-columns: repeat(2, 1fr);
+	}
+}
+
+.rg-liquid-btn {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 0.75rem;
+	border: 2px solid var(--rg-border);
+	border-radius: 0.75rem;
+	background: var(--rg-bg-card);
+	color: var(--rg-text-muted);
+	cursor: pointer;
+	transition: var(--rg-transition);
+}
+
+.rg-liquid-btn:hover {
+	border-color: var(--rg-primary);
+	color: var(--rg-primary);
+}
+
+.rg-liquid-btn.active {
+	background: var(--rg-bg-app);
+	border-color: var(--rg-primary);
+	color: var(--rg-primary);
+	box-shadow: var(--rg-shadow-md);
+}
+
+.rg-btn-icon {
+	width: 1.5rem;
+	height: 1.5rem;
+}
+
+.rg-texture-grid {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: 0.75rem;
+}
+
+@media (min-width: 640px) {
+	.rg-texture-grid {
+		grid-template-columns: repeat(4, 1fr);
+	}
+}
+
+.rg-texture-btn {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 0.75rem;
+	padding: 1rem 0.75rem;
+	border: 2px solid var(--rg-border);
+	border-radius: 0.75rem;
+	background: var(--rg-bg-card);
+	color: var(--rg-text-muted);
+	cursor: pointer;
+	transition: var(--rg-transition);
+	text-align: center;
+}
+
+.rg-texture-btn:hover {
+	border-color: var(--rg-primary);
+	box-shadow: var(--rg-shadow-md);
+}
+
+.rg-texture-btn.active {
+	background: var(--rg-primary-light);
+	border-color: var(--rg-primary);
+	color: var(--rg-primary);
+}
+
+.rg-texture-visual {
+	width: 1.5rem;
+	height: 1.5rem;
+	border: 1px solid currentcolor;
+	border-radius: 0.25rem;
+	overflow: hidden;
+	display: flex;
+	align-items: flex-end;
+}
+
+.rg-texture-bar {
+	width: 100%;
+	background: currentcolor;
+	transition: height 0.3s ease;
+}
+
+.rg-texture-btn[data-level="1"] .rg-texture-bar {
+	height: 25%;
+}
+
+.rg-texture-btn[data-level="2"] .rg-texture-bar {
+	height: 50%;
+}
+
+.rg-texture-btn[data-level="3"] .rg-texture-bar {
+	height: 75%;
+}
+
+.rg-texture-btn[data-level="4"] .rg-texture-bar {
+	height: 100%;
+}
+
+.rg-texture-label {
+	font-size: 0.75rem;
+	font-weight: 600;
+	line-height: 1.2;
+}
+
+.rg-results {
+	display: flex;
+	flex-direction: column;
+	gap: 1.5rem;
+}
+
+.rg-result-hero {
+	background: linear-gradient(135deg, var(--rg-primary), var(--rg-secondary));
+	border-radius: var(--rg-radius);
+	padding: 2rem;
+	color: var(--rg-bg-card);
+	box-shadow: var(--rg-shadow-lg);
+	position: relative;
+	overflow: hidden;
+}
+
+.rg-result-hero::before {
+	content: '';
+	position: absolute;
+	top: -50%;
+	left: -50%;
+	width: 200%;
+	height: 200%;
+	background: radial-gradient(circle, hsla(0deg, 0%, 100%, 0.1), transparent 60%);
+	pointer-events: none;
+}
+
+.rg-result-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 1.5rem;
+	position: relative;
+	z-index: 1;
+}
+
+.rg-result-label {
+	font-size: 0.75rem;
+	font-weight: 700;
+	text-transform: uppercase;
+	letter-spacing: 0.1em;
+	opacity: 0.8;
+}
+
+.rg-roux-type {
+	font-size: 0.75rem;
+	font-weight: 600;
+	background: hsla(0deg, 0%, 0%, 0.2);
+	padding: 0.5rem 1rem;
+	border-radius: 0.5rem;
+	text-transform: capitalize;
+}
+
+.rg-result-amounts {
+	display: flex;
+	align-items: center;
+	justify-content: space-around;
+	margin-bottom: 1.5rem;
+	position: relative;
+	z-index: 1;
+	text-align: center;
+}
+
+.rg-amount {
+	flex: 1;
+}
+
+.rg-amount-value {
+	font-size: 2.5rem;
+	font-weight: 800;
+	margin-bottom: 0.5rem;
+	line-height: 1;
+}
+
+.rg-amount-unit {
+	font-size: 0.75rem;
+	font-weight: 600;
+	text-transform: uppercase;
+	opacity: 0.8;
+}
+
+.rg-amount-plus {
+	font-size: 1.5rem;
+	opacity: 0.3;
+	margin: 0 1rem;
+}
+
+.rg-instructions-box {
+	background: hsla(0deg, 0%, 0%, 0.2);
+	border-radius: 0.75rem;
+	border: 1px solid hsla(0deg, 0%, 100%, 0.1);
+	padding: 1rem;
+	position: relative;
+	z-index: 1;
+	backdrop-filter: blur(4px);
+}
+
+.rg-instructions-header {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	margin-bottom: 0.75rem;
+	color: hsl(38deg, 92%, 90%);
+}
+
+.rg-instructions-icon {
+	width: 1rem;
+	height: 1rem;
+}
+
+.rg-instructions-title {
+	font-size: 0.75rem;
+	font-weight: 700;
+	text-transform: uppercase;
+	letter-spacing: 0.1em;
+}
+
+.rg-instructions-text {
+	font-size: 0.875rem;
+	font-weight: 500;
+	line-height: 1.5;
+	color: hsl(38deg, 92%, 95%);
+	margin: 0;
+}
+
+.rg-sauce-info {
+	background: var(--rg-bg-app);
+	border: 1px solid var(--rg-border);
+	border-radius: var(--rg-radius);
+	padding: 1.5rem;
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+}
+
+.rg-sauce-header {
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+	margin-bottom: 0.5rem;
+}
+
+.rg-sauce-icon {
+	width: 2.5rem;
+	height: 2.5rem;
+	border-radius: 0.5rem;
+	background: hsl(38deg, 92%, 90%);
+	color: var(--rg-primary);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+}
+
+.theme-dark .rg-sauce-icon {
+	background: hsl(38deg, 92%, 12%);
+}
+
+.rg-icon-lg {
+	width: 1.25rem;
+	height: 1.25rem;
+}
+
+.rg-sauce-name {
+	font-size: 1rem;
+	font-weight: 700;
+	color: var(--rg-text-main);
+	flex: 1;
+}
+
+.rg-sauce-ratio {
+	font-size: 0.75rem;
+	font-weight: 700;
+	color: var(--rg-text-muted);
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	white-space: nowrap;
+}
+
+.rg-sauce-tip {
+	font-size: 0.875rem;
+	font-weight: 500;
+	line-height: 1.6;
+	color: var(--rg-text-muted);
+	font-style: italic;
+	background: var(--rg-bg-card);
+	padding: 1rem;
+	border-radius: 0.75rem;
+	border: 1px solid var(--rg-border);
+	margin: 0;
+}

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

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

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

@@ -0,0 +1,194 @@
+---
+import { Icon } from 'astro-icon/components';
+import './RouxGuide.css';
+
+interface Props {
+	ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="rg-container" id="roux-calculator">
+	<div class="rg-card">
+		<div class="rg-progress-wrapper">
+			<div class="rg-progress-bar" id="progress-bar"></div>
+		</div>
+
+		<div class="rg-content">
+			<div class="rg-grid">
+				<div class="rg-controls">
+					<div class="rg-control-group">
+						<label class="rg-label">
+							<span class="rg-step">1</span>
+							{ui.baseLiquid}
+						</label>
+
+						<div class="rg-volume-wrapper">
+							<div class="rg-input-group">
+								<input
+									type="number"
+									id="volume-input"
+									value="1000"
+									min="50"
+									step="50"
+									class="rg-input"
+								/>
+								<span class="rg-unit">{ui.ml}</span>
+							</div>
+
+							<div class="rg-liquid-buttons">
+								<button
+									class="liquid-btn rg-liquid-btn active"
+									data-type="milk"
+									title={ui.milk}
+								>
+									<Icon name="mdi:cup-water" class="rg-btn-icon" />
+								</button>
+								<button
+									class="liquid-btn rg-liquid-btn"
+									data-type="lightStock"
+									title={ui.lightStock}
+								>
+									<Icon name="mdi:pot-mix-outline" class="rg-btn-icon" />
+								</button>
+								<button
+									class="liquid-btn rg-liquid-btn"
+									data-type="darkStock"
+									title={ui.darkStock}
+								>
+									<Icon name="mdi:food-steak" class="rg-btn-icon" />
+								</button>
+								<button
+									class="liquid-btn rg-liquid-btn"
+									data-type="tomato"
+									title={ui.tomato}
+								>
+									<Icon name="mdi:food-apple" class="rg-btn-icon" />
+								</button>
+							</div>
+						</div>
+					</div>
+
+					<div class="rg-control-group">
+						<label class="rg-label">
+							<span class="rg-step">2</span>
+							{ui.sauceTexture}
+						</label>
+
+						<div class="rg-texture-grid">
+							<button
+								class="texture-btn rg-texture-btn"
+								data-level="1"
+							>
+								<div class="rg-texture-visual">
+									<div class="rg-texture-bar"></div>
+								</div>
+								<span class="rg-texture-label">{ui.soup}</span>
+							</button>
+							<button
+								class="texture-btn rg-texture-btn active"
+								data-level="2"
+							>
+								<div class="rg-texture-visual">
+									<div class="rg-texture-bar"></div>
+								</div>
+								<span class="rg-texture-label">{ui.normalSauce}</span>
+							</button>
+							<button
+								class="texture-btn rg-texture-btn"
+								data-level="3"
+							>
+								<div class="rg-texture-visual">
+									<div class="rg-texture-bar"></div>
+								</div>
+								<span class="rg-texture-label">{ui.thick}</span>
+							</button>
+							<button
+								class="texture-btn rg-texture-btn"
+								data-level="4"
+							>
+								<div class="rg-texture-visual">
+									<div class="rg-texture-bar"></div>
+								</div>
+								<span class="rg-texture-label">{ui.croquette}</span>
+							</button>
+						</div>
+					</div>
+				</div>
+
+				<div class="rg-results">
+					<div class="rg-result-hero">
+						<div class="rg-result-header">
+							<span class="rg-result-label">{ui.rouxMix}</span>
+							<div class="rg-roux-type" id="roux-type-label">Blanco</div>
+						</div>
+
+						<div class="rg-result-amounts">
+							<div class="rg-amount">
+								<div class="rg-amount-value" id="butter-output">50</div>
+								<div class="rg-amount-unit">{ui.butter} (g)</div>
+							</div>
+							<div class="rg-amount-plus">+</div>
+							<div class="rg-amount">
+								<div class="rg-amount-value" id="flour-output">50</div>
+								<div class="rg-amount-unit">{ui.flour} (g)</div>
+							</div>
+						</div>
+
+						<div class="rg-instructions-box">
+							<div class="rg-instructions-header">
+								<Icon name="mdi:fire" class="rg-instructions-icon" />
+								<span class="rg-instructions-title">{ui.instructions}</span>
+							</div>
+							<p class="rg-instructions-text" id="cooking-instructions">
+								Cocina 2-3 min. No dejes que coja color.
+							</p>
+						</div>
+					</div>
+
+					<div class="rg-sauce-info">
+						<div class="rg-sauce-header">
+							<div class="rg-sauce-icon">
+								<Icon name="mdi:bookmark-check" class="rg-icon-lg" />
+							</div>
+							<span class="rg-sauce-name" id="sauce-name">Bechamel</span>
+							<span class="rg-sauce-ratio" id="ratio-display">90g/L</span>
+						</div>
+
+						<p class="rg-sauce-tip" id="chef-tip">
+							"Añade la leche fría de golpe sobre el roux caliente y remueve vigorosamente para evitar grumos."
+						</p>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+
+<script>
+	import { initRouxGuide } from './init';
+	window.__initRouxGuide = initRouxGuide;
+</script>
+
+<script define:vars={{ ui }}>
+	const init = () => {
+		if (window.__initRouxGuide) {
+			window.__initRouxGuide(ui);
+		}
+	};
+
+	if (document.readyState === 'loading') {
+		document.addEventListener('DOMContentLoaded', init);
+	} else {
+		init();
+	}
+</script>
+
+<style>
+	input[type='number']::-webkit-outer-spin-button,
+	input[type='number']::-webkit-inner-spin-button {
+		-webkit-appearance: none;
+		margin: 0;
+	}
+</style>