diff --git a/enni.html b/enni.html
new file mode 100644
index 0000000000000000000000000000000000000000..80c64e1243f770a73088c458f0c1a9aa3aa3e3c2
--- /dev/null
+++ b/enni.html
@@ -0,0 +1,134 @@
+<!doctype html>
+<html class="no-js" lang="">
+
+<head>
+  <meta charset="utf-8">
+  <title></title>
+  <meta name="description" content="">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <meta property="og:title" content="">
+  <meta property="og:type" content="">
+  <meta property="og:url" content="">
+  <meta property="og:image" content="">
+
+  <link rel="manifest" href="site.webmanifest">
+  <link rel="apple-touch-icon" href="icon.png">
+  <!-- Place favicon.ico in the root directory -->
+
+  <link rel="stylesheet" href="css/normalize.css">
+  <link rel="stylesheet" href="css/bootstrap.min.css">
+
+  <meta name="theme-color" content="#fafafa">
+  <style type="text/css">
+    .row + .row {
+      margin-top: 5em;
+    }
+    .direction {
+      width: 120px;
+    }
+  </style>
+</head>
+
+<body>
+  <script type="text/javascript">
+    TMS_NUMBER = 2050001;
+    DIRECTION1_TEXT = "Suunta: tulee vasemmalta";
+    DIRECTION2_TEXT = "Suunta: tulee oikealta";
+
+    VEHICLE_CAR = 1;
+    VEHICLE_TRUCK = 2;
+    VEHICLE_BUS = 3;
+
+    AUDIO = {};
+    // Wav files are also available.
+    AUDIO[VEHICLE_CAR] = 'audio/car_marimba.mp3';
+    AUDIO[VEHICLE_TRUCK] = 'audio/truck_glockenspiel.mp3';
+    AUDIO[VEHICLE_BUS] = 'audio/bus_mallets.mp3';
+
+    SEP = ',';
+    SERVER = 'wss://smarter-data.tt.utu.fi/ws/';
+    // SERVER = 'ws://localhost:8080/'
+
+    function send_data(ws, direction, vehicle_class) {
+      ws.send(TMS_NUMBER + SEP + direction + SEP + vehicle_class + SEP + new Date().getTime());
+      new Audio(AUDIO[vehicle_class]).play();
+    }
+  </script>
+
+  <!-- Add your site or application content here -->
+  <script src="js/vendor/modernizr-3.11.2.min.js"></script>
+  <script src="js/plugins.js"></script>
+  <script src="js/main.js"></script>
+  <script src="js/bootstrap.bundle.min.js"></script>
+  <div class="container">
+    <div class="row">
+      <div class="col">
+        <button id="direction1" type="button" class="direction btn btn-lg btn-light" disabled>Suunta 1</button>
+      </div>
+      <div class="col">
+        <button type="button" class="btn btn-lg btn-primary" onclick="send_data(ws, 1, VEHICLE_CAR)">Henkilö&shy;auto</button>
+      </div>
+      <div class="col">
+        <button type="button" class="btn btn-lg btn-dark" onclick="send_data(ws, 1, VEHICLE_TRUCK)">Kuorma-auto</button>
+      </div>
+      <div class="col">
+        <button type="button" class="btn btn-lg btn-warning" onclick="send_data(ws, 1, VEHICLE_BUS)">Bussi</button>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col">
+        <button id="direction2" type="button" class="direction btn btn-lg btn-light" disabled>Suunta 2</button>
+      </div>
+      <div class="col">
+        <button type="button" class="btn btn-lg btn-primary" onclick="send_data(ws, 2, VEHICLE_CAR)">Henkilö&shy;auto</button>
+      </div>
+      <div class="col">
+        <button type="button" class="btn btn-lg btn-dark" onclick="send_data(ws, 2, VEHICLE_TRUCK)">Kuorma-auto</button>
+      </div>
+      <div class="col">
+        <button type="button" class="btn btn-lg btn-warning" onclick="send_data(ws, 2, VEHICLE_BUS)">Bussi</button>
+      </div>
+    </div>
+  </div>
+  <script type="text/javascript">
+    // Varoita, jos piste ei ole valittuna.
+
+    document.getElementById('direction1').textContent = DIRECTION1_TEXT;
+    document.getElementById('direction2').textContent = DIRECTION2_TEXT;
+
+    // https://stackoverflow.com/a/23176223
+    function connect() {
+      ws = new WebSocket(SERVER);
+      // ws.onopen = function() {
+      //   // subscribe to some channels
+      //   ws.send(JSON.stringify({
+      //       //.... some message the I must send when I connect ....
+      //   }));
+      // };
+
+      ws.onmessage = function(e) {
+        console.log('Message:', e.data);
+      };
+
+      ws.onclose = function(e) {
+        console.log('Socket is closed. Reconnect will be attempted in 1 second.', e.reason);
+        setTimeout(function() {
+          connect();
+        }, 1000);
+      };
+
+      ws.onerror = function(err) {
+        console.error('Socket encountered error: ', err.message, 'Closing socket');
+        ws.close();
+      };
+    }
+    function send(direction, vehicle,) {
+      console.log();
+    }
+    connect();
+  </script>
+
+</body>
+
+</html>
diff --git a/petra.html b/petra.html
new file mode 100644
index 0000000000000000000000000000000000000000..80c64e1243f770a73088c458f0c1a9aa3aa3e3c2
--- /dev/null
+++ b/petra.html
@@ -0,0 +1,134 @@
+<!doctype html>
+<html class="no-js" lang="">
+
+<head>
+  <meta charset="utf-8">
+  <title></title>
+  <meta name="description" content="">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <meta property="og:title" content="">
+  <meta property="og:type" content="">
+  <meta property="og:url" content="">
+  <meta property="og:image" content="">
+
+  <link rel="manifest" href="site.webmanifest">
+  <link rel="apple-touch-icon" href="icon.png">
+  <!-- Place favicon.ico in the root directory -->
+
+  <link rel="stylesheet" href="css/normalize.css">
+  <link rel="stylesheet" href="css/bootstrap.min.css">
+
+  <meta name="theme-color" content="#fafafa">
+  <style type="text/css">
+    .row + .row {
+      margin-top: 5em;
+    }
+    .direction {
+      width: 120px;
+    }
+  </style>
+</head>
+
+<body>
+  <script type="text/javascript">
+    TMS_NUMBER = 2050001;
+    DIRECTION1_TEXT = "Suunta: tulee vasemmalta";
+    DIRECTION2_TEXT = "Suunta: tulee oikealta";
+
+    VEHICLE_CAR = 1;
+    VEHICLE_TRUCK = 2;
+    VEHICLE_BUS = 3;
+
+    AUDIO = {};
+    // Wav files are also available.
+    AUDIO[VEHICLE_CAR] = 'audio/car_marimba.mp3';
+    AUDIO[VEHICLE_TRUCK] = 'audio/truck_glockenspiel.mp3';
+    AUDIO[VEHICLE_BUS] = 'audio/bus_mallets.mp3';
+
+    SEP = ',';
+    SERVER = 'wss://smarter-data.tt.utu.fi/ws/';
+    // SERVER = 'ws://localhost:8080/'
+
+    function send_data(ws, direction, vehicle_class) {
+      ws.send(TMS_NUMBER + SEP + direction + SEP + vehicle_class + SEP + new Date().getTime());
+      new Audio(AUDIO[vehicle_class]).play();
+    }
+  </script>
+
+  <!-- Add your site or application content here -->
+  <script src="js/vendor/modernizr-3.11.2.min.js"></script>
+  <script src="js/plugins.js"></script>
+  <script src="js/main.js"></script>
+  <script src="js/bootstrap.bundle.min.js"></script>
+  <div class="container">
+    <div class="row">
+      <div class="col">
+        <button id="direction1" type="button" class="direction btn btn-lg btn-light" disabled>Suunta 1</button>
+      </div>
+      <div class="col">
+        <button type="button" class="btn btn-lg btn-primary" onclick="send_data(ws, 1, VEHICLE_CAR)">Henkilö&shy;auto</button>
+      </div>
+      <div class="col">
+        <button type="button" class="btn btn-lg btn-dark" onclick="send_data(ws, 1, VEHICLE_TRUCK)">Kuorma-auto</button>
+      </div>
+      <div class="col">
+        <button type="button" class="btn btn-lg btn-warning" onclick="send_data(ws, 1, VEHICLE_BUS)">Bussi</button>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col">
+        <button id="direction2" type="button" class="direction btn btn-lg btn-light" disabled>Suunta 2</button>
+      </div>
+      <div class="col">
+        <button type="button" class="btn btn-lg btn-primary" onclick="send_data(ws, 2, VEHICLE_CAR)">Henkilö&shy;auto</button>
+      </div>
+      <div class="col">
+        <button type="button" class="btn btn-lg btn-dark" onclick="send_data(ws, 2, VEHICLE_TRUCK)">Kuorma-auto</button>
+      </div>
+      <div class="col">
+        <button type="button" class="btn btn-lg btn-warning" onclick="send_data(ws, 2, VEHICLE_BUS)">Bussi</button>
+      </div>
+    </div>
+  </div>
+  <script type="text/javascript">
+    // Varoita, jos piste ei ole valittuna.
+
+    document.getElementById('direction1').textContent = DIRECTION1_TEXT;
+    document.getElementById('direction2').textContent = DIRECTION2_TEXT;
+
+    // https://stackoverflow.com/a/23176223
+    function connect() {
+      ws = new WebSocket(SERVER);
+      // ws.onopen = function() {
+      //   // subscribe to some channels
+      //   ws.send(JSON.stringify({
+      //       //.... some message the I must send when I connect ....
+      //   }));
+      // };
+
+      ws.onmessage = function(e) {
+        console.log('Message:', e.data);
+      };
+
+      ws.onclose = function(e) {
+        console.log('Socket is closed. Reconnect will be attempted in 1 second.', e.reason);
+        setTimeout(function() {
+          connect();
+        }, 1000);
+      };
+
+      ws.onerror = function(err) {
+        console.error('Socket encountered error: ', err.message, 'Closing socket');
+        ws.close();
+      };
+    }
+    function send(direction, vehicle,) {
+      console.log();
+    }
+    connect();
+  </script>
+
+</body>
+
+</html>
diff --git a/tommi.html b/tommi.html
new file mode 100644
index 0000000000000000000000000000000000000000..80c64e1243f770a73088c458f0c1a9aa3aa3e3c2
--- /dev/null
+++ b/tommi.html
@@ -0,0 +1,134 @@
+<!doctype html>
+<html class="no-js" lang="">
+
+<head>
+  <meta charset="utf-8">
+  <title></title>
+  <meta name="description" content="">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <meta property="og:title" content="">
+  <meta property="og:type" content="">
+  <meta property="og:url" content="">
+  <meta property="og:image" content="">
+
+  <link rel="manifest" href="site.webmanifest">
+  <link rel="apple-touch-icon" href="icon.png">
+  <!-- Place favicon.ico in the root directory -->
+
+  <link rel="stylesheet" href="css/normalize.css">
+  <link rel="stylesheet" href="css/bootstrap.min.css">
+
+  <meta name="theme-color" content="#fafafa">
+  <style type="text/css">
+    .row + .row {
+      margin-top: 5em;
+    }
+    .direction {
+      width: 120px;
+    }
+  </style>
+</head>
+
+<body>
+  <script type="text/javascript">
+    TMS_NUMBER = 2050001;
+    DIRECTION1_TEXT = "Suunta: tulee vasemmalta";
+    DIRECTION2_TEXT = "Suunta: tulee oikealta";
+
+    VEHICLE_CAR = 1;
+    VEHICLE_TRUCK = 2;
+    VEHICLE_BUS = 3;
+
+    AUDIO = {};
+    // Wav files are also available.
+    AUDIO[VEHICLE_CAR] = 'audio/car_marimba.mp3';
+    AUDIO[VEHICLE_TRUCK] = 'audio/truck_glockenspiel.mp3';
+    AUDIO[VEHICLE_BUS] = 'audio/bus_mallets.mp3';
+
+    SEP = ',';
+    SERVER = 'wss://smarter-data.tt.utu.fi/ws/';
+    // SERVER = 'ws://localhost:8080/'
+
+    function send_data(ws, direction, vehicle_class) {
+      ws.send(TMS_NUMBER + SEP + direction + SEP + vehicle_class + SEP + new Date().getTime());
+      new Audio(AUDIO[vehicle_class]).play();
+    }
+  </script>
+
+  <!-- Add your site or application content here -->
+  <script src="js/vendor/modernizr-3.11.2.min.js"></script>
+  <script src="js/plugins.js"></script>
+  <script src="js/main.js"></script>
+  <script src="js/bootstrap.bundle.min.js"></script>
+  <div class="container">
+    <div class="row">
+      <div class="col">
+        <button id="direction1" type="button" class="direction btn btn-lg btn-light" disabled>Suunta 1</button>
+      </div>
+      <div class="col">
+        <button type="button" class="btn btn-lg btn-primary" onclick="send_data(ws, 1, VEHICLE_CAR)">Henkilö&shy;auto</button>
+      </div>
+      <div class="col">
+        <button type="button" class="btn btn-lg btn-dark" onclick="send_data(ws, 1, VEHICLE_TRUCK)">Kuorma-auto</button>
+      </div>
+      <div class="col">
+        <button type="button" class="btn btn-lg btn-warning" onclick="send_data(ws, 1, VEHICLE_BUS)">Bussi</button>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col">
+        <button id="direction2" type="button" class="direction btn btn-lg btn-light" disabled>Suunta 2</button>
+      </div>
+      <div class="col">
+        <button type="button" class="btn btn-lg btn-primary" onclick="send_data(ws, 2, VEHICLE_CAR)">Henkilö&shy;auto</button>
+      </div>
+      <div class="col">
+        <button type="button" class="btn btn-lg btn-dark" onclick="send_data(ws, 2, VEHICLE_TRUCK)">Kuorma-auto</button>
+      </div>
+      <div class="col">
+        <button type="button" class="btn btn-lg btn-warning" onclick="send_data(ws, 2, VEHICLE_BUS)">Bussi</button>
+      </div>
+    </div>
+  </div>
+  <script type="text/javascript">
+    // Varoita, jos piste ei ole valittuna.
+
+    document.getElementById('direction1').textContent = DIRECTION1_TEXT;
+    document.getElementById('direction2').textContent = DIRECTION2_TEXT;
+
+    // https://stackoverflow.com/a/23176223
+    function connect() {
+      ws = new WebSocket(SERVER);
+      // ws.onopen = function() {
+      //   // subscribe to some channels
+      //   ws.send(JSON.stringify({
+      //       //.... some message the I must send when I connect ....
+      //   }));
+      // };
+
+      ws.onmessage = function(e) {
+        console.log('Message:', e.data);
+      };
+
+      ws.onclose = function(e) {
+        console.log('Socket is closed. Reconnect will be attempted in 1 second.', e.reason);
+        setTimeout(function() {
+          connect();
+        }, 1000);
+      };
+
+      ws.onerror = function(err) {
+        console.error('Socket encountered error: ', err.message, 'Closing socket');
+        ws.close();
+      };
+    }
+    function send(direction, vehicle,) {
+      console.log();
+    }
+    connect();
+  </script>
+
+</body>
+
+</html>