|
|
@@ -0,0 +1,115 @@
|
|
|
+<!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>
|
|
|
+
|
|
|
+
|
|
|
+ <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">×</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>
|
Carsten Porth