430 lines
16 KiB
HTML
430 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>个性资料卡生成器</title>
|
|
<style>
|
|
:root {
|
|
--primary-color: #1e88e5;
|
|
--secondary-color: #4caf50;
|
|
--background-color: #f5f5f5;
|
|
--card-color: white;
|
|
--border-radius: 10px;
|
|
--shadow: 0 0 10px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--background-color);
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
color: #333;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.sidebar {
|
|
width: 250px;
|
|
background-color: var(--card-color);
|
|
padding: 20px;
|
|
border-radius: var(--border-radius);
|
|
box-shadow: var(--shadow);
|
|
margin-right: 20px;
|
|
margin-bottom: 20px;
|
|
position: sticky;
|
|
top: 20px;
|
|
height: fit-content;
|
|
}
|
|
|
|
.main-content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.container {
|
|
background-color: var(--card-color);
|
|
padding: 25px;
|
|
border-radius: var(--border-radius);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
h1 {
|
|
text-align: center;
|
|
color: var(--primary-color);
|
|
margin-bottom: 20px;
|
|
font-size: 28px;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
label {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
font-weight: 600;
|
|
color: #555;
|
|
}
|
|
|
|
input, select {
|
|
width: 100%;
|
|
padding: 12px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 5px;
|
|
font-size: 16px;
|
|
transition: border 0.3s;
|
|
}
|
|
|
|
input:focus, select:focus {
|
|
border-color: var(--primary-color);
|
|
outline: none;
|
|
}
|
|
|
|
button {
|
|
background-color: var(--primary-color);
|
|
color: white;
|
|
border: none;
|
|
padding: 12px 0;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
width: 100%;
|
|
font-size: 16px;
|
|
transition: background-color 0.3s;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
button:hover {
|
|
background-color: #1565c0;
|
|
}
|
|
|
|
.save-btn {
|
|
background-color: var(--secondary-color);
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.save-btn:hover {
|
|
background-color: #388e3c;
|
|
}
|
|
|
|
.result {
|
|
margin-top: 25px;
|
|
text-align: center;
|
|
}
|
|
|
|
.result img {
|
|
max-width: 100%;
|
|
border-radius: 8px;
|
|
box-shadow: var(--shadow);
|
|
cursor: pointer;
|
|
transition: transform 0.3s;
|
|
}
|
|
|
|
.result img:hover {
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
.modal {
|
|
display: none;
|
|
position: fixed;
|
|
z-index: 1000;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0,0,0,0.8);
|
|
}
|
|
|
|
.modal-content {
|
|
margin: auto;
|
|
display: block;
|
|
max-width: 80%;
|
|
max-height: 80%;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.close {
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 40px;
|
|
color: #f1f1f1;
|
|
font-size: 40px;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
transition: color 0.3s;
|
|
}
|
|
|
|
.close:hover {
|
|
color: #ff4444;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.error-message {
|
|
color: #d32f2f;
|
|
font-size: 14px;
|
|
margin-top: 5px;
|
|
display: none;
|
|
}
|
|
|
|
.contact-info {
|
|
text-align: center;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
background-color: #f9f9f9;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.contact-info a {
|
|
color: var(--primary-color);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.contact-info a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
body {
|
|
flex-direction: column;
|
|
}
|
|
.sidebar {
|
|
width: 100%;
|
|
margin-right: 0;
|
|
position: static;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="sidebar">
|
|
<div class="contact-info">
|
|
<h3>联系支持</h3>
|
|
<p>如有问题或需要什么样的网页代码，请联系：</p>
|
|
<p><a href="mailto:kbek098151282@163.com">kbek098151282@163.com</a></p>
|
|
<p>我们将尽快回复您的需求！</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="main-content">
|
|
<div class="container">
|
|
<h1>个性资料卡生成器</h1>
|
|
|
|
<div class="form-group">
|
|
<label for="apiSelect">选择API接口</label>
|
|
<select id="apiSelect" onchange="updateForm()">
|
|
<option value="1">接口1</option>
|
|
<option value="2">接口2</option>
|
|
<option value="3">接口3</option>
|
|
<option value="4">接口4</option>
|
|
<option value="5">接口5</option>
|
|
<option value="6">接口6</option>
|
|
<option value="7">接口7</option>
|
|
<option value="8">接口8</option>
|
|
<option value="9">接口9</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group" id="uinGroup">
|
|
<label for="uin">QQ号 (uin)</label>
|
|
<input type="text" id="uin" value="536312107">
|
|
<div class="error-message" id="uinError"></div>
|
|
</div>
|
|
|
|
<div class="form-group" id="qidGroup">
|
|
<label for="qid">QID</label>
|
|
<input type="text" id="qid" value="tianyi719">
|
|
<div class="error-message" id="qidError"></div>
|
|
</div>
|
|
|
|
<div class="form-group" id="nameGroup">
|
|
<label for="name">名称</label>
|
|
<input type="text" id="name" value="龙龙">
|
|
<div class="error-message" id="nameError"></div>
|
|
</div>
|
|
|
|
<div class="form-group hidden" id="waGroup">
|
|
<label for="wa">文案第一行 (wa)</label>
|
|
<input type="text" id="wa" value="愿此时平谈">
|
|
<div class="error-message" id="waError"></div>
|
|
</div>
|
|
|
|
<div class="form-group hidden" id="wasGroup">
|
|
<label for="was">文案第二行 (was)</label>
|
|
<input type="text" id="was" value="若彼时灿烂！">
|
|
<div class="error-message" id="wasError"></div>
|
|
</div>
|
|
|
|
<div class="form-group hidden" id="msgGroup">
|
|
<label for="msg">文案 (msg)</label>
|
|
<input type="text" id="msg" value="龙龙加油！">
|
|
<div class="error-message" id="msgError"></div>
|
|
</div>
|
|
|
|
<div class="form-group hidden" id="nickGroup">
|
|
<label for="nick">昵称 (nick)</label>
|
|
<input type="text" id="nick" value="龙龙">
|
|
<div class="error-message" id="nickError"></div>
|
|
</div>
|
|
|
|
<button onclick="generateCard()">生成资料卡</button>
|
|
|
|
<div class="result" id="result" style="display: none;">
|
|
<h3>生成结果</h3>
|
|
<img id="resultImage" src="" alt="个性资料卡">
|
|
<button class="save-btn" onclick="saveImage()">保存图片</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="imageModal" class="modal">
|
|
<span class="close" onclick="closeModal()">×</span>
|
|
<img class="modal-content" id="modalImage">
|
|
</div>
|
|
|
|
<script>
|
|
const apiParams = {
|
|
1: { uin: true, qid: true, name: true, wa: true, was: true },
|
|
2: { uin: true, qid: true, name: true },
|
|
3: { qq: true, nick: true, name: true, msg: true },
|
|
4: { qq: true, qid: true, name: true, msg: true },
|
|
5: { qq: true, qid: true, name: true },
|
|
6: { qq: true, msg: true, name: true },
|
|
7: { qq: true, msg: true, name: true, qid: true },
|
|
8: { qq: true, qid: true, name: true },
|
|
9: { qq: true, name: true }
|
|
};
|
|
|
|
function updateForm() {
|
|
const apiType = document.getElementById('apiSelect').value;
|
|
const params = apiParams[apiType];
|
|
|
|
// 重置所有表单组的显示状态
|
|
['uinGroup', 'qidGroup', 'nameGroup', 'waGroup', 'wasGroup', 'msgGroup', 'nickGroup'].forEach(group => {
|
|
document.getElementById(group).classList.remove('hidden');
|
|
});
|
|
|
|
// 根据API类型隐藏不需要的表单组
|
|
if (!params.uin) document.getElementById('uinGroup').classList.add('hidden');
|
|
if (!params.qid) document.getElementById('qidGroup').classList.add('hidden');
|
|
if (!params.name) document.getElementById('nameGroup').classList.add('hidden');
|
|
if (!params.wa) document.getElementById('waGroup').classList.add('hidden');
|
|
if (!params.was) document.getElementById('wasGroup').classList.add('hidden');
|
|
if (!params.msg) document.getElementById('msgGroup').classList.add('hidden');
|
|
if (!params.nick) document.getElementById('nickGroup').classList.add('hidden');
|
|
}
|
|
|
|
async function generateCard() {
|
|
try {
|
|
const apiType = document.getElementById('apiSelect').value;
|
|
const params = apiParams[apiType];
|
|
let apiUrl = '';
|
|
|
|
// 构建API URL
|
|
switch (apiType) {
|
|
case '1':
|
|
apiUrl = `https://api.suyanw.cn/api/qqcard.php?uin=${encodeURIComponent(document.getElementById('uin').value)}&qid=${encodeURIComponent(document.getElementById('qid').value)}&name=${encodeURIComponent(document.getElementById('name').value)}&wa=${encodeURIComponent(document.getElementById('wa').value)}&was=${encodeURIComponent(document.getElementById('was').value)}`;
|
|
break;
|
|
case '2':
|
|
apiUrl = `https://api.suyanw.cn/api/qqcard_1.php?uin=${encodeURIComponent(document.getElementById('uin').value)}&qid=${encodeURIComponent(document.getElementById('qid').value)}&name=${encodeURIComponent(document.getElementById('name').value)}`;
|
|
break;
|
|
case '3':
|
|
apiUrl = `https://api.suyanw.cn/api/qqcard_2.php?qq=${encodeURIComponent(document.getElementById('uin').value)}&nick=${encodeURIComponent(document.getElementById('nick').value)}&name=${encodeURIComponent(document.getElementById('name').value)}&msg=${encodeURIComponent(document.getElementById('msg').value)}`;
|
|
break;
|
|
case '4':
|
|
apiUrl = `https://api.suyanw.cn/api/qqcard_3.php?qq=${encodeURIComponent(document.getElementById('uin').value)}&qid=${encodeURIComponent(document.getElementById('qid').value)}&name=${encodeURIComponent(document.getElementById('name').value)}&msg=${encodeURIComponent(document.getElementById('msg').value)}`;
|
|
break;
|
|
case '5':
|
|
apiUrl = `https://api.suyanw.cn/api/qqcard_5.php?qq=${encodeURIComponent(document.getElementById('uin').value)}&qid=${encodeURIComponent(document.getElementById('qid').value)}&name=${encodeURIComponent(document.getElementById('name').value)}`;
|
|
break;
|
|
case '6':
|
|
apiUrl = `https://api.suyanw.cn/api/qqcard_6.php?qq=${encodeURIComponent(document.getElementById('uin').value)}&msg=${encodeURIComponent(document.getElementById('msg').value)}&name=${encodeURIComponent(document.getElementById('name').value)}`;
|
|
break;
|
|
case '7':
|
|
apiUrl = `https://api.suyanw.cn/api/qqcard_7.php?qq=${encodeURIComponent(document.getElementById('uin').value)}&msg=${encodeURIComponent(document.getElementById('msg').value)}&name=${encodeURIComponent(document.getElementById('name').value)}&qid=${encodeURIComponent(document.getElementById('qid').value)}`;
|
|
break;
|
|
case '8':
|
|
apiUrl = `https://api.suyanw.cn/api/qqcard_8.php?qq=${encodeURIComponent(document.getElementById('uin').value)}&qid=${encodeURIComponent(document.getElementById('qid').value)}&name=${encodeURIComponent(document.getElementById('name').value)}`;
|
|
break;
|
|
case '9':
|
|
apiUrl = `https://api.suyanw.cn/api/qqcard_9.php?qq=${encodeURIComponent(document.getElementById('uin').value)}&name=${encodeURIComponent(document.getElementById('name').value)}`;
|
|
break;
|
|
}
|
|
|
|
// 显示加载状态
|
|
document.getElementById('result').style.display = 'block';
|
|
document.getElementById('resultImage').src = apiUrl;
|
|
|
|
// 清除之前的错误信息
|
|
document.querySelectorAll('.error-message').forEach(el => el.style.display = 'none');
|
|
|
|
// 检查图片是否加载成功
|
|
const img = new Image();
|
|
img.onload = () => {
|
|
document.getElementById('resultImage').src = apiUrl;
|
|
};
|
|
img.onerror = () => {
|
|
showError('图片加载失败，请检查网络连接或稍后重试');
|
|
};
|
|
img.src = apiUrl;
|
|
|
|
} catch (error) {
|
|
showError('生成资料卡时出错: ' + error.message);
|
|
}
|
|
}
|
|
|
|
function saveImage() {
|
|
try {
|
|
const imageUrl = document.getElementById('resultImage').src;
|
|
const link = document.createElement('a');
|
|
link.href = imageUrl;
|
|
link.download = '个性资料卡.png';
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
} catch (error) {
|
|
showError('保存图片时出错: ' + error.message);
|
|
}
|
|
}
|
|
|
|
function openModal() {
|
|
document.getElementById('imageModal').style.display = 'block';
|
|
document.getElementById('modalImage').src = document.getElementById('resultImage').src;
|
|
}
|
|
|
|
function closeModal() {
|
|
document.getElementById('imageModal').style.display = 'none';
|
|
}
|
|
|
|
function showError(message) {
|
|
const errorMsg = document.createElement('div');
|
|
errorMsg.className = 'error-message';
|
|
errorMsg.textContent = message;
|
|
document.querySelector('.result').appendChild(errorMsg);
|
|
errorMsg.style.display = 'block';
|
|
}
|
|
|
|
// 初始化表单
|
|
updateForm();
|
|
|
|
// 添加事件监听
|
|
document.getElementById('resultImage').addEventListener('click', openModal);
|
|
document.querySelectorAll('input').forEach(input => {
|
|
input.addEventListener('input', () => {
|
|
// 清除错误信息
|
|
const errorEl = document.querySelector(`#${input.id}Error`);
|
|
if (errorEl) errorEl.style.display = 'none';
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |