final changes

map/static/map/index.css

@@ -10,12 +10,13 @@
 
 #p_date {
     position: absolute;
-    bottom: 20px;
+    left: 25px;
+    bottom: 60px;
 }
 
 #logo_side {
-    width: 60%;
-    margin-left: 20%;
+    width: 90%;
+    margin-left: 5%;
     margin-top: 10%;
 }
 
@@ -59,13 +60,13 @@ div.yearno {
 }
 
 #div19 {
-    top: 30px;
-    left: 30px;
+    top: 4%;
+    left: 2%;
 }
 
 #div29 {
-    top: 330px;
-    left: 30px;
+    top: 50%;
+    left: 2%;
 }
 
 .slider {

map/templates/map/index.html

@@ -27,6 +27,7 @@
 
     <div id="div19" class="yearno">2019</div>
     <div id="div29" class="yearno">2029</div>
+    <div id="p_date" class="yearno"></div>
 
     <div class="slidecontainer">
     <input type="range" min="1" max="365" value="180" class="slider" id="myRange"
@@ -35,16 +36,13 @@
 </div>
 
 <div id="right">
-    <img id="logo_side" src="{% static 'favicon.ico' %}"/>
+    <img id="logo_side" src="{% static 'spring_logo.png' %}"/>
     <center>
-    <p><b>Watch how the bloom periods change over time.</b></p>
-    <p>You want to win awesome awards?</p>
     
     <p><a href="{% url 'mobile:index' %}">Take part</a> in a global movement
     monitoring effects of climate change.</p>
     </center>
     <center>
-        <p id="p_date" ></p>
     </center>
 </div>
 
@@ -189,7 +187,7 @@ function updateMap(value) {
     for (var i = 0; i < trees_2.length; i++) {
         trees_2[i].update(value);
     }
-    p_date.innerHTML = "Date: " + dateFromDay(value);
+    p_date.innerHTML = dateFromDay(value);
 }
 
 function dateFromDay(dayno) {
@@ -203,6 +201,8 @@ var cities2 = L.layerGroup(trees_2.map(t => t.marker));
 cities1.addTo(map1);
 cities2.addTo(map2);
 
+p_date.innerHTML = dateFromDay(180);
+
 </script>
 
 </body>