popup.html

<!DOCTYPE html>
<html>

<head>
    <script type="text/javascript" src="bower_components\jquery\dist\jquery.min.js"></script>
    <script type="text/javascript" src="bower_components\semantic\dist\semantic.min.js"></script>
    <script type="text/javascript" src="popup.js"></script>
    <link rel="stylesheet" href="bower_components\semantic\dist\semantic.min.css">
</head>

<body>
    <button id="StartChecking" class="ui button">Start automatically checking WAM</button>
    <div class="ui checkbox">
        <input type="checkbox" name="OnlyWhenIncrease">
        <!-- <label>Notify only when my WAM increases<i class="heartbeat icon"></i></label> -->
    </div>
    <div id="dimmer_successful" class="ui dimmer">
        <div class="content">
            <div class="center">
                <h2 class="ui inverted icon header">
          <i class="sticky note icon"></i>
          When you don't want to monitor, just close the tab of your result. <br /> (aka Don't close that tab) 
        </h2>
            </div>
        </div>
    </div>
    <div id="dimmer_fail" class="ui dimmer">
        <div class="content">
            <div class="center">
                <h2 class="ui inverted icon header">
          <i class="remove circle icon"></i>
          You have to open the my.unimelb page which shows your results of all the subjects
        </h2>
            </div>
        </div>
    </div>
    <div id="Monitoring" class="ui dimmer">
        <div class="content">
            <div class="center">
                <h2 class="ui inverted icon header">
          <i class="checkmark icon"></i>
          You WAM is currently being monitored. <br /> Just wait for it~
        </h2>
            </div>
        </div>
    </div>
</body>

</html>