@jjlmoya/utils-diy 1.1.0

package/src/tool/clayCalculator/component.astro

@@ -0,0 +1,731 @@
+---
+import type { KnownLocale } from '../../types';
+import type { ClayCalculatorUI } from './ui';
+
+interface Props {
+  locale?: KnownLocale;
+  ui?: Record<string, unknown>;
+}
+
+const { ui } = Astro.props;
+const t = (ui ?? {}) as ClayCalculatorUI;
+---
+
+<div class="cc-root">
+  <div class="cc-grid">
+    <div class="cc-panel-left">
+      <div class="cc-controls">
+        <div class="cc-field">
+          <label class="cc-label" for="cc-initial-size">{t.labelInitialSize}</label>
+          <input
+            type="number"
+            id="cc-initial-size"
+            value="100"
+            min="1"
+            step="0.1"
+            class="cc-input"
+          />
+        </div>
+
+        <div class="cc-field">
+          <label class="cc-label">{t.labelShrinkage}</label>
+          <div class="cc-slider-row">
+            <input
+              type="range"
+              id="cc-shrinkage-slider"
+              min="0"
+              max="20"
+              value="12"
+              step="0.5"
+              class="cc-slider"
+            />
+            <span id="cc-shrinkage-display" class="cc-slider-val">12.0</span>
+          </div>
+          <div class="cc-slider-labels">
+            <span>{t.labelLow}</span>
+            <span>{t.labelMedium}</span>
+            <span>{t.labelHigh}</span>
+          </div>
+        </div>
+
+        <div class="cc-presets">
+          <button id="cc-preset-low" class="cc-preset cc-preset-terracota">{t.presetTerracota}</button>
+          <button id="cc-preset-medium" class="cc-preset cc-preset-gres">{t.presetGres}</button>
+          <button id="cc-preset-high" class="cc-preset cc-preset-porcelana">{t.presetPorcelana}</button>
+        </div>
+      </div>
+
+      <div class="cc-result-box">
+        <h3 class="cc-result-title">{t.labelResult}</h3>
+        <div class="cc-result-rows">
+          <div class="cc-result-row">
+            <span class="cc-result-label">{t.labelFinalSize}</span>
+            <span id="cc-final-size" class="cc-result-value cc-value-final">88.0 mm</span>
+          </div>
+          <div class="cc-result-row">
+            <span class="cc-result-label">{t.labelLoss}</span>
+            <span id="cc-loss-amount" class="cc-result-value cc-value-loss">-12.0 mm</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="cc-tip">
+        <svg class="cc-tip-icon" viewBox="0 0 24 24" fill="currentColor" width="16" height="16">
+          <path d="M13 9h-2V7h2m0 10h-2v-6h2m-1-9A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2z"/>
+        </svg>
+        <span>{t.tipText}</span>
+      </div>
+    </div>
+
+    <div class="cc-panel-right">
+      <div class="cc-blob cc-blob-top"></div>
+      <div class="cc-blob cc-blob-bottom"></div>
+
+      <div class="cc-viz-wrapper">
+        <div class="cc-viz-aspect">
+          <div id="cc-circle-initial" class="cc-circle-initial">
+            <div class="cc-badge-initial">
+              {t.labelInitialBadge} <span id="cc-viz-initial">100.0</span> mm
+            </div>
+          </div>
+
+          <div id="cc-circle-final" class="cc-circle-final">
+            <div class="cc-circle-inner">
+              <div id="cc-viz-final" class="cc-viz-number">88.0</div>
+              <div class="cc-viz-unit">{t.labelFinalBadge}</div>
+            </div>
+          </div>
+
+          <div class="cc-badge-loss">
+            {t.labelLossBadge} <span id="cc-viz-loss">12.0</span>%
+          </div>
+        </div>
+
+        <div class="cc-areas">
+          <div class="cc-area-item">
+            <div class="cc-area-label">{t.labelInitialArea}</div>
+            <div id="cc-area-initial" class="cc-area-value cc-area-initial">31.416 mm²</div>
+          </div>
+          <div class="cc-area-item">
+            <div class="cc-area-label">{t.labelFinalArea}</div>
+            <div id="cc-area-final" class="cc-area-value cc-area-final">24.328 mm²</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  let ccInputSize: HTMLInputElement | null = null;
+  let ccSlider: HTMLInputElement | null = null;
+  let ccSliderDisplay: HTMLElement | null = null;
+  let ccFinalSize: HTMLElement | null = null;
+  let ccLoss: HTMLElement | null = null;
+  let ccVizInitial: HTMLElement | null = null;
+  let ccVizFinal: HTMLElement | null = null;
+  let ccVizLoss: HTMLElement | null = null;
+  let ccCircleFinal: HTMLElement | null = null;
+  let ccAreaInitial: HTMLElement | null = null;
+  let ccAreaFinal: HTMLElement | null = null;
+
+  function setText(el: HTMLElement | null, text: string) {
+    if (el) el.innerText = text;
+  }
+
+  function updateCircle(scale: number) {
+    if (!ccCircleFinal) return;
+    const pct = (scale * 100).toFixed(1);
+    ccCircleFinal.style.width = `${pct}%`;
+    ccCircleFinal.style.height = `${pct}%`;
+  }
+
+  function calculate() {
+    const initialSize = parseFloat(ccInputSize?.value ?? '0') || 0;
+    const shrinkage = parseFloat(ccSlider?.value ?? '0') || 0;
+    const finalSize = initialSize * (1 - shrinkage / 100);
+    const loss = initialSize - finalSize;
+    const scale = initialSize > 0 ? finalSize / initialSize : 0;
+    const areaInitial = Math.PI * (initialSize / 2) ** 2;
+    const areaFinal = Math.PI * (finalSize / 2) ** 2;
+    const fmt = { maximumFractionDigits: 0 };
+
+    setText(ccSliderDisplay, shrinkage.toFixed(1));
+    setText(ccFinalSize, `${finalSize.toFixed(1)} mm`);
+    setText(ccLoss, `-${loss.toFixed(1)} mm`);
+    setText(ccVizInitial, initialSize.toFixed(1));
+    setText(ccVizFinal, finalSize.toFixed(1));
+    setText(ccVizLoss, shrinkage.toFixed(1));
+    setText(ccAreaInitial, `${areaInitial.toLocaleString(undefined, fmt)} mm²`);
+    setText(ccAreaFinal, `${areaFinal.toLocaleString(undefined, fmt)} mm²`);
+    updateCircle(scale);
+  }
+
+  function setShrinkage(value: number) {
+    if (ccSlider) ccSlider.value = value.toString();
+    calculate();
+  }
+
+  function initClayCalculator(root: HTMLElement) {
+    ccInputSize = root.querySelector<HTMLInputElement>('#cc-initial-size');
+    ccSlider = root.querySelector<HTMLInputElement>('#cc-shrinkage-slider');
+    ccSliderDisplay = root.querySelector<HTMLElement>('#cc-shrinkage-display');
+    ccFinalSize = root.querySelector<HTMLElement>('#cc-final-size');
+    ccLoss = root.querySelector<HTMLElement>('#cc-loss-amount');
+    ccVizInitial = root.querySelector<HTMLElement>('#cc-viz-initial');
+    ccVizFinal = root.querySelector<HTMLElement>('#cc-viz-final');
+    ccVizLoss = root.querySelector<HTMLElement>('#cc-viz-loss');
+    ccCircleFinal = root.querySelector<HTMLElement>('#cc-circle-final');
+    ccAreaInitial = root.querySelector<HTMLElement>('#cc-area-initial');
+    ccAreaFinal = root.querySelector<HTMLElement>('#cc-area-final');
+
+    if (!ccInputSize || !ccSlider) return;
+
+    ccInputSize.addEventListener('input', calculate);
+    ccSlider.addEventListener('input', calculate);
+    root.querySelector('#cc-preset-low')?.addEventListener('click', () => setShrinkage(8));
+    root.querySelector('#cc-preset-medium')?.addEventListener('click', () => setShrinkage(12));
+    root.querySelector('#cc-preset-high')?.addEventListener('click', () => setShrinkage(15));
+    calculate();
+  }
+
+  function init() {
+    document.querySelectorAll<HTMLElement>('.cc-root').forEach(initClayCalculator);
+  }
+
+  document.addEventListener('astro:page-load', init);
+  init();
+</script>
+
+<style>
+  .cc-root {
+    width: 100%;
+    max-width: 64rem;
+    margin: 0 auto;
+    background: linear-gradient(135deg, #fffbeb, #fff7ed);
+    border-radius: 1.5rem;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
+    overflow: hidden;
+    border: 1px solid #fde68a;
+  }
+
+  .cc-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+  }
+
+  @media (min-width: 1024px) {
+    .cc-grid {
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+
+  .cc-panel-left {
+    padding: 2rem;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+  }
+
+  @media (min-width: 768px) {
+    .cc-panel-left {
+      padding: 3rem;
+    }
+  }
+
+  .cc-controls {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  .cc-field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .cc-label {
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: #92400e;
+  }
+
+  .cc-input {
+    width: 100%;
+    background: #fff;
+    border: 2px solid #fcd34d;
+    border-radius: 0.75rem;
+    padding: 0.75rem 1rem;
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: #1e293b;
+    outline: none;
+    transition: border-color 0.2s, box-shadow 0.2s;
+    box-sizing: border-box;
+  }
+
+  .cc-input:focus {
+    border-color: #f59e0b;
+    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
+  }
+
+  .cc-slider-row {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  .cc-slider {
+    flex: 1;
+    height: 0.75rem;
+    background: #fde68a;
+    border-radius: 999px;
+    appearance: none;
+    cursor: pointer;
+    accent-color: #d97706;
+    outline: none;
+  }
+
+  .cc-slider::-webkit-slider-thumb {
+    appearance: none;
+    width: 20px;
+    height: 20px;
+    background: #d97706;
+    border-radius: 50%;
+    cursor: pointer;
+    border: 3px solid #fff;
+    box-shadow: 0 0 8px rgba(217, 119, 6, 0.4);
+  }
+
+  .cc-slider-val {
+    font-size: 1.875rem;
+    font-weight: 900;
+    color: #b45309;
+    width: 5rem;
+    text-align: right;
+    flex-shrink: 0;
+  }
+
+  .cc-slider-labels {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.7rem;
+    color: #d97706;
+  }
+
+  .cc-presets {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.75rem;
+    padding-top: 0.5rem;
+  }
+
+  .cc-preset {
+    padding: 0.5rem 1rem;
+    border-radius: 0.5rem;
+    border: 2px solid;
+    font-weight: 700;
+    font-size: 0.875rem;
+    cursor: pointer;
+    transition: background 0.15s;
+  }
+
+  .cc-preset-terracota {
+    background: #ffedd5;
+    border-color: #fdba74;
+    color: #9a3412;
+  }
+
+  .cc-preset-terracota:hover {
+    background: #fed7aa;
+  }
+
+  .cc-preset-gres {
+    background: #fef3c7;
+    border-color: #fcd34d;
+    color: #92400e;
+  }
+
+  .cc-preset-gres:hover {
+    background: #fde68a;
+  }
+
+  .cc-preset-porcelana {
+    grid-column: span 2;
+    background: #fee2e2;
+    border-color: #fca5a5;
+    color: #991b1b;
+  }
+
+  .cc-preset-porcelana:hover {
+    background: #fecaca;
+  }
+
+  .cc-result-box {
+    background: #fff;
+    border-radius: 1rem;
+    padding: 1.5rem;
+    border: 2px solid #fcd34d;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  }
+
+  .cc-result-title {
+    font-size: 0.7rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: #92400e;
+    margin: 0 0 1rem;
+  }
+
+  .cc-result-rows {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .cc-result-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+  }
+
+  .cc-result-label {
+    color: #64748b;
+    font-size: 0.9rem;
+  }
+
+  .cc-result-value {
+    font-weight: 900;
+  }
+
+  .cc-value-final {
+    font-size: 1.875rem;
+    color: #059669;
+  }
+
+  .cc-value-loss {
+    font-size: 1.125rem;
+    color: #dc2626;
+  }
+
+  .cc-tip {
+    background: #fef3c7;
+    border-radius: 0.75rem;
+    padding: 1rem;
+    border: 1px solid #fde68a;
+    display: flex;
+    align-items: flex-start;
+    gap: 0.5rem;
+    font-size: 0.75rem;
+    color: #92400e;
+    line-height: 1.5;
+  }
+
+  .cc-tip-icon {
+    flex-shrink: 0;
+    margin-top: 1px;
+  }
+
+  .cc-panel-right {
+    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
+    padding: 2rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    overflow: hidden;
+    min-height: 400px;
+  }
+
+  @media (min-width: 768px) {
+    .cc-panel-right {
+      padding: 3rem;
+    }
+  }
+
+  .cc-blob {
+    position: absolute;
+    border-radius: 50%;
+    filter: blur(60px);
+    opacity: 0.12;
+    pointer-events: none;
+  }
+
+  .cc-blob-top {
+    top: 2.5rem;
+    left: 2.5rem;
+    width: 8rem;
+    height: 8rem;
+    background: #f59e0b;
+  }
+
+  .cc-blob-bottom {
+    bottom: 2.5rem;
+    right: 2.5rem;
+    width: 10rem;
+    height: 10rem;
+    background: #f97316;
+  }
+
+  .cc-viz-wrapper {
+    position: relative;
+    z-index: 1;
+    width: 100%;
+    max-width: 24rem;
+  }
+
+  .cc-viz-aspect {
+    aspect-ratio: 1 / 1;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .cc-circle-initial {
+    position: absolute;
+    border-radius: 50%;
+    border: 4px dashed #fbbf24;
+    background: rgba(253, 230, 138, 0.2);
+    transition: width 0.7s ease, height 0.7s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
+
+  .cc-badge-initial {
+    position: absolute;
+    top: -2rem;
+    left: 50%;
+    transform: translateX(-50%);
+    background: #d97706;
+    color: #fff;
+    padding: 0.25rem 0.75rem;
+    border-radius: 999px;
+    font-size: 0.75rem;
+    font-weight: 700;
+    white-space: nowrap;
+  }
+
+  .cc-circle-final {
+    position: absolute;
+    border-radius: 50%;
+    border: 4px solid #059669;
+    background: rgba(16, 185, 129, 0.3);
+    transition: width 0.7s ease, height 0.7s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 10px 40px rgba(5, 150, 105, 0.3);
+    width: 88%;
+    height: 88%;
+  }
+
+  .cc-circle-inner {
+    text-align: center;
+  }
+
+  .cc-viz-number {
+    font-size: 3rem;
+    font-weight: 900;
+    color: #065f46;
+    line-height: 1;
+    margin-bottom: 0.25rem;
+  }
+
+  .cc-viz-unit {
+    font-size: 0.875rem;
+    font-weight: 700;
+    color: #047857;
+  }
+
+  .cc-badge-loss {
+    position: absolute;
+    bottom: -3rem;
+    left: 50%;
+    transform: translateX(-50%);
+    background: #dc2626;
+    color: #fff;
+    padding: 0.5rem 1rem;
+    border-radius: 999px;
+    font-size: 0.875rem;
+    font-weight: 700;
+    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
+    white-space: nowrap;
+  }
+
+  .cc-areas {
+    margin-top: 4.5rem;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+    text-align: center;
+  }
+
+  .cc-area-item {
+    background: rgba(255, 255, 255, 0.6);
+    border-radius: 0.75rem;
+    padding: 0.75rem;
+    backdrop-filter: blur(4px);
+  }
+
+  .cc-area-label {
+    font-size: 0.7rem;
+    color: #475569;
+    margin-bottom: 0.25rem;
+  }
+
+  .cc-area-value {
+    font-size: 1rem;
+    font-weight: 700;
+  }
+
+  .cc-area-initial {
+    color: #b45309;
+  }
+
+  .cc-area-final {
+    color: #047857;
+  }
+
+  :global(.theme-dark) .cc-root {
+    background: linear-gradient(135deg, #0f172a, #1e293b);
+    border-color: #334155;
+  }
+
+  :global(.theme-dark) .cc-label {
+    color: #fbbf24;
+  }
+
+  :global(.theme-dark) .cc-input {
+    background: #1e293b;
+    border-color: #b45309;
+    color: #f8fafc;
+  }
+
+  :global(.theme-dark) .cc-input:focus {
+    border-color: #f59e0b;
+    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
+  }
+
+  :global(.theme-dark) .cc-slider {
+    background: rgba(180, 83, 9, 0.3);
+  }
+
+  :global(.theme-dark) .cc-slider-val {
+    color: #fbbf24;
+  }
+
+  :global(.theme-dark) .cc-slider-labels {
+    color: #d97706;
+  }
+
+  :global(.theme-dark) .cc-preset-terracota {
+    background: rgba(249, 115, 22, 0.15);
+    border-color: #c2410c;
+    color: #fb923c;
+  }
+
+  :global(.theme-dark) .cc-preset-terracota:hover {
+    background: rgba(249, 115, 22, 0.25);
+  }
+
+  :global(.theme-dark) .cc-preset-gres {
+    background: rgba(245, 158, 11, 0.15);
+    border-color: #b45309;
+    color: #fbbf24;
+  }
+
+  :global(.theme-dark) .cc-preset-gres:hover {
+    background: rgba(245, 158, 11, 0.25);
+  }
+
+  :global(.theme-dark) .cc-preset-porcelana {
+    background: rgba(220, 38, 38, 0.15);
+    border-color: #991b1b;
+    color: #f87171;
+  }
+
+  :global(.theme-dark) .cc-preset-porcelana:hover {
+    background: rgba(220, 38, 38, 0.25);
+  }
+
+  :global(.theme-dark) .cc-result-box {
+    background: #1e293b;
+    border-color: #b45309;
+  }
+
+  :global(.theme-dark) .cc-result-title {
+    color: #fbbf24;
+  }
+
+  :global(.theme-dark) .cc-result-label {
+    color: #94a3b8;
+  }
+
+  :global(.theme-dark) .cc-value-final {
+    color: #34d399;
+  }
+
+  :global(.theme-dark) .cc-value-loss {
+    color: #f87171;
+  }
+
+  :global(.theme-dark) .cc-tip {
+    background: rgba(180, 83, 9, 0.15);
+    border-color: rgba(180, 83, 9, 0.4);
+    color: #fbbf24;
+  }
+
+  :global(.theme-dark) .cc-panel-right {
+    background: linear-gradient(135deg, #1e293b, #0f172a);
+  }
+
+  :global(.theme-dark) .cc-circle-initial {
+    border-color: #b45309;
+    background: rgba(180, 83, 9, 0.1);
+  }
+
+  :global(.theme-dark) .cc-badge-initial {
+    background: #d97706;
+  }
+
+  :global(.theme-dark) .cc-circle-final {
+    border-color: #10b981;
+    background: rgba(16, 185, 129, 0.2);
+  }
+
+  :global(.theme-dark) .cc-viz-number {
+    color: #6ee7b7;
+  }
+
+  :global(.theme-dark) .cc-viz-unit {
+    color: #34d399;
+  }
+
+  :global(.theme-dark) .cc-badge-loss {
+    background: #ef4444;
+  }
+
+  :global(.theme-dark) .cc-area-item {
+    background: rgba(30, 41, 59, 0.6);
+  }
+
+  :global(.theme-dark) .cc-area-label {
+    color: #94a3b8;
+  }
+
+  :global(.theme-dark) .cc-area-initial {
+    color: #fbbf24;
+  }
+
+  :global(.theme-dark) .cc-area-final {
+    color: #34d399;
+  }
+</style>