ZZY511
/
web
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

最终改版登陆注册

Browse Source
main
= 3 years ago
parent 2e893b5444
commit 23b18da716
7 changed files with 10 additions and 68 deletions
Show Stats Download Patch File Download Diff File

4
apps/account/static/css/style.css
Unescape View File

@ -52,13 +52,9 @@ label {
display: block; display: block;
margin-bottom: 10px; margin-bottom: 10px;
} }
.password-container { .password-container {
position: relative; position: relative;
} }
:root { :root {
/* 颜色 */ /* 颜色 */
--white: #e9e9e9; --white: #e9e9e9;

BIN
apps/account/static/img/bg.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 201 KiB

BIN
apps/account/static/img/hide-password-icon.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 806 B

BIN
apps/account/static/img/show-password-icon.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 818 B

58
apps/account/templates/login1.html
Unescape View File

@ -7,19 +7,6 @@
<link rel="stylesheet" href="{% static 'css/style.css' %}"/> <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="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="{% static 'css/style1.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> </head>
<body> <body>
<section> <section>
@ -29,10 +16,10 @@
<img src="{% static 'img/moon.png' %}" class="moon"/> <img src="{% static 'img/moon.png' %}" class="moon"/>
</div> </div>
<div class="layer" data-depth-x="0.15"> <div class="layer" data-depth-x="0.15">
<img src="{% static 'img/mountains02.png' %}"/> <img src="{% static 'img/mountains01.png' %}"/>
</div> </div>
<div class="layer" data-depth-x="0.25"> <div class="layer" data-depth-x="0.25">
<img src="{% static 'img/mountains01.png' %}"/> <img src="{% static 'img/mountains02.png' %}"/>
</div> </div>
<div class="layer" data-depth-x="-0.25"><img src="{% static 'img/road.png' %}"/></div> <div class="layer" data-depth-x="-0.25"><img src="{% static 'img/road.png' %}"/></div>
</div> </div>
@ -42,10 +29,9 @@
<div class="container_form container--signup"> <div class="container_form container--signup">
<form action="#" class="form" id="form1"> <form action="#" class="form" id="form1">
<h2 class="form_title">注册</h2> <h2 class="form_title">注册</h2>
<input type="text" placeholder="用户名" class="input"/> <input type="text" style = "border: 3px solid #708090" placeholder="用户名" class="input"/>
<input type="email" placeholder="手机号" class="input"/> <input type="email" style = "border: 3px solid #708090" placeholder="手机号" class="input"/>
<input type="password" placeholder="密码" class="input"/> <input type="password" style = "border: 3px solid #708090" placeholder="密码" class="input"/>
<span class="show-password-icon"></span>
<button class="btn">注册</button> <button class="btn">注册</button>
</form> </form>
</div> </div>
@ -53,14 +39,12 @@
<div class="container_form container--signin"> <div class="container_form container--signin">
<form action="#" class="form" id="form2"> <form action="#" class="form" id="form2">
<h2 class="form_title">登录</h2> <h2 class="form_title">登录</h2>
<input type="email" placeholder="手机号" class="input"/> <input type="email" style="border: 3px solid #708090" placeholder="用户名" class="input"/>
<input type="password" placeholder="密码" class="input"/> <input type="password" style="border: 3px solid #708090" placeholder="密码" class="input"/>
<span class="show-password-icon"></span>
<a href="#" class="link">忘记密码?</a> <a href="#" class="link">忘记密码?</a>
<button class="btn">登录</button> <button class="btn">登录</button>
</form> </form>
</div> </div>
<!-- 浮层 --> <!-- 浮层 -->
<div class="container_overlay"> <div class="container_overlay">
<div class="overlay"> <div class="overlay">
@ -74,38 +58,10 @@
</div> </div>
</div> </div>
</section> </section>
<script src="{% static 'js/parallax.js' %}"></script> <script src="{% static 'js/parallax.js' %}"></script>
<script> <script>
var scene = document.getElementById("scene"); var scene = document.getElementById("scene");
var parallax = new Parallax(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>
<script src="{% static 'js/script.js' %}"></script> <script src="{% static 'js/script.js' %}"></script>
</body> </body>

16
apps/base/templates/index.html
Unescape View File

@ -8,19 +8,14 @@
<link rel = "icon" href ="{% static 'img/xxm.ico' %}"> <link rel = "icon" href ="{% static 'img/xxm.ico' %}">
<title>炫小码</title> <title>炫小码</title>
<link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.css' %}"> <!-- CSS --> <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.css' %}"> <!-- CSS -->
</head> </head>
<body> <body>
<nav class="navbar navbar-default"> <nav class="navbar navbar-default">
<div class="container-fluid"> <div class="container-fluid">
<div class="navbar-header"> <div class="navbar-header">
<a class="navbar-brand" href="/xxm">首页目录</a> <a class="navbar-brand" href="/xxm">首页目录</a>
</div> <!-- 首页目录选项 --> </div> <!-- 首页目录选项 -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li><a href="#">课程售卖</a></li> <li><a href="#">课程售卖</a></li>
<li><a href="#">师资力量</a></li> <li><a href="#">师资力量</a></li>
@ -38,14 +33,12 @@
</ul> </ul>
</li> <!-- 左边下拉框 --> </li> <!-- 左边下拉框 -->
</ul> <!-- 目录选项 --> </ul> <!-- 目录选项 -->
<form class="navbar-form navbar-left"> <form class="navbar-form navbar-left">
<div class="form-group"> <div class="form-group">
<input type="text" class="form-control" placeholder="Search"> <input type="text" class="form-control" placeholder="Search">
</div> </div>
<button type="submit" class="btn btn-default">Submit</button> <button type="submit" class="btn btn-default">Submit</button>
</form> <!-- 表单提交 --> </form> <!-- 表单提交 -->
<ul class="nav navbar-nav navbar-right"> <ul class="nav navbar-nav navbar-right">
<li><a href="/login">登录/注册</a></li> <!-- 登录选项 --> <li><a href="/login">登录/注册</a></li> <!-- 登录选项 -->
<li class="dropdown"> <li class="dropdown">
@ -60,13 +53,10 @@
</ul> </ul>
</li> <!-- 右边下拉框--> </li> <!-- 右边下拉框-->
</ul> </ul>
</div>
</div><!-- /.navbar-collapse --> </div>
</div><!-- /.container-fluid --> </nav>
</nav> <!-- 导航 -->
<script src="{% static 'js/jquery-3.5.1.min.js' %}"></script> <script src="{% static 'js/jquery-3.5.1.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.js' %}"></script> <script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.js' %}"></script>
</body> </body>
</html> </html>

0
apps/base/templates/text.html
Unescape View File

Write Preview
Loading…
Cancel
Save