You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
113 lines
4.3 KiB
113 lines
4.3 KiB
{% load static %}
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<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;
|
|
top: 36%;
|
|
right: 10px;
|
|
transform: translateY(-50%);
|
|
width: 24px;
|
|
height: 24px;
|
|
background-image: {% static 'img/hide-password-icon.png' %};
|
|
background-size: cover;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<section>
|
|
<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"/>
|
|
</div>
|
|
<div class="layer" data-depth-x="0.15">
|
|
<img src="{% static 'img/mountains02.png' %}"/>
|
|
</div>
|
|
<div class="layer" data-depth-x="0.25">
|
|
<img src="{% static 'img/mountains01.png' %}"/>
|
|
</div>
|
|
<div class="layer" data-depth-x="-0.25"><img src="{% static 'img/road.png' %}"/></div>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<script src="{% static 'js/parallax.js' %}"></script>
|
|
<script>
|
|
|
|
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 () {
|
|
if (passwordInput.type === "password") {
|
|
passwordInput.type = "text";
|
|
showPasswordIcon.style.backgroundImage = "url({% static 'img/show-password-icon.png' %})";
|
|
} else {
|
|
passwordInput.type = "password";
|
|
showPasswordIcon.style.backgroundImage = "url({% static 'img/hide-password-icon.png' %})";
|
|
}
|
|
});
|
|
|
|
// 添加表单提交事件
|
|
document.querySelector('form').addEventListener('submit', function (e) {
|
|
e.preventDefault(); // 阻止默认的表单提交行为
|
|
// 获取表单中的用户名和密码
|
|
var username = document.getElementById('username').value;
|
|
var password = document.getElementById('password').value;
|
|
// 在此处编写验证逻辑，此处为示例代码
|
|
if (username === '' || password === '') {
|
|
alert('请输入用户名和密码');
|
|
} else {
|
|
alert('登录成功');
|
|
}
|
|
});
|
|
</script>
|
|
<script src="{% static 'js/script.js' %}"></script>
|
|
</body>
|
|
</html>
|