asder

eaa86fc7 · wuhao · eaa86fc7 · eaa86fc7 · eaa86fc7 · eaa86fc7
Commit eaa86fc7 authored Feb 17, 2023 by wuhao 🎯
Expand all Show whitespace changes
Inline Side-by-side

Showing with 199 additions and 0 deletions

.DS_Store .DS_Store +0 -0

.gitignore .gitignore +2 -0

index.html index.html +46 -0

script.js script.js +0 -0

style.css style.css +151 -0

No files found.
--- a/.DS_Store
+++ b/.DS_Store
--- a/.gitignore
+++ b/.gitignore
+.history
\ No newline at end of file
--- a/index.html
+++ b/index.html
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Iot 登录页</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="m-layout cpc-triadic codepenchallenge" id="container">
+  <canvas id="canvas3d"></canvas>
+  <div class="m-container m-container--login">
+    <a class="logo"></a>
+    <form class="m-form">
+      <h2 class="m-form_title">
+        立即登录
+      </h2>
+      <div class="m-form_group">
+        <label class="m-form_label" for="username">用户名</label><input class="m-form_input" id="username" name="username" type="text" value="Brawada" />
+      </div>
+      <div class="m-form_group">
+        <label class="m-form_label" for="password">密码</label><input class="m-form_input" id="password" name="password" type="password" value="Brawada" />
+      </div>
+      <div class="m-form_group">
+        <button class="m-form_btn" type="submit">登录</button>
+      </div>
+      <!-- <div class="m-form_link">
+        <a class="m-form_btn-register">Register</a>
+      </div> -->
+    </form>
+  </div>
+</div>
+
+<script>
+  var SPE = {};
+</script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
+<script src="https://cdn.spline.design/lib/anime.min.js"></script>
+<script src="https://cdn.spline.design/lib/spline.runtime.min.js"></script>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
--- a/script.js
+++ b/script.js
--- a/style.css
+++ b/style.css
+@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&display=swap");
+html {
+  height: 100%;
+}
+
+body {
+  background: linear-gradient(to bottom, #142f4d, #657b90);
+  height: 100%;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+a {
+  color: #fff;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.m-layout {
+  position: relative;
+  width: 375px;
+  height: 667px;
+  border-radius: 16px;
+  overflow: hidden;
+  box-sizing: border-box;
+  background: linear-gradient(to bottom, #142f4d, #657b90) !important;
+  box-shadow: 0px 32px 47px rgba(32, 23, 23, 0.09);
+}
+
+.logo {
+  position: absolute;
+  top: 30px;
+  left: 30px;
+  width: 44px;
+  height: 44px;
+  background-color: #375071;
+  opacity: 1;
+}
+
+.m-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2;
+}
+
+.m-form, .m-content {
+  width: 100%;
+  padding: 0 30px;
+  box-sizing: border-box;
+}
+
+.m-form_title {
+  width: 100%;
+  font-size: 24px;
+  margin: 0 0 20px;
+}
+
+.m-form_group {
+  display: flex;
+  flex-wrap: wrap;
+  -webkit-box-pack: justify;
+  justify-content: space-between;
+  padding-bottom: 18px;
+}
+
+.m-form_link {
+  text-align: center;
+}
+
+.m-form_input {
+  width: 100%;
+  appearance: none;
+  outline: 0;
+  line-height: 44px;
+  border: 1px solid rgba(255, 255, 255, 0.09);
+  background-color: rgba(255, 255, 255, 0.04);
+  border-radius: 3px;
+  padding: 0 15px;
+  display: block;
+  font-size: 18px;
+  box-sizing: border-box;
+  color: #fff;
+  font-weight: 300;
+}
+
+.m-form_label {
+  display: block;
+  margin-bottom: 10px;
+}
+
+.m-form_btn {
+  appearance: none;
+  outline: 0;
+  background-color: #375071;
+  border: 0;
+  margin-top: 15px;
+  line-height: 44px;
+  padding: 0 15px;
+  color: #fff;
+  font-weight: 500;
+  border-radius: 3px;
+  width: 100%;
+  cursor: pointer;
+  font-size: 18px;
+  text-align: center;
+  opacity: 1;
+}
+
+canvas {
+  width: 100% !important;
+  height: 100% !important;
+  outline: none;
+}
+
+.spline-watermark {
+  position: fixed;
+  bottom: 16px;
+  right: 16px;
+  width: 32px;
+  height: 32px;
+  z-index: 2;
+  opacity: 1;
+}
+.spline-watermark:hover {
+  opacity: 0.8;
+}
+
+.spline-watermark img {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+@media (max-width: 400px) {
+  .m-layout {
+    width: 100% !important;
+    border-radius: 0;
+    border: none;
+  }
+}
\ No newline at end of file