- Hover over a command to see details
+ ${action} a command to see details
`;
}
@@ -342,7 +346,7 @@ export class PeriodicTable {
el.style.boxShadow = 'none';
};
- // Mouse events
+ // Mouse events (desktop)
el.addEventListener('mouseenter', activate);
el.addEventListener('mouseleave', deactivate);
@@ -350,8 +354,15 @@ export class PeriodicTable {
el.addEventListener('focus', activate);
el.addEventListener('blur', deactivate);
+ // Touch events - activate on tap, stay active until another tap
+ el.addEventListener('touchstart', (e) => {
+ e.preventDefault(); // Prevent double-firing with click
+ activate();
+ }, { passive: false });
+
// Click/Enter to scroll to command
el.addEventListener('click', () => {
+ activate(); // Also activate on click for touch devices
const target = document.getElementById(`cmd-${cmd}`);
if (target) {
target.scrollIntoView({ behavior: 'smooth', block: 'center' });
diff --git a/public/js/components/glass-terminal.js b/public/js/components/glass-terminal.js
index 8a0fce3b7..88673a87b 100644
--- a/public/js/components/glass-terminal.js
+++ b/public/js/components/glass-terminal.js
@@ -2,6 +2,16 @@ import { renderCommandDemo } from "../demo-renderer.js";
import { initSplitCompare } from "../effects/split-compare.js";
import { commandProcessSteps, commandCategories, commandRelationships } from "../data.js";
+// Track current split instance and command for cleanup
+let currentSplitInstance = null;
+let currentCommandId = null;
+
+const MOBILE_BREAKPOINT = 900;
+
+function isMobile() {
+ return window.innerWidth <= MOBILE_BREAKPOINT;
+}
+
export function initGlassTerminal() {
// Initial setup if needed
}
@@ -10,7 +20,34 @@ export function renderTerminalLayout(commands) {
const container = document.querySelector('.commands-gallery');
if (!container) return;
- // Group commands by category
+ if (isMobile()) {
+ renderMobileLayout(container, commands);
+ } else {
+ renderDesktopLayout(container, commands);
+ }
+
+ // Re-render on resize crossing breakpoint
+ let wasMobile = isMobile();
+ window.addEventListener('resize', () => {
+ const nowMobile = isMobile();
+ if (nowMobile !== wasMobile) {
+ wasMobile = nowMobile;
+ currentSplitInstance = null;
+ currentCommandId = null;
+ if (nowMobile) {
+ renderMobileLayout(container, commands);
+ } else {
+ renderDesktopLayout(container, commands);
+ }
+ }
+ });
+}
+
+// ============================================
+// DESKTOP LAYOUT (unchanged)
+// ============================================
+
+function renderDesktopLayout(container, commands) {
const categoryOrder = ['diagnostic', 'quality', 'intensity', 'adaptation', 'enhancement', 'system'];
const categoryLabels = {
'diagnostic': 'Diagnose',
@@ -28,7 +65,6 @@ export function renderTerminalLayout(commands) {
grouped[cat].push(cmd);
});
- // Build manual with category headers
let manualHTML = '';
categoryOrder.forEach(cat => {
if (grouped[cat] && grouped[cat].length > 0) {
@@ -51,7 +87,6 @@ export function renderTerminalLayout(commands) {
-
➜
Waiting for input...
@@ -62,9 +97,8 @@ export function renderTerminalLayout(commands) {
`;
- setupScrollSpy(commands);
+ setupDesktopScrollSpy(commands);
- // Select first command initially
if (commands.length > 0) {
updateTerminal(commands[0], document.getElementById('terminal-content'), commands);
const firstEntry = document.querySelector('.manual-entry');
@@ -95,19 +129,16 @@ function renderManualEntry(cmd) {
`;
}
-function setupScrollSpy(commands) {
+function setupDesktopScrollSpy(commands) {
const entries = document.querySelectorAll('.manual-entry');
const terminalContent = document.getElementById('terminal-content');
- // Intersection Observer for Scroll Spy - trigger around vertical center
const observer = new IntersectionObserver((observerEntries) => {
observerEntries.forEach(entry => {
if (entry.isIntersecting) {
- // Update active state
document.querySelectorAll('.manual-entry').forEach(e => e.classList.remove('active'));
entry.target.classList.add('active');
- // Update terminal
const cmdId = entry.target.dataset.id;
const cmd = commands.find(c => c.id === cmdId);
if (cmd) {
@@ -117,15 +148,13 @@ function setupScrollSpy(commands) {
});
}, {
threshold: 0.1,
- rootMargin: "-35% 0px -55% 0px" // Trigger zone biased toward upper-middle of viewport
+ rootMargin: "-35% 0px -55% 0px"
});
entries.forEach(e => observer.observe(e));
- // Click interaction - immediate selection + smooth scroll
entries.forEach(e => {
e.addEventListener('click', () => {
- // Immediately update state
document.querySelectorAll('.manual-entry').forEach(el => el.classList.remove('active'));
e.classList.add('active');
@@ -135,42 +164,32 @@ function setupScrollSpy(commands) {
updateTerminal(cmd, terminalContent, commands);
}
- // Then scroll into view
e.scrollIntoView({ behavior: 'smooth', block: 'center' });
});
});
}
-// Track current split instance and command for cleanup
-let currentSplitInstance = null;
-let currentCommandId = null;
-
function updateTerminal(cmd, container, allCommands) {
if (!cmd || !container) return;
- // Skip if already showing this command
if (currentCommandId === cmd.id) return;
currentCommandId = cmd.id;
- // Cleanup previous split instance
if (currentSplitInstance) {
currentSplitInstance.destroy();
currentSplitInstance = null;
}
- // Get process steps for this command (or use generic fallback)
const steps = commandProcessSteps[cmd.id] || ['Analyze', 'Transform', 'Verify'];
const stepsOutput = steps.map((step, i) =>
`
${i + 1}. ${step}...`
).join('
');
- // Content update - no extra indentation to avoid whitespace
container.innerHTML = `
➜/${cmd.id}
${stepsOutput}
✓ Complete
${renderCommandDemo(cmd.id)}
➜
`;
- // Initialize split-compare effect for the demo
const splitComparison = container.querySelector('.demo-split-comparison');
if (splitComparison) {
currentSplitInstance = initSplitCompare(splitComparison, {
@@ -182,4 +201,115 @@ function updateTerminal(cmd, container, allCommands) {
}
}
+// ============================================
+// MOBILE LAYOUT - Carousel + Sticky Demo
+// ============================================
+function renderMobileLayout(container, commands) {
+ // Build carousel pills
+ const carouselHTML = commands.map((cmd, i) => `
+
+ `).join('');
+
+ // Build command info cards (one per command, only active one shown)
+ const infoCardsHTML = commands.map((cmd, i) => {
+ const relationship = commandRelationships[cmd.id];
+ let relationshipHTML = '';
+
+ if (relationship) {
+ if (relationship.pairs) {
+ relationshipHTML = `
↔ pairs with /${relationship.pairs}
`;
+ } else if (relationship.leadsTo && relationship.leadsTo.length > 0) {
+ relationshipHTML = `
→ leads to ${relationship.leadsTo.map(c => `/${c}`).join(', ')}
`;
+ }
+ }
+
+ return `
+
+
/${cmd.id}
+
${cmd.description}
+ ${relationshipHTML}
+
+ `;
+ }).join('');
+
+ container.innerHTML = `
+
+
+
+ ${renderCommandDemo(commands[0]?.id || 'audit')}
+
+
+ ${infoCardsHTML}
+
+
+ `;
+
+ setupMobileInteractions(commands);
+}
+
+function setupMobileInteractions(commands) {
+ const pills = document.querySelectorAll('.mobile-cmd-pill');
+ const demoArea = document.getElementById('mobile-demo-content');
+ const infoCards = document.querySelectorAll('.mobile-cmd-info');
+
+ // Initialize first demo's split compare
+ const initialSplit = demoArea.querySelector('.demo-split-comparison');
+ if (initialSplit) {
+ currentSplitInstance = initSplitCompare(initialSplit, {
+ defaultPosition: 50,
+ skewOffset: 6,
+ minPosition: 10,
+ maxPosition: 90
+ });
+ }
+
+ // Pill click/tap handler
+ pills.forEach(pill => {
+ pill.addEventListener('click', () => {
+ const cmdId = pill.dataset.id;
+ const cmd = commands.find(c => c.id === cmdId);
+ if (!cmd || currentCommandId === cmdId) return;
+
+ currentCommandId = cmdId;
+
+ // Update active pill
+ pills.forEach(p => p.classList.remove('active'));
+ pill.classList.add('active');
+
+ // Scroll pill into view horizontally
+ pill.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });
+
+ // Update info card
+ infoCards.forEach(card => {
+ card.classList.toggle('active', card.dataset.id === cmdId);
+ });
+
+ // Cleanup previous split
+ if (currentSplitInstance) {
+ currentSplitInstance.destroy();
+ currentSplitInstance = null;
+ }
+
+ // Update demo
+ demoArea.innerHTML = renderCommandDemo(cmdId);
+
+ // Init new split compare
+ const splitComparison = demoArea.querySelector('.demo-split-comparison');
+ if (splitComparison) {
+ currentSplitInstance = initSplitCompare(splitComparison, {
+ defaultPosition: 50,
+ skewOffset: 6,
+ minPosition: 10,
+ maxPosition: 90
+ });
+ }
+ });
+ });
+}