Changeset 14062 in hybrid


Ignore:
Timestamp:
Feb 28, 2018, 11:05:06 AM (7 years ago)
Author:
rick
Message:

Fix captive portal hard to use on mobile devices

Mobile phones & iPads do not like the old layout rendering it ugly.
Using bootstrap to make it more pretty.

Note: This is a stripped down version of the captive portal of 11-RELEASE
without multi-language support.

Location:
branches/releng-9/nanobsd/files/usr/local
Files:
7 added
2 edited

Legend:

Unmodified
Added
Removed

  • branches/releng-9/nanobsd/files/usr/local/etc/wlportal/login.tmpl

    r11018 r14062  
    1 <html>
    2   <!-- This is an devel/py-Jinja2 template -->
     1<!DOCTYPE html>
     2<html lang="en">
    33  <head>
    4     <title>Welkom bij Wireless Leiden captive portal</title>
     4    <meta charset="utf-8">
     5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
     6    <meta name="viewport" content="width=device-width, initial-scale=1">
     7
     8    <title>Wireless Leiden - Captive Portal</title>
     9
     10    <!-- Bootstrap core CSS -->
     11    <link href="css/bootstrap.min.css" rel="stylesheet">
     12
     13    <!-- Custom styles for this template -->
     14    <link href="css/jumbotron-narrow.css" rel="stylesheet">
     15
     16    <style type='text/css'>
     17      li {
     18        padding: 10px 0px;
     19      }
     20    </style>
    521  </head>
    6   <style type='text/css'>
    7 .status {
    8   background-color: lightgrey;
    9   text-align: center;
    10 }
    11 .warning {
    12   background-color: orange;
    13   text-align: center;
    14 }
    15   </style>
     22 
    1623  <body>
    17 <table width="100%"><tr>
    18   <td>
    19     <div class="status"><h2>{{ status_msg }}</h2></div>
    20     <div class="warning">{{ warning_msg }}</div>
    21   </td>
    22   <td width="50px"><img src="/static/wl-logo.png"></td>
    23 </tr></table>
    24 <hr />
    25    <small><i><a href="#english">For English see bottom of this page</a></i></small>
    26    <h3>Eerlijk gebruikmaken van Wireless Leiden</h3>
    27    <pre>
    28    A) Het gebruik van het Wireless Leiden netwerk en de internettoegang zijn
    29       kostenloos en u hoeft zich niet aan te melden.
    30    B) U dient zich te houden aan de Nederlandse wetgeving en geen schade toe te
    31       brengen of ongemak te veroorzaken voor anderen.
    32    C) De Stichting Wireless Leiden accepteert geen enkele aansprakelijkheid
    33       voor schade in welke vorm dan ook die is ontstaan door of verband houdt
    34       met het gebruik van het netwerk.
    35    </pre>
     24    <div class="container">
     25      <div class="container-fluid">
     26       <div class="navbar">
     27         <div class="navbar-header pull-left">
     28           <img src="/static/wl-logo.png" style="float:left; padding: 5px;" width="80" height="50" title="Stichting Wireless Leiden">
     29                 <span class="navbar-brand hidden-xs">Stichting Wireless Leiden</span>
     30         </div>
     31         <div class="navbar-header pull-right">
     32      </div>
     33   </div>
    3634
    37    <h3>Internet Toegang</h3>
    38    <p>Internetten op het Wireless Leiden netwerk kan op twee manieren:<br />
    39    <small>N.B. U kunt alleen internetten via uw webbrowser, andere toepassingen zoals Microsoft Outlook zijn niet mogelijk. Gebruik webmail om te e-mailen.</small>
    40    <ol>
    41    <li>In uw browser een 'proxy' instellen. (in het algemeen sneller internet).</li>
    42    <li>Gebruik maken van de iLeiden service (gemakkelijk voor mobiele apparaten).</li>
    43    </ol>
     35   <div class="jumbotron">
     36     {{ status_msg }}
     37   </div>
    4438
    45  <form action="http://{{ portalroot }}/wlportal/" method="POST">
    46 <input name="action" type="hidden" value="login" />
    47 <input type="submit" value="I wil gebruik maken van iLeiden" style="color:#000000; background: green; font-weight: bold"/>
    48 </form>
     39   <div class="row marketing">
     40     <div class="col-xs-6">
     41       <h4>Gratis</h4>
     42       <p>Gemaakt en beheerd door vrijwilligers</p>
    4943
    50     <h4>Instellen proxy in browser</h4>
    51     In Firefox: ga naar <em>Edit->Preferences-&gt;Advanced-&gt;Network-&gt;Settings.</em><br />
    52     Handmatige proxy-configuratie: vul in HTTP proxy: proxy.wleiden.net port 3128.<br>
    53     <p>
    54     <small>N.B. Haal na gebruik de instellingen weer weg</small>
    55 <h4>Contact</h4>
    56 Vragen en opmerkingen kunt u kwijt op onze <a href="http://lijst.wirelessleiden.nl/mailman/listinfo/gebruikers">gebruikers mailing lijst</a>.
    57 <hr>
    58 <a name="english"></a>
    59     <h1>Welcome to Wireless Leiden</h1>
    60    <h3>Internet access</h3>
    61    <p>You are connected to the local Wireless Leiden network. To use one of the gateways (proxies) to Internet you have to specify a proxy in your web browser OR click on the button bellow.<br>
    62     To set the proxy for instance in Firefox go to Edit->Preferences->Advanced->Network->Settings.<br>
    63     Manual proxy configuration: specify HTTP proxy: proxy.wleiden.net port 3128.<br>
    64     Detailed instructions can be downloaded from our <a href="http://www.wirelessleiden.nl">website</a>.
    65     </p>
    66     <p>
    67     Please note that you can only access the internet via your webbrowser, use of other applications like Microsoft Outlook is not possible (you have to use webmail).
     44       <h4>Gemeenschap</h4>
     45       <p>Mede mogelijk gemaakt door vele sponsoren</p>
    6846
    69     <h3>Fair Use of Wireless Leiden</h3>
    70     The use of the Wireless Leiden network and the internet connection are free and no registration is required. However, you should refrain from any illegal activity and not provide harm of any kind or inconvenience to other users.<br>
    71     The Wireless Leiden Foundation does not accept any responsibility whatsoever for damage related to or originated from the use of the network.
     47       <h4>Innovatie</h4>
     48       <p>Al onze innovatie is vrij te gebruiken door andere (vrijwilligers) organisaties</p>
     49     </div>
    7250
    73 <form action="http://{{ portalroot }}/wlportal/" method="POST">
    74 <input name="action" type="hidden" value="login" />
    75 <input type="submit" value="OK, agreed" style="color:#000000; background: green; font-weight: bold" />
    76 </form>
     51     <div class="col-xs-6">
     52       <h4>Betrokken</h4>
     53       <p>Een open netwerk toegankelijk voor iedereen</p>
    7754
    78 <hr>
    79    <br>
    80 <em>
    81    <a href="http://www.wirelessleiden.nl">Wireless Leiden Homepage</a>
    82    <br />
    83    </em>
    84 <h3>More options</h3>
    85 <form action="http://{{ portalroot }}/wlportal/" method="POST">
    86 <input name="action" type="hidden" value="logout" />
    87 <input type="submit" value="Cancel and/or Logout" style="color:#000000; background: red; font-weight: bold"/>
    88 </form>
    89 <hr /><em>Technical Details:</em><pre>
    90 {{ tech_footer }}
    91 </pre>
     55       <h4>Diensten</h4>
     56       <p>Spin-offs van diverse technologie bedrijven</p>
     57
     58       <h4>Open</h4>
     59       <p>Geen restricties, limieten of andere verborgen blokkades</p>
     60     </div>
     61   </div>
     62
     63   <div class="footer">
     64     <p>Stichting Wireless Leiden</p>
     65   </div>
     66
     67    <!-- Bootstrap core JavaScript
     68    ================================================== -->
     69    <!-- Placed at the end of the document so the pages load faster -->
     70    <script src="js/jquery.min.js"</script>
     71    <script src="js/ie10-viewport-bug-workaround.js"></script>
     72    <script src="js/bootstrap.min.js"></script>
    9273  </body>
    9374</html>
     75

  • branches/releng-9/nanobsd/files/usr/local/www/wlportal/index.html

    r13573 r14062  
    1 <html>
    2   <!-- This is an devel/py-Jinja2 template -->
     1<!DOCTYPE html>
     2<html lang="en">
    33  <head>
    4     <title>Welkom bij Wireless Leiden captive portal</title>
    5   <style type='text/css'>
    6 .status {
    7   background-color: lightgrey;
    8   text-align: center;
    9 }
    10 .warning {
    11   background-color: orange;
    12   text-align: center;
    13 }
    14   </style>
     4    <meta charset="utf-8">
     5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
     6    <meta name="viewport" content="width=device-width, initial-scale=1">
     7
     8    <title>Welkom bij Wireless Leiden - Captive Portal</title>
     9
     10    <!-- Bootstrap core CSS -->
     11    <link href="css/bootstrap.min.css" rel="stylesheet">
     12
     13    <!-- Custom styles for this template -->
     14    <link href="css/jumbotron-narrow.css" rel="stylesheet">
     15
     16    <style type='text/css'>
     17      li {
     18        padding: 10px 0px;
     19      }
     20    </style>
    1521  </head>
     22 
    1623  <body>
    17 <table width="100%"><tr>
    18   <td>
    19     <div class="status"><h2></h2></div>
    20     <div class="warning"></div>
    21   </td>
    22   <td width="50px"><img src="/static/wl-logo.png"></td>
    23 </tr></table>
    24 <hr />
    25    <small><i><a href="#english">For English see bottom of this page</a></i></small>
    26    <h3>Eerlijk gebruikmaken van Wireless Leiden</h3>
    27    <pre>
    28    A) Het gebruik van het Wireless Leiden netwerk en de internettoegang zijn
    29       kostenloos en u hoeft zich niet aan te melden.
    30    B) U dient zich te houden aan de Nederlandse wetgeving en geen schade toe te
    31       brengen of ongemak te veroorzaken voor anderen.
    32    C) De Stichting Wireless Leiden accepteert geen enkele aansprakelijkheid
    33       voor schade in welke vorm dan ook die is ontstaan door of verband houdt
    34       met het gebruik van het netwerk.
    35    </pre>
     24    <div class="container">
     25      <div class="container-fluid">
     26       <div class="navbar">
     27         <div class="navbar-header pull-left">
     28           <img src="/static/wl-logo.png" style="float:left; padding: 5px;" width="80" height="50" title="Stichting Wireless Leiden">
     29                 <span class="navbar-brand hidden-xs">Stichting Wireless Leiden</span>
     30         </div>
     31         <div class="navbar-header pull-right">
     32      </div>
     33   </div>
    3634
    37    <h3>Internet Toegang</h3>
    38    <p>Internetten op het Wireless Leiden netwerk kan op twee manieren:<br />
    39    <small>N.B. U kunt alleen internetten via uw webbrowser, andere toepassingen zoals Microsoft Outlook zijn niet mogelijk. Gebruik webmail om te e-mailen.</small>
    40    <ol>
    41    <li>In uw browser een 'proxy' instellen. (in het algemeen sneller internet).</li>
    42    <li>Gebruik maken van de iLeiden service (gemakkelijk voor mobiele apparaten).</li>
    43    </ol>
     35   <div class="jumbotron">
     36     <p class="lead">
     37     Eerlijk gebruik maken van Wireless Leiden
     38     <ul class="text-left">
     39       <li>Het gebruik van het Wireless Leiden netwerk en de internettoegang zijn kostenloos en u hoeft zich niet aan te melden.</li>
     40       <li>U dient zich te houden aan de Nederlandse wetgeving en geen schade toe te brengen of ongemak te veroorzaken voor anderen.</li>
     41       <li>De Stichting Wireless Leiden accepteert geen enkele aansprakelijkheid voor schade in welke vorm dan ook die is ontstaan door of verband houdt met het gebruik van het netwerk.</li>
     42     </ul>
     43       
     44     <form action="http://172.31.255.1/wlportal/index.cgi" method="POST">
     45       <input name="action" type="hidden" value="login" />
     46       <input type="submit" value="Ik ga akkoord" class="btn-block btn btn-lg btn-success" />
     47     </form>
     48   </div>
    4449
    45  <form action="http://172.31.255.1/wlportal/index.cgi" method="POST">
    46 <input name="action" type="hidden" value="login" />
    47 <input type="submit" value="I wil gebruik maken van iLeiden" style="color:#000000; background: green; font-weight: bold"/>
    48 </form>
     50   <div class="row marketing">
     51     <div class="col-xs-6">
     52       <h4>Gratis</h4>
     53       <p>Gemaakt en beheerd door vrijwilligers</p>
    4954
    50     <h4>Instellen proxy in browser</h4>
    51     In Firefox: ga naar <em>Edit->Preferences-&gt;Advanced-&gt;Network-&gt;Settings.</em><br />
    52     Handmatige proxy-configuratie: vul in HTTP proxy: proxy.wleiden.net port 3128.<br>
    53     <p>
    54     <small>N.B. Haal na gebruik de instellingen weer weg</small>
    55 <h4>Contact</h4>
    56 <b><i>Voor storingen en problemen die u ondervindt met Wireless Leiden kunt u een mail sturen naar <A HREF="mailto:support@wirelessleiden.nl?SUBJECT=Storing gemeld door gebruiker&BODY=Te%20verstrekken%20gegevens%3A%0D%0AUw%20naam%3A%0DLocatie%3A%0AE-Mail %3A%0AProbleem%20omschrijving%3a%0A">support@wirelessleiden.nl</A><br> met vermelding van uw locatie en een zo gedetaileerd mogelijke probleem omschrijving.</b></i><br><br>
    57 Algemene vragen en opmerkingen kunt u kwijt op onze <a href="http://lijst.wirelessleiden.nl/mailman/listinfo/gebruikers">gebruikers mailing lijst</a>.<br>
    58 <hr>
    59 <a name="english"></a>
    60     <h1>Welcome to Wireless Leiden</h1>
    61    <h3>Internet access</h3>
    62    <p>You are connected to the local Wireless Leiden network. To use one of the gateways (proxies) to Internet you have to specify a proxy in your web browser OR click on the button bellow.<br>
    63     To set the proxy for instance in Firefox go to Edit->Preferences->Advanced->Network->Settings.<br>
    64     Manual proxy configuration: specify HTTP proxy: proxy.wleiden.net port 3128.<br>
    65     Detailed instructions can be downloaded from our <a href="http://www.wirelessleiden.nl">website</a>.
    66     </p>
    67     <p>
    68     Please note that you can only access the internet via your webbrowser, use of other applications like Microsoft Outlook is not possible (you have to use webmail).
     55       <h4>Gemeenschap</h4>
     56       <p>Mede mogelijk gemaakt door vele sponsoren</p>
    6957
    70     <h3>Fair Use of Wireless Leiden</h3>
    71     The use of the Wireless Leiden network and the internet connection are free and no registration is required. However, you should refrain from any illegal activity and not provide harm of any kind or inconvenience to other users.<br>
    72     The Wireless Leiden Foundation does not accept any responsibility whatsoever for damage related to or originated from the use of the network.
     58       <h4>Innovatie</h4>
     59       <p>Al onze innovatie is vrij te gebruiken door andere (vrijwilligers) organisaties</p>
     60     </div>
    7361
    74 <form action="http://172.31.255.1/wlportal/" method="POST">
    75 <input name="action" type="hidden" value="login" />
    76 <input type="submit" value="OK, agreed" style="color:#000000; background: green; font-weight: bold" />
    77 </form>
     62     <div class="col-xs-6">
     63       <h4>Betrokken</h4>
     64       <p>Een open netwerk toegankelijk voor iedereen</p>
    7865
    79 <hr>
    80    <br>
    81 <em>
    82    <a href="http://www.wirelessleiden.nl">Wireless Leiden Homepage</a>
    83    <br />
    84    </em>
    85 <h3>More options</h3>
    86 <form action="http://172.31.255.1/wlportal/" method="POST">
    87 <input name="action" type="hidden" value="logout" />
    88 <input type="submit" value="Cancel and/or Logout" style="color:#000000; background: red; font-weight: bold"/>
    89 </form>
    90 <hr /><em>Technical Details:</em><pre>
     66       <h4>Diensten</h4>
     67       <p>Spin-offs van diverse technologie bedrijven</p>
    9168
    92 </pre>
     69       <h4>Open</h4>
     70       <p>Geen restricties, limieten of andere verborgen blokkades</p>
     71     </div>
     72   </div>
     73
     74   <div class="footer">
     75     <p>Stichting Wireless Leiden</p>
     76   </div>
     77
     78    <!-- Bootstrap core JavaScript
     79    ================================================== -->
     80    <!-- Placed at the end of the document so the pages load faster -->
     81    <script src="js/jquery.min.js"</script>
     82    <script src="js/ie10-viewport-bug-workaround.js"></script>
     83    <script src="js/bootstrap.min.js"></script>
    9384  </body>
    9485</html>
Note: See TracChangeset for help on using the changeset viewer.