Rennie44/Sorting-Algorithm-Visualization

1def render_single_step_html(step, idx):2    arr = step["array"]3    compare = step["compare"]4    swapped = step["swapped"]5    swapped_indices = step.get("swapped_indices")6 7    # Container wrapper (centering)8    html = f"""9    <div style="10        display:flex;11        flex-direction:column;12        align-items:center;13        justify-content:center;14        width:100%;15        margin-top:20px;16        font-family:monospace;17        ">18        <h2 style='margin-bottom:10px;'>Step {idx}</h2>19 20        <div style="21            display:flex;22            gap:12px;23            padding:20px;24            justify-content:center;25            align-items:flex-end;26            background-color:#1a1a1a;27            border-radius:10px;28            width:90%;29            min-height:250px;30        ">31    """32 33    # Height multiplier = taller bars34    HEIGHT_MULT = 8  # increase to make bars even taller35 36    for i, val in enumerate(arr):37 38        # DEFAULT GRAY39        color = "#777"40 41        # SWAP takes priority (GREEN)42        if swapped and swapped_indices and (i in swapped_indices):43            color = "#4caf50"44 45        # COMPARISON (ORANGE)46        elif compare and (i == compare[0] or i == compare[1]):47            color = "#ffa500"48 49        bar_height = 20 + val * HEIGHT_MULT50 51        html += f"""52        <div style="53            height:{bar_height}px;54            width:35px;55            background:{color};56            border-radius:6px;57            display:flex;58            align-items:flex-end;59            justify-content:center;60            font-size:12px;61            color:#111;62        ">63            {val}64        </div>65        """66 67    # close bar container68    html += "</div>"69 70    # Explanation text under the graph71    if swapped and swapped_indices:72        html += "<div style='color:#4caf50; margin-top:12px; font-size:16px;'>Swap happened</div>"73    elif compare:74        html += f"<div style='color:#ffa500; margin-top:12px; font-size:16px;'>Comparing {compare[0]} and {compare[1]}</div>"75    else:76        html += "<div style='margin-top:12px; font-size:16px;'>Snapshot</div>"77 78    html += "</div>"  # close outer container79 80    return html81