develop
/
local-face-app
12
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
go语言写的人脸本地化程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 Commit
1 Branch
2.1 MiB
 
 
 
 
 
Tree: e3f606175a
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'e3f606175a'
${ noResults }
local-face-app/templates/login.html

578 lines
15 KiB
Raw Blame History 

  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.   }

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

  141.   input:focus {

  142.     border: 0.1vw solid #000;

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

  144.   }

  145. 

  146.   .login {

  147.     width: 100vw;

  148.     height: 100vh;

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

  150.     background-size: 100% 100%;

  151.     background-repeat: no-repeat;

  152.     position: relative;

  153.   }

  154. 

  155.   .PC_img {

  156.     width: 52.6vw;

  157.     height: 64.44vh;

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

  159.     background-size: 100% 100%;

  160.     background-repeat: no-repeat;

  161.     position: absolute;

  162.     top: 18.88vh;

  163.     left: 23.7vw;

  164.   }

  165. 

  166.   .register {

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

  168.   }

  169. 

  170.   .logo {

  171.     width: 15vh;

  172.     margin: 4vh 0 0 4vh;

  173.   }

  174. 

  175.   .login_title {

  176.     /* width: 100vw; */

  177.     font-size: 4vh;

  178.     text-align: center;

  179.     position: absolute;

  180.     z-index: 10;

  181.     top: 28vh;

  182.     margin-left: 58vw;

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

  184.   }

  185. 

  186.   .input_box {

  187.     flex-direction: column;

  188.     justify-content: center;

  189.     align-items: center;

  190.     margin-top: 15vh;

  191.     position: relative;

  192.   }

  193. 

  194.   .phone_input, .account_input {

  195.     width: 15vw;

  196.     height: 6.66vh;

  197.     border-radius: 2vh;

  198.     background-color: transparent;

  199.     font-size: 1.5vw;

  200.     padding-left: 2vh;

  201.     padding-right: 5vw;

  202.     border: 0.1vw solid #000;

  203.     margin-left: 25vw;

  204.   }

  205. 

  206. 

  207.   .code_input, .password_input {

  208.     width: 15vw;

  209.     height: 6.66vh;

  210.     margin-top: 2vw;

  211.     border-radius: 2vh;

  212.     padding-left: 2vh;

  213.     font-size: 1.5vw;

  214.     padding-right: 5vw;

  215.     background-color: transparent;

  216.     border: 0.1vw solid #000;

  217.     margin-left: 25vw;

  218.   }

  219. 

  220.   .login_button {

  221.     width: 16vw;

  222.     height: 3vw;

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

  224.     border-radius: 10vh;

  225.     display: flex;

  226.     justify-content: center;

  227.     align-items: center;

  228.     color: #fff;

  229.     font-size: 2vw;

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

  231.     position: absolute;

  232.     left: 55vw;

  233.     top: 65vh;

  234.   }

  235. 

  236. 

  237.   #sendCodeBtn {

  238.     position: absolute;

  239.     font-size: 1.5vh;

  240.     top: 11.5vh;

  241.     right: 27.3vw;

  242.     border-left: 0.1vw solid;

  243.     padding-left: 1vh;

  244.     display: flex;

  245.     align-items: center;

  246.     height: 3vw;

  247.     border: none;

  248.     background: transparent;

  249.   }

  250. 

  251.   .employee {

  252.     display: flex;

  253.     align-items: center;

  254.   }

  255. 

  256.   .administrator {

  257.     display: flex;

  258.     align-items: center;

  259.     margin-left: 3vw;

  260.   }

  261. 

  262.   .hand:hover {

  263.     cursor: pointer;

  264.   }

  265. 

  266.   .choose_employee {

  267.     width: 2vh;

  268.     height: 2vh;

  269.     border-radius: 50%;

  270.     border: 0.1vw solid #000;

  271.     margin-right: 1vh;

  272.   }

  273. 

  274.   .choose_administrator {

  275.     width: 2vh;

  276.     height: 2vh;

  277.     border-radius: 50%;

  278.     border: 0.1vw solid #000;

  279.     margin-right: 1vh;

  280.   }

  281. 

  282.   .login_style {

  283.     display: flex;

  284.     justify-content: center;

  285.     align-items: center;

  286.     font-size: 1vw;

  287.     margin-top: 2vw;

  288.     position: absolute;

  289.     left: 54.8vw;

  290.   }

  291. 

  292.   .hidden {

  293.     display: none;

  294.   }

  295. 

  296.   .active {

  297.     display: flex;

  298.   }

  299. 

  300.   .background {

  301.     background-color: #000;

  302.   }

  303. 

  304.   .password-container {

  305.     position: relative;

  306.   }

  307. 

  308.   .password_toggle {

  309.     width: 3vw;

  310.     position: absolute;

  311.     font-size: 1.5vh;

  312.     top: 11.5vh;

  313.     right: 28.5vw;

  314.     padding-left: 0.5vh;

  315.   }

  316. 

  317.   #scroll-to-top-btn {

  318.     display: none;

  319.     position: fixed;

  320.     right: 20px;

  321.     bottom: 20px;

  322.     width: 7vh;

  323.     height: 10vw;

  324.     color: #fff;

  325.     border: none;

  326.     border-radius: 5px;

  327.     font-size: 3vh;

  328.     cursor: pointer;

  329.   }

  330. 

  331. }

  332.     button:disabled {

  333.       color: black !important;

  334.     }

  335.   </style>

  336. </head>

  337. <body>

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

  339.   <div  class="login">

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

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

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

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

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

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

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

  347.     </div>

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

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

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

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

  352.     </div>

  353.     <div class="login_style">

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

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

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

  357.       </div>

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

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

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

  361.       </div>

  362.     </div>

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

  364.   </div>

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

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

  367.   <script>

  368.     $(function(){

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

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

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

  372.       }

  373.       $.MsgBox = {

  374.         Alert: function(title, msg) {

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

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

  377.           btnNo();

  378.         },

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

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

  381.           btnOk(callback);

  382.           btnNo();

  383.         }

  384.       }

  385. 

  386. 

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

  388.       let countdown = 30;

  389.       let timer;

  390. 

  391.       function startCountdown() {

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

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

  394.         timer = setInterval(() => {

  395.           console.log(countdown);

  396.           countdown--;

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

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

  399.           if (countdown <= 0) {

  400.             clearInterval(timer);

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

  402.             sendCodeBtn.removeAttr("disabled");

  403.             countdown = 30;

  404.           }

  405.         }, 1000);

  406.       }

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

  408.         if (!phoneValid()){

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

  410.           return;

  411.         }

  412.         countdown = 30;

  413.         startCountdown();

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

  415.         // ajax发送验证码

  416.         $.ajax({

  417.           url: '/send_validation_code',

  418.           type: 'POST',

  419.           dataType: 'json',

  420.           data: {

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

  422.           },

  423.           success: function (response) {

  424.             console.log(response);

  425.             response = JSON.parse(response)

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

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

  428.             } else {

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

  430.             }

  431.           },

  432.           error: function () {

  433.           }

  434.         });

  435.       })

  436. 

  437.       function initCountdown() {

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

  439.         if (storedCountdown) {

  440.           countdown = parseInt(storedCountdown, 10);

  441.           if (countdown > 0) {

  442.             startCountdown();

  443.           }

  444.         }

  445.       }

  446.       initCountdown();

  447. 

  448.       function phoneValid() {

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

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

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

  452.             return false;

  453.           }

  454.           return true;

  455.       }

  456. 

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

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

  459.           if (!phoneValid()){

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

  461.             return;

  462.           }

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

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

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

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

  467.             return;

  468.           }

  469.           $.ajax({

  470.             url: '/valid_code',

  471.             type: 'POST',

  472.             dataType: 'json',

  473.             data: {

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

  475.               code: code,

  476.             },

  477.             success: function (response) {

  478.               console.log(response);

  479.               response = JSON.parse(response)

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

  481.                 $.ajax({

  482.                   url: '/phone_login',

  483.                   type: 'POST',

  484.                   dataType: 'json',

  485.                   data: {

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

  487.                   },

  488.                   success: function (response) {

  489.                     console.log(response);

  490.                     console.log(response.data);

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

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

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

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

  495. 

  496.                     } else {

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

  498.                     }

  499.                   },

  500.                   error: function () {

  501.                   }

  502.                 });

  503. 

  504.               } else {

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

  506.               }

  507.             },

  508.             error: function () {

  509.             }

  510.           });

  511.         } else {

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

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

  514.             return;

  515.           }

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

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

  518.             return;

  519.           }

  520. 

  521.           $.ajax({

  522.             url: '/mgr_login',

  523.             type: 'POST',

  524.             dataType: 'json',

  525.             data: {

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

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

  528.             },

  529.             success: function (response) {

  530.               console.log(response);

  531.               response = JSON.parse(response)

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

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

  534.                 console.log(response.type);

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

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

  537. 

  538.               } else {

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

  540.               }

  541.             },

  542.             error: function () {

  543.             }

  544.           });

  545.         }

  546.       })

  547. 

  548.     })

  549.     // 切换登陆页面

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

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

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

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

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

  555.         });

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

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

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

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

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

  561.         });

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

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

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

  565.                 passwordInput.type ='text';

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

  567.             } else {

  568.                 passwordInput.type = "password";

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

  570.             }

  571.         });

  572. 

  573. 

  574. 

  575. 

  576.   </script>

  577. </body>

  578. </html>