Captive Portal HTML/CCS code example

Overview 
 Captive Portal templates in GATE can be customized in two ways: 
 
 Through the GATE GUI interface 
 By directly modifying the HTML/CSS code of the template 
 
 This page demonstrates the HTML/CSS implementation of the Hotel Template for captive portals. 
 Hotel Template Preview 
 Live Template: Captive Portal Hotel Template 
 
 
 
 
 Complete HTML/CSS Code 
 Below is the complete HTML template code for the Hotel captive portal: 
 {% extends "page/base.html" %}

{% load admin_static media i18n %}

{% block extrastyle %}
	{% if page.variables.favicon %}
	<link rel="shortcut icon" type="image/ico" href="{% portal_files '' %}{{ page.variables.favicon }}" />
 {% endif %}

	<style>
 .cc-selector input{
 margin:0;padding:0;
 -webkit-appearance:none;
 -moz-appearance:none;
 appearance:none;
 }

 .cc-selector-2 input{
 position:absolute;
 z-index:999;
 }

 .hombre{background-image:url({% portal_files 'templates/img/hombre.svg' %});}
 .mujer{background-image:url({% portal_files 'templates/img/mujer.svg' %});}

 .cc-selector-2 input:active +.drinkcard-cc, .cc-selector input:active +.drinkcard-cc{opacity: .9;}
 .cc-selector-2 input:checked +.drinkcard-cc, .cc-selector input:checked +.drinkcard-cc{
 -webkit-filter: none;
 -moz-filter: none;
 filter: none;
 }
 .drinkcard-cc{
 cursor:pointer;
 background-size:contain;
 background-repeat:no-repeat;
 display:inline-block;
 width:60px; height: 60px;
 -webkit-transition: all 100ms ease-in;
 -moz-transition: all 100ms ease-in;
 transition: all 100ms ease-in;
 -webkit-filter: brightness(1.8) grayscale(1) opacity(.5);
 -moz-filter: brightness(1.8) grayscale(1) opacity(.5);
 filter: brightness(1.8) grayscale(1) opacity(.5);
 }
 .drinkcard-cc:hover{
 -webkit-filter: brightness(1.2) grayscale(.5) opacity(1);
 -moz-filter: brightness(1.2) grayscale(.5) opacity(1);
 filter: brightness(1.2) grayscale(.5) opacity(1);
 }
	</style>

{% endblock %}

{% block body_tag %}
 <body class="blank {% if is_popup %}popup {% endif %}{% block bodyclass %}{% endblock %}"
 {% if page.variables.background %}style="background: url('{% portal_files '' %}{{ page.variables.background }}') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;"{% endif %}
 {% if page.variables.background_color %}style="background-color: {{ page.variables.background_color }};"{% endif %}>
{% endblock %}

{% block main %}
 {% include "includes/social_detect.html" %}
	
	<div class="row">
 <div class="col-md-2 col-md-offset-{{ page.variables.offset|default:'2' }}" style="background-color: {{ page.variables.login_form_color|default:'rgba( 34, 34, 34, .7)' }}; min-height: 100vh; min-width: 320px; box-shadow: 0 0 10px 0px black;">
 <div class="row text-{{ page.variables.font_color|default:'white' }}">
 <div class="col-md-12">
 <div class="hpanel m-l-sm m-r-sm" style="margin-top: 8%">
 <div class="hidden-xs hidden-sm" style="min-height: 100px; background: unset; border: 0px;">
 &nbsp;
 </div>
 <div class="text-center m-b-sm" style="background: unset; border: 0px;">
 <img class="m-b-xs" style="max-width: {{ page.variables.logo_max_width|default:'200' }}px;" 
 src="{% if page.variables.logo %}{% portal_files page.variables.logo %}{% else %}{% portal_files 'templates/img/logo1-white.png' %}{% endif %}">
 <h3>
 <strong>{{ page.variables.title|default:'Lorem ipsum dolor'|safe }}</strong><br>
 	<small>{{ page.variables.sub_title|default:'Lorem ipsum dolor'|safe }}</small> 
 </h3>
 </div>
 <div style="background: unset; border: 0px; padding-top: 0px;">
 <form method="post" id="register" action="#" class="m-t-lg">
 {% csrf_token %}
 {% if next %}
 <input type="hidden" name="next" value="{{ next }}" />
 {% endif %}
 <input type="hidden" id="tzoffset" name="tzoffset" value="" />
 {% if page.variables.register_form_template %}
 	{% include page.variables.register_form_template %}
 	{% else %}
 <div class="form-group text-center">
 <h4 class="m-b font-extra-bold">Selecciona tu género</h4>
 <div class="cc-selector text-center">
 <input id="hombre" type="radio" name="gender" value="m"/>
 <label class="drinkcard-cc hombre m-r" for="hombre"></label>
 <input id="mujer" type="radio" name="gender" value="f"/>
 <label class="drinkcard-cc mujer m-l"for="mujer"></label>
 </div>
 <h4 class="m-b font-extra-bold">Agrega tu email y nombre completo</h4>
 <input type="text" id="email" name="email" placeholder="Correo electrónico" class="form-control m-b" value="" autocorrect="off" autocapitalize="none">
 <input type="text" id="full_name" name="full_name" placeholder="Nombre y apellido" class="form-control m-b">
 <button type="submit" class="btn btn-block btn-{{ page.variables.btncolor|default:'info' }} registerButton"><strong>{% trans 'login'|capfirst %}</strong></button>
 </div>
 {% endif %}
 {% if social_auth %}
 <hr/>
 <div class="text-center">
 <h4 class="m-b">O usa tus redes sociales</h4>
 {% if facebook == True %}
 <a href="#" class="btn btn-social btn-facebook loginFacebook m-b-xs">
 <span class="fa fa-facebook"></span>Facebook
 </a>
 {% endif %}
 {% if google == True %}
 <a href="#" class="btn btn-social btn-google loginGoogle m-b-xs">
 <span class="fa fa-google"></span>Google
 </a>
 {% endif %}
 {% if twitter == True %}
 <a href="#" class="btn btn-social btn-twitter loginTwitter m-b-xs">
 <span class="fa fa-twitter"></span>Twitter
 </a>
 {% endif %}
 {% if linkedin == True %}
 <a href="#" class="btn btn-social btn-linkedin loginLinkedin m-b-xs">
 <span class="fa fa-linkedin"></span>LinkedIn
 </a>
 {% endif %}
 {% if instagram == True %}
 <a href="#" class="btn btn-social btn-instagram loginInstagram m-b-xs">
 <span class="fa fa-instagram"></span>Instagram
 </a>
 {% endif %}
 {% if yahoo == True %}
 <a href="#" class="btn btn-social btn-yahoo loginYahoo m-b-xs">
 <span class="fa fa-yahoo"></span>Yahoo
 </a>
 {% endif %}
 <div class="checkbox checkbox-info">
 <input type="checkbox" class="socialAcceptCheck" name="accept">
 <label>Acepto las condiciones de conexión </label><br>
 <small>(ver abajo)</small>
 </div>
 <div class="hpanel collapsed" style="margin-bottom: 0px; margin-top: 10px;">
 <div class="panel-heading hbuilt text-left" style="padding: 5px 10px;">
 <a class="showhide">
 <div class="panel-tools">
 <i class="fa fa-chevron-up"></i>
 </div>
 <h6><i class="pe-7s-info text-info"></i> Condiciones de social media</h6>
 </a>
 </div>
 <div class="panel-body text-left" style="color: black">
 <small>
 Al hacer login con tu cuenta de redes sociales aceptas compartir la información pública de tu perfil con Zequenze y sus socios de conectividad
 </small>
 </div>
 </div>
 </div>
 {% endif %}
 </form>
 </div>
 {% if page.variables.footer_text %}
 <div class="m-l-sm m-t-xxl">
 {% if page.variables.footer_logo %}
 <img class="m-b-xs" style="max-width: {{ page.variables.footer_logo_max_width|default:'50' }}px;" src="{% if page.variables.logo %}{% portal_files '' %}{{ page.variables.footer_logo }}{% else %}{% portal_files 'templates/img/logo1-white.png' %}{% endif %}">
 {% endif %}
 <p>{{ page.variables.footer_text|default:'Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor.'|safe }}</p>
 </div>
 {% endif %}
 </div>
 <div class="hpanel" style="margin-top: 10%"></div>
 </div>
 </div>
 </div>
	</div>
 
 {{ page.content|safe }}

{% endblock %}
 
{% block bottom_scripts %}
 {% if page.variables.welcome_url %}
 <script>
 {% if page.variables.welcome_url and request.path|slice:":6" == '/page/' %}
 facebook_querystring = '?{{ request.query_string }}&next={{ page.variables.welcome_url | urlencode }}%3F{{ request.query_string | urlencode }}';
 {% else %}
 facebook_querystring = '?{{ request.query_string }}&next={{ page.variables.welcome_url | urlencode }}';
 {% endif %}
 twitter_querystring = facebook_querystring;
 google_querystring = facebook_querystring;
 twitter_querysstring = facebook_querystring;
 linkedin_querystring = facebook_querystring;
 instagram_querystring = facebook_querystring;
 yahoo_querystring = facebook_querystring;
 </script>
 {% endif %}

 {% if social_auth %}{% include "includes/social_auth.html" %}{% endif %}
 
 {% if uam_api %}
 {% include "includes/uam_default.html" %}
 {% endif %}

 <script>
			$(function() {
 {% get_current_language as LANGUAGE_CODE %}
 $('#datepicker').datepicker({
 format: 'yyyy-mm-dd',
 autoclose: true,
 clearBtn: true,
 disableTouchKeyboard: true,
 startView: 2,
 maxViewMode: 2,
 language: '{{ LANGUAGE_CODE }}',
 templates: {
 leftArrow: '<b style="font-size: 22px;">&laquo;</b>',
 rightArrow: '<b style="font-size: 22px;">&raquo;</b>'
 }
 });
 $('.loginButton').click(function() {
 $('.splash').addClass('dim').css('display', 'block');
 $('#tzoffset').val((new Date()).getTimezoneOffset());
 {% if uam_api and uam_api.address %}
 var username = document.getElementById('username').value;
 var password = document.getElementById('password').value;
 uam_login(username, password);
 {% else %}
 $("#register").submit();
 {% endif %}
 }); 
 
 $('.registerButton').click(function() {
 $('.splash').addClass('dim').css('display', 'block');
 $.ajax({
 url : "{{ request.main_path }}/register/?{{ request.query_string }}",
 type : "POST",
 data: $('#' + this.id).serialize(),
 context: $('#' + this.id),
 error: function (xhr, textStatus, errorThrown) {
 $('.splash').css('display', 'none');
 title = xhr.status + " - " + errorThrown;
 msg = xhr.status + " - " + errorThrown + " - error received from the backend. Please try again later.";
 swal(title, msg, "error");
 },
 success : function(json) {
 $('.splash').css('display', 'none');
 if(json.status) {
 swal({
 title: "",
 {% if page.variables.welcome_logo and page.variables.welcome_logo != '' %}
 text: "<img class='m-b