develop
/
local-face-app
12
0
Forka 0
Codice Problemi 0 Pull Requests 0 Rilasci 0 Wiki Attività
go语言写的人脸本地化程序
Non puoi selezionare più di 25 argomenti Gli argomenti devono iniziare con una lettera o un numero, possono includere trattini ('-') e possono essere lunghi fino a 35 caratteri.
3 Commit
1 Ramo (Branch)
2.1 MiB
 
 
 
 
 
Albero (Tree): 82a5aa4222
Rami (Branch) Tag
${ item.name }
Crea branch ${ searchTerm }
da '82a5aa4222'
${ noResults }
local-face-app/templates/login.html

599 righe
15 KiB
Originale Blame Cronologia 

  1. <!DOCTYPE html>

  2. <html lang="en">

  3. <head>

  4.   <meta charset="UTF-8">

  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">

  6.   <title>页面登录</title>

  7.   <style>

  8.     body{

  9.       margin: 0;

  10.     }

  11.     li {

  12.       list-style-type: none;

  13.     }

  14.     @media screen and (orientation: portrait) {

  15.     .login {

  16.       width: 100vw;

  17.       height: 100vh;

  18.       background-image: url("/static/img/phoneBgc.jpg");

  19.       background-size: 100% 100%;

  20.       background-repeat: no-repeat;

  21.     }

  22.     .register {

  23.       background-image: url("/static/img/registerBgc.jpg") !important;

  24.       padding-top: 15vh;

  25.     }

  26.     .logo {

  27.       width: 15vw;

  28.       margin: 4vw 0 0 4vw;

  29.     }

  30.     .login_title {

  31.       width: 100vw;

  32.       font-size: 8vw;

  33.       text-align: center;

  34.       margin-top: 15vh;

  35.     }

  36.     .input_box {

  37.       width: 100vw;

  38.       height: 25vw;

  39.       display: flex;

  40.       flex-direction: column;

  41.       justify-content: center;

  42.       align-items: center;

  43.       margin-top: 5vh;

  44.       position: relative;

  45.     }

  46.     .phone_input, .account_input{

  47.       width: 50vw;

  48.       height: 11vw;

  49.       border-radius: 2vw;

  50.       background-color: transparent;

  51.       font-size: 3vw;

  52.       padding-left: 2vw;

  53.       border: 1px solid #000;

  54.       position: absolute;

  55.       top: 0vw;

  56.     }

  57.     .code_input, .password_input{

  58.       width: 50vw;

  59.       height: 11vw;

  60.       margin-top: 2vh;

  61.       border-radius: 2vw;

  62.       padding-left: 2vw;

  63.       font-size: 3vw;

  64.       background-color: transparent;

  65.       border: 1px solid #000;

  66.       position: absolute;

  67.       top: 10vw;

  68.     }

  69.     .login_button {

  70.       width: 40vw;

  71.       height: 5vh;

  72.       background-color: rgb(101, 161, 255);

  73.       border-radius: 10vw;

  74.       display: flex;

  75.       justify-content: center;

  76.       align-items: center;

  77.       color:#fff;

  78.       font-size: 4vw;

  79.       margin: 2vh 0  0 30vw;

  80.     }

  81.     #sendCodeBtn {

  82.       position: absolute;

  83.       font-size: 2.5vw;

  84.       top: 18.5vw;

  85.       right: 30vw;

  86.       border-left: 2px solid;

  87.       padding-left: 2vw;

  88.       border: none;

  89.       background: transparent;

  90.     }

  91.     .employee {

  92.       display: flex;

  93.       align-items: center;

  94.     }

  95.     .administrator {

  96.       display: flex;

  97.       align-items: center;

  98.       margin-left: 5vw;

  99.     }

  100.     .choose_employee {

  101.       width: 2vw;

  102.       height: 2vw;

  103.       border-radius: 50%;

  104.       border: 2px solid #000;

  105.       margin-right: 1vw;

  106.     }

  107.     .choose_administrator {

  108.       width: 2vw;

  109.       height: 2vw;

  110.       border-radius: 50%;

  111.       border: 2px solid #000;

  112.       margin-right: 1vw;

  113.     }

  114.     .login_style {

  115.       display: flex;

  116.       justify-content: center;

  117.       align-items: center;

  118.       font-size: 2.5vw;

  119.       margin-top: 2vh;

  120.     }

  121.     .hidden {

  122.       display: none;

  123.     }

  124.     .active {

  125.       display: flex;

  126.     }

  127.     .background {

  128.       background-color: #000;

  129.     }

  130.     .password-container {

  131.       position: relative;

  132.     }

  133.     .password_toggle {

  134.       position: absolute;

  135.       width: 5vw;

  136.       top: 18vw;

  137.       right: 26vw;

  138.     }

  139.       #div-a-reg{

  140.         margin-top: 3vh;

  141.         text-align: center;

  142.       }

  143.   }

  144. @media screen and (orientation: landscape) {

  145.   input:focus {

  146.     border: 0.1vw solid #000;

  147.     outline: none; /* 可选，用于去除默认的外边框样式 */

  148.   }

  149. 

  150.   .login {

  151.     width: 100vw;

  152.     height: 100vh;

  153.     background-image: url("/static/img/phoneBgc_pc.jpg");

  154.     background-size: 100% 100%;

  155.     background-repeat: no-repeat;

  156.     position: relative;

  157.   }

  158. 

  159.   .PC_img {

  160.     width: 52.6vw;

  161.     height: 64.44vh;

  162.     background-image: url("/static/img/loginBox.png");

  163.     background-size: 100% 100%;

  164.     background-repeat: no-repeat;

  165.     position: absolute;

  166.     top: 18.88vh;

  167.     left: 23.7vw;

  168.   }

  169. 

  170.   .register {

  171.     background-image: url("/static/img/registerBgc_pc.jpg") !important;

  172.   }

  173. 

  174.   .logo {

  175.     width: 15vh;

  176.     margin: 4vh 0 0 4vh;

  177.   }

  178. 

  179.   .login_title {

  180.     /* width: 100vw; */

  181.     font-size: 4vh;

  182.     text-align: center;

  183.     position: absolute;

  184.     z-index: 10;

  185.     top: 28vh;

  186.     margin-left: 58vw;

  187.     /* margin-top: 15vh;*/

  188.   }

  189. 

  190.   .input_box {

  191.     flex-direction: column;

  192.     justify-content: center;

  193.     align-items: center;

  194.     margin-top: 15vh;

  195.     position: relative;

  196.   }

  197. 

  198.   .phone_input, .account_input {

  199.     width: 15vw;

  200.     height: 6.66vh;

  201.     border-radius: 2vh;

  202.     background-color: transparent;

  203.     font-size: 1.5vw;

  204.     padding-left: 2vh;

  205.     padding-right: 5vw;

  206.     border: 0.1vw solid #000;

  207.     margin-left: 25vw;

  208.   }

  209. 

  210. 

  211.   .code_input, .password_input {

  212.     width: 15vw;

  213.     height: 6.66vh;

  214.     margin-top: 2vw;

  215.     border-radius: 2vh;

  216.     padding-left: 2vh;

  217.     font-size: 1.5vw;

  218.     padding-right: 5vw;

  219.     background-color: transparent;

  220.     border: 0.1vw solid #000;

  221.     margin-left: 25vw;

  222.   }

  223. 

  224.   .login_button {

  225.     width: 16vw;

  226.     height: 3vw;

  227.     background-color: rgb(101, 161, 255);

  228.     border-radius: 10vh;

  229.     display: flex;

  230.     justify-content: center;

  231.     align-items: center;

  232.     color: #fff;

  233.     font-size: 2vw;

  234.     /* margin: 2vh 0 0 30vh; */

  235.     position: absolute;

  236.     left: 55vw;

  237.     top: 65vh;

  238.   }

  239. 

  240. 

  241.   #sendCodeBtn {

  242.     position: absolute;

  243.     font-size: 1.5vh;

  244.     top: 11.5vh;

  245.     right: 27.3vw;

  246.     border-left: 0.1vw solid;

  247.     padding-left: 1vh;

  248.     display: flex;

  249.     align-items: center;

  250.     height: 3vw;

  251.     border: none;

  252.     background: transparent;

  253.   }

  254. 

  255.   .employee {

  256.     display: flex;

  257.     align-items: center;

  258.   }

  259. 

  260.   .administrator {

  261.     display: flex;

  262.     align-items: center;

  263.     margin-left: 3vw;

  264.   }

  265. 

  266.   .hand:hover {

  267.     cursor: pointer;

  268.   }

  269. 

  270.   .choose_employee {

  271.     width: 2vh;

  272.     height: 2vh;

  273.     border-radius: 50%;

  274.     border: 0.1vw solid #000;

  275.     margin-right: 1vh;

  276.   }

  277. 

  278.   .choose_administrator {

  279.     width: 2vh;

  280.     height: 2vh;

  281.     border-radius: 50%;

  282.     border: 0.1vw solid #000;

  283.     margin-right: 1vh;

  284.   }

  285. 

  286.   .login_style {

  287.     display: flex;

  288.     justify-content: center;

  289.     align-items: center;

  290.     font-size: 1vw;

  291.     margin-top: 2vw;

  292.     position: absolute;

  293.     left: 54.8vw;

  294.   }

  295. 

  296.   .hidden {

  297.     display: none;

  298.   }

  299. 

  300.   .active {

  301.     display: flex;

  302.   }

  303. 

  304.   .background {

  305.     background-color: #000;

  306.   }

  307. 

  308.   .password-container {

  309.     position: relative;

  310.   }

  311. 

  312.   .password_toggle {

  313.     width: 3vw;

  314.     position: absolute;

  315.     font-size: 1.5vh;

  316.     top: 11.5vh;

  317.     right: 28.5vw;

  318.     padding-left: 0.5vh;

  319.   }

  320. 

  321.   #scroll-to-top-btn {

  322.     display: none;

  323.     position: fixed;

  324.     right: 20px;

  325.     bottom: 20px;

  326.     width: 7vh;

  327.     height: 10vw;

  328.     color: #fff;

  329.     border: none;

  330.     border-radius: 5px;

  331.     font-size: 3vh;

  332.     cursor: pointer;

  333.   }

  334. 

  335.   #div-a-reg{

  336.     width: 16vw;

  337.     height: 3vw;

  338.     background-color:transparent;

  339.     border-radius: 10vh;

  340.     display: flex;

  341.     justify-content: center;

  342.     align-items: center;

  343.     color: #fff;

  344.     font-size: 2vh;

  345.     position: absolute;

  346.     left: 55vw;

  347.     top: 72vh;

  348.   }

  349. 

  350. }

  351.     button:disabled {

  352.       color: black !important;

  353.     }

  354.   </style>

  355. </head>

  356. <body>

  357.   <!-- 登录页面 -->

  358.   <div  class="login">

  359.     <img class="logo" src="/static/img/logo.png" alt="">

  360.     <div class="PC_img"></div>

  361.     <div class="login_title">请 登 录</div>

  362.     <div id="employeeForm" class="input_box hidden active">

  363.       <input class="phone_input" type="text" placeholder="请输入手机号">

  364.       <input class="code_input" type="text" placeholder="请输入验证码">

  365.       <button id="sendCodeBtn" class="btn">发送验证码</button>

  366.     </div>

  367.     <div id="adminForm" class="input_box hidden password-container">

  368.       <input class="account_input" type="text" placeholder="请输入账号">

  369.       <input id="password_input" class="password_input" type="password" placeholder="请输入密码">

  370.       <img id="password_toggle" class="password_toggle hand" src="/static/img/close.png" alt="">

  371.     </div>

  372.     <div class="login_style">

  373.       <div id="employeeBtn" class="employee hand">

  374.         <div id="choose_employee" class="choose_employee background"></div>

  375.         <div>员工登录</div>

  376.       </div>

  377.       <div id="adminBtn" class="administrator hand">

  378.         <div id="choose_administrator" class="choose_administrator"></div>

  379.         <div>管理员登录</div>

  380.       </div>

  381.     </div>

  382.     <div class="login_button hand">登 录</div>

  383. 

  384.     <div id="div-a-reg"><a id="a-reg" href="/reg">去注册</a></div>

  385.   </div>

  386.   <script src="/static/js/jquery.min.js"></script>

  387.   <script src="/static/js/msg-box.js"></script>

  388.   <script>

  389.     $(function(){

  390.       console.log("{{.type}}");

  391.       if ("{{.type}}" == "mgr") {

  392.         $("#adminBtn").click();

  393.       }

  394.       $.MsgBox = {

  395.         Alert: function(title, msg) {

  396.           GenerateHtml("alert", title, msg);

  397.           btnOk(); //alert只是弹出消息，因此没必要用到回调函数callback

  398.           btnNo();

  399.         },

  400.         Confirm: function(title, msg, callback) {

  401.           GenerateHtml("confirm", title, msg);

  402.           btnOk(callback);

  403.           btnNo();

  404.         }

  405.       }

  406. 

  407. 

  408.       const sendCodeBtn = $('#sendCodeBtn');

  409.       let countdown = 30;

  410.       let timer;

  411. 

  412.       function startCountdown() {

  413.         sendCodeBtn.attr("disabled", "disabled");

  414.         sendCodeBtn.html(`${countdown}秒`);

  415.         timer = setInterval(() => {

  416.           console.log(countdown);

  417.           countdown--;

  418.           sessionStorage.setItem('countdown',countdown);

  419.           sendCodeBtn.html(`${countdown}秒`);

  420.           if (countdown <= 0) {

  421.             clearInterval(timer);

  422.             sendCodeBtn.html('发送验证码');

  423.             sendCodeBtn.removeAttr("disabled");

  424.             countdown = 30;

  425.           }

  426.         }, 1000);

  427.       }

  428.       $("#sendCodeBtn").on("click",function(){

  429.         if (!phoneValid()){

  430.           $.MsgBox.Alert("提示", "手机号为空或不合法，请检查");

  431.           return;

  432.         }

  433.         countdown = 30;

  434.         startCountdown();

  435.         sessionStorage.setItem('countdown',countdown);

  436.         // ajax发送验证码

  437.         $.ajax({

  438.           url: '/send_validation_code',

  439.           type: 'POST',

  440.           dataType: 'json',

  441.           data: {

  442.             phone: $(".phone_input").val(),

  443.           },

  444.           success: function (response) {

  445.             console.log(response);

  446.             response = JSON.parse(response)

  447.             if (response.code == 200) {

  448.               $.MsgBox.Alert("提示", "验证码发送成功");

  449.             } else {

  450.               $.MsgBox.Alert("提示", response.msg ? response.msg : "验证码发送失败");

  451.             }

  452.           },

  453.           error: function () {

  454.           }

  455.         });

  456.       })

  457. 

  458.       function initCountdown() {

  459.         const storedCountdown = sessionStorage.getItem('countdown');

  460.         if (storedCountdown) {

  461.           countdown = parseInt(storedCountdown, 10);

  462.           if (countdown > 0) {

  463.             startCountdown();

  464.           }

  465.         }

  466.       }

  467.       initCountdown();

  468. 

  469.       function phoneValid() {

  470.           const regex = /^1[3-9]\d{9}$/;

  471.           var phone = $(".phone_input").val();

  472.           if (phone == "" || !regex.test(phone)){

  473.             return false;

  474.           }

  475.           return true;

  476.       }

  477. 

  478.       $(".login_button").on("click",function(){

  479.         if ($("#employeeForm").hasClass("active")) {

  480.           if (!phoneValid()){

  481.             $.MsgBox.Alert("提示", "手机号为空或不合法，请检查");

  482.             return;

  483.           }

  484.           const codeRegex = /^\d{4}$/;

  485.           var code = $(".code_input").val();

  486.           if (code == "" || !codeRegex.test(code)){

  487.             $.MsgBox.Alert("提示", "验证码为4位数字，请检查");

  488.             return;

  489.           }

  490.           $.ajax({

  491.             url: '/valid_code',

  492.             type: 'POST',

  493.             dataType: 'json',

  494.             data: {

  495.               phone: $(".phone_input").val(),

  496.               code: code,

  497.             },

  498.             success: function (response) {

  499.               console.log(response);

  500.               response = JSON.parse(response)

  501.               if (response.status == 0) {

  502.                 $.ajax({

  503.                   url: '/phone_login',

  504.                   type: 'POST',

  505.                   dataType: 'json',

  506.                   data: {

  507.                     phone: $(".phone_input").val(),

  508.                   },

  509.                   success: function (response) {

  510.                     console.log(response);

  511.                     console.log(response.data);

  512.                     console.log(response.data.staffId);

  513.                     // response = JSON.parse(response)

  514.                     if (response.code == 200) {

  515.                       window.location.href = '/info?staffId='+response.data.staffId;

  516. 

  517.                     } else {

  518.                       $.MsgBox.Alert("提示", response.msg);

  519.                     }

  520.                   },

  521.                   error: function () {

  522.                   }

  523.                 });

  524. 

  525.               } else {

  526.                 $.MsgBox.Alert("提示", response.err);

  527.               }

  528.             },

  529.             error: function () {

  530.             }

  531.           });

  532.         } else {

  533.           if ($(".account_input").val() == "") {

  534.             $.MsgBox.Alert("提示", "请输入账号！");

  535.             return;

  536.           }

  537.           if ($(".password_input").val() == "") {

  538.             $.MsgBox.Alert("提示", "请输入密码！");

  539.             return;

  540.           }

  541. 

  542.           $.ajax({

  543.             url: '/mgr_login',

  544.             type: 'POST',

  545.             dataType: 'json',

  546.             data: {

  547.               userName: $(".account_input").val(),

  548.               password: $(".password_input").val(),

  549.             },

  550.             success: function (response) {

  551.               console.log(response);

  552.               response = JSON.parse(response)

  553.               if (response.code == 200) {

  554.                 console.log(response.data.access_token);

  555.                 console.log(response.type);

  556.                 sessionStorage.setItem('token',response.type);

  557.                 window.location.href = '/mgr';

  558. 

  559.               } else {

  560.                 $.MsgBox.Alert("提示", response.msg);

  561.               }

  562.             },

  563.             error: function () {

  564.             }

  565.           });

  566.         }

  567.       })

  568. 

  569.     })

  570.     // 切换登陆页面

  571.       document.getElementById("employeeBtn").addEventListener("click", function() {

  572.             document.getElementById("employeeForm").classList.add("active");

  573.             document.getElementById("adminForm").classList.remove("active");

  574.             document.getElementById("choose_administrator").classList.remove("background");

  575.             document.getElementById("choose_employee").classList.add("background");

  576.         });

  577.       document.getElementById("adminBtn").addEventListener("click", function() {

  578.             document.getElementById("employeeForm").classList.remove("active");

  579.             document.getElementById("adminForm").classList.add("active");

  580.             document.getElementById("choose_employee").classList.remove("background");

  581.             document.getElementById("choose_administrator").classList.add("background");

  582.         });

  583.       document.getElementById("password_toggle").addEventListener("click", function() {

  584.             let passwordInput =   document.getElementById("password_input")

  585.             if (passwordInput.type === 'password') {

  586.                 passwordInput.type ='text';

  587.                 document.getElementById("password_toggle").src = "/static/img/open.png"

  588.             } else {

  589.                 passwordInput.type = "password";

  590.                 document.getElementById("password_toggle").src = "/static/img/close.png"

  591.             }

  592.         });

  593. 

  594. 

  595. 

  596. 

  597.   </script>

  598. </body>

  599. </html>