hanhai88
/
tcs-front-tabler


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
							<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>华力机电SIMANC</title>
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }

      body {
        background: url("assets/img/login-bg-1.jpg") no-repeat center center
          fixed;
        background-size: cover;
        font-family: "PT Sans", Helvetica, Arial, sans-serif;
        text-align: center;
        color: #fff;
        transition: background-image 1s ease-in-out;
      }

      .login-container {
        width: 320px;
        margin: 120px auto auto auto;
        text-align: center;
        position: relative;
      }

      .login-title {
        color: white;
        text-align: center;
        margin-bottom: 30px;
        font-size: 30px;
        font-weight: 700;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
      }

      .mb-4 {
        margin-bottom: 1.5rem !important;
      }

      .form-control {
        width: 100%;
        box-sizing: border-box;
        background: rgba(45, 45, 45, 0.15) !important;
        border-radius: 6px !important;
        border: 2px solid white !important;
        box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1) inset !important;
        font-family: "PT Sans", Helvetica, Arial, sans-serif !important;
        font-size: 14px !important;
        color: #fff !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
        padding: 0.5rem 1rem !important;
      }

      .form-control::placeholder {
        color: rgba(255, 255, 255, 0.7) !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
      }

      .form-control:focus {
        outline: none !important;
        border-color: white !important;
        background: rgba(45, 45, 45, 0.15) !important;
        color: #fff !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
        box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1) inset !important;
      }

      .form-control.form-control-lg {
        height: 50px !important;
        padding: 0.8rem 1.2rem !important;
        font-size: 16px !important;
      }

      .btn-login {
        height: 50px;
        font-size: 16px;
        background-color: #6f42c1;
        color: white;
        font-weight: 700;
        width: 100%;
        border: none;
        border-radius: 4px;
        margin-top: 10px;
      }

      .btn-login:hover {
        box-shadow: 0 15px 30px 0 rgba(255, 255, 255, 0.15) inset,
          0 2px 7px 0 rgba(0, 0, 0, 0.2);
        color: white;
        background-color: #6f42c1;
      }

      .tcs-footer {
        margin-top: 100px;
        width: 100%;
        text-align: center;
        color: white;
      }
    </style>
  </head>
  <body>
    <div class="login-container">
      <h1 class="login-title">华力机电SIMANC</h1>
      <form id="loginForm">
        <div class="mb-4">
          <input
            type="text"
            class="form-control form-control-lg"
            placeholder="用户名"
            required
            oninvalid="this.setCustomValidity('请输入用户名')"
            oninput="this.setCustomValidity('')"
          />
        </div>
        <div class="mb-4">
          <input
            type="password"
            class="form-control form-control-lg"
            placeholder="密码"
            required
            oninvalid="this.setCustomValidity('请输入密码')"
            oninput="this.setCustomValidity('')"
          />
        </div>
        <button type="submit" class="btn btn-login">登录</button>
      </form>
      <div class="tcs-footer">
        <small>山东华力机电有限公司<br />© 2018</small>
      </div>
    </div>

    <!-- Tabler Core JS -->
    <!-- <script src="node_modules/@tabler/core/dist/js/tabler.min.js"></script> -->
    <script src="assets/js/jquery-3.7.1.min.js"></script>
    <script>
      $(document).ready(function () {
        $("#loginForm").on("submit", function (e) {
          e.preventDefault();

          // 获取表单数据
          const username = $('input[type="text"]').val();
          const password = $('input[type="password"]').val();

          // 这里可以添加用户名密码验证逻辑
          // 为了演示，我们直接跳转
          window.location.href = "pages/dashboard.html"; // 跳转到仪表盘页面
        });

        const backgrounds = [
          "assets/img/login-bg-1.jpg",
          "assets/img/login-bg-2.jpg",
          "assets/img/login-bg-3.jpg",
        ];
        let currentIndex = 0;

        function changeBackground() {
          currentIndex = (currentIndex + 1) % backgrounds.length;
          $("body").css(
            "background-image",
            `url(${backgrounds[currentIndex]})`
          );
        }

        setInterval(changeBackground, 5000);
      });
    </script>
  </body>
</html>