fixed css compatibilities.

Signed-off-by: Nicholas Tan Jerome <nicholas.jerome@kit.edu>

.gitignore

@@ -0,0 +1 @@
+data

static/css/style.css

@@ -53,6 +53,37 @@ table {
     clear:both;
 }
 
+select {
+  border: 1px solid #111;
+  background: transparent;
+  width: 150px;
+  padding: 5px 35px 5px 5px;
+  font-size: 16px;
+  border: 1px solid #ccc;
+  height: 34px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  /*background: url(http://www.stackoverflow.com/favicon.ico) 96% / 15% no-repeat #eee;*/
+}
+
+
+/* CAUTION: IE hackery ahead */
+
+
+select::-ms-expand { 
+    display: none; /* remove default arrow in IE 10 and 11 */
+}
+
+/* target Internet Explorer 9 to undo the custom arrow */
+@media screen and (min-width:0\0) {
+    select {
+        background:none\9;
+        padding: 5px\9;
+    }
+}
+
+
 /* Main CSS Styling */
 
 @font-face {
@@ -61,7 +92,6 @@ table {
          url('quicksand-bold-webfont.woff') format('woff');
     font-weight: normal;
     font-style: normal;
-
 }
 
 @font-face {
@@ -70,7 +100,6 @@ table {
          url('quicksand-medium-webfont.woff') format('woff');
     font-weight: normal;
     font-style: normal;
-
 }
 
 @font-face {
@@ -79,14 +108,36 @@ table {
          url('quicksand-regular-webfont.woff') format('woff');
     font-weight: normal;
     font-style: normal;
+}
 
+@font-face {
+    font-family: 'quicksandlight';
+    src: url('quicksand-light-webfont.woff2') format('woff2'),
+         url('quicksand-light-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
 }
 
 #header {
+    margin-top: 15px;
+}
+
+#header-text {
+    float: left;
+    text-align: center;
+    vertical-align: middle;
+    line-height: 48px;
+    font-family: 'quicksandregular';
+    font-size: 1.5em;
+    margin-left: 5%;
+    color: #666;
+}
+
+#header-icon {
     text-align: right;
 }
 
-#header div {
+#header-icon div {
     display: inline-block;
     margin-right: 5%;
 }
@@ -102,14 +153,15 @@ hr {
 }
 
 #title {
-    padding: 30px 30px 0 30px;
-	font-family: 'quicksandregular';
+    margin: 30px;
+	font-family: 'quicksandlight';
+	font-size: 36px;
     font-weight: bold;
-	font-size: 2em;
+    line-height: 48px;
 }
 
 #authors {
-	padding: 30px 30px 0 30px;
+    margin: 0 30px 0 30px;
 	font-family: 'quicksandregular';
     font-weight: bold;
 	font-size: 15px;
@@ -136,11 +188,27 @@ hr {
     vertical-align: middle;
 }
 
-.image {
-	text-align: center;
+#img-left{
+    text-align: center;
 	float: left;
-	width: 32%;
+	width: 30%;
 	padding: 5px;
+    margin-left: 30px;
+}
+
+#img-center{
+    text-align: center;
+	margin: 0 auto;
+	width: 30%;
+	padding: 5px;
+}
+
+#img-right{
+    text-align: center;
+	float: right;
+	width: 30%;
+	padding: 5px;
+    margin-right: 30px;
 }
 
 .icon {
@@ -148,11 +216,11 @@ hr {
 	height: 3%;
 }
 
-.cont img, .cont input {
+.cont img, .cont p {
     vertical-align: middle;
 }
 
-#abstract {
+#text-desc {
     float: left;
 	padding-left: 5%;
 	font-family: 'Quicksand';
@@ -166,11 +234,12 @@ hr {
 	background-color: #ededed;
 	border: 1px solid #bdbdbd;
 	width: 32%;
-	height: 280px;
+	height: 300px;
 	border-radius: 10px;
 }
 
 .photowrapper img {
+    margin-top: 15px;
     width: 100%;
     height: 100%;
 }
@@ -182,5 +251,54 @@ hr {
 #details img {
     margin: 5%;
     width: 90%;
-    height: 90%;
+}
+
+#subheader span,
+#subheader select,
+#subheader img {
+     vertical-align: middle;
+}
+
+#subheader img {
+     width : 30px;
+}
+
+#subheader select {
+    margin: 0 10px 0 10px;
+}
+
+#image-text {
+    margin: 0 30px 0 30px;
+}
+
+#slider-left,
+#slider-right,
+#slider-center {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    margin-left: 5%;
+	margin-right: 5%;
+	display: inline-block;
+	width: 50%;
+}
+
+#text-block {
+    margin-top: 30px;
+}
+
+#text-desc span {
+    color:#72bcd4;
+    font-weight:bold;
+    font-size: 20px;
+    margin-right: 10px;
+}
+
+#details span {
+    color:#666;
+    font-weight:bold;
+    font-size: 20px;
+}
+
+#details p {
+    margin: 15px 0 0 15px;
 }

static/img/icon/download.svg

@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 29.978 29.978" style="enable-background:new 0 0 29.978 29.978;" xml:space="preserve">
+<g>
+	<path d="M25.462,19.105v6.848H4.515v-6.848H0.489v8.861c0,1.111,0.9,2.012,2.016,2.012h24.967c1.115,0,2.016-0.9,2.016-2.012
+		v-8.861H25.462z"/>
+	<path d="M14.62,18.426l-5.764-6.965c0,0-0.877-0.828,0.074-0.828s3.248,0,3.248,0s0-0.557,0-1.416c0-2.449,0-6.906,0-8.723
+		c0,0-0.129-0.494,0.615-0.494c0.75,0,4.035,0,4.572,0c0.536,0,0.524,0.416,0.524,0.416c0,1.762,0,6.373,0,8.742
+		c0,0.768,0,1.266,0,1.266s1.842,0,2.998,0c1.154,0,0.285,0.867,0.285,0.867s-4.904,6.51-5.588,7.193
+		C15.092,18.979,14.62,18.426,14.62,18.426z"/>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

static/img/icon/left-arrow-black.svg

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 492 492" style="enable-background:new 0 0 492 492;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M198.608,246.104L382.664,62.04c5.068-5.056,7.856-11.816,7.856-19.024c0-7.212-2.788-13.968-7.856-19.032l-16.128-16.12
+			C361.476,2.792,354.712,0,347.504,0s-13.964,2.792-19.028,7.864L109.328,227.008c-5.084,5.08-7.868,11.868-7.848,19.084
+			c-0.02,7.248,2.76,14.028,7.848,19.112l218.944,218.932c5.064,5.072,11.82,7.864,19.032,7.864c7.208,0,13.964-2.792,19.032-7.864
+			l16.124-16.12c10.492-10.492,10.492-27.572,0-38.06L198.608,246.104z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

static/img/icon/left-arrow.svg

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 492 492" style="enable-background:new 0 0 492 492;" xml:space="preserve" width="512px" height="512px">
+<g>
+	<g>
+		<path d="M198.608,246.104L382.664,62.04c5.068-5.056,7.856-11.816,7.856-19.024c0-7.212-2.788-13.968-7.856-19.032l-16.128-16.12    C361.476,2.792,354.712,0,347.504,0s-13.964,2.792-19.028,7.864L109.328,227.008c-5.084,5.08-7.868,11.868-7.848,19.084    c-0.02,7.248,2.76,14.028,7.848,19.112l218.944,218.932c5.064,5.072,11.82,7.864,19.032,7.864c7.208,0,13.964-2.792,19.032-7.864    l16.124-16.12c10.492-10.492,10.492-27.572,0-38.06L198.608,246.104z" fill="#aaaaaa"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

static/img/icon/right-arrow-black.svg

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 492.004 492.004" style="enable-background:new 0 0 492.004 492.004;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M382.678,226.804L163.73,7.86C158.666,2.792,151.906,0,144.698,0s-13.968,2.792-19.032,7.86l-16.124,16.12
+			c-10.492,10.504-10.492,27.576,0,38.064L293.398,245.9l-184.06,184.06c-5.064,5.068-7.86,11.824-7.86,19.028
+			c0,7.212,2.796,13.968,7.86,19.04l16.124,16.116c5.068,5.068,11.824,7.86,19.032,7.86s13.968-2.792,19.032-7.86L382.678,265
+			c5.076-5.084,7.864-11.872,7.848-19.088C390.542,238.668,387.754,231.884,382.678,226.804z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

static/img/icon/right-arrow.svg

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 492.004 492.004" style="enable-background:new 0 0 492.004 492.004;" xml:space="preserve" width="512px" height="512px">
+<g>
+	<g>
+		<path d="M382.678,226.804L163.73,7.86C158.666,2.792,151.906,0,144.698,0s-13.968,2.792-19.032,7.86l-16.124,16.12    c-10.492,10.504-10.492,27.576,0,38.064L293.398,245.9l-184.06,184.06c-5.064,5.068-7.86,11.824-7.86,19.028    c0,7.212,2.796,13.968,7.86,19.04l16.124,16.116c5.068,5.068,11.824,7.86,19.032,7.86s13.968-2.792,19.032-7.86L382.678,265    c5.076-5.084,7.864-11.872,7.848-19.088C390.542,238.668,387.754,231.884,382.678,226.804z" fill="#aaaaaa"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

static/js/script.js

@@ -0,0 +1,32 @@
+$(function() {
+
+    $( "#slider-left" ).slider({
+        range: "max",
+        min: 1,
+        max: 2016,
+        value: 1,
+        slide: function( event, ui ) {
+            console.log(ui.value);
+        }
+    });
+    
+    $( "#slider-right" ).slider({
+        range: "max",
+        min: 1,
+        max: 2016,
+        value: 1,
+        slide: function( event, ui ) {
+            console.log(ui.value);
+        }
+    });
+    
+    $( "#slider-center" ).slider({
+        range: "max",
+        min: 1,
+        max: 2016,
+        value: 1,
+        slide: function( event, ui ) {
+            console.log(ui.value);
+        }
+    });
+});

templates/index.html

@@ -17,6 +17,10 @@
 
 <body>
     <div id="header">
+        <div id="header-text">
+            Data repository
+        </div>
+        <div id="header-icon">
         <div>
             <a href="https://ufo.kit.edu/dis/index.php/project/astor/" target="_blank">
                 <img src="{{ static_url("img/icon/astor.png") }}" height="50px" width="auto"/>
@@ -27,12 +31,14 @@
                 <img src="{{ static_url("img/icon/nova.png") }}" height="50px" width="auto"/>
             </a>
         </div>
+        </div>
     </div>
+    <div class="clearfix"></div>
 
     <hr>
     
     <div id="title">
-        <h1>{{ title }}</h1>
+        <p>{{ title }}</p>
     </div>
     
     <div id="authors">
@@ -43,57 +49,67 @@
         <p>{{ institute }}</p>
     </div>
     
-    <div id="subheader">Sample: <input id="sample_number" type="text" placeholder="sample number" size="10" class="search" onkeydown="search(this)"/></div>
+    <div id="subheader">
+        <span>Sample:</span> 
+        <select>
+            <option value="1">NRM-PZ_Ar65716</option>
+            <option value="2">Saab</option>
+            <option value="3">Mercedes</option>
+            <option value="4">Audi</option>
+        </select>
+        <img class="icon" onclick="onClick1('left')" src="{{ static_url("img/icon/download.svg") }}"/>
+    </div>
 
-    <div>
-        <div class="image">
+    <div id="image-container" class="clearfix">
+        <div id="img-left">
             <div class="cont">
-                <img class="icon" onclick="onClick1('left')" src="{{ static_url("img/icon/prev.svg") }}"/>
-	            <input id="input1" type="text" value="" placeholder="0001-2016" size="6" class="search" onkeydown="searchImage1(this)"/>
-                <img class="icon" onclick="onClick1('right')" src="{{ static_url("img/icon/next.svg") }}"/>
+                <img class="icon" src="{{ static_url("img/icon/left-arrow.svg") }}"/>
+	            <span id="image-text">LEFT: <span>1</span></span>
+                <img class="icon" src="{{ static_url("img/icon/right-arrow.svg") }}"/>
             </div>
 	        <div class="photowrapper">
-                <img src="{{ static_url("img/icon/nova.png") }}"/>
+                <img src="{{ static_url("data/1.png") }}"/>
             </div>
-	        <div id="slide1"></div>
+	        <div id="slider-left"></div>
         </div>
 
-        <div class="image">
+        <div id="img-right">
             <div class="cont">
-                <img class="icon" onclick="onClick1('left')" src="{{ static_url("img/icon/prev.svg") }}"/>
-	            <input id="input1" type="text" value="" placeholder="0001-2016" size="6" class="search" onkeydown="searchImage1(this)"/>
-                <img class="icon" onclick="onClick1('right')" src="{{ static_url("img/icon/next.svg") }}"/>
+                <img class="icon" src="{{ static_url("img/icon/left-arrow.svg") }}"/>
+	            <span id="image-text">FRONT: <span>3</span></span>
+                <img class="icon" src="{{ static_url("img/icon/right-arrow.svg") }}"/>
             </div>
 	        <div class="photowrapper">
-                <img src="{{ static_url("img/icon/nova.png") }}"/>
+                <img src="{{ static_url("data/1.png") }}"/>
             </div>
-	        <div id="slide2"></div>
+	        <div id="slider-right"></div>
         </div>
-
-        <div class="image">
+        
+        <div id="img-center">
             <div class="cont">
-                <img class="icon" onclick="onClick1('left')" src="{{ static_url("img/icon/prev.svg") }}"/>
-	            <input id="input1" type="text" value="" placeholder="0001-2016" size="6" class="search" onkeydown="searchImage1(this)"/>
-                <img class="icon" onclick="onClick1('right')" src="{{ static_url("img/icon/next.svg") }}"/>
+                <img class="icon" src="{{ static_url("img/icon/left-arrow.svg") }}"/>
+	            <span id="image-text">TOP: <span>2</span></span>
+                <img class="icon" src="{{ static_url("img/icon/right-arrow.svg") }}"/>
             </div>
 	        <div class="photowrapper">
-                <img src="{{ static_url("img/icon/nova.png") }}"/>
+                <img src="{{ static_url("data/1.png") }}"/>
             </div>
-	        <div id="slide3"></div>
+	        <div id="slider-center"></div>
         </div>
     </div>
     
-    <div class="clearfix"></div>
-    
-    <div id="text">
-        <div id="abstract">
-            <p><span style="color:#72bcd4; font-weight:bold; font-size:20px">Description</span><i>Xenomorphia resurrecta</i>, male; well-preserved, head hollow</p>
+    <div id="text-block">
+        <div id="text-desc">
+            <p><span>Description</span><i>Xenomorphia resurrecta</i>, male; well-preserved, head hollow</p>
         </div>
         <div id="details">
-            <img src="{{ static_url("img/icon/nova.png") }}"/>
+            <p><span>Overview</span></p>
+            <img src="{{ static_url("data/NRM-PZ_Ar65716.jpg") }}"/>
         </div>
     </div>
-
+<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
+<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
+<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 <script src="{{ static_url("js/script.js") }}"></script>
 </body>
 </html>