ssi-pattern-connections-visualization/examples/layouts/index.html · ssi-patterns

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sigma layouts example</title>
  </head>
  <body>
    <style>
      html,
      body,
      #sigma-container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
      #buttons {
        position: absolute;
        right: 1em;
        top: 1em;
        display: flex;
      }
      #buttons > button {
        margin-right: 1em;
        display: inline-block;
        text-align: center;
        background: white;
        outline: none;
        border: 1px solid dimgrey;
        border-radius: 2px;
        cursor: pointer;
      }
      #buttons > button img {
        height: 2em;
      }
      #buttons > button > span {
        height: 100%;
        display: flex;
        align-items: center;
      }
      #buttons > button:last-child {
        margin-right: 0;
      }
    </style>
    <div id="sigma-container"></div>
    <div id="buttons">
      <button id="random">
        <span><img src="./GiPerspectiveDiceSixFaces.svg" />random</span>
      </button>
      <button id="forceatlas2">
        <span>
          <img id="forceatlas2-start-label" src="./BiPlay.svg" />
          <img id="forceatlas2-stop-label" style="display: none" src="./BiPause.svg" />
          Force Atlas 2
        </span>
      </button>
      <button id="circular">
        <span><img src="./BiLoaderCircle.svg" />circular</span>
      </button>
    </div>
    <script src="build/bundle.js"></script>
  </body>
</html>