diff --git a/frontend/css/lab.css b/frontend/css/lab.css new file mode 100644 index 0000000..c1b5ad9 --- /dev/null +++ b/frontend/css/lab.css @@ -0,0 +1,855 @@ + /* ── page fill so sim canvas can go full-height ── */ + .app-layout { height: 100vh; overflow: hidden; } + .sb-content { height: 100vh; display: flex; flex-direction: column; overflow: hidden; } + + /* ════════════════════════════════ + HOME VIEW + ════════════════════════════════ */ + #lab-home { flex: 1; overflow-y: auto; padding: 36px 28px 80px; } + + .lab-hero { + display: flex; align-items: center; gap: 20px; + margin-bottom: 36px; + } + .lab-hero-icon { + width: 64px; height: 64px; border-radius: 20px; flex-shrink: 0; + background: linear-gradient(135deg, rgba(155,93,229,.35), rgba(6,214,224,.25)); + border: 1.5px solid rgba(255,255,255,.12); + display: flex; align-items: center; justify-content: center; + } + .lab-hero-icon svg { width: 30px; height: 30px; stroke: var(--violet); stroke-width: 1.5; } + .lab-hero-title { + font-family: 'Unbounded', sans-serif; font-size: 1.55rem; font-weight: 800; + letter-spacing: -0.02em; margin-bottom: 5px; + } + .lab-hero-sub { font-size: 0.9rem; color: var(--text-2); font-weight: 500; } + + /* category filter */ + .lab-filters { + display: flex; gap: 6px; margin-bottom: 28px; flex-wrap: wrap; + } + .lab-filter { + padding: 6px 18px; border-radius: 99px; + border: 1.5px solid var(--border-h); + background: var(--surface); color: var(--text-2); + font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 700; + cursor: pointer; transition: all .16s; + } + .lab-filter:hover { border-color: rgba(155,93,229,.4); color: var(--violet); } + .lab-filter.active { background: var(--text); color: #fff; border-color: var(--text); } + + /* sim grid */ + .sim-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); + gap: 20px; + } + + .sim-card { + background: var(--surface); + border: 1.5px solid var(--border); + border-radius: 20px; + overflow: hidden; + cursor: pointer; + transition: border-color .18s, box-shadow .18s, transform .18s; + position: relative; + } + .sim-card:hover { + border-color: var(--violet); + box-shadow: 0 8px 32px rgba(155,93,229,.18); + transform: translateY(-2px); + } + .sim-card.soon { cursor: default; opacity: .65; } + .sim-card.soon:hover { transform: none; box-shadow: none; border-color: var(--border); } + + .sim-preview { + width: 100%; height: 140px; display: block; + background: #0D0D1A; + } + + .sim-body { padding: 18px 20px 20px; } + .sim-cat { + display: inline-flex; align-items: center; gap: 5px; + font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; + padding: 3px 10px; border-radius: 99px; margin-bottom: 10px; + } + .sim-cat.math { background: rgba(155,93,229,.12); color: var(--violet); } + .sim-cat.phys { background: rgba(6,214,224,.1); color: var(--cyan); } + + .sim-title { + font-family: 'Unbounded', sans-serif; font-size: 0.9rem; font-weight: 800; + margin-bottom: 6px; letter-spacing: -.01em; + } + .sim-desc { font-size: 0.82rem; color: var(--text-2); line-height: 1.55; } + + .sim-soon-badge { + position: absolute; top: 12px; right: 12px; + background: rgba(15,23,42,.7); color: rgba(255,255,255,.55); + font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; + padding: 3px 9px; border-radius: 99px; backdrop-filter: blur(6px); + border: 1px solid rgba(255,255,255,.1); + } + + /* ════════════════════════════════ + SIM VIEW (graph) + ════════════════════════════════ */ + #lab-sim { + display: none; + flex: 1; min-height: 0; + flex-direction: column; + } + #lab-sim.open { display: flex; } + + /* top bar */ + .sim-topbar { + flex-shrink: 0; + display: flex; align-items: center; gap: 12px; + padding: 10px 18px; + background: var(--surface); + border-bottom: 1.5px solid var(--border); + } + .sim-back { + display: flex; align-items: center; gap: 6px; + padding: 6px 14px; border-radius: 99px; + border: 1.5px solid var(--border-h); + background: transparent; color: var(--text-2); + font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 700; + cursor: pointer; transition: all .15s; + } + .sim-back:hover { border-color: var(--violet); color: var(--violet); } + .sim-back svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2.2; flex-shrink: 0; } + + .sim-topbar-title { + font-family: 'Unbounded', sans-serif; font-size: 0.88rem; font-weight: 800; + flex: 1; + } + + .sim-zoom-btns { display: flex; gap: 4px; } + .zoom-btn { + min-width: 32px; width: auto; height: 32px; border-radius: 10px; + border: 1.5px solid var(--border-h); + background: transparent; color: var(--text-2); + cursor: pointer; font-size: .8rem; font-weight: 700; + padding: 0 9px; white-space: nowrap; + display: flex; align-items: center; justify-content: center; gap: 4px; + transition: all .15s; + } + .zoom-btn:hover { border-color: var(--violet); color: var(--violet); background: rgba(155,93,229,.07); } + .zoom-btn svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2.2; } + + /* sim body */ + .sim-body-wrap { + flex: 1; min-height: 0; + display: flex; + } + + /* left panel */ + .graph-panel { + width: 280px; flex-shrink: 0; + background: var(--surface); + border-right: 1.5px solid var(--border); + display: flex; flex-direction: column; + overflow-y: auto; + padding: 16px 14px; + gap: 6px; + } + + .gp-section-title { + font-family: 'Unbounded', sans-serif; font-size: 0.62rem; font-weight: 800; + color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; + display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; + } + .gp-section-title::after { content: ''; flex: 1; height: 1px; background: var(--border); } + + /* function rows */ + .fn-row { + display: flex; align-items: center; gap: 8px; + padding: 8px 10px; border-radius: 12px; + border: 1.5px solid var(--border); + background: rgba(15,23,42,.03); + transition: border-color .15s; + } + .fn-label { + font-family: 'Manrope', monospace; font-size: 0.85rem; font-weight: 700; + color: var(--fn-color, var(--violet)); flex-shrink: 0; letter-spacing: .01em; + } + .fn-row:focus-within { border-color: var(--fn-color, var(--violet)); } + + .fn-dot { + width: 12px; height: 12px; border-radius: 50%; + flex-shrink: 0; + background: var(--fn-color, var(--violet)); + box-shadow: 0 0 6px var(--fn-color, var(--violet)); + } + .fn-input { + flex: 1; border: none; outline: none; background: transparent; + font-family: 'Manrope', monospace; font-size: 0.88rem; font-weight: 600; + color: var(--text); padding: 0; min-width: 0; + } + .fn-input::placeholder { color: var(--text-3); font-weight: 500; } + + /* KaTeX live preview */ + .fn-preview { + min-height: 20px; padding: 3px 4px 3px 36px; + font-size: 0.82rem; line-height: 1.5; + color: rgba(255,255,255,.65); + overflow: hidden; display: none; + } + .fn-preview.has-content { display: block; } + .fn-preview .katex { color: rgba(255,255,255,.8); font-size: 1em; } + .fn-err { + font-size: 0.68rem; color: var(--pink); font-weight: 600; + padding: 2px 0 0 22px; display: none; + } + .fn-err.show { display: block; } + + /* presets */ + .presets-wrap { display: flex; flex-wrap: wrap; gap: 5px; } + .preset-btn { + padding: 4px 11px; border-radius: 8px; + border: 1.5px solid var(--border-h); + background: transparent; color: var(--text-2); + font-family: 'Manrope', monospace; font-size: 0.75rem; font-weight: 700; + cursor: pointer; transition: all .14s; + } + .preset-btn:hover { + border-color: var(--violet); color: var(--violet); + background: rgba(155,93,229,.07); + } + + /* info / actions */ + .gp-btn { + display: flex; align-items: center; justify-content: center; gap: 7px; + padding: 9px 14px; border-radius: 12px; + border: 1.5px solid var(--border-h); + background: transparent; color: var(--text-2); + font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 700; + cursor: pointer; transition: all .15s; width: 100%; + } + .gp-btn:hover { border-color: var(--violet); color: var(--violet); background: rgba(155,93,229,.06); } + .gp-btn svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; flex-shrink: 0; } + + /* stereo param sliders */ + .stereo-sl-row { margin-bottom: 6px; } + .stereo-sl-row label { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--text-2); margin-bottom: 2px; } + .stereo-sl-row label span { color: var(--violet); font-weight: 700; } + .stereo-sl-row input[type=range] { width: 100%; accent-color: var(--violet); } + .stereo-fig-btn.active, .stereo-toggle.active, .stereo-sect-btn.active, .stereo-sect-type.active { + border-color: var(--violet) !important; color: var(--violet) !important; background: rgba(155,93,229,.1) !important; + } + + /* stereo panel redesign */ + .stereo-panel { + width: 230px; flex-shrink: 0; + background: var(--surface); + border-right: 1.5px solid var(--border); + display: flex; flex-direction: column; + overflow-y: auto; padding: 10px 10px; + } + .stereo-fig-grid { + display: grid; grid-template-columns: 1fr 1fr; gap: 3px; + margin-bottom: 4px; + } + .st-fig-btn { + display: flex; align-items: center; gap: 5px; + padding: 6px 8px; border-radius: 9px; + border: 1.5px solid var(--border); + background: transparent; color: var(--text-2); + font-family: 'Manrope', sans-serif; font-size: 0.68rem; font-weight: 700; + cursor: pointer; transition: all .13s; white-space: nowrap; overflow: hidden; + } + .st-fig-btn svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 2; flex-shrink: 0; fill: none; } + .st-fig-btn:hover { border-color: rgba(155,93,229,.4); color: var(--violet); background: rgba(155,93,229,.06); } + .st-fig-btn.active { border-color: var(--violet); color: var(--violet); background: rgba(155,93,229,.12); } + .st-fig-btn-wide { grid-column: span 2; } + + .st-tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin-bottom: 4px; } + .st-tool-btn { + display: flex; align-items: center; gap: 5px; + padding: 6px 8px; border-radius: 9px; + border: 1.5px solid var(--border); + background: transparent; color: var(--text-2); + font-family: 'Manrope', sans-serif; font-size: 0.68rem; font-weight: 700; + cursor: pointer; transition: all .13s; white-space: nowrap; overflow: hidden; + } + .st-tool-btn svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2; flex-shrink: 0; fill: none; } + .st-tool-btn:hover { border-color: rgba(155,93,229,.4); color: var(--violet); background: rgba(155,93,229,.06); } + .st-tool-btn.active { border-color: var(--violet); color: var(--violet); background: rgba(155,93,229,.12); } + .st-tool-btn-wide { grid-column: span 2; } + + .st-action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin-bottom: 2px; } + .st-action-btn { + padding: 5px 6px; border-radius: 8px; + border: 1px solid var(--border); + background: transparent; color: var(--text-2); + font-family: 'Manrope', sans-serif; font-size: 0.65rem; font-weight: 600; + cursor: pointer; transition: all .13s; text-align: center; + } + .st-action-btn:hover { border-color: rgba(239,71,111,.4); color: #ef476f; background: rgba(239,71,111,.06); } + + .st-toggle-row { + display: flex; align-items: center; justify-content: space-between; + padding: 4px 2px; cursor: pointer; transition: background .13s; border-radius: 7px; + } + .st-toggle-row:hover { background: rgba(255,255,255,.03); } + .st-toggle-label { + font-size: 0.7rem; font-weight: 600; color: var(--text-2); + display: flex; align-items: center; gap: 5px; + } + .st-toggle-label svg { width: 11px; height: 11px; stroke: currentColor; stroke-width: 2; opacity: .6; fill: none; } + .st-toggle { + width: 26px; height: 14px; border-radius: 7px; + background: rgba(255,255,255,.1); border: 1.5px solid var(--border-h); + position: relative; transition: background .15s; flex-shrink: 0; cursor: pointer; + } + .st-toggle::after { + content: ''; position: absolute; left: 2px; top: 50%; + transform: translateY(-50%); + width: 8px; height: 8px; border-radius: 50%; + background: rgba(255,255,255,.4); transition: all .15s; + } + .st-toggle.on { background: var(--violet); border-color: var(--violet); } + .st-toggle.on::after { left: calc(100% - 10px); background: #fff; } + + .st-n-ctrl { + display: flex; align-items: center; gap: 5px; + border: 1.5px solid var(--border); border-radius: 9px; + padding: 4px 6px; + } + .st-n-btn { + width: 20px; height: 20px; border-radius: 5px; + border: 1px solid var(--border-h); + background: transparent; color: var(--text-2); + cursor: pointer; display: flex; align-items: center; justify-content: center; + transition: background .12s; + } + .st-n-btn svg { width: 11px; height: 11px; stroke: currentColor; } + .st-n-btn:hover { background: rgba(155,93,229,.1); } + .st-n-val { font-size: 0.75rem; font-weight: 700; color: var(--text); min-width: 14px; text-align: center; } + .st-n-label { font-size: 0.68rem; color: var(--text-3); flex: 1; } + #stereo-unfold-btn.active, #stereo-measure-btn.active, + #stereo-point-btn.active, #stereo-connect-btn.active, + #stereo-mark-tick-btn.active, #stereo-mark-par-btn.active, + #stereo-derive-mid-btn.active, #stereo-derive-fc-btn.active, #stereo-derive-alt-btn.active, #stereo-derive-cen-btn.active, + #stereo-angle-edge-btn.active, #stereo-angle-lp-btn.active, #stereo-angle-dih-btn.active, #stereo-angle-pp-btn.active, #stereo-angle-skew-btn.active { + border-color: var(--violet) !important; color: var(--violet) !important; background: rgba(155,93,229,.12) !important; + } + + .gp-preset-group { margin-bottom: 8px; } + .gp-preset-label { + font-size: 0.68rem; font-weight: 700; text-transform: uppercase; + letter-spacing: .06em; color: var(--text-3); + margin: 6px 0 4px; + } + + /* canvas area */ + .graph-canvas-outer { + flex: 1; min-width: 0; min-height: 0; + display: flex; flex-direction: column; + } + .graph-canvas-wrap { + flex: 1; min-height: 0; position: relative; + } + #graph-canvas { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } + + /* info bar */ + .graph-info-bar { + flex-shrink: 0; + display: flex; align-items: center; gap: 20px; + padding: 8px 18px; + background: #0D0D1A; + border-top: 1px solid rgba(255,255,255,.07); + font-family: 'Manrope', monospace; font-size: 0.8rem; + color: rgba(255,255,255,.4); + min-height: 36px; + } + .info-coord { display: flex; align-items: center; gap: 6px; } + .info-coord .ic-label { color: rgba(255,255,255,.25); } + .info-coord .ic-val { color: rgba(255,255,255,.7); font-weight: 700; min-width: 52px; } + .info-fn-val { display: flex; align-items: center; gap: 6px; } + .info-fn-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } + .info-fn-val .ic-val { color: rgba(255,255,255,.7); font-weight: 700; min-width: 60px; } + .info-hint { margin-left: auto; font-size: 0.72rem; color: rgba(255,255,255,.2); } + + /* ════════════════════════════════ + PROJECTILE SIM + ════════════════════════════════ */ + .sim-proj-wrap { + flex: 1; min-height: 0; + display: flex; flex-direction: column; overflow: hidden; + } + + /* left panel (shared base with .graph-panel) */ + .proj-panel { + width: 260px; flex-shrink: 0; + background: var(--surface); + border-right: 1.5px solid var(--border); + display: flex; flex-direction: column; + overflow-y: auto; padding: 16px 14px; gap: 6px; + } + + /* canvas */ + .proj-canvas-outer { + flex: 1; min-width: 0; position: relative; + } + .proj-canvas-outer canvas { + display: block; position: absolute; top: 0; left: 0; + width: 100%; height: 100%; + } + + /* sliders */ + .param-block { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; } + .param-header { display: flex; justify-content: space-between; align-items: baseline; } + .param-name { font-size: 0.8rem; font-weight: 700; color: var(--text-2); } + .param-val { + font-family: 'Manrope', monospace; font-size: 0.82rem; font-weight: 800; + color: var(--violet); min-width: 70px; text-align: right; + } + .param-slider { + -webkit-appearance: none; appearance: none; + width: 100%; height: 4px; border-radius: 4px; + background: var(--border-h); outline: none; cursor: pointer; + } + .param-slider::-webkit-slider-thumb { + -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; + background: var(--violet); box-shadow: 0 0 6px rgba(155,93,229,.5); + cursor: pointer; + } + .param-slider::-moz-range-thumb { + width: 16px; height: 16px; border-radius: 50%; border: none; + background: var(--violet); cursor: pointer; + } + + /* preset chips for projectile */ + .proj-preset-chip { + padding: 5px 10px; border-radius: 8px; font-size: 0.75rem; font-weight: 700; + border: 1.5px solid var(--border-h); background: transparent; + color: var(--text-2); cursor: pointer; transition: all .15s; white-space: nowrap; + } + .proj-preset-chip:hover { border-color: var(--violet); color: var(--violet); background: rgba(155,93,229,.06); } + + /* stats bar */ + .proj-stats-bar { + flex-shrink: 0; display: flex; align-items: stretch; + background: #0D0D1A; border-top: 1px solid rgba(255,255,255,.07); + min-height: 48px; + } + .pstat { + flex: 1; display: flex; flex-direction: column; + align-items: center; justify-content: center; + gap: 2px; padding: 6px 8px; + border-right: 1px solid rgba(255,255,255,.06); + } + .pstat:last-child { border-right: none; } + .pstat-label { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.3); } + .pstat-val { font-family: 'Manrope', monospace; font-size: 0.9rem; font-weight: 800; color: rgba(255,255,255,.85); } + #csbar-v4, #csbar-v6 { font-size: 0.60rem; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } + + /* play button highlight */ + .zoom-btn.active { border-color: var(--violet); color: var(--violet); background: rgba(155,93,229,.12); } + + /* ── launch button ── */ + .proj-launch-btn { + width: 100%; padding: 14px 18px; + border-radius: 16px; border: none; + background: linear-gradient(135deg, #7c3aed 0%, #9B5DE5 45%, #F15BB5 100%); + color: #fff; + font-family: 'Unbounded', sans-serif; font-size: 0.8rem; font-weight: 800; + letter-spacing: .04em; text-transform: uppercase; + cursor: pointer; + display: flex; align-items: center; justify-content: center; gap: 10px; + box-shadow: 0 4px 24px rgba(155,93,229,.45), 0 0 0 0 rgba(155,93,229,.3); + transition: transform .15s, box-shadow .15s; + position: relative; overflow: hidden; + } + .proj-launch-btn::before { + content: ''; position: absolute; inset: 0; + background: linear-gradient(135deg, rgba(255,255,255,.15) 0%, transparent 60%); + pointer-events: none; + } + .proj-launch-btn:hover { + transform: translateY(-2px); + box-shadow: 0 8px 32px rgba(155,93,229,.6), 0 0 0 3px rgba(155,93,229,.15); + } + .proj-launch-btn:active { transform: translateY(0); } + .proj-launch-btn.paused { + background: linear-gradient(135deg, #0891b2 0%, #06D6E0 100%); + box-shadow: 0 4px 24px rgba(6,214,224,.35); + } + .proj-launch-btn.done { + background: linear-gradient(135deg, #15803d 0%, #22c55e 100%); + box-shadow: 0 4px 24px rgba(34,197,94,.35); + } + .proj-reset-btn { + width: 100%; padding: 8px; + border-radius: 10px; + border: 1.5px solid var(--border-h); + background: transparent; color: var(--text-3); + font-family: 'Manrope', sans-serif; font-size: 0.75rem; font-weight: 700; + cursor: pointer; transition: all .15s; + display: flex; align-items: center; justify-content: center; gap: 7px; + } + .proj-reset-btn:hover { border-color: var(--violet); color: var(--violet); } + + /* speed slider — cyan thumb */ + #sl-speed::-webkit-slider-thumb { + background: var(--cyan); + box-shadow: 0 0 6px rgba(6,214,224,.5); + } + #sl-speed::-moz-range-thumb { background: var(--cyan); } + + /* magnetic canvas */ + #mag-canvas { + display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; + cursor: crosshair; + } + + /* mode buttons */ + .mag-mode-btn { + flex: 1; padding: 8px 6px; border-radius: 10px; + border: 1.5px solid var(--border-h); + background: transparent; color: var(--text-2); + font-family: 'Manrope', sans-serif; font-size: 0.75rem; font-weight: 700; + cursor: pointer; transition: all .15s; + display: flex; align-items: center; justify-content: center; gap: 6px; + } + .mag-mode-btn:hover { border-color: var(--violet); color: var(--text); } + .mag-mode-btn.active { + background: rgba(155,93,229,.15); border-color: var(--violet); color: #fff; + } + + /* triangle canvas */ + #tri-canvas { + display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; + } + + /* molecular physics canvases */ + #gas-canvas, #brownian-canvas, #states-canvas, #diffusion-canvas, #reactions-canvas { + display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; + } + + /* chemistry sim-cat badge */ + .sim-cat.chem { background: rgba(52,211,153,.1); color: #34d399; } + /* biology sim-cat badge */ + .sim-cat.bio { background: rgba(34,211,153,.1); color: #22d399; } + /* phase dot navigator */ + .cd-phase-nav { display:flex; align-items:center; justify-content:center; gap:6px; padding:6px 0; flex-wrap:wrap; } + .cd-phase-dot { width:8px; height:8px; border-radius:50%; background:var(--border-h,rgba(255,255,255,.15)); cursor:pointer; transition:background .2s,transform .2s; flex-shrink:0; } + .cd-phase-dot.active { background:#22d399; transform:scale(1.5); } + + /* ── triangle panel components ── */ + .tri-layer-row { + display: flex; align-items: center; gap: 8px; + padding: 7px 10px; border-radius: 10px; + border: 1.5px solid var(--border); + background: rgba(15,23,42,.03); + cursor: pointer; user-select: none; + transition: border-color .15s, background .15s; + } + .tri-layer-row:hover { background: rgba(155,93,229,.05); border-color: rgba(155,93,229,.3); } + .tri-layer-row.active { background: rgba(155,93,229,.08); border-color: rgba(155,93,229,.4); } + + .tri-dot { + width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; + } + .tri-layer-name { + font-size: 0.78rem; font-weight: 700; color: var(--text); flex: 1; + } + .tri-layer-hint { + font-size: 0.68rem; font-weight: 700; opacity: 0.8; + } + .tri-toggle { + width: 28px; height: 16px; border-radius: 99px; + background: var(--border-h); flex-shrink: 0; + position: relative; transition: background .2s; + } + .tri-toggle::after { + content: ''; position: absolute; top: 2px; left: 2px; + width: 12px; height: 12px; border-radius: 50%; + background: #fff; transition: transform .2s; + } + .tri-layer-row.active .tri-toggle { background: var(--violet); } + .tri-layer-row.active .tri-toggle::after { transform: translateX(12px); } + + .tri-stats-grid { + display: grid; grid-template-columns: 26px 1fr; gap: 3px 8px; + padding: 0 4px; + } + .tri-stat-k { + font-family: 'Manrope', monospace; font-size: 0.78rem; font-weight: 800; + display: flex; align-items: center; + } + .tri-stat-v { + font-family: 'Manrope', monospace; font-size: 0.82rem; font-weight: 700; + color: var(--text); padding: 2px 6px; + border-radius: 6px; background: rgba(15,23,42,.08); + } + + /* ── trig circle buttons ── */ + .trig-fn-btn { + padding: 6px 14px; border-radius: 8px; + background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); + color: #aaa; font-size: 13px; font-weight: 700; cursor: pointer; + font-family: 'Manrope', sans-serif; transition: .15s; + } + .trig-fn-btn:hover { background: rgba(var(--fc-rgb,155,93,229),0.15); border-color: var(--fc,var(--violet)); color: var(--fc,var(--violet)); } + .trig-fn-btn.active { background: rgba(var(--fc-rgb,155,93,229),0.18); border-color: var(--fc,var(--violet)); color: var(--fc,var(--violet)); box-shadow: 0 0 8px rgba(var(--fc-rgb,155,93,229),0.3); } + + /* ── responsive ── */ + @media (max-width: 768px) { + #lab-home { padding: 20px 16px 60px; } + .sim-grid { grid-template-columns: 1fr 1fr; gap: 14px; } + .graph-panel { width: 220px; } + /* Touch-friendly button targets (min 44px) */ + .zoom-btn { width: auto; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 12px; } + .sim-back { padding: 10px 16px; min-height: 44px; } + .theory-toggle-btn { width: 44px; height: 44px; border-radius: 12px; } + } + @media (max-width: 540px) { + .sim-grid { grid-template-columns: 1fr; } + .sim-body-wrap { flex-direction: column; } + .graph-panel { width: 100%; height: auto; border-right: none; border-bottom: 1.5px solid var(--border); max-height: 220px; } + } + + /* Circuit tool buttons */ + .circ-tool-btn.active { + background: rgba(155,93,229,0.25) !important; + border-color: var(--violet) !important; + color: #c4b5fd !important; + } + .circ-top-btn.active { background: rgba(155,93,229,0.35) !important; color: #c4b5fd !important; } + + /* Flask selection buttons */ + .flask-metal-btn.active, .flask-acid-btn.active { + background: rgba(75,205,155,0.20) !important; + border-color: #4BCD9B !important; + color: #7BF5A4 !important; + } + + /* Reaction mode buttons */ + .reac-mode-btn.active { + background: rgba(6,214,224,0.18) !important; + border-color: var(--cyan) !important; + color: var(--cyan) !important; + } + + /* Newton law/scene buttons */ + .nlaw-btn.active { + background: rgba(6,214,224,0.18) !important; + border-color: var(--cyan) !important; + color: var(--cyan) !important; + } + .nscene-btn.active { + background: rgba(241,91,181,0.15) !important; + border-color: var(--pink) !important; + color: var(--pink) !important; + } + + /* ── wave mode buttons ── */ + .wave-mode-btn { + flex: 1; padding: 7px 4px; border-radius: 10px; + border: 1.5px solid var(--border-h); + background: transparent; color: var(--text-2); + font-family: 'Manrope', sans-serif; font-size: 0.72rem; font-weight: 700; + cursor: pointer; transition: all .15s; text-align: center; + } + .wave-mode-btn:hover { border-color: var(--violet); color: var(--text); } + .wave-mode-btn.active { + background: rgba(155,93,229,.15) !important; + border-color: var(--violet) !important; color: #fff !important; + } + .wave-n-btn.active { + background: rgba(255,209,102,.15) !important; + border-color: #FFD166 !important; color: #FFD166 !important; /* amber — wave harmonic, intentional palette */ + } + + /* ── theory panel (overlay right sidebar) ── */ + #lab-sim { position: relative; } + .theory-panel { + position: absolute; right: 0; top: 0; bottom: 0; z-index: 55; + width: 320px; + background: var(--surface); + border-left: 1.5px solid var(--border); + transform: translateX(100%); + transition: transform 0.25s cubic-bezier(.4,0,.2,1); + display: flex; flex-direction: column; + box-shadow: -4px 0 24px rgba(0,0,0,0.12); + } + .theory-panel.open { transform: translateX(0); } + .theory-panel-inner { + padding: 20px 16px; overflow-y: auto; flex: 1; + display: flex; flex-direction: column; gap: 16px; + } + .tp-title { + font-family: 'Unbounded', sans-serif; font-size: 0.72rem; font-weight: 800; + color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; + display: flex; align-items: center; gap: 8px; + } + .tp-title::after { content: ''; flex: 1; height: 1px; background: var(--border); } + .tp-section { margin-bottom: 4px; } + .tp-section-head { + font-size: 0.76rem; font-weight: 800; color: var(--violet); + margin-bottom: 6px; display: flex; align-items: center; gap: 6px; + } + .tp-formula { + background: rgba(155,93,229,0.06); border: 1px solid rgba(155,93,229,0.12); + border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; + font-size: 0.88rem; text-align: center; + } + .tp-formula .katex { font-size: 1em; } + .tp-text { + font-size: 0.78rem; color: var(--text-2); line-height: 1.6; margin-bottom: 8px; + } + .tp-var-list { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; } + .tp-var { + font-size: 0.74rem; color: var(--text-2); display: flex; gap: 6px; + padding: 3px 0; border-bottom: 1px dashed rgba(255,255,255,0.04); + } + .tp-var b { color: var(--text); font-weight: 700; min-width: 24px; } + .theory-toggle-btn { + position: absolute; right: 8px; top: 50%; transform: translateY(-50%); + width: 32px; height: 32px; border-radius: 10px; + border: 1.5px solid var(--border-h); background: transparent; color: var(--text-2); + cursor: pointer; display: flex; align-items: center; justify-content: center; + transition: all 0.15s; z-index: 2; + } + .theory-toggle-btn:hover { border-color: var(--violet); color: var(--violet); background: rgba(155,93,229,0.07); } + .theory-toggle-btn svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2.2; } + @media (max-width: 768px) { + .theory-panel.open { width: 100%; position: absolute; right: 0; top: 0; bottom: 0; z-index: 60; } + } + + /* ── embed mode (loaded in iframe, no sidebar/topbar) ── */ + .embed-mode { height: 100vh; } + .embed-mode .sb-content { height: 100vh; margin-left: 0 !important; } + .embed-mode #lab-sim { flex: 1; } + .embed-mode .sim-body-wrap { height: 100vh; } + .embed-mode .graph-panel { max-height: 100vh; } + + /* ════════════════════════════════ + GEOMETRY SIM STYLES + ════════════════════════════════ */ + .geo-panel { + width: 210px; flex-shrink: 0; + background: var(--surface); + border-right: 1.5px solid var(--border); + display: flex; flex-direction: column; + overflow-y: auto; padding: 12px 10px; gap: 4px; + } + .geo-tool-grid { + display: grid; grid-template-columns: 1fr 1fr; gap: 4px; + margin-bottom: 4px; + } + .geo-tool-btn { + display: flex; align-items: center; gap: 6px; + padding: 7px 9px; border-radius: 10px; + border: 1.5px solid var(--border); + background: transparent; color: var(--text-2); + font-family: 'Manrope', sans-serif; font-size: 0.73rem; font-weight: 700; + cursor: pointer; transition: all .14s; white-space: nowrap; + } + .geo-tool-btn svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 2.2; flex-shrink: 0; } + .geo-tool-btn:hover { border-color: rgba(155,93,229,.4); color: var(--violet); background: rgba(155,93,229,.06); } + .geo-tool-btn.active { border-color: var(--violet); color: var(--violet); background: rgba(155,93,229,.12); } + + .geo-tool-wide { + grid-column: span 2; + } + + .geo-ngon-ctrl { + display: flex; align-items: center; justify-content: center; gap: 6px; + border: 1.5px solid var(--border); border-radius: 10px; + padding: 4px 6px; + } + .geo-ngon-btn { + width: 22px; height: 22px; border-radius: 6px; + border: 1px solid var(--border-h); + background: transparent; color: var(--text-2); + cursor: pointer; display: flex; align-items: center; justify-content: center; + transition: background .12s; + } + .geo-ngon-btn svg { width: 12px; height: 12px; stroke: currentColor; } + .geo-ngon-btn:hover { background: rgba(155,93,229,.1); } + #geo-ngon-n { + font-size: 0.78rem; font-weight: 700; color: var(--text); + min-width: 18px; text-align: center; + } + + .geo-toggle-row { + display: flex; align-items: center; justify-content: space-between; + padding: 5px 4px; border-radius: 8px; cursor: pointer; + transition: background .13s; + } + .geo-toggle-row:hover { background: rgba(255,255,255,.04); } + .geo-toggle-label { + font-size: 0.73rem; font-weight: 600; color: var(--text-2); + display: flex; align-items: center; gap: 6px; + } + .geo-toggle-label svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2; opacity: .7; } + .geo-toggle { + width: 28px; height: 16px; border-radius: 8px; + background: rgba(255,255,255,.1); border: 1.5px solid var(--border-h); + position: relative; transition: background .15s; flex-shrink: 0; + } + .geo-toggle::after { + content: ''; position: absolute; left: 2px; top: 50%; + transform: translateY(-50%); + width: 9px; height: 9px; border-radius: 50%; + background: rgba(255,255,255,.4); transition: all .15s; + } + .geo-toggle.on { background: var(--violet); border-color: var(--violet); } + .geo-toggle.on::after { left: calc(100% - 11px); background: #fff; } + + .geo-info-box { + background: rgba(155,93,229,.07); border: 1px solid rgba(155,93,229,.15); + border-radius: 10px; padding: 8px 10px; margin-top: 4px; + font-size: 0.72rem; line-height: 1.55; color: var(--text-2); + } + .geo-info-box .geo-info-key { color: var(--violet); font-weight: 700; } + + .geo-stat-row { + display: flex; justify-content: space-between; align-items: center; + font-size: 0.7rem; padding: 2px 0; + border-bottom: 1px dashed rgba(255,255,255,.05); + color: var(--text-2); + } + .geo-stat-row:last-child { border: none; } + .geo-stat-row b { color: var(--text); font-weight: 700; } + + .geo-canvas-outer { + flex: 1; min-width: 0; position: relative; background: #0a0718; + } + .geo-canvas-outer canvas { + display: block; position: absolute; top: 0; left: 0; + width: 100%; height: 100%; + } + + .geo-hint-bar { + position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); + background: rgba(10,7,24,.82); border: 1px solid rgba(255,255,255,.1); + border-radius: 20px; padding: 4px 14px; + font-size: 0.7rem; color: rgba(255,255,255,.5); + pointer-events: none; white-space: nowrap; + backdrop-filter: blur(6px); + } + .geo-del-confirm { + display: none; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); + gap: 8px; align-items: center; white-space: nowrap; + background: rgba(18,10,32,.96); border: 1px solid rgba(155,93,229,.35); + border-radius: 10px; padding: 8px 12px; z-index: 20; + backdrop-filter: blur(8px); box-shadow: 0 4px 20px rgba(0,0,0,.6); + font-size: 0.72rem; color: rgba(255,255,255,.8); + } + .geo-del-confirm.visible { display: flex; } + .geo-del-confirm span { margin-right: 2px; } + .geo-del-btn { + padding: 3px 9px; border-radius: 6px; border: 1px solid; + font-size: 0.7rem; cursor: pointer; font-family: inherit; + transition: background .15s; + } + .geo-del-btn-soft { border-color: rgba(74,222,128,.4); color: #4ADE80; background: rgba(74,222,128,.08); } + .geo-del-btn-soft:hover { background: rgba(74,222,128,.18); } + .geo-del-btn-hard { border-color: rgba(248,113,113,.4); color: #f87171; background: rgba(248,113,113,.08); } + .geo-del-btn-hard:hover { background: rgba(248,113,113,.18); } + .geo-del-btn-cancel{ border-color: rgba(255,255,255,.15); color: rgba(255,255,255,.5); background: transparent; } + .geo-del-btn-cancel:hover{ background: rgba(255,255,255,.06); } diff --git a/frontend/js/labs/lab-glue.js b/frontend/js/labs/lab-glue.js new file mode 100644 index 0000000..1f12cb9 --- /dev/null +++ b/frontend/js/labs/lab-glue.js @@ -0,0 +1,888 @@ +'use strict'; + const { user, isTeacher, isAdmin } = LS.initPage(); + window._simQuizAllowed = true; // default; overridden after permission fetch for students + LS.showBoardIfAllowed(); + + + /* ════════════════════════════════ + SIM CATALOGUE (defined after P_* consts below) + ════════════════════════════════ */ + + let _catFilter = 'all'; + var _disabledSimIds = new Set(); + let _simModuleDisabled = false; + + function filterSims(cat, btn) { + _catFilter = cat; + document.querySelectorAll('.lab-filter').forEach(b => b.classList.remove('active')); + btn.classList.add('active'); + renderSims(); + } + + function renderSims() { + const base = _catFilter === 'all' ? SIMS : SIMS.filter(s => s.cat === _catFilter); + const list = base.filter(s => !s.id || !_disabledSimIds.has(s.id)); + document.getElementById('sim-grid').innerHTML = list.map(s => ` +
+ ${s.preview} +
+
${s.cat === 'math' ? '∑ Математика' : s.cat === 'chem' ? ' Химия' : s.cat === 'bio' ? ' Биология' : s.cat === 'game' ? ' Игры' : LS.icon('zap',14) + ' Физика'}
+
${s.title}
+
${s.desc}
+
+ ${!s.id ? '
Скоро
' : ''} +
`).join(''); + if (window.lucide) lucide.createIcons(); + } + + /* ════════════════════════════════ + CARD PREVIEW SVGs + ════════════════════════════════ */ + function _grid(fg='rgba(255,255,255,0.06)') { + return ` + + + + + + `; + } + function _axes() { + return ` + + + `; + } + function _svg(body) { + return ` + ${body}`; + } + + /* 1 — Graph */ + const P_GRAPH = _svg(`${_grid()}${_axes()} + + `); + + /* 2 — Transform: three shifted/scaled sines */ + const P_TRANSFORM = _svg(`${_grid()}${_axes()} + + + `); + + /* 3 — Triangle geometry */ + const P_TRIANGLE = _svg(`${_grid('rgba(255,255,255,0.04)')} + + + + + + `); + + /* 4 — Inscribed/circumscribed circles */ + const P_CIRCLES = _svg(`${_grid('rgba(255,255,255,0.04)')} + + + + + `); + + /* 5 — Quadratic roots: parabola crossing x-axis */ + const P_QUADRATIC = _svg(`${_grid()}${_axes()} + + + + + + D = b²− 4ac`); + + /* 6 — 3D geometry: isometric cube */ + const P_3D = _svg(`${_grid('rgba(255,255,255,0.04)')} + + + + + V = a³`); + + /* 7 — Probability: histogram bars */ + const P_PROB = _svg(`${_grid()} + + + + + + + + + `); + + /* 8 — Normal distribution: bell curve */ + const P_NORMAL = _svg(`${_grid()} + + + + + μ = 0, σ = 1`); + + /* 8b — Trig circle */ + const P_TRIGCIRCLE = _svg(`${_grid('rgba(255,255,255,0.04)')} + + + + + + + + + sin · cos · tg · ctg`); + + /* 9 — Projectile motion */ + const P_PROJECTILE = _svg(`${_grid('rgba(255,255,255,0.04)')} + + + + + + + + + x = v₀cos(α)·t`); + + /* 10 — Pendulum */ + const P_PENDULUM = _svg(`${_grid('rgba(255,255,255,0.04)')} + + + + + + + T = 2π√(l/g)`); + + /* 11 — Collision */ + const P_COLLISION = _svg(`${_grid('rgba(255,255,255,0.04)')} + + + m₁ + + + m₂ + + + + + `); + + + /* 13 — Electric circuit */ + const P_CIRCUIT = _svg(`${_grid('rgba(255,255,255,0.04)')} + + + + R₁ + + + R₂ + + + + I = U/R`); + + /* 14 — Magnetic field */ + const P_MAGNETIC = _svg(` + + ${_grid('rgba(155,93,229,0.06)')} + + + + + + + + + + + + + + + + + + B = μ₀I / 2πr`); + + /* 14 — Electric field lines */ + const P_FIELD = _svg(`${_grid('rgba(255,255,255,0.04)')} + + + + + + + + + + + + + + + `); + + /* 15 — Thin lens */ + const P_LENS = _svg(`${_grid('rgba(255,255,255,0.04)')} + + + + + + + + + `); + + /* 16 — Refraction */ + const P_REFRACTION = _svg(` + + + + + + + + + + + α + β + n₁sinα = n₂sinβ`); + + /* 17 — Mirrors */ + const P_MIRROR = _svg(`${_grid('rgba(255,255,255,0.04)')} + + + + + + + + + F + + + + + + + + `); + + /* 18 — Isoprocesses */ + const P_ISOPROCESS = _svg(`${_grid('rgba(255,255,255,0.04)')} + + + + + + + + + + 2 + 1 + V + P`); + + /* ── Chemistry / Molecular Physics previews ── */ + const P_GAS = _svg(` + + + ${[ + [40,30,'#4CC9F0'],[70,80,'#7BF5A4'],[110,25,'#EF476F'],[150,60,'#FFD166'],[190,30,'#4CC9F0'], + [220,90,'#EF476F'],[55,110,'#7BF5A4'],[95,65,'#4CC9F0'],[130,110,'#EF476F'],[170,40,'#FFD166'], + [210,115,'#4CC9F0'],[240,55,'#7BF5A4'],[30,70,'#FFD166'],[80,120,'#EF476F'],[165,95,'#4CC9F0'] + ].map(([x,y,c])=>``).join('')} + + + + + + + + PV=nRT`); + + + /* ── Законы Ньютона ── */ + const P_NEWTON = _svg(` + + + + + + F + + + + m₂ + + + a = F/m · III законы Ньютона`); + + /* ── Песочница сил ── */ + const P_SANDBOX = _svg(` + + ${_grid('rgba(255,255,255,0.03)')} + + + 5кг + + 8кг + + + + + + + F₁ + F₂ + Песочница сил · F = ma`); + + /* ── coming soon chem previews (simple) ── */ + const P_KINETICS = _svg(` + + ${_grid()} + + + + + [C] продукт + [A] реагент`); + + const P_EQUILIBRIUM = _svg(` + + A + B ⇌ C + D + + + + A,B + K + C,D`); + + const P_ELECTROLYSIS = _svg(` + + + + + ${[55,58,61,64,67,70].map(x=>``).join('')} + ${[210,214,218,222,226].map(x=>``).join('')} + − + +`); + + const P_BOHR = _svg(` + + + + + + + + + + `); + + const P_ORBITALS = _svg(` + + + + + + `); + + const P_PH = _svg(` + + ${_grid()} + + + pH + V`); + + const P_CHEMSANDBOX = _svg(` + + ${_grid()} + + + + + + A + B C + D + + + + + + + + `); + + const P_CRYSTAL = _svg(` + + ${[ + [80,40],[135,40],[190,40], + [55,75],[110,75],[165,75],[220,75], + [80,110],[135,110],[190,110] + ].map(([x,y],i)=>``).join('')} + + + + + + + + + + + `); + + const P_CELLDIVISION = _svg(` + + + + + + + + + + + + + + + + + + + + + Метафаза · митоз`); + + const P_PHOTOSYNTHESIS = _svg(` + + + + + + + + + + + + H₂O + CO₂ + ATP + G3P + Световые реакции · цикл Кальвина`); + + const P_ANGRYBIRDS = _svg(` + + + + + + + + + + + + + + + + + + + Физика полёта · импульс · разрушение`); + + const P_WAVES = _svg(`${_grid()} + + + + + v = \u03bbf \u00b7 y = A sin(\u03c9t \u2212 kx) \u00b7 \u0441\u0442\u043e\u044f\u0447\u0438\u0435 \u0432\u043e\u043b\u043d\u044b`); + + /* Geometry (planimetry) preview */ + const P_GEOMETRY = _svg(`${_grid('rgba(255,255,255,0.04)')} + + + + + + + + + + A + B + C`); + + const SIMS = [ + /* ── Математика ── */ + { id: 'graph', cat: 'math', + title: 'График функции', + desc: 'Строй графики функций y = f(x) с параметрами, зумом и курсором координат.', + preview: P_GRAPH }, + { id: 'graphtransform', cat: 'math', + title: 'Трансформации графиков', + desc: 'Наблюдай, как сдвиги, растяжения и отражения меняют вид функции y = a·f(kx+b)+c.', + preview: P_TRANSFORM }, + { id: 'geometry', cat: 'math', + title: 'Планиметрия', + desc: 'Интерактивная среда построений: точки, отрезки, прямые, окружности, многоугольники. Полноценный чертёж с привязкой и измерениями.', + preview: P_GEOMETRY }, + { id: 'triangle', cat: 'math', + title: 'Геометрия треугольника', + desc: 'Интерактивный треугольник: медианы, высоты, биссектрисы, вписанная и описанная окружности.', + preview: P_TRIANGLE }, + { id: 'quadratic', cat: 'math', + title: 'Корни квадратного уравнения', + desc: 'Задай a, b, c ползунками — смотри дискриминант и корни анимированно на числовой оси.', + preview: P_QUADRATIC }, + { id: 'stereo', cat: 'math', + title: 'Стереометрия 3D', + desc: 'Вращаемые объёмные фигуры: куб, пирамида, цилиндр, конус с формулами объёма и площади. Сечения, развёртка, вписанные/описанные сферы.', + preview: P_3D }, + { id: 'probability', cat: 'math', + title: 'Теория вероятностей', + desc: 'Подброс монеты/кубика N раз — гистограмма частот и закон больших чисел в действии.', + preview: P_PROB }, + { id: 'trigcircle', cat: 'math', + title: 'Тригонометрическая окружность', + desc: 'Единичная окружность с sin, cos, tg, ctg. Перетаскивай точку — все функции обновляются мгновенно. График синхронизирован.', + preview: P_TRIGCIRCLE }, + { id: 'normaldist', cat: 'math', + title: 'Нормальное распределение', + desc: 'Двигай μ и σ ползунками — колокол Гаусса и площадь под кривой обновляются мгновенно.', + preview: P_NORMAL }, + /* ── Физика ── */ + { id: 'projectile', cat: 'phys', + title: 'Бросок тела', + desc: 'Задай начальную скорость и угол — симулируй траекторию, дальность и высоту полёта.', + preview: P_PROJECTILE }, + { id: 'pendulum', cat: 'phys', + title: 'Маятник', + desc: 'Регулируй длину и угол отклонения — изучай период колебаний и затухание.', + preview: P_PENDULUM }, + { id: 'collision', cat: 'phys', + title: 'Столкновение шаров', + desc: 'Упругий и неупругий удар двух тел: законы сохранения импульса и энергии.', + preview: P_COLLISION }, + { id: 'magnetic', cat: 'phys', + title: 'Магнитное поле токов', + desc: 'Размести провода с током — наблюдай суперпозицию полей: карта, силовые линии, вектора. Заряженная частица в поле.', + preview: P_MAGNETIC }, + { id: 'circuit', cat: 'phys', + title: 'Электрические цепи', + desc: 'Конструктор цепей из резисторов и конденсаторов. Законы Ома и Кирхгофа наглядно.', + preview: P_CIRCUIT }, + { id: 'coulomb', cat: 'phys', + title: 'Закон Кулона', + desc: 'Силовые линии и эквипотенциальные поверхности для системы точечных зарядов.', + preview: P_FIELD }, + { id: 'hydrostatics', cat: 'phys', + title: 'Гидростатика', + desc: 'Давление жидкости P=ρgh, закон Архимеда, сообщающиеся сосуды, поверхностное натяжение и капиллярность.', + preview: P_SANDBOX }, + { id: 'dynamics', cat: 'phys', + title: 'Динамика', + desc: 'Законы Ньютона, песочница сил, наклонная плоскость — всё в одном интерактивном модуле.', + preview: P_SANDBOX }, + { id: 'thinlens', cat: 'phys', + title: 'Тонкая линза', + desc: 'Двигай объект относительно линзы — формула линзы, мнимое и действительное изображение.', + preview: P_LENS }, + { id: 'refraction', cat: 'phys', + title: 'Преломление света', + desc: 'Луч на границе двух сред: закон Снеллиуса, угол Брюстера, полное внутреннее отражение.', + preview: P_REFRACTION }, + { id: 'mirrors', cat: 'phys', + title: 'Зеркала', + desc: 'Плоское, вогнутое и выпуклое зеркало: построение изображения тремя главными лучами.', + preview: P_MIRROR }, + { id: 'isoprocess', cat: 'phys', + title: 'Изопроцессы', + desc: 'PV-диаграмма для четырёх изопроцессов идеального газа. Расчёт работы, теплоты и внутренней энергии.', + preview: P_ISOPROCESS }, + /* ── Химия / Молекулярная физика ── */ + { id: 'molphys', cat: 'chem', + title: 'Молекулярная физика', + desc: 'Идеальный газ, броуновское движение, агрегатные состояния и диффузия — всё в одном модуле.', + preview: P_GAS }, + { id: 'chemistry', cat: 'chem', + title: 'Химические реакции', + desc: 'Кинетика реакций, металл + кислота в колбе, ОВР с переносом электронов, ионный обмен — всё в одном модуле.', + preview: P_KINETICS }, + { id: 'equilibrium', cat: 'chem', + title: 'Химическое равновесие', + desc: 'Прямая и обратная реакция, принцип Ле Шателье: изменяй T, P, концентрацию и наблюдай сдвиг.', + preview: P_EQUILIBRIUM }, + { id: 'electrolysis', cat: 'chem', + title: 'Электролиз', + desc: 'Катод и анод в растворе электролита: движение ионов, выделение газа, закон Фарадея.', + preview: P_ELECTROLYSIS }, + /* ── Скоро: Атомная структура ── */ + { id: 'bohratom', cat: 'chem', + title: 'Атом Бора', + desc: 'Электроны на орбитах, квантование энергии, эмиссия и поглощение фотонов при переходах.', + preview: P_BOHR }, + { id: 'orbitals', cat: 'chem', + title: 'Молекулярные орбитали', + desc: 'H₂, H₂O — ковалентная связь, перекрывание орбиталей, 3D-визуализация электронных облаков.', + preview: P_ORBITALS }, + /* ── Скоро: Визуальная химия ── */ + { id: 'titration', cat: 'chem', + title: 'pH и кривая титрования', + desc: 'Добавляй кислоту или щёлочь — наблюдай изменение pH, цвет раствора и кривую нейтрализации.', + preview: P_PH }, + { id: 'chemsandbox', cat: 'chem', + title: 'Химическая песочница', + desc: 'Смешивай реагенты, наблюдай реакции: осадки, газы, изменение цвета. Свободное экспериментирование.', + preview: P_CHEMSANDBOX }, + { id: 'crystal', cat: 'chem', + title: 'Кристаллическая решётка', + desc: 'NaCl, алмаз, металл — интерактивная 3D-решётка, типы связей, вращение структуры.', + preview: P_CRYSTAL }, + /* ── Биология ── */ + { id: 'celldivision', cat: 'bio', + title: 'Деление клетки', + desc: 'Митоз и мейоз: анимированные фазы, хромосомы, веретено деления, ядерная оболочка.', + preview: P_CELLDIVISION }, + { id: 'photosynthesis', cat: 'bio', + title: 'Фотосинтез и дыхание', + desc: 'Световые реакции в тилакоидах, цикл Кальвина, митохондриальное дыхание — молекулярная анимация.', + preview: P_PHOTOSYNTHESIS }, + + /* ── Игры ── */ + { id: 'angrybirds', cat: 'game', + title: 'Angry Birds Physics', + desc: 'Запускай птиц из рогатки, разрушай блоки, побеждай свиней. Реальная физика: гравитация, ветер, импульс. 6 уровней.', + preview: P_ANGRYBIRDS }, + /* ── Физика: Волны ── */ + { id: 'waves', cat: 'phys', + title: 'Волны и звук', + desc: 'Поперечные и продольные волны, суперпозиция, стоячие волны. Частота, амплитуда, фаза, гармоники.', + preview: P_WAVES }, + ]; + + var _theoryOpen = false; + function toggleTheory() { + _theoryOpen = !_theoryOpen; + document.getElementById('theory-panel').classList.toggle('open', _theoryOpen); + const btn = document.getElementById('theory-toggle'); + btn.style.background = _theoryOpen ? 'rgba(155,93,229,0.15)' : ''; + btn.style.borderColor = _theoryOpen ? 'var(--violet)' : ''; + btn.style.color = _theoryOpen ? 'var(--violet)' : ''; + } + + function loadTheory(simId) { + const t = THEORY[simId]; + const el = document.getElementById('theory-content'); + if (!t) { el.innerHTML = '
Теория для этой симуляции пока не добавлена
'; return; } + let html = `
${LS.icon('book-open',16)} ${t.title}
`; + for (const s of t.sections) { + html += '
'; + if (s.head) html += `
${s.head}
`; + if (s.formula) html += `
`; + if (s.text) html += `
${s.text}
`; + if (s.vars) html += `
${s.vars.map(([v,d]) => `
${v} — ${d}
`).join('')}
`; + html += '
'; + } + el.innerHTML = html; + // render KaTeX formulas + el.querySelectorAll('.tp-formula[data-formula]').forEach(div => { + try { katex.render(div.dataset.formula, div, { displayMode: true, throwOnError: false }); } + catch(e) { div.textContent = div.dataset.formula; } + }); + } + + /* ── embed mode + auto-open from ?sim= ── */ + const _qp = new URLSearchParams(location.search); + var _embedMode = _qp.get('embed') === '1'; + var _autoSim = _qp.get('sim'); + + /* ── Sim state relay (embed mode only) ──────────────────────────────── */ + // Map simId → { getState, applyState } registered by openSim handlers + const _simStateRegistry = {}; + + function _registerSimState(simId, getState, applyState) { + _simStateRegistry[simId] = { getState, applyState }; + } + + let _lastEmittedState = null; + let _stateEmitInterval = null; + + function _startStateEmit(simId) { + if (_stateEmitInterval) clearInterval(_stateEmitInterval); + _lastEmittedState = null; + _stateEmitInterval = setInterval(() => { + const reg = _simStateRegistry[simId]; + if (!reg) return; + try { + const state = reg.getState(); + const json = JSON.stringify(state); + if (json === _lastEmittedState) return; + _lastEmittedState = json; + window.parent.postMessage({ type: 'sim_state', simId, state }, '*'); + } catch {} + }, 400); + } + + function _stopStateEmit() { + if (_stateEmitInterval) { clearInterval(_stateEmitInterval); _stateEmitInterval = null; } + _lastEmittedState = null; + } + + // Receive apply_sim_state from parent (students) + window.addEventListener('message', e => { + if (!_embedMode) return; + const d = e.data; + if (!d || d.type !== 'apply_sim_state') return; + const reg = _simStateRegistry[_autoSim]; + if (!reg) return; + try { + reg.applyState(d.state); + _lastEmittedState = JSON.stringify(d.state); // suppress echo + } catch {} + }); + + if (_embedMode) { + document.querySelector('.sidebar').style.display = 'none'; + document.querySelector('.sb-content').style.marginLeft = '0'; + document.querySelector('.app-layout').classList.add('embed-mode'); + document.getElementById('lab-home').style.display = 'none'; + document.getElementById('theory-toggle').style.display = 'none'; + if (_autoSim) { + document.getElementById('lab-sim').classList.add('open'); + document.querySelector('.sim-topbar').style.display = 'none'; + // defer until all external scripts are loaded + window.addEventListener('load', () => openSim(_autoSim)); + } + } else { + /* init — fetch sim settings + permissions in parallel, then render */ + const _permFetch = (!isTeacher && !isAdmin) + ? LS.api('/api/permissions/me').catch(() => null) + : Promise.resolve(null); + + Promise.all([ + LS.api('/api/settings/sims').catch(() => ({})), + _permFetch, + ]).then(([cfg, permData]) => { + _simModuleDisabled = cfg.module_disabled || false; + _disabledSimIds = new Set(cfg.disabled_ids || []); + + // check simulations.access for students + if (!isTeacher && !isAdmin && permData) { + const p = permData.permissions?.find(p => p.key === 'simulations.access'); + if (p && p.effective === false) { + document.getElementById('sim-grid').innerHTML = + `
+
+
Доступ к симуляциям закрыт
+
Администратор ограничил доступ к лаборатории
+
`; + return; + } + // store quiz permission for later use + const qp = permData.permissions?.find(p => p.key === 'simulations.quiz'); + window._simQuizAllowed = !qp || qp.effective !== false; + } else { + window._simQuizAllowed = true; + } + + if (_simModuleDisabled) { + document.getElementById('sim-grid').innerHTML = + `
+
+
Модуль симуляций отключён
+
Администратор временно отключил лабораторию
+
`; + } else { + renderSims(); + if (_autoSim) openSim(_autoSim); + // hash-router: activate sim from URL fragment after catalogue renders + else _activateFromHash(); + } + }); + lucide.createIcons(); + LS.notif.init(); + } + + /* ─── Hash router for sim deep-links ───────────────────────────────────── + URL pattern: /lab#sim/ + matches SIMS[i].id (e.g. 'projectile', 'graph', 'chemsandbox'). + F5 restores sim. Browser back/forward switches between sims. + Click on sim-card updates URL via wrapped openSim. + ──────────────────────────────────────────────────────────────────────── */ + + // Build valid-id set from SIMS catalogue (filters out "coming soon" entries) + const _SIM_HASH_MAP = {}; + SIMS.forEach(function(s) { if (s.id) { _SIM_HASH_MAP[s.id] = s.id; } }); + + var _routerNavigating = false; + + function _activateFromHash() { + var m = (location.hash || '').match(/^#sim\/([\w-]+)/); + if (!m) return false; + var simName = m[1]; + if (!_SIM_HASH_MAP[simName]) { + // eslint-disable-next-line no-console + window.console && window.console.warn('lab-router: unknown sim', simName); + return false; + } + openSim(simName); + return true; + } + + // Intercept openSim to push URL hash on user-initiated navigation + var _origOpenSim = openSim; + openSim = function(id) { + _origOpenSim(id); + if (!_routerNavigating && !_embedMode) { + var baseId = id.includes(':') ? id.split(':')[0] : id; + if (_SIM_HASH_MAP[baseId]) { + _routerNavigating = true; + location.hash = '#sim/' + baseId; + // use setTimeout so hashchange fires after flag is set + setTimeout(function() { _routerNavigating = false; }, 0); + } + } + }; + + // Intercept closeSim to clear hash when returning to home grid + var _origCloseSim = closeSim; + closeSim = function() { + _origCloseSim(); + if (!_embedMode) { + _routerNavigating = true; + history.pushState(null, '', location.pathname + location.search); + setTimeout(function() { _routerNavigating = false; }, 0); + } + }; + + // Browser back/forward navigation + window.addEventListener('hashchange', function() { + if (_routerNavigating) return; + var hasHash = _activateFromHash(); + if (!hasHash && document.getElementById('lab-sim').classList.contains('open')) { + _origCloseSim(); + } + }); diff --git a/frontend/lab.html b/frontend/lab.html index e3c03e4..7285d95 100644 --- a/frontend/lab.html +++ b/frontend/lab.html @@ -7,863 +7,7 @@ - + @@ -880,7 +24,7 @@
- +
Лаборатория
@@ -1175,8 +319,8 @@
@@ -1195,7 +339,7 @@
Функции
-
+
y = @@ -1206,7 +350,7 @@
-
+
y = @@ -1217,7 +361,7 @@
-
+
y = @@ -1292,17 +436,17 @@ —
-
+
y₁ = —
-
+
y₂ = —
-
+
y₃ = —
@@ -1350,13 +494,13 @@
Концентрации
-
Лево A
-
—
-
Лево B
-
—
-
Право A
-
—
-
Право B
-
—
+
Лево A
+
—
+
Лево B
+
—
+
Право A
+
—
+
Право B
+
—
Смешивание
—
@@ -1890,9 +1034,9 @@
-
—
—
+
—
—
—
—
-
—
—
+
—
—
—
—
—
—
@@ -1919,9 +1063,9 @@
Слои
y = a · f(k·x + b) + c
- +
- +
@@ -3095,9 +2239,9 @@
-
f(x)
sin(x)
-
a
1
-
k
1
+
f(x)
sin(x)
+
a
1
+
k
1
b
0
c
0
@@ -3109,11 +2253,11 @@
Параметры
- +
- +
@@ -3139,8 +2283,8 @@
-
Угол
45°
-
ω
0
+
Угол
45°
+
ω
0
Период T
—
Энергия
—
@@ -3180,8 +2324,8 @@
Keq
—
Q
—
-
Направление
⇌
-
A|B|C|D
—
+
Направление
⇌
+
A|B|C|D
—
@@ -3191,11 +2335,11 @@
Параметры
- +
- +
@@ -3217,10 +2361,10 @@
-
f
100
+
f
100
d'
—
M
—
-
Тип
—
+
Тип
—
@@ -3236,11 +2380,11 @@
Параметры
- +
- +
@@ -3248,7 +2392,7 @@
- +
скорость
- +
Конечное состояние
@@ -3341,8 +2485,8 @@
-
T₁, K
—
-
T₂, K
—
+
T₁, K
—
+
T₂, K
—
W, Дж
—
Q, Дж
—
ΔU, Дж
—
@@ -3359,11 +2503,11 @@
- +
- +
@@ -3388,8 +2532,8 @@
pH
—
-
Добавлено
0.0 мл
-
Точка экв.
—
+
Добавлено
0.0 мл
+
Точка экв.
—
Тип
—
@@ -3400,11 +2544,11 @@
Параметры
- +
- +
@@ -3426,8 +2570,8 @@
-
θ₁
30°
-
θ₂
—
+
θ₁
30°
+
θ₂
—
Крит. угол
—
ПВО
Нет
@@ -3457,9 +2601,9 @@
-
Бросков
0
+
Бросков
0
Макс. отклон.
—
-
χ²
—
+
χ²
—
Режим
Монета
@@ -3492,8 +2636,8 @@
-
Уровень n
1
-
E (эВ)
-13.6
+
Уровень n
1
+
E (эВ)
-13.6
λ (нм)
—
Серия
—
@@ -3524,8 +2668,8 @@
I (А)
—
-
Масса
—
-
Газ (мл)
—
+
Масса
—
+
Газ (мл)
—
Время
0 с
@@ -3549,21 +2693,21 @@
Амплитуда A₁ - 50 + 50
Частота f₁ - 1.0 Гц + 1.0 Гц
Фаза φ₁ - 0 + 0
@@ -3574,21 +2718,21 @@
Амплитуда A₂ - 40 + 40
Частота f₂ - 1.5 Гц + 1.5 Гц
Фаза φ₂ - 0 + 0
@@ -3631,10 +2775,10 @@
-
T (с)
—
-
λ (px)
—
+
T (с)
—
+
λ (px)
—
v (px/с)
—
-
f (Гц)
—
+
f (Гц)
—
@@ -3790,7 +2934,7 @@ Длины рёбер
- + @@ -3966,9 +3110,9 @@