Custom Web Authentication Portal for Catalyst 9800 Wireless Controllers

Custom Web Authentication Portal for Catalyst 9800 Wireless Controllers

by luisrher

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>YOUR COMPANY TITLE HERE</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
    <script>
      function submitAction() {
        var link = document.location.href;
        var searchString = "redirect=";
        var equalIndex = link.indexOf(searchString);
        var redirectUrl = "";

        if (document.forms[0].action == "") {
          var url = window.location.href;
          var args = new Object();
          var query = location.search.substring(1);
          var pairs = query.split("&");
          for (var i = 0; i < pairs.length; i++) {
            var pos = pairs[i].indexOf('=');
            if (pos == -1) continue;
            var argname = pairs[i].substring(0, pos);
            var value = pairs[i].substring(pos + 1);
            args[argname] = unescape(value);
          }
          document.forms[0].action = args.switch_url;
        }
        if (equalIndex >= 0) {
          equalIndex += searchString.length;
          redirectUrl = "";
          redirectUrl += link.substring(equalIndex);
        }
        if (redirectUrl.length > 255)
          redirectUrl = redirectUrl.substring(0, 255);
        document.forms[0].redirect_url.value = redirectUrl;
        document.forms[0].buttonClicked.value = 4;
        document.forms[0].submit();
      }

      function loadAction() {
        var url = window.location.href;
        var args = new Object();
        var query = location.search.substring(1);
        var pairs = query.split("&");
     ...

CSS

body,
html {
  height: 100%;
}

.background {
  background: #8e9eab; /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #8e9eab, #eef2f3); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #8e9eab, #eef2f3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.nav-bg{
  background: #076585;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #fff, #076585);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #fff, #076585); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

.bg-img {
  background-image: url("winter.jpg");
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-img2 {
  background-image: url("black.png");
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: white;
}

.bg {
  background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg2 {
  background-image: linear-gradient(to top, #1e3c72 0%, #1e3c72 1%, #2a5298 100%);
  color: white;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;


}

strong[class="card_tile"] {
  color: black;
}

.bg3 {
  background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
  color: white;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}

.bg4 {
  background-image: linear-gradient(-225deg, #77FFD2 0%, #6297DB 48%, #1EECFF 100%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;

}

.bg5 {
  background-image: radial-gradient(circle 919px at 1.7% 6.1%, rgba(41, 58, 76, 1) 0%, rgba(40, 171, 226, 1) 100.2%);
  background-position: center;
  background-repeat: no-repeat;
 ...