SPIN
/
HOSN-app


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
							<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>HybridOSN - Dashboard - Trending Topics</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link

      rel="stylesheet"

      href="https://bootswatch.com/4/darkly/bootstrap.min.css"

    />
  </head>
  <body>
    <nav class="navbar navbar-expand-md navbar-light bg-light">
      <a href="#" class="navbar-brand">HybridOSN - Dashboard</a>

      <button

        class="navbar-toggler"

        type="button"

        data-toggle="collapse"

        data-target="#navbarSupportedContent"

        aria-controls="navbarSupportedContent"

        aria-expanded="false"

        aria-label="Toggle navigation"

      >
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <span

              class="nav-link"

              data-toggle="modal"

              data-target="#aboutModal"

            >
              About
            </span>
          </li>
        </ul>
      </div>
    </nav>

    <!-- Modal -->
    <div

      class="modal fade"

      id="aboutModal"

      tabindex="-1"

      role="dialog"

      aria-hidden="true"

    >
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">About HybridOSN</h5>
            <button

              type="button"

              class="close"

              data-dismiss="modal"

              aria-label="Close"

            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body"><p>tbd;</p></div>
        </div>
      </div>
    </div>

    <div class="container mt-3">
      <h1>Trending Topics</h1>
      <div class="row">
        <div class="col-md-8">
          <!--

            D3.js: Bubble for each hashtag, size is relative to popularity

          -->
        </div>
        <div class="col-md-4">
          <table class="table table-striped table-hover">
            <thead>
              <tr>
                <th scope="col">Rank</th>
                <th scope="col">Hashtag</th>
                <th scope="col">Counts</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row">1</th>
                <td>private</td>
                <td>74</td>
              </tr>
              <tr>
                <th scope="row">2</th>
                <td>P2P</td>
                <td>38</td>
              </tr>
              <tr>
                <th scope="row">3</th>
                <td>Darmstadt</td>
                <td>11</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
  </body>
</html>