--- a/dash.conf	Wed Jul 15 15:13:07 2015 +0200
+++ b/dash.conf	Wed Jul 22 10:25:27 2015 +0200
@@ -41,25 +41,15 @@
 
 [tile4]
 type=mon
-source=192.168.3.1
-status=down
+source=192.168.4.3
+status=up
 
 [tile5]
 type=mon
-source=192.168.4.5
+source=192.168.4.3
 status=up
 
 [tile6]
 type=mon
-source=192.168.3.2
-status=down
-
-[tile7]
-type=mon
-source=192.168.4.12
-status=up
-
-[tile8]
-type=mon
-source=192.168.3.66
-status=down
+source=192.168.4.3
+status=up
\ No newline at end of file

--- a/dash.py	Wed Jul 15 15:13:07 2015 +0200
+++ b/dash.py	Wed Jul 22 10:25:27 2015 +0200
@@ -20,6 +20,8 @@
     config = configparser.ConfigParser()
     config.read(CONFIG_FILE)
 
+
+
     #read the tiles
     read_tiles_config(config)
 
@@ -70,7 +72,6 @@
 """)
     file.close()
 
-
 ##Bottle
 @route('/')
 @view('hello_template')

--- a/views/hello_template.tpl	Wed Jul 15 15:13:07 2015 +0200
+++ b/views/hello_template.tpl	Wed Jul 22 10:25:27 2015 +0200
@@ -3,79 +3,156 @@
 License: GNU GPL >= v2. See LICENSE for details. -->
 
 <%
-    import math
-    break_tile_lines = math.ceil(len(tiles)/2)
-    tilecounter = 1
-    vp_size = 1;
 
-    if len(tiles) <= 2:
-        vp_size = "6vw"
-    elif len(tiles) >2 and len(tiles) <=4 :
-        vp_size = "5vw"
-    elif len(tiles) >4 and len(tiles) <=6 :
-        vp_size = "4vw"
-    elif len(tiles) >6 and len(tiles) <=8 :
-        vp_size = "3vw"
-    end
+    import math
+    from datetime import date
+
+    #################
+    # date and time #
+    #################
+
+
+    today = date.today()
+    weekday = ("Montag", "Dienstag", "Mittwoch", "Donnerstag",
+                "Freitag", "Samstag", "Sonntag")[today.weekday()]
+    month_name = ("Januar", "Februar", "März", "Aprill", "Mai",
+                    "Juni", "Juli", "August", "September", "Oktober",
+                    "November", "Dezember")[today.month-1]
+
+
+    ##################
+    # size of tiles  #
+    ##################
+
+    number_of_rows = 3
+
+    #################
+    # viewport size #
+    #################
+
+    vp_size = "12px"
+
+    #if len(tiles) <= 2:
+    #    vp_size = "6vw"
+    #elif len(tiles) >2 and len(tiles) <=4 :
+    #    vp_size = "5vw"
+    #elif len(tiles) >4 and len(tiles) <=6 :
+    #    vp_size = "4vw"
+    #elif len(tiles) >6 and len(tiles) <=8 :
+    #    vp_size = "3vw"
+    #end
 %>
 
+<script type="text/javascript">
+    
+    var global_width;
+    var global_height;
+    var tile_width;
+    var tile_height;
+    
+    var tiles = document.getElementsByClassName("tile");
+    var border_width = 1;
+    var space_between_tiles = 8;
+    
+    var space_lr_borders;
+    var space_lr_margin;
+    
+    function calc_tile_with(){
+        var tiles_per_row = Math.floor(tiles.length / {{number_of_rows}});
+        var distance = (space_between_tiles*2) + (border_width*2)
+        var tile_width = ((global_width / tiles_per_row ) - distance);
+        return tile_width;
+    }
+    
+    function resize_content(){
+        global_width = document.getElementById("content").clientWidth;
+        global_height = document.getElementById("content").clientHeight;
+        
+        
+        tile_width = calc_tile_with();
+        tile_height = (global_height / {{number_of_rows}});
+        
+        for(var tile = 0; tile < tiles.length; tile++){
+            tiles[tile].style.width= tile_width + 'px';
+            tiles[tile].style.height= tile_height + 'px';
+        }
+    }
+    
+    window.onresize = function(){
+        resize_content();
+    }
+
+    document.addEventListener("DOMContentLoaded", function(event) {
+        resize_content();
+    });
+        
+</script>
+
 <style>
     *{
         margin: 0 auto;
         padding: 0 auto;
+        font-family: "Lucida Console", Monaco, monospace;
+    }
+    
+    body {
+        overflow: hidden;
     }
 
     #wrapper{
-        display: table;
+        background-color: #F2F2F2;
         color: black;
-        background-color: #F2F2F2;
         min-width: 100%;
         min-height: 100%;
-        border-spacing: 10px;
+    }
+
+    #topbar{
+        min-width: auto;
+        padding-left: 8px;
+        padding-top: 8px;
+        padding-bottom: 8px;
+        /*height: 5%;*/
+        font-family: Arial, Helvetica, sans-serif;
+    }
+
+    #content{
+        min-width: 100%;
+        height:95%;
     }
 
     .tile{
+        float: left;
+        margin: 8px;
         background-color: #FFFFFF;
-        display:table-cell;
-
-        width: auto;
-        height: auto;
         border: 1px solid #999999;
+        border: none;
         text-align:center;
         vertical-align: middle;
-
-        -webkit-box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.4);
-        -moz-box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.4);
-        box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.4);
-
     }
 
     .clear{
-        display: table-row;
+        height: 0px;
         clear: both;
-        margin: 0;
-        padding: 0;
-        height: 0;
-        overflow: hidden;
     }
 
+    /*tiles types*/
+
     .statusmon{
-        border: 1px solid #000000;
         color: white;
         font-size: {{vp_size}};
-        font-family: "Lucida Console", Monaco, monospace;
     }
 
     .chart{
         font-size: {{vp_size}};
-        font-family: "Lucida Console", Monaco, monospace;
     }
 
     .active{
+        border: 1px solid #00cc00;
         background-color: #009900;
     }
 
     .dead{
+        border: 1px solid #cc0000;
         background-color: #990000;
     }
 
@@ -83,32 +160,35 @@
 
 <div id = "wrapper">
 
-    % for tile in tiles :
-        % type = ""
-        % text = ""
-        % status = ""
-        % if tile["type"] == "mon" :
-            % type = "statusmon"
-            % text = tile["source"]
-            % if tile["status"] == "up" :
-                % status = "active"
-            % elif tile["status"] == "down" :
-                % status = "dead"
-            % end
-        % elif tile["type"] == "d3.js" :
-            % type = "chart"
-            % text = "place for a chart!"
-        % end
+    <div id = "topbar">
+        <b>{{weekday}}</b> {{today.day}}. {{month_name}}
+    </div>
 
+    <div id = "content">
+
+        <%
+            for tile in tiles :
+            type = ""
+            text = ""
+            status = ""
+            if tile["type"] == "mon" :
+                type = "statusmon"
+                text = tile["source"]
+                if tile["status"] == "up" :
+                    status = "active"
+                elif tile["status"] == "down" :
+                    status = "dead"
+                end
+            elif tile["type"] == "d3.js" :
+                type = "chart"
+                text = "place for a chart!"
+            end
+        %>
         <div class = "tile {{type}} {{status}}">
             {{text}}
         </div>
 
-        % if tilecounter == break_tile_lines:
-            <div class = "clear"></div>
         % end
 
-        % tilecounter += 1
-    % end
-
-</div>
+    </div>
+</div>
\ No newline at end of file