hello all,
I have this login.html for my hotspot
someone gave my this code - I have edit , but I forgot how to redirect to http://www.google.com (for example) after someone press login
can you help me please?
Thanks ,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Login</title>
<link rel="stylesheet" type="text/css" href="style.css" title="style" media="screen" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="-1" />
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function(){
$(".block").fadeIn(1000);
$(".idea").fadeIn(1000);
$('.idea').supersleight();
$('#username').example('Username');
$('#password').example('Password');
});
/* ]]> */
</script>
</head>
<body>
<div id="wrap">
<div class="idea">
<img src="images/open.png" alt=""/>
<p> Welcome to My Free WiFi</p>
</div>
<div class="block">
<form name="login" action="$(link-login-only)" method="post" $(if chap-id) onSubmit="return doLogin()" $(endif)>
<div class="left"></div>
<div class="right">
<input type="hidden" name="dst" value="$(link-orig)" />
<input type="hidden" name="popup" value="true" />
<div class="div-row">
<td>Enter name</td>
<input type="text" id="username" name="username" onfocus="this.value='';" onblur="if (this.value=='') {this.value='$(username)';}" value="$(username)" />
</div>
<div class="div-row">
<td>Enter password</td>
<input type="password" id="password" name="password" onfocus="this.value='';" onblur="if (this.value=='') {this.value='************';}" value="************" />
</div>
<br /></form></tr><td align="center"><img src="img/logobottom.png" alt="Myname" /></a></td></tr></center>
<div class="send-row">
<button id="login" value="" type="submit" name="login"></button>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
On the login.html page, change this.
// change this line
<input type="hidden" name="dst" value="$(link-orig)" />
// to this
<input type="hidden" name="dst" value="http://www.google.com" />
now it give me
“error 404 - file not found”
and the website is -
www.myhotspotdnsname.com/www.google.com
what to change?
Thanks,
http://wiki.mikrotik.com/wiki/Manual:Customizing_Hotspot
To choose different page shown after login, in login.html change:
to this line:
(you should correct the link to point to your server)
I guess I need to change it to -
http://www.google.com
and not just
http://www.google.com
now it’s work - thanks!
and now 1 more question
I want to make the page smaller and to put an image in the back
the size of the image is 400X500 px
I have try to use
- but didn't show me any change
this is also the style.css file that is used
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td { margin: 0; padding: 0; }
html{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#222;
line-height:20px;
}
body{
background:#68a5f8;
}
input,
textarea{
outline:none;
}
img{
border:none;
}
div#wrap{
width:500px;
height:460px;
margin-left:auto;
margin-right:auto;
position:relative;
}
div.idea{
height:36px;
width:478px;
position:absolute;
top:25px;
left:0px;
border:1px solid #fe8bfd;
background:#fe62fc;
color:#820101;
font-weight:bold;
padding:2px 10px 0 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
div.idea img{
margin:6px 10px 0 0;
float:left;
}
div.idea p{
margin:7px 0;
float:left;
color: #FFFFFF;
}
div.block{
height:216px;
width:500px;
position:absolute;
top:75px;
left:0px;
background:url('images/bg.jpg') no-repeat;
}
div.left{
height:160px;
width:146px;
position:absolute;
top:20px;
}
div.right{
height:120px;
width:354px;
padding:20px 0px;
position:absolute;
top:20px;
left:146px;
}
div.div-row{
height:31px;
width:354px;
margin-bottom:20px;
float:left;
}
div.block input{
float:left;
height:25px;
width:260px;
border:1px solid #ccc;
padding:4px 0 0 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
margin-left:40px;
font-size:16px;
color:#666;
}
div.rm-row{
float:left;
width:202px;
padding-left:40px;
height:24px;
}
div.rm-row input#remember{
float:left;
width:16px;
height:16px;
margin:4px 4px 0 0;
border:1px solid #ccc;
}
div.rm-row label{
float:left;
font-size:13px;
width:160px;
margin:2px 0 0 0;
color:#666;
}
div.send-row{
height:24px;
float:left;
width:70px;
}
div.send-row #login{
height:24px;
padding:0px;
width:70px;
float:right;
border:none;
background:url('images/login-icon.png') no-repeat;
cursor:pointer;
}
div.send-row #login:hover{
width:70px;
background:url('images/login-icon.png') no-repeat;
}
Thanks ,