{% 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>
