From 535a2b82c25e3e5202d1c62fffe20dde33424e7e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=85=95=E6=85=95?= <sm520k@163.com>
Date: Fri, 18 Apr 2025 00:35:35 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E6=96=87=E4=BB=B6=E8=87=B3?=
 =?UTF-8?q?=20/?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 QQ个性资料卡.html | 430 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 430 insertions(+)
 create mode 100644 QQ个性资料卡.html
diff --git a/QQ个性资料卡.html b/QQ个性资料卡.html
new file mode 100644
index 0000000..beade45
--- /dev/null
+++ b/QQ个性资料卡.html
@@ -0,0 +1,430 @@
+<!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()">&times;</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>
\ No newline at end of file
