hello ,
I want to know how to make a simple login page
picture and in the middle will have the basic " login - user name and pass"
I tried but all I get is the picture and in the button the login “user name and pass”
this is my HTML file :
David WIFI|
Please log on to use the internet hotspot service $(if trial == 'yes')Free trial available, click here.$(endif)
Powered by David $(if error) $(error) $(endif)
|
|||||||||
Thank you!
This is a standard HTML page. With the exception that some variables are inserted when the page is loaded. Your question can be answered many ways.
If all you want to do is move the login form up, you could change the top margin from “margin-top: 10%;” to “margin-top: 10px” or even “margin-top: 0”… look for the line:
There are many other things you can do. If you would recommend setting down with someone that knows HTML & CSS and having them help you edit the page if you need further help.
I tried to change it , but I still get the same thing.
I saw in the web that I need to write backgroung-image ??
but when I wrote it , I didn’t the picture at all.
any suggestion?
Your computer could be showing you a cached version of the page rather then the new file from the mikrotik… also you can right click in your browser and choose view source code to confirm that it is serving the new version by confirming that your changes are included in the page which is loaded in your browser. The issue your having is not a MikroTik issue, it is a web development issue. It would really help you to find someone who can work with you on the web development (html & css) side of the issue.
thanks ,
You need to replace the login.html file with the file that you changed. Don’t rename the file. When you get your hotspot login it will give you the login.html not a login2.html or some other.
Your html has many errors, including:
<INPUT CLASS="button" TYPE="image" src="img/top1.gif"/></a></center><div align="center">
<a
</div>
You have a and no opening
You have a <a (partial) and no closing
Your body tag has attributes: “leftmargin” “topmargin” “marginwidth” which are not valid.
etc.
Clean up the page before you go crazy trying to debug the hotspot:
I cleaned up your code a little bit… I had to make a few assumptions so I am not sure if this is what you want or not.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>David WIFI</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=320" />
<script type="text/javascript">
window.addEventListener('load', function() { setTimeout(scrollTo, 0, 0, 1); }, false);
</script>
</head>
<body>
<center>
<form name="login" action="http:login" method="post">
<input type="hidden" name="dst" value="http://www.google.com" />
<input type="hidden" name="popup" value="true" />
<input class="button" type="image" src="img/top1.gif"/>
</form>
</center>
<table width="100%" style="margin-top: 10%;">
<tr>
<td align="center" valign="middle">
<div class="notice" 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)&username=T-$(mac-esc)">click here</a>
.$(endif)
</div>
<br />
<table width="280" style="border: 1px solid #cccccc; padding: 0px; height:280px" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="bottom" height="175" colspan="2">
<form name="login" action="$(link-login-only)" method="post">
<input type="hidden" name="dst" value="$(link-orig)" />
<input type="hidden" name="popup" value="true" />
<table width="100" style="background-color: #ffffff">
<tr>
<td align="right">login</td>
<td>
<input style="width: 80px" name="username" type="text" value="$(username)"/>
</td>
</tr>
<tr>
<td align="right">password</td>
<td><input style="width: 80px" name="password" type="password"/></td>
</tr>
<tr><td> </td>
<td><input type="submit" value="OK" /></td>
</tr>
</table>
</form>
</td>
</tr>
<tr><td align="center"><img src="img/logobottom.gif" alt="David" /></td></tr>
</table>
<br />
<div style="color: #c1c1c1; font-size: 9px">Powered by David</div>
$(if error)<br /><div style="color: #FF8080; font-size: 9px">$(error)</div>$(endif)
</td>
</tr>
</table>
</body>
</html>
Pretty much a straight forward approach quite frankly and it being a standard html page would not really secure what you will have going on your pages. If you really decide to use this, you might as well check on how you could probably use some more extensions, htc access even so it will be a better implementation for you to use.
If you are not comfortable with it at its entirety though, then there will actually be no way you can write it on your own.
Thank you all for the help!
I will try myself after I saw what you did here.
hope I can do it ,
Thank again 