ZZY511
/
web
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

最终改版登陆注册

Browse Source
main
= 3 years ago
parent 81867f0ed3
commit 2e893b5444
10 changed files with 488 additions and 54 deletions
Show Stats Download Patch File Download Diff File

465
apps/account/static/css/style.css
Unescape View File

@ -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);
}
}

BIN
apps/account/static/img/11.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.7 MiB

BIN
apps/account/static/img/bg.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 201 KiB

BIN
apps/account/static/img/hide-password-icon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 993 B

BIN
apps/account/static/img/show-password-icon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 661 B

18
apps/account/static/js/parallax.js
Unescape View File

@ -456,4 +456,20 @@
}, {"object-assign": 1, raf: 4}]
}, {}, [5])(5)
});
//# sourceMappingURL=parallax.min.js.map
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());

50
apps/account/templates/login1.html
Unescape View File

@ -5,6 +5,8 @@
<meta charset="UTF-8"/>
<title>登陆界面</title>
<link rel="stylesheet" href="{% static 'css/style.css' %}"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="{% static 'css/style1.css' %}">
<style>
.show-password-icon {
position: absolute;
@ -17,12 +19,11 @@
background-size: cover;
cursor: pointer;
}
</style>
</head>
<body>
<section>
<div class="container">
<div class="container1">
<div id="scene">
<div class="layer" data-depth-x="-0.5" data-depth-y="0.25">
<img src="{% static 'img/moon.png' %}" class="moon"/>
@ -36,18 +37,41 @@
<div class="layer" data-depth-x="-0.25"><img src="{% static 'img/road.png' %}"/></div>
</div>
</div>
<div class="container1 c1">
<form>
<h2>登录</h2>
<label for="username">用户名</label>
<input type="text" id="username" name="username" required>
<label for="password">密码</label>
<div class="password-container">
<input type="password" id="password" name="password" required>
<div class="container right-panel-active">
<!-- 注册 -->
<div class="container_form container--signup">
<form action="#" class="form" id="form1">
<h2 class="form_title">注册</h2>
<input type="text" placeholder="用户名" class="input"/>
<input type="email" placeholder="手机号" class="input"/>
<input type="password" placeholder="密码" class="input"/>
<span class="show-password-icon"></span>
<button class="btn">注册</button>
</form>
</div>
<!-- 登录 -->
<div class="container_form container--signin">
<form action="#" class="form" id="form2">
<h2 class="form_title">登录</h2>
<input type="email" placeholder="手机号" class="input"/>
<input type="password" placeholder="密码" class="input"/>
<span class="show-password-icon"></span>
<a href="#" class="link">忘记密码?</a>
<button class="btn">登录</button>
</form>
</div>
<!-- 浮层 -->
<div class="container_overlay">
<div class="overlay">
<div class="overlay_panel overlay--left">
<button class="btn" id="signIn">登录页面</button>
</div>
<div class="overlay_panel overlay--right">
<button class="btn" id="signUp">注册页面</button>
</div>
</div>
<input type="submit" value="登录">
</form>
</div>
</div>
</section>
@ -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 @@
}
});
</script>
<script src="{% static 'js/script.js' %}"></script>
</body>
</html>

3
apps/base/templates/index.html
Unescape View File

@ -47,8 +47,7 @@
</form> <!-- 表单提交 -->
<ul class="nav navbar-nav navbar-right">
<li><a href="/login">登录</a></li> <!-- 登录选项 -->
<li><a href="/login">登录/注册</a></li> <!-- 登录选项 -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false"> Dropdown <span class="caret"></span></a>

4
apps/base/views.py
Unescape View File

@ -3,4 +3,6 @@ from django.shortcuts import render
# Create your views here.
def index(request):
return render(request,"index.html")
return render(request,"index.html")

2
urls.py
Unescape View File

@ -22,6 +22,6 @@ from apps.base import apps, views
urlpatterns = [
# path('admin/', admin.site.urls),
path('xxm/', base.views.index),
path('login/', account.views.login),
path('xxm/',base.views.index)
]

Write Preview
Loading…
Cancel
Save