|
1 | 1 | 欢迎加入 New API 开源社区!在这里,你可以与其他开发者交流经验,分享想法。 |
2 | 2 |
|
3 | | -## 🤝 加入我们的QQ交流群 |
4 | | - |
5 | | -我们提供两种方式加入QQ群: |
6 | | - |
7 | | -### 方式一:扫描二维码 |
8 | | - |
9 | | - |
10 | | - |
11 | | -### 方式二:点击链接 |
12 | | - |
13 | | -[点击这里直接加入QQ群](https://qm.qq.com/q/Y79glR8raU) |
14 | | - |
15 | 3 | ## 📜 群规则 |
16 | 4 |
|
17 | 5 | 为了维护良好的社区氛围,请遵守以下规则: |
|
27 | 15 |
|
28 | 16 | !!! tip "温馨提示" |
29 | 17 | 如果您有任何功能建议或bug反馈,建议直接在GitHub上提交issue,这样可以更好地追踪和解决问题。 |
| 18 | + |
| 19 | +## 🤝 加入我们的QQ交流群 |
| 20 | + |
| 21 | +!!! info "加入前请完成问卷" |
| 22 | + 请认真阅读上述群规则后,完成以下问卷验证。只有全部答对才能显示QQ群信息。 |
| 23 | + |
| 24 | +<div id="quizContainer" style="margin: 20px 0;"> |
| 25 | + <div style="margin-bottom: 20px; padding: 15px; background: var(--md-code-bg-color); border-radius: 4px;"> |
| 26 | + <p style="font-weight: 600; margin-bottom: 10px;">1. New API 是什么?</p> |
| 27 | + <label style="display: block; margin: 8px 0; cursor: pointer;"> |
| 28 | + <input type="radio" name="q1" value="a" style="margin-right: 8px;"> |
| 29 | + <span>一个商业API销售平台</span> |
| 30 | + </label> |
| 31 | + <label style="display: block; margin: 8px 0; cursor: pointer;"> |
| 32 | + <input type="radio" name="q1" value="b" style="margin-right: 8px;"> |
| 33 | + <span>开源的 AI 接口管理与分发系统</span> |
| 34 | + </label> |
| 35 | + <label style="display: block; margin: 8px 0; cursor: pointer;"> |
| 36 | + <input type="radio" name="q1" value="c" style="margin-right: 8px;"> |
| 37 | + <span>一个付费软件</span> |
| 38 | + </label> |
| 39 | + <label style="display: block; margin: 8px 0; cursor: pointer;"> |
| 40 | + <input type="radio" name="q1" value="d" style="margin-right: 8px;"> |
| 41 | + <span>一个公益API站点</span> |
| 42 | + </label> |
| 43 | + </div> |
| 44 | + |
| 45 | + <div style="margin-bottom: 20px; padding: 15px; background: var(--md-code-bg-color); border-radius: 4px;"> |
| 46 | + <p style="font-weight: 600; margin-bottom: 10px;">2. 群里可以发布账号求购信息吗?</p> |
| 47 | + <label style="display: block; margin: 8px 0; cursor: pointer;"> |
| 48 | + <input type="radio" name="q2" value="true" style="margin-right: 8px;"> |
| 49 | + <span>可以</span> |
| 50 | + </label> |
| 51 | + <label style="display: block; margin: 8px 0; cursor: pointer;"> |
| 52 | + <input type="radio" name="q2" value="false" style="margin-right: 8px;"> |
| 53 | + <span>不可以</span> |
| 54 | + </label> |
| 55 | + </div> |
| 56 | + |
| 57 | + <div style="margin-bottom: 20px; padding: 15px; background: var(--md-code-bg-color); border-radius: 4px;"> |
| 58 | + <p style="font-weight: 600; margin-bottom: 10px;">3. New API 是否存在收费版本?</p> |
| 59 | + <label style="display: block; margin: 8px 0; cursor: pointer;"> |
| 60 | + <input type="radio" name="q3" value="true" style="margin-right: 8px;"> |
| 61 | + <span>存在收费版本</span> |
| 62 | + </label> |
| 63 | + <label style="display: block; margin: 8px 0; cursor: pointer;"> |
| 64 | + <input type="radio" name="q3" value="false" style="margin-right: 8px;"> |
| 65 | + <span>不存在收费版本,完全免费开源</span> |
| 66 | + </label> |
| 67 | + </div> |
| 68 | + |
| 69 | + <div style="margin-bottom: 20px; padding: 15px; background: var(--md-code-bg-color); border-radius: 4px;"> |
| 70 | + <p style="font-weight: 600; margin-bottom: 10px;">4. 群主和管理员是否有义务为我提供技术支持?</p> |
| 71 | + <label style="display: block; margin: 8px 0; cursor: pointer;"> |
| 72 | + <input type="radio" name="q4" value="true" style="margin-right: 8px;"> |
| 73 | + <span>有义务提供技术支持</span> |
| 74 | + </label> |
| 75 | + <label style="display: block; margin: 8px 0; cursor: pointer;"> |
| 76 | + <input type="radio" name="q4" value="false" style="margin-right: 8px;"> |
| 77 | + <span>没有义务提供技术支持,应提交 issue</span> |
| 78 | + </label> |
| 79 | + </div> |
| 80 | + |
| 81 | + <div style="margin-bottom: 20px; padding: 15px; background: var(--md-code-bg-color); border-radius: 4px;"> |
| 82 | + <p style="font-weight: 600; margin-bottom: 10px;">5. 群内可以购买管理员出售的 API 产品吗?</p> |
| 83 | + <label style="display: block; margin: 8px 0; cursor: pointer;"> |
| 84 | + <input type="radio" name="q5" value="true" style="margin-right: 8px;"> |
| 85 | + <span>可以购买</span> |
| 86 | + </label> |
| 87 | + <label style="display: block; margin: 8px 0; cursor: pointer;"> |
| 88 | + <input type="radio" name="q5" value="false" style="margin-right: 8px;"> |
| 89 | + <span>不可以,本群不出售任何 API 产品</span> |
| 90 | + </label> |
| 91 | + </div> |
| 92 | + |
| 93 | + <div id="quizError" style="display: none; padding: 12px; background: #ffebee; color: #c62828; border-radius: 4px; margin-bottom: 15px; border-left: 4px solid #c62828;"> |
| 94 | + <strong>⚠️ 回答错误!</strong><br> |
| 95 | + <span id="errorMessage">请认真阅读群规则后重新作答。</span> |
| 96 | + </div> |
| 97 | + |
| 98 | + <button id="submitQuiz" style="width: 100%; padding: 12px 20px; background: #1976d2; color: white; border: none; border-radius: 4px; font-size: 15px; font-weight: 500; cursor: pointer; transition: background 0.3s;"> |
| 99 | + 提交答案 |
| 100 | + </button> |
| 101 | +</div> |
| 102 | + |
| 103 | +<div id="qqGroupInfo" style="display: none; opacity: 0; transition: opacity 0.3s ease-in; margin-top: 20px;"> |
| 104 | + <h3>方式一:扫描二维码</h3> |
| 105 | + <p><img src="/assets/qq_3.jpg" alt="QQ群二维码" style="max-width: 300px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);"></p> |
| 106 | + <h3>方式二:点击链接</h3> |
| 107 | + <p><a href="https://qm.qq.com/q/Y79glR8raU" target="_blank" style="display: inline-block; padding: 10px 20px; background: #1976d2; color: white; text-decoration: none; border-radius: 4px; font-weight: 500;">点击这里直接加入QQ群</a></p> |
| 108 | +</div> |
| 109 | + |
| 110 | +<script> |
| 111 | +document.addEventListener('DOMContentLoaded', function() { |
| 112 | + const submitBtn = document.getElementById('submitQuiz'); |
| 113 | + const qqGroupInfo = document.getElementById('qqGroupInfo'); |
| 114 | + const quizError = document.getElementById('quizError'); |
| 115 | + const errorMessage = document.getElementById('errorMessage'); |
| 116 | + const quizContainer = document.getElementById('quizContainer'); |
| 117 | + |
| 118 | + // 正确答案 |
| 119 | + const correctAnswers = { |
| 120 | + q1: 'b', // New API 是开源的 AI 接口管理与分发系统 |
| 121 | + q2: 'false', // 不可以发布求购信息 |
| 122 | + q3: 'false', // 不存在收费版本 |
| 123 | + q4: 'false', // 没有义务提供技术支持 |
| 124 | + q5: 'false' // 不可以购买 API 产品 |
| 125 | + }; |
| 126 | + |
| 127 | + // 错误提示信息 |
| 128 | + const errorMessages = { |
| 129 | + q1: '请再次阅读项目介绍,New API 是一个开源的 AI 接口管理与分发系统。', |
| 130 | + q2: '根据群规则第2条:群聊禁止发布任何账号出售、求购相关信息。', |
| 131 | + q3: '根据群规则第4条:New API 不存在收费版本,完全免费开源。', |
| 132 | + q4: '根据群规则第1条:本群管理和群主没有任何义务为您提供任何技术支持,如有问题请提交 issue。', |
| 133 | + q5: '根据群规则第3条:本群不出售任何 API 产品,请勿听信购买任何人的 API 产品(包括管理员的)。' |
| 134 | + }; |
| 135 | + |
| 136 | + if (submitBtn) { |
| 137 | + submitBtn.addEventListener('click', function() { |
| 138 | + // 隐藏之前的错误信息 |
| 139 | + quizError.style.display = 'none'; |
| 140 | + |
| 141 | + // 检查是否所有题目都已作答 |
| 142 | + let allAnswered = true; |
| 143 | + let wrongAnswers = []; |
| 144 | + |
| 145 | + for (let question in correctAnswers) { |
| 146 | + const selected = document.querySelector(`input[name="${question}"]:checked`); |
| 147 | + if (!selected) { |
| 148 | + allAnswered = false; |
| 149 | + break; |
| 150 | + } |
| 151 | + |
| 152 | + // 检查答案是否正确 |
| 153 | + if (selected.value !== correctAnswers[question]) { |
| 154 | + wrongAnswers.push(question); |
| 155 | + } |
| 156 | + } |
| 157 | + |
| 158 | + if (!allAnswered) { |
| 159 | + errorMessage.innerHTML = '请回答所有问题后再提交。'; |
| 160 | + quizError.style.display = 'block'; |
| 161 | + quizError.scrollIntoView({ behavior: 'smooth', block: 'center' }); |
| 162 | + return; |
| 163 | + } |
| 164 | + |
| 165 | + if (wrongAnswers.length > 0) { |
| 166 | + // 显示第一个错误的详细信息 |
| 167 | + errorMessage.innerHTML = errorMessages[wrongAnswers[0]]; |
| 168 | + quizError.style.display = 'block'; |
| 169 | + quizError.scrollIntoView({ behavior: 'smooth', block: 'center' }); |
| 170 | + |
| 171 | + // 将按钮变红并添加摇晃动画 |
| 172 | + submitBtn.style.background = '#c62828'; |
| 173 | + submitBtn.style.animation = 'shake 0.5s'; |
| 174 | + setTimeout(() => { |
| 175 | + submitBtn.style.background = '#1976d2'; |
| 176 | + submitBtn.style.animation = ''; |
| 177 | + }, 1000); |
| 178 | + } else { |
| 179 | + // 全部答对,显示 QQ 群信息 |
| 180 | + quizError.style.display = 'none'; |
| 181 | + quizContainer.style.display = 'none'; |
| 182 | + qqGroupInfo.style.display = 'block'; |
| 183 | + setTimeout(() => { |
| 184 | + qqGroupInfo.style.opacity = '1'; |
| 185 | + }, 10); |
| 186 | + |
| 187 | + // 显示成功消息 |
| 188 | + const successMsg = document.createElement('div'); |
| 189 | + successMsg.style.cssText = 'padding: 15px; background: #e8f5e9; color: #2e7d32; border-radius: 4px; margin-bottom: 20px; border-left: 4px solid #4caf50;'; |
| 190 | + successMsg.innerHTML = '<strong>✅ 恭喜通过验证!</strong><br>感谢您认真阅读群规则,欢迎加入我们的社区!'; |
| 191 | + qqGroupInfo.parentElement.insertBefore(successMsg, qqGroupInfo); |
| 192 | + |
| 193 | + successMsg.scrollIntoView({ behavior: 'smooth', block: 'center' }); |
| 194 | + } |
| 195 | + }); |
| 196 | + |
| 197 | + // 按钮悬停效果 |
| 198 | + submitBtn.addEventListener('mouseenter', function() { |
| 199 | + if (this.style.background !== 'rgb(198, 40, 40)') { |
| 200 | + this.style.background = '#1565c0'; |
| 201 | + } |
| 202 | + }); |
| 203 | + |
| 204 | + submitBtn.addEventListener('mouseleave', function() { |
| 205 | + if (this.style.background !== 'rgb(198, 40, 40)') { |
| 206 | + this.style.background = '#1976d2'; |
| 207 | + } |
| 208 | + }); |
| 209 | + } |
| 210 | +}); |
| 211 | +</script> |
| 212 | + |
| 213 | +<style> |
| 214 | +@keyframes shake { |
| 215 | + 0%, 100% { transform: translateX(0); } |
| 216 | + 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } |
| 217 | + 20%, 40%, 60%, 80% { transform: translateX(5px); } |
| 218 | +} |
| 219 | +</style> |
0 commit comments