server/mylomen-server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
mylomen-server/static/mylomen.html

508 lines
16 KiB
HTML
Raw Normal View History

to:sync
2024-10-07 23:15:58 +08:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mylomen</title>
<style type="text/css">
/* 字体 */
:root {
/* font-size: calc(0.5em + 1vw); */
font-size: 62.5%;
}
#myMask {
position: fixed;
/* background-color: green;*/
background-color: gray;
/* background-color:#f8f7fa; */
opacity: 50%;
z-index: 100;
height: 100%;
width: 100%;
to:sync
2024-10-08 22:06:28 +08:00
top: 0;
left: 0;
to:sync
2024-10-07 23:15:58 +08:00
}
.myPopWindow4Login {
display: -webkit-inline-flex;
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
-webkit-box-align: center;
position: fixed;
to:sync
2024-10-08 12:07:24 +08:00
width: 30rem;
min-height: 40rem;
to:sync
2024-10-07 23:15:58 +08:00
top: calc(5%);
to:sync
2024-10-08 12:07:24 +08:00
left: calc(50% - 15rem);
to:sync
2024-10-07 23:15:58 +08:00
z-index: 101;
background-color: white;
padding: 1rem 1rem;
border-radius: 5%;
opacity: 0.9;
}
.myPopWindow4Login form p {
position: relative;
width: 26rem;
border-radius: 2.5rem;
padding: 1rem 1.5rem;
box-shadow: inset 0.2rem 0.5rem 1rem rgba(0, 0, 0, 0.1),
inset -2px -5px 10px rgba(255, 255, 255, 1),
1.5rem 1.5rem 1rem rgba(0, 0, 0, 0.05), 1.5rem 1rem 1.5rem rgba(0, 0, 0, 0.025);
}
.myPopWindow4Login form input {
width: 100%;
border: none;
outline: none;
background: transparent;
font-size: 1.6rem;
}
.myPopWindow4Login form input[type="submit"] {
/* color: #fff; */
cursor: pointer;
}
.myPopWindow4Login ul li {
float: left;
list-style: none;
margin: 0;
padding: 0;
padding-right: 1.6rem;
}
.myPopWindow4Login .myAgree {
height: 2rem;
margin-top: 3rem;
}
a {
text-decoration: none;
}
.myPopWindow4Login form {
display: -webkit-inline-flex;
display: inline-flex;
flex-direction: column;
}
.myheader-item {
margin: 1rem 2rem;
}
to:sync
2024-10-07 23:49:00 +08:00
.cha {
width: 20px;
height: 20px;
margin: auto;
position: relative;
left: calc(50% - 2.5rem);
}
.cha::before,
.cha::after {
content: "";
position: absolute;
/*方便进行定位*/
height: 20px;
width: 1.5px;
top: 2px;
right: 9px;
/*设置top和right使图像在20*20框中居中*/
background: #10100f;
}
.cha::before {
transform: rotate(45deg);
/*进行旋转*/
}
.cha::after {
transform: rotate(-45deg);
}
to:sync
2024-10-07 23:15:58 +08:00
</style>
</head>
<body style="display: flex; flex-direction: column;">
to:sync
2024-10-07 23:53:19 +08:00
<header style="background-color: lightgray;">
to:sync
2024-10-07 23:15:58 +08:00
<!-- 登录遮罩 -->
<div id="myMaskContent" style="display: none;">
<div id="myMask"><!-- 这是遮罩层 --></div>
<div class="myPopWindow4Login">
to:sync
2024-10-07 23:49:00 +08:00
<p>
to:sync
2024-10-28 01:35:19 +08:00
<div class="cha" style="align-self: flex-end;" onclick="exitToMyLogin()"></div>
to:sync
2024-10-07 23:49:00 +08:00
</p>
to:sync
2024-10-07 23:15:58 +08:00
<h1>账号登录</h1>
<form method="post" autocomplete="off" onsubmit="return false">
<p>
to:sync
2024-10-28 01:35:19 +08:00
<input type="text" style="display: none; visibility: hidden;"/>
to:sync
2024-10-07 23:15:58 +08:00
<input type="text" id="myAccount" name="account" maxlength="26" placeholder="用户名/邮箱">
</p>
<p>
<input id="myPwd" type="password" maxlength="26" placeholder="密码">
</p>
<a href="#" style="align-self:flex-end; font-size: 1.4rem;" target="_blank">忘记密码</a>
<p>
<input type="submit" value="登录/注册" onclick="toLogin()">
</p>
</form>
<p
to:sync
2024-10-07 23:22:30 +08:00
style="border-left: 8.8rem solid rgb(146, 146, 156); border-right:8.8rem solid rgb(146, 146, 156);margin:4rem 0 0; color: rgb(146, 146, 156); line-height: 1px;">
to:sync
2024-10-07 23:15:58 +08:00
&nbsp;&nbsp;第三方快捷登录&nbsp;&nbsp;
</p>
<ul style=" display: -webkit-inline-flex; display: inline-flex;align-items: center; width:30rem">
<li>
<a style="display: block; background: url(https://passport.baidu.com/passApi/img/bd-acc-qzone.png) no-repeat center center / 100% 100%;;height: 28px; padding-left: 28px;"
href="#" title="qq账号">
<!-- QQ -->
</a>
</li>
<li>
<a style="display: block;background: url(https://passport.baidu.com/passApi/img/bd-acc-weixin.png) no-repeat center center / 100% 100% ;height: 28px; padding-left: 28px;"
href="#" title="微信">
<!-- 微信 -->
</a>
</li>
</ul>
<div class="myAgree">
登录/注册表示同意
<a target="_blank" href="">服务条款</a>
和
<a target="_blank" href="/v1/static/page/privacy2.html" rel="">隐私协议</a>
</div>
</div>
</div>
<!-- 页头部分 -->
<div style="display: flex; justify-content:flex-end; font-size: 1.6rem;">
<div class="myheader-item" style=" padding: 0.6rem;border-radius: 1rem;">
Mylomen.com
</div>
<a class="myheader-item" href="#" style=" padding: 0.6rem;border-radius: 1rem;color:rgb(29, 29, 31);">
更新日志
</a>
<div class="myheader-item" style=" padding: 0.6rem;border-radius: 1rem;">｜</div>
<div style=" display: -webkit-inline-flex;display: inline-flex;flex-direction: column;">
<a id="goToLogin" class="myheader-item" href="#" onclick="goToLogin()"
style=" padding: 0.6rem;border-radius: 1rem; background-color: #f8f7fa;color:rgb(29, 29, 31);">
登录/注册
</a>
<!-- 用户信息下拉弹框 -->
<div id="myInfo" style="position: fixed; z-index: 101; display: none; background-color: white; margin-top: 5rem;
right: 3rem;border-radius: 5%;
border:1px solid #ece5e5;
width:15rem;padding: 0.5rem 1rem;">
<!-- <h2>昵称</h2>
<p></p>
<p>
账号设置
</p>
<p></p> -->
<p>
<a onclick="myLogout()" class="myheader-item" href="#"
style="padding: 0.6rem;border-radius: 1rem;color:rgb(29, 29, 31);">
退出登录
</a>
</p>
</div>
</div>
</div>
</header>
to:sync
2024-10-28 01:33:33 +08:00
<div>
to:sync
2024-10-07 23:49:00 +08:00
<style>
to:sync
2024-10-28 01:33:33 +08:00
/* 字体 */
to:sync
2024-10-28 01:35:19 +08:00
:root {
/* font-size: calc(0.5em + 1vw); */
font-size: 62.5%;
}
to:sync
2024-10-28 01:33:33 +08:00
/* style sheet for "A4" printing */
@media print and (width: 21cm) and (height: 29.7cm) {
@page {
margin: 3cm;
}
to:sync
2024-10-07 23:49:00 +08:00
}
to:sync
2024-10-28 01:33:33 +08:00
/* style sheet for "letter" printing */
@media print and (width: 8.5in) and (height: 11in) {
@page {
margin: 1in;
}
to:sync
2024-10-07 23:49:00 +08:00
}
to:sync
2024-10-28 01:33:33 +08:00
* {
/* margin: 1px 2px;
padding: 1px 2px; */
font-family: Roboto-Regular, PingFang SC, SF Pro SC, SF Pro Text, SF Pro Icons, Helvetica Neue, Roboto, Helvetica, Arial, sans-serif;
outline: none;
/* box-sizing: border-box; */
to:sync
2024-10-07 23:49:00 +08:00
}
to:sync
2024-10-28 01:33:33 +08:00
.my-header {
position: relative;
top: 0;
/* height: 8rem; */
z-index: 9999;
left: 0;
right: 0;
width: 100%;
background: #f7dcbc;
to:sync
2024-10-07 23:49:00 +08:00
}
to:sync
2024-10-28 01:33:33 +08:00
#noteshare {
to:sync
2024-10-28 01:37:08 +08:00
width: 60%;
to:sync
2024-10-28 01:33:33 +08:00
/* width: 21cm; */
to:sync
2024-10-28 01:35:19 +08:00
min-height: 50rem;
font-size: 1.5rem;
to:sync
2024-10-07 23:49:00 +08:00
to:sync
2024-10-28 01:33:33 +08:00
/*border: 1px red solid;*/
margin: auto auto 10rem auto;
to:sync
2024-10-07 23:49:00 +08:00
}
to:sync
2024-10-28 01:33:33 +08:00
#noteshare p {
to:sync
2024-10-28 01:37:08 +08:00
/*border: 1px rgb(248, 245, 245) solid;*/
to:sync
2024-10-28 01:33:33 +08:00
/* border: none; */
to:sync
2024-10-07 23:49:00 +08:00
}
to:sync
2024-10-28 01:33:33 +08:00
#testInput {
width: 100%;
height: 50px;
border: 1px rgb(0, 140, 255) solid;
margin: 20px auto;
to:sync
2024-10-07 23:49:00 +08:00
}
to:sync
2024-10-28 01:33:33 +08:00
::selection {
color: antiquewhite;
background-color: cadetblue;
text-shadow: #00a9ff;
to:sync
2024-10-07 23:49:00 +08:00
}
to:sync
2024-10-28 01:33:33 +08:00
.my-divider-item {
background-color: grey;
width: 1px;
height: 2rem;
margin: 2px 10px 2px 8px;
to:sync
2024-10-07 23:49:00 +08:00
}
to:sync
2024-10-28 01:33:33 +08:00
.childStyleStrong {
font-weight: bold
to:sync
2024-10-07 23:49:00 +08:00
}
to:sync
2024-10-28 01:33:33 +08:00
.childStyleI {
font-style: italic;
to:sync
2024-10-07 23:49:00 +08:00
}
to:sync
2024-10-28 01:33:33 +08:00
.childStyleU {
text-decoration: underline;
to:sync
2024-10-28 01:35:19 +08:00
/ / 中划线 / / text-decoration: line-through;
to:sync
2024-10-07 23:49:00 +08:00
}
to:sync
2024-10-28 01:33:33 +08:00
.childStyleDel {
text-decoration: line-through;
to:sync
2024-10-07 23:49:00 +08:00
}
to:sync
2024-10-28 01:33:33 +08:00
.childStyleColor {
color: red;
to:sync
2024-10-07 23:49:00 +08:00
}
to:sync
2024-10-28 01:33:33 +08:00
</style>
to:sync
2024-10-07 23:49:00 +08:00
to:sync
2024-10-28 01:33:33 +08:00
<div class=".my-header">
<div style="display: flex;
padding: 1rem 4rem;
justify-content: space-between;
align-items: center;
background: #f8f6f4;
margin: 0 auto;">
to:sync
2024-10-07 23:49:00 +08:00
to:sync
2024-10-28 01:33:33 +08:00
<div class="head-left">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z" fill="black"></path>
</svg>
</div>
to:sync
2024-10-07 23:49:00 +08:00
to:sync
2024-10-28 01:33:33 +08:00
<div class="head-center" style="display: flex;
justify-content: center;
align-items: center;
max-width: 650px;
background-color: aqua;">
<div style="
position: fixed;
z-index: 87;
/* top: 200px; */
/* left: 324px; */
">
<div>
<div style="display: flex;
">
<div>
<button id="myPlusB" data-value="b">加粗</button>
</div>
<div class="my-divider-item"></div>
<div>
<button id="myPlusI" data-value="i"><i>I</i></button>
</div>
<div class="my-divider-item"></div>
<div>
<button id="myPlusU" data-value="u"><u>下划线</u></button>
</div>
<div class="my-divider-item"></div>
<div>
<button id="myPlusDel" data-value="del">
<del>删除线</del>
</button>
</div>
<div class="my-divider-item"></div>
<div>
<button id="myPlusC" data-value="c_red">红色</button>
</div>
<!-- <div class="my-divider-item"></div>-->
<!-- <div>-->
<!-- <button onclick="info(this)">info</button>-->
<!-- </div>-->
</div>
</div>
</div>
</div>
to:sync
2024-10-07 23:49:00 +08:00
to:sync
2024-10-28 01:33:33 +08:00
<div class="head-right">
<button>同步</button>
to:sync
2024-10-07 23:49:00 +08:00
</div>
</div>
</div>
to:sync
2024-10-28 01:33:33 +08:00
<div>
<div id="noteshare" spellcheck="false" translate="no">
</div>
to:sync
2024-10-07 23:49:00 +08:00
to:sync
2024-10-28 01:33:33 +08:00
</div>
</div>
to:sync
2024-10-07 23:15:58 +08:00
to:sync
2024-10-28 01:33:33 +08:00
<footer style="display: flex; justify-content:center; height: 80%; font-size: 1.5rem; background-color:black; bottom: 10px;">
to:sync
2024-10-07 23:15:58 +08:00
<p>
<a style="color:rgb(201, 201, 206);text-decoration:none;" href="https://beian.miit.gov.cn/" target="_blank"
rel="nofollow">
沪ICP备18034819号 |
</a>
<a style="color:rgb(201, 201, 206);text-decoration:none;" href="https://beian.mps.gov.cn/" target="_blank"
rel="nofollow">
<i class="police-ico"></i>
沪公网安备31011302007198号
</a>
</p>
</footer>
</body>
<script type="text/javascript">
window.onload = function () {
let token = localStorage.getItem("token")
console.log(token)
let nickname = localStorage.getItem("nickname")
console.log(nickname)
to:sync
2024-10-28 01:35:19 +08:00
if (token !== undefined && token !== null && nickname !== undefined && nickname !== null) {
to:sync
2024-10-07 23:15:58 +08:00
//设置昵称
if (nickname.length > 8) {
document.getElementById("goToLogin").innerText = nickname.slice(0, 7) + "..."
} else {
document.getElementById("goToLogin").innerText = nickname
}
//修改事件
document.getElementById("goToLogin").setAttribute('onclick', 'goToMyLogout()')
//隐藏弹框
document.getElementById("myMaskContent").style.display = "none"
}
}
function goToLogin() {
document.getElementById("myMaskContent").style.display = "block"
}
to:sync
2024-10-28 01:35:19 +08:00
function exitToMyLogin() {
to:sync
2024-10-07 23:49:00 +08:00
document.getElementById("myMaskContent").style.display = "none"
}
to:sync
2024-10-07 23:15:58 +08:00
function goToMyLogout() {
let myTag4show = document.getElementById("myInfo").getAttribute('myTag4show')
// console.log(myTag4show);
if (myTag4show === undefined || myTag4show === null || myTag4show === "0") {
document.getElementById("myInfo").setAttribute('myTag4show', 1)
document.getElementById("myInfo").style.display = "block"
} else {
document.getElementById("myInfo").setAttribute('myTag4show', 0)
document.getElementById("myInfo").style.display = "none"
}
}
function myLogout() {
to:sync
2024-10-07 23:22:30 +08:00
localStorage.removeItem("token");
localStorage.removeItem("nickname");
location.reload();
document.getElementById("myInfo").style.display = "none";
to:sync
2024-10-07 23:15:58 +08:00
}
async function toLogin() {
to:sync
2024-10-07 23:22:30 +08:00
// console.log(123)
to:sync
2024-10-07 23:15:58 +08:00
try {
let response = await fetch('/v1/user/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json;charset=utf-8'
},
body: JSON.stringify({
account: document.getElementById('myAccount').value,
password: document.getElementById('myPwd').value
})
})
let result = await response.json()
to:sync
2024-10-07 23:22:30 +08:00
// console.log(result)
to:sync
2024-10-07 23:15:58 +08:00
if (result.code === 0 && result.data !== undefined) {
console.log('登录成功')
localStorage.setItem("token", result.data.token)
localStorage.setItem("nickname", result.data.nickname)
// alert(localStorage.getItem("token"))
//设置昵称
if (result.data.nickname.length > 8) {
to:sync
2024-10-07 23:22:30 +08:00
document.getElementById("goToLogin").innerText = result.data.nickname.slice(0, 5) + "..."
to:sync
2024-10-07 23:15:58 +08:00
} else {
document.getElementById("goToLogin").innerText = result.data.nickname
}
//修改事件
document.getElementById("goToLogin").setAttribute('onclick', 'goToMyLogout()')
//隐藏弹框
document.getElementById("myMaskContent").style.display = "none"
} else {
alert(result.msg)
}
} catch (error) {
console.log('Request Failed', error)
alert("系统异常，请稍后再试")
}
}
</script>
to:sync
2024-10-28 01:33:33 +08:00
<script src="/v1/static/js/utils.js"></script>
<script src="/v1/static/js/styleCmd.js"></script>
<script src="/v1/static/js/yanxuelu.js"></script>
to:sync
2024-10-07 23:15:58 +08:00
</html>
Reference in New Issue Copy Permalink