diff --git a/www/css/styles.css b/www/css/styles.css
new file mode 100644
index 0000000..5a3f8b7
--- /dev/null
+++ b/www/css/styles.css
@@ -0,0 +1,60 @@
+html, body {
+ position: relative;
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+ width: 100%;
+ height: 100%; }
+
+#root {
+ position: relative;
+ width: 100%;
+ height: 100%; }
+
+#header {
+ position: absolute;
+ z-index: 10;
+ top: 0;
+ left: 0; }
+
+#pictures {
+ position: relative;
+ z-index: 5;
+ width: 100%;
+ height: 100%;
+ overflow: hidden; }
+ #pictures .frame {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+ opacity: 0;
+ transition: opacity 100 ease-in-out; }
+ #pictures .frame.current {
+ opacity: 1; }
+
+#timeline {
+ position: absolute;
+ z-index: 9;
+ bottom: 0;
+ left: 0;
+ width: 67%;
+ margin: 1% 0 1% 32%;
+ height: 3em;
+ background-color: rgba(255, 255, 255, 0.6);
+ border-radius: 5px; }
+
+#map {
+ position: absolute;
+ z-index: 9;
+ bottom: 0;
+ left: 0;
+ width: 30%;
+ margin: 1%;
+ height: 40%;
+ background-color: rgba(255, 255, 255, 0.6);
+ border-radius: 5px; }
diff --git a/www/index.html b/www/index.html
deleted file mode 100644
index 2e29ce4..0000000
--- a/www/index.html
+++ /dev/null
@@ -1,23 +0,0 @@
-
-
-
-
- Hehe rover - lot explorer
-
-
-
-
-
-
-
-
-
-
-
diff --git a/www/index.php b/www/index.php
new file mode 100644
index 0000000..2755b50
--- /dev/null
+++ b/www/index.php
@@ -0,0 +1,33 @@
+
+
+
+
+ Hehe rover - lot explorer
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/www/js/script.js b/www/js/script.js
new file mode 100644
index 0000000..c9744e5
--- /dev/null
+++ b/www/js/script.js
@@ -0,0 +1,32 @@
+$(document).ready(function() {
+
+ var fps = 2, now, then = Date.now(), interval = 1000/fps, delta;
+
+ function init(){
+ console.log("Init");
+ // preload all pictures before launching
+
+ setTimeout(function(){
+ play();
+ }, 5000);
+ };
+
+ function play(millis){
+ requestAnimationFrame(play);
+
+ now = Date.now();
+ delta = now - then;
+
+ if(delta > interval){
+ $(".frame.current", "#pictures").toggleClass('current').next().toggleClass('current');
+
+ then = now -(delta % interval);
+ }
+ }
+
+
+
+
+ init();
+
+});
diff --git a/www/pict-converter.sh b/www/pict-converter.sh
new file mode 100755
index 0000000..402b5f4
--- /dev/null
+++ b/www/pict-converter.sh
@@ -0,0 +1,4 @@
+#!/bin/sh
+
+
+ffmpeg -r 6 -i pictures/hehe-%04d-%04d.jpg -an -vcodec copy timelaps.avi
diff --git a/www/scss/styles.scss b/www/scss/styles.scss
new file mode 100644
index 0000000..df17ab6
--- /dev/null
+++ b/www/scss/styles.scss
@@ -0,0 +1,57 @@
+html, body{
+ position: relative;
+ margin: 0; padding: 0;
+ overflow: hidden;
+ width:100%; height:100%;
+}
+
+#root{
+ position: relative;
+ width:100%; height:100%;
+}
+
+#header{
+ position: absolute; z-index: 10;
+ top:0; left:0;
+}
+
+#pictures{
+ position: relative; z-index: 5;
+ width:100%; height:100%;
+ overflow: hidden;
+ // border: 1px solid blue;
+
+ .frame{
+ position:absolute; top:0; left:0;
+ width: 100%; height:100%;
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+ // background-clip: border-box;
+ // background-color: green;
+
+ // border: 1px solid red;
+ // background-image: url();
+ opacity: 0;
+ transition: opacity 100 ease-in-out;
+ &.current{
+ opacity: 1;
+ }
+ }
+
+}
+
+#timeline{
+ position: absolute; z-index: 9;
+ bottom:0; left:0; width:67%; margin:1% 0 1% 32%; height:3em;
+ background-color: rgba(255, 255, 255, 0.6);
+ border-radius: 5px;
+}
+
+
+#map{
+ position: absolute; z-index: 9;
+ bottom:0; left:0; width:30%; margin:1%; height:40%;
+ background-color: rgba(255, 255, 255, 0.6);
+ border-radius: 5px;
+}
diff --git a/www/timelaps.inc.php b/www/timelaps.inc.php
new file mode 100644
index 0000000..718f563
--- /dev/null
+++ b/www/timelaps.inc.php
@@ -0,0 +1,12 @@
+ $value):
+ $class = "frame frame-$key";
+ if($key == 0) $class .= " current";
+ ?>
+
+
+
+