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 number75 index74 alt2"><code class="plain plain">document.login.username.focus();</code></div><div class="line number76 index75 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 number75 index74 alt2"><code class="plain plain">document.login.username.focus();</code></div><div class="line number76 index75 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 cust...

Read more »