You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
158 lines
4.8 KiB
158 lines
4.8 KiB
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="icon" href="https://cdn.acwing.com/media/article/image/2021/12/17/1_be4c11ce5f-acapp.png">
|
|
<title>头像选择</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100vh;
|
|
margin: 0;
|
|
font-size: 24px;
|
|
background-image: url("/static/image/menu/123.gif");
|
|
}
|
|
|
|
.container {
|
|
text-align: center;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 48px;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.avatar-container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 40px 0;
|
|
}
|
|
|
|
.arrow {
|
|
font-size: 48px;
|
|
margin: 0 40px;
|
|
cursor: pointer;
|
|
color: aliceblue;
|
|
}
|
|
|
|
.avatar-placeholder {
|
|
width: 300px;
|
|
height: 300px;
|
|
border-radius: 50%;
|
|
border: 4px solid white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 28px;
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.confirm-button {
|
|
padding: 20px 40px;
|
|
background-color: white;
|
|
color: black;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 28px;
|
|
margin-top: 40px;
|
|
border-radius: 20px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const avatars = [
|
|
'/static/image/swgq.jpg',
|
|
'/static/image/lxq.jpg',
|
|
'/static/image/zyj.jpg'
|
|
];
|
|
let currentIndex = 0;
|
|
|
|
const avatarPlaceholder = document.querySelector('.avatar-placeholder');
|
|
const leftArrow = document.querySelector('.arrow:first-child');
|
|
const rightArrow = document.querySelector('.arrow:last-child');
|
|
const confirmButton = document.querySelector('.confirm-button');
|
|
const logoutButton = document.querySelector('.logout-button'); // 选择退出按钮
|
|
|
|
function updateAvatar() {
|
|
avatarPlaceholder.style.backgroundImage = `url('${avatars[currentIndex]}')`;
|
|
}
|
|
|
|
leftArrow.addEventListener('click', () => {
|
|
currentIndex = (currentIndex === 0) ? avatars.length - 1 : currentIndex - 1;
|
|
updateAvatar();
|
|
});
|
|
|
|
rightArrow.addEventListener('click', () => {
|
|
currentIndex = (currentIndex === avatars.length - 1) ? 0 : currentIndex + 1;
|
|
updateAvatar();
|
|
});
|
|
|
|
updateAvatar(); // 初始化显示第一个头像
|
|
|
|
// 用户信息对象
|
|
user = {
|
|
username: "{{ user.username|escapejs }}",
|
|
photo: "{{ user.player.photo|escapejs }}",
|
|
};
|
|
|
|
console.log("当前用户信息：", user);
|
|
|
|
// 绑定确认按钮的点击事件
|
|
confirmButton.addEventListener('click', () => {
|
|
user.photo = avatars[currentIndex];
|
|
console.log("更新头像为：", user.photo);
|
|
|
|
fetch('/update-avatar/', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRFToken': '{{ csrf_token }}'
|
|
},
|
|
body: JSON.stringify({ photo: user.photo })
|
|
})
|
|
.then(response => {
|
|
if (response.ok) {
|
|
alert("头像已更新！");
|
|
|
|
} else {
|
|
alert("头像更新失败，请稍后重试。");
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error("Error:", error);
|
|
alert("头像更新失败，请检查网络连接。");
|
|
});
|
|
});
|
|
|
|
// 绑定退出按钮的点击事件
|
|
logoutButton.addEventListener('click', () => {
|
|
window.location.href = 'https://app6641.acapp.acwing.com.cn/'; // 重定向到注销页面
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<div class="container">
|
|
<h1>头像选择</h1>
|
|
<div class="avatar-container">
|
|
<div class="arrow">◀</div>
|
|
<div class="avatar-placeholder"></div>
|
|
<div class="arrow">▶</div>
|
|
</div>
|
|
<button class="confirm-button">确认</button>
|
|
<button class="logout-button">退出</button> <!-- 新增退出按钮 -->
|
|
</div>
|
|
</body>
|
|
|
|
</html> |