MUKU OWNERS

Creating Internal Hotspot Web Interface Login Page is covering the process to create web page design, customizing the hotspot server variables inside the template web pages, styling the display of hotspot login pagein order to make it more attractive for the client. It could reflecting of the quality of your hotspot services. The styling of the hotspot login page gives a distinct impression, identity and professionalism for your hotspot network services that you have build. The hotspot client may use different types of media screen when they want to login to your hotspot network. Therefore  bootstrap will help you to create a responsive design and flexibility of the style to the hotspot web interface.

Hotspot web interface is using  the variables of the hotspot server, you can see the variables hotspot wiki mikrotik! The variables hotspot as the core of data hotspot server that you can use and manage to the hotspot web interface, so that can be displayed as hotspot page style. It doesn’t means all of the variables must be included to hotspot web interface, you can select to use those of important variables that you want to display on each pages of the hotspot web interface.

Actually when you setup hotspot server on your mikrotik router, it will create the hotspot files automatically. This is a reference for you how you can create a new style to the hotspot web interface login system as you like. If you are quite satisfied with this display or styling, dont waste  your time to read this article. But if you want to create a new hotspot web interface as you like, Let us learn and start together to create a new internal hotspot web interface as you like!

1. Understanding Original Structure of HTML Hotspot Files

To begin in understanding hotspot file system to create a new hotspot web interface as you like, just focus with the main system : login.html, alogin.html, status.html, and logout.html. While md5.js is the javascript code for MD5 password hashing that used together with http-chap login method. It is containing with the rule of the login hotspot system. It always to be the intention for the hacker to find the weaknesses of this MD5 security system. You can download the original hotspot files!
It is just enough 4 html files that you need to understand as the main system of internal hotspot web interface that allow to create a new style for your hotspot network login page.


Actually the hotspot web interface login page based on html language scripts. Here we only manage the position of the hotspot server variables to div wrapper style. The original hotspot login page files doesnt use css or js link that usually use when we build the website page. Next you can add css, images and javascript files as the link file to each hotspot pages.

If you just have a little bit knowledge about how to build the html web pages, don’t worry! You can try to change the example style in customizing hotspot login page until you get the an ideal style that you like.

2. Bootstrap to Create Responsive Design of the Hotspot Web interface

Bootstrap will help you to create a responsive design for the hotspot Web Interface. It is possible your client want to use the hotspot internet connection using various types of media screen, such as mobile, tablet and else. So the style of your hotspot web interface is still looking good, because bootstrap is oriented to build responsive design. You can download the complete files of the basic bootstrap hotspot!


As you can see on the picture above, This is the completeness of the basic bootstrap hotspot web interface files completed with css, fonts, and js files that will be linked to the main html script files. Move all the bootstrap files to the router hotspot files and it will replace the existing html files. After this you can see your hotspot login page will be changed to the basic bootstrap hotspot web interface style.

3. Customizing the Standard/Basic Bootstrap Hotspot Web Interface

It is truly you must understand bootstrap core system to create the hotspot web interface as you like. So much if I want to explain about bootstrap, you need understanding HTML and CSS scripts at first. But things that you must to do when you want to make  a new style, create the css according to html tags that used.

The Tag Head of the login.html

<head>     <title>Mikrotik Hotspot | Login</title>     <meta charset="utf-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <link href="css/bootstrap.min.css" rel="stylesheet">     <link href="css/font-awesome.min.css" rel="stylesheet">     <link href="css/custom.css" rel="stylesheet"> </head> 

The section head contains the title of the page, initial media screen, css links that used separately from the html files. You can make a new rule of the style at custom.css file. You can see the right picture below! This is the section of the body tag. Navbar, container, row, col-md-2 is the general class names on bootstrap system to create the frame html scripts.

The Tag Body of the login.html

 
Depending on tags html that used on login.html script, we create a new css rules for navbar and bottom-menu style. Using bootstrap you need to understand the class css that usually used by bootstrap system, this will help you create the tag style more quickly.  Inside the tag body we place the data variables of the hotspot server mikrotik that we required that will displayed the variables styling more attractive as you like.

The Bottom of the Tag Body “login.html”

<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> $(if chap-id)     <script type="text/javascript" src="md5.js"></script>     <script type="text/javascript">         $(#loginForm).submit(function () {             var password = $(#inputPassword);             password.val(hexMD5($(chap-id) + password.val() + $(chap-challenge)));         });     </script> $(endif) 

When you have build the website template you need to insert javascript link, that related to the class css that used on the html body tags, This is more efficient placed before the end of the body tag “</body>. In order to make the page load faster. You must set the link md5.js to the right path, it is very important. Md5.js is required just for login.html page. 

Navigation Menu Links

<div class="collapse navbar-collapse">     <ul class="nav navbar-nav navbar-right">         <li class="active"><a href="login">Login</a></li>         <li><a href="status">Status</a></li>         <li><a href="logout?erase-cookie=true">Logout</a></li>     </ul> </div> 

Don’t forget to set the links menu as the hotspot login page content that will allow the client to navigate the hotspot menu links to the right links.

Next you can start to customize the main content of the login.html in which you can adjust the variables hostpot position and styling. You can combine with another elements that require to include on login page, creating a new div tag and give the style to the related div tag by creating the css rule on custom.css file. For more clearly as an example I just put the complete customizing login.html additional css rule here!

Complete Customizing login.html Script

<!DOCTYPE html> <html lang="en"> <head> <title>Mikrotik Hotspot | Login</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/font-awesome.min.css" rel="stylesheet"> <link href="css/custom.css" rel="stylesheet"> </head> <body> <div id="wrap"> <div class="navbar navbar-inverse navbar-static-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">$(identity)</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="login">Login</a></li> <li><a href="status">Status</a></li> <li><a href="logout?erase-cookie=true">Logout</a></li> </ul> </div> </div> </div> <div id="bottom-menu"> <div class="container"> <div class="row"> <div class="col-md-2 mylogo"> <a href="http://agratitudesign.blogspot.com/" ref="index.html"><img src="img/agratitudesignlogo2.png" alt="logo"></a> </div> <div class="col-xs-10 textlogo"> <h1>Agratitudesign Hotspot</h1> </div> </div> </div> </div> <div class="container"> <div class="col-md-6 col-sm-12"> <div class="row"> $(if error) <div class="alert alert-danger">$(error)</div> $(endif) <div class="alert alert-info">Please log on to use the hotspot service.</div> $(if trial == yes) <div class="alert alert-info"> Free trial available, <a href="$(link-login-only)?dst=$(link-orig-esc)&amp;username=T-$(mac-esc)">click here</a>. </div> $(endif) </div> <div class="row"> <div class="panel panel-default"> <div class="panel-body"> <form id="loginForm" class="form-horizontal" role="form" action="$(link-login-only)" method="post"> <input type="hidden" name="dst" value="$(link-orig)"/> <input type="hidden" name="popup" value="true"/> <div class="form-group"> <label for="inputLogin" class="col-sm-2 control-label">Login</label> <div class="col-sm-10"> <input type="text" class="form-control input-lg" id="inputLogin" name="username" placeholder="Login" autofocus required> </div> </div> <div class="form-group"> <label for="inputPassword" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control input-lg" id="inputPassword" name="password" placeholder="Password" required> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-primary btn-block btn-lg">OK</button> </div> </div> </form> </div> </div> </div> </div> <div class="col-md-6 col-sm-12"> <div class="panel panel-default"> <div class="panel-body"> <div class="card hovercard"> <div class="cardheader"> </div> <div class="avatar"> <img alt="" src="img/agratitudesignlogo.png"> </div> <div class="info"> <div class="title"> <a href="http://agratitudesign.blogspot.com/">Agratitudesign HighSpeed Hotspot</a> </div> <div class="desc">Website Hotspot Interface For Free</div> <div class="desc">created by <a target="_blank" href="http://agratitudesign.blogspot.com/" title="Agratitudesign Hotspot Templates">agratitudesign.blogspot.com</a></div> <div class="desc">supported by <a target="_blank" href="http://wiswaweb.com/" title="Agratitudesign Hotspot Templates">wiswaweb.com</a></div> </div> <div class="bottom"> <a class="btn btn-primary btn-twitter btn-sm" href="https://twitter.com/agratitudesign"><i class="fa fa-twitter"></i></a> <a class="btn btn-danger btn-sm" rel="publisher" href="https://plus.google.com/+KetutAgusSuardika"><i class="fa fa-google-plus"></i></a> <a class="btn btn-primary btn-sm" rel="publisher" href="https://www.facebook.com/pages/Agratitudesign/451131721572773"><i class="fa fa-facebook"></i></a> </div> </div> </div> </div> </div> </div> </div> <div id="footer"> <div class="container"> <p class="text-muted">Powered by <a href="http://agratitudesign.blogspot.com/">Agratitudesign</a></p> </div> </div> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> $(if chap-id) <script type="text/javascript" src="md5.js"></script> <script type="text/javascript"> $(#loginForm).submit(function () { var password = $(#inputPassword); password.val(hexMD5($(chap-id) + password.val() + $(chap-challenge))); }); </script> $(endif) </body> </html> 

Additional css rule on custom.css file

.navbar { margin-bottom: 0px; } .navbar-inverse { background-color: #153E5D; border-color: #2B78C5; } .navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus { background-color: #0F8093; } #bottom-menu { background: url(../img/sky.jpg); padding: 10px 0px; height: 100px; color: #fff; } #bottom-menu .mylogo { width: 100px; float: left; } #bottom-menu .textlogo { width: 350px; } #footer { background-color: #153E5D; } .text-muted { color: #B7B7B7; } .textlogo h1 { font-family: "Arial",Helvetica,sans-serif; font-size: 2em; color: #fff; font-weight: bold; text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.3); } .card { padding-top: 20px; margin: 0; background-color: rgba(214, 224, 226, 0.2); border-top-width: 0; border-bottom-width: 2px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .card .card-heading { padding: 0 20px; margin: 0; } .card .card-heading.simple { font-size: 20px; font-weight: 300; color: #777; border-bottom: 1px solid #e5e5e5; } .card .card-heading.image img { display: inline-block; width: 46px; height: 46px; margin-right: 15px; vertical-align: top; border: 0; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .card .card-heading.image .card-heading-header { display: inline-block; vertical-align: top; } .card .card-heading.image .card-heading-header h3 { margin: 0; font-size: 14px; line-height: 16px; color: #262626; } .card .card-heading.image .card-heading-header span { font-size: 12px; color: #999999; } .card .card-body { padding: 0 20px; margin-top: 20px; } .card .card-media { padding: 0 20px; margin: 0 -14px; } .card .card-media img { max-width: 100%; max-height: 100%; } .card .card-actions { min-height: 30px; padding: 0 20px 20px 20px; margin: 20px 0 0 0; } .card .card-comments { padding: 20px; margin: 0; background-color: #f8f8f8; } .card .card-comments .comments-collapse-toggle { padding: 0; margin: 0 20px 12px 20px; } .card .card-comments .comments-collapse-toggle a, .card .card-comments .comments-collapse-toggle span { padding-right: 5px; overflow: hidden; font-size: 12px; color: #999; text-overflow: ellipsis; white-space: nowrap; } .card-comments .media-heading { font-size: 13px; font-weight: bold; } .card.people { position: relative; display: inline-block; width: 170px; height: 300px; padding-top: 0; margin-left: 20px; overflow: hidden; vertical-align: top; } .card.people:first-child { margin-left: 0; } .card.people .card-top { position: absolute; top: 0; left: 0; display: inline-block; width: 170px; height: 150px; background-color: #ffffff; } .card.people .card-top.green { background-color: #53a93f; } .card.people .card-top.blue { background-color: #427fed; } .card.people .card-info { position: absolute; top: 150px; display: inline-block; width: 100%; height: 101px; overflow: hidden; background: #ffffff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .card.people .card-info .title { display: block; margin: 8px 14px 0 14px; overflow: hidden; font-size: 16px; font-weight: bold; line-height: 18px; color: #404040; } .card.people .card-info .desc { display: block; margin: 8px 14px 0 14px; overflow: hidden; font-size: 12px; line-height: 16px; color: #737373; text-overflow: ellipsis; } .card.people .card-bottom { position: absolute; bottom: 0; left: 0; display: inline-block; width: 100%; padding: 10px 20px; line-height: 29px; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .card.hovercard { position: relative; padding-top: 0; overflow: hidden; text-align: center; background-color: rgba(140, 225, 242, 0.2); } .card.hovercard .cardheader { background: url("../img/bedugul.jpg"); background-size: cover; width: auto; height: 135px; } .card.hovercard .avatar { position: relative; top: -50px; margin-bottom: -50px; } .card.hovercard .avatar img { width: 100px; height: 100px; max-width: 100px; max-height: 100px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: 5px solid rgba(255,255,255,0.5); } .card.hovercard .info { padding: 4px 8px 10px; } .card.hovercard .info .title { margin-bottom: 4px; font-size: 24px; line-height: 1; color: #262626; vertical-align: middle; } .card.hovercard .info .desc { overflow: hidden; font-size: 12px; line-height: 20px; color: #737373; text-overflow: ellipsis; } .card.hovercard .bottom { padding: 0 20px; margin-bottom: 17px; } .card .btn{ border-radius: 50%; width:32px; height:32px; line-height:18px; } 

4. Optimizing Internal Hotspot Web Interface Login Page

Mikrotik router has limited system resources, please check your router system resource! click on System > Resources, and you will see free memory that still remain and HDD Space of the type of mikrotik routherboard. Do you know what it means?  Creating or customizing the Internal Hotspot Web Interface Login Page must be considering the capabilities of your router that you have used.



Using many effect, behavior and images on the hotspot web interface can effect or disturbing the performance of router. This is possible to make the hotspot login page doesn’t work properly.  Compress the image file that you are using, do not create the excessive thing here,  unless the router has a large capacity.

5. The Complete Project of the Internal Hotspot Web Interface Login Page

This the complete project of the Internal Hotspot  Web Interface, so you are more clearly in customizing your hotspot interface login page. I know there among of you who feel lazy start from the beginning, or just want the practical and instantly to create by changing the images and text, it is up to you. First you need to remove hotspot files on your router and change with the complete hotspot web interface project, that you can change to create a new style as you like!