Mikrotik Book: Mikrotik Hotspot: Different login page for Mobile Users

<div dir="ltr" style="text-align: left;" trbidi="on">
<b>Recently a Nigerian friend asked about how we can configure different
 login page for Mobile users , which could be a light weight and 
customized for mobile/pda screen size with customized welcome message. 
Following is a quick method on how you can display different login page 
if user is login from mobile or device, & default login page for 
desktop users.</b><br />
<b>
</b><b>This is quick method, but if you want more sophisticated method like 
detect client by device, then you can use variable functions and act 
accordingly.</b><br />
<b>
</b><b>First the logic: You have to create 3 html pages,</b><br />
<br />
<blockquote>
<strong><span style="color: blue;">1-     login.html </span></strong><br />
<strong><span style="color: blue;">2-    mobilelogin.html</span></strong><br />
<strong><span style="color: blue;">3-    otherlogin.html</span></strong></blockquote>
<blockquote class="tr_bq">
<h2>
<span style="font-size: small;">1- login.html [Re directer which check user device/screen size]</span></h2>
</blockquote>
<br />
<span style="color: blue;"><strong> login.html</strong></span> page
 is a kind of re directer which will actually check the screen size of 
client device/screen. If it found it less then 800/600 , it will assume 
its a mobile device and will redirect to <span style="color: blue;"><strong>mobilelogin.html</strong></span>,<br />
otherwise it will display another login page <span style="color: blue;"><strong>otherlogin.html</strong></span> which could be default login page for all.<br />

First create <span style="color: blue;">login.html</span><br />

<div>
<div class="syntaxhighlighter  plain" id="highlighter_842976">
<table border="0" cellpadding="0" cellspacing="0"><tbody>
<tr><td class="gutter"><div class="line number1 index0 alt2">
1</div>
<div class="line number2 index1 alt1">
2</div>
<div class="line number3 index2 alt2">
3</div>
<div class="line number4 index3 alt1">
4</div>
<div class="line number5 index4 alt2">
5</div>
<div class="line number6 index5 alt1">
6</div>
<div class="line number7 index6 alt2">
7</div>
<div class="line number8 index7 alt1">
8</div>
</td><td class="code"><div class="container">
<div class="line number1 index0 alt2">
<code class="plain plain"><script type="text/javascript"></code></div>
<div class="line number2 index1 alt1">
<code class="plain plain">if ((screen.width<=800) && (screen.height<=600)) {</code></div>
<div class="line number3 index2 alt2">
<code class="plain plain">document.location="mobilelogin.html";</code></div>
<div class="line number4 index3 alt1">
<code class="plain plain">}</code></div>
<div class="line number5 index4 alt2">
<code class="plain plain">else {</code></div>
<div class="line number6 index5 alt1">
<code class="plain plain">document.location="otherlogin.html";</code></div>
<div class="line number7 index6 alt2">
<code class="plain plain">}</code></div>
<div class="line number8 index7 alt1">
<code class="plain plain"></script></code></div>
</div>
</td></tr>
</tbody></table>
</div>
</div>
♦♦♦<br />
<br />
<blockquote class="tr_bq">
<h2>
2- mobilelogin.html [lightweight login page for mobile users]</h2>
</blockquote>
<br />
<span style="color: blue;"><strong>mobilelogin.html</strong></span> is displayed if the client device/screen size is under 800/600. You can modify it as per requirements.<br />

<div>
<div class="syntaxhighlighter  plain" id="highlighter_879341">
<table border="0" cellpadding="0" cellspacing="0"><tbody>
<tr><td class="gutter"><div class="line number1 index0 alt2">
1</div>
<div class="line number2 index1 alt1">
2</div>
<div class="line number3 index2 alt2">
3</div>
<div class="line number4 index3 alt1">
4</div>
<div class="line number5 index4 alt2">
5</div>
<div class="line number6 index5 alt1">
6</div>
<div class="line number7 index6 alt2">
7</div>
<div class="line number8 index7 alt1">
8</div>
<div class="line number9 index8 alt2">
9</div>
<div class="line number10 index9 alt1">
10</div>
<div class="line number11 index10 alt2">
11</div>
<div class="line number12 index11 alt1">
12</div>
<div class="line number13 index12 alt2">
13</div>
<div class="line number14 index13 alt1">
14</div>
<div class="line number15 index14 alt2">
15</div>
<div class="line number16 index15 alt1">
16</div>
<div class="line number17 index16 alt2">
17</div>
<div class="line number18 index17 alt1">
18</div>
<div class="line number19 index18 alt2">
19</div>
<div class="line number20 index19 alt1">
20</div>
<div class="line number21 index20 alt2">
21</div>
<div class="line number22 index21 alt1">
22</div>
<div class="line number23 index22 alt2">
23</div>
<div class="line number24 index23 alt1">
24</div>
<div class="line number25 index24 alt2">
25</div>
<div class="line number26 index25 alt1">
26</div>
<div class="line number27 index26 alt2">
27</div>
<div class="line number28 index27 alt1">
28</div>
<div class="line number29 index28 alt2">
29</div>
<div class="line number30 index29 alt1">
30</div>
<div class="line number31 index30 alt2">
31</div>
<div class="line number32 index31 alt1">
32</div>
<div class="line number33 index32 alt2">
33</div>
<div class="line number34 index33 alt1">
34</div>
<div class="line number35 index34 alt2">
35</div>
<div class="line number36 index35 alt1">
36</div>
<div class="line number37 index36 alt2">
37</div>
<div class="line number38 index37 alt1">
38</div>
<div class="line number39 index38 alt2">
39</div>
<div class="line number40 index39 alt1">
40</div>
<div class="line number41 index40 alt2">
41</div>
<div class="line number42 index41 alt1">
42</div>
<div class="line number43 index42 alt2">
43</div>
<div class="line number44 index43 alt1">
44</div>
<div class="line number45 index44 alt2">
45</div>
<div class="line number46 index45 alt1">
46</div>
<div class="line number47 index46 alt2">
47</div>
<div class="line number48 index47 alt1">
48</div>
<div class="line number49 index48 alt2">
49</div>
<div class="line number50 index49 alt1">
50</div>
<div class="line number51 index50 alt2">
51</div>
<div class="line number52 index51 alt1">
52</div>
<div class="line number53 index52 alt2">
53</div>
<div class="line number54 index53 alt1">
54</div>
<div class="line number55 index54 alt2">
55</div>
<div class="line number56 index55 alt1">
56</div>
<div class="line number57 index56 alt2">
57</div>
<div class="line number58 index57 alt1">
58</div>
<div class="line number59 index58 alt2">
59</div>
<div class="line number60 index59 alt1">
60</div>
<div class="line number61 index60 alt2">
61</div>
<div class="line number62 index61 alt1">
62</div>
<div class="line number63 index62 alt2">
63</div>
<div class="line number64 index63 alt1">
64</div>
<div class="line number65 index64 alt2">
65</div>
<div class="line number66 index65 alt1">
66</div>
<div class="line number67 index66 alt2">
67</div>
<div class="line number68 index67 alt1">
68</div>
<div class="line number69 index68 alt2">
69</div>
<div class="line number70 index69 alt1">
70</div>
<div class="line number71 index70 alt2">
71</div>
<div class="line number72 index71 alt1">
72</div>
<div class="line number73 index72 alt2">
73</div>
<div class="line number74 index73 alt1">
74</div>
<div class="line number75 index74 alt2">
75</div>
<div class="line number76 index75 alt1">
76</div>
<div class="line number77 index76 alt2">
77</div>
<div class="line number78 index77 alt1">
78</div>
<div class="line number79 index78 alt2">
79</div>
</td><td class="code"><div class="container">
<div class="line number1 index0 alt2">
<code class="plain plain"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"</code></div>
<div class="line number2 index1 alt1">
<code class="plain plain">"<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"></code></div>
<div class="line number3 index2 alt2">
 </div>
<div class="line number4 index3 alt1">
<code class="plain plain"><head></code></div>
<div class="line number5 index4 alt2">
<code class="plain plain"><title>internet hotspot > login</title></code></div>
<div class="line number6 index5 alt1">
<code class="plain plain"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /></code></div>
<div class="line number7 index6 alt2">
<code class="plain plain"><meta http-equiv="pragma" content="no-cache" /></code></div>
<div class="line number8 index7 alt1">
<code class="plain plain"><meta http-equiv="expires" content="-1" /></code></div>
<div class="line number9 index8 alt2">
<code class="plain plain"><style type="text/css"></code></div>
<div class="line number10 index9 alt1">
<code class="plain plain">body {color: #737373; font-size: 10px; font-family: verdana;}</code></div>
<div class="line number11 index10 alt2">
 </div>
<div class="line number12 index11 alt1">
<code class="plain plain">textarea,input,select {</code></div>
<div class="line number13 index12 alt2">
<code class="plain plain">background-color: #FDFBFB;</code></div>
<div class="line number14 index13 alt1">
<code class="plain plain">border: 1px solid #BBBBBB;</code></div>
<div class="line number15 index14 alt2">
<code class="plain plain">padding: 2px;</code></div>
<div class="line number16 index15 alt1">
<code class="plain plain">margin: 1px;</code></div>
<div class="line number17 index16 alt2">
<code class="plain plain">font-size: 14px;</code></div>
<div class="line number18 index17 alt1">
<code class="plain plain">color: #808080;</code></div>
<div class="line number19 index18 alt2">
<code class="plain plain">}</code></div>
<div class="line number20 index19 alt1">
 </div>
<div class="line number21 index20 alt2">
<code class="plain plain">a, a:link, a:visited, a:active { color: #AAAAAA; text-decoration: none; font-size: 10px; }</code></div>
<div class="line number22 index21 alt1">
<code class="plain plain">a:hover { border-bottom: 1px dotted #c1c1c1; color: #AAAAAA; }</code></div>
<div class="line number23 index22 alt2">
<code class="plain plain">img {border: none;}</code></div>
<div class="line number24 index23 alt1">
<code class="plain plain">td { font-size: 14px; color: #7A7A7A; }</code></div>
<div class="line number25 index24 alt2">
<code class="plain plain"></style></code></div>
<div class="line number26 index25 alt1">
 </div>
<div class="line number27 index26 alt2">
<code class="plain plain"></head></code></div>
<div class="line number28 index27 alt1">
 </div>
<div class="line number29 index28 alt2">
<code class="plain plain"><html></code></div>
<div class="line number30 index29 alt1">
<code class="plain plain"><body></code></div>
<div class="line number31 index30 alt2">
 </div>
<div class="line number32 index31 alt1">
<code class="plain plain"><div align="center"></code></div>
<div class="line number33 index32 alt2">
<code class="plain plain"><a href="$(link-login-only)?target=lv&amp;dst=$(link-orig-esc)">Latviski</a></code></div>
<div class="line number34 index33 alt1">
<code class="plain plain"></div></code></div>
<div class="line number35 index34 alt2">
<code class="plain plain"><div align="center"></code></div>
<div class="line number36 index35 alt1">
<code class="plain plain"><b><font size="4">mobile user</font></b></div></code></div>
<div class="line number37 index36 alt2">
 </div>
<div class="line number38 index37 alt1">
<code class="plain plain"><table width="100%" style="margin-top: 10%;"></code></div>
<div class="line number39 index38 alt2">
<code class="plain plain"><tr></code></div>
<div class="line number40 index39 alt1">
<code class="plain plain"><td align="center" valign="middle"></code></div>
<div class="line number41 index40 alt2">
<code class="plain plain"><div
 style="color: #c1c1c1; font-size: 9px">Please log on to use the 
internet hotspot service<br />$(if trial == 'yes')Free trial 
available, <a style="color: 
#FF8080"href="$(link-login-only)?dst=$(link-orig-esc)&amp;username=T-$(mac-esc)">click
 here</a>.$(endif)</div><br /></code></div>
<div class="line number42 index41 alt1">
<code class="plain plain"><table width="280" height="280" style="border: 1px solid #cccccc; padding: 0px;" cellpadding="0" cellspacing="0"></code></div>
<div class="line number43 index42 alt2">
<code class="plain plain"><tr></code></div>
<div class="line number44 index43 alt1">
<code class="plain plain"><td align="center" valign="bottom" height="175" colspan="2"></code></div>
<div class="line number45 index44 alt2">
<code class="plain plain"><form name="login" action="$(link-login-only)" method="post"</code></div>
<div class="line number46 index45 alt1">
<code class="plain plain">$(if chap-id) onSubmit="return doLogin()" $(endif)></code></div>
<div class="line number47 index46 alt2">
<code class="plain plain"><input type="hidden" name="dst" value="$(link-orig)" /></code></div>
<div class="line number48 index47 alt1">
<code class="plain plain"><input type="hidden" name="popup" value="true" /></code></div>
<div class="line number49 index48 alt2">
 </div>
<div class="line number50 index49 alt1">
<code class="plain plain"><table width="100" style="background-color: #ffffff"></code></div>
<div class="line number51 index50 alt2">
<code class="plain plain"><tr><td align="right">login</td></code></div>
<div class="line number52 index51 alt1">
<code class="plain plain"><td><input style="width: 80px" name="username" type="text" value="$(username)"/></td></code></div>
<div class="line number53 index52 alt2">
<code class="plain plain"></tr></code></div>
<div class="line number54 index53 alt1">
<code class="plain plain"><tr><td align="right">password</td></code></div>
<div class="line number55 index54 alt2">
<code class="plain plain"><td><input style="width: 80px" name="password" type="password"/></td></code></div>
<div class="line number56 index55 alt1">
<code class="plain plain"></tr></code></div>
<div class="line number57 index56 alt2">
<code class="plain plain"><tr><td>&nbsp;</td></code></div>
<div class="line number58 index57 alt1">
<code class="plain plain"><td><input type="submit" value="OK" /></td></code></div>
<div class="line number59 index58 alt2">
<code class="plain plain"></tr></code></div>
<div class="line number60 index59 alt1">
<code class="plain plain"></table></code></div>
<div class="line number61 index60 alt2">
<code class="plain plain"></form></code></div>
<div class="line number62 index61 alt1">
<code class="plain plain"></td></code></div>
<div class="line number63 index62 alt2">
<code class="plain plain"></tr></code></div>
<div class="line number64 index63 alt1">
<code class="plain plain"><tr><td align="center"><a href="<a href="http://www.mikrotik.com/">http://www.mikrotik.com</a>" target="_blank" style="border: none;"><img src="img/logobottom.png" alt="mikrotik" /></a></td></tr></code></div>
<div class="line number65 index64 alt2">
<code class="plain plain"></table></code></div>
<div class="line number66 index65 alt1">
 </div>
<div class="line number67 index66 alt2">
<code class="plain plain"><br /><div style="color: #c1c1c1; font-size: 9px">Powered by MikroTik RouterOS</div></code></div>
<div class="line number68 index67 alt1">
<code class="plain plain">$(if error)<br /><div style="color: #FF8080; font-size: 9px">$(error)</div>$(endif)</code></div>
<div class="line number69 index68 alt2">
<code class="plain plain"></td></code></div>
<div class="line number70 index69 alt1">
<code class="plain plain"></tr></code></div>
<div class="line number71 index70 alt2">
<code class="plain plain"></table></code></div>
<div class="line number72 index71 alt1">
 </div>
<div class="line number73 index72 alt2">
<code class="plain plain"><script type="text/javascript"></code></div>
<div class="line number74 index73 alt1">
<code class="plain plain"></code></div>
<div class="line number77 index76 alt2">
<code class="plain plain"></script></code></div>
<div class="line number78 index77 alt1">
<code class="plain plain"></body></code></div>
<div class="line number79 index78 alt2">
<code class="plain plain"></html></code></div>
</div>
</td></tr>
</tbody></table>
</div>
</div>
♦♦♦<br />
<br />
<h2>
3- otherlogin.html [standard login page for ALL]</h2>
<h2>
 </h2>
<span style="color: blue;">otherlogin.html</span> /  This is standard<span style="color: blue;"> login.html</span> page which is default mikrotik login page. You can use your old default l<span style="color: blue;">ogin.html</span> and rename it as to <span style="color: blue;">otherlogin.html</span><br />

<div>
<div class="syntaxhighlighter  plain" id="highlighter_673368">
<table border="0" cellpadding="0" cellspacing="0"><tbody>
<tr><td class="gutter"><div class="line number1 index0 alt2">
1</div>
<div class="line number2 index1 alt1">
2</div>
<div class="line number3 index2 alt2">
3</div>
<div class="line number4 index3 alt1">
4</div>
<div class="line number5 index4 alt2">
5</div>
<div class="line number6 index5 alt1">
6</div>
<div class="line number7 index6 alt2">
7</div>
<div class="line number8 index7 alt1">
8</div>
<div class="line number9 index8 alt2">
9</div>
<div class="line number10 index9 alt1">
10</div>
<div class="line number11 index10 alt2">
11</div>
<div class="line number12 index11 alt1">
12</div>
<div class="line number13 index12 alt2">
13</div>
<div class="line number14 index13 alt1">
14</div>
<div class="line number15 index14 alt2">
15</div>
<div class="line number16 index15 alt1">
16</div>
<div class="line number17 index16 alt2">
17</div>
<div class="line number18 index17 alt1">
18</div>
<div class="line number19 index18 alt2">
19</div>
<div class="line number20 index19 alt1">
20</div>
<div class="line number21 index20 alt2">
21</div>
<div class="line number22 index21 alt1">
22</div>
<div class="line number23 index22 alt2">
23</div>
<div class="line number24 index23 alt1">
24</div>
<div class="line number25 index24 alt2">
25</div>
<div class="line number26 index25 alt1">
26</div>
<div class="line number27 index26 alt2">
27</div>
<div class="line number28 index27 alt1">
28</div>
<div class="line number29 index28 alt2">
29</div>
<div class="line number30 index29 alt1">
30</div>
<div class="line number31 index30 alt2">
31</div>
<div class="line number32 index31 alt1">
32</div>
<div class="line number33 index32 alt2">
33</div>
<div class="line number34 index33 alt1">
34</div>
<div class="line number35 index34 alt2">
35</div>
<div class="line number36 index35 alt1">
36</div>
<div class="line number37 index36 alt2">
37</div>
<div class="line number38 index37 alt1">
38</div>
<div class="line number39 index38 alt2">
39</div>
<div class="line number40 index39 alt1">
40</div>
<div class="line number41 index40 alt2">
41</div>
<div class="line number42 index41 alt1">
42</div>
<div class="line number43 index42 alt2">
43</div>
<div class="line number44 index43 alt1">
44</div>
<div class="line number45 index44 alt2">
45</div>
<div class="line number46 index45 alt1">
46</div>
<div class="line number47 index46 alt2">
47</div>
<div class="line number48 index47 alt1">
48</div>
<div class="line number49 index48 alt2">
49</div>
<div class="line number50 index49 alt1">
50</div>
<div class="line number51 index50 alt2">
51</div>
<div class="line number52 index51 alt1">
52</div>
<div class="line number53 index52 alt2">
53</div>
<div class="line number54 index53 alt1">
54</div>
<div class="line number55 index54 alt2">
55</div>
<div class="line number56 index55 alt1">
56</div>
<div class="line number57 index56 alt2">
57</div>
<div class="line number58 index57 alt1">
58</div>
<div class="line number59 index58 alt2">
59</div>
<div class="line number60 index59 alt1">
60</div>
<div class="line number61 index60 alt2">
61</div>
<div class="line number62 index61 alt1">
62</div>
<div class="line number63 index62 alt2">
63</div>
<div class="line number64 index63 alt1">
64</div>
<div class="line number65 index64 alt2">
65</div>
<div class="line number66 index65 alt1">
66</div>
<div class="line number67 index66 alt2">
67</div>
<div class="line number68 index67 alt1">
68</div>
<div class="line number69 index68 alt2">
69</div>
<div class="line number70 index69 alt1">
70</div>
<div class="line number71 index70 alt2">
71</div>
<div class="line number72 index71 alt1">
72</div>
<div class="line number73 index72 alt2">
73</div>
<div class="line number74 index73 alt1">
74</div>
<div class="line number75 index74 alt2">
75</div>
<div class="line number76 index75 alt1">
76</div>
<div class="line number77 index76 alt2">
77</div>
<div class="line number78 index77 alt1">
78</div>
<div class="line number79 index78 alt2">
79</div>
</td><td class="code"><div class="container">
<div class="line number1 index0 alt2">
<code class="plain plain"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"</code></div>
<div class="line number2 index1 alt1">
<code class="plain plain">"<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"></code></div>
<div class="line number3 index2 alt2">
 </div>
<div class="line number4 index3 alt1">
<code class="plain plain"><head></code></div>
<div class="line number5 index4 alt2">
<code class="plain plain"><title>internet hotspot > login</title></code></div>
<div class="line number6 index5 alt1">
<code class="plain plain"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /></code></div>
<div class="line number7 index6 alt2">
<code class="plain plain"><meta http-equiv="pragma" content="no-cache" /></code></div>
<div class="line number8 index7 alt1">
<code class="plain plain"><meta http-equiv="expires" content="-1" /></code></div>
<div class="line number9 index8 alt2">
<code class="plain plain"><style type="text/css"></code></div>
<div class="line number10 index9 alt1">
<code class="plain plain">body {color: #737373; font-size: 10px; font-family: verdana;}</code></div>
<div class="line number11 index10 alt2">
 </div>
<div class="line number12 index11 alt1">
<code class="plain plain">textarea,input,select {</code></div>
<div class="line number13 index12 alt2">
<code class="plain plain">background-color: #FDFBFB;</code></div>
<div class="line number14 index13 alt1">
<code class="plain plain">border: 1px solid #BBBBBB;</code></div>
<div class="line number15 index14 alt2">
<code class="plain plain">padding: 2px;</code></div>
<div class="line number16 index15 alt1">
<code class="plain plain">margin: 1px;</code></div>
<div class="line number17 index16 alt2">
<code class="plain plain">font-size: 14px;</code></div>
<div class="line number18 index17 alt1">
<code class="plain plain">color: #808080;</code></div>
<div class="line number19 index18 alt2">
<code class="plain plain">}</code></div>
<div class="line number20 index19 alt1">
 </div>
<div class="line number21 index20 alt2">
<code class="plain plain">a, a:link, a:visited, a:active { color: #AAAAAA; text-decoration: none; font-size: 10px; }</code></div>
<div class="line number22 index21 alt1">
<code class="plain plain">a:hover { border-bottom: 1px dotted #c1c1c1; color: #AAAAAA; }</code></div>
<div class="line number23 index22 alt2">
<code class="plain plain">img {border: none;}</code></div>
<div class="line number24 index23 alt1">
<code class="plain plain">td { font-size: 14px; color: #7A7A7A; }</code></div>
<div class="line number25 index24 alt2">
<code class="plain plain"></style></code></div>
<div class="line number26 index25 alt1">
 </div>
<div class="line number27 index26 alt2">
<code class="plain plain"></head></code></div>
<div class="line number28 index27 alt1">
 </div>
<div class="line number29 index28 alt2">
<code class="plain plain"><html></code></div>
<div class="line number30 index29 alt1">
<code class="plain plain"><body></code></div>
<div class="line number31 index30 alt2">
 </div>
<div class="line number32 index31 alt1">
<code class="plain plain"><div align="center"></code></div>
<div class="line number33 index32 alt2">
<code class="plain plain"><a href="$(link-login-only)?target=lv&amp;dst=$(link-orig-esc)">Latviski</a></code></div>
<div class="line number34 index33 alt1">
<code class="plain plain"></div></code></div>
<div class="line number35 index34 alt2">
<code class="plain plain"><div align="center"></code></div>
<div class="line number36 index35 alt1">
<code class="plain plain"><font
 size="4"><b>DESKTOP </b></font><b><font 
size="4">&nbsp;user</font></b></div></code></div>
<div class="line number37 index36 alt2">
 </div>
<div class="line number38 index37 alt1">
<code class="plain plain"><table width="100%" style="margin-top: 10%;"></code></div>
<div class="line number39 index38 alt2">
<code class="plain plain"><tr></code></div>
<div class="line number40 index39 alt1">
<code class="plain plain"><td align="center" valign="middle"></code></div>
<div class="line number41 index40 alt2">
<code class="plain plain"><div
 style="color: #c1c1c1; font-size: 9px">Please log on to use the 
internet hotspot service<br />$(if trial == 'yes')Free trial 
available, <a style="color: 
#FF8080"href="$(link-login-only)?dst=$(link-orig-esc)&amp;username=T-$(mac-esc)">click
 here</a>.$(endif)</div><br /></code></div>
<div class="line number42 index41 alt1">
<code class="plain plain"><table width="280" height="280" style="border: 1px solid #cccccc; padding: 0px;" cellpadding="0" cellspacing="0"></code></div>
<div class="line number43 index42 alt2">
<code class="plain plain"><tr></code></div>
<div class="line number44 index43 alt1">
<code class="plain plain"><td align="center" valign="bottom" height="175" colspan="2"></code></div>
<div class="line number45 index44 alt2">
<code class="plain plain"><form name="login" action="$(link-login-only)" method="post"</code></div>
<div class="line number46 index45 alt1">
<code class="plain plain">$(if chap-id) onSubmit="return doLogin()" $(endif)></code></div>
<div class="line number47 index46 alt2">
<code class="plain plain"><input type="hidden" name="dst" value="$(link-orig)" /></code></div>
<div class="line number48 index47 alt1">
<code class="plain plain"><input type="hidden" name="popup" value="true" /></code></div>
<div class="line number49 index48 alt2">
 </div>
<div class="line number50 index49 alt1">
<code class="plain plain"><table width="100" style="background-color: #ffffff"></code></div>
<div class="line number51 index50 alt2">
<code class="plain plain"><tr><td align="right">login</td></code></div>
<div class="line number52 index51 alt1">
<code class="plain plain"><td><input style="width: 80px" name="username" type="text" value="$(username)"/></td></code></div>
<div class="line number53 index52 alt2">
<code class="plain plain"></tr></code></div>
<div class="line number54 index53 alt1">
<code class="plain plain"><tr><td align="right">password</td></code></div>
<div class="line number55 index54 alt2">
<code class="plain plain"><td><input style="width: 80px" name="password" type="password"/></td></code></div>
<div class="line number56 index55 alt1">
<code class="plain plain"></tr></code></div>
<div class="line number57 index56 alt2">
<code class="plain plain"><tr><td>&nbsp;</td></code></div>
<div class="line number58 index57 alt1">
<code class="plain plain"><td><input type="submit" value="OK" /></td></code></div>
<div class="line number59 index58 alt2">
<code class="plain plain"></tr></code></div>
<div class="line number60 index59 alt1">
<code class="plain plain"></table></code></div>
<div class="line number61 index60 alt2">
<code class="plain plain"></form></code></div>
<div class="line number62 index61 alt1">
<code class="plain plain"></td></code></div>
<div class="line number63 index62 alt2">
<code class="plain plain"></tr></code></div>
<div class="line number64 index63 alt1">
<code class="plain plain"><tr><td align="center"><a href="<a href="http://www.mikrotik.com/">http://www.mikrotik.com</a>" target="_blank" style="border: none;"><img src="img/logobottom.png" alt="mikrotik" /></a></td></tr></code></div>
<div class="line number65 index64 alt2">
<code class="plain plain"></table></code></div>
<div class="line number66 index65 alt1">
 </div>
<div class="line number67 index66 alt2">
<code class="plain plain"><br /><div style="color: #c1c1c1; font-size: 9px">Powered by MikroTik RouterOS/zaib</div></code></div>
<div class="line number68 index67 alt1">
<code class="plain plain">$(if error)<br /><div style="color: #FF8080; font-size: 9px">$(error)</div>$(endif)</code></div>
<div class="line number69 index68 alt2">
<code class="plain plain"></td></code></div>
<div class="line number70 index69 alt1">
<code class="plain plain"></tr></code></div>
<div class="line number71 index70 alt2">
<code class="plain plain"></table></code></div>
<div class="line number72 index71 alt1">
 </div>
<div class="line number73 index72 alt2">
<code class="plain plain"><script type="text/javascript"></code></div>
<div class="line number74 index73 alt1">
<code class="plain plain"></code></div>
<div class="line number77 index76 alt2">
<code class="plain plain"></script></code></div>
<div class="line number78 index77 alt1">
<code class="plain plain"></body></code></div>
<div class="line number79 index78 alt2">
<code class="plain plain"></html></code></div>
</div>
</td></tr>
</tbody></table>
</div>
</div>
↓<br />

↓<br />

After three files have been created, Upload them to MIKROTIK / Files > Hotspot folders.<br />
<br />
<h2>
<strong><span style="color: red;">T</span><span style="color: blue;">E</span><span style="color: #ff6600;">S</span><span style="color: lime;">T</span> <span style="color: magenta;">D</span><span style="color: #cc99ff;">R</span>I<span style="color: green;">V</span><span style="color: #999999;">E</span> …</strong></h2>
First, From your mobile device try to connect to web and you should see yout mobilelogin.html page ,<br />
<em>Something like below …</em><br />

<div class="wp-caption aligncenter" id="attachment_4751" style="width: 310px;">
<a href="http://aacable.files.wordpress.com/2014/03/mobileuser-login.png"><img alt="Mikrotik HOTSPOT Mobile User Login Page" class="size-medium wp-image-4751" height="206" src="http://aacable.files.wordpress.com/2014/03/mobileuser-login.png?w=300&h=206" width="300" /></a><div class="wp-caption-text">
Mikrotik HOTSPOT Mobile User Login Page</div>
</div>
↓<br />

Now, try to login from DESKTOP PC, and you should see otherlogin.html page.<br />

<div class="wp-caption aligncenter" id="attachment_4752" style="width: 310px;">
<a href="http://aacable.files.wordpress.com/2014/03/desktop-login.png"><img alt="Mikrotik HOTSPOT Desktop User Login Page" class="size-medium wp-image-4752" height="271" src="http://aacable.files.wordpress.com/2014/03/desktop-login.png?w=300&h=271" title="" width="300" /></a><div class="wp-caption-text">
Mikrotik HOTSPOT Desktop User Login Page</div>
</div>
↓<br />

TIPS:<br />

If  user is unable to login, and you are seeing following error in <span style="color: red;"><strong>LOG</strong> </span>window<br />

<blockquote>
<span style="color: red;">login failed: password is not chap encrypted</span></blockquote>
Then Go to <strong>IP</strong> > <strong>Hotspot</strong> > <strong>Server</strong> Profiles and edit the relevant profile, go to the Login tab and <span style="text-decoration: underline;">uncheck</span> <strong>HTTP</strong> <strong>CHAP</strong> and check <span style="color: blue;"><strong>HTTP</strong> <strong>PAP</strong></span>. Then try again.<br />

↓<br />

☻<br />

Regard’s<br />
<h2>
 </h2>
<br />
<br />
<br />
</div>

Mikrotik Hotspot: Different login page for Mobile Users

Recently a Nigerian friend asked about how we can configure different login page for Mobile users , which could be a light weight and cus...

Mikrotik Book

Mikrotik Hotspot: Different login page for Mobile Users

Popular Posts

Pages

Labels

Join us on Facebook