added origin node, upgraded webapp with angularbootstrapmaterial and better files distribution

web/app.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var urlapi = "http://127.0.0.1:3014/";
+//var urlapi = "http://51.255.193.106:3014/";
+
+// Declare app level module which depends on views, and components
+angular.module('webApp', [
+    'ngRoute',
+    'ngMessages',
+    'angularBootstrapMaterial',
+    'app.navbar',
+    'app.main',
+    'app.network',
+    'app.sankey'
+]).
+config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
+        $locationProvider.hashPrefix('!');
+
+        $routeProvider.otherwise({
+            redirectTo: '/main'
+        });
+    }]);

web/bower.json

@@ -1,16 +1,19 @@
 {
-  "name": "goBlockchainDataAnalysis",
-  "description": "goBlockchainDataAnalysis",
-  "version": "0.0.0",
-  "homepage": "https://github.com/arnaucode/goBlockchainDataAnalysis",
-  "license": "MIT",
-  "private": true,
-  "dependencies": {
-    "angular": "^1.6.2",
-    "angular-route": "^1.6.1",
-    "angular-chart.js": "^1.1.1",
-    "vis": "^4.18.1",
-    "materialize": "^0.100.1",
-    "toastr": "^2.1.3"
-  }
+    "name": "goBlockchainDataAnalysis",
+    "description": "goBlockchainDataAnalysis",
+    "version": "0.0.0",
+    "homepage": "https://github.com/arnaucode/goBlockchainDataAnalysis",
+    "license": "MIT",
+    "private": true,
+    "dependencies": {
+        "angular": "^1.6.2",
+        "angular-route": "^1.6.1",
+        "angular-chart.js": "^1.1.1",
+        "vis": "^4.18.1",
+        "mui": "^0.9.20",
+        "angular-bootstrap-material": "abm#^0.1.4",
+        "angular-bootstrap": "^2.5.0",
+        "angular-messages": "^1.6.5",
+        "components-font-awesome": "^4.7.0"
+    }
 }

web/controllers.js

@@ -1,53 +0,0 @@
-var urlapi = "http://127.0.0.1:3014/";
-
-//var urlapi = document.location.href + "api/";
-console.log(urlapi);
-
-var app = angular.module("webApp", ['chart.js']);
-var nodes, edges, container;
-var options = {
-  layout:{
-    improvedLayout: false
-  }/*,
-    physics:{
-        //stabilization: false,
-       // enabled: false
-    }*/
-};
-app.controller("webCtrl", function($scope, $http) {
-    //chart
-    $scope.labels=[];
-    $scope.data=[];
-    $scope.nodes=[];
-    $scope.edges=[];
-
-    $http.get(urlapi + 'map')
-    .then(function (data) {
-      console.log('data success');
-      console.log(data); // for browser console
-      $scope.nodes=data.data.Nodes;
-      $scope.edges=data.data.Edges;
-      console.log($scope.nodes);
-      console.log($scope.edges);
-      $scope.showMap();
-        //alert("Ara mateix es mostren (entre persones i tweets): " + nodes.length + " nodes.");
-        //$scope.refreshChart();
-    }, function(data){
-        console.log('data error');
-        console.log(status);
-        console.log(data);
-    });
-
-    $scope.showMap=function(){
-      var nodes = $scope.nodes;
-      var edges = $scope.edges;
-
-      container = document.getElementById('mynetwork');
-      var data = {
-        nodes: nodes,
-        edges: edges
-      };
-      var network = new vis.Network(container, data, options);
-      toastr.info("map completed");
-    };
-});

web/css/colors.css

@@ -0,0 +1,531 @@
+/* red */
+.c_red50{
+    background: #FFEBEE!important;
+    color: #000000!important;
+}
+.c_red100{
+    background: #FFCDD2!important;
+    color: #000000!important;
+}
+.c_red200{
+    background: #EF9A9A!important;
+    color: #000000!important;
+}
+.c_red300{
+    background: #E57373!important;
+    color: #ffffff!important;
+}
+.c_red400{
+    background: #EF5350!important;
+    color: #ffffff!important;
+}
+.c_red500{
+    background: #F44336!important;
+    color: #ffffff!important;
+}
+.c_red600{
+    background: #E53935!important;
+    color: #ffffff!important;
+}
+.c_red700{
+    background: #D32F2F!important;
+    color: #ffffff!important;
+}
+.c_red800{
+    background: #C62828!important;
+    color: #ffffff!important;
+}
+.c_red900{
+    background: #B71C1C!important;
+    color: #ffffff!important;
+}
+
+.ctext_red400{
+    color: #EF5350!important;
+}
+.ctext_red500{
+    color: #F44336!important;
+}
+.ctext_red600{
+    color: #E53935!important;
+}
+
+/* pink */
+.c_pink50{
+    background: #FCE4EC!important;
+    color: #000000!important;
+}
+.c_pink100{
+    background: #F8BBD0!important;
+    color: #000000!important;
+}
+.c_pink200{
+    background: #F48FB1!important;
+    color: #000000!important;
+}
+.c_pink300{
+    background: #F06292!important;
+    color: #ffffff!important;
+}
+.c_pink400{
+    background: #EC407A!important;
+    color: #ffffff!important;
+}
+.c_pink500{
+    background: #E91E63!important;
+    color: #ffffff!important;
+}
+.c_pink600{
+    background: #D81B60!important;
+    color: #ffffff!important;
+}
+.c_pink700{
+    background: #C2185B!important;
+    color: #ffffff!important;
+}
+.c_pink800{
+    background: #AD1457!important;
+    color: #ffffff!important;
+}
+.c_pink900{
+    background: #880E4F!important;
+    color: #ffffff!important;
+}
+
+/* deepPurple */
+.c_deepPurple50{
+    background: #EDE7F6!important;
+    color: #000000!important;
+}
+.c_deepPurple100{
+    background: #D1C4E9!important;
+    color: #000000!important;
+}
+.c_deepPurple200{
+    background: #B39DDB!important;
+    color: #000000!important;
+}
+.c_deepPurple300{
+    background: #9575CD!important;
+    color: #ffffff!important;
+}
+.c_deepPurple400{
+    background: #7E57C2!important;
+    color: #ffffff!important;
+}
+.c_deepPurple500{
+    background: #673AB7!important;
+    color: #ffffff!important;
+}
+.c_deepPurple600{
+    background: #5E35B1!important;
+    color: #ffffff!important;
+}
+.c_deepPurple700{
+    background: #512DA8!important;
+    color: #ffffff!important;
+}
+.c_deepPurple800{
+    background: #4527A0!important;
+    color: #ffffff!important;
+}
+.c_deepPurple900{
+    background: #311B92!important;
+    color: #ffffff!important;
+}
+
+.c_deepPurpleG000to200{
+    background: -moz-linear-gradient(0deg, #ffffff 0%, #D1C4E9 100%)!important; /* ff3.6+ */
+    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #ffffff), color-stop(100%, #D1C4E9))!important; /* safari4+,chrome */
+    background: -webkit-linear-gradient(0deg, #ffffff 0%, #D1C4E9 100%)!important; /* safari5.1+,chrome10+ */
+    background: -o-linear-gradient(0deg, #ffffff 0%, #D1C4E9 100%)!important; /* opera 11.10+ */
+    background: -ms-linear-gradient(0deg, #ffffff 0%, #D1C4E9 100%)!important; /* ie10+ */
+    background: linear-gradient(90deg, #ffffff 0%, #D1C4E9 100%)!important; /* w3c */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#D1C4E9',GradientType=1 )!important; /* ie6-9 */
+}
+.c_deepPurpleG500to300{
+    background: -moz-linear-gradient(219deg, #9575CD 0%, #673AB7 100%)!important; /* ff3.6+ */
+    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #673AB7), color-stop(100%, #9575CD))!important; /* safari4+,chrome */
+    background: -webkit-linear-gradient(219deg, #9575CD 0%, #673AB7 100%)!important; /* safari5.1+,chrome10+ */
+    background: -o-linear-gradient(219deg, #9575CD 0%, #673AB7 100%)!important; /* opera 11.10+ */
+    background: -ms-linear-gradient(219deg, #9575CD 0%, #673AB7 100%)!important; /* ie10+ */
+    background: linear-gradient(231deg, #9575CD 0%, #673AB7 100%)!important; /* w3c */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#673AB7', endColorstr='#9575CD',GradientType=1 )!important; /* ie6-9 */
+    color: #ffffff!important;
+}
+.c_deepPurpleG300to500{
+    background: -moz-linear-gradient(42deg, #9575CD 0%, #673AB7 100%)!important; /* ff3.6+ */
+    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #9575CD), color-stop(100%, #673AB7))!important; /* safari4+,chrome */
+    background: -webkit-linear-gradient(42deg, #9575CD 0%, #673AB7 100%)!important; /* safari5.1+,chrome10+ */
+    background: -o-linear-gradient(42deg, #9575CD 0%, #673AB7 100%)!important; /* opera 11.10+ */
+    background: -ms-linear-gradient(42deg, #9575CD 0%, #673AB7 100%)!important; /* ie10+ */
+    background: linear-gradient(48deg, #9575CD 0%, #673AB7 100%)!important; /* w3c */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9575CD', endColorstr='#673AB7',GradientType=1 )!important; /* ie6-9 */
+    color: #ffffff!important;
+}
+
+/* indigo */
+.c_indigo50{
+    background:#E8EAF6!important;
+    color: #000000!important;
+}
+.c_indigo100{
+    background:#C5CAE9!important;
+    color: #000000!important;
+}
+.c_indigo200{
+    background:#9FA8DA!important;
+    color: #000000!important;
+}
+.c_indigo300{
+    background:#7986CB!important;
+    color: #ffffff!important;
+}
+.c_indigo400{
+    background:#5C6BC0!important;
+    color: #ffffff!important;
+}
+.c_indigo500{
+    background:#3F51B5!important;
+    color: #ffffff!important;
+}
+.c_indigo600{
+    background:#3949AB!important;
+    color: #ffffff!important;
+}
+.c_indigo700{
+    background:#303F9F!important;
+    color: #ffffff!important;
+}
+.c_indigo800{
+    background:#283593!important;
+    color: #ffffff!important;
+}
+.c_indigo900{
+    background:#1A237E!important;
+    color: #ffffff!important;
+}
+
+.ctext_indigo500{
+    color: #3F51B5!important;
+}
+
+/* blue */
+.c_blue50{
+    background: #E3F2FD!important;
+    color: #000000!important;
+}
+.c_blue100{
+    background: #BBDEFB!important;
+    color: #000000!important;
+}
+.c_blue200{
+    background: #90CAF9!important;
+    color: #000000!important;
+}
+.c_blue300{
+    background: #64B5F6!important;
+    color: #ffffff!important;
+}
+.c_blue400{
+    background: #42A5F5!important;
+    color: #ffffff!important;
+}
+.c_blue500{
+    background: #2196F3!important;
+    color: #ffffff!important;
+}
+.c_blue600{
+    background: #1E88E5!important;
+    color: #ffffff!important;
+}
+.c_blue700{
+    background: #1976D2!important;
+    color: #ffffff!important;
+}
+.c_blue800{
+    background: #1565C0!important;
+    color: #ffffff!important;
+}
+.c_blue900{
+    background: #0D47A1!important;
+    color: #ffffff!important;
+}
+
+
+/* cyan */
+.c_cyan50{
+    background: #E0F7FA!important;
+    color: #000000!important;
+}
+.c_cyan100{
+    background: #B2EBF2!important;
+    color: #000000!important;
+}
+.c_cyan200{
+    background: #80DEEA!important;
+    color: #000000!important;
+}
+.c_cyan300{
+    background: #4DD0E1!important;
+    color: #ffffff!important;
+}
+.c_cyan400{
+    background: #26C6DA!important;
+    color: #ffffff!important;
+}
+.c_cyan500{
+    background: #00BCD4!important;
+    color: #ffffff!important;
+}
+.c_cyan600{
+    background: #00ACC1!important;
+    color: #ffffff!important;
+}
+.c_cyan700{
+    background: #0097A7!important;
+    color: #ffffff!important;
+}
+.c_cyan800{
+    background: #00838F!important;
+    color: #ffffff!important;
+}
+.c_cyan900{
+    background: #006064!important;
+    color: #ffffff!important;
+}
+
+/* green */
+.c_green50{
+    background: #E8F5E9!important;
+    color: #000000!important;
+}
+.c_green100{
+    background: #C8E6C9!important;
+    color: #000000!important;
+}
+.c_green200{
+    background: #A5D6A7!important;
+    color: #000000!important;
+}
+.c_green300{
+    background: #81C784!important;
+    color: #ffffff!important;
+}
+.c_green400{
+    background: #66BB6A!important;
+    color: #ffffff!important;
+}
+.c_green500{
+    background: #4CAF50!important;
+    color: #ffffff!important;
+}
+.c_green600{
+    background: #43A047!important;
+    color: #ffffff!important;
+}
+.c_green700{
+    background: #388E3C!important;
+    color: #ffffff!important;
+}
+.c_green800{
+    background: #2E7D32!important;
+    color: #ffffff!important;
+}
+.c_green900{
+    background: #1B5E20!important;
+    color: #ffffff!important;
+}
+
+/* yellow */
+.c_yellow50{
+    background: #FFFDE7!important;
+    color: #000000!important;
+}
+.c_yellow100{
+    background: #FFF9C4!important;
+    color: #000000!important;
+}
+.c_yellow200{
+    background: #FFF59D!important;
+    color: #000000!important;
+}
+.c_yellow300{
+    background: #FFF176!important;
+    color: #ffffff!important;
+}
+.c_yellow400{
+    background: #FFEE58!important;
+    color: #ffffff!important;
+}
+.c_yellow500{
+    background: #FFEB3B!important;
+    color: #ffffff!important;
+}
+.c_yellow600{
+    background: #FDD835!important;
+    color: #ffffff!important;
+}
+.c_yellow700{
+    background: #FBC02D!important;
+    color: #ffffff!important;
+}
+.c_yellow800{
+    background: #F9A825!important;
+    color: #ffffff!important;
+}
+.c_yellow900{
+    background: #F57F17!important;
+    color: #ffffff!important;
+}
+
+/* orange */
+.c_orange50{
+    background: #FFF3E0!important;
+    color: #000000!important;
+}
+.c_orange100{
+    background: #FFE0B2!important;
+    color: #000000!important;
+}
+.c_orange200{
+    background: #FFCC80!important;
+    color: #000000!important;
+}
+.c_orange300{
+    background: #FFB74D!important;
+    color: #ffffff!important;
+}
+.c_orange400{
+    background: #FFA726!important;
+    color: #ffffff!important;
+}
+.c_orange500{
+    background: #FF9800!important;
+    color: #ffffff!important;
+}
+.c_orange600{
+    background: #FB8C00!important;
+    color: #ffffff!important;
+}
+.c_orange700{
+    background: #F57C00!important;
+    color: #ffffff!important;
+}
+.c_orange800{
+    background: #EF6C00!important;
+    color: #ffffff!important;
+}
+.c_orange900{
+    background: #E65100!important;
+    color: #ffffff!important;
+}
+
+/* grey */
+.c_grey50{
+    background: #FAFAFA!important;
+    color: #000000!important;
+}
+.c_grey100{
+    background: #F5F5F5!important;
+    color: #000000!important;
+}
+.c_grey200{
+    background: #EEEEEE!important;
+    color: #000000!important;
+}
+.c_grey300{
+    background: #E0E0E0!important;
+    color: #ffffff!important;
+}
+.c_grey400{
+    background: #BDBDBD!important;
+    color: #ffffff!important;
+}
+.c_grey500{
+    background: #9E9E9E!important;
+    color: #ffffff!important;
+}
+.c_grey600{
+    background: #757575!important;
+    color: #ffffff!important;
+}
+.c_grey700{
+    background: #616161!important;
+    color: #ffffff!important;
+}
+.c_grey800{
+    background: #424242!important;
+    color: #ffffff!important;
+}
+.c_grey900{
+    background: #212121!important;
+    color: #ffffff!important;
+}
+
+
+
+/* blue grey */
+.c_blueGrey50{
+    background: #ECEFF1!important;
+    color: #000000!important;
+}
+.c_blueGrey100{
+    background: #CFD8DC!important;
+    color: #000000!important;
+}
+.c_blueGrey200{
+    background: #B0BEC5!important;
+    color: #000000!important;
+}
+.c_blueGrey300{
+    background: #90A4AE!important;
+    color: #ffffff!important;
+}
+.c_blueGrey400{
+    background: #78909C!important;
+    color: #ffffff!important;
+}
+.c_blueGrey500{
+    background: #607D8B!important;
+    color: #ffffff!important;
+}
+.c_blueGrey600{
+    background: #546E7A!important;
+    color: #ffffff!important;
+}
+.c_blueGrey700{
+    background: #455A64!important;
+    color: #ffffff!important;
+}
+.c_blueGrey800{
+    background: #37474F!important;
+    color: #ffffff!important;
+}
+.c_blueGrey900{
+    background: #263238!important;
+    color: #ffffff!important;
+}
+
+
+.ctext_blueGrey500{
+    color: #607D8B!important;
+}
+
+.c_blueGradient1{
+    background: #2d4a56!important;
+    background: -moz-linear-gradient(left, #2d4a56 0%, #1c2b36 100%)!important;
+    background: -webkit-linear-gradient(left, #2d4a56 0%,#1c2b36 100%)!important;
+    background: linear-gradient(to right, #2d4a56 0%,#1c2b36 100%)!important;
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2d4a56', endColorstr='#1c2b36',GradientType=1 )!important;
+
+    color: rgba(255,255,255,0.9)!important;
+}
+.c_blue2{
+    background: rgb(28,43,54)!important;
+    color: rgba(255,255,255,0.8)!important;
+}
+
+.cf_green2{
+    color: rgb(32,158,145)!important;
+}

web/index.html

@@ -2,27 +2,25 @@
 <html>
 
 <head>
-    <meta charset=utf-8>
-    <!--Import Google Icon Font-->
-    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-    <!--Import materialize.css-->
-    <link type="text/css" rel="stylesheet" href="bower_components/materialize/dist/css/materialize.min.css" media="screen,projection" />
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>goBlockchainDataAnalysis</title>
 
-    <!--Let browser know website is optimized for mobile-->
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:400,700'>
+    <!-- Material Design fonts -->
+    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700">
+    <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
+
+    <link rel="stylesheet" href="bower_components/components-font-awesome/css/font-awesome.min.css">
 
 
+    <link href="css/colors.css" rel="stylesheet">
 
-    <script type="text/javascript" src="bower_components/vis/dist/vis.min.js"></script>
-    <link href="bower_components/vis/dist/vis.min.css" rel="stylesheet" type="text/css" />
-    <link href="bower_components/vis/dist/vis-network.min.css" rel="stylesheet" type="text/css" />
+    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
+    <link href="css/ionic.app.css" rel="stylesheet">
+    -->
     <style type="text/css">
         #mynetwork {
-            /*width: 75%;*/
-            height: 600px;
-            border: 1px solid lightgray;
-            display: inline-block;
-            top: 0px;
             background: black;
         }
 
@@ -54,63 +52,44 @@
     </style>
 </head>
 
-<body>
+<body ng-app="webApp">
+    <div ng-include="'views/navbar.html'"></div>
+
+    <div ng-view></div>
 
 
 
+    <!-- Angular js -->
+    <script src="bower_components/angular/angular.js"></script>
+    <script src="bower_components/angular-route/angular-route.js"></script>
+    <script src="bower_components/angular-messages/angular-messages.js"></script>
 
-    <nav>
-        <div class="nav-wrapper teal lighten-2">
-            <a href="#" class="brand-logo">goBlockchainDataAnalysis</a>
-            <ul id="nav-mobile" class="right hide-on-med-and-down">
-                <li><a href="https://github.com/arnaucode/goBlockchainDataAnalysis" target="_blank"><b>Code</b></a></li>
-            </ul>
-        </div>
-    </nav>
+    <!-- Bootstrap -->
+    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
+    <!-- Bootstrap Material Design -->
+    <link rel="stylesheet" href="bower_components/bootstrap-material-design/dist/css/bootstrap-material-design.css">
+    <link rel="stylesheet" href="bower_components/bootstrap-material-design/dist/css/ripples.css">
+
+    <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
+    <script src="bower_components/angular-bootstrap-material/dist/angular-bootstrap-material.js"></script>
+
+    <!-- Angular Chart -->
+    <script src="bower_components/chart.js/dist/Chart.min.js"></script>
+    <script src="bower_components/angular-chart.js/dist/angular-chart.min.js"></script>
 
 
-    <div class="row" ng-app="webApp" ng-controller="webCtrl">
+    <!-- visjs -->
+    <script type="text/javascript" src="bower_components/vis/dist/vis.min.js"></script>
+    <link href="bower_components/vis/dist/vis.min.css" rel="stylesheet" type="text/css" />
+    <link href="bower_components/vis/dist/vis-network.min.css" rel="stylesheet" type="text/css" />
 
-        <div class="col s3 o-height600">
 
-            <b>Comptes:</b><br>
-            <div class="input-field col s12">
-                <i class="material-icons prefix">search</i>
-                <input ng-model="userfilter" id="search" type="text" class="validate">
-                <label for="search">Search...</label>
-            </div>
-            <ul class="collection o-overflowScroll o-height500">
-                <li ng-click="clickUser(node)" class="collection-item o-mouseoverGrey" ng-repeat="node in nodes">
-                    <img ng-src="{{node.image}}" alt="" class="circle">
-                    <span class="title">{{node.id}}</title>
-                <i class="material-icons">launch</i>
-              </a>
-          </li>
-        </ul>
-      </div>
-      <div id="mynetwork" class="col s9">
-      </div>
-    </div>
-    <div class="row">
-    </div>
+    <!-- app's js -->
+    <script src="app.js"></script>
+    <script src="views/navbar.js"></script>
+    <script src="views/main/main.js"></script>
+    <script src="views/network/network.js"></script>
+    <script src="views/sankey/sankey.js"></script>
+</body>
 
-      <!--Import jQuery before materialize.js-->
-      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
-      <script type="text/javascript" src="bower_components/materialize/dist/js/materialize.min.js"></script>
-
-      <!--<script src="/socket.io/socket.io.js"></script>-->
-
-      <!-- Angular js -->
-      <script src="bower_components/angular/angular.js"></script>
-      <script src="bower_components/angular-route/angular-route.js"></script>
-
-      <!-- Angular Chart -->
-      <script src="bower_components/chart.js/dist/Chart.min.js"></script>
-      <script src="bower_components/angular-chart.js/dist/angular-chart.min.js"></script>
-
-      <link type="text/css" rel="stylesheet" href="bower_components/toastr/toastr.css"/>
-      <script type="text/javascript" src="bower_components/toastr/toastr.js"></script>
-
-      <script type="text/javascript" src="controllers.js"></script>
-    </body>
-  </html>
+</html>

web/views/main/main.html

@@ -0,0 +1,54 @@
+<div class="container">
+    <div class="row">
+        <div class="col-sm-4">
+            <div class="panel">
+                <div class="panel-heading c_blueGrey300">
+                    <h3 class="panel-title">Last blocks</h3>
+                </div>
+                <div class="panel-body" style="max-height: 500px;overflow-y: scroll;">
+
+                </div>
+            </div>
+        </div>
+        <div class="col-sm-4">
+            <div class="panel">
+                <div class="panel-heading c_blueGrey300">
+                    <h3 class="panel-title">Last transactions</h3>
+                </div>
+                <div class="panel-body" style="max-height: 500px;overflow-y: scroll;">
+                    <table class="table table-striped table-hover ">
+                        <thead>
+                            <tr>
+                                <th>Hash</th>
+                                <th>From</th>
+                                <th>Date</th>
+                                <th>nºSubtx</th>
+                                <th></th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr ng-repeat="tx in txs">
+                                <td>
+                                    txhash
+                                </td>
+                                <td>{{tx.f}}</td>
+                                <td>{{tx.date}}</td>
+                                <td>{{tx.subtx.length}}</td>
+                                <td><a ng-href="#!/tx/{{tx.id}}">View</a></td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+        <div class="col-sm-4">
+            <div class="panel">
+                <div class="panel-heading c_blueGrey300">
+                    <h3 class="panel-title">Other</h3>
+                </div>
+                <div class="panel-body">
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

web/views/main/main.js

@@ -0,0 +1,14 @@
+'use strict';
+
+angular.module('app.main', ['ngRoute'])
+
+.config(['$routeProvider', function($routeProvider) {
+  $routeProvider.when('/main', {
+    templateUrl: 'views/main/main.html',
+    controller: 'MainCtrl'
+  });
+}])
+
+.controller('MainCtrl', function($scope, $http) {
+    
+});

web/views/navbar.html

@@ -0,0 +1,43 @@
+<div ng-controller="NavbarCtrl">
+<div class="navbar c_grey800">
+    <div class="container-fluid">
+        <div class="navbar-header">
+            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
+            <a class="navbar-brand" href="/">goBlockchainDataAnalysis</a>
+        </div>
+        <div class="navbar-collapse collapse navbar-responsive-collapse">
+            <ul class="nav navbar-nav">
+                <li class="active"><a href="#!/network">Network</a></li>
+                <li><a href="#!/sankey">Sankey diagram</a></li>
+                <li><a href="javascript:void(0)">Timeline</a></li>
+            </ul>
+            <form class="navbar-form navbar-left">
+                <div class="form-group">
+                    <input class="form-control col-md-8" placeholder="Search" type="text">
+                </div>
+            </form>
+            <ul class="nav navbar-nav navbar-right">
+                <li><a href="https://github.com/arnaucode/goBlockchainDataAnalysis" target="_blank">Info</a></li>
+                <li class="dropdown">
+                    <a href="bootstrap-elements.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Settings
+            <b class="caret"></b></a>
+                    <ul class="dropdown-menu">
+                        <li><a href="javascript:void(0)">Action</a></li>
+                        <li><a href="javascript:void(0)">Another action</a></li>
+                        <li><a href="javascript:void(0)">Something else here</a></li>
+                        <li class="divider"></li>
+                        <li><a href="javascript:void(0)">Separated link</a></li>
+                    </ul>
+                </li>
+            </ul>
+        </div>
+    </div>
+</div>
+<!--
+<div ng-click="goBack()" class="btn"><span class="glyphicon glyphicon-arrow-left"></span> Back</div>
+-->
+</div>

web/views/navbar.js

@@ -0,0 +1,18 @@
+'use strict';
+
+angular.module('app.navbar', ['ngRoute'])
+
+    .config(['$routeProvider', function($routeProvider) {
+        $routeProvider.when('/navbar', {
+            templateUrl: 'views/navbar/navbar.html',
+            controller: 'NavbarCtrl'
+        });
+    }])
+
+    .controller('NavbarCtrl', function($scope, $http, $routeParams, $location) {
+        $scope.locationHash = $location.path();
+        $scope.goBack = function() {
+            console.log("goBack");
+            window.history.back();
+        };
+    });

web/views/network/network.html

@@ -0,0 +1,12 @@
+<div class="container">
+    <div class="row">
+        <div class="col-sm-12">
+            <div class="panel-heading c_blueGrey300">
+                <h3 class="panel-title">Network</h3>
+            </div>
+            <div class="panel-body">
+                <div id="mynetwork" style="height:500px;"></div>
+            </div>
+        </div>
+    </div>
+</div>

web/views/network/network.js

@@ -0,0 +1,53 @@
+'use strict';
+
+angular.module('app.network', ['ngRoute'])
+
+    .config(['$routeProvider', function($routeProvider) {
+        $routeProvider.when('/network', {
+            templateUrl: 'views/network/network.html',
+            controller: 'NetworkCtrl'
+        });
+    }])
+
+    .controller('NetworkCtrl', function($scope, $http, $routeParams) {
+        $scope.data = [];
+        $scope.nodes = [];
+        $scope.edges = [];
+        var nodes, edges, container;
+        var options = {
+            layout: {
+                improvedLayout: false
+            }
+            /*,
+                physics:{
+                    //stabilization: false,
+                   // enabled: false
+                }*/
+        };
+
+
+        $scope.showMap = function() {
+            var nodes = $scope.nodes;
+            var edges = $scope.edges;
+
+            var container = document.getElementById('mynetwork');
+            var data = {
+                nodes: nodes,
+                edges: edges
+            };
+            var network = new vis.Network(container, data, options);
+        };
+
+        $http.get(urlapi + 'map')
+            .then(function(data, status, headers, config) {
+                console.log('data success');
+                console.log(data);
+
+                $scope.nodes = data.data.nodes;
+                $scope.edges = data.data.edges;
+                $scope.showMap();
+            }, function(data, status, headers, config) {
+                console.log('data error');
+            });
+
+    });

web/views/sankey/sankey.html

@@ -0,0 +1,12 @@
+<div class="container">
+    <div class="row">
+        <div class="col-sm-12">
+            <div class="panel-heading c_blueGrey300">
+                <h3 class="panel-title">Sankey</h3>
+            </div>
+            <div class="panel-body">
+                
+            </div>
+        </div>
+    </div>
+</div>

web/views/sankey/sankey.js

@@ -0,0 +1,15 @@
+'use strict';
+
+angular.module('app.sankey', ['ngRoute'])
+
+    .config(['$routeProvider', function($routeProvider) {
+        $routeProvider.when('/sankey', {
+            templateUrl: 'views/sankey/sankey.html',
+            controller: 'SankeyCtrl'
+        });
+    }])
+
+    .controller('SankeyCtrl', function($scope, $http, $routeParams) {
+        
+
+    });