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.
89 lines
3.0 KiB
89 lines
3.0 KiB
{% load static %}
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8"/>
|
|
<title>登陆界面</title>
|
|
<link rel="stylesheet" href="{% static 'css/style.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="container">
|
|
<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="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>
|
|
<span class="show-password-icon"></span>
|
|
</div>
|
|
<input type="submit" value="登录">
|
|
</form>
|
|
</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>
|
|
</body>
|
|
</html>
|