Simple captive portal page templates (valid HTML5, mobile-friendly)

doktornotor

I just thought I'd share this in case someone needs something simple. "Documentation" inlined ;D

Portal page contents


<title>Hotel WiFi Hotspot</title>

 [![Hotel Logo](captiveportal-logo_hotel.png)](http://hotelwebsite.example.com/) 

 [![WiFi Hotspot Logo](captiveportal-wifi-hotspot-logo-small.png)](http://wifi.hotel.local:8000/) 

<form method="post" action="$PORTAL_ACTION$">

	<label for="auth_voucher">Input your voucher code</label>

	![WiFi](captiveportal-wireless-signal-16.png)

</form>

In case you have no idea what a voucher is and why are you seeing this page, please contact our hotel reception.

Authentication error page contents


<title>Hotel WiFi Hotspot</title>

 [![Hotel Logo](captiveportal-logo_hotel.png)](http://hotelwebsite.example.com/) 

 [![WiFi Hotspot Logo](captiveportal-wifi-hotspot-logo-small.png)](http://wifi.hotel.local:8000/) 

### $PORTAL_MESSAGE$

<form method="post" action="$PORTAL_ACTION$">

	<label for="auth_voucher">Input your voucher code</label>

	![WiFi](captiveportal-wireless-signal-16.png)

</form>

In case you have no idea what a voucher is and why are you seeing this page, please contact our hotel reception.

Logout page contents
N/A - popups are evil and are blocked just in about any browser!

Customizations for user/password authentication:
Add to/Replace the voucher code with this snippet in proper place, see inline comments…


	<label for="auth_user">Enter your username:</label> 

	<label for="auth_pass">Enter your password:</label>

Graphics:
Nice WiFi-related icons here:

http://icones.pro/en/wireless-radio-network-wireless-png-image.html
http://icones.pro/en/radio-wireless-signal-png-image.html
http://icones.pro/en/fi-wireless-network-png-image.html
https://www.google.com/search?q=wifi+hotspot+logo

(I am uploading those via CP File Manager, for external ones, see Alllowed Hostnames in CP!)

License:
WTFPLv2 ;D

Enjoy! :-* :D

nates9999

:(i need some help with my CP templates..im suck on web design..can u help me check my templates coding ? :(