<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>
			LonePy Algorithm Visualizer
		</title>
		
		<!-- css sheet for how the page is laid out -->
		
		<link rel="stylesheet" href="./Comparison Sorting Visualization_files/visualizationPageStyle.css">
			
		<!-- jqueury stuff.  Only used for the animation speed slider. -->
		<link rel="stylesheet" href="./Comparison Sorting Visualization_files/jquery-ui-1.8.11.custom.css">
		<script src="./Comparison Sorting Visualization_files/jquery-1.5.2.min.js.download"></script>
		<script src="./Comparison Sorting Visualization_files/jquery-ui-1.8.11.custom.min.js.download"></script>
				
		<!-- Javascript for the actual visualization code -->
		<script type="text/javascript" src="./Comparison Sorting Visualization_files/CustomEvents.js.download"> </script>
		<script type="text/javascript" src="./Comparison Sorting Visualization_files/UndoFunctions.js.download"> </script>
		<script type="text/javascript" src="./Comparison Sorting Visualization_files/AnimatedObject.js.download"> </script>
		<script type="text/javascript" src="./Comparison Sorting Visualization_files/AnimatedLabel.js.download"> </script>
		<script type="text/javascript" src="./Comparison Sorting Visualization_files/AnimatedCircle.js.download"> </script>
		<script type="text/javascript" src="./Comparison Sorting Visualization_files/AnimatedRectangle.js.download"> </script>
		<script type="text/javascript" src="./Comparison Sorting Visualization_files/AnimatedLinkedList.js.download"> </script>
		<script type="text/javascript" src="./Comparison Sorting Visualization_files/HighlightCircle.js.download"> </script>
		<script type="text/javascript" src="./Comparison Sorting Visualization_files/Line.js.download"> </script>
		<script type="text/javascript" src="./Comparison Sorting Visualization_files/ObjectManager.js.download"> </script>
		<script type="text/javascript" src="./Comparison Sorting Visualization_files/AnimationMain.js.download"> </script>
		<script type="text/javascript" src="./Comparison Sorting Visualization_files/Algorithm.js.download"> </script>
		<script type="text/javascript" src="./Comparison Sorting Visualization_files/ComparisonSort.js.download"> </script> 
<style>
    .array-container {
      display: flex;
      justify-content: center;
      margin-top: 20px;
      gap: 10px;
    }
    .cell {
      width: 50px;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #f0f0f0;
      border: 2px solid #ddd;
      border-radius: 5px;
      font-size: 18px;
      font-weight: bold;
      position: relative;
      transition: background-color 0.3s, transform 0.3s;
    }
    .cell.highlight {
      background-color: red;
      transform: scale(1.2);
    }
    .cell.low-high {
      background-color: black;
      color: white;
    }
    .cell.found {
      background-color: #4caf50;
      color: white;
    }
    .label {
      position: absolute;
      top: -25px;
      font-size: 14px;
      color: red;
    }
    .tree-container {
      margin-top: 50px;
      display: flex;
      justify-content: center;
      position: relative;
    }
    .node {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: #007bff;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 18px;
      position: absolute;
      transition: all 1s;
    }
    .line {
      position: absolute;
      background-color: #000;
      width: 2px;
      transform-origin: top left;
      transition: all 1s;
    }
    input[type="text"] {
      padding: 10px;
      width: 300px;
      border: 1px solid #ddd;
      border-radius: 5px;
      margin-top: 10px;
    }
    button {
      padding: 10px 20px;
      margin-top: 10px;
      border: none;
      border-radius: 5px;
      background-color: #007bff;
      color: white;
      cursor: pointer;
    }
    button:hover {
      background-color: #0056b3;
    }
h1{
 background: #DDEEDD;
  color: #000000;

  display: flex;              /* Enables flexbox */
  justify-content: center;    /* Centers the button horizontally */
  align-items: center;
font-size:20px;        /* Centers the button vertically */
}

  </style>
	 </head> 
	
	<body onload="init();" class="VisualizationMainPage">
		
		<div id="container">
			
			<div id="header">  
				<h1>ALGORITHM VISUALIZER</h1>
			</div>
			
			<div id="mainContent"> 
				
				<div id="algoControlSection"style="">
					<!-- Table for buttons to control specific animation (insert/find/etc) -->
					<!-- (filled in by javascript code specific to the animtion) -->
<button onclick="scrollToExplanation()"style="height:30px;position:relative;display: flex;              /* Enables flexbox */
  justify-content: center;height:25px;margin-top:0px;    /* Centers the button horizontally */
  align-items: center;    " class="scroll-button">Binary Search</button>
					<table id="AlgorithmSpecificControls"></table> 

<script>

function scrollToExplanation() {
  document.getElementById("explanation").scrollIntoView({ behavior: "smooth" });
}
</script>

				</div>
<div id="generalAnimationControlSection">
					<!-- Table for buttons to control general animation (play/pause/undo/etc) ->
					<!-- (filled in by javascript code, specifically AnimationMain.js)  -->

					<table id="GeneralAnimationControls">  </table>		
				</div>
					<!-- Drawing canvas where all animation is done.  Note:  can be resized in code -->
									
				<canvas id="canvas" width="1000" height="400"></canvas>

				

				
			</div> <!-- mainContent -->
			



		</div><!-- container -->
	

<span id="PING_IFRAME_FORM_DETECTION" style="display: none;"></span>


  <h1>BINARY SEARCH VISUALIZER</h1>

<div style="margin-bottom: 100px;">
  <input id="arrayInput" type="text" placeholder="Enter array elements (comma-separated)">
  <button onclick="generateArray()">Generate Element List</button>
</div>

<div>
  <div class="array-container" id="arrayContainer"></div>
</div>
    <input id="searchInput" type="text" placeholder="Enter value to search">
    <button onclick="searchElement()">Search Element</button>
  </div>


<!-- Scroll Down Button -->

<!-- Scroll Up Button -->

<div id="explanation" style="margin-top: 0px;">
  <h2>Binary Search Algorithm Steps:</h2>
  <p>Binary Search is an efficient algorithm for finding the position of a target element in a sorted array or list. It works by repeatedly dividing the search space in half, making it much faster than a linear search for large datasets.</p>

  <p><strong>Step 1: Initialize Pointers</strong><br> Set two pointers, low and high, to represent the current range of the array you're searching. low starts at the beginning (index 0) and high starts at the end (last index).</p>
  
  <p><strong>Step 2: Find the Middle Element</strong><br> Calculate the middle index mid: <code>[mid = (low + high) / 2]</code></p>
  
  <p>The element at index mid is the current middle element.</p>
  
  <p><strong>Step 3: Compare the Middle Element with the Target</strong></p>
  <ul>
    <li>If the element at mid is equal to the target, return the index of mid (target found).</li>
    <li>If the element at mid is greater than the target, the target must be in the left half of the array. Update high to mid - 1.</li>
    <li>If the element at mid is smaller than the target, the target must be in the right half of the array. Update low to mid + 1.</li>
  </ul>
  
  <p><strong>Step 4: Repeat</strong><br> Repeat steps 2 and 3 until low exceeds high, which means the target is not in the array.</p>
</div>

<!-- Footer -->
<div id="footer" style="background:#000;color:red;margin-top:0px;border-radius:0px;position:fixed;bottom:0;left:0;width:100%;text-align:center; display: flex; justify-content: space-between; align-items: center; padding: 2px;">
<script>

function scrollToExplanation() {
  document.getElementById("explanation").scrollIntoView({ behavior: "smooth" });
}

// Scroll to the top of the page
function scrollToTop() {
  window.scrollTo({ top: 0, behavior: "smooth" });
}</script>

  <span style="color:grey;font-size:12px;">| LonePy Algorithm Visualizer | Design & Development | Lone A Firdous |</span>
  
  <!-- Scroll to Top Button -->
  <button onclick="scrollToTop()"style="height:30px;position:relative;display: flex;              /* Enables flexbox */
  justify-content: center;height:25px;margin-top:0px;    /* Centers the button horizontally */
  align-items: center;    " class="scroll-button-up">&#8593; Scroll to Top</button>
</div>  <script>

    const arrayContainer = document.getElementById('arrayContainer');
    const treeContainer = document.getElementById('treeContainer');
    let array = [];

    function generateArray() {
      const input = document.getElementById('arrayInput').value;
      array = Array.from(new Set(input.split(',').map(item => parseInt(item.trim(), 10)).filter(item => !isNaN(item))))
        .sort((a, b) => a - b);

      arrayContainer.innerHTML = '';
      array.forEach((value, index) => {
        const cell = document.createElement('div');
        cell.className = 'cell';
        cell.id = `cell-${index}`;
        arrayContainer.appendChild(cell);

        setTimeout(() => {
          cell.textContent = value;
        }, index * 900);
      });
    }

    async function searchElement() {
      const searchValue = parseInt(document.getElementById('searchInput').value, 10);
      let low = 0;
      let high = array.length - 1;

      while (low <= high) {
        const mid = Math.floor((low + high) / 2);

        highlightCells(low, mid, high);
        await sleep(3000);

        const midValue = array[mid];

        if (midValue === searchValue) {
          markAsFound(mid);
          return;
        } else if (midValue < searchValue) {
          low = mid + 1;
        } else {
          high = mid - 1;
        }
      }

      alert('Element not found');
    }

    function highlightCells(low, mid, high) {
      clearHighlights();

      const lowCell = document.getElementById(`cell-${low}`);
      const midCell = document.getElementById(`cell-${mid}`);
      const highCell = document.getElementById(`cell-${high}`);

      lowCell.classList.add('low-high');
      highCell.classList.add('low-high');
      midCell.classList.add('highlight');

      addLabel(lowCell, 'Low');
      addLabel(midCell, 'Mid');
      addLabel(highCell, 'High');
    }

    function addLabel(cell, text) {
      const label = document.createElement('div');
      label.className = 'label';
      label.textContent = text;
      cell.appendChild(label);
    }

    function clearHighlights() {
      document.querySelectorAll('.cell').forEach(cell => {
        cell.classList.remove('highlight', 'low-high', 'found');
        const label = cell.querySelector('.label');
        if (label) cell.removeChild(label);
      });
    }

    function markAsFound(index) {
      clearHighlights();
      document.getElementById(`cell-${index}`).classList.add('found');
    }

    function sleep(ms) {
      return new Promise(resolve => setTimeout(resolve, ms));
    }

    
  </script>



</body></html>