@jjlmoya/utils-science 1.39.0 → 1.41.0

package/src/tool/crystal-lattice-structure-finder/crystal-lattice-structure-finder.css

@@ -0,0 +1,387 @@
+.lattice-lab {
+  --lattice-text: #13282c;
+  --lattice-muted: #4a6970;
+  --lattice-panel: rgba(255, 255, 255, 0.74);
+  --lattice-panel-strong: rgba(255, 255, 255, 0.88);
+  --lattice-border: rgba(19, 40, 44, 0.14);
+  --lattice-line: rgba(35, 93, 91, 0.5);
+  --lattice-stage:
+    linear-gradient(180deg, rgba(246, 252, 248, 0.82), rgba(229, 242, 238, 0.92)),
+    repeating-linear-gradient(90deg, rgba(35, 93, 91, 0.07) 0 1px, transparent 1px 42px),
+    repeating-linear-gradient(0deg, rgba(35, 93, 91, 0.06) 0 1px, transparent 1px 42px);
+  --lattice-bg:
+    linear-gradient(135deg, rgba(239, 249, 244, 0.96), rgba(222, 241, 235, 0.94) 48%, rgba(250, 237, 204, 0.9)),
+    radial-gradient(circle at 20% 20%, rgba(246, 180, 75, 0.22), transparent 32%);
+  --lattice-chip-bg: rgba(255, 255, 255, 0.62);
+  --lattice-button-bg: #187c78;
+  --lattice-button-text: #fff;
+  --lattice-structure-label: #187c78;
+  --lattice-main-value: #9f4f23;
+  --lattice-reset-bg: rgba(19, 40, 44, 0.04);
+
+  display: grid;
+  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
+  gap: 1rem;
+  width: 100%;
+  padding: 1rem;
+  border: 1px solid var(--lattice-border);
+  border-radius: 8px;
+  background: var(--lattice-bg);
+  color: var(--lattice-text);
+}
+
+.theme-dark .lattice-lab,
+body.theme-dark .lattice-lab,
+html.theme-dark .lattice-lab {
+  --lattice-text: #f7fbf4;
+  --lattice-muted: #b8d8d1;
+  --lattice-panel: rgba(255, 255, 255, 0.08);
+  --lattice-panel-strong: rgba(6, 13, 17, 0.72);
+  --lattice-border: rgba(255, 255, 255, 0.14);
+  --lattice-line: rgba(214, 248, 233, 0.58);
+  --lattice-stage:
+    linear-gradient(180deg, rgba(7, 15, 19, 0.68), rgba(13, 30, 34, 0.82)),
+    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 42px),
+    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 42px);
+  --lattice-bg:
+    linear-gradient(135deg, rgba(13, 25, 31, 0.95), rgba(23, 45, 49, 0.92) 48%, rgba(58, 48, 36, 0.92)),
+    radial-gradient(circle at 20% 20%, rgba(246, 180, 75, 0.16), transparent 32%);
+  --lattice-chip-bg: rgba(255, 255, 255, 0.08);
+  --lattice-button-bg: #54d6b0;
+  --lattice-button-text: #071314;
+  --lattice-structure-label: #91d8c8;
+  --lattice-main-value: #f6d37a;
+  --lattice-reset-bg: rgba(255, 255, 255, 0.04);
+}
+
+.lattice-viewer {
+  display: grid;
+  gap: 0.8rem;
+  min-width: 0;
+}
+
+.lattice-orbit {
+  position: relative;
+  min-height: 420px;
+  overflow: hidden;
+  border: 1px solid var(--lattice-border);
+  border-radius: 8px;
+  background: var(--lattice-stage);
+}
+
+.lattice-svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  min-height: 420px;
+}
+
+.lattice-edge {
+  stroke: var(--lattice-line);
+  stroke-width: 3;
+  stroke-linecap: round;
+}
+
+.lattice-atom {
+  stroke: rgba(255, 255, 255, 0.54);
+  stroke-width: 1.5;
+  filter: drop-shadow(0 14px 16px rgba(0, 0, 0, 0.32));
+}
+
+.lattice-atom-corner {
+  fill: url("#lattice-atom-corner");
+}
+
+.lattice-atom-face {
+  fill: url("#lattice-atom-face");
+}
+
+.lattice-atom-interior {
+  fill: url("#lattice-atom-interior");
+}
+
+.lattice-summary {
+  display: grid;
+  gap: 0.35rem;
+  padding-bottom: 0.55rem;
+  border-bottom: 1px solid var(--lattice-border);
+}
+
+.lattice-summary div {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.lattice-summary span {
+  color: var(--lattice-structure-label);
+  font-size: 0.88rem;
+  font-weight: 800;
+  letter-spacing: 0;
+}
+
+.lattice-summary strong {
+  color: var(--lattice-main-value);
+  font-size: clamp(1.35rem, 5vw, 2rem);
+  line-height: 1;
+}
+
+.lattice-summary p {
+  margin: 0;
+  color: var(--lattice-muted);
+  font-size: 0.82rem;
+  font-weight: 800;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+.lattice-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.55rem;
+}
+
+.lattice-legend span {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  min-height: 2.25rem;
+  padding: 0.42rem 0.65rem;
+  border: 1px solid var(--lattice-border);
+  border-radius: 999px;
+  background: var(--lattice-chip-bg);
+  font-size: 0.88rem;
+}
+
+.lattice-swatch {
+  width: 0.75rem;
+  height: 0.75rem;
+  border-radius: 50%;
+}
+
+.lattice-swatch-corner {
+  background: #f6b44b;
+}
+
+.lattice-swatch-face {
+  background: #54d6b0;
+}
+
+.lattice-swatch-interior {
+  background: #8f82ff;
+}
+
+.lattice-console,
+.lattice-results {
+  display: grid;
+  align-content: start;
+  gap: 0.8rem;
+}
+
+.lattice-console {
+  min-width: 0;
+}
+
+.lattice-field,
+.lattice-number {
+  display: grid;
+  gap: 0.4rem;
+  min-width: 0;
+}
+
+.lattice-number {
+  position: relative;
+}
+
+.lattice-number > span {
+  position: absolute;
+  top: 0.55rem;
+  left: 0.68rem;
+  z-index: 1;
+  font-size: 0.62rem;
+  pointer-events: none;
+}
+
+.lattice-field > span,
+.lattice-number > span,
+.lattice-metric-row span,
+.lattice-result-group h2 {
+  color: var(--lattice-muted);
+  font-size: 0.78rem;
+  font-weight: 800;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+.lattice-field select,
+.lattice-number input {
+  width: 100%;
+  min-height: 2.65rem;
+  border: 1px solid var(--lattice-border);
+  border-radius: 8px;
+  background: var(--lattice-panel-strong);
+  color: var(--lattice-text);
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+.lattice-field select {
+  appearance: none;
+  padding: 0 2.45rem 0 0.7rem;
+  background-image:
+    linear-gradient(45deg, transparent 50%, currentcolor 50%),
+    linear-gradient(135deg, currentcolor 50%, transparent 50%);
+  background-position:
+    calc(100% - 1.15rem) 50%,
+    calc(100% - 0.82rem) 50%;
+  background-repeat: no-repeat;
+  background-size:
+    0.38rem 0.38rem,
+    0.38rem 0.38rem;
+}
+
+.lattice-number input {
+  min-height: 4rem;
+  padding: 1.45rem 0.65rem 0.45rem;
+  font-size: 1.12rem;
+  font-variant-numeric: tabular-nums;
+}
+
+.lattice-field option {
+  color: #102025;
+}
+
+.lattice-note {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0.7rem;
+  align-items: center;
+  padding: 0.75rem;
+  border: 1px solid var(--lattice-border);
+  border-radius: 8px;
+  background: var(--lattice-panel);
+}
+
+.lattice-note span {
+  display: grid;
+  place-items: center;
+  min-width: 3.2rem;
+  min-height: 3.2rem;
+  border-radius: 50%;
+  background: #f6b44b;
+  color: #1b1408;
+  font-weight: 900;
+}
+
+.lattice-note p {
+  margin: 0;
+  color: var(--lattice-text);
+  font-size: 0.95rem;
+  line-height: 1.35;
+}
+
+.lattice-slider-grid,
+.lattice-input-grid {
+  display: grid;
+  gap: 0.7rem;
+}
+
+.lattice-input-grid {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.lattice-field output {
+  justify-self: end;
+  margin-top: -1.55rem;
+  color: var(--lattice-text);
+  font-weight: 800;
+}
+
+.lattice-field input[type="range"] {
+  width: 100%;
+  accent-color: #54d6b0;
+}
+
+.lattice-reset {
+  min-height: 2.8rem;
+  border: 1px solid var(--lattice-border);
+  border-radius: 8px;
+  background: var(--lattice-reset-bg);
+  color: var(--lattice-muted);
+  font-size: inherit;
+  font-weight: inherit;
+  cursor: pointer;
+  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
+}
+
+.lattice-reset-active,
+.lattice-reset:hover {
+  border-color: color-mix(in srgb, var(--lattice-button-bg) 45%, var(--lattice-border));
+  background: color-mix(in srgb, var(--lattice-button-bg) 12%, transparent);
+  color: var(--lattice-text);
+}
+
+.lattice-results {
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: clamp(1.5rem, 5vw, 4rem);
+  padding: 0.35rem 0.25rem 0;
+}
+
+.lattice-result-group {
+  display: grid;
+  gap: 0.7rem;
+  min-width: 0;
+}
+
+.lattice-result-group h2 {
+  margin: 0 0 0.25rem;
+}
+
+.lattice-metric-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 1rem;
+  align-items: baseline;
+}
+
+.lattice-metric-row strong {
+  overflow-wrap: anywhere;
+  color: var(--lattice-text);
+  font-size: 1.05rem;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.15;
+  text-align: right;
+}
+
+@media (max-width: 900px) {
+  .lattice-lab {
+    grid-template-columns: 1fr;
+  }
+
+  .lattice-results {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 560px) {
+  .lattice-lab {
+    padding: 0.75rem;
+  }
+
+  .lattice-orbit,
+  .lattice-svg {
+    min-height: 330px;
+  }
+
+  .lattice-input-grid,
+  .lattice-results {
+    grid-template-columns: 1fr;
+  }
+
+  .lattice-note {
+    grid-template-columns: 1fr;
+  }
+}

package/src/tool/crystal-lattice-structure-finder/data.ts

@@ -0,0 +1,220 @@
+export type LatticeId = 'simple-cubic' | 'face-centered-cubic' | 'hexagonal-close-packed';
+
+export interface AtomSite {
+  id: string;
+  x: number;
+  y: number;
+  z: number;
+  role: 'corner' | 'face' | 'interior';
+}
+
+export interface LatticeStructure {
+  id: LatticeId;
+  shortName: string;
+  coordinationNumber: number;
+  atomsPerCell: number;
+  packingFactor: number;
+  radiusToA: number;
+  cToA?: number;
+  sites: AtomSite[];
+  edges: [number, number][];
+  vertices: [number, number, number][];
+}
+
+export interface MaterialPreset {
+  id: string;
+  formula: string;
+  latticeId: LatticeId;
+  atomicMass: number;
+  latticeA: number;
+  cToA?: number;
+  atomsPerFormulaUnit?: number;
+}
+
+export interface DensityResult {
+  density: number;
+  cellVolumeCm3: number;
+  cellMassG: number;
+  atomsPerCell: number;
+  packingFactor: number;
+}
+
+const cubeVertices: [number, number, number][] = [
+  [0, 0, 0],
+  [1, 0, 0],
+  [1, 1, 0],
+  [0, 1, 0],
+  [0, 0, 1],
+  [1, 0, 1],
+  [1, 1, 1],
+  [0, 1, 1],
+];
+
+const cubeEdges: [number, number][] = [
+  [0, 1],
+  [1, 2],
+  [2, 3],
+  [3, 0],
+  [4, 5],
+  [5, 6],
+  [6, 7],
+  [7, 4],
+  [0, 4],
+  [1, 5],
+  [2, 6],
+  [3, 7],
+];
+
+const hexVertices: [number, number, number][] = [
+  [1, 0, 0],
+  [0.5, 0.866, 0],
+  [-0.5, 0.866, 0],
+  [-1, 0, 0],
+  [-0.5, -0.866, 0],
+  [0.5, -0.866, 0],
+  [1, 0, 1],
+  [0.5, 0.866, 1],
+  [-0.5, 0.866, 1],
+  [-1, 0, 1],
+  [-0.5, -0.866, 1],
+  [0.5, -0.866, 1],
+];
+
+const hexEdges: [number, number][] = [
+  [0, 1],
+  [1, 2],
+  [2, 3],
+  [3, 4],
+  [4, 5],
+  [5, 0],
+  [6, 7],
+  [7, 8],
+  [8, 9],
+  [9, 10],
+  [10, 11],
+  [11, 6],
+  [0, 6],
+  [1, 7],
+  [2, 8],
+  [3, 9],
+  [4, 10],
+  [5, 11],
+];
+
+export const LATTICE_STRUCTURES: LatticeStructure[] = [
+  {
+    id: 'simple-cubic',
+    shortName: 'SC',
+    coordinationNumber: 6,
+    atomsPerCell: 1,
+    packingFactor: Math.PI / 6,
+    radiusToA: 0.5,
+    vertices: cubeVertices,
+    edges: cubeEdges,
+    sites: cubeVertices.map(([x, y, z], index) => ({
+      id: `sc-corner-${index}`,
+      x,
+      y,
+      z,
+      role: 'corner' as const,
+    })),
+  },
+  {
+    id: 'face-centered-cubic',
+    shortName: 'FCC',
+    coordinationNumber: 12,
+    atomsPerCell: 4,
+    packingFactor: Math.PI / (3 * Math.sqrt(2)),
+    radiusToA: Math.sqrt(2) / 4,
+    vertices: cubeVertices,
+    edges: cubeEdges,
+    sites: [
+      ...cubeVertices.map(([x, y, z], index) => ({
+        id: `fcc-corner-${index}`,
+        x,
+        y,
+        z,
+        role: 'corner' as const,
+      })),
+      { id: 'fcc-face-bottom', x: 0.5, y: 0.5, z: 0, role: 'face' as const },
+      { id: 'fcc-face-top', x: 0.5, y: 0.5, z: 1, role: 'face' as const },
+      { id: 'fcc-face-front', x: 0.5, y: 0, z: 0.5, role: 'face' as const },
+      { id: 'fcc-face-back', x: 0.5, y: 1, z: 0.5, role: 'face' as const },
+      { id: 'fcc-face-left', x: 0, y: 0.5, z: 0.5, role: 'face' as const },
+      { id: 'fcc-face-right', x: 1, y: 0.5, z: 0.5, role: 'face' as const },
+    ],
+  },
+  {
+    id: 'hexagonal-close-packed',
+    shortName: 'HCP',
+    coordinationNumber: 12,
+    atomsPerCell: 6,
+    packingFactor: 0.74048,
+    radiusToA: 0.5,
+    cToA: 1.633,
+    vertices: hexVertices,
+    edges: hexEdges,
+    sites: [
+      ...hexVertices.map(([x, y, z], index) => ({
+        id: `hcp-boundary-${index}`,
+        x: (x + 1) / 2,
+        y: (y + 0.866) / 1.732,
+        z,
+        role: 'corner' as const,
+      })),
+      { id: 'hcp-center-bottom', x: 0.5, y: 0.5, z: 0, role: 'face' as const },
+      { id: 'hcp-center-top', x: 0.5, y: 0.5, z: 1, role: 'face' as const },
+      { id: 'hcp-interior-a', x: 0.33, y: 0.42, z: 0.5, role: 'interior' as const },
+      { id: 'hcp-interior-b', x: 0.67, y: 0.58, z: 0.5, role: 'interior' as const },
+      { id: 'hcp-interior-c', x: 0.5, y: 0.28, z: 0.5, role: 'interior' as const },
+    ],
+  },
+];
+
+export const MATERIAL_PRESETS: MaterialPreset[] = [
+  {
+    id: 'copper',
+    formula: 'Cu',
+    latticeId: 'face-centered-cubic',
+    atomicMass: 63.546,
+    latticeA: 3.615,
+  },
+  {
+    id: 'aluminum',
+    formula: 'Al',
+    latticeId: 'face-centered-cubic',
+    atomicMass: 26.9815,
+    latticeA: 4.0495,
+  },
+  {
+    id: 'polonium',
+    formula: 'Po',
+    latticeId: 'simple-cubic',
+    atomicMass: 208.9824,
+    latticeA: 3.359,
+  },
+  {
+    id: 'magnesium',
+    formula: 'Mg',
+    latticeId: 'hexagonal-close-packed',
+    atomicMass: 24.305,
+    latticeA: 3.209,
+    cToA: 1.624,
+  },
+  {
+    id: 'titanium',
+    formula: 'Ti',
+    latticeId: 'hexagonal-close-packed',
+    atomicMass: 47.867,
+    latticeA: 2.951,
+    cToA: 1.587,
+  },
+  {
+    id: 'halite',
+    formula: 'NaCl',
+    latticeId: 'face-centered-cubic',
+    atomicMass: 58.4428,
+    latticeA: 5.640,
+    atomsPerFormulaUnit: 4,
+  },
+];

package/src/tool/crystal-lattice-structure-finder/entry.ts

@@ -0,0 +1,26 @@
+import type { ScienceToolEntry } from '../../types';
+
+export const crystalLatticeStructureFinder: ScienceToolEntry = {
+  id: 'crystal-lattice-structure-finder',
+  icons: {
+    bg: 'mdi:cube-outline',
+    fg: 'mdi:molecule',
+  },
+  i18n: {
+    de: () => import('./i18n/de').then((m) => m.content),
+    en: () => import('./i18n/en').then((m) => m.content),
+    es: () => import('./i18n/es').then((m) => m.content),
+    fr: () => import('./i18n/fr').then((m) => m.content),
+    id: () => import('./i18n/id').then((m) => m.content),
+    it: () => import('./i18n/it').then((m) => m.content),
+    ja: () => import('./i18n/ja').then((m) => m.content),
+    ko: () => import('./i18n/ko').then((m) => m.content),
+    nl: () => import('./i18n/nl').then((m) => m.content),
+    pl: () => import('./i18n/pl').then((m) => m.content),
+    pt: () => import('./i18n/pt').then((m) => m.content),
+    ru: () => import('./i18n/ru').then((m) => m.content),
+    sv: () => import('./i18n/sv').then((m) => m.content),
+    tr: () => import('./i18n/tr').then((m) => m.content),
+    zh: () => import('./i18n/zh').then((m) => m.content),
+  },
+};