Newer Phoenix clients can't communicate with older Phoenix servers. The following servers require an updated phoenix-[version]-server.jar to be put in the class path of HBase: 

/*** Header ***/

$(document).ready(function() {
    $('.navbar').css('background','transparent');
    $(window).scroll(function () {
        if ($(window).scrollTop() >= 50) {
            $('.navbar').css('background','white');
            $('.navbar-inverse .navbar-brand').css('color','black');
            $('.navbar-inverse .navbar-nav>li>a').css('color','black');
        } else {
            $('.navbar').css('background','transparent');
            $('.navbar-inverse .navbar-brand').css('color','white');
            $('.navbar-inverse .navbar-nav>li>a').css('color','white');
        }
    });
});

/* End of Header */

var arr = new Array();
  

for(var i=0; i<4;i++)
{ 
    var temp;
    var temp_img;
    var temp_cap;
    
    temp = document.createElement("figure");
    temp.classList.add("gallery");
    temp_img = document.createElement("img");
    temp_img.classList.add("img_gallery");
    temp_cap = document.createElement("figcaption");
    temp_cap.classList.add("img_text");
    temp.appendChild(temp_img);
    temp.appendChild(temp_cap);
    arr.push(temp);
}  
  
arr[0].childNodes[0].src = "https://cpimg.tistatic.com/13581/4/tr:q-100/template_photo_3.jpg";
arr[1].childNodes[0].src  = "https://cpimg.tistatic.com/13581/4/tr:q-100/template_photo_2.jpg";
arr[2].childNodes[0].src  = "https://cpimg.tistatic.com/13581/4/tr:q-100/template_photo_1.jpg";
arr[3].childNodes[0].src  = "https://cpimg.tistatic.com/13581/4/tr:q-100/template_photo_1.jpg";
  
var cap1 = document.createTextNode( "cap 1");
arr[0].childNodes[1].appendChild(cap1);
var cap2 = document.createTextNode( "cap 2");
arr[1].childNodes[1].appendChild(cap2);
var cap3 = document.createTextNode( "cap 3");
arr[2].childNodes[1].appendChild(cap3);
var cap4 = document.createTextNode( "cap 4");
arr[3].childNodes[1].appendChild(cap4);


/*arr[1].childNodes[1].text ="fig 2";
arr[2].childNodes[1].text  = "sprinkler-bg.jpg";
arr[3].childNodes[1].text  = "banner-3.jpg";*/
  

var slideIndex = 0;
var timeId;
function plusSlides(n) {
  slideIndex = (slideIndex-1) + n;
  
  clearTimeout(timeId);
  showSlides();
}

function currentSlide(n) {
  slideIndex = n;
  showSlides();
}

for (let i = 0; i < 4; i++) {
      arr[i].onclick = function(e) {
        clearTimeout(timeId);
        currentSlide(i);
      }
}


showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassname("bgSlides");
  var thumb = document.getElementsByClassname("gallery");
  var hold1 = document.getElementsByClassname("hold");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }

  hold1[0].removeChild(hold1[0].firstChild);
  hold1[1].removeChild(hold1[1].firstChild);
  hold1[2].removeChild(hold1[2].firstChild);
    

  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}   
  else if (slideIndex < 1) {slideIndex = slides.length} 
  
  slides[slideIndex-1].style.display = "block";

  if ((slideIndex-1) == (slides.length -1 )) {

    document.getElementById("img1").appendChild( arr[slideIndex-2]);
    document.getElementById("img2").appendChild( arr[slideIndex-1]);
    document.getElementById("img3").appendChild( arr[0]);
      
    }
  else if((slideIndex-1) == 0) {
    document.getElementById("img1").appendChild( arr[slides.length-1]);
    document.getElementById("img2").appendChild( arr[slideIndex-1]);
    document.getElementById("img3").appendChild(arr[slideIndex]);

  }
  else
  {
    document.getElementById("img1").appendChild(arr[slideIndex-2]);
    document.getElementById("img2").appendChild(arr[slideIndex-1]);
    document.getElementById("img3").appendChild(arr[slideIndex]);
  }

 timeId = setTimeout(showSlides,5000); // Change image every 2 seconds
}

  

* {
  box-sizing: border-box;
}

body {
    background-color: transparent;
    font-family: Verdana,sans-serif;
}




/*** HEADER ***/

.container1 {
    position: relative;
}

img {
    width: 100%;
    height: 700px;
}

header {
    position: absolute;
}

nav.navbar{
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
 }

 .navbar-inverse .navbar-nav>li>a {
     color: white;
     border-color:red;
     box-shadow: none;
 }

 .navbar {
    min-height: 80px;
  }
  
  .navbar-brand {
    padding: 0 15px;
    height: 80px;
    line-height: 80px;
  }
  
  .navbar-toggle {
    /* (80px - button height 34px) / 2 = 23px */
    margin-top: 23px;
    padding: 9px 10px !important;
  }

  .navbar-inverse .navbar-nav>li>a {
      font-size: 20px;
      padding: 25px;
      padding-top: 30px;
      margin-right: 20px;
  }

  /*** End of Header ***/

  



















/*** MAIN-SLIDER ***/

.head-slider {
  position: relative;
}

.bgSlides {
  display: none;
  width: 100%;
}

.v-panel{
  position: absolute;
  left: 60px;
  top: 150px;
  display: block;
  background-color: rgb(0,0.1);
}

#img1,#img2,#img3 {
  cursor: pointer;  /*Link highlight*/
}

.img_gallery {
  height: 100px;
  width: 200px;
  margin: 20px;
  transition: background-color 0.6s ease;
  box-shadow: 2px 2px 2px 2px black;
}

.prev,.next {
  cursor: pointer;
  margin: 100px;
  width: auto;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

img {
  vertical-align: middle;
}


/*.text {
  color: black;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}*/


/* The dots/bullets/indicators */


.active {
  background-color: teal;
}

 Fading animation 
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens,decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}