index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>CPU Simulator - Learn MIPS Architecture</title>
  <meta name="description" content="Designed to test your knowledge of datapaths, this webapp is perfect for practice.">
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script src='https://unpkg.com/gojs/release/go.js'></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="css/styles.css">
</head>

<body
  onload="addInstruction(); refreshDiagram(); loadInstruction(); refreshDiagram(); storeInstruction(); refreshDiagram(); branchInstruction(); refreshDiagram(); indexedAddressingLoadInstruction(); refreshDiagram(); indexedAddressingStoreInstruction(); refreshDiagram()">
  <nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <script type="text/javascript" src='js/app.js'></script>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-left">
        <li class='nav navbar-nav'><a href="index.html"><i class="fa fa-fw fa-microchip"></i><b>CPU Datapath
              Simulator</b></a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-center">
        <li class="list-group-item-danger"><a href="#" onClick="refreshDiagram()">Reset Board</a></li>
        <li><a id='add' href="#" onclick="addInstruction()">Add/Subtract</a></li>
        <li><a id='load' href="#" onclick="loadInstruction()">Load</a></li>
        <li><a id='store' href="#" onclick="storeInstruction()">Store</a></li>
        <li><a id='branch' href="#" onclick="branchInstruction()">Branch</a></li>
        <li><a id='indexedload' href="#" onclick="indexedAddressingLoadInstruction()">Indexed Load</a></li>
        <li><a id='indexedstore' href="#" onclick="indexedAddressingStoreInstruction()">Indexed Store</a></li>

      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="https://github.com/AaronElam/cpu-datapath-webapp"><i class="fa fa-fw fa-github"></i>GitHub</a></li>
      </ul>
    </div>
  </nav>

  <script>
    // Makes each instr be highlighted while active
    jQuery.noConflict();
    jQuery('.nav li').click(function () {
      jQuery('.nav li').removeClass('active');
      jQuery(this).addClass('active');
    })</script>

  <div class="container">
    <h3>How to use:</h3>
    <p>Click and drag to make connections between CPU components.
      <br>Incorrect connections will not be drawn. Use <kbd class="keybd">Ctrl</kbd> + <kbd class="keybd">Z</kbd> to
      undo.
    <div id="myDiagramDiv" style="width: 900px; height: 600px; border: 1px solid black;"></div>
  </div>
</body>

</html>