web/apps/account/templates/login1.html

{% 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>
登录页面设计 3 years ago			`{% 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;`
修改版 3 years ago			`top: 36%;`
登录页面设计 3 years ago			`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>`