index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Identifiers Widget</title>
  <link rel="icon" href="img/favicon.png">
  <!-- the library for the webcomponent -->
  <script src="dist/bundle.js" type="module"></script>
  <style>
  /* here's some basic styling for the demo pages. It's included embedded in the
  page HTML so that it doesn't accidentally end up inside your component ;) */
  body.demo {
    font-family: roboto, sans-serif;
    display: flex;
    flex-direction: column;
    height: 100%;
    align-items: center;
    justify-content: center;
  }
  #nav {
    display: flex;
    width: 100%;
    height: 10vh;
    justify-content: space-around;
    align-items: center;
    font-size: 20px;
  }
  #biojs_link {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #nav > a {
    width: 400px;
    text-align: center;
  }
  #icon {
    width: 50px;
    height: 50px;
    margin-right: 10px;
  }
  a {
    font-size: inherit;
    text-decoration: none;
  }
  </style>
</head>

<body class="demo">
  <h1>Identifiers Widget Visualization</h1>

  <form id="customId">
    <label> Type an ID, in the form of <code>ns:someId</code>
      <input type="text" name="id">
      <button type="submit">Show me identifiers!</button>
    </label>
  </form>

  <!-- good use case-->
  <identifiers-widget id="defaultWidget" allowUrlFromWindow="true" identifier="fb:FBgn0004053" class="IdentifiersWidget"></identifiers-widget>
  <!-- error use case - bad identifier, but should handle other errors too.
  <identifiers-widget identifier="ASDASDASD" class="IdentifiersWidget"></identifiers-widget> -->

</body>

</html>