oldlogin.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429
  1. {% load staticfiles %}
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="utf-8" />
  6. <title>河南云飞物联网平台</title>
  7. <link rel="stylesheet" href="{% static '/css/style.css' %}">
  8. <!-- <link rel="stylesheet" href="{% static '/css/layui.css' %}" />
  9. <link rel="stylesheet" href="{% static '/css/layer.css' %}" /> -->
  10. <link href="{% static '/css/popup-box.css' %}" rel="stylesheet" type="text/css" media="all" />
  11. <style type="text/css">
  12. body {
  13. background: url(static/img/1.jpg) no-repeat 0px 0px;
  14. background-size: cover;
  15. font-family: 'Open Sans', sans-serif;
  16. background-attachment: fixed;
  17. background-position: center;
  18. }
  19. /* 将标题整体向下移动 */
  20. h1 {
  21. margin-top: 50px;
  22. }
  23. /* 将登录框整体向下移动 */
  24. .w3layouts {
  25. margin-top: 120px;
  26. }
  27. a:visited {
  28. border: none;
  29. }
  30. #denglu {
  31. width: 130px;
  32. height: 38px;
  33. float: right;
  34. margin-top: 34px;
  35. background: transparent;
  36. border: 1px solid #c4e1b5;
  37. border-radius: 25px;
  38. color: #26d11bcc;
  39. }
  40. #denglu:hover {
  41. background-color: #4a8c1e;
  42. color: white;
  43. cursor: pointer;
  44. }
  45. #zhuce {
  46. float: left;
  47. /* width:130px;
  48. height:45px; */
  49. }
  50. #ljzc {
  51. width: 130px;
  52. height: 42px;
  53. float: left;
  54. margin-top: 0px;
  55. border: 1px solid #c4e1b5;
  56. border-radius: 25px;
  57. }
  58. #ljdl {
  59. width: 130px;
  60. height: 42px;
  61. float: right;
  62. margin-top: 0px;
  63. border: 1px solid #c4e1b5;
  64. border-radius: 25px;
  65. }
  66. #ljzc:hover {
  67. background-color: #4a8c1e;
  68. color: white;
  69. }
  70. #ljdl:hover {
  71. background-color: #4a8c1e;
  72. color: white;
  73. }
  74. .signin-agile {
  75. background: rgba(255, 255, 255, 0.4);
  76. }
  77. a.book.popup-with-zoom-anim.button-isi.zoomIn.animated {
  78. border: 1px solid #c4e1b5;
  79. padding: 8px 34px;
  80. color: #26d11bcc;
  81. }
  82. /* 新增样式 */
  83. .book-form h3 {
  84. margin-bottom: 1.2em;
  85. }
  86. .retrieveMsgBox label {
  87. width: 18%;
  88. text-align: right;
  89. display: inline-block;
  90. margin-right: 10px;
  91. }
  92. .retrieveMsgBox input {
  93. width: 70%;
  94. }
  95. .retrieveMsgBox .codeInput {
  96. width: 30%;
  97. }
  98. #sendCode {
  99. width: 25%;
  100. padding: 15px;
  101. border: 1px solid #7d7d7d;
  102. outline: none;
  103. font-size: 14px;
  104. margin-bottom: 20px;
  105. border-radius: 25px;
  106. cursor: pointer;
  107. margin-left: 70px;
  108. }
  109. #sendCode.defaultColor {
  110. background: #70ad47;
  111. color: #fff;
  112. }
  113. /* a.book.popup-with-zoom-anim.button-isi.zoomIn.animated {
  114. border: 1px solid #fff;
  115. padding: 8px 34px;
  116. color: #fff;
  117. display: inline-block;
  118. margin-top: 35px;
  119. border-radius: 20px;
  120. transition: 0.5s all;
  121. -webkit-transition: 0.5s all;
  122. -moz-transition: 0.5s all;
  123. -o-transition: 0.5s all;
  124. -ms-transition: 0.5s all;
  125. outline: none;
  126. } */
  127. </style>
  128. <!--<link href='//fonts.googleapis.com/css?family=Open+Sans:400,300italic,300,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
  129. <link href='//fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
  130. -->
  131. <meta name="viewport" content="width=device-width, initial-scale=1" />
  132. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  133. <meta name="keywords" content="Sign In And Sign Up Forms Widget Responsive, Login Form Web Template, Flat Pricing Tables, Flat Drop-Downs, Sign-Up Web Templates, Flat Web Templates, Login Sign-up Responsive Web Template, Smartphone Compatible Web Template, Free Web Designs for Nokia, Samsung, LG, Sony Ericsson, Motorola Web Design"
  134. />
  135. </head>
  136. <body>
  137. <h1>河南云飞科技物联网平台</h1>
  138. <div class="w3layouts">
  139. <div class="signup-agileinfo">
  140. <h3>河南云飞科技发展有限公司</h3>
  141. <p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp河南云飞科技发展有限公司是一家专业研发和销售农业科学仪器设备的企业。 致力于农林植保仪器设备、环境气象仪器、土壤检测仪器、农产品质量安全仪器的技术开发、销售。
  142. 主营产品包括植保机械、其他专用仪器仪表、灭蚊灯、农业实验设备等。
  143. </p>
  144. <!-- <div>
  145. <img src="static/img/yfkj.jpg" style="opacity:0.4;float:left;margin-top:0px;" width="150" height="150" alt="云飞科技logo" />
  146. </div> -->
  147. </div>
  148. <div class="signin-agile">
  149. <h2>登录</h2>
  150. <form action="" method="post"> {% csrf_token %}
  151. <input type="text" id="username" class="name" placeholder="用户名" required="" value={{user_name}}>
  152. <div class="col-sm-5 col-sm-offset-4 margint10">
  153. <span class="color-background2 " style="color:#FF0015;">
  154. </span>
  155. </div>
  156. <input type="password" id="password" class="password" onkeypress="if (event.keyCode == 13) sub();" placeholder="密码" required=""
  157. value={{pass_word}}>
  158. <ul>
  159. <li>
  160. <input type="checkbox" id="brand1" check="" value="">
  161. <label for="brand1">
  162. <span> </span>记住密码</label>
  163. </li>
  164. </ul>
  165. <div class="col-sm-5 col-sm-offset-4 margint10">
  166. <span class="color-background2 " style="color:#FF0015;">
  167. </span>
  168. </div>
  169. <a class="popup-with-zoom-anim" data-wow-delay=".5s" href=".wangji">忘记密码?</a>
  170. <br>
  171. <div class="clear"></div>
  172. <!-- <a class="book popup-with-zoom-anim button-isi zoomIn animated" type="submit" name="submit" >登&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp录</a> -->
  173. <input id="denglu" onclick="sub()" type="button" value="登录">
  174. <div class="more">
  175. <!-- <a id="zhuce" class="book popup-with-zoom-anim button-isi zoomIn animated" data-wow-delay=".5s" href=".zhuce">用户注册</a> -->
  176. </div>
  177. </form>
  178. </div>
  179. <div class="clear"></div>
  180. </div>
  181. <div class="footer-w3l">
  182. <p class="agileinfo">Copyright©2007-2018 All Rrights Resvered 版权所有:河南云飞科技发展有限公司</p>
  183. </div>
  184. <div class="pop-up">
  185. <div id="small-dialog" class="mfp-hide book-form zhuce">
  186. <h3>用户注册</h3>
  187. <form action="" method="post"> {% csrf_token %} {{ username.label_tag }}
  188. <p class="retrieveMsgBox">
  189. <label for="">用户名:</label>
  190. <input type="text" id="reUsername" placeholder="请输入用户名" required="" />
  191. </p>
  192. <p class="retrieveMsgBox">
  193. <label for="">邮件:</label>
  194. <input type="text" id="email" class="email" placeholder="请输入邮件" required="" />
  195. <p class="retrieveMsgBox">
  196. <label for="">手机:</label>
  197. <input type="text" id="user_phone" class="user_phone" placeholder="请输入手机" required="" />
  198. </p>
  199. <p class="retrieveMsgBox">
  200. <label for="">密码:</label>
  201. <input type="password" id="rePassword" class="password" placeholder="请输入密码" required="" />
  202. </p>
  203. <p class="retrieveMsgBox">
  204. <label for="">重复密码:</label>
  205. <input type="password" id="rePassword2" class="password2" placeholder="请重复密码" required="" />
  206. </p>
  207. <p class="retrieveMsgBox">
  208. <input type="button" id="ljzc" onclick="register()" value="立即注册">
  209. <input type="button" id="ljdl" onclick=location.reload(); value="返回登录">
  210. </p>
  211. </form>
  212. </div>
  213. <div id="small-dialog" class="mfp-hide book-form wangji">
  214. <h3>找回密码</h3>
  215. <form action="#" method="post">
  216. <p class="retrieveMsgBox">
  217. <label for="">用户名:</label>
  218. <input type="text" name="Name" placeholder="请输入用户名" required="" />
  219. </p>
  220. <p class="retrieveMsgBox">
  221. <label for="">手机号:</label>
  222. <input type="text" name="Email" class="email" placeholder="请输入手机号" required="" />
  223. </p>
  224. <p class="retrieveMsgBox">
  225. <label for="">验证码:</label>
  226. <input type="password" name="Password" class="password codeInput" placeholder="请输入验证码" required="" />
  227. <input type="button" id="sendCode" class="" value="获取验证码">
  228. </p>
  229. <p class="retrieveMsgBox">
  230. <label for=""></label>
  231. <input type="submit" value="立即找回">
  232. </p>
  233. </form>
  234. </div>
  235. </div>
  236. <script src="{% static '/lib/js/jquery-2.1.4.min.js' %}"></script>
  237. <script src="{% static '/lib/layui/layui.all.js' %}"></script>
  238. <script src="{% static '/js/jquery.magnific-popup.js' %}" type="text/javascript"></script>
  239. <script type="text/javascript" src="{% static '/js/modernizr.custom.53451.js' %}"></script>
  240. <script type="application/x-javascript">
  241. addEventListener("load", function() {
  242. setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); }
  243. </script>
  244. <script>
  245. $(document).ready(function () {
  246. $('.popup-with-zoom-anim').magnificPopup({
  247. type: 'inline',
  248. fixedContentPos: false,
  249. fixedBgPos: true,
  250. overflowY: 'auto',
  251. closeBtnInside: true,
  252. preloader: false,
  253. midClick: true,
  254. removalDelay: 300,
  255. mainClass: 'my-mfp-zoom-in'
  256. });
  257. });
  258. </script>
  259. <script type="text/javascript">
  260. $.ajaxSetup({
  261. data: { csrfmiddlewaretoken: '{{ csrf_token }}' },
  262. });
  263. window.onload = function () {
  264. if (username != "" && password != "") {
  265. document.getElementById('brand1').checked = "checked";
  266. } else {
  267. document.getElementById('brand1').checked = "";
  268. }
  269. }
  270. function sub() {
  271. var username = $("#username").val();
  272. var password = $("#password").val();
  273. var brand1 = $("#brand1").val();
  274. if (username == "" || password == "") {
  275. layer.msg('请正确输入用户名和密码!', { time: 2000 });
  276. return;
  277. }
  278. if (document.getElementById('brand1').checked == true) {
  279. console.log("111:", document.getElementById('brand1').checked)
  280. document.getElementById('brand1').value = "remember";
  281. }
  282. else {
  283. console.log("222:", document.getElementById('brand1').checked)
  284. document.getElementById('brand1').value = "no";
  285. }
  286. $.ajax({
  287. type: "post",
  288. url: "login",
  289. data: {
  290. "username": username.trim(),
  291. "password": password.trim(),
  292. "brand1": document.getElementById('brand1').value,
  293. },
  294. dataType: "json",
  295. success: function (data) {
  296. if (data == 0) {
  297. //layer.msg("登录成功!",{time:2000});
  298. // location.href = 'home';
  299. }
  300. else if (data == 1) {
  301. //location.reload();
  302. layer.msg("该用户名不存在!", { time: 2000 });
  303. }
  304. else if (data == 2) {
  305. layer.msg("该用户不可用", { time: 2000 });
  306. }
  307. else if (data == 3) {
  308. layer.msg("密码错误,请重新输入!", { time: 2000 });
  309. }
  310. }
  311. });
  312. return;
  313. }
  314. //用户注册:用户注册:
  315. function register() {
  316. var username = $("#reUsername").val();
  317. var email = $("#email").val();
  318. var user_phone = $("#user_phone").val();
  319. var password = $("#rePassword").val();
  320. var password2 = $("#rePassword2").val();
  321. console.log(username, email, user_phone, password, password2)
  322. if (username == "" || email == "" || user_phone == "" || password == "" || password2 == "") {
  323. layer.msg('请将注册信息填写完整!', { time: 2000 });
  324. return;
  325. }
  326. if (password.length < 6 || password2.length < 6 || password.length > 16 || password2.length > 16) {
  327. layer.msg('请输入6到16位密码!!!', { time: 2000 });
  328. return;
  329. }
  330. if (password != password2) {
  331. layer.msg('密码两次输入不一致!!!', { time: 2000 });
  332. return;
  333. }
  334. var pattern1 = /^((13[0-9])|(15[1-3,5-9])|(17[7])|(18[0-9]))\d{8}$/
  335. var strPhone = pattern1.test(user_phone);
  336. if (strPhone != true) {
  337. layer.msg("手机格式不正确!!!", { time: 2000 });
  338. return;
  339. }
  340. var pattern2 = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
  341. var strEmail = pattern2.test(email);
  342. if (strEmail) {
  343. //邮箱格式正确
  344. } else {
  345. //邮箱格式不正确
  346. layer.msg('邮箱格式不正确!!!', { time: 2000 });
  347. return;
  348. }
  349. $.ajax({
  350. type: "post",
  351. url: "register",
  352. data: {
  353. "username": username.trim(),
  354. "email": email.trim(),
  355. "user_phone": user_phone.trim(),
  356. "password": password.trim(),
  357. "password2": password2.trim(),
  358. },
  359. dataType: "json",
  360. success: function (data) {
  361. if (data == 0) {
  362. layer.msg("注册成功!", { time: 2000 });
  363. // location.href='home';
  364. }
  365. else if (data == 1) {
  366. layer.msg("该用户名已存在!", { time: 2000 });
  367. }
  368. }
  369. });
  370. return;
  371. }
  372. </script>
  373. </body>
  374. </html>