diff --git a/apps/account/static/css/style.css b/apps/account/static/css/style.css index c93b1b0..ac4f542 100644 --- a/apps/account/static/css/style.css +++ b/apps/account/static/css/style.css @@ -4,6 +4,7 @@ box-sizing: border-box; font-family: "Poppins", sans-serif; } + section { position: relative; display: flex; @@ -14,7 +15,7 @@ section { overflow: hidden; } -.container { +.container1 { position: absolute; left: -10%; width: 120%; @@ -22,14 +23,14 @@ section { background: url("../img/bg.jpg"); } -.container #scene .layer { +.container1 #scene .layer { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; } -.container .layer img { +.container1 .layer img { position: absolute; bottom: 0; left: 0; @@ -37,20 +38,9 @@ section { height: 100%; object-fit: cover; } -.container .layer img.moon { +.container1 .layer img.moon { background-blend-mode: screen; } -.container1 { - position: absolute; - top: 50%; - left: 50%; - border-radius: 10px; - transform: translate(-50%, -50%); - background-color: #ffffff; - padding: 50px; - border-radius: 5px; - box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); -} h2 { margin: 0; @@ -63,37 +53,440 @@ label { margin-bottom: 10px; } -input[type="text"], -input[type="password"] { - width: 100%; - padding: 10px; - margin-bottom: 20px; - border: none; - border-radius: 5px; - box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3); -} + .password-container { position: relative; } +:root { + /* 颜色 */ + --white: #e9e9e9; + --gray: #333; + --blue: #095c91; + --blue-r: #315a7491; + --lightblue: #0393a3; + + /* 圆角 */ + --button-radius: 0.7rem; + + /* 大小 */ + --max-width: 758px; + --max-height: 420px; + + font-size: 16px; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, + Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; +} + + +body { + align-items: center; + background-color: var(--white); + background-attachment: fixed; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + display: grid; + height: 100vh; + place-items: center; +} + +.form_title { + font-weight: 300; + margin: 0; + margin-bottom: 1.25rem; +} + +.link { + color: var(--gray); + font-size: 0.9rem; + margin: 1.5rem 0; + text-decoration: none; +} + +.container { + background-color: rgba(0,0,0,0.2); + border-radius: var(--button-radius); + box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25), + 0 0.7rem 0.7rem rgba(0, 0, 0, 0.22); + height: var(--max-height); + max-width: var(--max-width); + overflow: hidden; + position: relative; + width: 100%; +} + +.container_form { + height: 100%; + position: absolute; + top: 0; + transition: all 0.6s ease-in-out; +} + +.container--signin { + left: 0; + width: 50%; + z-index: 5; +} + +.container.right-panel-active .container--signin { + transform: translateX(100%); +} + +.container--signup { + left: 0; + opacity: 0; + width: 50%; + z-index: 4; +} + +.container.right-panel-active .container--signup { + -webkit-animation: show 0.6s; + animation: show 0.6s; + opacity: 1; + transform: translateX(100%); + z-index: 8; +} + +.container_overlay { + height: 100%; + left: 50%; + overflow: hidden; + position: absolute; + top: 0; + transition: transform 0.6s ease-in-out; + width: 50%; + z-index: 100; +} + +.container.right-panel-active .container_overlay { + transform: translateX(-100%); +} + +.overlay { + background-color: rgba(255, 255, 255, 0.25); + background-attachment: fixed; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + height: 100%; + left: -100%; + position: relative; + transform: translateX(0); + transition: transform 0.6s ease-in-out; + width: 200%; +} + +.container.right-panel-active .overlay { + transform: translateX(50%); +} + +.overlay_panel { + align-items: center; + display: flex; + flex-direction: column; + height: 100%; + justify-content: center; + position: absolute; + text-align: center; + top: 0; + transform: translateX(0); + transition: transform 0.6s ease-in-out; + width: 50%; +} + +.overlay--left { + transform: translateX(-20%); +} + +.container.right-panel-active .overlay--left { + transform: translateX(0); +} + +.overlay--right { + right: 0; + transform: translateX(0); +} + +.container.right-panel-active .overlay--right { + transform: translateX(20%); +} + +.btn { + background-color: var(--blue); + background-image: linear-gradient(90deg, var(--blue) 0%, var(--lightblue) 74%); + border-radius: 20px; + border: 0.2px solid var(--blue-r); + color: var(--white); + cursor: pointer; + font-size: 0.8rem; + font-weight: bold; + letter-spacing: 0.1rem; + padding: 0.9rem 4rem; + text-transform: uppercase; + transition: transform 80ms ease-in; +} + +.form > .btn { + margin-top: 1.5rem; +} + +.btn:active { + transform: scale(0.95); +} -input[type="submit"] { - background-color: #4CAF50; - color: #ffffff; +.btn:focus { + outline: none; +} + +.form { + background-color: var(--white); + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + padding: 0 3rem; + height: 100%; + text-align: center; +} + +.input { + background-color: #fff; border: none; - padding: 10px 20px; - border-radius: 5px; - cursor: pointer; - font-size: 16px; + padding: 0.9rem 0.9rem; + margin: 0.5rem 0; + width: 100%; +} + +@-webkit-keyframes show { + 0%, + 49.99% { + opacity: 0; + z-index: 4; + } + + 50%, + 100% { + opacity: 1; + z-index: 8; + } +} + +@keyframes show { + 0%, + 49.99% { + opacity: 0; + z-index: 4; + } + + 50%, + 100% { + opacity: 1; + z-index: 8; + } +} + + + + + + +@-webkit-keyframes kenburns-1 { + 0% { + opacity: 1; + -webkit-transform: scale(1.2); + transform: scale(1.2); + } + 1.5625% { + opacity: 1; + } + 23.4375% { + opacity: 1; + } + 26.5625% { + opacity: 0; + -webkit-transform: scale(1); + transform: scale(1); + } + 100% { + opacity: 0; + -webkit-transform: scale(1.2); + transform: scale(1.2); + } + 98.4375% { + opacity: 0; + -webkit-transform: scale(1.21176); + transform: scale(1.21176); + } + 100% { + opacity: 1; + } +} + +@keyframes kenburns-1 { + 0% { + opacity: 1; + -webkit-transform: scale(1.2); + transform: scale(1.2); + } + 1.5625% { + opacity: 1; + } + 23.4375% { + opacity: 1; + } + 26.5625% { + opacity: 0; + -webkit-transform: scale(1); + transform: scale(1); + } + 100% { + opacity: 0; + -webkit-transform: scale(1.2); + transform: scale(1.2); + } + 98.4375% { + opacity: 0; + -webkit-transform: scale(1.21176); + transform: scale(1.21176); + } + 100% { + opacity: 1; + } +} + +@-webkit-keyframes kenburns-2 { + 23.4375% { + opacity: 1; + -webkit-transform: scale(1.2); + transform: scale(1.2); + } + 26.5625% { + opacity: 1; + } + 48.4375% { + opacity: 1; + } + 51.5625% { + opacity: 0; + -webkit-transform: scale(1); + transform: scale(1); + } + 100% { + opacity: 0; + -webkit-transform: scale(1.2); + transform: scale(1.2); + } +} + +@keyframes kenburns-2 { + 23.4375% { + opacity: 1; + -webkit-transform: scale(1.2); + transform: scale(1.2); + } + 26.5625% { + opacity: 1; + } + 48.4375% { + opacity: 1; + } + 51.5625% { + opacity: 0; + -webkit-transform: scale(1); + transform: scale(1); + } + 100% { + opacity: 0; + -webkit-transform: scale(1.2); + transform: scale(1.2); + } +} + +@-webkit-keyframes kenburns-3 { + 48.4375% { + opacity: 1; + -webkit-transform: scale(1.2); + transform: scale(1.2); + } + 51.5625% { + opacity: 1; + } + 73.4375% { + opacity: 1; + } + 76.5625% { + opacity: 0; + -webkit-transform: scale(1); + transform: scale(1); + } + 100% { + opacity: 0; + -webkit-transform: scale(1.2); + transform: scale(1.2); + } +} + +@keyframes kenburns-3 { + 48.4375% { + opacity: 1; + -webkit-transform: scale(1.2); + transform: scale(1.2); + } + 51.5625% { + opacity: 1; + } + 73.4375% { + opacity: 1; + } + 76.5625% { + opacity: 0; + -webkit-transform: scale(1); + transform: scale(1); + } + 100% { + opacity: 0; + -webkit-transform: scale(1.2); + transform: scale(1.2); + } } -input[type="submit"]:hover { - background-color: #3e8e41; +@-webkit-keyframes kenburns-4 { + 73.4375% { + opacity: 1; + -webkit-transform: scale(1.2); + transform: scale(1.2); + } + 76.5625% { + opacity: 1; + } + 98.4375% { + opacity: 1; + } + 100% { + opacity: 0; + -webkit-transform: scale(1); + transform: scale(1); + } } -.c1 { - border-radius: 5px; - background-color: rgba(0, 191, 255, 0.1); +@keyframes kenburns-4 { + 73.4375% { + opacity: 1; + -webkit-transform: scale(1.2); + transform: scale(1.2); + } + 76.5625% { + opacity: 1; + } + 98.4375% { + opacity: 1; + } + 100% { + opacity: 0; + -webkit-transform: scale(1); + transform: scale(1); + } } diff --git a/apps/account/static/img/11.jpg b/apps/account/static/img/11.jpg deleted file mode 100644 index f36192d..0000000 Binary files a/apps/account/static/img/11.jpg and /dev/null differ diff --git a/apps/account/static/img/bg.jpg b/apps/account/static/img/bg.jpg deleted file mode 100644 index d3f764b..0000000 Binary files a/apps/account/static/img/bg.jpg and /dev/null differ diff --git a/apps/account/static/img/hide-password-icon.png b/apps/account/static/img/hide-password-icon.png deleted file mode 100644 index 629dd3f..0000000 Binary files a/apps/account/static/img/hide-password-icon.png and /dev/null differ diff --git a/apps/account/static/img/show-password-icon.png b/apps/account/static/img/show-password-icon.png deleted file mode 100644 index b3cbae2..0000000 Binary files a/apps/account/static/img/show-password-icon.png and /dev/null differ diff --git a/apps/account/static/js/parallax.js b/apps/account/static/js/parallax.js index b583c66..7ad19bb 100644 --- a/apps/account/static/js/parallax.js +++ b/apps/account/static/js/parallax.js @@ -456,4 +456,20 @@ }, {"object-assign": 1, raf: 4}] }, {}, [5])(5) }); -//# sourceMappingURL=parallax.min.js.map \ No newline at end of file + +const signInBtn = document.getElementById("signIn"); +const signUpBtn = document.getElementById("signUp"); +const firstForm = document.getElementById("form1"); +const secondForm = document.getElementById("form2"); +const container = document.querySelector(".container"); + +signInBtn.addEventListener("click", () => { + container.classList.remove("right-panel-active"); +}); + +signUpBtn.addEventListener("click", () => { + container.classList.add("right-panel-active"); +}); + +firstForm.addEventListener("submit", (e) => e.preventDefault()); +secondForm.addEventListener("submit", (e) => e.preventDefault()); \ No newline at end of file diff --git a/apps/account/templates/login1.html b/apps/account/templates/login1.html index 6589fcc..79b943d 100644 --- a/apps/account/templates/login1.html +++ b/apps/account/templates/login1.html @@ -5,6 +5,8 @@ 登陆界面 + +
-
+
@@ -36,18 +37,41 @@
-
-
-

登录

- - - -
- +
+ + + + + + +
+
+
+ +
+
+ +
- - +
@@ -57,7 +81,6 @@ var scene = document.getElementById("scene"); var parallax = new Parallax(scene); - const passwordInput = document.getElementById("password"); const showPasswordIcon = document.querySelector(".show-password-icon"); showPasswordIcon.addEventListener("click", function () { @@ -84,5 +107,6 @@ } }); + diff --git a/apps/base/templates/index.html b/apps/base/templates/index.html index c75346f..d1416dc 100644 --- a/apps/base/templates/index.html +++ b/apps/base/templates/index.html @@ -47,8 +47,7 @@