Upload 8 files

README.md

@@ -1,10 +1,23 @@
----
-title: Cube One Handed
-emoji: 🐠
-colorFrom: red
-colorTo: red
-sdk: static
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+---
+title: One-Handed 3x3 Rubik's Cube
+emoji: 🧊
+colorFrom: indigo
+colorTo: pink
+sdk: static
+pinned: false
+license: mit
+---
+
+# One-Handed 3x3 Rubik's Cube
+
+Interactive 3D visualization and one-handed (OH) algorithm reference for speedcubing.
+
+## Features
+
+- 3D interactive Rubik's Cube (Three.js)
+- OH-optimized algorithms for F2L, OLL, PLL, COLL, and ZBLL
+- Click any algorithm to see it solve the case on the cube
+- Step-by-step mode: advance one move at a time
+- Keyboard shortcuts for moves and step navigation
+
+Created by Andy Kong

app.js

@@ -0,0 +1,1371 @@
+// ============================================================
+// 3D Rubik's Cube Visualization & OH Algorithm Player
+// Built with Three.js
+// ============================================================
+
+let scene, camera, renderer, controls;
+let cubeGroup;
+let cubies = [];
+let isAnimating = false;
+let moveQueue = [];
+
+// Colors: White, Yellow, Red, Orange, Blue, Green (as CSS strings for canvas)
+const FACE_COLORS = {
+    U: '#ffdd00', // Yellow - top
+    D: '#ffffff', // White - bottom
+    R: '#ee0000', // Red - right
+    L: '#ff8800', // Orange - left
+    F: '#0051ff', // Blue - front
+    B: '#00aa33', // Green - back
+    X: '#1a1a1a'  // Black - internal
+};
+
+const GAP = 1.02; // Gap between cubies
+
+// ============ INITIALIZATION ============
+
+function init() {
+    const canvas = document.getElementById('cube-canvas');
+    const container = canvas.parentElement;
+
+    scene = new THREE.Scene();
+    scene.background = new THREE.Color(0x141425);
+
+    camera = new THREE.PerspectiveCamera(40, container.clientWidth / 400, 0.1, 100);
+    camera.position.set(5.5, 4.2, 5.5);
+
+    renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true });
+    renderer.setSize(container.clientWidth, 400);
+    renderer.setPixelRatio(window.devicePixelRatio);
+
+    // Lighting - use Phong materials so we just need decent lighting
+    const ambientLight = new THREE.AmbientLight(0xffffff, 0.7);
+    scene.add(ambientLight);
+
+    const mainLight = new THREE.DirectionalLight(0xffffff, 0.6);
+    mainLight.position.set(5, 10, 7);
+    scene.add(mainLight);
+
+    const fillLight = new THREE.DirectionalLight(0xffffff, 0.3);
+    fillLight.position.set(-5, 0, -5);
+    scene.add(fillLight);
+
+    // Orbit controls
+    controls = new THREE.OrbitControls(camera, renderer.domElement);
+    controls.enableDamping = true;
+    controls.dampingFactor = 0.08;
+    controls.minDistance = 4;
+    controls.maxDistance = 14;
+    controls.enablePan = false;
+
+    // Create cube
+    createCube();
+
+    // Handle resize
+    window.addEventListener('resize', onResize);
+
+    // Start render loop
+    animate();
+}
+
+function onResize() {
+    const container = document.getElementById('cube-canvas').parentElement;
+    camera.aspect = container.clientWidth / 400;
+    camera.updateProjectionMatrix();
+    renderer.setSize(container.clientWidth, 400);
+}
+
+// ============ CANVAS TEXTURE STICKER ============
+
+// Creates a texture with a rounded-corner sticker on a black background
+function createStickerTexture(color) {
+    const size = 256;
+    const canvas2d = document.createElement('canvas');
+    canvas2d.width = size;
+    canvas2d.height = size;
+    const ctx = canvas2d.getContext('2d');
+
+    // Black background (the gap / body color)
+    ctx.fillStyle = '#111111';
+    ctx.fillRect(0, 0, size, size);
+
+    // Draw rounded rectangle sticker
+    const padding = 20; // border around sticker
+    const radius = 28;  // corner radius
+    const x = padding;
+    const y = padding;
+    const w = size - padding * 2;
+    const h = size - padding * 2;
+
+    ctx.beginPath();
+    ctx.moveTo(x + radius, y);
+    ctx.lineTo(x + w - radius, y);
+    ctx.quadraticCurveTo(x + w, y, x + w, y + radius);
+    ctx.lineTo(x + w, y + h - radius);
+    ctx.quadraticCurveTo(x + w, y + h, x + w - radius, y + h);
+    ctx.lineTo(x + radius, y + h);
+    ctx.quadraticCurveTo(x, y + h, x, y + h - radius);
+    ctx.lineTo(x, y + radius);
+    ctx.quadraticCurveTo(x, y, x + radius, y);
+    ctx.closePath();
+
+    ctx.fillStyle = color;
+    ctx.fill();
+
+    // Subtle highlight gradient on sticker for depth
+    const grad = ctx.createLinearGradient(x, y, x, y + h);
+    grad.addColorStop(0, 'rgba(255,255,255,0.15)');
+    grad.addColorStop(0.5, 'rgba(255,255,255,0)');
+    grad.addColorStop(1, 'rgba(0,0,0,0.1)');
+    ctx.fillStyle = grad;
+    ctx.fill();
+
+    const texture = new THREE.CanvasTexture(canvas2d);
+    texture.needsUpdate = true;
+    return texture;
+}
+
+// Black face texture (for internal faces with no sticker)
+function createBlackTexture() {
+    const size = 64;
+    const canvas2d = document.createElement('canvas');
+    canvas2d.width = size;
+    canvas2d.height = size;
+    const ctx = canvas2d.getContext('2d');
+    ctx.fillStyle = '#111111';
+    ctx.fillRect(0, 0, size, size);
+    const texture = new THREE.CanvasTexture(canvas2d);
+    texture.needsUpdate = true;
+    return texture;
+}
+
+// Cache textures
+const textureCache = {};
+function getStickerTexture(colorKey) {
+    if (!textureCache[colorKey]) {
+        if (colorKey === 'X') {
+            textureCache[colorKey] = createBlackTexture();
+        } else {
+            textureCache[colorKey] = createStickerTexture(FACE_COLORS[colorKey]);
+        }
+    }
+    return textureCache[colorKey];
+}
+
+// ============ CUBE CREATION ============
+
+function createCubie(x, y, z) {
+    const size = 0.97;
+    const geometry = new THREE.BoxGeometry(size, size, size);
+
+    // Determine which color each face gets
+    // Three.js box face order: +X, -X, +Y, -Y, +Z, -Z
+    const faceColors = [
+        x === 1 ? 'R' : 'X',   // +X Right
+        x === -1 ? 'L' : 'X',  // -X Left
+        y === 1 ? 'U' : 'X',   // +Y Up
+        y === -1 ? 'D' : 'X',  // -Y Down
+        z === 1 ? 'F' : 'X',   // +Z Front
+        z === -1 ? 'B' : 'X',  // -Z Back
+    ];
+
+    const materials = faceColors.map(key => {
+        return new THREE.MeshPhongMaterial({
+            map: getStickerTexture(key),
+            specular: 0x222222,
+            shininess: 30
+        });
+    });
+
+    const cubie = new THREE.Mesh(geometry, materials);
+    cubie.position.set(x * GAP, y * GAP, z * GAP);
+    cubie.userData = { x, y, z };
+
+    return cubie;
+}
+
+function createCube() {
+    cubeGroup = new THREE.Group();
+    cubies = [];
+
+    for (let x = -1; x <= 1; x++) {
+        for (let y = -1; y <= 1; y++) {
+            for (let z = -1; z <= 1; z++) {
+                if (x === 0 && y === 0 && z === 0) continue;
+                const cubie = createCubie(x, y, z);
+                cubies.push(cubie);
+                cubeGroup.add(cubie);
+            }
+        }
+    }
+
+    scene.add(cubeGroup);
+}
+
+// ============ ANIMATION LOOP ============
+
+function animate() {
+    requestAnimationFrame(animate);
+    controls.update();
+    renderer.render(scene, camera);
+}
+
+// ============ MOVE SYSTEM ============
+
+// Wide moves = outer layer + middle layer
+// Rotations = entire cube
+// Returns {axis, layers[], angle} for 3D animation
+function get3DMoveDef(moveStr) {
+    const PI = Math.PI;
+    const H = PI / 2;
+    switch(moveStr) {
+        // Face moves
+        case 'R': return { axis:'x', layers:[1], angle:-H };
+        case 'Ri': return { axis:'x', layers:[1], angle:H };
+        case 'R2': return { axis:'x', layers:[1], angle:-PI };
+        case 'L': return { axis:'x', layers:[-1], angle:H };
+        case 'Li': return { axis:'x', layers:[-1], angle:-H };
+        case 'L2': return { axis:'x', layers:[-1], angle:PI };
+        case 'U': return { axis:'y', layers:[1], angle:-H };
+        case 'Ui': return { axis:'y', layers:[1], angle:H };
+        case 'U2': return { axis:'y', layers:[1], angle:-PI };
+        case 'D': return { axis:'y', layers:[-1], angle:H };
+        case 'Di': return { axis:'y', layers:[-1], angle:-H };
+        case 'D2': return { axis:'y', layers:[-1], angle:PI };
+        case 'F': return { axis:'z', layers:[1], angle:-H };
+        case 'Fi': return { axis:'z', layers:[1], angle:H };
+        case 'F2': return { axis:'z', layers:[1], angle:-PI };
+        case 'B': return { axis:'z', layers:[-1], angle:H };
+        case 'Bi': return { axis:'z', layers:[-1], angle:-H };
+        case 'B2': return { axis:'z', layers:[-1], angle:PI };
+        // Wide moves (2 layers)
+        case 'r': return { axis:'x', layers:[1,0], angle:-H };
+        case 'ri': return { axis:'x', layers:[1,0], angle:H };
+        case 'r2': return { axis:'x', layers:[1,0], angle:-PI };
+        case 'l': return { axis:'x', layers:[-1,0], angle:H };
+        case 'li': return { axis:'x', layers:[-1,0], angle:-H };
+        case 'l2': return { axis:'x', layers:[-1,0], angle:PI };
+        case 'u': return { axis:'y', layers:[1,0], angle:-H };
+        case 'ui': return { axis:'y', layers:[1,0], angle:H };
+        case 'u2': return { axis:'y', layers:[1,0], angle:-PI };
+        case 'd': return { axis:'y', layers:[-1,0], angle:H };
+        case 'di': return { axis:'y', layers:[-1,0], angle:-H };
+        case 'd2': return { axis:'y', layers:[-1,0], angle:PI };
+        case 'f': return { axis:'z', layers:[1,0], angle:-H };
+        case 'fi': return { axis:'z', layers:[1,0], angle:H };
+        case 'f2': return { axis:'z', layers:[1,0], angle:-PI };
+        case 'b': return { axis:'z', layers:[-1,0], angle:H };
+        case 'bi': return { axis:'z', layers:[-1,0], angle:-H };
+        case 'b2': return { axis:'z', layers:[-1,0], angle:PI };
+        // Rotations (all 3 layers)
+        case 'x': return { axis:'x', layers:[1,0,-1], angle:-H };
+        case 'xi': return { axis:'x', layers:[1,0,-1], angle:H };
+        case 'x2': return { axis:'x', layers:[1,0,-1], angle:-PI };
+        case 'y': return { axis:'y', layers:[1,0,-1], angle:-H };
+        case 'yi': return { axis:'y', layers:[1,0,-1], angle:H };
+        case 'y2': return { axis:'y', layers:[1,0,-1], angle:-PI };
+        case 'z': return { axis:'z', layers:[1,0,-1], angle:-H };
+        case 'zi': return { axis:'z', layers:[1,0,-1], angle:H };
+        case 'z2': return { axis:'z', layers:[1,0,-1], angle:-PI };
+        // M slice (follows L direction = +x rotation for middle)
+        case 'M': return { axis:'x', layers:[0], angle:H };
+        case 'Mi': return { axis:'x', layers:[0], angle:-H };
+        case 'M2': return { axis:'x', layers:[0], angle:PI };
+        // S slice (follows F direction)
+        case 'S': return { axis:'z', layers:[0], angle:-H };
+        case 'Si': return { axis:'z', layers:[0], angle:H };
+        case 'S2': return { axis:'z', layers:[0], angle:PI };
+        default: return null;
+    }
+}
+
+function getCubiesOnLayers(axis, layers) {
+    const threshold = 0.5;
+    return cubies.filter(cubie => {
+        const pos = cubie.position;
+        for (const layer of layers) {
+            if (axis === 'x' && Math.abs(pos.x - layer * GAP) < threshold) return true;
+            if (axis === 'y' && Math.abs(pos.y - layer * GAP) < threshold) return true;
+            if (axis === 'z' && Math.abs(pos.z - layer * GAP) < threshold) return true;
+        }
+        return false;
+    });
+}
+
+function animateMove(axis, layers, angle, duration = 300) {
+    return new Promise(resolve => {
+        const layerCubies = getCubiesOnLayers(axis, layers);
+        if (layerCubies.length === 0) {
+            resolve();
+            return;
+        }
+
+        const rotationGroup = new THREE.Group();
+        scene.add(rotationGroup);
+
+        // Move cubies to rotation group
+        layerCubies.forEach(cubie => {
+            cubeGroup.remove(cubie);
+            rotationGroup.add(cubie);
+        });
+
+        const startTime = Date.now();
+        const axisVec = new THREE.Vector3(
+            axis === 'x' ? 1 : 0,
+            axis === 'y' ? 1 : 0,
+            axis === 'z' ? 1 : 0
+        );
+
+        function step() {
+            const elapsed = Date.now() - startTime;
+            const t = Math.min(elapsed / duration, 1);
+            // Smooth easing
+            const eased = t < 0.5
+                ? 4 * t * t * t
+                : 1 - Math.pow(-2 * t + 2, 3) / 2;
+
+            rotationGroup.setRotationFromAxisAngle(axisVec, angle * eased);
+
+            if (t < 1) {
+                requestAnimationFrame(step);
+            } else {
+                // Finalize - apply rotation to each cubie
+                rotationGroup.setRotationFromAxisAngle(axisVec, angle);
+                rotationGroup.updateMatrixWorld();
+
+                layerCubies.forEach(cubie => {
+                    cubie.applyMatrix4(rotationGroup.matrixWorld);
+                    cubie.position.x = Math.round(cubie.position.x / GAP) * GAP;
+                    cubie.position.y = Math.round(cubie.position.y / GAP) * GAP;
+                    cubie.position.z = Math.round(cubie.position.z / GAP) * GAP;
+                    rotationGroup.remove(cubie);
+                    cubeGroup.add(cubie);
+                });
+
+                scene.remove(rotationGroup);
+                resolve();
+            }
+        }
+
+        step();
+    });
+}
+
+async function doMove(moveStr) {
+    if (isAnimating) return;
+    isAnimating = true;
+
+    const def = get3DMoveDef(moveStr);
+    if (def) {
+        await animateMove(def.axis, def.layers, def.angle, 250);
+    }
+
+    isAnimating = false;
+    processQueue();
+}
+
+async function processQueue() {
+    if (moveQueue.length === 0 || isAnimating) return;
+    isAnimating = true;
+
+    const move = moveQueue.shift();
+    const def = get3DMoveDef(move);
+    if (def) {
+        await animateMove(def.axis, def.layers, def.angle, 180);
+    }
+
+    isAnimating = false;
+
+    if (moveQueue.length > 0) {
+        processQueue();
+    }
+}
+
+// ============ NOTATION PARSER ============
+
+function parseAlgorithm(notation) {
+    // Convert standard notation to our internal format
+    // Normalize curly quotes to straight apostrophes
+    notation = notation.replace(/\u2019/g, "'");
+    // Normalize X'2 to X2 (e.g., U'2 = U2, R'2 = R2)
+    notation = notation.replace(/([RUDLFBrudlfb])'2/g, '$12');
+    // Normalize X2' to X2 (e.g., U2' = U2, R2' = R2)
+    notation = notation.replace(/([RUDLFBrudlfb])2'/g, '$12');
+    const moves = [];
+    const tokens = notation.replace(/\(/g, '').replace(/\)/g, '').trim().split(/\s+/);
+
+    for (const token of tokens) {
+        let move = '';
+        if (token === "R") move = 'R';
+        else if (token === "R'" || token === "R\u2019") move = 'Ri';
+        else if (token === "R2") move = 'R2';
+        else if (token === "L") move = 'L';
+        else if (token === "L'" || token === "L\u2019") move = 'Li';
+        else if (token === "L2") move = 'L2';
+        else if (token === "U") move = 'U';
+        else if (token === "U'" || token === "U\u2019") move = 'Ui';
+        else if (token === "U2") move = 'U2';
+        else if (token === "D") move = 'D';
+        else if (token === "D'" || token === "D\u2019") move = 'Di';
+        else if (token === "D2") move = 'D2';
+        else if (token === "F") move = 'F';
+        else if (token === "F'" || token === "F\u2019") move = 'Fi';
+        else if (token === "F2") move = 'F2';
+        else if (token === "B") move = 'B';
+        else if (token === "B'" || token === "B\u2019") move = 'Bi';
+        else if (token === "B2") move = 'B2';
+        // Wide moves
+        else if (token === "r") move = 'r';
+        else if (token === "r'" || token === "r\u2019") move = 'ri';
+        else if (token === "r2") move = 'r2';
+        else if (token === "l") move = 'l';
+        else if (token === "l'" || token === "l\u2019") move = 'li';
+        else if (token === "l2") move = 'l2';
+        else if (token === "u") move = 'u';
+        else if (token === "u'" || token === "u\u2019") move = 'ui';
+        else if (token === "u2") move = 'u2';
+        else if (token === "d") move = 'd';
+        else if (token === "d'" || token === "d\u2019") move = 'di';
+        else if (token === "d2") move = 'd2';
+        else if (token === "f") move = 'f';
+        else if (token === "f'" || token === "f\u2019") move = 'fi';
+        else if (token === "f2") move = 'f2';
+        else if (token === "b") move = 'b';
+        else if (token === "b'" || token === "b\u2019") move = 'bi';
+        else if (token === "b2") move = 'b2';
+        // Rotations
+        else if (token === "x") move = 'x';
+        else if (token === "x'" || token === "x\u2019") move = 'xi';
+        else if (token === "x2") move = 'x2';
+        else if (token === "y") move = 'y';
+        else if (token === "y'" || token === "y\u2019") move = 'yi';
+        else if (token === "y2") move = 'y2';
+        else if (token === "z") move = 'z';
+        else if (token === "z'" || token === "z\u2019") move = 'zi';
+        else if (token === "z2") move = 'z2';
+        // M, S, E slice moves
+        else if (token === "M") move = 'M';
+        else if (token === "M'" || token === "M\u2019") move = 'Mi';
+        else if (token === "M2") move = 'M2';
+        else if (token === "S") move = 'S';
+        else if (token === "S'" || token === "S\u2019") move = 'Si';
+        else if (token === "S2") move = 'S2';
+
+        if (move) moves.push(move);
+    }
+    return moves;
+}
+
+function playAlgorithm(notation) {
+    if (isAnimating || moveQueue.length > 0) return;
+
+    const moves = parseAlgorithm(notation);
+    if (moves.length === 0) return;
+
+    document.getElementById('scramble-display').textContent = 'Playing: ' + notation;
+    moveQueue.push(...moves);
+    processQueue();
+
+    // Reset display after animation completes
+    const totalTime = moves.length * 280;
+    setTimeout(() => {
+        document.getElementById('scramble-display').textContent = 'Drag to rotate \u2022 Scroll to zoom';
+    }, totalTime);
+}
+
+// Invert a single move token (e.g., 'R' -> 'Ri', 'Ri' -> 'R', 'R2' -> 'R2')
+function invertMove(move) {
+    if (move.endsWith('2')) return move; // double moves are self-inverse
+    if (move.endsWith('i')) return move.slice(0, -1); // Ri -> R
+    return move + 'i'; // R -> Ri
+}
+
+// Setup the case (apply inverse of algorithm instantly) then play the solve animated
+async function setupAndSolve(notation) {
+    if (isAnimating || moveQueue.length > 0) return;
+    cancelStepMode();
+
+    // Focus the pop-out window if cube is popped out
+    if (cubePopWindow && !cubePopWindow.closed) {
+        cubePopWindow.focus();
+    }
+
+    // Reset cube first
+    scene.remove(cubeGroup);
+    createCube();
+
+    const moves = parseAlgorithm(notation);
+    if (moves.length === 0) return;
+
+    // Compute inverse sequence (reversed order, each move inverted)
+    const inverseMoves = moves.slice().reverse().map(invertMove);
+
+    // Apply the inverse instantly (no animation) to set up the case
+    document.getElementById('scramble-display').textContent = 'Setting up case...';
+
+    isAnimating = true;
+    for (const move of inverseMoves) {
+        const def = get3DMoveDef(move);
+        if (def) {
+            await animateMove(def.axis, def.layers, def.angle, 40);
+        }
+    }
+    isAnimating = false;
+
+    // Brief pause to let user see the scrambled state
+    await new Promise(r => setTimeout(r, 600));
+
+    // Now play the solution animated
+    document.getElementById('scramble-display').textContent = 'Solving: ' + notation;
+    moveQueue.push(...moves);
+    processQueue();
+
+    const totalTime = moves.length * 280;
+    setTimeout(() => {
+        document.getElementById('scramble-display').textContent = 'Solved! \u2714';
+    }, totalTime);
+}
+
+// ============ STEP BY STEP MODE ============
+
+let stepMoves = [];
+let stepIndex = 0;
+let stepTotal = 0;
+let stepNotation = '';
+let stepActive = false;
+
+function cancelStepMode() {
+    stepActive = false;
+    stepMoves = [];
+    stepIndex = 0;
+    hideStepPanel();
+}
+
+function hideStepPanel() {
+    const panel = document.getElementById('step-panel');
+    if (panel) panel.style.display = 'none';
+    // Also hide step controls in pop-out window
+    if (cubePopWindow && !cubePopWindow.closed) {
+        const popStepCtrl = cubePopWindow.document.getElementById('step-controls-pop');
+        if (popStepCtrl) popStepCtrl.style.display = 'none';
+    }
+}
+
+function showStepPanel() {
+    let panel = document.getElementById('step-panel');
+    if (!panel) {
+        panel = document.createElement('div');
+        panel.id = 'step-panel';
+        document.querySelector('.cube-section').appendChild(panel);
+    }
+    panel.style.display = 'flex';
+    // Default position: top-right corner, beside the cube
+    panel.style.left = 'auto';
+    panel.style.right = '15px';
+    panel.style.top = '15px';
+    panel.style.bottom = 'auto';
+    panel.style.transform = 'none';
+    updateStepPanel();
+    // Also show step controls in pop-out window
+    if (cubePopWindow && !cubePopWindow.closed) {
+        const popStepCtrl = cubePopWindow.document.getElementById('step-controls-pop');
+        if (popStepCtrl) popStepCtrl.style.display = 'flex';
+    }
+}
+
+// ============ DRAG FUNCTIONALITY ============
+
+let isDragging = false;
+let dragOffsetX = 0;
+let dragOffsetY = 0;
+
+function initPanelDrag() {
+    const handle = document.getElementById('step-drag-handle');
+    if (!handle) return;
+
+    handle.addEventListener('mousedown', startDrag);
+    handle.addEventListener('touchstart', startDragTouch, { passive: false });
+}
+
+function startDrag(e) {
+    e.preventDefault();
+    const panel = document.getElementById('step-panel');
+    if (!panel) return;
+
+    isDragging = true;
+
+    // Get current panel position
+    const rect = panel.getBoundingClientRect();
+    const parentRect = panel.parentElement.getBoundingClientRect();
+
+    // Switch from right-based to left-based absolute positioning
+    panel.style.transform = 'none';
+    panel.style.right = 'auto';
+    panel.style.left = (rect.left - parentRect.left) + 'px';
+    panel.style.top = (rect.top - parentRect.top) + 'px';
+    panel.style.bottom = 'auto';
+
+    dragOffsetX = e.clientX - rect.left;
+    dragOffsetY = e.clientY - rect.top;
+
+    document.addEventListener('mousemove', onDrag);
+    document.addEventListener('mouseup', stopDrag);
+}
+
+function startDragTouch(e) {
+    e.preventDefault();
+    const touch = e.touches[0];
+    const panel = document.getElementById('step-panel');
+    if (!panel) return;
+
+    isDragging = true;
+
+    const rect = panel.getBoundingClientRect();
+    const parentRect = panel.parentElement.getBoundingClientRect();
+
+    panel.style.transform = 'none';
+    panel.style.right = 'auto';
+    panel.style.left = (rect.left - parentRect.left) + 'px';
+    panel.style.top = (rect.top - parentRect.top) + 'px';
+    panel.style.bottom = 'auto';
+
+    dragOffsetX = touch.clientX - rect.left;
+    dragOffsetY = touch.clientY - rect.top;
+
+    document.addEventListener('touchmove', onDragTouch, { passive: false });
+    document.addEventListener('touchend', stopDrag);
+}
+
+function onDrag(e) {
+    if (!isDragging) return;
+    const panel = document.getElementById('step-panel');
+    if (!panel) return;
+
+    const parentRect = panel.parentElement.getBoundingClientRect();
+    let newX = e.clientX - parentRect.left - dragOffsetX;
+    let newY = e.clientY - parentRect.top - dragOffsetY;
+
+    // Constrain within parent
+    newX = Math.max(0, Math.min(newX, parentRect.width - panel.offsetWidth));
+    newY = Math.max(0, Math.min(newY, parentRect.height - panel.offsetHeight));
+
+    panel.style.left = newX + 'px';
+    panel.style.top = newY + 'px';
+}
+
+function onDragTouch(e) {
+    if (!isDragging) return;
+    e.preventDefault();
+    const touch = e.touches[0];
+    const panel = document.getElementById('step-panel');
+    if (!panel) return;
+
+    const parentRect = panel.parentElement.getBoundingClientRect();
+    let newX = touch.clientX - parentRect.left - dragOffsetX;
+    let newY = touch.clientY - parentRect.top - dragOffsetY;
+
+    newX = Math.max(0, Math.min(newX, parentRect.width - panel.offsetWidth));
+    newY = Math.max(0, Math.min(newY, parentRect.height - panel.offsetHeight));
+
+    panel.style.left = newX + 'px';
+    panel.style.top = newY + 'px';
+}
+
+function stopDrag() {
+    isDragging = false;
+    document.removeEventListener('mousemove', onDrag);
+    document.removeEventListener('mouseup', stopDrag);
+    document.removeEventListener('touchmove', onDragTouch);
+    document.removeEventListener('touchend', stopDrag);
+}
+
+function updateStepPanel() {
+    const panel = document.getElementById('step-panel');
+    if (!panel) return;
+
+    const tokens = parseAlgorithmTokens(stepNotation);
+
+    // Build move display with highlighting
+    let movesHtml = '';
+    for (let i = 0; i < tokens.length; i++) {
+        if (i < stepIndex) {
+            movesHtml += '<span class="step-done">' + tokens[i] + '</span> ';
+        } else if (i === stepIndex) {
+            movesHtml += '<span class="step-current">' + tokens[i] + '</span> ';
+        } else {
+            movesHtml += '<span class="step-pending">' + tokens[i] + '</span> ';
+        }
+    }
+
+    const isComplete = stepIndex >= stepTotal;
+
+    let html = '<div class="drag-handle" id="step-drag-handle">&#x2630; Drag to move</div>';
+    html += '<div class="step-content">';
+    html += '<div class="step-info">';
+    html += '<div class="step-counter">Step ' + Math.min(stepIndex + 1, stepTotal) + ' / ' + stepTotal + '</div>';
+    html += '<div class="step-moves-display">' + movesHtml + '</div>';
+    html += '</div>';
+    html += '<div class="step-buttons">';
+    if (stepIndex > 0) {
+        html += '<button class="step-btn step-btn-prev" onclick="executePrevStep()">&#x25C0; Prev</button>';
+    }
+    if (isComplete) {
+        html += '<button class="step-btn step-btn-done" onclick="cancelStepMode()">&#x2714; Done</button>';
+    } else {
+        html += '<button class="step-btn step-btn-next" onclick="executeNextStep()">Next Step &#x25B6;</button>';
+    }
+    html += '<button class="step-btn step-btn-cancel" onclick="cancelStepMode()">Cancel</button>';
+    html += '</div>';
+    html += '</div>';
+
+    panel.innerHTML = html;
+
+    // Attach drag listeners after render
+    initPanelDrag();
+
+    // Sync step info to pop-out window
+    if (cubePopWindow && !cubePopWindow.closed) {
+        const popInfo = cubePopWindow.document.getElementById('step-info-pop');
+        if (popInfo) {
+            let popHtml = '<div class="step-counter">Step ' + Math.min(stepIndex + 1, stepTotal) + ' / ' + stepTotal + '</div>';
+            popHtml += '<div class="step-moves">' + movesHtml + '</div>';
+            popInfo.innerHTML = popHtml;
+        }
+    }
+}
+
+// Parse notation keeping original tokens for display
+function parseAlgorithmTokens(notation) {
+    notation = notation.replace(/\u2019/g, "'");
+    return notation.replace(/\(/g, '').replace(/\)/g, '').trim().split(/\s+/);
+}
+
+async function startStepByStep(notation) {
+    if (isAnimating || moveQueue.length > 0) return;
+    cancelStepMode();
+
+    // Focus the pop-out window if cube is popped out
+    if (cubePopWindow && !cubePopWindow.closed) {
+        cubePopWindow.focus();
+    }
+
+    // Reset cube first
+    scene.remove(cubeGroup);
+    createCube();
+
+    const moves = parseAlgorithm(notation);
+    if (moves.length === 0) return;
+
+    // Compute inverse sequence to set up the case
+    const inverseMoves = moves.slice().reverse().map(invertMove);
+
+    document.getElementById('scramble-display').textContent = 'Setting up case...';
+
+    isAnimating = true;
+    for (const move of inverseMoves) {
+        const def = get3DMoveDef(move);
+        if (def) {
+            await animateMove(def.axis, def.layers, def.angle, 40);
+        }
+    }
+    isAnimating = false;
+
+    // Enter step mode
+    stepMoves = moves;
+    stepIndex = 0;
+    stepTotal = moves.length;
+    stepNotation = notation;
+    stepActive = true;
+
+    document.getElementById('scramble-display').textContent = 'Step-by-step: Click "Next Step" to advance';
+    showStepPanel();
+
+    // Ensure pop-out step controls are visible (retry after short delay for timing)
+    if (cubePopWindow && !cubePopWindow.closed) {
+        setTimeout(function() {
+            const popStepCtrl = cubePopWindow.document.getElementById('step-controls-pop');
+            if (popStepCtrl) popStepCtrl.style.display = 'flex';
+        }, 200);
+    }
+}
+
+async function executeNextStep() {
+    if (!stepActive || isAnimating || stepIndex >= stepTotal) return;
+
+    const move = stepMoves[stepIndex];
+    const def = get3DMoveDef(move);
+
+    if (def) {
+        isAnimating = true;
+        await animateMove(def.axis, def.layers, def.angle, 350);
+        isAnimating = false;
+    }
+
+    stepIndex++;
+
+    if (stepIndex >= stepTotal) {
+        document.getElementById('scramble-display').textContent = 'Solved! \u2714';
+    } else {
+        const tokens = parseAlgorithmTokens(stepNotation);
+        document.getElementById('scramble-display').textContent =
+            'Step ' + (stepIndex + 1) + '/' + stepTotal + ': next is ' + tokens[stepIndex];
+    }
+
+    updateStepPanel();
+}
+
+async function executePrevStep() {
+    if (!stepActive || isAnimating || stepIndex <= 0) return;
+
+    // Undo the previous move by applying its inverse
+    stepIndex--;
+    const move = stepMoves[stepIndex];
+    const inverseMove = invertMove(move);
+    const def = get3DMoveDef(inverseMove);
+
+    if (def) {
+        isAnimating = true;
+        await animateMove(def.axis, def.layers, def.angle, 350);
+        isAnimating = false;
+    }
+
+    const tokens = parseAlgorithmTokens(stepNotation);
+    document.getElementById('scramble-display').textContent =
+        'Step ' + (stepIndex + 1) + '/' + stepTotal + ': next is ' + tokens[stepIndex];
+
+    updateStepPanel();
+}
+
+// ============ SCRAMBLE & RESET ============
+
+function scrambleCube() {
+    if (isAnimating || moveQueue.length > 0) return;
+
+    const scramblePool = ['R','Ri','R2','L','Li','L2','U','Ui','U2','D','Di','D2','F','Fi','F2','B','Bi','B2'];
+    const scrambleMoves = [];
+
+    for (let i = 0; i < 20; i++) {
+        const move = scramblePool[Math.floor(Math.random() * scramblePool.length)];
+        scrambleMoves.push(move);
+    }
+
+    document.getElementById('scramble-display').textContent = 'Scrambling...';
+    moveQueue.push(...scrambleMoves);
+    processQueue();
+
+    setTimeout(() => {
+        document.getElementById('scramble-display').textContent = 'Scrambled! Try an algorithm.';
+    }, scrambleMoves.length * 210);
+}
+
+function resetCube() {
+    if (isAnimating) return;
+    moveQueue = [];
+
+    // Remove existing cube and recreate
+    scene.remove(cubeGroup);
+    createCube();
+
+    document.getElementById('scramble-display').textContent = 'Cube reset! Drag to rotate \u2022 Scroll to zoom';
+}
+
+// ============ UI RENDERING ============
+
+let currentSection = 'f2l';
+
+// ============ TOP VIEW DIAGRAM GENERATOR ============
+// Computes the top-view diagram by simulating the algorithm inverse on a solved cube
+// This guarantees the diagram matches exactly what the 3D cube shows
+
+const DIAG_COLORS = {
+    U: '#ffdd00',  // Yellow (top)
+    D: '#ffffff',  // White (bottom)
+    R: '#ee0000',  // Red
+    L: '#ff8800',  // Orange
+    F: '#0051ff',  // Blue
+    B: '#00aa33',  // Green
+    X: '#444444'   // Grey (unknown/internal)
+};
+
+// Mini cube state simulator for computing top-view diagrams
+// State: 6 faces x 9 stickers = 54 values
+// Face order: U, D, R, L, F, B
+// Sticker order per face (looking at face):
+//   0 1 2
+//   3 4 5
+//   6 7 8
+function createSolvedState() {
+    return {
+        U: ['U','U','U','U','U','U','U','U','U'],
+        D: ['D','D','D','D','D','D','D','D','D'],
+        R: ['R','R','R','R','R','R','R','R','R'],
+        L: ['L','L','L','L','L','L','L','L','L'],
+        F: ['F','F','F','F','F','F','F','F','F'],
+        B: ['B','B','B','B','B','B','B','B','B']
+    };
+}
+
+function cloneState(s) {
+    return {
+        U: [...s.U], D: [...s.D], R: [...s.R],
+        L: [...s.L], F: [...s.F], B: [...s.B]
+    };
+}
+
+// Apply a single move to the state
+function applyMoveToState(state, move) {
+    let s = cloneState(state);
+    switch(move) {
+        case 'U': return moveU(s);
+        case 'Ui': return moveU(moveU(moveU(s)));
+        case 'U2': return moveU(moveU(s));
+        case 'D': return moveD(s);
+        case 'Di': return moveD(moveD(moveD(s)));
+        case 'D2': return moveD(moveD(s));
+        case 'R': return moveR(s);
+        case 'Ri': return moveR(moveR(moveR(s)));
+        case 'R2': return moveR(moveR(s));
+        case 'L': return moveL(s);
+        case 'Li': return moveL(moveL(moveL(s)));
+        case 'L2': return moveL(moveL(s));
+        case 'F': return moveF(s);
+        case 'Fi': return moveF(moveF(moveF(s)));
+        case 'F2': return moveF(moveF(s));
+        case 'B': return moveB(s);
+        case 'Bi': return moveB(moveB(moveB(s)));
+        case 'B2': return moveB(moveB(s));
+        // Wide moves: r = R + M' (M' same direction as R)
+        case 'r': s = moveR(s); return moveMx(s);
+        case 'ri': s = moveR(moveR(moveR(s))); return moveMx(moveMx(moveMx(s)));
+        case 'r2': s = moveR(moveR(s)); return moveMx(moveMx(s));
+        case 'l': s = moveL(s); return moveMxi(s);
+        case 'li': s = moveL(moveL(moveL(s))); return moveMxi(moveMxi(moveMxi(s)));
+        case 'l2': s = moveL(moveL(s)); return moveMxi(moveMxi(s));
+        case 'u': s = moveU(s); return moveMy(s);
+        case 'ui': s = moveU(moveU(moveU(s))); return moveMy(moveMy(moveMy(s)));
+        case 'u2': s = moveU(moveU(s)); return moveMy(moveMy(s));
+        case 'd': s = moveD(s); return moveMyi(s);
+        case 'di': s = moveD(moveD(moveD(s))); return moveMyi(moveMyi(moveMyi(s)));
+        case 'd2': s = moveD(moveD(s)); return moveMyi(moveMyi(s));
+        case 'f': s = moveF(s); return moveMz(s);
+        case 'fi': s = moveF(moveF(moveF(s))); return moveMz(moveMz(moveMz(s)));
+        case 'f2': s = moveF(moveF(s)); return moveMz(moveMz(s));
+        case 'b': s = moveB(s); return moveMzi(s);
+        case 'bi': s = moveB(moveB(moveB(s))); return moveMzi(moveMzi(moveMzi(s)));
+        case 'b2': s = moveB(moveB(s)); return moveMzi(moveMzi(s));
+        // Rotations: x follows R, y follows U, z follows F
+        // Physical R direction: F→U→B→D (sticker at F moves to U position)
+        // moveR implements this: new U = old F (F→U) ✓
+        // Physical L direction: U→F→D→B (opposite of R)
+        // So for x (R direction on ALL layers): left layer needs L' = moveL³
+        case 'x': s = moveR(s); s = moveMx(s); return moveL(moveL(moveL(s)));
+        case 'xi': s = moveR(moveR(moveR(s))); s = moveMx(moveMx(moveMx(s))); return moveL(s);
+        case 'x2': s = moveR(moveR(s)); s = moveMx(moveMx(s)); return moveL(moveL(s));
+        case 'y': s = moveU(s); s = moveMy(s); return moveD(moveD(moveD(s)));
+        case 'yi': s = moveU(moveU(moveU(s))); s = moveMy(moveMy(moveMy(s))); return moveD(s);
+        case 'y2': s = moveU(moveU(s)); s = moveMy(moveMy(s)); return moveD(moveD(s));
+        case 'z': s = moveF(s); s = moveMz(s); return moveB(moveB(moveB(s)));
+        case 'zi': s = moveF(moveF(moveF(s))); s = moveMz(moveMz(moveMz(s))); return moveB(s);
+        case 'z2': s = moveF(moveF(s)); s = moveMz(moveMz(s)); return moveB(moveB(s));
+        // M slice (between R and L, follows L direction = opposite of R)
+        case 'M': return moveMx(moveMx(moveMx(s)));
+        case 'Mi': return moveMx(s);
+        case 'M2': return moveMx(moveMx(s));
+        // S slice (between F and B, follows F direction)
+        case 'S': return moveMz(s);
+        case 'Si': return moveMz(moveMz(moveMz(s)));
+        case 'S2': return moveMz(moveMz(s));
+        default: return s;
+    }
+}
+
+// Middle slice moves for state simulation
+// Mx = M slice following R direction (between R and L, rotates like R)
+// Mx = Middle slice (same cycle direction as moveR for consistency)
+function moveMx(s) {
+    const tmp = [s.U[1],s.U[4],s.U[7]];
+    s.U[1]=s.F[1]; s.U[4]=s.F[4]; s.U[7]=s.F[7];
+    s.F[1]=s.D[1]; s.F[4]=s.D[4]; s.F[7]=s.D[7];
+    s.D[1]=s.B[7]; s.D[4]=s.B[4]; s.D[7]=s.B[1];
+    s.B[7]=tmp[0]; s.B[4]=tmp[1]; s.B[1]=tmp[2];
+    return s;
+}
+function moveMxi(s) { return moveMx(moveMx(moveMx(s))); }
+
+// My = E slice following U direction (between U and D, rotates like U)
+function moveMy(s) {
+    const tmp = [s.F[3],s.F[4],s.F[5]];
+    s.F[3]=s.R[3]; s.F[4]=s.R[4]; s.F[5]=s.R[5];
+    s.R[3]=s.B[3]; s.R[4]=s.B[4]; s.R[5]=s.B[5];
+    s.B[3]=s.L[3]; s.B[4]=s.L[4]; s.B[5]=s.L[5];
+    s.L[3]=tmp[0]; s.L[4]=tmp[1]; s.L[5]=tmp[2];
+    return s;
+}
+function moveMyi(s) { return moveMy(moveMy(moveMy(s))); }
+
+// Mz = S slice following F direction (between F and B, rotates like F)
+function moveMz(s) {
+    const tmp = [s.U[3],s.U[4],s.U[5]];
+    s.U[3]=s.L[7]; s.U[4]=s.L[4]; s.U[5]=s.L[1];
+    s.L[1]=s.D[3]; s.L[4]=s.D[4]; s.L[7]=s.D[5];
+    s.D[3]=s.R[7]; s.D[4]=s.R[4]; s.D[5]=s.R[1];
+    s.R[1]=tmp[0]; s.R[4]=tmp[1]; s.R[7]=tmp[2];
+    return s;
+}
+function moveMzi(s) { return moveMz(moveMz(moveMz(s))); }
+
+function rotateFaceCW(face) {
+    return [face[6],face[3],face[0],face[7],face[4],face[1],face[8],face[5],face[2]];
+}
+
+function moveU(s) {
+    s.U = rotateFaceCW(s.U);
+    const tmp = [s.F[0],s.F[1],s.F[2]];
+    s.F[0]=s.R[0]; s.F[1]=s.R[1]; s.F[2]=s.R[2];
+    s.R[0]=s.B[0]; s.R[1]=s.B[1]; s.R[2]=s.B[2];
+    s.B[0]=s.L[0]; s.B[1]=s.L[1]; s.B[2]=s.L[2];
+    s.L[0]=tmp[0]; s.L[1]=tmp[1]; s.L[2]=tmp[2];
+    return s;
+}
+
+function moveD(s) {
+    s.D = rotateFaceCW(s.D);
+    const tmp = [s.F[6],s.F[7],s.F[8]];
+    s.F[6]=s.L[6]; s.F[7]=s.L[7]; s.F[8]=s.L[8];
+    s.L[6]=s.B[6]; s.L[7]=s.B[7]; s.L[8]=s.B[8];
+    s.B[6]=s.R[6]; s.B[7]=s.R[7]; s.B[8]=s.R[8];
+    s.R[6]=tmp[0]; s.R[7]=tmp[1]; s.R[8]=tmp[2];
+    return s;
+}
+
+function moveR(s) {
+    s.R = rotateFaceCW(s.R);
+    const tmp = [s.U[2],s.U[5],s.U[8]];
+    s.U[2]=s.F[2]; s.U[5]=s.F[5]; s.U[8]=s.F[8];
+    s.F[2]=s.D[2]; s.F[5]=s.D[5]; s.F[8]=s.D[8];
+    s.D[2]=s.B[6]; s.D[5]=s.B[3]; s.D[8]=s.B[0];
+    s.B[6]=tmp[0]; s.B[3]=tmp[1]; s.B[0]=tmp[2];
+    return s;
+}
+
+function moveL(s) {
+    s.L = rotateFaceCW(s.L);
+    const tmp = [s.U[0],s.U[3],s.U[6]];
+    s.U[0]=s.B[8]; s.U[3]=s.B[5]; s.U[6]=s.B[2];
+    s.B[8]=s.D[0]; s.B[5]=s.D[3]; s.B[2]=s.D[6];
+    s.D[0]=s.F[0]; s.D[3]=s.F[3]; s.D[6]=s.F[6];
+    s.F[0]=tmp[0]; s.F[3]=tmp[1]; s.F[6]=tmp[2];
+    return s;
+}
+
+function moveF(s) {
+    s.F = rotateFaceCW(s.F);
+    const tmp = [s.U[6],s.U[7],s.U[8]];
+    s.U[6]=s.L[8]; s.U[7]=s.L[5]; s.U[8]=s.L[2];
+    s.L[2]=s.D[0]; s.L[5]=s.D[1]; s.L[8]=s.D[2];
+    s.D[0]=s.R[6]; s.D[1]=s.R[3]; s.D[2]=s.R[0];
+    s.R[0]=tmp[0]; s.R[3]=tmp[1]; s.R[6]=tmp[2];
+    return s;
+}
+
+function moveB(s) {
+    s.B = rotateFaceCW(s.B);
+    const tmp = [s.U[0],s.U[1],s.U[2]];
+    s.U[0]=s.R[2]; s.U[1]=s.R[5]; s.U[2]=s.R[8];
+    s.R[2]=s.D[8]; s.R[5]=s.D[7]; s.R[8]=s.D[6];
+    s.D[6]=s.L[0]; s.D[7]=s.L[3]; s.D[8]=s.L[6];
+    s.L[0]=tmp[2]; s.L[3]=tmp[1]; s.L[6]=tmp[0];
+    return s;
+}
+
+// Compute the cube state after applying the inverse of an algorithm (setup state)
+function computeSetupState(notation) {
+    const moves = parseAlgorithm(notation);
+    if (moves.length === 0) return createSolvedState();
+
+    // Inverse: reverse order, invert each move
+    const inverseMoves = moves.slice().reverse().map(invertMove);
+
+    let state = createSolvedState();
+    for (const move of inverseMoves) {
+        state = applyMoveToState(state, move);
+    }
+    return state;
+}
+
+function generateTopViewSVG(section, caseName, caseDesc, firstAlgNotation) {
+    // Only generate for OLL, PLL, COLL, ZBLL
+    if (section === 'f2l') return '';
+    if (!firstAlgNotation) return '';
+
+    const state = computeSetupState(firstAlgNotation);
+
+    const size = 80;
+    const cell = size / 5;
+    const topStart = cell;
+    const r = 2;
+
+    let svg = '<svg width="' + size + '" height="' + size + '" viewBox="0 0 ' + size + ' ' + size + '" xmlns="http://www.w3.org/2000/svg">';
+    svg += '<rect width="' + size + '" height="' + size + '" fill="#1a1a1a" rx="4"/>';
+
+    // Draw top face (3x3 grid) - state.U
+    for (let row = 0; row < 3; row++) {
+        for (let col = 0; col < 3; col++) {
+            const color = DIAG_COLORS[state.U[row * 3 + col]] || '#444';
+            const x = topStart + col * cell;
+            const y = topStart + row * cell;
+            svg += '<rect x="' + (x+1) + '" y="' + (y+1) + '" width="' + (cell-2) + '" height="' + (cell-2) + '" fill="' + color + '" rx="' + r + '"/>';
+        }
+    }
+
+    // Side stickers visible from top:
+    // Top of diagram = Back face top row (reversed because viewing from opposite side): B[2], B[1], B[0]
+    for (let i = 0; i < 3; i++) {
+        const color = DIAG_COLORS[state.B[2 - i]] || '#444';
+        const x = topStart + i * cell;
+        const y = 0;
+        svg += '<rect x="' + (x+1) + '" y="' + (y+1) + '" width="' + (cell-2) + '" height="' + (cell-2) + '" fill="' + color + '" rx="' + r + '"/>';
+    }
+    // Right of diagram = Right face top row (back to front): R[2], R[1], R[0]
+    for (let i = 0; i < 3; i++) {
+        const color = DIAG_COLORS[state.R[2 - i]] || '#444';
+        const x = topStart + 3 * cell;
+        const y = topStart + i * cell;
+        svg += '<rect x="' + (x+1) + '" y="' + (y+1) + '" width="' + (cell-2) + '" height="' + (cell-2) + '" fill="' + color + '" rx="' + r + '"/>';
+    }
+    // Bottom of diagram = Front face top row: F[0], F[1], F[2]
+    for (let i = 0; i < 3; i++) {
+        const color = DIAG_COLORS[state.F[i]] || '#444';
+        const x = topStart + i * cell;
+        const y = topStart + 3 * cell;
+        svg += '<rect x="' + (x+1) + '" y="' + (y+1) + '" width="' + (cell-2) + '" height="' + (cell-2) + '" fill="' + color + '" rx="' + r + '"/>';
+    }
+    // Left of diagram = Left face top row: L[0], L[1], L[2] (front to back)
+    for (let i = 0; i < 3; i++) {
+        const color = DIAG_COLORS[state.L[i]] || '#444';
+        const x = 0;
+        const y = topStart + i * cell;
+        svg += '<rect x="' + (x+1) + '" y="' + (y+1) + '" width="' + (cell-2) + '" height="' + (cell-2) + '" fill="' + color + '" rx="' + r + '"/>';
+    }
+
+    svg += '</svg>';
+    return svg;
+}
+
+function renderAlgorithms(section, filterGroup) {
+    currentSection = section;
+    const data = OH_ALGORITHMS[section];
+    const container = document.getElementById('algorithm-section');
+
+    let html = `<h2>${data.title}</h2>`;
+    html += `<p class="description">${data.description}</p>`;
+
+    // Add group filter tabs for ZBLL, COLL, and F2L
+    if (section === 'zbll' || section === 'coll' || section === 'f2l') {
+        const groups = [];
+        const groupSet = new Set();
+        for (const c of data.cases) {
+            const g = c.case || c.name.split(' ')[0];
+            if (!groupSet.has(g)) { groupSet.add(g); groups.push(g); }
+        }
+        html += '<div class="group-tabs">';
+        html += `<button class="group-tab ${!filterGroup ? 'active' : ''}" onclick="renderAlgorithms('${section}')">All</button>`;
+        for (const g of groups) {
+            const active = filterGroup === g ? 'active' : '';
+            html += `<button class="group-tab ${active}" onclick="renderAlgorithms('${section}','${g}')">${g}</button>`;
+        }
+        html += '</div>';
+    }
+
+    // Filter cases by group if specified
+    let cases = data.cases;
+    if (filterGroup) {
+        cases = data.cases.filter(c => (c.case || c.name.split(' ')[0]) === filterGroup);
+    }
+
+    html += '<div class="alg-grid">';
+
+    for (const caseData of cases) {
+        html += `<div class="alg-card">`;
+
+        // Top view diagram + case info in a row
+        const firstAlg = caseData.algs[0] ? caseData.algs[0].notation : '';
+
+        // Generate VisualCube 3D image for F2L cases
+        if (section === 'f2l' && firstAlg) {
+            const vcAlg = firstAlg.replace(/\(/g, '').replace(/\)/g, '').replace(/\u2019/g, "'").replace(/\u2032/g, "'");
+            const vcUrl = `https://visualcube.api.cubing.net/visualcube.php?fmt=svg&size=150&case=${encodeURIComponent(vcAlg)}&bg=t&cc=black`;
+            html += `<div class="alg-card-header">`;
+            html += `<div class="alg-diagram"><img src="${vcUrl}" alt="${caseData.name}" class="f2l-case-img" loading="lazy"></div>`;
+            html += `<div class="alg-card-info">`;
+            html += `<div class="case-name">${caseData.name}</div>`;
+            html += `<h4>${caseData.case}</h4>`;
+            html += `</div></div>`;
+        } else if (section === 'f2l' && !firstAlg) {
+            // Solved case (F2L 37)
+            html += `<div class="alg-card-header">`;
+            html += `<div class="alg-diagram"><img src="https://visualcube.api.cubing.net/visualcube.php?fmt=svg&size=150&bg=t&cc=black" alt="${caseData.name}" class="f2l-case-img" loading="lazy"></div>`;
+            html += `<div class="alg-card-info">`;
+            html += `<div class="case-name">${caseData.name}</div>`;
+            html += `<h4>${caseData.case}</h4>`;
+            html += `</div></div>`;
+        } else {
+            const diagram = generateTopViewSVG(section, caseData.name, caseData.case, firstAlg);
+            if (diagram) {
+                html += `<div class="alg-card-header">`;
+                html += `<div class="alg-diagram">${diagram}</div>`;
+                html += `<div class="alg-card-info">`;
+                html += `<div class="case-name">${caseData.name}</div>`;
+                html += `<h4>${caseData.case}</h4>`;
+                html += `</div></div>`;
+            } else {
+                html += `<div class="case-name">${caseData.name}</div>`;
+                html += `<h4>${caseData.case}</h4>`;
+            }
+        }
+
+        for (const alg of caseData.algs) {
+            const escaped = alg.notation.replace(/'/g, "\\'").replace(/\u2019/g, "\\'");
+            html += `<div class="alg-row">`;
+            html += `<div class="alg-notation" onclick="setupAndSolve('${escaped}')" title="Click to setup case & watch the solve">${alg.notation}</div>`;
+            html += `<div class="alg-meta">`;
+            html += `<span>${alg.note}</span>`;
+            html += `<span class="moves">${alg.moves} moves</span>`;
+            html += `<button class="step-by-step-btn" onclick="startStepByStep('${escaped}')" title="Step through one move at a time">Step by Step</button>`;
+            html += `</div>`;
+            html += `</div>`;
+        }
+
+        html += `</div>`;
+    }
+
+    html += '</div>';
+    container.innerHTML = html;
+}
+
+// ============ NAVIGATION ============
+
+function setupNavigation() {
+    const navItems = document.querySelectorAll('.nav-item');
+
+    navItems.forEach(item => {
+        item.addEventListener('click', () => {
+            navItems.forEach(n => {
+                n.classList.remove('active');
+                n.setAttribute('aria-pressed', 'false');
+            });
+            item.classList.add('active');
+            item.setAttribute('aria-pressed', 'true');
+
+            const section = item.getAttribute('data-section');
+            renderAlgorithms(section);
+        });
+
+        // Keyboard support
+        item.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                item.click();
+            }
+        });
+    });
+}
+
+// ============ KEYBOARD SHORTCUTS ============
+
+document.addEventListener('keydown', (e) => {
+    if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+
+    // Step mode: space or right arrow advances, left arrow goes back
+    if (stepActive) {
+        if (e.key === ' ' || e.key === 'ArrowRight' || e.key === 'Enter') {
+            e.preventDefault();
+            executeNextStep();
+            return;
+        }
+        if (e.key === 'ArrowLeft') {
+            e.preventDefault();
+            executePrevStep();
+            return;
+        }
+        if (e.key === 'Escape') {
+            cancelStepMode();
+            return;
+        }
+    }
+
+    const key = e.key.toLowerCase();
+    const shift = e.shiftKey;
+
+    switch (key) {
+        case 'r': doMove(shift ? 'Ri' : 'R'); break;
+        case 'u': doMove(shift ? 'Ui' : 'U'); break;
+        case 'f': doMove(shift ? 'Fi' : 'F'); break;
+        case 'l': doMove(shift ? 'Li' : 'L'); break;
+        case 'd': doMove(shift ? 'Di' : 'D'); break;
+        case 'b': doMove(shift ? 'Bi' : 'B'); break;
+        case 's': scrambleCube(); break;
+        case 'escape': resetCube(); break;
+    }
+});
+
+// ============ STARTUP ============
+
+function toggleMoveButtons() {
+    const panel = document.getElementById('move-buttons');
+    const btn = document.getElementById('toggle-moves-btn');
+    if (panel.style.display === 'none') {
+        panel.style.display = 'flex';
+        btn.textContent = 'Moves ▲';
+    } else {
+        panel.style.display = 'none';
+        btn.textContent = 'Moves ▼';
+    }
+}
+
+// ============ COLLAPSE / FULLSCREEN 3D VIEW ============
+
+let cubePopWindow = null; // kept for compatibility with showStepPanel/hideStepPanel references
+
+function toggleCollapse() {
+    const cubeSection = document.getElementById('cube-section');
+    const btn = document.getElementById('popout-btn');
+
+    if (cubeSection.classList.contains('collapsed')) {
+        cubeSection.classList.remove('collapsed');
+        btn.innerHTML = '&#x25B2; Hide';
+        btn.title = 'Collapse 3D view for more algorithm space';
+        onResize();
+    } else {
+        cubeSection.classList.remove('fullscreen');
+        cubeSection.classList.add('collapsed');
+        btn.innerHTML = '&#x25BC; Show';
+        btn.title = 'Show 3D view';
+    }
+}
+
+function toggleFullscreen() {
+    const cubeSection = document.getElementById('cube-section');
+    const fsBtn = document.getElementById('fullscreen-btn');
+
+    if (cubeSection.classList.contains('fullscreen')) {
+        cubeSection.classList.remove('fullscreen');
+        fsBtn.innerHTML = '&#x26F6; Full';
+        fsBtn.title = 'Full screen 3D view';
+        onResize();
+    } else {
+        cubeSection.classList.remove('collapsed');
+        cubeSection.classList.add('fullscreen');
+        fsBtn.innerHTML = '&#x2716; Exit';
+        fsBtn.title = 'Exit full screen';
+        // Update canvas size for fullscreen
+        const container = document.getElementById('cube-canvas').parentElement;
+        camera.aspect = container.clientWidth / (window.innerHeight - 120);
+        camera.updateProjectionMatrix();
+        renderer.setSize(container.clientWidth, window.innerHeight - 120);
+        // Also show the collapse button properly
+        document.getElementById('popout-btn').innerHTML = '&#x25B2; Hide';
+    }
+}
+
+// Startup is handled by index.html after JSON files load

index.html

@@ -1,19 +1,708 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>One-Handed 3x3 Rubik's Cube - OH Algorithms</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: #1a1a2e;
+            color: #e0e0e0;
+            overflow-x: hidden;
+        }
+
+        header {
+            background: linear-gradient(135deg, #16213e, #0f3460);
+            padding: 20px 40px;
+            text-align: center;
+            border-bottom: 2px solid #e94560;
+        }
+
+        header h1 {
+            font-size: 2rem;
+            color: #fff;
+            text-shadow: 0 0 10px rgba(233, 69, 96, 0.5);
+        }
+
+        header p {
+            color: #aaa;
+            margin-top: 5px;
+        }
+
+        .container {
+            display: flex;
+            min-height: calc(100vh - 100px);
+        }
+
+        .sidebar {
+            width: 280px;
+            background: #16213e;
+            padding: 20px;
+            border-right: 1px solid #0f3460;
+            overflow-y: auto;
+            max-height: calc(100vh - 100px);
+            position: sticky;
+            top: 0;
+        }
+
+        .sidebar h3 {
+            color: #e94560;
+            margin-bottom: 15px;
+            font-size: 1.1rem;
+        }
+
+        .nav-item {
+            padding: 12px 16px;
+            margin: 4px 0;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            font-size: 0.95rem;
+        }
+
+        .nav-item:hover {
+            background: #0f3460;
+            transform: translateX(5px);
+        }
+
+        .nav-item.active {
+            background: #e94560;
+            color: #fff;
+            font-weight: bold;
+        }
+
+        .main-content {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            height: calc(100vh - 100px);
+            overflow: hidden;
+        }
+
+        .cube-section {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 20px;
+            background: radial-gradient(ellipse at center, #1a1a35 0%, #0a0a18 100%);
+            border-bottom: 1px solid #333;
+            min-height: 420px;
+            position: relative;
+            flex-shrink: 0;
+        }
+
+        .cube-section.collapsed {
+            min-height: 0;
+            height: 40px;
+            padding: 8px 20px;
+            justify-content: flex-start;
+            align-items: center;
+        }
+
+        .cube-section.collapsed canvas,
+        .cube-section.collapsed .controls,
+        .cube-section.collapsed .scramble-display,
+        .cube-section.collapsed .move-buttons,
+        .cube-section.collapsed #step-panel {
+            display: none !important;
+        }
+
+        .cube-section.fullscreen {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            min-height: 100vh;
+            z-index: 999;
+            border: none;
+            padding: 10px;
+        }
+
+        .cube-section.fullscreen #cube-canvas {
+            height: calc(100vh - 120px);
+        }
+
+        .popout-btn {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            padding: 6px 14px;
+            border: 1px solid #4fc3f7;
+            border-radius: 6px;
+            background: rgba(15, 52, 96, 0.8);
+            color: #4fc3f7;
+            cursor: pointer;
+            font-size: 0.8rem;
+            z-index: 10;
+            transition: all 0.2s;
+        }
+
+        .popout-btn:hover {
+            background: #4fc3f7;
+            color: #0a0a18;
+        }
+
+        .cube-section.collapsed .popout-btn {
+            position: static;
+        }
+
+        .fullscreen-btn {
+            position: absolute;
+            top: 10px;
+            right: 100px;
+            padding: 6px 14px;
+            border: 1px solid #2ecc71;
+            border-radius: 6px;
+            background: rgba(15, 52, 96, 0.8);
+            color: #2ecc71;
+            cursor: pointer;
+            font-size: 0.8rem;
+            z-index: 10;
+            transition: all 0.2s;
+        }
+
+        .fullscreen-btn:hover {
+            background: #2ecc71;
+            color: #0a0a18;
+        }
+
+        #cube-canvas {
+            width: 100%;
+            height: 400px;
+            border-radius: 12px;
+            display: block;
+        }
+
+        .controls {
+            position: absolute;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            display: flex;
+            gap: 8px;
+            flex-wrap: wrap;
+            justify-content: center;
+            z-index: 10;
+            max-width: 600px;
+        }
+
+        .control-btn {
+            padding: 8px 14px;
+            border: none;
+            border-radius: 6px;
+            background: #0f3460;
+            color: #fff;
+            cursor: pointer;
+            font-size: 0.85rem;
+            transition: all 0.2s;
+        }
+
+        .control-btn:hover {
+            background: #e94560;
+            transform: scale(1.05);
+        }
+
+        .algorithm-section {
+            flex: 1;
+            padding: 30px;
+            overflow-y: auto;
+        }
+
+        .algorithm-section h2 {
+            color: #e94560;
+            margin-bottom: 10px;
+            font-size: 1.6rem;
+        }
+
+        .algorithm-section .description {
+            color: #888;
+            margin-bottom: 25px;
+            line-height: 1.6;
+        }
+
+        .alg-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
+            gap: 16px;
+        }
+
+        .alg-card {
+            background: #16213e;
+            border: 1px solid #0f3460;
+            border-radius: 12px;
+            padding: 18px;
+            transition: all 0.3s ease;
+        }
+
+        .alg-card:hover {
+            border-color: #e94560;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 15px rgba(233, 69, 96, 0.2);
+        }
+
+        .alg-card h4 {
+            color: #fff;
+            margin-bottom: 8px;
+            font-size: 1rem;
+        }
+
+        .alg-card .case-name {
+            color: #e94560;
+            font-weight: bold;
+            font-size: 0.9rem;
+            margin-bottom: 6px;
+        }
+
+        .alg-card-header {
+            display: flex;
+            align-items: center;
+            gap: 14px;
+            margin-bottom: 10px;
+        }
+
+        .alg-diagram {
+            flex-shrink: 0;
+        }
+
+        .alg-diagram svg {
+            display: block;
+            border-radius: 4px;
+        }
+
+        .alg-diagram .f2l-case-img {
+            display: block;
+            width: 120px;
+            height: 120px;
+            border-radius: 4px;
+        }
+
+        .alg-card-info {
+            flex: 1;
+            min-width: 0;
+        }
+
+        .alg-card-info .case-name {
+            color: #e94560;
+            font-weight: bold;
+            font-size: 0.9rem;
+            margin-bottom: 4px;
+        }
+
+        .alg-card-info h4 {
+            color: #fff;
+            font-size: 0.95rem;
+            margin: 0;
+        }
+
+        .alg-notation {
+            font-family: 'Courier New', monospace;
+            background: #0a0a1a;
+            padding: 10px 14px;
+            border-radius: 6px;
+            font-size: 0.85rem;
+            color: #4fc3f7;
+            margin: 6px 0;
+            word-break: break-all;
+            cursor: pointer;
+            transition: background 0.2s;
+        }
+
+        .alg-notation:hover {
+            background: #1a1a3a;
+        }
+
+        .alg-notation:hover::after {
+            content: ' [click to setup & solve]';
+            color: #e94560;
+            font-size: 0.7rem;
+        }
+
+        .alg-meta {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-top: 8px;
+            font-size: 0.8rem;
+            color: #666;
+        }
+
+        .alg-meta .moves {
+            background: #0f3460;
+            padding: 2px 8px;
+            border-radius: 4px;
+            color: #4fc3f7;
+        }
+
+        .info-badge {
+            display: inline-block;
+            background: #e94560;
+            color: #fff;
+            padding: 2px 8px;
+            border-radius: 10px;
+            font-size: 0.75rem;
+            margin-left: 8px;
+        }
+
+        .scramble-display {
+            position: absolute;
+            top: 15px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: rgba(15, 52, 96, 0.9);
+            padding: 8px 16px;
+            border-radius: 6px;
+            font-family: 'Courier New', monospace;
+            font-size: 0.9rem;
+            color: #4fc3f7;
+            z-index: 10;
+        }
+
+        .sub-section {
+            margin-bottom: 30px;
+        }
+
+        .sub-section h3 {
+            color: #fff;
+            margin-bottom: 12px;
+            padding-bottom: 6px;
+            border-bottom: 1px solid #333;
+        }
+
+        @media (max-width: 900px) {
+            .container {
+                flex-direction: column;
+            }
+            .sidebar {
+                width: 100%;
+                max-height: 200px;
+                position: relative;
+                display: flex;
+                flex-wrap: wrap;
+                gap: 8px;
+                align-items: center;
+            }
+            .sidebar h3:last-of-type, .sidebar p, .sidebar hr {
+                display: none;
+            }
+            .alg-grid {
+                grid-template-columns: 1fr;
+            }
+            .cube-section {
+                min-height: 350px;
+            }
+        }
+
+        /* Group filter tabs for ZBLL/COLL */
+        .group-tabs {
+            display: flex;
+            gap: 6px;
+            flex-wrap: wrap;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid #333;
+        }
+
+        .group-tab {
+            padding: 8px 16px;
+            border: 1px solid #0f3460;
+            border-radius: 6px;
+            background: #0f0f23;
+            color: #888;
+            cursor: pointer;
+            font-size: 0.85rem;
+            transition: all 0.2s;
+        }
+
+        .group-tab:hover {
+            background: #0f3460;
+            color: #fff;
+        }
+
+        .group-tab.active {
+            background: #e94560;
+            color: #fff;
+            border-color: #e94560;
+            font-weight: bold;
+        }
+
+        /* Step-by-step button in algorithm cards */
+        .step-by-step-btn {
+            padding: 3px 10px;
+            border: 1px solid #4fc3f7;
+            border-radius: 4px;
+            background: transparent;
+            color: #4fc3f7;
+            cursor: pointer;
+            font-size: 0.75rem;
+            transition: all 0.2s;
+            white-space: nowrap;
+        }
+
+        .step-by-step-btn:hover {
+            background: #4fc3f7;
+            color: #0a0a1a;
+        }
+
+        /* Step panel overlay on cube */
+        #step-panel {
+            display: none;
+            position: absolute;
+            top: 15px;
+            right: 15px;
+            left: auto;
+            bottom: auto;
+            transform: none;
+            background: rgba(10, 10, 30, 0.95);
+            border: 1px solid #4fc3f7;
+            border-radius: 12px;
+            padding: 0;
+            z-index: 20;
+            flex-direction: column;
+            align-items: center;
+            gap: 12px;
+            min-width: 280px;
+            max-width: 40%;
+            backdrop-filter: blur(8px);
+            cursor: default;
+            user-select: none;
+        }
+
+        #step-panel .drag-handle {
+            width: 100%;
+            padding: 8px 16px;
+            cursor: grab;
+            background: rgba(79, 195, 247, 0.15);
+            border-radius: 12px 12px 0 0;
+            text-align: center;
+            font-size: 0.75rem;
+            color: #4fc3f7;
+            border-bottom: 1px solid rgba(79, 195, 247, 0.2);
+        }
+
+        #step-panel .drag-handle:active {
+            cursor: grabbing;
+        }
+
+        #step-panel .step-content {
+            padding: 14px 20px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 12px;
+        }
+
+        .step-info {
+            text-align: center;
+            width: 100%;
+        }
+
+        .step-counter {
+            font-size: 0.85rem;
+            color: #888;
+            margin-bottom: 8px;
+        }
+
+        .step-moves-display {
+            font-family: 'Courier New', monospace;
+            font-size: 1rem;
+            line-height: 1.8;
+            word-wrap: break-word;
+        }
+
+        .step-done {
+            color: #555;
+            text-decoration: line-through;
+        }
+
+        .step-current {
+            color: #fff;
+            background: #e94560;
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-weight: bold;
+            font-size: 1.1rem;
+        }
+
+        .step-pending {
+            color: #4fc3f7;
+        }
+
+        .step-buttons {
+            display: flex;
+            gap: 10px;
+        }
+
+        .step-btn {
+            padding: 8px 18px;
+            border: none;
+            border-radius: 6px;
+            cursor: pointer;
+            font-size: 0.9rem;
+            font-weight: bold;
+            transition: all 0.2s;
+        }
+
+        .step-btn-next {
+            background: #e94560;
+            color: #fff;
+        }
+
+        .step-btn-next:hover {
+            background: #ff6b85;
+            transform: scale(1.05);
+        }
+
+        .step-btn-prev {
+            background: #0f3460;
+            color: #4fc3f7;
+            border: 1px solid #4fc3f7;
+        }
+
+        .step-btn-prev:hover {
+            background: #4fc3f7;
+            color: #0a0a1a;
+        }
+
+        .step-btn-done {
+            background: #2ecc71;
+            color: #fff;
+        }
+
+        .step-btn-cancel {
+            background: #333;
+            color: #aaa;
+            border: 1px solid #555;
+        }
+
+        .step-btn-cancel:hover {
+            background: #555;
+            color: #fff;
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <h1>&#x1F9CA; One-Handed 3x3 Rubik's Cube</h1>
+        <p>Interactive 3D Visualization &amp; OH Algorithm Reference</p>
+    </header>
+
+    <div class="container">
+        <nav class="sidebar" role="navigation" aria-label="Algorithm categories">
+            <h3>&#x1F4DA; Algorithm Sets</h3>
+            <div class="nav-item active" data-section="f2l" tabindex="0" role="button" aria-pressed="true">F2L <span class="info-badge">42 cases</span></div>
+            <div class="nav-item" data-section="oll" tabindex="0" role="button" aria-pressed="false">OLL <span class="info-badge">57 cases</span></div>
+            <div class="nav-item" data-section="pll" tabindex="0" role="button" aria-pressed="false">PLL <span class="info-badge">21 cases</span></div>
+            <div class="nav-item" data-section="coll" tabindex="0" role="button" aria-pressed="false">COLL <span class="info-badge">40 cases</span></div>
+            <div class="nav-item" data-section="zbll" tabindex="0" role="button" aria-pressed="false">ZBLL <span class="info-badge">subset</span></div>
+            <hr style="border-color: #333; margin: 20px 0;">
+            <h3>&#x2139;&#xFE0F; Tips</h3>
+            <p style="font-size:0.85rem; color:#888; line-height:1.5;">
+                &#x2022; Click algorithm: auto setup &amp; solve<br>
+                &#x2022; "Step by Step": one move at a time<br>
+                &#x2022; Space/Arrow to advance steps<br>
+                &#x2022; Drag to rotate camera<br>
+                &#x2022; Scroll to zoom<br>
+                &#x2022; Keyboard: R/U/F/L/D/B (Shift=inverse)
+            </p>
+            <div style="margin-top: 20px; padding-top: 15px; border-top: 1px solid #333; font-size: 0.8rem; color: #666; text-align: center;">
+                Created by Andy Kong
+            </div>
+            <div style="margin-top: 10px; text-align: center;">
+                <button onclick="document.getElementById('about-modal').style.display='flex'" style="padding: 6px 16px; border: 1px solid #4fc3f7; border-radius: 6px; background: transparent; color: #4fc3f7; cursor: pointer; font-size: 0.8rem;">About</button>
+            </div>
+        </nav>
+
+        <div class="main-content">
+            <div class="cube-section" id="cube-section">
+                <button class="fullscreen-btn" id="fullscreen-btn" onclick="toggleFullscreen()" title="Full screen 3D view">&#x26F6; Full</button>
+                <button class="popout-btn" id="popout-btn" onclick="toggleCollapse()" title="Collapse 3D view for more algorithm space">&#x25B2; Hide</button>
+                <div class="scramble-display" id="scramble-display">Drag to rotate &#x2022; Scroll to zoom</div>
+                <canvas id="cube-canvas"></canvas>
+                <div class="controls">
+                    <button class="control-btn" style="background:#333;border:1px solid #4fc3f7;color:#4fc3f7" onclick="toggleMoveButtons()" id="toggle-moves-btn">Moves ▼</button>
+                    <button class="control-btn" style="background:#e94560" onclick="scrambleCube()" aria-label="Scramble cube">Scramble</button>
+                    <button class="control-btn" style="background:#2ecc71" onclick="resetCube()" aria-label="Reset cube">Reset</button>
+                </div>
+                <div class="controls move-buttons" id="move-buttons" style="bottom: 60px; display: none;">
+                    <button class="control-btn" onclick="doMove('R')">R</button>
+                    <button class="control-btn" onclick="doMove('Ri')">R'</button>
+                    <button class="control-btn" onclick="doMove('U')">U</button>
+                    <button class="control-btn" onclick="doMove('Ui')">U'</button>
+                    <button class="control-btn" onclick="doMove('F')">F</button>
+                    <button class="control-btn" onclick="doMove('Fi')">F'</button>
+                    <button class="control-btn" onclick="doMove('L')">L</button>
+                    <button class="control-btn" onclick="doMove('Li')">L'</button>
+                    <button class="control-btn" onclick="doMove('D')">D</button>
+                    <button class="control-btn" onclick="doMove('Di')">D'</button>
+                    <button class="control-btn" onclick="doMove('B')">B</button>
+                    <button class="control-btn" onclick="doMove('Bi')">B'</button>
+                    <button class="control-btn" onclick="doMove('r')">r</button>
+                    <button class="control-btn" onclick="doMove('ri')">r'</button>
+                    <button class="control-btn" onclick="doMove('u')">u</button>
+                    <button class="control-btn" onclick="doMove('ui')">u'</button>
+                    <button class="control-btn" onclick="doMove('l')">l</button>
+                    <button class="control-btn" onclick="doMove('li')">l'</button>
+                    <button class="control-btn" onclick="doMove('x')">x</button>
+                    <button class="control-btn" onclick="doMove('xi')">x'</button>
+                    <button class="control-btn" onclick="doMove('y')">y</button>
+                    <button class="control-btn" onclick="doMove('yi')">y'</button>
+                    <button class="control-btn" onclick="doMove('z')">z</button>
+                    <button class="control-btn" onclick="doMove('zi')">z'</button>
+                </div>
+            </div>
+
+            <div class="algorithm-section" id="algorithm-section">
+                <!-- Algorithms rendered by JS -->
+            </div>
+        </div>
+    </div>
+
+    <div id="about-modal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); z-index:1000; justify-content:center; align-items:center;">
+        <div style="background:#16213e; border:1px solid #4fc3f7; border-radius:12px; padding:30px; max-width:600px; width:90%; max-height:80vh; overflow-y:auto;">
+            <h2 style="color:#e94560; margin-bottom:15px;">About This App</h2>
+            <p style="color:#ccc; line-height:1.7; margin-bottom:15px;">
+                This is an interactive 3D visualization and algorithm reference for <strong>one-handed (OH) 3x3 Rubik's Cube solving</strong>. It includes algorithms for F2L, OLL, PLL, COLL, and ZBLL — all optimized for one-handed execution using primarily R, U, and F moves.
+            </p>
+            <h3 style="color:#4fc3f7; margin-bottom:10px;">Algorithm Sources</h3>
+            <ul style="color:#aaa; line-height:2; list-style:none; padding:0;">
+                <li>&#x2022; <a href="https://www.speedsolving.com/wiki/index.php/First_Two_Layers" target="_blank" style="color:#4fc3f7;">Speedsolving.com Wiki - F2L Algorithms</a></li>
+                <li>&#x2022; <a href="https://cubeskills.com/uploads/pdf/tutorials/onehanded-oll-algorithms.pdf" target="_blank" style="color:#4fc3f7;">CubeSkills - OH OLL Algorithms (PDF)</a></li>
+                <li>&#x2022; <a href="https://www.cubeskills.com/uploads/pdf/tutorials/onehanded-pll-algorithms.pdf" target="_blank" style="color:#4fc3f7;">CubeSkills - OH PLL Algorithms (PDF)</a></li>
+                <li>&#x2022; <a href="https://www.cubeskills.com/uploads/pdf/tutorials/onehanded-coll-algorithms.pdf" target="_blank" style="color:#4fc3f7;">CubeSkills - OH COLL Algorithms (PDF)</a></li>
+                <li>&#x2022; <a href="https://cubingapp.com/algorithms/ZBLL" target="_blank" style="color:#4fc3f7;">CubingApp - ZBLL Algorithms</a></li>
+            </ul>
+            <p style="color:#888; margin-top:15px; font-size:0.85rem;">
+                One-handed solving uses the same CFOP method as two-handed, but algorithms are chosen for ergonomics with a single hand. Common techniques include table-assisted solving and z-rotation for better grip.
+            </p>
+            <div style="text-align:center; margin-top:20px;">
+                <button onclick="document.getElementById('about-modal').style.display='none'" style="padding:10px 30px; background:#e94560; color:#fff; border:none; border-radius:6px; cursor:pointer; font-size:0.9rem;">Close</button>
+            </div>
+        </div>
+    </div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
+    <script src="app.js"></script>
+    <script src="json/f2l.json.js"></script>
+    <script src="json/oll.json.js"></script>
+    <script src="json/pll.json.js"></script>
+    <script src="json/coll.json.js"></script>
+    <script src="json/zbll.json.js"></script>
+    <script>
+    // OH_ALGORITHMS is assembled from the .json.js files above
+    document.addEventListener('DOMContentLoaded', () => {
+        init();
+        setupNavigation();
+        renderAlgorithms('f2l');
+    });
+    </script>
+</body>
+</html>

json/coll.json.js

@@ -0,0 +1,424 @@
+OH_ALGORITHMS.coll = {
+  "title": "OH COLL - Corners of Last Layer",
+  "description": "COLL algorithms from CubeSkills OH COLL PDF by Feliks Zemdegs. Solves corner orientation and permutation while edges are oriented.",
+  "cases": [
+    {
+      "name": "S 1",
+      "case": "Sune",
+      "algs": [
+        {
+          "notation": "R U R' U R U2 R'",
+          "moves": 7,
+          "note": "Sune"
+        }
+      ]
+    },
+    {
+      "name": "S 2",
+      "case": "Sune",
+      "algs": [
+        {
+          "notation": "R' U2 L U' R U L' U R' U R",
+          "moves": 11,
+          "note": "COLL"
+        }
+      ]
+    },
+    {
+      "name": "S 3",
+      "case": "Sune",
+      "algs": [
+        {
+          "notation": "R U' L' U R' U' L",
+          "moves": 7,
+          "note": "COLL"
+        }
+      ]
+    },
+    {
+      "name": "S 4",
+      "case": "Sune",
+      "algs": [
+        {
+          "notation": "L' R U R' U' L U2 R U2 R'",
+          "moves": 10,
+          "note": "COLL"
+        }
+      ]
+    },
+    {
+      "name": "S 5",
+      "case": "Sune",
+      "algs": [
+        {
+          "notation": "L' U2 L U2 R U' L' U L R'",
+          "moves": 10,
+          "note": "COLL"
+        }
+      ]
+    },
+    {
+      "name": "S 6",
+      "case": "Sune",
+      "algs": [
+        {
+          "notation": "y' R U R' U R U' R D R' U' R D' R2",
+          "moves": 13,
+          "note": "COLL"
+        }
+      ]
+    },
+    {
+      "name": "AS 1",
+      "case": "Antisune",
+      "algs": [
+        {
+          "notation": "y R U2 R' U' R U' R'",
+          "moves": 7,
+          "note": "Antisune"
+        }
+      ]
+    },
+    {
+      "name": "AS 2",
+      "case": "Antisune",
+      "algs": [
+        {
+          "notation": "y2 R' U' R U' L U' R' U L' U2 R",
+          "moves": 11,
+          "note": "COLL"
+        }
+      ]
+    },
+    {
+      "name": "AS 3",
+      "case": "Antisune",
+      "algs": [
+        {
+          "notation": "y2 L' U R U' L U R'",
+          "moves": 7,
+          "note": "COLL"
+        }
+      ]
+    },
+    {
+      "name": "AS 4",
+      "case": "Antisune",
+      "algs": [
+        {
+          "notation": "y2 R L' U' L U R' U2 L' U2 L",
+          "moves": 10,
+          "note": "COLL"
+        }
+      ]
+    },
+    {
+      "name": "AS 5",
+      "case": "Antisune",
+      "algs": [
+        {
+          "notation": "y2 R U2 R' U2 L' U R U' R' L",
+          "moves": 10,
+          "note": "COLL"
+        }
+      ]
+    },
+    {
+      "name": "AS 6",
+      "case": "Antisune",
+      "algs": [
+        {
+          "notation": "y R' U' R U' R' U R' D' R U R' D R2",
+          "moves": 13,
+          "note": "COLL"
+        }
+      ]
+    },
+    {
+      "name": "L 1",
+      "case": "L",
+      "algs": [
+        {
+          "notation": "y R U2 R' U' R U R' U' R U R' U' R U' R'",
+          "moves": 15,
+          "note": "COLL"
+        }
+      ]
+    },
+    {
+      "name": "L 2",
+      "case": "L",
+      "algs": [
+        {
+          "notation": "y2 R U2 L' U L U2 R' L' U L",
+          "moves": 10,
+          "note": "COLL"
+        }
+      ]
+    },
+    {
+      "name": "L 3",
+      "case": "L",
+      "algs": [
+        {
+          "notation": "y' R U2 R D R' U2 R D' R2",
+          "moves": 9,
+          "note": "COLL"
+        }
+      ]
+    },
+    {
+      "name": "L 4",
+      "case": "L",
+      "algs": [
+        {
+          "notation": "y2 R' U2 R' D' R U2 R' D R2",
+          "moves": 9,
+          "note": "COLL"
+        }
+      ]
+    },
+    {
+      "name": "L 5",
+      "case": "L",
+      "algs": [
+        {
+          "notation": "y' L' R U R' U' L U R U' R'",
+          "moves": 10,
+          "note": "COLL"
+        }
+      ]
+    },
+    {
+      "name": "L 6",
+      "case": "L",
+      "algs": [
+        {
+          "notation": "y2 x' U' R U L' U' R' U r",
+          "moves": 8,
+          "note": "COLL"
+        }
+      ]
+    },
+    {
+      "name": "T 1",
+      "case": "T",
+      "algs": [
+        {
+          "notation": "R U2 R' U' R U' R2 U2 R U R' U R",
+          "moves": 13,
+          "note": "COLL"
+        }
+      ]
+    },
+    {
+      "name": "T 2",
+      "case": "T",
+      "algs": [
+        {
+          "notation": "y2 F R U R' U' R U' R' U' R U R' F'",
+          "moves": 13,
+          "note": "COLL"
+        }
+      ]
+    },
+    {
+      "name": "T 3",
+      "case": "T",
+      "algs": [
+        {
+          "notation": "R' U R U2 L' R' U R U' L",
+          "moves": 10,
+          "note": "COLL"
+        }
+      ]
+    },
+    {
+      "name": "T 4",
+      "case": "T",
+      "algs": [
+        {
+          "notation": "y2 R U' R2 D' r U2 r' D R2 U R'",
+          "moves": 11,
+          "note": "COLL"
+        }
+      ]
+    },
+    {
+      "name": "T 5",
+      "case": "T",
+      "algs": [
+        {
+          "notation": "y' r' U' R U L U' R' U x",
+          "moves": 9,
+          "note": "COLL"
+        }
+      ]
+    },
+    {
+      "name": "T 6",
+      "case": "T",
+      "algs": [
+        {
+          "notation": "y' r U R' U' L' U R U' x'",
+          "moves": 9,
+          "note": "COLL"
+        }
+      ]
+    },
+    {
+      "name": "U 1",
+      "case": "U",
+      "algs": [
+        {
+          "notation": "y2 R U R' U R U2 R2 U' R U' R' U2 R",
+          "moves": 13,
+          "note": "COLL"
+        }
+      ]
+    },
+    {
+      "name": "U 2",
+      "case": "U",
+      "algs": [
+        {
+          "notation": "F R U' R' U R U R' U R U' R' F'",
+          "moves": 13,
+          "note": "COLL"
+        }
+      ]
+    },
+    {
+      "name": "U 3",
+      "case": "U",
+      "algs": [
+        {
+          "notation": "y2 R2 D R' U2 R D' R' U2 R'",
+          "moves": 9,
+          "note": "COLL"
+        }
+      ]
+    },
+    {
+      "name": "U 4",
+      "case": "U",
+      "algs": [
+        {
+          "notation": "R2 D' R U2 R' D R U2 R",
+          "moves": 9,
+          "note": "COLL"
+        }
+      ]
+    },
+    {
+      "name": "U 5",
+      "case": "U",
+      "algs": [
+        {
+          "notation": "y2 R' U R U' x' U L' U L U2 R U' R' U x",
+          "moves": 13,
+          "note": "COLL"
+        }
+      ]
+    },
+    {
+      "name": "U 6",
+      "case": "U",
+      "algs": [
+        {
+          "notation": "R' U2 R F U' R' U' R U F'",
+          "moves": 10,
+          "note": "COLL"
+        }
+      ]
+    },
+    {
+      "name": "Pi 1",
+      "case": "Pi",
+      "algs": [
+        {
+          "notation": "R U2 R2 U' R2 U' R2 U2 R",
+          "moves": 9,
+          "note": "COLL"
+        }
+      ]
+    },
+    {
+      "name": "Pi 2",
+      "case": "Pi",
+      "algs": [
+        {
+          "notation": "R U' R' U2 L' U R U' L R' U2 R U R'",
+          "moves": 14,
+          "note": "COLL"
+        }
+      ]
+    },
+    {
+      "name": "Pi 3",
+      "case": "Pi",
+      "algs": [
+        {
+          "notation": "y L' U R U' L U R' R' U' R U' R' U2 R",
+          "moves": 14,
+          "note": "COLL"
+        }
+      ]
+    },
+    {
+      "name": "Pi 4",
+      "case": "Pi",
+      "algs": [
+        {
+          "notation": "y' R' U2 R U R' U R R U' L' U R' U' L",
+          "moves": 14,
+          "note": "COLL"
+        }
+      ]
+    },
+    {
+      "name": "H 1",
+      "case": "H",
+      "algs": [
+        {
+          "notation": "R U R' U R U' R' U R U2 R'",
+          "moves": 11,
+          "note": "COLL"
+        }
+      ]
+    },
+    {
+      "name": "H 2",
+      "case": "H",
+      "algs": [
+        {
+          "notation": "y F R U R' U' R U R' U' R U R' U' F'",
+          "moves": 14,
+          "note": "COLL"
+        }
+      ]
+    },
+    {
+      "name": "H 3",
+      "case": "H",
+      "algs": [
+        {
+          "notation": "F R U' R' U R U2 R' U' R U R' U' F'",
+          "moves": 14,
+          "note": "COLL"
+        }
+      ]
+    },
+    {
+      "name": "H 4",
+      "case": "H",
+      "algs": [
+        {
+          "notation": "R U R' U R U L' U R' U' L",
+          "moves": 11,
+          "note": "COLL"
+        }
+      ]
+    }
+  ]
+};

json/f2l.json.js

@@ -0,0 +1,409 @@
+const OH_ALGORITHMS = {};
+OH_ALGORITHMS.f2l = {
+  "title": "F2L - First Two Layers",
+  "description": "F2L algorithms from Speedsolving.com Wiki. 42 cases (including solved case). Multiple algorithms per case - select your preferred one.",
+  "cases": [
+    {
+      "name": "F2L 1",
+      "case": "Basic Insert",
+      "algs": [
+        { "notation": "U (R U' R')", "moves": 4, "note": "Main" },
+        { "notation": "R' F R F'", "moves": 4, "note": "Alt" },
+        { "notation": "U2 (R U2 R')", "moves": 4, "note": "Alt 2" }
+      ]
+    },
+    {
+      "name": "F2L 2",
+      "case": "Basic Insert",
+      "algs": [
+        { "notation": "y' U' (R' U R)", "moves": 4, "note": "Main" },
+        { "notation": "U' (F' U F)", "moves": 4, "note": "Alt" },
+        { "notation": "F R' F' R", "moves": 4, "note": "Alt 2" },
+        { "notation": "y U' (L' U L)", "moves": 4, "note": "Alt 3" },
+        { "notation": "d' L' U L", "moves": 4, "note": "Alt 4" }
+      ]
+    },
+    {
+      "name": "F2L 3",
+      "case": "Basic Insert",
+      "algs": [
+        { "notation": "F' U' F", "moves": 3, "note": "Main" },
+        { "notation": "y' (R' U' R)", "moves": 3, "note": "Alt" },
+        { "notation": "y (L' U' L)", "moves": 3, "note": "Alt 2" }
+      ]
+    },
+    {
+      "name": "F2L 4",
+      "case": "Basic Insert",
+      "algs": [
+        { "notation": "(R U R')", "moves": 3, "note": "Main" },
+        { "notation": "y F U F'", "moves": 3, "note": "Alt" },
+        { "notation": "y' f R f'", "moves": 3, "note": "Alt 2" }
+      ]
+    },
+    {
+      "name": "F2L 5",
+      "case": "Reposition Edge",
+      "algs": [
+        { "notation": "(U' R U R') U2 (R U' R')", "moves": 8, "note": "Main" },
+        { "notation": "(U' R U R') U (R' F R F')", "moves": 9, "note": "Alt" },
+        { "notation": "U' (R U R') U' R U2 R'", "moves": 8, "note": "Alt 2" }
+      ]
+    },
+    {
+      "name": "F2L 6",
+      "case": "Reposition Edge",
+      "algs": [
+        { "notation": "d (R' U' R) U2' (R' U R)", "moves": 8, "note": "Main" },
+        { "notation": "y' (U R' U' R) U2 (R' U R)", "moves": 8, "note": "Alt" },
+        { "notation": "U' (r U' R' U) (R U r')", "moves": 7, "note": "Alt 2" },
+        { "notation": "y F2 (R U R' U') F2", "moves": 6, "note": "Alt 3" }
+      ]
+    },
+    {
+      "name": "F2L 7",
+      "case": "Reposition Edge",
+      "algs": [
+        { "notation": "U' (R U2' R') U2 (R U' R')", "moves": 8, "note": "Main" },
+        { "notation": "(U' R U2 R') (U' R U2 R')", "moves": 8, "note": "Alt" }
+      ]
+    },
+    {
+      "name": "F2L 8",
+      "case": "Reposition Edge",
+      "algs": [
+        { "notation": "d (R' U2 R) U2' (R' U R)", "moves": 8, "note": "Main" },
+        { "notation": "y' U (R' U2 R) U2 (R' U R)", "moves": 8, "note": "Alt" },
+        { "notation": "U (R' F R F') (R' F R F') (R U' R')", "moves": 11, "note": "Alt 2" },
+        { "notation": "(r' U2) (R2 U R2 U r)", "moves": 7, "note": "Alt 3" }
+      ]
+    },
+    {
+      "name": "F2L 9",
+      "case": "Reposition Edge and Flip Corner",
+      "algs": [
+        { "notation": "U' R U' R' U (F' U' F)", "moves": 8, "note": "Main" },
+        { "notation": "U' R U' R' d R' U' R", "moves": 8, "note": "Alt" },
+        { "notation": "d (R' U' R U') (R' U' R)", "moves": 8, "note": "Alt 2" },
+        { "notation": "F (R U R' U') F' R U' R'", "moves": 9, "note": "Alt 3" },
+        { "notation": "y F2 (U R U' R') F2", "moves": 6, "note": "Alt 4" }
+      ]
+    },
+    {
+      "name": "F2L 10",
+      "case": "Reposition Edge and Flip Corner",
+      "algs": [
+        { "notation": "U' (R U R' U)(R U R')", "moves": 8, "note": "Main" },
+        { "notation": "R d' R U R' U2 F'", "moves": 7, "note": "Alt" },
+        { "notation": "U F' U F U' R U R'", "moves": 8, "note": "Alt 2" },
+        { "notation": "d R' U R d' R U R'", "moves": 8, "note": "Alt 3" }
+      ]
+    },
+    {
+      "name": "F2L 11",
+      "case": "Reposition Edge and Flip Corner",
+      "algs": [
+        { "notation": "U' (R U2' R') U (F' U' F)", "moves": 8, "note": "Main" },
+        { "notation": "U' (R U2' R') d (R' U' R)", "moves": 8, "note": "Alt" },
+        { "notation": "y' R U2 R2 U' R2 U' R'", "moves": 7, "note": "Alt 2" }
+      ]
+    },
+    {
+      "name": "F2L 12",
+      "case": "Reposition Edge and Flip Corner",
+      "algs": [
+        { "notation": "R U' R' U R U' R' U2 R U' R'", "moves": 11, "note": "Main" },
+        { "notation": "R' U2 R2 U R2 U R", "moves": 7, "note": "Alt" },
+        { "notation": "(U R U' R') U' (R U R' U') (R U R')", "moves": 12, "note": "Alt 2" },
+        { "notation": "R U R' U (R' F R F') (R U R')", "moves": 11, "note": "Alt 3" }
+      ]
+    },
+    {
+      "name": "F2L 13",
+      "case": "Reposition Edge and Flip Corner",
+      "algs": [
+        { "notation": "d (R' U R U') (R' U' R)", "moves": 8, "note": "Main" },
+        { "notation": "y' U (R' U R U') (R' U' R)", "moves": 8, "note": "Alt" },
+        { "notation": "(R U' R') U (R' F R F') (R U' R')", "moves": 11, "note": "Alt 2" }
+      ]
+    },
+    {
+      "name": "F2L 14",
+      "case": "Reposition Edge and Flip Corner",
+      "algs": [
+        { "notation": "U' (R U' R' U) (R U R')", "moves": 8, "note": "Main" }
+      ]
+    },
+    {
+      "name": "F2L 15",
+      "case": "Split Pair by Going Over",
+      "algs": [
+        { "notation": "(F' U F) U2 (R U R')", "moves": 7, "note": "Main" },
+        { "notation": "U (R' F R F') U (R U R')", "moves": 9, "note": "Alt" },
+        { "notation": "R U2 R' U R U R' U R U' R'", "moves": 11, "note": "Alt 2" },
+        { "notation": "R U R' U2 R U' R' U R U' R'", "moves": 11, "note": "Alt 3" },
+        { "notation": "R U' R U2' R2' U' R2 U' R2'", "moves": 9, "note": "Alt 4" }
+      ]
+    },
+    {
+      "name": "F2L 16",
+      "case": "Split Pair by Going Over",
+      "algs": [
+        { "notation": "(R U' R') U2 (F' U' F)", "moves": 7, "note": "Main" },
+        { "notation": "(R U' R' U) d (R' U' R)", "moves": 8, "note": "Alt" },
+        { "notation": "U R (F R U R' U' F') R'", "moves": 9, "note": "Alt 2" }
+      ]
+    },
+    {
+      "name": "F2L 17",
+      "case": "Split Pair by Going Over",
+      "algs": [
+        { "notation": "(R U2 R') U' (R U R')", "moves": 7, "note": "Main" }
+      ]
+    },
+    {
+      "name": "F2L 18",
+      "case": "Split Pair by Going Over",
+      "algs": [
+        { "notation": "y' (R' U2 R) U (R' U' R)", "moves": 7, "note": "Main" },
+        { "notation": "y (L' U2 L) U (L' U' L)", "moves": 7, "note": "Alt" },
+        { "notation": "(R U R' U') (R U R' U') F R' F' R", "moves": 12, "note": "Alt 2" },
+        { "notation": "(R' F R F') (R U' R' U) (R U' R')", "moves": 11, "note": "Alt 3" }
+      ]
+    },
+    {
+      "name": "F2L 19",
+      "case": "Pair Made on Side",
+      "algs": [
+        { "notation": "U (R U2 R') U (R U' R')", "moves": 8, "note": "Main" },
+        { "notation": "(R U' R' U) (R U' R' U) R U R'", "moves": 11, "note": "Alt" }
+      ]
+    },
+    {
+      "name": "F2L 20",
+      "case": "Pair Made on Side",
+      "algs": [
+        { "notation": "y' U' (R' U2 R) U' (R' U R)", "moves": 8, "note": "Main" },
+        { "notation": "U' (R U' R2' F R F') (R U' R')", "moves": 10, "note": "Alt" },
+        { "notation": "y' (R' U R U') (R' U R U') R' U' R", "moves": 11, "note": "Alt 2" }
+      ]
+    },
+    {
+      "name": "F2L 21",
+      "case": "Pair Made on Side",
+      "algs": [
+        { "notation": "(R U' R') U2 (R U R')", "moves": 7, "note": "Main" },
+        { "notation": "U2 (R U R' U)(R U' R')", "moves": 8, "note": "Alt" }
+      ]
+    },
+    {
+      "name": "F2L 22",
+      "case": "Pair Made on Side",
+      "algs": [
+        { "notation": "y' (R' U R) U2 (R' U' R)", "moves": 7, "note": "Main" },
+        { "notation": "y' U2 (R' U' R U') (R' U R)", "moves": 8, "note": "Alt" },
+        { "notation": "r U' r' U2 r U r'", "moves": 7, "note": "Alt 2" },
+        { "notation": "U (F R U R' U' F') R U R' U2'", "moves": 11, "note": "Alt 3" }
+      ]
+    },
+    {
+      "name": "F2L 23",
+      "case": "Weird",
+      "algs": [
+        { "notation": "U2 R2 U2 (R' U' R U') R2", "moves": 8, "note": "Main" },
+        { "notation": "U (F R' F' R) U (R U R')", "moves": 8, "note": "Alt" },
+        { "notation": "U R U' R' U' R U' R' U R U' R'", "moves": 12, "note": "Alt 2" },
+        { "notation": "(R U R' U') U' (R U R' U')(R U R')", "moves": 12, "note": "Alt 3" },
+        { "notation": "R U' R' U' (R U R') U2 (R U R')", "moves": 11, "note": "Alt 4" },
+        { "notation": "R2 U R' U R U2 R' U' R'", "moves": 9, "note": "Alt 5" }
+      ]
+    },
+    {
+      "name": "F2L 24",
+      "case": "Weird",
+      "algs": [
+        { "notation": "F U (R U' R' F')(R U' R')", "moves": 9, "note": "Main" },
+        { "notation": "y' (R' U' R U) U (R' U' R U)(R' U' R)", "moves": 12, "note": "Alt" },
+        { "notation": "y' U2 R2 U2 (R U R' U) R2", "moves": 8, "note": "Alt 2" },
+        { "notation": "U' (R U) (R2' F R F') (R U' R')", "moves": 10, "note": "Alt 3" },
+        { "notation": "(R U R' U) (R U R' U') (F R' F' R)", "moves": 12, "note": "Alt 4" },
+        { "notation": "(R U R' U) (R U2 R') F' U2 F", "moves": 11, "note": "Alt 5" }
+      ]
+    },
+    {
+      "name": "F2L 25",
+      "case": "Corner in Place, Edge in U Face",
+      "algs": [
+        { "notation": "U' (R' F R F') (R U R')", "moves": 8, "note": "Main" },
+        { "notation": "R' U' R' U' R' U R U R", "moves": 9, "note": "Alt" },
+        { "notation": "U' (F' U F) U (R U' R')", "moves": 7, "note": "Alt 2" },
+        { "notation": "R' F' R U R U' R' F", "moves": 8, "note": "Alt 3" },
+        { "notation": "(U') F' R U R' U' R' F R", "moves": 9, "note": "Alt 4" },
+        { "notation": "(R U' R' U') (R U' R' U) (R U R')", "moves": 11, "note": "Alt 5" }
+      ]
+    },
+    {
+      "name": "F2L 26",
+      "case": "Corner in Place, Edge in U Face",
+      "algs": [
+        { "notation": "U (R U' R') (F R' F' R)", "moves": 8, "note": "Main" },
+        { "notation": "y' R U R U R U' R' U' R'", "moves": 9, "note": "Alt" },
+        { "notation": "U (R U' R') U' (F' U F)", "moves": 8, "note": "Alt 2" },
+        { "notation": "r U r' U2 r U r' U2 r U' r'", "moves": 11, "note": "Alt 3" }
+      ]
+    },
+    {
+      "name": "F2L 27",
+      "case": "Corner in Place, Edge in U Face",
+      "algs": [
+        { "notation": "(R U' R' U)(R U' R')", "moves": 7, "note": "Main" },
+        { "notation": "(R U' R2)(F R F')", "moves": 6, "note": "Alt" }
+      ]
+    },
+    {
+      "name": "F2L 28",
+      "case": "Corner in Place, Edge in U Face",
+      "algs": [
+        { "notation": "(R U R' U') F R' F' R", "moves": 8, "note": "Main" },
+        { "notation": "(R U R') d (R' U2 R)", "moves": 7, "note": "Alt" },
+        { "notation": "y (L' U L U') (L' U L)", "moves": 7, "note": "Alt 2" },
+        { "notation": "y' (R' U R U')(R' U R)", "moves": 7, "note": "Alt 3" },
+        { "notation": "(R U R') U (F' U2 F)", "moves": 7, "note": "Alt 4" }
+      ]
+    },
+    {
+      "name": "F2L 29",
+      "case": "Corner in Place, Edge in U Face",
+      "algs": [
+        { "notation": "y' (R' U' R U)(R' U' R)", "moves": 7, "note": "Main" },
+        { "notation": "U2 (R U' R') y' (R' U' R)", "moves": 7, "note": "Alt" },
+        { "notation": "(R' F R F') (R' F R F')", "moves": 8, "note": "Alt 2" },
+        { "notation": "(R' F R F') (U R U' R')", "moves": 8, "note": "Alt 3" }
+      ]
+    },
+    {
+      "name": "F2L 30",
+      "case": "Corner in Place, Edge in U Face",
+      "algs": [
+        { "notation": "(R U R' U')(R U R')", "moves": 7, "note": "Main" },
+        { "notation": "U2 (F' U F)(R U R')", "moves": 7, "note": "Alt" },
+        { "notation": "U' (R U2 R') U2 (R U R')", "moves": 8, "note": "Alt 2" }
+      ]
+    },
+    {
+      "name": "F2L 31",
+      "case": "Edge in Place, Corner in U Face",
+      "algs": [
+        { "notation": "(R U' R') d (R' U R)", "moves": 7, "note": "Main" },
+        { "notation": "(R U' R' U)(F' U F)", "moves": 7, "note": "Alt" },
+        { "notation": "U' (R' F R F') (R U' R')", "moves": 8, "note": "Alt 2" },
+        { "notation": "R U2 R' U' F R' F' R", "moves": 8, "note": "Alt 3" }
+      ]
+    },
+    {
+      "name": "F2L 32",
+      "case": "Edge in Place, Corner in U Face",
+      "algs": [
+        { "notation": "(R U R' U') (R U R' U') (R U R')", "moves": 11, "note": "Main" },
+        { "notation": "(U R U' R') (U R U' R') (U R U' R')", "moves": 12, "note": "Alt" },
+        { "notation": "U' (R U R' U') (R U R' U) (R U' R')", "moves": 12, "note": "Alt 2" }
+      ]
+    },
+    {
+      "name": "F2L 33",
+      "case": "Edge in Place, Corner in U Face",
+      "algs": [
+        { "notation": "U' (R U' R') U2' (R U' R')", "moves": 8, "note": "Main" },
+        { "notation": "(U' R U' R') U2 (R U' R')", "moves": 8, "note": "Alt" },
+        { "notation": "y U' (L' U' L) U2 (L' U' L)", "moves": 8, "note": "Alt 2" }
+      ]
+    },
+    {
+      "name": "F2L 34",
+      "case": "Edge in Place, Corner in U Face",
+      "algs": [
+        { "notation": "U (F' U F) U2 (F' U F)", "moves": 8, "note": "Main" },
+        { "notation": "U' (R U2' R') U (R U R')", "moves": 8, "note": "Alt" },
+        { "notation": "U (R U R') U2 (R U R')", "moves": 8, "note": "Alt 2" },
+        { "notation": "d (R' U R) U2 (R' U R)", "moves": 8, "note": "Alt 3" },
+        { "notation": "y (U L' U L) U2 (L' U L)", "moves": 8, "note": "Alt 4" }
+      ]
+    },
+    {
+      "name": "F2L 35",
+      "case": "Edge in Place, Corner in U Face",
+      "algs": [
+        { "notation": "U' R U R' U (F' U' F)", "moves": 8, "note": "Main" },
+        { "notation": "(U' R U R') d (R' U' R)", "moves": 8, "note": "Alt" },
+        { "notation": "U2 (R U' R') U' (F' U' F)", "moves": 8, "note": "Alt 2" }
+      ]
+    },
+    {
+      "name": "F2L 36",
+      "case": "Edge in Place, Corner in U Face",
+      "algs": [
+        { "notation": "U F' U' F U' (R U R')", "moves": 8, "note": "Main" },
+        { "notation": "U2 (R' F R F') U2 (R U R')", "moves": 9, "note": "Alt" },
+        { "notation": "y' U (R' U' R U') y (R U R')", "moves": 8, "note": "Alt 2" }
+      ]
+    },
+    {
+      "name": "F2L 37",
+      "case": "Edge and Corner in Place",
+      "algs": [
+        { "notation": "", "moves": 0, "note": "Solved" }
+      ]
+    },
+    {
+      "name": "F2L 38",
+      "case": "Edge and Corner in Place",
+      "algs": [
+        { "notation": "(R' F R F') (R U' R' U) (R U' R' U2) (R U' R')", "moves": 15, "note": "Main" },
+        { "notation": "(R U' R') d (R' U2 R) U2' (R' U R)", "moves": 10, "note": "Alt" },
+        { "notation": "(R U R') U2 (R U2 R') d (R' U' R)", "moves": 11, "note": "Alt 2" },
+        { "notation": "(R2 U2) (F R2 F') (U2 R' U R')", "moves": 9, "note": "Alt 3" },
+        { "notation": "(R U R' U')(R U2 R' d)(R' U' R U' R' U R)", "moves": 15, "note": "Alt 4" }
+      ]
+    },
+    {
+      "name": "F2L 39",
+      "case": "Edge and Corner in Place",
+      "algs": [
+        { "notation": "(R U' R') U' (R U R') U2 (R U' R')", "moves": 11, "note": "Main" },
+        { "notation": "y' (R' U' R) U2 (R' U R U') (R' U' R)", "moves": 11, "note": "Alt" },
+        { "notation": "(R U R' U') (R U2 R') U' (R U R')", "moves": 11, "note": "Alt 2" }
+      ]
+    },
+    {
+      "name": "F2L 40",
+      "case": "Edge and Corner in Place",
+      "algs": [
+        { "notation": "(R U' R' U)(R U2' R') U (R U' R')", "moves": 11, "note": "Main" },
+        { "notation": "(R U R') U2 (R U' R' U)(R U R')", "moves": 11, "note": "Alt" },
+        { "notation": "(R U2) (R U R' U) (R U2 R2')", "moves": 9, "note": "Alt 2" },
+        { "notation": "y' R2 U2 R U R' U R U2 R", "moves": 9, "note": "Alt 3" }
+      ]
+    },
+    {
+      "name": "F2L 41",
+      "case": "Edge and Corner in Place",
+      "algs": [
+        { "notation": "(r U' r') U2 (r U r') (R U R')", "moves": 11, "note": "Main" },
+        { "notation": "(R U' R') d (R' U' R U') (R' U' R)", "moves": 11, "note": "Alt" },
+        { "notation": "R U' R' U' R U' R' d R' U' R", "moves": 11, "note": "Alt 2" },
+        { "notation": "R (F U R U' R' F') U' R'", "moves": 9, "note": "Alt 3" }
+      ]
+    },
+    {
+      "name": "F2L 42",
+      "case": "Edge and Corner in Place",
+      "algs": [
+        { "notation": "(R U' R') (r U' r') U2 (r U r')", "moves": 11, "note": "Main" },
+        { "notation": "(R U' R' U) d (R' U' R U') (R' U R)", "moves": 12, "note": "Alt" },
+        { "notation": "(R U' R' U2) y' (R' U' R U' R' U R)", "moves": 12, "note": "Alt 2" },
+        { "notation": "(R U R' U') (R U' R') U2 (F' U' F)", "moves": 11, "note": "Alt 3" },
+        { "notation": "R U (F R U R' U' F') R'", "moves": 9, "note": "Alt 4" }
+      ]
+    }
+  ]
+};

json/oll.json.js

@@ -0,0 +1,633 @@
+OH_ALGORITHMS.oll = {
+  "title": "OH OLL - Orientation of Last Layer",
+  "description": "OH OLL algorithms from CubeSkills by Feliks Zemdegs. 57 cases.",
+  "cases": [
+    {
+      "name": "OLL 1",
+      "case": "No Edges",
+      "algs": [
+        {
+          "notation": "y R U' R2 D' r U' r' D R2 U R'",
+          "moves": 12,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 2",
+      "case": "No Edges",
+      "algs": [
+        {
+          "notation": "y r U r' U2 R U2 R' U2 r U' r'",
+          "moves": 12,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 3",
+      "case": "No Edges",
+      "algs": [
+        {
+          "notation": "y r' R2 U R' U r U2 r' U r R'",
+          "moves": 12,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 4",
+      "case": "No Edges",
+      "algs": [
+        {
+          "notation": "y r' R U' r U2 r' U' R U' R2 r",
+          "moves": 12,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 5",
+      "case": "Square",
+      "algs": [
+        {
+          "notation": "r' U2 R U R' U r",
+          "moves": 7,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 6",
+      "case": "Square",
+      "algs": [
+        {
+          "notation": "r U2 R' U' R U' r'",
+          "moves": 7,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 7",
+      "case": "Lightning Bolt",
+      "algs": [
+        {
+          "notation": "r U R' U R U2 r'",
+          "moves": 7,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 8",
+      "case": "Lightning Bolt",
+      "algs": [
+        {
+          "notation": "r' U' R U' R' U2 r",
+          "moves": 7,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 9",
+      "case": "Fish",
+      "algs": [
+        {
+          "notation": "R U R' U' R' F R2 U R' U' F'",
+          "moves": 11,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 10",
+      "case": "Fish",
+      "algs": [
+        {
+          "notation": "y r R2 U2 R U R' U R U r' R",
+          "moves": 12,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 11",
+      "case": "Lightning Bolt",
+      "algs": [
+        {
+          "notation": "r' R2 U R' U R U2 R' U r R'",
+          "moves": 11,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 12",
+      "case": "Lightning Bolt",
+      "algs": [
+        {
+          "notation": "r R2 U' R U' R' U2 R U' r' R",
+          "moves": 11,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 13",
+      "case": "Knight Move",
+      "algs": [
+        {
+          "notation": "F U R U2 R' U' R U R' F'",
+          "moves": 10,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 14",
+      "case": "Knight Move",
+      "algs": [
+        {
+          "notation": "y2 r' U r U r' U' r y R U' R'",
+          "moves": 12,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 15",
+      "case": "Knight Move",
+      "algs": [
+        {
+          "notation": "r' U' r R' U' R U r' U r",
+          "moves": 10,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 16",
+      "case": "Knight Move",
+      "algs": [
+        {
+          "notation": "r U r' R U R' U' r U' r'",
+          "moves": 10,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 17",
+      "case": "No Edges",
+      "algs": [
+        {
+          "notation": "y F R' F' R U2 R U' y R U' R' F'",
+          "moves": 13,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 18",
+      "case": "No Edges",
+      "algs": [
+        {
+          "notation": "r U R' U R U2 r' r' U' R U' R' U2 r",
+          "moves": 14,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 19",
+      "case": "No Edges",
+      "algs": [
+        {
+          "notation": "r' U2 R U R' U r2 U2 R' U' R U' r'",
+          "moves": 13,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 20",
+      "case": "No Edges",
+      "algs": [
+        {
+          "notation": "r' R U R U R' U' r2 R2 U R U' r'",
+          "moves": 13,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 21",
+      "case": "OCLL",
+      "algs": [
+        {
+          "notation": "R U2 R' U' R U R' U' R U' R'",
+          "moves": 11,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 22",
+      "case": "OCLL",
+      "algs": [
+        {
+          "notation": "R U2 R2 U' R2 U' R2 U2 R",
+          "moves": 9,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 23",
+      "case": "OCLL",
+      "algs": [
+        {
+          "notation": "R U R' U R U2 R2 U' R U' R' U2 R",
+          "moves": 13,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 24",
+      "case": "OCLL",
+      "algs": [
+        {
+          "notation": "y' R U' R' U2 R U R' U2 R U R' U R U' R'",
+          "moves": 16,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 25",
+      "case": "OCLL",
+      "algs": [
+        {
+          "notation": "y2 F R U' R' U' R U2 R' U' F'",
+          "moves": 11,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 26",
+      "case": "OCLL",
+      "algs": [
+        {
+          "notation": "R U2 R' U' R U' R'",
+          "moves": 7,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 27",
+      "case": "OCLL",
+      "algs": [
+        {
+          "notation": "R U R' U R U2 R'",
+          "moves": 7,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 28",
+      "case": "Corners Correct",
+      "algs": [
+        {
+          "notation": "r U R' U' r' R U R U' R'",
+          "moves": 10,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 29",
+      "case": "Awkward",
+      "algs": [
+        {
+          "notation": "y R U R' U' R U' R' F' U' F R U R'",
+          "moves": 14,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 30",
+      "case": "Awkward",
+      "algs": [
+        {
+          "notation": "y' F U R U2 R' U' R U2 R' U' F'",
+          "moves": 12,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 31",
+      "case": "P-Shape",
+      "algs": [
+        {
+          "notation": "R' U' F U R U' R' F' R",
+          "moves": 9,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 32",
+      "case": "P-Shape",
+      "algs": [
+        {
+          "notation": "y x' U' R U R' x U' R' U' R U R' U R",
+          "moves": 15,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 33",
+      "case": "T-Shape",
+      "algs": [
+        {
+          "notation": "R U R' U' R' F R F'",
+          "moves": 8,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 34",
+      "case": "C-Shape",
+      "algs": [
+        {
+          "notation": "R U R2 U' R' F R U R U' F'",
+          "moves": 11,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 35",
+      "case": "Fish",
+      "algs": [
+        {
+          "notation": "R U2 R2 F R F' R U2 R'",
+          "moves": 9,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 36",
+      "case": "W-Shape",
+      "algs": [
+        {
+          "notation": "R' U' R U' R' U R U x' R U' R' U",
+          "moves": 12,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 37",
+      "case": "Fish",
+      "algs": [
+        {
+          "notation": "F R U' R' U' R U R' F'",
+          "moves": 9,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 38",
+      "case": "W-Shape",
+      "algs": [
+        {
+          "notation": "R U R' U R U' R' U' R' F R F'",
+          "moves": 12,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 39",
+      "case": "Lightning Bolt",
+      "algs": [
+        {
+          "notation": "y2 R U R' F' U' F U R U2 R'",
+          "moves": 11,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 40",
+      "case": "Lightning Bolt",
+      "algs": [
+        {
+          "notation": "R' F R U R' U' F' U R",
+          "moves": 9,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 41",
+      "case": "Awkward",
+      "algs": [
+        {
+          "notation": "R U R' U R U2 R' F R U R' U' F'",
+          "moves": 13,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 42",
+      "case": "Awkward",
+      "algs": [
+        {
+          "notation": "R' U' R U' R' U2 R F R U R' U' F'",
+          "moves": 13,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 43",
+      "case": "P-Shape",
+      "algs": [
+        {
+          "notation": "y R' U' F' U F R",
+          "moves": 7,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 44",
+      "case": "P-Shape",
+      "algs": [
+        {
+          "notation": "f R U R' U' f'",
+          "moves": 6,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 45",
+      "case": "T-Shape",
+      "algs": [
+        {
+          "notation": "F R U R' U' F'",
+          "moves": 6,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 46",
+      "case": "C-Shape",
+      "algs": [
+        {
+          "notation": "R' U' R' F R F' U R",
+          "moves": 8,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 47",
+      "case": "L-Shape",
+      "algs": [
+        {
+          "notation": "R' U' R' F R F' R' F R F' U R",
+          "moves": 12,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 48",
+      "case": "L-Shape",
+      "algs": [
+        {
+          "notation": "F R U R' U' R U R' U' F'",
+          "moves": 10,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 49",
+      "case": "L-Shape",
+      "algs": [
+        {
+          "notation": "r U' r2 U r2 U r2 U' r",
+          "moves": 9,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 50",
+      "case": "L-Shape",
+      "algs": [
+        {
+          "notation": "r' U r2 U' r2 U' r2 U r'",
+          "moves": 9,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 51",
+      "case": "I-Shape",
+      "algs": [
+        {
+          "notation": "f R U R' U' R U R' U' f'",
+          "moves": 10,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 52",
+      "case": "I-Shape",
+      "algs": [
+        {
+          "notation": "R U R' U R U' y R U' R' F'",
+          "moves": 11,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 53",
+      "case": "L-Shape",
+      "algs": [
+        {
+          "notation": "r' U' R U' R' U R U' R' U2 r",
+          "moves": 11,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 54",
+      "case": "L-Shape",
+      "algs": [
+        {
+          "notation": "r U R' U R U' R' U R U2 r'",
+          "moves": 11,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 55",
+      "case": "I-Shape",
+      "algs": [
+        {
+          "notation": "r U2 R' U' R2 r' U R' U' r U' r'",
+          "moves": 12,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 56",
+      "case": "I-Shape",
+      "algs": [
+        {
+          "notation": "r' U' r U' R' U R U' R' U R r' U r",
+          "moves": 14,
+          "note": "OH OLL"
+        }
+      ]
+    },
+    {
+      "name": "OLL 57",
+      "case": "Corners Correct",
+      "algs": [
+        {
+          "notation": "R U R' U' r R' U R U' r'",
+          "moves": 10,
+          "note": "OH OLL"
+        }
+      ]
+    }
+  ]
+};

json/pll.json.js

@@ -0,0 +1,248 @@
+OH_ALGORITHMS.pll = {
+  "title": "OH PLL - Permutation of Last Layer",
+  "description": "OH PLL algorithms from CubeSkills by Feliks Zemdegs. All 21 cases.",
+  "cases": [
+    {
+      "name": "Ub (bar back)",
+      "case": "Edges Only",
+      "algs": [
+        {
+          "notation": "z U' R U' R' U' R' U' R U R U2",
+          "moves": 11,
+          "note": "OH"
+        }
+      ]
+    },
+    {
+      "name": "Ub (bar front)",
+      "case": "Edges Only",
+      "algs": [
+        {
+          "notation": "R' U R' U' R' U' R' U R U R2",
+          "moves": 11,
+          "note": "OH"
+        }
+      ]
+    },
+    {
+      "name": "Ua",
+      "case": "Edges Only",
+      "algs": [
+        {
+          "notation": "R U' R U R U R U' R' U' R2",
+          "moves": 11,
+          "note": "OH"
+        }
+      ]
+    },
+    {
+      "name": "Z",
+      "case": "Edges Only",
+      "algs": [
+        {
+          "notation": "y R' U' R U' R U R U' R' U R U R2 U' R' U2",
+          "moves": 16,
+          "note": "OH"
+        }
+      ]
+    },
+    {
+      "name": "H",
+      "case": "Edges Only",
+      "algs": [
+        {
+          "notation": "R2 U2 R U2 R2 U2 R2 U2 R U2 R2",
+          "moves": 11,
+          "note": "OH"
+        }
+      ]
+    },
+    {
+      "name": "Aa",
+      "case": "Corners Only",
+      "algs": [
+        {
+          "notation": "x R' U R' D2 R U' R' D2 R2 x'",
+          "moves": 9,
+          "note": "OH"
+        }
+      ]
+    },
+    {
+      "name": "Ab",
+      "case": "Corners Only",
+      "algs": [
+        {
+          "notation": "x R2 D2 R U R' D2 R U' R x'",
+          "moves": 9,
+          "note": "OH"
+        }
+      ]
+    },
+    {
+      "name": "E",
+      "case": "Corners Only",
+      "algs": [
+        {
+          "notation": "x' R U' R' D R U R' D' R U R' D R U' R' D' x",
+          "moves": 16,
+          "note": "OH"
+        }
+      ]
+    },
+    {
+      "name": "Ra",
+      "case": "Adjacent Corners",
+      "algs": [
+        {
+          "notation": "R U R' F' R U2 R' U2 R' F R U R U2 R'",
+          "moves": 15,
+          "note": "OH"
+        }
+      ]
+    },
+    {
+      "name": "Rb",
+      "case": "Adjacent Corners",
+      "algs": [
+        {
+          "notation": "R' U2 R' D' R U' R' D R U R U' R' U' R",
+          "moves": 15,
+          "note": "OH"
+        }
+      ]
+    },
+    {
+      "name": "Ja",
+      "case": "Adjacent Corners",
+      "algs": [
+        {
+          "notation": "R' U L' U2 R U' R' U2 R L",
+          "moves": 10,
+          "note": "OH"
+        }
+      ]
+    },
+    {
+      "name": "Jb",
+      "case": "Adjacent Corners",
+      "algs": [
+        {
+          "notation": "R U2 R' U' R U2 L' U R' U' L",
+          "moves": 11,
+          "note": "OH"
+        }
+      ]
+    },
+    {
+      "name": "T",
+      "case": "Adjacent Corners",
+      "algs": [
+        {
+          "notation": "R U R' U' R' F R2 U' R' U' R U R' F'",
+          "moves": 14,
+          "note": "OH"
+        }
+      ]
+    },
+    {
+      "name": "F",
+      "case": "Adjacent Corners",
+      "algs": [
+        {
+          "notation": "R' U' F' R U R' U' R' F R2 U' R' U' R U R' U R",
+          "moves": 18,
+          "note": "OH"
+        }
+      ]
+    },
+    {
+      "name": "V",
+      "case": "Diagonal Corners",
+      "algs": [
+        {
+          "notation": "R' U R U' x' U R U2 R' U' R U' R' U2 R U R' U'",
+          "moves": 17,
+          "note": "OH"
+        }
+      ]
+    },
+    {
+      "name": "Y",
+      "case": "Diagonal Corners",
+      "algs": [
+        {
+          "notation": "F R U' R' U' R U R' F' R U R' U' R' F R F'",
+          "moves": 17,
+          "note": "OH"
+        }
+      ]
+    },
+    {
+      "name": "Na",
+      "case": "Diagonal Corners",
+      "algs": [
+        {
+          "notation": "L U' R U2 L' U R' L U' R U2 L' U R'",
+          "moves": 14,
+          "note": "OH"
+        }
+      ]
+    },
+    {
+      "name": "Nb",
+      "case": "Diagonal Corners",
+      "algs": [
+        {
+          "notation": "R' U L' U2 R U' L R' U L' U2 R U' L",
+          "moves": 14,
+          "note": "OH"
+        }
+      ]
+    },
+    {
+      "name": "Ga",
+      "case": "G Perms",
+      "algs": [
+        {
+          "notation": "R2 U R' U R' U' R U' R2 D U' R' U R D'",
+          "moves": 15,
+          "note": "OH"
+        }
+      ]
+    },
+    {
+      "name": "Gb",
+      "case": "G Perms",
+      "algs": [
+        {
+          "notation": "y' R' U' R U D' R2 U R' U R U' R U' R2 D",
+          "moves": 15,
+          "note": "OH"
+        }
+      ]
+    },
+    {
+      "name": "Gc",
+      "case": "G Perms",
+      "algs": [
+        {
+          "notation": "R2 U' R U' R U R' U R2 D' U R U' R' D",
+          "moves": 15,
+          "note": "OH"
+        }
+      ]
+    },
+    {
+      "name": "Gd",
+      "case": "G Perms",
+      "algs": [
+        {
+          "notation": "D' R U R' U' D R2 U' R U' R' U R' U R2",
+          "moves": 15,
+          "note": "OH"
+        }
+      ]
+    }
+  ]
+};