Pastebin

New Paste Add Image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Longest Substring Manual Step</title>
    <style>
        :root {
            --bg-color: #f8fafc;
            --highlight-window: #dbeafe; /* Light Blue */
            --highlight-current: #3b82f6; /* Dark Blue */
            --highlight-error: #ef4444; /* Red */
            --highlight-old: #fca5a5; /* Light Red */
            --text-color: #1f2937;
        }

body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            user-select: none; /* Prevent text selection while tapping keys */
        }

h1 { margin-bottom: 5px; }
        .subtitle { color: #666; margin-bottom: 20px; font-size: 0.9rem; }

/* Controls Area */
        .controls {
            margin-bottom: 20px;
            padding: 15px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            display: flex;
            gap: 10px;
            align-items: center;
            flex-wrap: wrap;
            justify-content: center;
        }

button {
            padding: 10px 20px;
            cursor: pointer;
            border: none;
            border-radius: 6px;
            font-weight: bold;
            font-size: 1rem;
            transition: transform 0.1s;
        }
        button:active { transform: scale(0.95); }
        .btn-next { background-color: var(--highlight-current); color: white; }
        .btn-prev { background-color: #e5e7eb; color: #374151; }
        .btn-reset { background-color: #ef4444; color: white; }

input, select {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

/* Visualization Area */
        .viz-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
            width: 100%;
            max-width: 900px;
        }

/* String Boxes */
        .string-row {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 6px;
            margin: 30px 0;
        }

.char-box {
            width: 50px;
            height: 50px;
            background: white;
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.6rem;
            font-weight: bold;
            position: relative;
            transition: all 0.2s ease;
        }

.char-index {
            position: absolute;
            bottom: -22px;
            font-size: 0.75rem;
            color: #9ca3af;
        }

/* States */
        .in-window {
            background-color: var(--highlight-window);
            border-color: #93c5fd;
        }
        
        .is-current-head {
            border-color: var(--highlight-current);
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
            z-index: 10;
        }

/* Used for transient flash effects */
        .flash-red { background-color: var(--highlight-error) !important; color: white; }
        .flash-old { background-color: var(--highlight-old) !important; }

/* Dashboard */
        .dashboard {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            width: 100%;
        }

.panel {
            background: white;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }

.panel h3 { margin: 0 0 10px 0; font-size: 1rem; color: #4b5563; border-bottom: 1px solid #f3f4f6; padding-bottom: 5px; }

.stats-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            font-size: 0.9rem;
        }
        .stat-label { color: #6b7280; }
        .stat-val { font-weight: bold; font-family: monospace; font-size: 1.1rem; }

.hash-map {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .map-item {
            background: #f3f4f6;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.85rem;
            border: 1px solid #e5e7eb;
            font-family: monospace;
        }

/* Log Box */
        .log-box {
            width: 100%;
            background: #111827;
            color: #4ade80; /* Matrix Green */
            font-family: 'Consolas', 'Monaco', monospace;
            padding: 15px;
            border-radius: 8px;
            height: 150px;
            overflow-y: auto;
            border: 1px solid #374151;
            font-size: 0.9rem;
            display: flex;
            flex-direction: column;
            scroll-behavior: smooth;
        }

.log-entry { margin-bottom: 4px; border-bottom: 1px solid #1f2937; padding-bottom: 2px;}
        .log-entry:last-child { color: #fff; font-weight: bold; border: none; } /* Highlight latest */

/* Keyboard hint */
        .kb-hint {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: rgba(0,0,0,0.7);
            color: white;
            padding: 10px 15px;
            border-radius: 20px;
            font-size: 0.8rem;
            pointer-events: none;
        }

@media (max-width: 600px) {
            .dashboard { grid-template-columns: 1fr; }
        }
    </style>
</head>
<body>

<h1>Sliding Window Visualization</h1>
    <div class="subtitle">Use ⬅️ Arrow Keys ➡️ to step through logic</div>

<div class="controls">
        <select id="exampleSelect">
            <option value="abcabcbb">abcabcbb</option>
            <option value="bbbbb">bbbbb</option>
            <option value="pwwkew">pwwkew</option>
            <option value="dvdf">dvdf</option>
            <option value="tmmzuxt">tmmzuxt</option>
        </select>
        <button class="btn-prev" onclick="step(-1)">❮ Prev</button>
        <button class="btn-next" onclick="step(1)">Next ❯</button>
        <button class="btn-reset" onclick="init()">Reset</button>
    </div>

<div class="dashboard">
            <div class="panel">
                <h3>Current State</h3>
                <div class="stats-grid">
                    <div><span class="stat-label">Left (L):</span> <span class="stat-val" id="valL">0</span></div>
                    <div><span class="stat-label">Right (R):</span> <span class="stat-val" id="valR">0</span></div>
                    <div><span class="stat-label">Max Len:</span> <span class="stat-val" id="valMax">0</span></div>
                    <div><span class="stat-label">Cur Len:</span> <span class="stat-val" id="valCur">0</span></div>
                </div>
            </div>
            <div class="panel">
                <h3>HashMap Index</h3>
                <div id="mapContainer" class="hash-map"></div>
            </div>
        </div>

<div class="log-box" id="logBox">
            <div class="log-entry">Waiting to start...</div>
        </div>
    </div>

<div class="kb-hint">Press ⬅️ / ➡️ keys</div>

// Elements
        const stringContainer = document.getElementById('stringContainer');
        const mapContainer = document.getElementById('mapContainer');
        const logBox = document.getElementById('logBox');
        
        // Listeners
        document.addEventListener('keydown', (e) => {
            if (e.key === "ArrowRight") step(1);
            if (e.key === "ArrowLeft") step(-1);
        });

document.getElementById('exampleSelect').addEventListener('change', (e) => {
            currentStr = e.target.value;
            init();
        });

// 1. PRE-CALCULATE ALL STATES
        // Instead of running logic live, we run it once instantly and save every "frame"
        // This makes stepping backwards trivial.
        function generateStates(s) {
            const history = [];
            let charMap = {};
            let left = 0;
            let maxLen = 0;

// Initial State (Before starting)
            history.push({
                left: 0,
                right: -1, // Not started
                maxLen: 0,
                map: {...charMap},
                log: "Ready. Press Right Arrow to start.",
                highlight: [],
                head: -1
            });

for (let right = 0; right < s.length; right++) {
                const char = s[right];
                
                // Step A: Expand Window (Move Right)
                history.push({
                    left: left,
                    right: right,
                    maxLen: maxLen,
                    map: {...charMap},
                    log: `Expand Right to index ${right} ('${char}').`,
                    highlight: [left, right], // Range to highlight
                    head: right
                });

// Step B: Check Duplicates
                if (char in charMap && charMap[char] >= left) {
                    const oldIdx = charMap[char];
                    
                    // Add a state specifically for the collision visual
                    history.push({
                        left: left,
                        right: right,
                        maxLen: maxLen,
                        map: {...charMap},
                        log: `⚠️ Duplicate '${char}' found at index ${oldIdx}! Window invalid.`,
                        highlight: [left, right],
                        head: right,
                        collision: { current: right, old: oldIdx } // Special marker for UI
                    });

left = oldIdx + 1;

// Step C: Move Left
                    history.push({
                        left: left,
                        right: right,
                        maxLen: maxLen,
                        map: {...charMap}, // Map hasn't updated yet in logic, but left has
                        log: `Jump Left pointer to ${left} (index of old '${char}' + 1).`,
                        highlight: [left, right],
                        head: right
                    });
                }

// Step D: Update Map and Max
                charMap[char] = right;
                maxLen = Math.max(maxLen, right - left + 1);

history.push({
                    left: left,
                    right: right,
                    maxLen: maxLen,
                    map: {...charMap},
                    log: `Update Map ['${char}': ${right}]. Max length is now ${maxLen}.`,
                    highlight: [left, right],
                    head: right
                });
            }

// Final state
            history.push({
                left: left,
                right: s.length - 1,
                maxLen: maxLen,
                map: {...charMap},
                log: `✅ Finished. Result: ${maxLen}`,
                highlight: [left, s.length-1],
                head: -1
            });

return history;
        }

// 2. RENDER A SPECIFIC STATE
        function renderState(idx) {
            const state = states[idx];
            
            // Update Stats
            document.getElementById('valL').innerText = state.left;
            document.getElementById('valR').innerText = state.right === -1 ? "-" : state.right;
            document.getElementById('valMax').innerText = state.maxLen;
            const curLen = state.right === -1 ? 0 : (state.right - state.left + 1);
            document.getElementById('valCur').innerText = curLen < 0 ? 0 : curLen;

// Update Map
            mapContainer.innerHTML = '';
            for(let [k,v] of Object.entries(state.map)) {
                mapContainer.innerHTML += `<div class="map-item">${k}:${v}</div>`;
            }

// Update String Visuals
            for(let i=0; i<currentStr.length; i++) {
                const box = document.getElementById(`box-${i}`);
                box.className = 'char-box'; // reset

// Highlight Window
                if (state.right !== -1 && i >= state.left && i <= state.right) {
                    box.classList.add('in-window');
                }

// Highlight Head (Current Right Pointer)
                if (i === state.head) {
                    box.classList.add('is-current-head');
                }

// Handle Collision specific styling
                if (state.collision) {
                    if (i === state.collision.current) box.classList.add('flash-red');
                    if (i === state.collision.old) box.classList.add('flash-old');
                }
            }

// Update Log (Append to bottom)
            const p = document.createElement('div');
            p.className = "log-entry";
            p.innerText = `[Step ${idx}] ${state.log}`;
            logBox.appendChild(p);
            logBox.scrollTop = logBox.scrollHeight; // Auto scroll to bottom
        }

// Calculate Logic
            states = generateStates(currentStr);
            currentStateIndex = 0;
            
            logBox.innerHTML = ''; // Clear logs
            renderState(0);
        }

function step(dir) {
            const nextIndex = currentStateIndex + dir;
            if (nextIndex >= 0 && nextIndex < states.length) {
                currentStateIndex = nextIndex;
                renderState(currentStateIndex);
            }
        }

// Start
        init();

</script>
</body>
</html>

Settings

Title : [Optional]

Paste Folder : [Optional]

Syntax : [Optional]

Expiration : [Optional]

Status : [Optional]

Password : [Optional]

Description: [Optional]

Tags: [Optional]

Encrypt Paste (?)

You are currently not logged in, this means you can not edit or delete anything you paste. Sign Up or Login

Settings

Site Languages