popup.html

<!doctype html>
<!--
 This page is shown when the extension button is clicked, because the
 "browser_action" field in manifest.json contains the "default_popup" key with
 value "popup.html".
 -->
<html>
  <head>
    <title>WikiWikiWikipedia</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="fontawesome-all.min.css">
    <style type="text/css">
      body {
        margin: 10px;
        white-space: nowrap;
      }

      h1 {
        font-size: 15px;
      }

      #container {
        align-items: center;
        display: flex;
        justify-content: space-between;
      }
    </style>

    <!--
      - JavaScript and HTML must be in separate files: see our Content Security
      - Policy documentation[1] for details and explanation.
      -
      - [1]: https://developer.chrome.com/extensions/contentSecurityPolicy
    -->
  <script src="popup.js"></script>
 <!--  <script src="fontawesome-all.min.js"></script> -->
  </head>

  <body>
    <div id="popup-header">
      <img id="popup-logo" src="icon.png"><p id="header-text">WikiWikiWikipedia</p>
    </div>
    <hr>
    <div class="play">
      <button class="btn" id="btn-play"><i class="far fa-play-circle"></i></button>
    </div>
    <div class="vol-slider">
      <button class="btn" id="btn-mute"><i class="fas fa-volume-down"></i></button>
      <input id="vol-control" type="range" min="0" max="100" step="1" oninput="setVolume(this.value)" onchange="setVolume(this.value)"></input>
      <button class="btn" id="btn-mute"><i class="fas fa-volume-up"></i></button>
    </div>
    
  </body>

</html>