@jjlmoya/utils-cooking 1.2.0

package/src/tool/ingredient-rescaler/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/kitchen-timer/KitchenTimer.css

@@ -0,0 +1,325 @@
+.kitchen-timer-wrapper {
+	--kt-primary: #ea580c;
+	--kt-secondary: #f97316;
+	--kt-bg: #fff;
+	--kt-bg-secondary: #f8fafc;
+	--kt-border: #e2e8f0;
+	--kt-text: #0f172a;
+	--kt-text-muted: #64748b;
+	--card-br: 1.5rem;
+}
+
+.theme-dark .kitchen-timer-wrapper {
+	--kt-primary: #fb923c;
+	--kt-secondary: #fdba74;
+	--kt-bg: #0f172a;
+	--kt-bg-secondary: #1e293b;
+	--kt-border: #334155;
+	--kt-text: #f8fafc;
+	--kt-text-muted: #94a3b8;
+}
+
+.kitchen-timer-master-card {
+	background: var(--kt-bg);
+	border: 1px solid var(--kt-border);
+	border-radius: var(--card-br);
+	box-shadow: var(--sc-shadow-lg);
+	overflow: hidden;
+}
+
+.timers-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+	gap: 0;
+}
+
+.timer-card {
+	background: transparent;
+	border: none;
+	border-right: 1px solid var(--kt-border);
+	border-bottom: 1px solid var(--kt-border);
+	border-radius: 0;
+	position: relative;
+	overflow: hidden;
+	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+	box-shadow: none;
+}
+
+.timer-card:hover {
+	transform: none;
+	background: var(--kt-bg-secondary);
+}
+
+.progress-bar {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 4px;
+	background: var(--kt-bg-secondary);
+}
+
+.progress-fill {
+	width: 100%;
+	height: 100%;
+	background: var(--kt-primary);
+	transform-origin: left;
+	transform: scaleX(0);
+	transition: transform 0.1s linear;
+}
+
+.timer-content {
+	padding: 1.5rem;
+}
+
+.timer-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 1.5rem;
+}
+
+.timer-name-wrapper {
+	flex: 1;
+	min-width: 0;
+	margin-right: 0.5rem;
+}
+
+.timer-name {
+	background: transparent;
+	border: none;
+	border-bottom: 2px solid transparent;
+	font-weight: 700;
+	font-size: 1.1rem;
+	color: var(--kt-text);
+	width: 100%;
+	outline: none;
+	transition: border-color 0.2s;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.timer-name:focus {
+	border-color: var(--kt-primary);
+}
+
+.status-badge {
+	padding: 0.25rem 0.75rem;
+	background: var(--kt-bg-secondary);
+	border-radius: 2rem;
+	font-size: 0.75rem;
+	font-weight: 700;
+	color: var(--kt-text-muted);
+	border: 1px solid var(--kt-border);
+	flex-shrink: 0;
+}
+
+.timer-display {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 1rem;
+	margin: 2rem 0;
+}
+
+.time-input-group {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 0.5rem;
+}
+
+.time-input {
+	width: 80px;
+	background: var(--kt-bg-secondary);
+	border: 2px solid var(--kt-border);
+	border-radius: 1rem;
+	font-size: 2.5rem;
+	font-weight: 900;
+	text-align: center;
+	color: var(--kt-text);
+	padding: 0.5rem;
+	outline: none;
+	transition: all 0.2s;
+}
+
+.time-input:focus {
+	border-color: var(--kt-primary);
+	background: var(--kt-bg);
+}
+
+.time-label {
+	font-size: 0.65rem;
+	font-weight: 800;
+	text-transform: uppercase;
+	letter-spacing: 0.1em;
+	color: var(--kt-text-muted);
+}
+
+.time-separator {
+	font-size: 2rem;
+	font-weight: 900;
+	color: var(--kt-border);
+	margin-top: -1.5rem;
+}
+
+.timer-controls {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+}
+
+.timer-buttons {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 0.75rem;
+}
+
+.btn-toggle, .btn-reset {
+	padding: 0.75rem;
+	border-radius: 1rem;
+	font-weight: 700;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.5rem;
+	transition: all 0.2s;
+	border: none;
+}
+
+.btn-toggle {
+	background: var(--kt-primary);
+	color: var(--kt-bg);
+}
+
+.btn-toggle:hover:not(:disabled) {
+	background: var(--kt-secondary);
+	transform: scale(1.02);
+}
+
+.btn-toggle:disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
+.btn-reset {
+	background: var(--kt-bg-secondary);
+	color: var(--kt-text);
+	border: 1px solid var(--kt-border);
+}
+
+.btn-reset:hover {
+	border-color: var(--kt-primary);
+}
+
+.timer-quick-buttons {
+	display: flex;
+	gap: 0.5rem;
+}
+
+.timer-quick-buttons button {
+	flex: 1;
+	padding: 0.5rem;
+	border-radius: 0.75rem;
+	background: var(--kt-bg-secondary);
+	border: 1px solid var(--kt-border);
+	font-size: 0.8rem;
+	font-weight: 600;
+	color: var(--kt-text-muted);
+	cursor: pointer;
+	transition: all 0.2s;
+}
+
+.timer-quick-buttons button:hover {
+	color: var(--kt-primary);
+	border-color: var(--kt-primary);
+}
+
+.add-timer-container {
+	padding: 1.5rem 2.5rem;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	background: var(--kt-bg-secondary);
+	border-top: 1px solid var(--kt-border);
+	gap: 1.5rem;
+}
+
+.add-timer-btn {
+	background: var(--kt-primary);
+	border: none;
+	border-radius: 1rem;
+	width: auto;
+	padding: 0.75rem 2rem;
+	height: auto;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+	gap: 0.75rem;
+	color: var(--kt-bg);
+	font-weight: 700;
+	font-size: 1rem;
+	cursor: pointer;
+	transition: all 0.2s;
+	box-shadow: 0 4px 6px -1px rgba(234, 88, 12, 0.2);
+}
+
+.add-timer-btn:hover {
+	background: var(--kt-secondary);
+	transform: translateY(-2px);
+	box-shadow: 0 10px 15px -3px rgba(234, 88, 12, 0.3);
+}
+
+.add-timer-icon {
+	font-size: 1.25rem;
+	display: flex;
+	align-items: center;
+}
+
+.stop-all-container {
+	flex-shrink: 0;
+}
+
+.stop-all-btn {
+	background: #1e293b;
+	padding: 0.75rem 1.5rem;
+	border-radius: 1rem;
+	color: var(--kt-bg);
+	border: 1px solid rgba(255, 255, 255, 0.1);
+	font-weight: 700;
+	font-size: 0.9rem;
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	cursor: pointer;
+	transition: all 0.2s;
+}
+
+.stop-all-btn:hover {
+	background: #000;
+	transform: translateY(-2px);
+}
+
+.timer-card.finished {
+	animation: pulse-border 1.5s infinite;
+}
+
+@keyframes pulse-border {
+	0% {
+		border-color: var(--kt-primary);
+		box-shadow: 0 0 0 0 rgba(234, 88, 12, 0.4);
+	}
+	70% {
+		border-color: var(--kt-secondary);
+		box-shadow: 0 0 0 15px rgba(234, 88, 12, 0);
+	}
+	100% {
+		border-color: var(--kt-primary);
+		box-shadow: 0 0 0 0 rgba(234, 88, 12, 0);
+	}
+}
+
+

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

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

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

@@ -0,0 +1,341 @@
+---
+import { Icon } from "astro-icon/components";
+import "./KitchenTimer.css";
+
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="kitchen-timer-wrapper">
+	<div class="kitchen-timer-master-card">
+		<div id="timers-grid" class="timers-grid">
+			<div class="timer-card" data-index="0">
+				<div class="progress-bar">
+					<div class="progress-fill"></div>
+				</div>
+
+				<div class="timer-content">
+					<div class="timer-header">
+						<div class="timer-name-wrapper">
+							<input
+								type="text"
+								value={ui.timerDefault1}
+								class="timer-name"
+								placeholder={ui.label}
+							/>
+						</div>
+						<div class="status-badge">
+							<span class="status-text">{ui.ready}</span>
+						</div>
+					</div>
+
+					<div class="timer-display">
+						<div class="time-input-group">
+							<input
+								type="number"
+								min="0"
+								max="999"
+								value="00"
+								class="time-input minutes"
+								placeholder="00"
+							/>
+							<label class="time-label">{ui.minutes}</label>
+						</div>
+
+						<span class="time-separator">:</span>
+
+						<div class="time-input-group">
+							<input
+								type="number"
+								min="0"
+								max="59"
+								value="00"
+								class="time-input seconds"
+								placeholder="00"
+							/>
+							<label class="time-label">{ui.seconds}</label>
+						</div>
+					</div>
+
+					<div class="timer-controls">
+						<div class="timer-buttons">
+							<button class="btn-toggle" disabled>
+								<span class="icon-play">
+									<Icon name="mdi:play" />
+								</span>
+								<span class="icon-pause" style="display: none;">
+									<Icon name="mdi:pause" />
+								</span>
+								<span class="btn-text">{ui.start}</span>
+							</button>
+
+							<button class="btn-reset">
+								<Icon name="mdi:refresh" />
+								{ui.reset}
+							</button>
+						</div>
+
+						<div class="timer-quick-buttons">
+							<button class="btn-add-1m">{ui.addOneMin}</button>
+							<button class="btn-add-5m">{ui.addFiveMin}</button>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<div class="timer-card" data-index="1">
+				<div class="progress-bar">
+					<div class="progress-fill"></div>
+				</div>
+
+				<div class="timer-content">
+					<div class="timer-header">
+						<div class="timer-name-wrapper">
+							<input
+								type="text"
+								value={ui.timerDefault2}
+								class="timer-name"
+								placeholder={ui.label}
+							/>
+						</div>
+						<div class="status-badge">
+							<span class="status-text">{ui.ready}</span>
+						</div>
+					</div>
+
+					<div class="timer-display">
+						<div class="time-input-group">
+							<input
+								type="number"
+								min="0"
+								max="999"
+								value="00"
+								class="time-input minutes"
+								placeholder="00"
+							/>
+							<label class="time-label">{ui.minutes}</label>
+						</div>
+
+						<span class="time-separator">:</span>
+
+						<div class="time-input-group">
+							<input
+								type="number"
+								min="0"
+								max="59"
+								value="00"
+								class="time-input seconds"
+								placeholder="00"
+							/>
+							<label class="time-label">{ui.seconds}</label>
+						</div>
+					</div>
+
+					<div class="timer-controls">
+						<div class="timer-buttons">
+							<button class="btn-toggle" disabled>
+								<span class="icon-play">
+									<Icon name="mdi:play" />
+								</span>
+								<span class="icon-pause" style="display: none;">
+									<Icon name="mdi:pause" />
+								</span>
+								<span class="btn-text">{ui.start}</span>
+							</button>
+
+							<button class="btn-reset">
+								<Icon name="mdi:refresh" />
+								{ui.reset}
+							</button>
+						</div>
+
+						<div class="timer-quick-buttons">
+							<button class="btn-add-1m">{ui.addOneMin}</button>
+							<button class="btn-add-5m">{ui.addFiveMin}</button>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<div class="timer-card" data-index="2">
+				<div class="progress-bar">
+					<div class="progress-fill"></div>
+				</div>
+
+				<div class="timer-content">
+					<div class="timer-header">
+						<div class="timer-name-wrapper">
+							<input
+								type="text"
+								value={ui.timerDefault3}
+								class="timer-name"
+								placeholder={ui.label}
+							/>
+						</div>
+						<div class="status-badge">
+							<span class="status-text">{ui.ready}</span>
+						</div>
+					</div>
+
+					<div class="timer-display">
+						<div class="time-input-group">
+							<input
+								type="number"
+								min="0"
+								max="999"
+								value="00"
+								class="time-input minutes"
+								placeholder="00"
+							/>
+							<label class="time-label">{ui.minutes}</label>
+						</div>
+
+						<span class="time-separator">:</span>
+
+						<div class="time-input-group">
+							<input
+								type="number"
+								min="0"
+								max="59"
+								value="00"
+								class="time-input seconds"
+								placeholder="00"
+							/>
+							<label class="time-label">{ui.seconds}</label>
+						</div>
+					</div>
+
+					<div class="timer-controls">
+						<div class="timer-buttons">
+							<button class="btn-toggle" disabled>
+								<span class="icon-play">
+									<Icon name="mdi:play" />
+								</span>
+								<span class="icon-pause" style="display: none;">
+									<Icon name="mdi:pause" />
+								</span>
+								<span class="btn-text">{ui.start}</span>
+							</button>
+
+							<button class="btn-reset">
+								<Icon name="mdi:refresh" />
+								{ui.reset}
+							</button>
+						</div>
+
+						<div class="timer-quick-buttons">
+							<button class="btn-add-1m">{ui.addOneMin}</button>
+							<button class="btn-add-5m">{ui.addFiveMin}</button>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div class="add-timer-container">
+			<button id="add-timer-btn" class="add-timer-btn">
+				<div class="add-timer-icon">
+					<Icon name="mdi:plus" />
+				</div>
+				<span>{ui.addTimer}</span>
+			</button>
+
+			<div class="stop-all-container">
+				<button id="stop-all" class="stop-all-btn">
+					<Icon name="mdi:stop-circle-outline" />
+					{ui.stopAll}
+				</button>
+			</div>
+		</div>
+	</div>
+
+	<template id="timer-template">
+		<div class="timer-card" data-index="-1">
+			<div class="progress-bar">
+				<div class="progress-fill"></div>
+			</div>
+
+			<div class="timer-content">
+				<div class="timer-header">
+					<div class="timer-name-wrapper">
+						<input
+							type="text"
+							value={ui.newTimerName}
+							class="timer-name"
+							placeholder={ui.label}
+						/>
+					</div>
+					<div class="status-badge">
+						<span class="status-text">{ui.ready}</span>
+					</div>
+				</div>
+
+				<div class="timer-display">
+					<div class="time-input-group">
+						<input
+							type="number"
+							min="0"
+							max="999"
+							value="00"
+							class="time-input minutes"
+							placeholder="00"
+						/>
+						<label class="time-label">{ui.minutes}</label>
+					</div>
+
+					<span class="time-separator">:</span>
+
+					<div class="time-input-group">
+						<input
+							type="number"
+							min="0"
+							max="59"
+							value="00"
+							class="time-input seconds"
+							placeholder="00"
+						/>
+						<label class="time-label">{ui.seconds}</label>
+					</div>
+				</div>
+
+				<div class="timer-controls">
+					<div class="timer-buttons">
+						<button class="btn-toggle" disabled>
+							<span class="icon-play">
+								<Icon name="mdi:play" />
+							</span>
+							<span class="icon-pause" style="display: none;">
+								<Icon name="mdi:pause" />
+							</span>
+							<span class="btn-text">{ui.start}</span>
+						</button>
+
+						<button class="btn-reset">
+							<Icon name="mdi:refresh" />
+							{ui.reset}
+						</button>
+					</div>
+
+					<div class="timer-quick-buttons">
+						<button class="btn-add-1m">{ui.addOneMin}</button>
+						<button class="btn-add-5m">{ui.addFiveMin}</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	</template>
+
+</div>
+
+<script>
+	import { initKitchenTimers } from "./init";
+
+	if (document.readyState === "loading") {
+		document.addEventListener("DOMContentLoaded", initKitchenTimers);
+	} else {
+		initKitchenTimers();
+	}
+</script>