Renamed main HTML file to index.html for GitHub Pages

HamzaConcepts · Oct 20, 2024 · bc0b1e5 · bc0b1e5
1 parent 11c5d1a
commit bc0b1e5
Showing 1 changed file with 265 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,265 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Comprehensive Step-by-Step Shell Sort Visualization</title>
+    <style>
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            min-height: 100vh;
+            margin: 0;
+            padding: 20px;
+            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+        }
+        .container {
+            background-color: white;
+            border-radius: 10px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            padding: 20px;
+            margin-bottom: 20px;
+            width: 90%;
+            max-width: 800px;
+            display: flex;
+            flex-direction: column;
+            min-height: 80vh;
+        }
+        h1 {
+            text-align: center;
+            color: #333;
+            margin-bottom: 20px;
+            width: 100%;
+        }
+        #array-container {
+            display: flex;
+            justify-content: center;
+            margin-bottom: 20px;
+            flex-wrap: wrap;
+        }
+        .array-item {
+            width: 50px;
+            height: 50px;
+            border: 2px solid #333;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin: 5px;
+            font-size: 18px;
+            font-weight: bold;
+            transition: all 0.3s ease;
+            background-color: #fff;
+        }
+        .comparing {
+            background-color: #ffcccb;
+            transform: scale(1.1);
+        }
+        .swapping {
+            background-color: #90ee90;
+            transform: scale(1.1);
+        }
+        button {
+            font-size: 16px;
+            padding: 10px 20px;
+            cursor: pointer;
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            transition: background-color 0.3s;
+            margin: 0 5px 10px 5px;
+        }
+        button:hover {
+            background-color: #45a049;
+        }
+        button:disabled {
+            background-color: #cccccc;
+            cursor: not-allowed;
+        }
+        #info {
+            margin-top: 20px;
+            font-size: 18px;
+            text-align: center;
+        }
+        #instructions {
+            margin-top: 10px;
+            font-style: italic;
+            text-align: center;
+        }
+        #variables {
+            margin-top: 20px;
+            font-size: 16px;
+            text-align: left;
+        }
+        .footer {
+            margin-top: auto;
+            text-align: center;
+            padding: 10px;
+            font-size: 14px;
+            color: #666;
+            border-top: 1px solid #eee;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Shell Sort Visualization</h1>
+        <div id="array-container"></div>
+        <div style="text-align: center;">
+            <button id="start-btn">Start Shell Sort</button>
+            <button id="reset-btn">Reset Array</button>
+        </div>
+        <p id="info">Click 'Start Shell Sort' to begin the visualization.</p>
+        <p id="instructions">Press the right arrow key to proceed to the next step.</p>
+        <div id="variables">
+            <h3>Variables:</h3>
+            <p>gap: <span id="gap-value">N/A</span></p>
+            <p>i: <span id="i-value">N/A</span></p>
+            <p>j: <span id="j-value">N/A</span></p>
+            <p>temp: <span id="temp-value">N/A</span></p>
+        </div>
+        <div class="footer">
+            Prompted by Hamza, Implemented by Claude
+        </div>
+    </div>
+
+    <script>
+        // The script remains unchanged
+        const arrayContainer = document.getElementById('array-container');
+        const startBtn = document.getElementById('start-btn');
+        const resetBtn = document.getElementById('reset-btn');
+        const infoText = document.getElementById('info');
+        const instructionsText = document.getElementById('instructions');
+        let initialArray = [64, 34, 25, 12, 22, 11, 90];
+        let array = [...initialArray];
+        let isAnimating = false;
+        let sortGenerator = null;
+
+        function createArrayItems() {
+            arrayContainer.innerHTML = '';
+            array.forEach((value, index) => {
+                const item = document.createElement('div');
+                item.className = 'array-item';
+                item.textContent = value;
+                item.id = `item-${index}`;
+                arrayContainer.appendChild(item);
+            });
+        }
+
+        function updateVariables(gap, i, j, temp) {
+            document.getElementById('gap-value').textContent = gap !== undefined ? gap : 'N/A';
+            document.getElementById('i-value').textContent = i !== undefined ? i : 'N/A';
+            document.getElementById('j-value').textContent = j !== undefined ? j : 'N/A';
+            document.getElementById('temp-value').textContent = temp !== undefined ? temp : 'N/A';
+        }
+
+        function* shellSortGenerator() {
+            let n = array.length;
+            for (let gap = Math.floor(n / 2); gap > 0; gap = Math.floor(gap / 2)) {
+                updateVariables(gap);
+                yield `Current gap size: ${gap}`;
+                for (let i = gap; i < n; i++) {
+                    updateVariables(gap, i);
+                    let temp = array[i];
+                    let j = i;
+                    updateVariables(gap, i, j, temp);
+                    while (j >= gap) {
+                        yield* compare(j, j - gap);
+                        if (array[j - gap] > temp) {
+                            yield* swap(j, j - gap);
+                            array[j] = array[j - gap];
+                            j -= gap;
+                        } else {
+                            yield `No swap needed. ${array[j - gap]} is not greater than ${temp}`;
+                            break;
+                        }
+                        updateVariables(gap, i, j, temp);
+                    }
+                    if (j !== i) {
+                        array[j] = temp;
+                        updateArrayItem(j, temp);
+                        yield `Updated element at index ${j} to ${temp}`;
+                    }
+                }
+            }
+            updateVariables();
+            yield 'Shell Sort completed!';
+        }
+
+        function* compare(index1, index2) {
+            const item1 = document.getElementById(`item-${index1}`);
+            const item2 = document.getElementById(`item-${index2}`);
+            item1.classList.add('comparing');
+            item2.classList.add('comparing');
+            yield `Comparing elements at indices ${index2} (${array[index2]}) and ${index1} (${array[index1]})`;
+            item1.classList.remove('comparing');
+            item2.classList.remove('comparing');
+        }
+
+        function* swap(index1, index2) {
+            const item1 = document.getElementById(`item-${index1}`);
+            const item2 = document.getElementById(`item-${index2}`);
+            item1.classList.add('swapping');
+            item2.classList.add('swapping');
+            yield `Swapping elements at indices ${index2} (${array[index2]}) and ${index1} (${array[index1]})`;
+            const tempContent = item1.textContent;
+            item1.textContent = item2.textContent;
+            item2.textContent = tempContent;
+            item1.classList.remove('swapping');
+            item2.classList.remove('swapping');
+        }
+
+        function updateArrayItem(index, value) {
+            const item = document.getElementById(`item-${index}`);
+            item.textContent = value;
+        }
+
+        function nextStep() {
+            if (sortGenerator) {
+                const result = sortGenerator.next();
+                if (!result.done) {
+                    infoText.textContent = result.value;
+                } else {
+                    sortGenerator = null;
+                    isAnimating = false;
+                    startBtn.disabled = false;
+                    resetBtn.disabled = false;
+                    instructionsText.style.display = 'none';
+                }
+            }
+        }
+
+        function resetArray() {
+            array = [...initialArray];
+            createArrayItems();
+            updateVariables();
+            infoText.textContent = "Array reset. Click 'Start Shell Sort' to begin the visualization.";
+            startBtn.disabled = false;
+            isAnimating = false;
+        }
+
+        startBtn.addEventListener('click', () => {
+            if (!isAnimating) {
+                isAnimating = true;
+                startBtn.disabled = true;
+                resetBtn.disabled = true;
+                instructionsText.style.display = 'block';
+                sortGenerator = shellSortGenerator();
+                nextStep();
+            }
+        });
+
+        resetBtn.addEventListener('click', resetArray);
+
+        document.addEventListener('keydown', (event) => {
+            if (event.key === 'ArrowRight' && isAnimating) {
+                nextStep();
+            }
+        });
+
+        createArrayItems();
+    </script>
+</body>
+</html>