src/index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- <meta http-equiv="refresh" content="3" > -->
  <title>TLA+ Graph Explorer</title>
  <link href="css/index.css" media="all" rel="stylesheet" type="text/css"/>
  <link href="tla-state.css" media="all" rel="stylesheet" type="text/css"/>
  <script type="text/javascript" src="lib/parser.js"></script>
</head>
<body>
  <div id="error" class="alert hidden">
    <span class="closebtn" onclick="this.parentElement.classList.add('hidden');">&times;</span>
    Error reading the file! If the contents of the file have been changed you need to re choose the file using the file picker.
  </div>
  <div class="title"> TLA+ Graph Explorer </div>

  <div class="info">
    This is a tool to animate graphs generated by a TLA+ specification. <br><a href="trace-explorer.html">Trace Version</a>.
    More info at: <a target="_blank" href="https://github.com/afonsonf/tlaplus-graph-explorer">github.com/afonsonf/tlaplus-graph-explorer</a>.

    <div class="fileSubmit">
      File: <input type="file" id="graph" name="graph" onclick="this.value = null">
      <button onclick="loadFile()">Submit</button>
      <p style="display: inline; color: green" id="check"> &#10004; </p>
      <button onclick="reloadFile()">Reload file</button>
    </div>
  </div>

  <div class="mainDiv" id="mainDiv">
    <div class="statesDiv">

      <div class="currState singleStateDiv">
        <h4> Current State </h4>
        <div id="content-curr" class="state-content">
          <div class="state-default"> Current State </div>
        </div>
      </div>

      <div class="nextState singleStateDiv">
        <h4> Next State Preview </h4>
        <div id="content-next" class="state-content">
          <div class="state-default"> Next State Preview </div>
        </div>
      </div>

    </div>

    <div class="actionsDiv" id="actionsDiv">
      <div class="actions" id="actions">
        <label>
          <input type="radio" name="action" value="0" checked>Previous
        </label>
      </div>
      <div class="actions-submit">
        <button onclick="updateCurrent()">Submit</button>
      </div>
    </div>
  </div>

  <div class="loading">
    <div class="loadingScreen">
      Loading... <p id="progress">0%</p>
    </div>
  </div>

</body>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/reader.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="tla-state-template.js"></script>
<script type="text/javascript" src="tla-state.js"></script>
</html>