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;">
</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;">«</b>',
rightArrow: '<b style="font-size: 22px;">»</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
No comments to display
No comments to display