@jjlmoya/utils-diy 1.13.0 → 1.14.0

package/src/tool/pythagoreanRightAngleCalculator/pythagorean-right-angle-calculator.css

@@ -0,0 +1,378 @@
+:root {
+  --prac-primary: #6366f1;
+  --prac-primary-dark: #4f46e5;
+  --prac-primary-light: #818cf8;
+  --prac-neutral: #1e293b;
+  --prac-neutral-light: #64748b;
+  --prac-success: #10b981;
+  --prac-warning: #f59e0b;
+  --prac-error: #ef4444;
+  --prac-border: #e2e8f0;
+  --prac-bg-light: #f8fafc;
+  --prac-bg-lighter: #f1f5f9;
+  --prac-bg: #fff;
+}
+
+:root.theme-dark {
+  --prac-primary: #818cf8;
+  --prac-primary-dark: #6366f1;
+  --prac-primary-light: #a5b4fc;
+  --prac-neutral: #f1f5f9;
+  --prac-neutral-light: #9ca3af;
+  --prac-success: #34d399;
+  --prac-warning: #fbbf24;
+  --prac-error: #f87171;
+  --prac-border: rgba(255, 255, 255, 0.1);
+  --prac-bg-light: rgba(255, 255, 255, 0.04);
+  --prac-bg-lighter: rgba(255, 255, 255, 0.02);
+  --prac-bg: rgba(255, 255, 255, 0.01);
+}
+
+.prac-root {
+  width: 100%;
+  color: var(--prac-neutral);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.prac-container {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0;
+  background: var(--prac-bg);
+}
+
+@media (min-width: 768px) {
+  .prac-container {
+    grid-template-columns: 280px 1fr;
+    gap: 2rem;
+    padding: 2rem;
+  }
+}
+
+.prac-inputs {
+  padding: 1.5rem;
+  border-bottom: 4px solid var(--prac-primary);
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  background: var(--prac-bg-light);
+}
+
+@media (min-width: 768px) {
+  .prac-inputs {
+    border-bottom: none;
+    border-right: 4px solid var(--prac-primary);
+    padding: 1.5rem;
+    background: var(--prac-bg);
+  }
+}
+
+.prac-unit-selector {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.75rem;
+}
+
+.prac-unit-btn {
+  padding: 0.875rem 1rem;
+  border: 2.5px solid var(--prac-border);
+  border-radius: 0.5rem;
+  background: var(--prac-bg);
+  color: var(--prac-neutral);
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 200ms ease;
+  font-size: 0.95rem;
+  letter-spacing: 0.5px;
+}
+
+.prac-unit-btn:hover {
+  border-color: var(--prac-primary);
+  background: var(--prac-bg-lighter);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
+}
+
+.prac-unit-btn.active {
+  background: var(--prac-primary);
+  color: #fff;
+  border-color: var(--prac-primary);
+  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.3);
+}
+
+.prac-input-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.prac-input-group label {
+  font-size: 0.8rem;
+  font-weight: 800;
+  color: var(--prac-neutral);
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+}
+
+.prac-input-group input {
+  padding: 0.875rem 1rem;
+  border: 2.5px solid var(--prac-border);
+  border-radius: 0.5rem;
+  font-size: 1.1rem;
+  font-weight: 700;
+  background: var(--prac-bg);
+  color: var(--prac-neutral);
+  transition: all 200ms ease;
+}
+
+.prac-input-group input:focus {
+  outline: none;
+  border-color: var(--prac-primary);
+  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
+  background: var(--prac-bg-lighter);
+}
+
+.prac-button-group {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.75rem;
+  margin-top: 0.5rem;
+}
+
+.prac-btn {
+  padding: 0.875rem 1rem;
+  border: 2.5px solid var(--prac-border);
+  border-radius: 0.5rem;
+  background: var(--prac-bg);
+  color: var(--prac-neutral);
+  font-weight: 700;
+  cursor: pointer;
+  font-size: 0.9rem;
+  transition: all 200ms ease;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.prac-btn:hover {
+  border-color: var(--prac-primary);
+  background: var(--prac-bg-lighter);
+  transform: translateY(-2px);
+}
+
+.prac-btn:active {
+  transform: translateY(0);
+}
+
+.prac-presets {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.75rem;
+  margin-top: 1.5rem;
+  padding-top: 1.5rem;
+  border-top: 2.5px solid var(--prac-border);
+}
+
+.prac-preset {
+  padding: 0.875rem 1rem;
+  border: 2.5px solid var(--prac-primary);
+  border-radius: 0.5rem;
+  background: var(--prac-bg-lighter);
+  color: var(--prac-neutral);
+  font-weight: 800;
+  cursor: pointer;
+  font-size: 0.9rem;
+  transition: all 200ms ease;
+}
+
+.prac-preset:hover {
+  background: var(--prac-primary);
+  color: #fff;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.3);
+}
+
+.prac-display {
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+.prac-status {
+  padding: 1.25rem;
+  border-radius: 0.75rem;
+  border: 2.5px solid var(--prac-border);
+  background: var(--prac-bg-light);
+  display: grid;
+  grid-template-columns: 50px 1fr;
+  gap: 1rem;
+  align-items: center;
+  transition: all 200ms ease;
+}
+
+.prac-status-indicator {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background: #e5e7eb;
+  box-shadow: inset 0 0 0 2px #9ca3af;
+}
+
+.prac-status.perfect .prac-status-indicator {
+  background: var(--prac-success);
+  box-shadow: 0 0 16px rgba(16, 185, 129, 0.5);
+}
+
+.prac-status.acceptable .prac-status-indicator {
+  background: var(--prac-success);
+  box-shadow: 0 0 16px rgba(16, 185, 129, 0.5);
+}
+
+.prac-status.warning .prac-status-indicator {
+  background: var(--prac-warning);
+  box-shadow: 0 0 16px rgba(245, 158, 11, 0.5);
+}
+
+.prac-status.error .prac-status-indicator {
+  background: var(--prac-error);
+  box-shadow: 0 0 16px rgba(239, 68, 68, 0.5);
+}
+
+.prac-status-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.prac-status-title {
+  font-weight: 800;
+  font-size: 1.05rem;
+  color: var(--prac-neutral);
+}
+
+.prac-status-value {
+  font-size: 0.9rem;
+  color: var(--prac-neutral-light);
+  font-weight: 700;
+}
+
+.prac-results-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+
+.prac-result-box {
+  padding: 1.25rem;
+  background: rgba(255, 255, 255, 0.5);
+  border-radius: 0.75rem;
+  border: 2.5px solid var(--prac-primary);
+  text-align: center;
+  transition: all 200ms ease;
+}
+
+:root.theme-dark .prac-result-box {
+  background: rgba(129, 140, 248, 0.1);
+  border-color: rgba(129, 140, 248, 0.6);
+}
+
+.prac-result-box:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.15);
+}
+
+.prac-result-label {
+  display: block;
+  font-size: 0.75rem;
+  font-weight: 800;
+  color: var(--prac-neutral-light);
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  margin-bottom: 0.5rem;
+}
+
+.prac-result-value {
+  display: block;
+  font-size: 2rem;
+  font-weight: 900;
+  color: var(--prac-primary);
+  margin-bottom: 0.35rem;
+}
+
+.prac-result-unit {
+  display: block;
+  font-size: 0.85rem;
+  color: var(--prac-neutral-light);
+  font-weight: 700;
+}
+
+.prac-svg {
+  width: 100%;
+  height: auto;
+  min-height: 180px;
+  max-height: 200px;
+  margin: 0.5rem 0;
+}
+
+.prac-label {
+  font-size: 12px;
+  font-weight: 800;
+  fill: var(--prac-primary);
+  text-anchor: middle;
+}
+
+.prac-label-hyp {
+  fill: var(--prac-primary);
+  font-weight: 900;
+  font-size: 13px;
+}
+
+.prac-message {
+  font-size: 0.95rem;
+  line-height: 1.5;
+  color: var(--prac-neutral);
+  font-weight: 700;
+  min-height: 1.5rem;
+  padding: 1rem;
+  background: rgba(245, 158, 11, 0.2);
+  border-left: 5px solid var(--prac-warning);
+  border-radius: 0.375rem;
+}
+
+.prac-status.error ~ .prac-message {
+  background: rgba(239, 68, 68, 0.2);
+  border-left-color: var(--prac-error);
+}
+
+.prac-status.perfect ~ .prac-message,
+.prac-status.acceptable ~ .prac-message {
+  background: rgba(16, 185, 129, 0.2);
+  border-left-color: var(--prac-success);
+}
+
+.prac-status.idle ~ .prac-message {
+  background: transparent;
+  border: none;
+  min-height: auto;
+  padding: 0;
+}
+
+@media (max-width: 640px) {
+  .prac-inputs {
+    padding: 1.25rem;
+  }
+
+  .prac-display {
+    padding: 1.25rem;
+  }
+
+  .prac-result-value {
+    font-size: 1.75rem;
+  }
+
+  .prac-svg {
+    min-height: 160px;
+    max-height: 180px;
+  }
+}

package/src/tool/pythagoreanRightAngleCalculator/seo.astro

@@ -0,0 +1,15 @@
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { pythagoreanRightAngleCalculator } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'en' } = Astro.props;
+const content = await pythagoreanRightAngleCalculator.i18n[locale]?.();
+if (!content) return null;
+---
+
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/pythagoreanRightAngleCalculator/ui.ts

@@ -0,0 +1,71 @@
+export interface PythagoreanRightAngleCalculatorUI extends Record<string, string> {
+  titleMain: string;
+  labelInputData: string;
+  labelUnitSelection: string;
+  btnUnitInches: string;
+  btnUnitFeet: string;
+  btnUnitCentimeters: string;
+  labelSideA: string;
+  labelSideB: string;
+  labelMeasuredDiagonal: string;
+  labelResults: string;
+  labelIdealDiagonal: string;
+  labelDeviation: string;
+  labelStatus: string;
+  labelVerification: string;
+  btnClear: string;
+  btnCopyResults: string;
+  labelPresets: string;
+  unitInches: string;
+  unitFeet: string;
+  unitCentimeters: string;
+  tooltipOptional: string;
+  tooltipPresets: string;
+  statusPerfect: string;
+  statusAcceptable: string;
+  statusWarning: string;
+  statusError: string;
+  statusReady: string;
+  msgIdealCalculated: string;
+  actionOpen: string;
+  actionClose: string;
+  descLarger: string;
+  descSmaller: string;
+  descCorrection: string;
+}
+
+export const pythagoreanRightAngleCalculatorUI: PythagoreanRightAngleCalculatorUI = {
+  titleMain: 'Pythagorean Right Angle Calculator',
+  labelInputData: 'Measurements',
+  labelUnitSelection: 'Unit',
+  btnUnitInches: 'inches',
+  btnUnitFeet: 'feet',
+  btnUnitCentimeters: 'centimeters',
+  labelSideA: 'Side A',
+  labelSideB: 'Side B',
+  labelMeasuredDiagonal: 'Measured diagonal (optional)',
+  labelResults: 'Results',
+  labelIdealDiagonal: 'Ideal diagonal',
+  labelDeviation: 'Deviation',
+  labelStatus: 'Status',
+  labelVerification: 'Square verification',
+  btnClear: 'Clear',
+  btnCopyResults: 'Copy results',
+  labelPresets: 'Quick presets',
+  unitInches: 'in',
+  unitFeet: 'ft',
+  unitCentimeters: 'cm',
+  tooltipOptional: 'Enter your measured diagonal to verify perfect 90 degrees',
+  tooltipPresets: '3-4-5 rule in different scales',
+  statusPerfect: 'Perfect 90 degree angle',
+  statusAcceptable: 'Acceptable deviation',
+  statusWarning: 'Minor deviation',
+  statusError: 'Out of square',
+  statusReady: 'Ready',
+  msgIdealCalculated: 'Diagonal ideal calculated',
+  actionOpen: 'Open',
+  actionClose: 'Close',
+  descLarger: 'larger',
+  descSmaller: 'smaller',
+  descCorrection: 'Correction needed'
+};

package/src/tools.ts

@@ -14,6 +14,7 @@ import { DRILL_CALCULATOR_TOOL } from './tool/drillCalculator/index';
 import { STAIR_CALCULATOR_TOOL } from './tool/stairCalculator/index';
 import { DRILL_SHARPENER_TOOL } from './tool/drillSharpener/index';
 import { WORKSHOP_FRACTION_CONVERTER_TOOL } from './tool/workshopFractionConverter/index';
+import { PYTHAGOREAN_RIGHT_ANGLE_CALCULATOR_TOOL } from './tool/pythagoreanRightAngleCalculator/index';
 
-export const ALL_TOOLS: ToolDefinition[] = [CLAY_CALCULATOR_TOOL, EPOXY_CALCULATOR_TOOL, BALUSTER_CALCULATOR_TOOL, MORTAR_CALCULATOR_TOOL, PASSEPARTOUT_CALCULATOR_TOOL, CONCRETE_CALCULATOR_TOOL, CUT_OPTIMIZER_TOOL, VOLTAGE_DROP_CALCULATOR_TOOL, FURNITURE_FIT_TOOL, THERMAL_EXPANSION_CALCULATOR_TOOL, DRILL_CALCULATOR_TOOL, STAIR_CALCULATOR_TOOL, DRILL_SHARPENER_TOOL, WORKSHOP_FRACTION_CONVERTER_TOOL];
+export const ALL_TOOLS: ToolDefinition[] = [CLAY_CALCULATOR_TOOL, EPOXY_CALCULATOR_TOOL, BALUSTER_CALCULATOR_TOOL, MORTAR_CALCULATOR_TOOL, PASSEPARTOUT_CALCULATOR_TOOL, CONCRETE_CALCULATOR_TOOL, CUT_OPTIMIZER_TOOL, VOLTAGE_DROP_CALCULATOR_TOOL, FURNITURE_FIT_TOOL, THERMAL_EXPANSION_CALCULATOR_TOOL, DRILL_CALCULATOR_TOOL, STAIR_CALCULATOR_TOOL, DRILL_SHARPENER_TOOL, WORKSHOP_FRACTION_CONVERTER_TOOL, PYTHAGOREAN_RIGHT_ANGLE_CALCULATOR_TOOL];