免费WiFi
本酒店免费向入住宾客提供WiFi网络。 电子招待券为入住登记人身份证的后4位
[教程] 超简易的网页认证/扫码上网两用认证方案(wiwiz实现)
这个方案是用之前给某连锁酒店做的认证系统改的。
既能实现网页认证推送页面广告,通过客人自己输入身份证号尾号上网,也能实现入住客人扫码自动上网。
目前反馈效果不错。这里无偿把经验分享给大家。
以下是实现步骤:
第1步,设置好wiwiz热点,不会安装的去wiwiz官网看教程。注意一定要启用电子招待券和自定义认证页面两项功能。
第2步,在wiwiz后台添加一个电子招待券,最好设的长一些(30字符以内)。我这里的例子是:wifivoucher999
把招待券的内容先做base64编码,然后再做url编码,得到转码以后的文字:[color=Red]d2lmaXZvdWNoZXI5OTk%3D[/color]。
[u]如果自己不会转码,可以用附件里的文件Base64UrlEncode.rar。[/u]
第3步,在百度里随便找一个二维码生成器,用以下网址生成二维码:
[url=http://www.baidu.com/?a=]http://www.baidu.com/?a=[/url][color=Red]d2lmaXZvdWNoZXI5OTk%3D[/color]
可以用你自己转码后的招待券替换“a=”后面的部分。
我用的二维码图片是:
[attachimg]463424[/attachimg]
第4步,在wiwiz后台里把“认证页面类型”设置为“自定义认证页面HTML”。
把“自定义HTML”按以下的内容填写:[code]
.fontfamily {font-family: Microsoft YaHei, SimHei; color: #043307}
.footerlink {font-family: Microsoft YaHei, SimHei; color: #ffffff; text-decoration:none;}
.wiwizinputbox {
height:32px;
font: 18px/1.25 Microsoft YaHei, SimHei, arial, \5b8b\4f53;
margin-top:10px;
border:3px #d7d7d7 solid; background:#fff;
}
.wiwizbtn1 {
margin-top:10px;
background-color: #ffffff;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
/*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#736db4', endColorstr = '#404288');
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#736db4', endColorstr = '#404288')";
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
background-image: -moz-linear-gradient(top, #736db4, #404288);
background-image: -ms-linear-gradient(top, #736db4, #404288);
background-image: -o-linear-gradient(top, #736db4, #404288);
background-image: -webkit-gradient(linear, center top, center bottom, from(#736db4), to(#404288));
background-image: -webkit-linear-gradient(top, #736db4, #404288);
background-image: linear-gradient(top, #736db4, #404288);
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
/*Use "background-clip: padding-box" when using rounded corners to avoid the gradient bleeding through the corners*/
/*--IE9 WILL PLACE THE FILTER ON TOP OF THE ROUNDED CORNERS--*/
color: #ffffff;
height: 38px;
font-family:Microsoft YaHei;
font-size: 16px;
cursor: pointer;
}
/* PC */
#content {
width: 75%;
padding: 0% 0%;
}
#dvTerms {
position: absolute; width:66%; top:15%;left:17%;
}
#header {
float:left;
width:100%;
}
#leftbar {
float:left;
width:70%;
}
#rightbar {
float:right;
width:30%;
}
#footer {
float:left;
width:100%;
}
#myImg {
width: auto;
max-width: 100%;
}
[url=home.php?mod=space&uid=122441]@media[/url] screen and (max-width: 1024px) {
#content {
width: 100%;
padding: 0px 0px;
}
}
/* Mobile */
@media screen and (max-width: 600px) {
#content {
width: 100%;
padding: 0px 0px;
}
#dvTerms {
width: 98%;
left: 1%;
}
/* #header {
float:left;
width:100%;
}*/
#leftbar {
float:left;
width:100%;
}
#rightbar {
float:left;
width:100%;
}
/* #footer {
float:left;
width:100%;
}*/
#myImg {
width: 100%;
max-width: 100%;
}
}
$(function() {
$('input, textarea').placeholder();
});
document.getElementById("encrypt").checked = true;
[/code]p.s. 这个网页是屏宽自适应的,手机,电脑,平板都可以用。你自己可以按实际需要替换页面里面的显示内容。
下载链接: http://pan.baidu.com/s/1c0eoiDq 密码: jrur
下载链接: http://pan.baidu.com/s/1mgJprZE 密码: j82i
¥29.8
¥9.9
¥59.8