a / public /index.html
blueddd's picture
Update public/index.html
8724711 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>布拉迪找人</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}
header {
background-color: #1f84d4;
color: #fff;
padding: 10px;
text-align: center;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
.input-group {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
input[type="text"] {
flex: 1;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
outline: none;
}
#search {
background-color: #1f84d4;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
margin-left: 10px;
}
.result-item {
margin-top: 20px;
text-align: center;
border: 1px solid #eee;
padding: 15px;
border-radius: 8px;
background-color: #fafafa;
box-sizing: border-box;
/* 关键:包含 padding 和 border 在 width 内 */
max-width: 100%;
/* 确保不超过容器 */
}
.result-item img {
display: block;
max-width: 100px;
height: auto;
margin: 0 auto 10px;
border-radius: 50%;
}
.result-item button {
background-color: #1f84d4;
color: #fff;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
margin-top: 10px;
margin-right: 5px;
}
.result-item p {
margin: 5px 0;
font-size: 14px;
}
/* Modal Styles */
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
}
.modal-content {
position: relative;
background-color: #fff;
margin: 10% auto;
padding: 20px;
border-radius: 8px;
width: 90%;
max-width: 400px;
text-align: center;
}
.close-btn {
position: absolute;
top: 10px;
right: 15px;
font-size: 24px;
color: #aaa;
cursor: pointer;
}
.close-btn:hover {
color: #000;
}
.detail-info p {
margin: 8px 0;
font-size: 16px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
</head>
<body>
<header>
<h1>布拉迪昵称找人</h1>
</header>
<div class="container">
<div class="input-group">
<input type="text" id="name" placeholder="输入昵称">
<input type="button" value="查询" onclick="search()" id="search">
</div>
<div id="result-container"></div>
</div>
<!-- Detail Modal -->
<div id="detailModal" class="modal">
<div class="modal-content">
<div class="detail-info" id="detailInfo"></div>
</div>
</div>
<script>
function search() {
var name = document.getElementById("name").value;
if (name === "") {
alert("请先输入昵称哦~");
return;
}
const url = `/search?name=${encodeURIComponent(name)}`;
fetch(url)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
var code = data.code;
var resultContainer = document.getElementById("result-container");
resultContainer.innerHTML = '';
if (code === 200) {
var list = data.data.list;
list.forEach(item => {
var itemDiv = document.createElement('div');
itemDiv.classList.add('result-item');
var img = document.createElement('img');
img.src = item.avatar || 'https://web.bldimg.com/cblued/static/default.1c2b240hi2sg3rh.png';
itemDiv.appendChild(img);
var uidP = document.createElement('p');
uidP.textContent = `UID: ${item.uid}`;
itemDiv.appendChild(uidP);
var unionUidP = document.createElement('p');
unionUidP.textContent = `ID: ${item.uuid}`;
itemDiv.appendChild(unionUidP);
// 普通跳转按钮
var homeBtn = document.createElement('button');
homeBtn.textContent = "打开主页";
homeBtn.addEventListener('click', function () {
var url = "https://app.blued.cn/user?id=" + item.uid;
window.open(url);
});
itemDiv.appendChild(homeBtn);
// 查看详细信息按钮
var detailBtn = document.createElement('button');
detailBtn.textContent = "查看信息";
detailBtn.addEventListener('click', function () {
fetchDetail(item.uid, item.uuid);
});
itemDiv.appendChild(detailBtn);
resultContainer.appendChild(itemDiv);
});
} else {
alert("查无此人");
}
})
.catch(error => {
console.error('Fetch Error:', error);
alert("查询出错,请稍后再试");
});
}
function fetchDetail(uid, uuid) {
fetch(`/getDetail?id=${encodeURIComponent(uid)}`)
.then(response => response.json())
.then(data => {
if (data && data.userInfo) {
fetch('/viewPhone?id=' + a(uuid))
.then(response => response.json())
.then(phonedata => {
const info = data.userInfo;
const detailHtml = `
<p><strong>昵称:</strong>${info.name || '未知'}</p>
<p><strong>信息:</strong>${info.age}/${info.height}/${info.weight}</p>
<p><strong>角色:</strong>${info.role}</p>
<p><strong>地区:</strong>${info.area || '未知'}</p>
<p><strong>bind:</strong>${phonedata.data[0].bind}</p>
<p><strong>relation:</strong>${phonedata.data[0].relation}</p>
`;
document.getElementById('detailInfo').innerHTML = detailHtml;
document.getElementById('detailModal').style.display = 'block';
})
.catch(err => {
console.error('Phone fetch error:', err);
})
} else {
alert("未获取到详细信息");
}
})
.catch(err => {
console.error('Detail fetch error:', err);
alert("加载详细信息失败");
});
}
function closeDetailModal() {
document.getElementById('detailModal').style.display = 'none';
}
window.onclick = function (event) {
const modal = document.getElementById('detailModal');
if (event.target === modal) {
closeDetailModal();
}
};
const PREFIX = "df0b".toLowerCase();
const KEY = CryptoJS.enc.Base64.parse("VlEc5qsEDXWChrWJ0AzMXQ==");
const IV = CryptoJS.enc.Base64.parse("MC8Lpxk9zqyuRPXMdO8rJQ==");
// 加密函数
function a(strData) {
// 生成16字节随机密钥
const randomKey = CryptoJS.lib.WordArray.random(16);
// 加密数据
const encryptedData = encryptData(KEY, strData, randomKey);
const encryptedHex = bytesToHex(encryptedData);
// 编码随机密钥
const encodedKey = bytesToHex(randomKey);
// 计算前缀的第一个字符作为十六进制数的值
const prefixValue = parseInt(PREFIX[0], 16);
// 组合结果
return PREFIX + encryptedHex.substring(0, prefixValue) + encodedKey + encryptedHex.substring(prefixValue);
}
function encryptData(key, data, iv) {
// 使用CBC模式和PKCS7填充
const encrypted = CryptoJS.AES.encrypt(
data,
key,
{
iv: iv,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7
}
);
return encrypted.ciphertext;
}
function bytesToHex(byteArray) {
return byteArray.toString(CryptoJS.enc.Hex).toUpperCase();
}
</script>
</body>
</html>