diff --git a/api.php b/api.php
new file mode 100644
index 0000000..23cd699
--- /dev/null
+++ b/api.php
@@ -0,0 +1,26 @@
+<?php
+class write {
+  public static function do($json) {
+    print_r(json_encode($json));
+    exit();
+  }
+
+  public static function error($n, $msg) {
+    self::do(["error" => $n, "msg" => $msg]);
+  }
+}
+
+if (!isset($_GET["action"])) {
+  write::error(1, "No action provided");
+}
+
+switch ($_GET["action"]) {
+  case "getgraf":
+  $graf = file_get_contents("https://dirba.io/grafo/api.php?req=getGraph");
+  echo $graf;
+  break;
+
+  default:
+  write::error(2, "Unknown action");
+}
+?>
diff --git a/css/styles.css b/css/styles.css
new file mode 100644
index 0000000..5c6b812
--- /dev/null
+++ b/css/styles.css
@@ -0,0 +1,122 @@
+html, body {
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #060606;
+  color: white;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  user-select: none!important;
+  font-family: 'Roboto';
+}
+
+#graf {
+  width: 100%;
+  height: 100%;
+}
+
+#dialog {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 300px;
+  height: 100%;
+  background-color: white;
+  color: black;
+  z-index: 120;
+  overflow-y: auto;
+}
+
+#backdrop {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, .5);
+  z-index: 110;
+}
+
+#dialog-vertex, #dialog-edge{
+  padding: 8px;
+  user-select: auto;
+}
+
+#dialog h2 {
+  font-weight: bold;
+  font-size: 20px;
+}
+
+#dialog h3 {
+  font-weight: bold;
+  font-size: 16px;
+  margin-bottom: 0;
+}
+
+#quit-dialog, #quit2-dialog {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+}
+
+#min-dialog, #max-dialog {
+  position: absolute;
+  top: 8px;
+  right: 48px;
+}
+
+#min-dialog {
+  display: none;
+}
+
+#summary-dialog {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100px;
+  background-color: white;
+  color: black;
+  z-index: 120;
+}
+
+#summary-vertex {
+  padding: 8px;
+  user-select: auto;
+}
+
+#summary-dialog h2 {
+  font-weight: bold;
+  font-size: 20px;
+  margin: 0;
+}
+
+#zoomin {
+  position: absolute;
+  right: 10px;
+  bottom: 60px;
+  z-index: 100;
+}
+
+#zoomout {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  z-index: 100;
+}
+
+@media (max-width: 700px) {
+  #dialog {
+    width: Calc(100% - 32px)!important;
+    height: Calc(100% - 32px)!important;
+    margin: 16px;
+  }
+
+  #backdrop {
+    display: block;
+  }
+
+  #min-dialog {
+    display: block!important;
+  }
+}
diff --git a/graf.php b/graf.php
new file mode 100644
index 0000000..ed44ecb
--- /dev/null
+++ b/graf.php
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Graf alternatiu FME</title>
+
+    <meta name=viewport content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link rel="manifest" href="manifest.json">
+
+    <link rel="stylesheet" href="css/styles.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue_grey-blue.min.css" />
+
+    <!-- Apple web app -->
+    <link rel="apple-touch-icon" href="img/graf.png">
+    <meta name="apple-mobile-web-app-title" content="Graf FME">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+  </head>
+  <body>
+    <button id="zoomin" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-js-ripple-effect mdl-button--colored"><i class="material-icons">zoom_in</i></button>
+    <button id="zoomout" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-js-ripple-effect mdl-button--colored"><i class="material-icons">zoom_out</i></button>
+
+    <div id="backdrop-container" style="display: none;">
+      <div id="backdrop"></div>
+    </div>
+    <div id="dialog" class="mdl-shadow--2dp" style="display: none;">
+      <button id="quit-dialog" class="mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect"><i class="material-icons">close</i></button>
+      <button id="min-dialog" class="mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect"><i class="material-icons">remove</i></button>
+      <div id="dialog-vertex">
+        <h2 data-fill="name"></h2>
+        <ul>
+          <li><b>Any:</b> <span data-fill="year"></span></li>
+          <li><b>Sexe:</b> <span data-fill="sex"></span></li>
+          <li><b>ID:</b> <span data-fill="id"></span></li>
+        </ul>
+        <h3>Arestes (<span data-fill="n-edges"></span>):</h3>
+        <ul data-fill="edges">
+        </ul>
+      </div>
+      <div id="dialog-edge" style="display: none;">
+      </div>
+    </div>
+    <div id="summary-dialog" class="mdl-shadow--2dp" style="display: none;">
+      <button id="quit2-dialog" class="mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect"><i class="material-icons">close</i></button>
+      <button id="max-dialog" class="mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect"><i class="material-icons">add</i></button>
+      <div id="summary-vertex">
+        <h2 data-fill="name"></h2>
+        <p><span data-fill="year"></span>, <span data-fill="sex"></span>, <span data-fill="id"></span></p>
+      </div>
+    </div>
+
+    <div id="graf"></div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/sigma.js/1.2.0/sigma.min.js"></script>
+    <script src="js/script.js"></script>
+    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
+    <!--<script src="js/service-worker.js"></script>-->
+  </body>
+</html>
diff --git a/img/graf.png b/img/graf.png
new file mode 100644
index 0000000..f97fe5d
--- /dev/null
+++ b/img/graf.png
Binary files differ
diff --git a/img/graf.svg b/img/graf.svg
new file mode 100644
index 0000000..271d998
--- /dev/null
+++ b/img/graf.svg
@@ -0,0 +1,28 @@
+<svg width="194" height="194" xmlns="http://www.w3.org/2000/svg">
+ <g>
+  <title>Layer 1</title>
+  <ellipse fill="#060606" stroke-width="0" fill-opacity="null" cx="97" cy="97" id="svg_10" rx="88" ry="88"/>
+ </g>
+ <g>
+  <title>Layer 2</title>
+  <g id="svg_9">
+   <line fill-opacity="null" x1="48" y1="138" x2="98.5" y2="99" id="svg_1" stroke-linejoin="null" stroke-linecap="null" fill="none" stroke="#FFF" stroke-width="2" stroke-opacity="null"/>
+   <line fill-opacity="null" x1="98.5" y1="99" x2="105" y2="150" id="svg_1" stroke-linejoin="null" stroke-linecap="null" fill="none" stroke="#FFF" stroke-width="2" stroke-opacity="null"/>
+   <line fill-opacity="null" x1="53" y1="76" x2="149" y2="84" id="svg_1" stroke-linejoin="null" stroke-linecap="null" fill="none" stroke="#FFF" stroke-width="2" stroke-opacity="null"/>
+   <line fill-opacity="null" x1="53" y1="76" x2="105" y2="150" id="svg_1" stroke-linejoin="null" stroke-linecap="null" fill="none" stroke="#FFF" stroke-width="2" stroke-opacity="null"/>
+   <line fill-opacity="null" x1="98.5" y1="99" x2="149" y2="84" id="svg_1" stroke-linejoin="null" stroke-linecap="null" fill="none" stroke="#FFF" stroke-width="2" stroke-opacity="null"/>
+   <line fill-opacity="null" x1="53" y1="76" x2="98.5" y2="99" id="svg_1" stroke-linejoin="null" stroke-linecap="null" fill="none" stroke="#FFF" stroke-width="2" stroke-opacity="null"/>
+   <line fill-opacity="null" x1="53" y1="76" x2="121" y2="35" id="svg_1" stroke-linejoin="null" stroke-linecap="null" fill="none" stroke="#FFF" stroke-width="2" stroke-opacity="null"/>
+  </g>
+ </g>
+ <g>
+  <title>Layer 3</title>
+  <ellipse fill="#d61c08" cx="48" cy="138" id="svg_2" rx="8" ry="8"/>
+  <ellipse fill="#0159aa" cx="98.5" cy="99" id="svg_3" rx="8" ry="8"/>
+  <ellipse fill="#0159aa" cx="105" cy="150" id="svg_4" rx="8" ry="8"/>
+  <ellipse fill="#d61c08" cx="53" cy="76" id="svg_5" rx="8" ry="8"/>
+  <ellipse fill="#d61c08" cx="149" cy="84" id="svg_6" rx="8" ry="8"/>
+  <ellipse fill="#0159aa" cx="121" cy="35" id="svg_7" rx="8" ry="8"/>
+  <ellipse fill="#0ca80a" cx="147" cy="123" id="svg_8" rx="8" ry="8"/>
+  </g>
+</svg>
diff --git a/index.php b/index.php
new file mode 100644
index 0000000..ba99d6f
--- /dev/null
+++ b/index.php
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Graf alternatiu FME</title>
+
+    <meta name=viewport content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue_grey-blue.min.css" />
+
+    <style>
+
+    </style>
+  </head>
+  <body>
+    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
+      <header class="mdl-layout__header">
+        <div class="mdl-layout__header-row">
+          <!-- Title -->
+          <span class="mdl-layout-title">Graf alternatiu FME</span>
+        </div>
+      </header>
+      <main class="mdl-layout__content">
+        <div class="page-content">
+          <div class="mdl-grid">
+            <div class="mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-card">
+              <div class="mdl-card__title mdl-card--expand">
+                <h2 class="mdl-card__title-text">El graf</h2>
+              </div>
+              <div class="mdl-card__supporting-text">
+                El graf
+              </div>
+              <div class="mdl-card__actions mdl-card--border">
+                <a href="graf.php" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
+                  Ves-hi
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
+  </body>
+</html>
diff --git a/js/script.js b/js/script.js
new file mode 100644
index 0000000..4e74231
--- /dev/null
+++ b/js/script.js
@@ -0,0 +1,191 @@
+var s, graf;
+
+function xhr(method, url, params, callback) {
+  var http = new XMLHttpRequest();
+  if (method == "POST") {
+    http.open(method, url, true);
+  } else {
+    if (params != "") {
+      http.open(method, url+"?"+params, true);
+    } else {
+      http.open(method, url, true);
+    }
+  }
+	http.onload = function() {
+    if(this.status != 200) {
+      console.warn("Attention, status code "+this.status+" when loading via xhr url "+url);
+    }
+    callback(this.responseText, this.status);
+  };
+  if (method == "POST") {
+    http.setRequestHeader("Content-type","application/x-www-form-urlencoded");
+    http.send(params);
+  } else {
+    http.send();
+  }
+}
+
+var dialog = {
+  fill: function(data, text, html=false) {
+    var el = document.querySelectorAll("*[data-fill=\""+data+"\"]");
+    for (var i in el) {
+      if (html === true) {
+        el[i].innerHTML = text;
+      } else {
+        el[i].innerText = text;
+      }
+    }
+  },
+  show: function(id, neighbors) {
+    var neighbors = Object.values(neighbors);
+
+    this.fill("name", graf.nodes[id].name);
+    this.fill("year", graf.nodes[id].year);
+    this.fill("sex", graf.nodes[id].sex);
+    this.fill("id", "#"+id);
+    this.fill("n-edges", neighbors.length);
+
+    var list = "";
+    neighbors.forEach(function (a) {
+      list += "<li><b>"+graf.nodes[id].name+" - "+a.label+":</b> "+(graf.edges[id+"_"+a.id] ? graf.edges[id+"_"+a.id].votes : graf.edges[a.id+"_"+id].votes)+" vots</li>";
+    });
+    this.fill("edges", list, true);
+
+    if (window.innerWidth > 700) {
+      document.querySelector("#dialog").style.display = "block";
+      document.querySelector("#backdrop-container").style.display = "block";
+    } else {
+      document.querySelector("#summary-dialog").style.display = "block";
+    }
+  },
+  close: function() {
+    document.querySelector("#dialog").style.display = "none";
+    document.querySelector("#summary-dialog").style.display = "none";
+    document.querySelector("#backdrop-container").style.display = "none";
+
+    s.graph.nodes().forEach(function(n) {
+      n.color = n.originalColor;
+    });
+
+    s.graph.edges().forEach(function(e) {
+      e.color = "#fff";
+    });
+
+    s.refresh();
+  },
+  max: function() {
+    document.querySelector("#summary-dialog").style.display = "none";
+    document.querySelector("#dialog").style.display = "block";
+  },
+  min: function() {
+    document.querySelector("#dialog").style.display = "none";
+    document.querySelector("#summary-dialog").style.display = "block";
+  }
+};
+
+function init() {
+    sigma.classes.graph.addMethod("neighbors", function(nodeId) {
+      var k,
+          neighbors = {},
+          index = this.allNeighborsIndex[nodeId] || [];
+
+      for (k in index) {
+        neighbors[k] = this.nodesIndex[k];
+      }
+
+      return neighbors;
+    });
+
+    s = new sigma({
+      renderers: [{
+        container: "graf",
+        type: "webgl"
+      }],
+      settings: {
+        defaultEdgeColor: "#fff",
+        edgeColor: "default",
+        defaultLabelColor: "#fff",
+        autoRescale: false,
+        zoomMax: 10,
+        //enableEdgeHovering: true,
+        font: "Roboto",
+        labelThreshold: 5
+      }
+    });
+
+    xhr("GET", "api.php", "action=getgraf", function(responseText, status) {
+      graf = JSON.parse(responseText);
+
+      console.log(graf);
+
+      for (var i in graf.nodes) {
+        var ncolor = (graf.nodes[i].sex == "F" ? "#d61c08" : (graf.nodes[i].sex == "M" ? "#0159aa" : "#0ca80a"));
+
+        s.graph.addNode({
+          id: graf.nodes[i].id,
+          label: graf.nodes[i].name,
+          x: graf.nodes[i].x,
+          y: graf.nodes[i].y,
+          size: 10,
+          color: ncolor,
+          originalColor: ncolor
+        });
+      }
+
+      for (var i in graf.edges) {
+        s.graph.addEdge({
+          id: i,
+          source: graf.edges[i].a,
+          target: graf.edges[i].b,
+          size: Math.min(4, Math.max((7/(2*Math.pow(20, 2)))*Math.pow(graf.edges[i].votes, 2) + 1/2, 0.5))
+        });
+      }
+
+      s.bind('clickNode', function(e) {
+        var nodeId = e.data.node.id,
+            toKeep = s.graph.neighbors(nodeId);
+        //toKeep[nodeId] = e.data.node;
+
+        s.graph.nodes().forEach(function(n) {
+          if (toKeep[n.id] || n.id == nodeId) {
+            n.color = n.originalColor;
+          } else {
+            n.color = '#333';
+          }
+        });
+
+        s.graph.edges().forEach(function(e) {
+          if ((e.source == nodeId || e.target == nodeId) && (toKeep[e.source] || toKeep[e.target])) {
+            e.color = '#fff';
+          } else {
+            e.color = '#333';
+          }
+        });
+
+        s.refresh();
+
+        dialog.show(nodeId, toKeep);
+      });
+
+      document.querySelector("#quit-dialog").addEventListener("click", dialog.close);
+      document.querySelector("#quit2-dialog").addEventListener("click", dialog.close);
+      document.querySelector("#max-dialog").addEventListener("click", dialog.max);
+      document.querySelector("#min-dialog").addEventListener("click", dialog.min);
+
+      document.querySelector("#zoomin").addEventListener("click", function() {
+        s.camera.goTo({
+          ratio: Math.max(s.camera.settings("zoomMin"), s.camera.ratio / Math.sqrt(2))
+        });
+      });
+
+      document.querySelector("#zoomout").addEventListener("click", function() {
+        s.camera.goTo({
+          ratio: Math.min(s.camera.settings("zoomMax"), s.camera.ratio * Math.sqrt(2))
+        });
+      });
+
+      s.refresh();
+    });
+}
+
+window.addEventListener("load", init);
diff --git a/js/service-worker.js b/js/service-worker.js
new file mode 100644
index 0000000..f5ed189
--- /dev/null
+++ b/js/service-worker.js
@@ -0,0 +1,102 @@
+/*
+ Copyright 2015 Google Inc. All Rights Reserved.
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+
+'use strict';
+
+// Incrementing CACHE_VERSION will kick off the install event and force previously cached
+// resources to be cached again.
+const CACHE_VERSION = 1;
+let CURRENT_CACHES = {
+  offline: 'offline-v' + CACHE_VERSION
+};
+const OFFLINE_URL = 'offline.html';
+
+function createCacheBustedRequest(url) {
+  let request = new Request(url, {cache: 'reload'});
+  // See https://fetch.spec.whatwg.org/#concept-request-mode
+  // This is not yet supported in Chrome as of M48, so we need to explicitly check to see
+  // if the cache: 'reload' option had any effect.
+  if ('cache' in request) {
+    return request;
+  }
+
+  // If {cache: 'reload'} didn't have any effect, append a cache-busting URL parameter instead.
+  let bustedUrl = new URL(url, self.location.href);
+  bustedUrl.search += (bustedUrl.search ? '&' : '') + 'cachebust=' + Date.now();
+  return new Request(bustedUrl);
+}
+
+self.addEventListener('install', event => {
+  event.waitUntil(
+    // We can't use cache.add() here, since we want OFFLINE_URL to be the cache key, but
+    // the actual URL we end up requesting might include a cache-busting parameter.
+    fetch(createCacheBustedRequest(OFFLINE_URL)).then(function(response) {
+      return caches.open(CURRENT_CACHES.offline).then(function(cache) {
+        return cache.put(OFFLINE_URL, response);
+      });
+    })
+  );
+});
+
+self.addEventListener('activate', event => {
+  // Delete all caches that aren't named in CURRENT_CACHES.
+  // While there is only one cache in this example, the same logic will handle the case where
+  // there are multiple versioned caches.
+  let expectedCacheNames = Object.keys(CURRENT_CACHES).map(function(key) {
+    return CURRENT_CACHES[key];
+  });
+
+  event.waitUntil(
+    caches.keys().then(cacheNames => {
+      return Promise.all(
+        cacheNames.map(cacheName => {
+          if (expectedCacheNames.indexOf(cacheName) === -1) {
+            // If this cache name isn't present in the array of "expected" cache names,
+            // then delete it.
+            console.log('Deleting out of date cache:', cacheName);
+            return caches.delete(cacheName);
+          }
+        })
+      );
+    })
+  );
+});
+
+self.addEventListener('fetch', event => {
+  // We only want to call event.respondWith() if this is a navigation request
+  // for an HTML page.
+  // request.mode of 'navigate' is unfortunately not supported in Chrome
+  // versions older than 49, so we need to include a less precise fallback,
+  // which checks for a GET request with an Accept: text/html header.
+  if (event.request.mode === 'navigate' ||
+      (event.request.method === 'GET' &&
+       event.request.headers.get('accept').includes('text/html'))) {
+    console.log('Handling fetch event for', event.request.url);
+    event.respondWith(
+      fetch(event.request).catch(error => {
+        // The catch is only triggered if fetch() throws an exception, which will most likely
+        // happen due to the server being unreachable.
+        // If fetch() returns a valid HTTP response with an response code in the 4xx or 5xx
+        // range, the catch() will NOT be called. If you need custom handling for 4xx or 5xx
+        // errors, see https://github.com/GoogleChrome/samples/tree/gh-pages/service-worker/fallback-response
+        console.log('Fetch failed; returning offline page instead.', error);
+        return caches.match(OFFLINE_URL);
+      })
+    );
+  }
+
+  // If our if() condition is false, then this fetch handler won't intercept the request.
+  // If there are any other fetch handlers registered, they will get a chance to call
+  // event.respondWith(). If no fetch handlers call event.respondWith(), the request will be
+  // handled by the browser as if there were no service worker involvement.
+});
diff --git a/manifest.json b/manifest.json
new file mode 100644
index 0000000..7560119
--- /dev/null
+++ b/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "Graf FME",
+  "name": "El graf alternatiu de la FME",
+  "icons": [
+    {
+      "src": "img/graf.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    }
+  ],
+  "background_color": "#060606",
+  "theme_color": "#060606",
+  "display": "fullscreen",
+  "start_url": "graf.php?utm_source=homescreen"
+}