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


  • Banned

    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



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