@jjlmoya/utils-cooking 1.2.0

package/src/tool/american-kitchen-converter/component.astro

@@ -0,0 +1,838 @@
+---
+import { Icon } from "astro-icon/components";
+
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="akc-wrapper">
+    <div class="akc-main-card">
+        <div class="akc-tabs">
+            <button class="akc-tab-btn active" data-tab="cups" aria-label={ui.tabCupsAriaLabel}>
+                <Icon name="mdi:cup-outline" class="w-6 h-6" />
+                <span>{ui.tabCups}</span>
+            </button>
+            <button class="akc-tab-btn" data-tab="spoons" aria-label={ui.tabSpoonsAriaLabel}>
+                <Icon name="mdi:silverware-spoon" class="w-6 h-6" />
+                <span>{ui.tabSpoons}</span>
+            </button>
+            <button class="akc-tab-btn" data-tab="temps" aria-label={ui.tabTempsAriaLabel}>
+                <Icon name="mdi:thermometer" class="w-6 h-6" />
+                <span>{ui.tabTemperatures}</span>
+            </button>
+        </div>
+
+        <div class="akc-tab-content active" id="content-cups">
+            <div class="akc-step-title">
+                <span class="akc-step-number">1</span>
+                <span>{ui.stepSelectIngredient}</span>
+            </div>
+            <div class="akc-grid">
+                <button
+                    class="akc-item-card cup-item active"
+                    data-density="120"
+                    aria-label={ui.cupFlourAriaLabel}
+                >
+                    <div class="akc-item-icon">
+                        <Icon name="mdi:sack-outline" class="w-8 h-8" />
+                    </div>
+                    <div>
+                        <div class="akc-item-name">{ui.cupFlour}</div>
+                        <div class="akc-item-sub">{ui.cupFlourSub}</div>
+                    </div>
+                </button>
+                <button
+                    class="akc-item-card cup-item"
+                    data-density="200"
+                    aria-label={ui.cupWhiteSugarAriaLabel}
+                >
+                    <div class="akc-item-icon"><Icon name="mdi:shaker-outline" class="w-8 h-8" /></div>
+                    <div>
+                        <div class="akc-item-name">{ui.cupWhiteSugar}</div>
+                        <div class="akc-item-sub">{ui.cupWhiteSugarSub}</div>
+                    </div>
+                </button>
+                <button
+                    class="akc-item-card cup-item"
+                    data-density="220"
+                    aria-label={ui.cupBrownSugarAriaLabel}
+                >
+                    <div class="akc-item-icon">
+                        <Icon name="mdi:shaker-outline" class="w-8 h-8" />
+                    </div>
+                    <div>
+                        <div class="akc-item-name">{ui.cupBrownSugar}</div>
+                        <div class="akc-item-sub">{ui.cupBrownSugarSub}</div>
+                    </div>
+                </button>
+                <button class="akc-item-card cup-item" data-density="115" aria-label={ui.cupPowderSugarAriaLabel}>
+                    <div class="akc-item-icon"><Icon name="mdi:snowflake" class="w-8 h-8" /></div>
+                    <div>
+                        <div class="akc-item-name">{ui.cupPowderSugar}</div>
+                        <div class="akc-item-sub">{ui.cupPowderSugarSub}</div>
+                    </div>
+                </button>
+                <button class="akc-item-card cup-item" data-density="227" aria-label={ui.cupButterAriaLabel}>
+                    <div class="akc-item-icon">
+                        <Icon name="mdi:cube-outline" class="w-8 h-8" />
+                    </div>
+                    <div>
+                        <div class="akc-item-name">{ui.cupButter}</div>
+                        <div class="akc-item-sub">{ui.cupButterSub}</div>
+                    </div>
+                </button>
+                <button class="akc-item-card cup-item" data-density="85" aria-label={ui.cupCocoaAriaLabel}>
+                    <div class="akc-item-icon">
+                        <Icon name="mdi:coffee-outline" class="w-8 h-8" />
+                    </div>
+                    <div>
+                        <div class="akc-item-name">{ui.cupCocoa}</div>
+                        <div class="akc-item-sub">{ui.cupCocoaSub}</div>
+                    </div>
+                </button>
+                <button class="akc-item-card cup-item" data-density="240" aria-label={ui.cupLiquidsAriaLabel}>
+                    <div class="akc-item-icon">
+                        <Icon name="mdi:water-outline" class="w-8 h-8" />
+                    </div>
+                    <div>
+                        <div class="akc-item-name">{ui.cupLiquids}</div>
+                        <div class="akc-item-sub">{ui.cupLiquidsSub}</div>
+                    </div>
+                </button>
+                <button class="akc-item-card cup-item" data-density="90" aria-label={ui.cupOatsAriaLabel}>
+                    <div class="akc-item-icon">
+                        <Icon name="mdi:bowl-outline" class="w-8 h-8" />
+                    </div>
+                    <div>
+                        <div class="akc-item-name">{ui.cupOats}</div>
+                        <div class="akc-item-sub">{ui.cupOatsSub}</div>
+                    </div>
+                </button>
+            </div>
+
+            <div class="akc-step-title">
+                <span class="akc-step-number">2</span>
+                <span>{ui.stepHowManyCups}</span>
+            </div>
+            <div class="akc-amount-control">
+                <div class="akc-stepper">
+                    <button class="akc-step-btn" id="cup-minus" aria-label={ui.stepperMinus}>-</button>
+                    <input
+                        type="number"
+                        class="akc-step-input"
+                        id="cup-input"
+                        value="1"
+                        min="0"
+                        step="0.25"
+                        aria-label={ui.cupsAmountLabel}
+                    />
+                    <button class="akc-step-btn" id="cup-plus" aria-label={ui.stepperPlus}>+</button>
+                </div>
+                <div class="akc-quick-amounts">
+                    <button class="akc-quick-btn cup-quick" data-val="0.25">{ui.cupQuick1_4}</button>
+                    <button class="akc-quick-btn cup-quick" data-val="0.3333">{ui.cupQuick1_3}</button>
+                    <button class="akc-quick-btn cup-quick" data-val="0.5">{ui.cupQuick1_2}</button>
+                    <button class="akc-quick-btn cup-quick" data-val="1">{ui.cupQuick1}</button>
+                </div>
+            </div>
+
+            <div class="akc-result-display">
+                <div class="akc-result-value" id="cup-result">120</div>
+                <div class="akc-result-unit">{ui.unitGrams}</div>
+            </div>
+        </div>
+
+        <div class="akc-tab-content" id="content-spoons">
+            <div class="akc-step-title">
+                <span class="akc-step-number">1</span>
+                <span>{ui.stepSelectMeasure}</span>
+            </div>
+            <div class="akc-toggle">
+                <button
+                    class="akc-toggle-btn spoon-toggle active"
+                    data-multiplier="1"
+                    aria-label={ui.spoonTablespoonAriaLabel}
+                >
+                    {ui.spoonTablespoon}
+                </button>
+                <button
+                    class="akc-toggle-btn spoon-toggle"
+                    data-multiplier="0.3333"
+                    aria-label={ui.spoonTeaspoonAriaLabel}
+                >
+                    {ui.spoonTeaspoon}
+                </button>
+            </div>
+
+            <div class="akc-step-title">
+                <span class="akc-step-number">2</span>
+                <span>{ui.stepSelectIngredient}</span>
+            </div>
+            <div class="akc-grid">
+                <button
+                    class="akc-item-card spoon-item active"
+                    data-density="15"
+                    aria-label={ui.spoonLeavingAriaLabel}
+                >
+                    <div class="akc-item-icon">
+                        <Icon name="mdi:flask-outline" class="w-8 h-8" />
+                    </div>
+                    <div>
+                        <div class="akc-item-name">{ui.spoonLeavening}</div>
+                        <div class="akc-item-sub">{ui.spoonLeaveningSub}</div>
+                    </div>
+                </button>
+                <button class="akc-item-card spoon-item" data-density="18" aria-label={ui.spoonSaltAriaLabel}>
+                    <div class="akc-item-icon"><Icon name="mdi:shaker" class="w-8 h-8" /></div>
+                    <div>
+                        <div class="akc-item-name">{ui.spoonSalt}</div>
+                        <div class="akc-item-sub">{ui.spoonSaltSub}</div>
+                    </div>
+                </button>
+                <button
+                    class="akc-item-card spoon-item"
+                    data-density="15"
+                    aria-label={ui.spoonSugarAriaLabel}
+                >
+                    <div class="akc-item-icon"><Icon name="mdi:shaker-outline" class="w-8 h-8" /></div>
+                    <div>
+                        <div class="akc-item-name">{ui.spoonSugar}</div>
+                        <div class="akc-item-sub">{ui.spoonSugarSub}</div>
+                    </div>
+                </button>
+                <button class="akc-item-card spoon-item" data-density="15" aria-label={ui.spoonLiquidsAriaLabel}>
+                    <div class="akc-item-icon">
+                        <Icon name="mdi:water-outline" class="w-8 h-8" />
+                    </div>
+                    <div>
+                        <div class="akc-item-name">{ui.spoonLiquids}</div>
+                        <div class="akc-item-sub">{ui.spoonLiquidsSub}</div>
+                    </div>
+                </button>
+            </div>
+
+            <div class="akc-step-title">
+                <span class="akc-step-number">3</span>
+                <span>{ui.stepQuantity}</span>
+            </div>
+            <div class="akc-amount-control">
+                <div class="akc-stepper">
+                    <button class="akc-step-btn" id="spoon-minus" aria-label={ui.stepperMinus}>-</button>
+                    <input
+                        type="number"
+                        class="akc-step-input"
+                        id="spoon-input"
+                        value="1"
+                        min="0"
+                        step="0.25"
+                        aria-label={ui.spoonQuantityLabel}
+                    />
+                    <button class="akc-step-btn" id="spoon-plus" aria-label={ui.stepperPlus}>+</button>
+                </div>
+                <div class="akc-quick-amounts">
+                    <button class="akc-quick-btn spoon-quick" data-val="0.25">{ui.spoonQuick1_4}</button>
+                    <button class="akc-quick-btn spoon-quick" data-val="0.5">{ui.spoonQuick1_2}</button>
+                    <button class="akc-quick-btn spoon-quick" data-val="1">{ui.spoonQuick1}</button>
+                    <button class="akc-quick-btn spoon-quick" data-val="2">{ui.spoonQuick2}</button>
+                </div>
+            </div>
+
+            <div class="akc-result-display">
+                <div class="akc-result-value" id="spoon-result">15</div>
+                <div class="akc-result-unit">{ui.unitGramsML}</div>
+            </div>
+        </div>
+
+        <div class="akc-tab-content" id="content-temps">
+            <div class="akc-step-title">
+                <span class="akc-step-number"><Icon name="mdi:fire" class="w-5 h-5" /></span>
+                <span>{ui.stepOvenConversion}</span>
+            </div>
+            <div class="akc-temps-container">
+                <div class="akc-temp-box">
+                    <div class="akc-temp-label">{ui.tempFahrenheit}</div>
+                    <input
+                        type="number"
+                        class="akc-temp-input"
+                        id="temp-f-input"
+                        value="350"
+                        aria-label={ui.tempFahrenheitAriaLabel}
+                    />
+                </div>
+                <div class="akc-temp-middle">
+                    <Icon name="mdi:swap-horizontal" class="w-8 h-8" />
+                </div>
+                <div class="akc-temp-box">
+                    <div class="akc-temp-label">{ui.tempCelsius}</div>
+                    <input
+                        type="number"
+                        class="akc-temp-input"
+                        id="temp-c-input"
+                        value="177"
+                        aria-label={ui.tempCelsiusAriaLabel}
+                    />
+                </div>
+            </div>
+
+            <div class="akc-step-title">
+                <span class="akc-step-number"
+                    ><Icon name="mdi:book-open-outline" class="w-5 h-5" /></span
+                >
+                <span>{ui.stepFrequentTemps}</span>
+            </div>
+            <div class="akc-presets">
+                <button
+                    class="akc-preset-card temp-preset"
+                    data-f="275"
+                    aria-label={ui.tempPreset275AriaLabel}
+                >
+                    <div class="akc-preset-temp">{ui.tempPreset275}</div>
+                    <div class="akc-preset-desc">{ui.tempPreset275Desc}</div>
+                </button>
+                <button
+                    class="akc-preset-card temp-preset"
+                    data-f="325"
+                    aria-label={ui.tempPreset325AriaLabel}
+                >
+                    <div class="akc-preset-temp">{ui.tempPreset325}</div>
+                    <div class="akc-preset-desc">{ui.tempPreset325Desc}</div>
+                </button>
+                <button
+                    class="akc-preset-card temp-preset"
+                    data-f="350"
+                    aria-label={ui.tempPreset350AriaLabel}
+                >
+                    <div class="akc-preset-temp">{ui.tempPreset350}</div>
+                    <div class="akc-preset-desc">{ui.tempPreset350Desc}</div>
+                </button>
+                <button
+                    class="akc-preset-card temp-preset"
+                    data-f="400"
+                    aria-label={ui.tempPreset400AriaLabel}
+                >
+                    <div class="akc-preset-temp">{ui.tempPreset400}</div>
+                    <div class="akc-preset-desc">{ui.tempPreset400Desc}</div>
+                </button>
+                <button
+                    class="akc-preset-card temp-preset"
+                    data-f="425"
+                    aria-label={ui.tempPreset425AriaLabel}
+                >
+                    <div class="akc-preset-temp">{ui.tempPreset425}</div>
+                    <div class="akc-preset-desc">{ui.tempPreset425Desc}</div>
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style is:inline define:vars={{}}>
+  :root {
+    --akc-primary: #ea580c;
+    --akc-secondary: #f97316;
+    --akc-text: #0f172a;
+    --akc-text-muted: #475569;
+    --akc-bg: #fff;
+    --akc-bg-secondary: #f8fafc;
+    --akc-bg-tertiary: #f1f5f9;
+    --akc-border: #e2e8f0;
+  }
+
+  .theme-dark {
+    --akc-primary: #fb923c;
+    --akc-secondary: #fb923c;
+    --akc-text: #fff;
+    --akc-text-muted: #a0aec0;
+    --akc-bg: #0f172a;
+    --akc-bg-secondary: #1c1f2e;
+    --akc-bg-tertiary: #151720;
+    --akc-border: #2d3748;
+  }
+
+  .akc-wrapper {
+    max-width: 800px;
+    margin: 0 auto;
+  }
+
+  .akc-main-card {
+    background: var(--akc-bg);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border: 1px solid var(--akc-border);
+    border-radius: 2rem;
+    padding: 2.5rem;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+    color: var(--akc-text);
+  }
+
+  .theme-dark .akc-main-card {
+    background: rgba(15, 23, 42, 0.4);
+    border-color: rgba(255, 255, 255, 0.05);
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+  }
+
+  .akc-tabs {
+    display: flex;
+    gap: 1rem;
+    background: rgba(0, 0, 0, 0.04);
+    padding: 0.5rem;
+    border-radius: 1.5rem;
+    margin-bottom: 2.5rem;
+  }
+
+  .theme-dark .akc-tabs {
+    background: rgba(0, 0, 0, 0.2);
+  }
+
+  .akc-tab-btn {
+    flex: 1;
+    border: none;
+    background: transparent;
+    padding: 1rem;
+    border-radius: 1.2rem;
+    font-size: 1rem;
+    font-weight: 600;
+    color: inherit;
+    opacity: 0.6;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+  }
+
+  .akc-tab-btn:hover {
+    opacity: 1;
+    background: rgba(255, 255, 255, 0.05);
+  }
+
+  .akc-tab-btn.active {
+    opacity: 1;
+    background: var(--akc-primary);
+    color: var(--akc-text);
+    box-shadow: 0 8px 20px rgba(234, 88, 12, 0.3);
+    transform: translateY(-2px);
+  }
+
+  .akc-tab-content {
+    display: none;
+    animation: slide-up 0.4s ease-out forwards;
+  }
+
+  .akc-tab-content.active {
+    display: block;
+  }
+
+  @keyframes slide-up {
+    from {
+      opacity: 0;
+      transform: translateY(15px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .akc-step-title {
+    font-size: 1.25rem;
+    font-weight: 700;
+    margin-bottom: 1.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    color: var(--akc-text);
+  }
+
+  .akc-step-number {
+    background: var(--akc-primary);
+    color: var(--akc-text);
+    width: 2rem;
+    height: 2rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    font-size: 1rem;
+  }
+
+  .akc-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+    gap: 1rem;
+    margin-bottom: 2.5rem;
+  }
+
+  .akc-item-card {
+    background: var(--akc-bg-secondary);
+    border: 1px solid var(--akc-border);
+    border-radius: 1.5rem;
+    padding: 1.5rem 1rem;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+    color: inherit;
+  }
+
+  .theme-dark .akc-item-card {
+    background: rgba(0, 0, 0, 0.2);
+    border-color: rgba(255, 255, 255, 0.05);
+  }
+
+  .akc-item-card:hover {
+    border-color: rgba(234, 88, 12, 0.5);
+  }
+
+  .akc-item-card.active {
+    background: rgba(234, 88, 12, 0.1);
+    border-color: var(--akc-primary);
+    box-shadow: 0 10px 25px rgba(234, 88, 12, 0.15);
+    transform: translateY(-4px);
+  }
+
+  .akc-item-icon {
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    background: rgba(0, 0, 0, 0.05);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--akc-primary);
+    font-size: 1.5rem;
+    transition: all 0.3s ease;
+  }
+
+  .theme-dark .akc-item-icon {
+    background: rgba(255, 255, 255, 0.05);
+  }
+
+  .akc-item-card.active .akc-item-icon {
+    background: var(--akc-primary);
+    color: var(--akc-text);
+    transform: scale(1.1);
+  }
+
+  .akc-item-name {
+    font-weight: 600;
+    font-size: 0.95rem;
+    line-height: 1.2;
+  }
+
+  .akc-item-sub {
+    font-size: 0.75rem;
+    opacity: 0.6;
+    margin-top: 0.25rem;
+  }
+
+  .akc-amount-control {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    margin-bottom: 3rem;
+    align-items: center;
+  }
+
+  .akc-stepper {
+    display: flex;
+    align-items: center;
+    background: rgba(0, 0, 0, 0.03);
+    border-radius: 2rem;
+    padding: 0.5rem;
+    border: 1px solid rgba(0, 0, 0, 0.05);
+  }
+
+  .theme-dark .akc-stepper {
+    background: rgba(0, 0, 0, 0.3);
+    border-color: rgba(255, 255, 255, 0.05);
+  }
+
+  .akc-step-btn {
+    width: 3.5rem;
+    height: 3.5rem;
+    border-radius: 50%;
+    border: none;
+    background: white;
+    color: var(--akc-primary);
+    font-size: 1.5rem;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
+    transition: all 0.2s ease;
+  }
+
+  .theme-dark .akc-step-btn {
+    background: rgba(255, 255, 255, 0.1);
+    color: var(--akc-text);
+  }
+
+  .akc-step-btn:hover {
+    transform: scale(1.05);
+    background: var(--akc-primary);
+    color: var(--akc-text);
+  }
+
+  .akc-step-input {
+    width: 120px;
+    text-align: center;
+    font-size: 2.5rem;
+    font-weight: 800;
+    background: transparent;
+    border: none;
+    color: inherit;
+    outline: none;
+  }
+
+  .akc-quick-amounts {
+    display: flex;
+    gap: 0.75rem;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  .akc-quick-btn {
+    padding: 0.5rem 1rem;
+    border-radius: 1rem;
+    border: 1px solid var(--akc-border);
+    background: transparent;
+    color: inherit;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+
+  .theme-dark .akc-quick-btn {
+    border-color: rgba(255, 255, 255, 0.1);
+  }
+
+  .akc-quick-btn:hover {
+    background: rgba(234, 88, 12, 0.1);
+    color: var(--akc-primary);
+    border-color: var(--akc-primary);
+  }
+
+  .akc-result-display {
+    background: linear-gradient(135deg, rgba(234, 88, 12, 0.1), rgba(249, 115, 22, 0.05));
+    border: 2px solid rgba(234, 88, 12, 0.2);
+    border-radius: 2rem;
+    padding: 3rem 2rem;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .theme-dark .akc-result-display {
+    background: linear-gradient(135deg, rgba(234, 88, 12, 0.15), rgba(249, 115, 22, 0.05));
+    border-color: rgba(234, 88, 12, 0.3);
+  }
+
+  .akc-result-display::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: radial-gradient(circle at top right, rgba(234, 88, 12, 0.1), transparent 70%);
+    pointer-events: none;
+  }
+
+  .akc-result-value {
+    font-size: 6rem;
+    font-weight: 900;
+    line-height: 1;
+    background: linear-gradient(to right, var(--akc-primary), var(--akc-secondary));
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin-bottom: 0.5rem;
+  }
+
+  .akc-result-unit {
+    font-size: 1.5rem;
+    font-weight: 700;
+    opacity: 0.8;
+    text-transform: uppercase;
+    letter-spacing: 0.2em;
+    color: var(--akc-text-muted);
+  }
+
+  .akc-toggle {
+    display: flex;
+    background: rgba(0, 0, 0, 0.05);
+    border-radius: 1.5rem;
+    padding: 0.5rem;
+    margin-bottom: 2.5rem;
+  }
+
+  .theme-dark .akc-toggle {
+    background: rgba(0, 0, 0, 0.3);
+  }
+
+  .akc-toggle-btn {
+    flex: 1;
+    padding: 1rem;
+    border: none;
+    background: transparent;
+    color: inherit;
+    font-weight: 600;
+    border-radius: 1rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    opacity: 0.6;
+  }
+
+  .akc-toggle-btn.active {
+    background: var(--akc-primary);
+    color: var(--akc-text);
+    opacity: 1;
+    box-shadow: 0 4px 15px rgba(234, 88, 12, 0.3);
+  }
+
+  .akc-temps-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 2rem;
+    margin-bottom: 3rem;
+  }
+
+  .akc-temp-box {
+    flex: 1;
+    background: var(--akc-bg-secondary);
+    border: 1px solid var(--akc-border);
+    border-radius: 2rem;
+    padding: 2rem;
+    text-align: center;
+    transition: all 0.3s ease;
+  }
+
+  .theme-dark .akc-temp-box {
+    background: rgba(0, 0, 0, 0.2);
+    border-color: rgba(255, 255, 255, 0.05);
+  }
+
+  .akc-temp-box:focus-within {
+    border-color: var(--akc-primary);
+    box-shadow: 0 10px 30px rgba(234, 88, 12, 0.1);
+    transform: translateY(-5px);
+  }
+
+  .akc-temp-label {
+    font-size: 1rem;
+    font-weight: 700;
+    opacity: 0.7;
+    margin-bottom: 1rem;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+  }
+
+  .akc-temp-input {
+    width: 100%;
+    text-align: center;
+    font-size: 4rem;
+    font-weight: 900;
+    background: transparent;
+    border: none;
+    color: inherit;
+    outline: none;
+  }
+
+  .akc-temp-middle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--akc-primary);
+    background: rgba(234, 88, 12, 0.1);
+    width: 4rem;
+    height: 4rem;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  .akc-presets {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 1rem;
+  }
+
+  .akc-preset-card {
+    background: var(--akc-bg-secondary);
+    border: 1px solid var(--akc-border);
+    border-radius: 1rem;
+    padding: 1rem;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    color: inherit;
+  }
+
+  .theme-dark .akc-preset-card {
+    background: rgba(0, 0, 0, 0.2);
+    border-color: rgba(255, 255, 255, 0.05);
+  }
+
+  .akc-preset-card:hover {
+    background: rgba(234, 88, 12, 0.05);
+    border-color: var(--akc-primary);
+    transform: translateY(-2px);
+  }
+
+  .akc-preset-temp {
+    font-weight: 800;
+    font-size: 1.25rem;
+    color: var(--akc-primary);
+    margin-bottom: 0.25rem;
+  }
+
+  .akc-preset-desc {
+    font-size: 0.8rem;
+    opacity: 0.7;
+    font-weight: 500;
+  }
+
+  @media (max-width: 768px) {
+    .akc-tabs {
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+
+    .akc-temps-container {
+      flex-direction: column;
+    }
+
+    .akc-temp-middle {
+      height: 3rem;
+      width: 3rem;
+      transform: rotate(90deg);
+    }
+
+    .akc-result-value {
+      font-size: 4.5rem;
+    }
+
+    .akc-main-card {
+      padding: 1.5rem;
+    }
+  }
+</style>
+
+<script>
+    import { AmericanKitchenEngine } from "./AmericanKitchenEngine";
+
+    AmericanKitchenEngine.initTabs();
+    AmericanKitchenEngine.initCups();
+    AmericanKitchenEngine.initSpoons();
+    AmericanKitchenEngine.initTemperatures();
+</script>