@jjlmoya/utils-alcohol 1.1.0

package/src/tool/beerCooler/component.astro

@@ -0,0 +1,236 @@
+---
+import { Icon } from "astro-icon/components";
+import type { BeerCoolerUI } from "./index";
+import './component.css';
+
+interface Props {
+  ui: BeerCoolerUI;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="beer-app" id="beer-calculator">
+    <div class="beer-card">
+        <div class="beer-grid">
+            <div class="beer-steps-panel">
+                <div class="beer-sec">
+                    <h3 class="step-header">
+                        <span class="step-number">1</span>
+                        {ui.step1Title}
+                    </h3>
+                    <div class="selector-grid">
+                        <button class="selector-card" data-group="container" data-value="can">
+                            <div class="selector-content">
+                                <Icon name="mdi:beer-outline" class="icon-el" />
+                                <div class="selector-label">{ui.canLabel}</div>
+                                <div class="selector-sub">{ui.aluminumLabel}</div>
+                            </div>
+                            <div class="bg-el"></div>
+                        </button>
+                        <button class="selector-card" data-group="container" data-value="bottle">
+                            <div class="selector-content">
+                                <Icon name="mdi:bottle-soda-classic-outline" class="icon-el" />
+                                <div class="selector-label">{ui.bottleLabel}</div>
+                                <div class="selector-sub">{ui.glassLabel}</div>
+                            </div>
+                            <div class="bg-el"></div>
+                        </button>
+                    </div>
+                </div>
+
+                <div class="beer-sec">
+                    <h3 class="step-header">
+                        <span class="step-number">2</span>
+                        {ui.step2Title}
+                    </h3>
+                    <div class="selector-grid">
+                        <button class="selector-card" data-group="location" data-value="fridge">
+                            <div class="selector-content">
+                                <Icon name="mdi:fridge-outline" class="icon-el" />
+                                <div class="selector-label">{ui.fridgeLabel}</div>
+                                <div class="selector-sub">4°C</div>
+                            </div>
+                            <div class="bg-el"></div>
+                        </button>
+                        <button class="selector-card" data-group="location" data-value="freezer">
+                            <div class="selector-content">
+                                <Icon name="mdi:snowflake" class="icon-el" />
+                                <div class="selector-label">{ui.freezerLabel}</div>
+                                <div class="selector-sub">-18°C</div>
+                            </div>
+                            <div class="bg-el"></div>
+                        </button>
+                    </div>
+                </div>
+
+                <div class="beer-sec">
+                    <h3 class="step-header">
+                        <span class="step-number">3</span>
+                        {ui.step3Title}
+                    </h3>
+                    <div class="slider-row">
+                        <div class="slider-label-row">
+                            <label class="slider-label">{ui.initialTempLabel}</label>
+                            <span id="display-temp-start" class="temp-display">20°C</span>
+                        </div>
+                        <input type="range" id="temp-start" min="15" max="35" value="20" class="slider-custom slider-dark" />
+                    </div>
+                    <div class="slider-row slider-row-last">
+                        <div class="slider-label-row">
+                            <label class="slider-label">{ui.targetTempLabel}</label>
+                            <span id="display-temp-target" class="temp-display">4°C</span>
+                        </div>
+                        <input type="range" id="temp-target" min="1" max="8" value="4" step="0.5" class="slider-custom slider-blue" />
+                    </div>
+                </div>
+            </div>
+
+            <div class="beer-result-panel">
+                <div id="final-card" class="result-inner">
+                    <div id="empty-state-vis" class="empty-state">
+                        <div class="empty-icon">
+                            <Icon name="mdi:timer-sand" class="empty-icon-svg" />
+                        </div>
+                        <div class="empty-text">
+                            <h3 class="empty-title">{ui.readyTitle}</h3>
+                            <p class="empty-desc">{ui.readyDescription}</p>
+                        </div>
+                    </div>
+                    <div id="result-state" class="result-content" style="display:none">
+                        <div class="result-time-wrap">
+                            <div class="result-glow"></div>
+                            <span id="result-time" class="result-time-num">--</span>
+                            <span class="result-time-unit">min</span>
+                        </div>
+                        <div class="result-labels">
+                            <p class="result-est-label">{ui.estimatedTimeLabel}</p>
+                            <p id="finish-time" class="result-finish-time">--:--</p>
+                        </div>
+                        <div class="result-meta-grid">
+                            <div class="result-meta-item">
+                                <div class="result-meta-label">{ui.methodLabel}</div>
+                                <div class="result-meta-value" id="res-method">-</div>
+                            </div>
+                            <div class="result-meta-item">
+                                <div class="result-meta-label">{ui.containerLabel}</div>
+                                <div class="result-meta-value" id="res-container">-</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="bubbles-layer">
+                        <div id="bubbles-container"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div style="display:none" id="ui-labels" data-ui={JSON.stringify(ui)}></div>
+</div>
+
+
+<script>
+    import { calculateCoolingTime, getFinishTime } from "./logic";
+    import type { ContainerType } from "./logic";
+    import type { BeerCoolerUI } from "./index";
+
+    type LocationType = 'fridge' | 'freezer';
+
+    class BeerApp {
+        state = { container: null as ContainerType | null, location: null as LocationType | null, tempStart: 20, tempTarget: 4 };
+        ui = {} as BeerCoolerUI;
+
+        constructor() {
+            const uiEl = document.getElementById("ui-labels");
+            if (uiEl) this.ui = JSON.parse(uiEl.dataset.ui || "{}") as BeerCoolerUI;
+            this.init();
+        }
+
+        init() {
+            document.querySelectorAll<HTMLButtonElement>(".selector-card").forEach(btn => {
+                btn.onclick = () => this.onSelectCard(btn);
+            });
+            const startEl = document.getElementById("temp-start") as HTMLInputElement | null;
+            const targetEl = document.getElementById("temp-target") as HTMLInputElement | null;
+            if (startEl) startEl.oninput = () => this.onTempStart(startEl);
+            if (targetEl) targetEl.oninput = () => this.onTempTarget(targetEl);
+            this.createBubbles();
+        }
+
+        onSelectCard(btn: HTMLButtonElement) {
+            const group = btn.dataset.group ?? '';
+            const val = btn.dataset.value ?? null;
+            if (group === 'container') this.state.container = val as ContainerType | null;
+            if (group === 'location') this.state.location = val as LocationType | null;
+            document.querySelectorAll(`button[data-group="${group}"]`).forEach(b => b.classList.toggle("selected", b === btn));
+            this.update();
+        }
+
+        onTempStart(el: HTMLInputElement) {
+            this.state.tempStart = parseFloat(el.value);
+            const disp = document.getElementById("display-temp-start");
+            if (disp) disp.innerText = `${this.state.tempStart}°C`;
+            this.update();
+        }
+
+        onTempTarget(el: HTMLInputElement) {
+            this.state.tempTarget = parseFloat(el.value);
+            const disp = document.getElementById("display-temp-target");
+            if (disp) disp.innerText = `${this.state.tempTarget}°C`;
+            this.update();
+        }
+
+        update() {
+            const empty = document.getElementById("empty-state-vis");
+            const result = document.getElementById("result-state");
+            if (!empty || !result) return;
+            if (!this.state.container || !this.state.location) {
+                empty.style.display = "flex";
+                result.style.display = "none";
+                return;
+            }
+            this.showResult(empty, result);
+        }
+
+        showResult(empty: HTMLElement, result: HTMLElement) {
+            const mins = calculateCoolingTime(this.state);
+            empty.style.display = "none";
+            result.style.display = "flex";
+            const containerEl = document.getElementById("res-container");
+            const methodEl = document.getElementById("res-method");
+            if (containerEl) containerEl.innerText = this.ui[`${this.state.container}Label`] || (this.state.container ?? '');
+            if (methodEl) methodEl.innerText = this.ui[`${this.state.location}Label`] || (this.state.location ?? '');
+            this.setTimeDisplay(mins);
+        }
+
+        setTimeDisplay(mins: number) {
+            const timeEl = document.getElementById("result-time");
+            const finishEl = document.getElementById("finish-time");
+            if (!timeEl || !finishEl) return;
+            if (mins === 0) { timeEl.innerText = "0"; finishEl.innerText = this.ui.alreadyColdLabel; }
+            else if (mins > 400) { timeEl.innerText = "∞"; finishEl.innerText = this.ui.neverColdLabel; }
+            else { timeEl.innerText = String(mins); finishEl.innerText = getFinishTime(mins); }
+        }
+
+        createBubbles() {
+            const container = document.getElementById("bubbles-container");
+            if (!container) return;
+            for (let i = 0; i < 20; i++) {
+                const b = document.createElement("div");
+                b.style.cssText = `position:absolute;background:rgba(255,255,255,0.1);border-radius:50%;width:${Math.random()*6+2}px;height:${Math.random()*6+2}px;left:${Math.random()*100}%;animation:rise ${Math.random()*5+3}s infinite ease-in ${Math.random()*5}s`;
+                container.appendChild(b);
+            }
+            this.injectBubbleStyle();
+        }
+
+        injectBubbleStyle() {
+            if (document.getElementById("bubble-style")) return;
+            const s = document.createElement("style");
+            s.id = "bubble-style";
+            s.innerHTML = "@keyframes rise { 0% { transform: translateY(100vh) scale(0); opacity: 0; } 50% { opacity: 0.5; } 100% { transform: translateY(-100px) scale(1); opacity: 0; } }";
+            document.head.appendChild(s);
+        }
+    }
+    new BeerApp();
+</script>

package/src/tool/beerCooler/component.css

@@ -0,0 +1,381 @@
+    .beer-app {
+        width: 100%;
+        max-width: 72rem;
+        margin: 0 auto;
+        padding: 0.5rem;
+    }
+
+    .beer-card {
+        background: #fff;
+        border: 1px solid #e2e8f0;
+        border-radius: 1.25rem;
+        overflow: clip;
+        box-shadow: 0 4px 20px rgba(0,0,0,0.06);
+        color: #1e293b;
+    }
+    .theme-dark .beer-card {
+        background: #0f172a;
+        border-color: #1e293b;
+        color: #f1f5f9;
+    }
+
+    .beer-grid { display: grid; }
+
+    @media (min-width: 1024px) {
+        .beer-grid {
+            grid-template-columns: 1fr 1fr;
+            align-items: stretch;
+        }
+    }
+
+    .beer-steps-panel {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .beer-sec {
+        padding: 1.25rem 1.5rem;
+        border-bottom: 1px solid #e2e8f0;
+    }
+    .theme-dark .beer-sec { border-color: #1e293b; }
+    .beer-sec:last-child { border-bottom: none; }
+
+    .step-header {
+        font-size: 1rem;
+        font-weight: 700;
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        margin: 0 0 1rem;
+        color: #1e293b;
+    }
+
+    .theme-dark .step-header { color: #f1f5f9; }
+    .step-number {
+        width: 1.75rem;
+        height: 1.75rem;
+        border-radius: 50%;
+        background: #0f172a;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 0.75rem;
+        flex-shrink: 0;
+    }
+    .theme-dark .step-number {
+        background: #fff;
+        color: #0f172a;
+    }
+
+    .selector-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 0.75rem;
+    }
+
+    .selector-card {
+        width: 100%;
+        text-align: left;
+        padding: 1rem;
+        border-radius: 0.75rem;
+        border: 2px solid #e2e8f0;
+        transition: border-color 0.2s;
+        position: relative;
+        overflow: hidden;
+        background: #f8fafc;
+        cursor: pointer;
+    }
+    .theme-dark .selector-card {
+        border-color: #1e293b;
+        background: #0c1527;
+    }
+    .selector-card:hover { border-color: #cbd5e1; }
+    .theme-dark .selector-card:hover { border-color: #334155; }
+
+    .selector-content {
+        position: relative;
+        z-index: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 0.5rem;
+    }
+    .icon-el {
+        width: 2rem;
+        height: 2rem;
+        color: #94a3b8;
+        transition: color 0.2s;
+    }
+    .selector-card:hover .icon-el { color: #f59e0b; }
+    .selector-card[data-value="bottle"]:hover .icon-el { color: #10b981; }
+    .selector-card[data-value="fridge"]:hover .icon-el { color: #06b6d4; }
+    .selector-card[data-value="freezer"]:hover .icon-el { color: #3b82f6; }
+
+    .selector-label {
+        font-weight: 700;
+        font-size: 1rem;
+        color: #1e293b;
+    }
+
+    .theme-dark .selector-label { color: #f1f5f9; }
+
+    .selector-sub {
+        font-size: 0.7rem;
+        color: #64748b;
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+
+    .theme-dark .selector-sub { color: #94a3b8; }
+
+    .bg-el {
+        position: absolute;
+        inset: 0;
+        opacity: 0;
+        transition: opacity 0.2s;
+        background: rgba(245,158,11,0.08);
+    }
+    .selector-card[data-value="bottle"] .bg-el { background: rgba(16,185,129,0.08); }
+    .selector-card[data-value="fridge"] .bg-el { background: rgba(6,182,212,0.08); }
+    .selector-card[data-value="freezer"] .bg-el { background: rgba(59,130,246,0.08); }
+
+    .selector-card.selected[data-value="can"] { border-color: #f59e0b; }
+    .selector-card.selected[data-value="bottle"] { border-color: #10b981; }
+    .selector-card.selected[data-value="fridge"] { border-color: #06b6d4; }
+    .selector-card.selected[data-value="freezer"] { border-color: #3b82f6; }
+    .selector-card.selected .bg-el { opacity: 1; }
+
+    .slider-row { margin-bottom: 1.25rem; }
+    .slider-row-last { margin-bottom: 0; }
+    .slider-label-row {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 0.75rem;
+    }
+    .slider-label {
+        font-size: 0.75rem;
+        font-weight: 700;
+        color: #64748b;
+        text-transform: uppercase;
+        letter-spacing: 0.1em;
+    }
+
+    .theme-dark .slider-label { color: #94a3b8; }
+
+    .temp-display {
+        font-size: 1rem;
+        font-weight: 700;
+        background: #f1f5f9;
+        color: #1e293b;
+        padding: 0.2rem 0.6rem;
+        border-radius: 0.4rem;
+    }
+
+    .theme-dark .temp-display {
+        background: #1e293b;
+        color: #f1f5f9;
+    }
+
+    .slider-custom {
+        width: 100%;
+        height: 0.5rem;
+        border-radius: 0.5rem;
+        appearance: none;
+        cursor: pointer;
+        background: #e2e8f0;
+    }
+    .theme-dark .slider-custom { background: #334155; }
+    .slider-dark { accent-color: #0f172a; }
+    .theme-dark .slider-dark { accent-color: #fff; }
+    .slider-blue { accent-color: #3b82f6; }
+    .slider-custom::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        height: 20px;
+        width: 20px;
+        border-radius: 50%;
+        background: currentcolor;
+        cursor: pointer;
+        margin-top: -6px;
+    }
+    .slider-custom::-webkit-slider-runnable-track {
+        width: 100%;
+        height: 8px;
+        background: transparent;
+        border-radius: 4px;
+    }
+
+    .beer-result-panel {
+        background: linear-gradient(to bottom right, #eff6ff, #eef2ff);
+        color: #1e293b;
+        display: flex;
+        align-items: stretch;
+        min-height: 380px;
+    }
+
+    @media (min-width: 1024px) { .beer-result-panel { border-left: 1px solid #e2e8f0; } }
+
+    .theme-dark .beer-result-panel {
+        background: linear-gradient(to bottom right, #1e293b, #020617);
+        color: #fff;
+    }
+
+    @media (min-width: 1024px) { .theme-dark .beer-result-panel { border-left-color: #334155; } }
+
+    .result-inner {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        padding: 2rem;
+        position: relative;
+        z-index: 1;
+    }
+
+    .empty-state {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 1.5rem;
+    }
+    .empty-icon {
+        width: 4rem;
+        height: 4rem;
+        border-radius: 50%;
+        background: #e0e7ff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #6366f1;
+    }
+
+    .theme-dark .empty-icon {
+        background: #1e293b;
+        color: #475569;
+    }
+    .empty-icon-svg {
+        width: 2rem;
+        height: 2rem;
+    }
+    .empty-title {
+        font-size: 1.25rem;
+        font-weight: 700;
+        color: #475569;
+        margin: 0;
+    }
+
+    .theme-dark .empty-title { color: #64748b; }
+
+    .empty-desc {
+        color: #94a3b8;
+        margin: 0;
+        font-size: 0.875rem;
+    }
+
+    .theme-dark .empty-desc { color: #475569; }
+
+    .result-content {
+        flex-direction: column;
+        align-items: center;
+        width: 100%;
+        position: relative;
+        z-index: 1;
+    }
+    .result-time-wrap {
+        position: relative;
+        margin-bottom: 1.5rem;
+    }
+    .result-glow {
+        position: absolute;
+        inset: -2rem;
+        background: rgba(59,130,246,0.2);
+        border-radius: 50%;
+        filter: blur(2rem);
+    }
+    .result-time-num {
+        position: relative;
+        font-size: 5rem;
+        font-weight: 900;
+        color: #1e293b;
+        letter-spacing: -0.05em;
+        line-height: 1;
+    }
+
+    .theme-dark .result-time-num { color: #fff; }
+
+    .result-time-unit {
+        position: absolute;
+        right: -1.5rem;
+        bottom: 0.75rem;
+        font-size: 1.25rem;
+        font-weight: 700;
+        color: #94a3b8;
+    }
+
+    .result-labels { margin-bottom: 2rem; }
+    .result-est-label {
+        font-size: 0.75rem;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: 0.2em;
+        color: #6366f1;
+        margin: 0 0 0.5rem;
+    }
+
+    .theme-dark .result-est-label { color: #60a5fa; }
+
+    .result-finish-time {
+        font-size: 1.5rem;
+        font-weight: 700;
+        color: #1e293b;
+        margin: 0;
+    }
+
+    .theme-dark .result-finish-time { color: #fff; }
+
+    .result-meta-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 0.75rem;
+        width: 100%;
+        text-align: left;
+    }
+    .result-meta-item {
+        background: rgba(255,255,255,0.7);
+        padding: 0.75rem;
+        border-radius: 0.5rem;
+        border: 1px solid #e2e8f0;
+    }
+
+    .theme-dark .result-meta-item {
+        background: rgba(30,41,59,0.5);
+        border-color: #334155;
+    }
+
+    .result-meta-label {
+        font-size: 0.7rem;
+        color: #94a3b8;
+        text-transform: uppercase;
+        font-weight: 700;
+        margin-bottom: 0.25rem;
+    }
+
+    .result-meta-value {
+        color: #1e293b;
+        font-weight: 700;
+        font-size: 0.875rem;
+    }
+
+    .theme-dark .result-meta-value { color: #fff; }
+
+    .bubbles-layer {
+        position: absolute;
+        inset: 0;
+        overflow: hidden;
+        pointer-events: none;
+        z-index: 0;
+    }