数码之家

 找回密码
 立即注册

QQ登录

只需一步,快速开始

微信登录

微信扫一扫,快速登录

搜索
查看: 1832|回复: 5

人人影视路由器——使用倒计时上网认证教程

[复制链接]
发表于 2020-10-15 10:23:18 来自手机浏览器 | 显示全部楼层 |阅读模式

认识众多玩家高手/拆客/DIYer,查阅更多资源,一起学习技术知识

您需要 登录 才可以下载或查看,没有帐号?立即注册 微信登录

x
本帖最后由 海大虾 于 2020-10-19 04:22 编辑

一代4019先升级b1300固件,此认证程序简单易用,非常适合公司,店铺,商场,公园,步行街等人流量大的地方,目的是让人连接你的wifi后,弹出一个认证界面,主要起宣传作用。

此模板简洁明了,仅需修改几个文字,人人都会,你要是会网页制作,可以设计更加精美漂亮的界面,我这里仅抛砖引玉教大家如何使用。

1,无线——开启2.4G访客网络(不用开5G),网络安全选open,无需密码,已自动隔离,十分安全。
Screenshot_20201015_040238.jpg

2,应用程序——开启上网认证,上网时长自己定,跳转页面可设置任意网址,有自己的网站更好。
Screenshot_20201015_034229_com.UCMobile.jpg

3,用WINSCP软件打开/etc/nodogsplash/htdocs目录,splash.html为主页,先备份主页再编辑,images/portal_login.png为你的图片,复制下面源代码到主页,仅需修改几个文字,倒计时时间可随意,别太长了,建议15秒以内。

正在倒计时......目的是强制看一会广告,呵呵!
Screenshot_20201015_035850_com.android.captiveportallogin.jpg

倒计时完成后,必须点击按钮才能上网。
Screenshot_20201015_035905_com.android.captiveportallogin.jpg

点击上网按钮后自动跳转到你设置的页面,限定时间内可任意上网,时间到期自动断网,必须重新认证才能继续上网。
Screenshot_20201015_033914_com.android.captiveportallogin.jpg

更新模板展示,所有模板的文字图片都可更换成你需要的内容
Screenshot_20201018_172643_com.android.captiveportallogin.jpg

无图模板展示,采用html5代码,电脑,手机,平板等全平台适用,支持横屏
Screenshot_20201019_033851_com.android.captiveportallogin.jpg

另一款简洁高效的无图模板,适合快速发布信息,同样支持全平台
Screenshot_20201019_014521_com.android.captiveportallogin.jpg

还有很多各种各样的模板,有时间慢慢更新,认证界面还是以简洁高效为主,让人打开一看就知道是什么,如果做的太花太复杂效果反而不好,对吧。我的水平有限,期待大家的杰作。


源代码:
  1. <!DOCTYPE html>
  2. <html lang="zh" style="height:100%;">

  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  8.     <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  9.     <meta http-equiv="Pragma" content="no-cache" />
  10.     <meta http-equiv="Expires" content="0" />
  11.     <meta name="google" value="notranslate">
  12.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  13.     <meta name="renderer" content="webkit">
  14.     <link rel="Shortcut Icon" href="$imagesdir/favicon.ico" type="image/x-icon">
  15.     <title>XXXX美容院欢迎您</title>
  16.     <style>
  17.         html,
  18.         body,
  19.         h1,
  20.         h2,
  21.         h3,
  22.         h4,
  23.         h5,
  24.         h6,
  25.         div,
  26.         dl,
  27.         dt,
  28.         dd,
  29.         ul,
  30.         ol,
  31.         li,
  32.         p,
  33.         blockquote,
  34.         pre,
  35.         hr,
  36.         figure,
  37.         table,
  38.         caption,
  39.         th,
  40.         td,
  41.         form,
  42.         fieldset,
  43.         legend,
  44.         input,
  45.         button,
  46.         textarea,
  47.         menu {
  48.             margin: 0;
  49.             padding: 0;
  50.         }

  51.         header,
  52.         footer,
  53.         section,
  54.         article,
  55.         aside,
  56.         nav,
  57.         hgroup,
  58.         address,
  59.         figure,
  60.         figcaption,
  61.         menu,
  62.         details {
  63.             display: block;
  64.         }

  65.         table {
  66.             border-collapse: collapse;
  67.             border-spacing: 0;
  68.         }

  69.         caption,
  70.         th {
  71.             text-align: left;
  72.             font-weight: normal;
  73.         }

  74.         html,
  75.         body,
  76.         fieldset,
  77.         img,
  78.         iframe,
  79.         abbr {
  80.             border: 0;
  81.         }

  82.         i,
  83.         cite,
  84.         em,
  85.         var,
  86.         address,
  87.         dfn {
  88.             font-style: normal;
  89.         }

  90.         [hidefocus],
  91.         summary {
  92.             outline: 0;
  93.         }

  94.         li {
  95.             list-style: none;
  96.         }

  97.         h1,
  98.         h2,
  99.         h3,
  100.         h4,
  101.         h5,
  102.         h6,
  103.         small {
  104.             font-size: 100%;
  105.         }

  106.         sup,
  107.         sub {
  108.             font-size: 83%;
  109.         }

  110.         pre,
  111.         code,
  112.         kbd,
  113.         samp {
  114.             font-family: inherit;
  115.         }

  116.         q:before,
  117.         q:after {
  118.             content: none;
  119.         }

  120.         textarea {
  121.             overflow: auto;
  122.             resize: none;
  123.         }

  124.         label,
  125.         summary {
  126.             cursor: default;
  127.         }

  128.         a,
  129.         button {
  130.             cursor: pointer;
  131.         }

  132.         h1,
  133.         h2,
  134.         h3,
  135.         h4,
  136.         h5,
  137.         h6,
  138.         em,
  139.         strong,
  140.         b {
  141.             font-weight: bold;
  142.         }

  143.         del,
  144.         ins,
  145.         u,
  146.         s,
  147.         a,
  148.         a:hover {
  149.             text-decoration: none;
  150.         }

  151.         body,
  152.         textarea,
  153.         input,
  154.         button,
  155.         select,
  156.         keygen,
  157.         legend {
  158.             font: 12px/1.14 arial, \5b8b\4f53;
  159.             color: #333;
  160.             outline: 0;
  161.         }

  162.         body {
  163.             background: #fff;
  164.         }

  165.         a,
  166.         a:hover {
  167.             color: #333;
  168.         }

  169.         .img_title {
  170.             width: 100%;
  171.             display: inline-block;
  172.             height: auto;
  173.             max-width: 100%;
  174.             vertical-align:bottom
  175.         }

  176.         .main {
  177.             display: flex;
  178.             justify-content: space-between;
  179.             align-items: center;
  180.             flex-flow: column;
  181.             background: rgb(244, 245, 247);
  182.         }

  183.         .u-btn {
  184.             display: inline-block;
  185.             -webkit-box-sizing: content-box;
  186.             -moz-box-sizing: content-box;
  187.             box-sizing: content-box;
  188.             padding: 0 80px;
  189.             height: 35px;
  190.             border-radius: 50%;
  191.             line-height: 34px;
  192.             border: 1px solid #2d88bf;
  193.             border-radius: 20px;
  194.             font-size: 13px;
  195.             letter-spacing: 2px;
  196.             text-align: center;
  197.             vertical-align: middle;
  198.             cursor: pointer;
  199.             word-wrap: normal;
  200.             white-space: nowrap;
  201.             box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  202.             text-shadow: 0 -1px rgba(0, 0, 0, 0.2);
  203.             background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6dbde4), to(#399dd8));
  204.             background: -webkit-linear-gradient(#6dbde4, #399dd8);
  205.             background: -moz-linear-gradient(#6dbde4, #399dd8);
  206.             background: -ms-linear-gradient(#6dbde4, #399dd8);
  207.             background: linear-gradient(#6dbde4, #399dd8);
  208.             color: #fff;
  209.             font-family: -webkit-body;
  210.         }

  211.         .text_style {
  212.             font-size: 18px;
  213.             font-weight: 700;
  214.             color: #555;
  215.             padding-top: 60px;
  216.             display: flex;
  217.             justify-content: center;
  218.             align-items: center;
  219.         }

  220.         .flex-2 {
  221.             flex: 2;
  222.         }

  223.         .flex-10 {
  224.             flex: 10;
  225.         }

  226.         .flex-8 {
  227.             flex: 8;
  228.         }
  229.     </style>
  230. </head>

  231. <body style="height:100%;max-width: 1300px;margin: 0 auto;">
  232.     <div>
  233.         <div class="header">
  234.             <img src="$imagesdir/portal_login.png" class="img_title" id="imgs" alt="">
  235.         </div>
  236.         <div class="main" id="test">
  237.             <div class="text_style flex-10">
  238.                 XXXX美容院欢迎您
  239.             </div>
  240.             
  241. <div class="flex-8">
  242. <form method="post" name="agree" action="$authtarget">
  243. <input type="submit" name="agreeb" value="(15)秒后开始免费上网" / class="total_client_to u-btn">
  244. </form>
  245. <SCRIPT language=javascript>
  246. <!--
  247. var secs = 15;
  248. document.agree.agreeb.disabled=true;
  249. for(i=1;i<=secs;i++) {
  250. window.setTimeout("update(" + i + ")", i * 1000);
  251. }
  252. function update(num) {
  253. if(num == secs) {
  254. document.agree.agreeb.value =" 点击这里开始上网/2小时 ";
  255. document.agree.agreeb.disabled=false;
  256. }
  257. else {
  258. printnr = secs-num;
  259. document.agree.agreeb.value = "(" + printnr +")秒后开始免费上网";
  260. }
  261. }
  262. //-->
  263. </SCRIPT>
  264.             </div>
  265.             <div class="flex-2">
  266.                 注意:2小时后请重新认证,可不保存网络重新连接。
  267.             </div>
  268.         </div>
  269.     </div>
  270. </body>

  271. </html>
  272. <script type="text/javascript">
  273. window.onload= function(){
  274.     autodivheight();
  275.     function autodivheight() {
  276.         // setTimeout(() => {
  277.             var winHeight = 0;
  278.             winHeight = document.documentElement.clientHeight;
  279.             var o = document.getElementById("imgs");
  280.             var h = o.clientHeight
  281.             document.getElementById("test").style.height = winHeight - h + "px";
  282.         // }, 100);
  283.     }
  284.     window.onresize = autodivheight();
  285. }
  286. </script>
复制代码

打赏

参与人数 1M币 +20 收起 理由
阿睦 + 20

查看全部打赏

发表于 2020-10-17 09:14:05 | 显示全部楼层
好贴 居然没人支持  
回复 支持 反对

使用道具 举报

发表于 2020-10-18 08:25:26 | 显示全部楼层
很好给力。支持
回复 支持 反对

使用道具 举报

 楼主| 发表于 2020-10-18 12:48:09 来自手机浏览器 | 显示全部楼层
更新了一个模板,像商场,步行街,电影院,餐馆,酒店,公园,广场,公司等等地方,流动人口越多,宣传效果越好哦,省去了填密码的麻烦,轻松上网,棒棒哒。
回复 支持 1 反对 0

使用道具 举报

发表于 2020-10-19 15:43:46 | 显示全部楼层
好宣传思路,又利于民众。
回复 支持 反对

使用道具 举报

发表于 3 天前 | 显示全部楼层
这个不错,就是还差个路由
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册 微信登录

本版积分规则

Archiver|手机版|小黑屋|关于我们|联系我们|网站条款|数码之家 ( 闽ICP备05031405号 )

GMT+8, 2020-10-28 23:24 , Processed in 0.265200 second(s), 15 queries , Redis On.

Powered by Discuz!

© 2001-2019 Comsenz Inc.

快速回复 返回顶部 返回列表