{% 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: 50%;
            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>
