index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Lightweight Viewer</title>
    <meta name="viewport" content="initial-scale=1">

    <link rel="stylesheet" type="text/css" href="./src/main.css">
    <link rel="stylesheet" type="text/css" href="./src/login/login.css">
    <link rel="stylesheet" type="text/css" href="./src/menu/menu.css">
    <link rel="stylesheet" type="text/css" href="./src/modal/modal.css">
    <link rel="stylesheet" type="text/css" href="./src/viewer/viewer.css">
  </head>
  <body>
    <div class="login-wrapper">
      <form>
        <div class="form-input">
          <label for="username">Username:</label>
          <input type="email" name="username" id="username" required/>
        </div>
        <div class="form-input">
          <label for="username">Password:</label>
          <input type="password" name="password" id="password" required/>
        </div>

        <button class="submit" type="submit">
          Login
          <img src="./imgs/spinner.gif" class="loading invisible">
        </button>
      </form>
    </div>

    <div class="viewer-wrapper invisible">
      <div class="top-bar">
        <div class="viewer-tools">
          <div class="tool">
            <a href="/#" data-tool="wwwc">
              <svg class="tool-img window-level">
                <use xlink:href="./imgs/icons.svg#icon-tools-levels-group" href="./imgs/icons.svg#icon-tools-levels-group"></use>
              </svg>
              W/L
            </a>
          </div>
          <div class="tool">
            <a href="/#" data-tool="length">
              <svg class="tool-img">
                <use xlink:href="./imgs/icons.svg#icon-tools-measure-temp" href="./imgs/icons.svg#icon-tools-measure-temp"></use>
              </svg>
              Length
            </a>
          </div>
          <div class="tool">
            <a href="/#" data-tool="pan">
              <svg class="tool-img">
                <use xlink:href="./imgs/icons.svg#icon-tools-pan" href="./imgs/icons.svg#icon-tools-pan"></use>
              </svg>
              Pan
            </a>
          </div>
          <div class="tool">
            <a href="/#" data-tool="zoom">
              <svg class="tool-img">
                <use xlink:href="./imgs/icons.svg#icon-tools-zoom" href="./imgs/icons.svg#icon-tools-zoom"></use>
              </svg>
              Zoom
            </a>
          </div>
          <div class="tool">
            <a href="/#" data-command="save">
              <svg>
                <use xlink:href="./imgs/icons.svg#icon-status-complete" href="./imgs/icons.svg#icon-status-complete"></use>
              </svg>
              Save
            </a>
          </div>
          <div class="tool">
            <a href="/#" data-command="clearAll">
              <svg>
                <use xlink:href="/imgs/icons.svg#icon-ui-close" href="./imgs/icons.svg#icon-ui-close"></use>
              </svg>
              Clear
            </a>
          </div>
        </div>

        <div class="hamburguer-menu">
          <a class="menu">
            <div class="hamburguer-stroke"></div>
            <div class="hamburguer-stroke"></div>
            <div class="hamburguer-stroke"></div>
          </a>
        </div>
      </div>
      <div class="viewport">
        <div id="conerstoneViewport"></div>
        <div class="scroll">
          <div class="thumb"></div>
        </div>
      </div>
    </div>

    <div class="modal">
      <p>Thanks for submitting your diagnose!</p>
      <div class="button-holder">
        <button class="logout">Log out</button>
        <button class="next-case">Next Case</button>
      </div>
    </div>

    <div class="loading-overlay invisible">
      <div class="padding"></div>
      <div class="content">
        <img src="./imgs/spinner.gif" class="spinner">
        <div class="submit-text">Submitting...</div>
      </div>
    </div>

    <div class="menu-wrapper invisible">
      <ul>
        <li><a href="/#" data-menu="nextCase">Next Case</a></li>
        <li><a href="/#" data-menu="submit">Save</a></li>
        <li class="separator"></li>
        <li><a href="/#" data-menu="logout">Log out</a></li>
      </ul>
    </div>

    <!-- Dependencies -->
    <script type="text/javascript" src="./node_modules/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="./node_modules/hammerjs/hammer.min.js"></script>
    <script type="text/javascript" src="./node_modules/cornerstone-math/dist/cornerstoneMath.min.js"></script>
    <script type="text/javascript" src="./node_modules/cornerstone-core/dist/cornerstone.min.js"></script>
    <script type="text/javascript" src="./node_modules/cornerstone-tools/dist/cornerstoneTools.min.js"></script>
    <script type="text/javascript" src="./node_modules/dicom-parser/dist/dicomParser.min.js"></script>
    <script type="text/javascript" src="./node_modules/cornerstone-wado-image-loader/dist/cornerstoneWADOImageLoader.min.js"></script>

    <!-- Code -->
    <script type="text/javascript" src="./src/login/login.js"></script>
    <script type="text/javascript" src="./src/menu/menu.js"></script>
    <script type="text/javascript" src="./src/modal/modal.js"></script>
    <script type="text/javascript" src="./src/viewer/commands.js"></script>
    <script type="text/javascript" src="./src/viewer/connector.js"></script>
    <script type="text/javascript" src="./src/viewer/files.js"></script>
    <script type="text/javascript" src="./src/viewer/tools.js"></script>
    <script type="text/javascript" src="./src/viewer/viewer.js"></script>
    <script type="text/javascript">
      Login.init();
    </script>
  </body>
</html>