1<!DOCTYPE html> 2<html lang="zh-CN"> 3<head> 4<meta charset="utf-8"/> 5<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 6<meta name="description" content="微信扫码登录小智 WebSocket 调试工具"/> 7<title>登录 · 小智调试工具</title> 8 <link rel="stylesheet" 9 href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/css/bootstrap.min.css" 10 crossorigin="anonymous" /> 11 12 <link rel="stylesheet" 13 href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.11.3/font/bootstrap-icons.min.css" 14 crossorigin="anonymous" /> 15<style> 16/* ââ Reset & Base âââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 17*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } 18:root { 19 --bg: #0a0f1e; 20 --bg2: #0d1629; 21 --card: #111827; 22 --card2: #0f1e35; 23 --border: #1e3350; 24 --border2: #243d5c; 25 --blue: #4a9eff; 26 --blue-dim: #1e4a7a; 27 --gold: #f39c12; 28 --gold-dim: #7a4d06; 29 --green: #4caf50; 30 --red: #e74c3c; 31 --text: #e2e8f0; 32 --text2: #94a3b8; 33 --text3: #7e96ab; 34} 35/* æ·±è²ä¸»é¢ä¸è¦ç Bootstrap text-mutedï¼æé«å¯è¯»æ§ */ 36.text-muted { color: #8eaabb !important; } 37html { scroll-behavior: smooth; } 38body { 39 background: var(--bg); 40 color: var(--text); 41 font-family: -apple-system, 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', sans-serif; 42 line-height: 1.6; 43 overflow-x: hidden; 44} 45a { color: var(--blue); text-decoration: none; } 46a:hover { color: #7ab8ff; } 47 48/* ââ Animations ââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 49@keyframes fadeUp { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:translateY(0); } } 50@keyframes fadeIn { from { opacity:0; } to { opacity:1; } } 51.animate-up { animation: fadeUp .7s ease both; } 52.animate-in { animation: fadeIn .6s ease both; } 53.delay-1 { animation-delay:.15s; } 54.delay-2 { animation-delay:.30s; } 55.delay-3 { animation-delay:.45s; } 56.delay-4 { animation-delay:.60s; } 57.delay-5 { animation-delay:.75s; } 58.delay-6 { animation-delay:.90s; } 59 60/* ââ Navbar ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 61.nav-bar { 62 position: fixed; top: 0; left: 0; right: 0; z-index: 1000; 63 background: rgba(10,15,30,.9); 64 backdrop-filter: blur(14px); 65 border-bottom: 1px solid var(--border); 66 padding: 0 24px; 67 height: 60px; 68 display: flex; align-items: center; justify-content: space-between; 69} 70.nav-logo { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; color: var(--text); } 71.nav-logo .ico { color: var(--blue); font-size: 22px; } 72.nav-links { display: flex; gap: 6px; list-style: none; } 73.nav-links a { color: var(--text2); padding: 6px 14px; border-radius: 6px; font-size: 14px; transition: color .2s, background .2s; } 74.nav-links a:hover, .nav-links a.active { color: var(--text); background: rgba(74,158,255,.12); } 75.nav-cta { 76 background: var(--blue); color: #fff !important; 77 padding: 7px 20px !important; border-radius: 20px !important; 78 font-weight: 600 !important; font-size: 13px !important; 79 transition: background .2s, transform .15s !important; 80} 81.nav-cta:hover { background: #6ab3ff !important; transform: translateY(-1px); } 82 83/* ââ Footer ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 84footer { 85 background: var(--bg2); 86 border-top: 1px solid var(--border); 87 padding: 40px 24px 24px; 88} 89.footer-inner { max-width: 1060px; margin: 0 auto; } 90.footer-top { 91 display: flex; justify-content: space-between; flex-wrap: wrap; 92 gap: 32px; margin-bottom: 36px; 93} 94.footer-brand { max-width: 280px; } 95.footer-brand .logo { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } 96.footer-brand .logo .ico { color: var(--blue); } 97.footer-brand p { font-size: 13px; color: var(--text3); line-height: 1.6; } 98.footer-links h4 { font-size: 13px; font-weight: 700; color: var(--text2); margin-bottom: 14px; letter-spacing: .5px; text-transform: uppercase; } 99.footer-links ul { list-style: none; } 100.footer-links li { margin-bottom: 9px; } 101.footer-links a { font-size: 13px; color: var(--text3); transition: color .2s; } 102.footer-links a:hover { color: var(--blue); } 103.footer-bottom { 104 border-top: 1px solid var(--border); padding-top: 20px; 105 display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; 106 font-size: 12px; color: var(--text3); 107} 108.footer-bottom a { color: var(--text3); } 109.footer-bottom a:hover { color: var(--blue); } 110 111/* ââ æ±å ¡èåæé® ââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 112.nav-hamburger { 113 display: none; 114 background: none; 115 border: 1px solid var(--border); 116 border-radius: 6px; 117 color: var(--text2); 118 padding: 5px 9px; 119 cursor: pointer; 120 font-size: 18px; 121 line-height: 1; 122 transition: color .2s, border-color .2s; 123} 124.nav-hamburger:hover { color: var(--blue); border-color: var(--blue-dim); } 125 126/* ââ 移å¨ç«¯ä¸æèå ââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 127.nav-mobile-menu { 128 display: none; 129 position: fixed; 130 top: 60px; left: 0; right: 0; 131 background: rgba(10,15,30,.97); 132 backdrop-filter: blur(16px); 133 border-bottom: 1px solid var(--border); 134 padding: 6px 20px 20px; 135 z-index: 998; 136 flex-direction: column; 137} 138.nav-mobile-menu.open { display: flex; } 139.nav-mobile-menu a { 140 color: var(--text2); 141 padding: 13px 4px; 142 border-bottom: 1px solid rgba(30,51,80,.45); 143 font-size: 15px; 144 transition: color .15s; 145 display: block; 146 text-decoration: none; 147} 148.nav-mobile-menu a:last-child { border: none; } 149.nav-mobile-menu a.active, 150.nav-mobile-menu a:hover { color: var(--blue); } 151.nav-mobile-menu .mob-sep { height: 1px; background: var(--border); margin: 6px 0; } 152.nav-mobile-menu .mob-auth { 153 display: flex; gap: 12px; align-items: center; 154 padding: 12px 4px 4px; border-top: 1px solid var(--border); 155 margin-top: 4px; 156} 157.nav-mobile-menu .mob-auth span { font-size: 13px; color: var(--text3); } 158.nav-mobile-menu .mob-auth a { padding: 0; border: none; font-size: 13px; } 159 160/* ââ Responsive ââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 161@media (max-width: 768px) { 162 .nav-links { display: none !important; } 163 .nav-hamburger { display: block; } 164 .footer-top { flex-direction: column; } 165} 166</style> 167 168<style> 169.login-wrap { 170 min-height: calc(100vh - 180px); 171 display: flex; align-items: center; justify-content: center; 172 padding: 40px 24px; 173} 174.login-card { 175 width: 380px; 176 background: var(--card); 177 border: 1px solid var(--border); 178 border-radius: 14px; 179 padding: 36px 36px 28px; 180 text-align: center; 181} 182.login-card h4 { color: var(--blue); font-size: 18px; font-weight: 700; margin-bottom: 6px; } 183.login-card .sub { font-size: 13px; color: var(--text3); margin-bottom: 24px; } 184 185/* WeChat QR å®¹å¨ â 微信 JS SDK ä¼å¾éæ³¨å ¥ iframe */ 186#wx_login_container { 187 width: 300px; 188 height: 400px; 189 margin: 0 auto 16px; 190 border-radius: 8px; 191 overflow: hidden; 192 background: #fff; /* ç½åºè®©äºç»´ç æ´æ¸ æ° */ 193 display: flex; align-items: center; justify-content: center; 194} 195/* SDK æ³¨å ¥ç iframe 强å¶ææ»¡å®¹å¨ */ 196#wx_login_container iframe { 197 width: 300px !important; 198 height: 400px !important; 199 border: none !important; 200} 201 202.qr-hint { font-size: 12px; color: var(--text3); margin-bottom: 16px; } 203 204.btn-demo { 205 display: block; width: 100%; padding: 13px; 206 background: var(--blue); color: #fff; border: none; 207 border-radius: 10px; font-size: 15px; font-weight: 600; 208 cursor: pointer; text-decoration: none; 209 transition: background .2s, transform .15s; 210} 211.btn-demo:hover { background: #3d8fe8; transform: translateY(-1px); color: #fff; } 212.dev-badge { 213 background: rgba(74,158,255,.1); border: 1px solid rgba(74,158,255,.2); 214 border-radius: 6px; padding: 6px 12px; 215 font-size: 11px; color: var(--text3); margin-bottom: 20px; 216} 217</style> 218 219</head> 220<body> 221 222<nav class="nav-bar"> 223 <a href="/" class="nav-logo" style="text-decoration:none;"> 224 <i class="bi bi-broadcast ico"></i>
225 <span>å°æºè°è¯å·¥å ·</span> 226 </a> 227 <ul class="nav-links"> 228 <li><a href="/" class="">é¦é¡µ</a></li> 229 <li><a href="/Xiaozhi" class="">è°è¯å·¥å ·</a></li> 230 <li><a href="/Vip" class="">VIP ç¹æ</a></li> 231 <li><a href="/Docs" class="">ææ¡£</a></li> 232 </ul> 233 234 <div style="display:flex; align-items:center; gap:10px;"> 235 <a href="/Login" class="d-none d-md-inline" 236 style="background:none;border:1px solid var(--green);border-radius:12px;color:var(--green);font-size:11px;padding:4px 12px;text-decoration:none;display:inline-flex;align-items:center;"> 237 <i class="bi bi-wechat me-1"></i>微信ç»å½ 238 </a> 239 <button class="nav-hamburger" id="nav-hamburger" aria-label="èå"> 240 <i class="bi bi-list"></i> 241 </button> 242 </div> 243</nav> 244 245<!-- ââ 移å¨ç«¯ä¸æèå ââââââââââââââââââââââââââââââââââââââââââââââââ --> 246<div class="nav-mobile-menu" id="nav-mobile-menu"> 247 <a href="/" class="">é¦é¡µ</a> 248 <a href="/Xiaozhi" class="">è°è¯å·¥å ·</a> 249 <a href="/Vip" class="">VIP ç¹æ</a> 250 <a href="/Docs" class="">ææ¡£</a> 251 <div class="mob-auth"> 252 <a href="/Login" style="color:var(--green);"><i class="bi bi-wechat me-1"></i>微信ç»å½</a> 253 </div> 254</div> 255 256 257 258<div class="login-wrap"> 259 <div class="login-card animate-up"> 260 <h4><i class="bi bi-broadcast me-2"></i>å°æºè°è¯å·¥å ·</h4> 261 <p class="sub">ç»å½åå¯ä½¿ç¨è°è¯å·¥å ·å个人设å¤ç®¡ç</p> 262 263 <div id="wx_login_container"></div> 264 <p class="qr-hint"><i class="bi bi-wechat me-1" style="color:#07c160;"></i>使ç¨å¾®ä¿¡ App æ«ç ææç»å½</p> 265 266 </div> 267</div> 268 269 270 271<footer> 272 <div class="footer-inner"> 273 <div class="footer-top"> 274 <div class="footer-brand"> 275 <div class="logo"> 276 <i class="bi bi-broadcast ico"></i> 277 å°æº WebSocket è°è¯å·¥å · 278 </div> 279 <p>ä¸ä¸ºå°æº IoT 设å¤è®¾è®¡çä¸ä¸çº§ WebSocket è°è¯å¹³å°ï¼å¸®å©å¼åè å¿«éå®ä½é讯åè®®é®é¢ï¼æååºä»¶è°è¯æçã</p> 280 </div> 281 <div class="footer-links"> 282 <h4>产å</h4> 283 <ul> 284 <li><a href="/Xiaozhi">è°è¯å·¥å ·</a></li> 285 <li><a href="/Vip">VIP ç¹æ</a></li> 286 <li><a href="/#features">åè½ä»ç»</a></li> 287 <li><a href="/#protocol">åè®®æ¯æ</a></li> 288 </ul> 289 </div> 290 <div class="footer-links"> 291 <h4>å¿«éä¸æ</h4> 292 <ul> 293 <li><a href="/#howto">ä¸æ¥å ¥é¨</a></li> 294 <li><a href="/Login">è´¦æ·ç»å½</a></li> 295 <li><a href="/Vip">è´ä¹° VIP</a></li> 296 <li><a href="/Docs">使ç¨ææ¡£</a></li> 297 </ul> 298 </div> 299 <div class="footer-links"> 300 <h4>ææ¯æ </h4> 301 <ul> 302 <li><a href="#" style="cursor:default;">ASP.NET Core · .NET 10</a></li> 303 <li><a href="#" style="cursor:default;">SignalR · WebSocket</a></li> 304 <li><a href="#" style="cursor:default;">Opus · Edge TTS</a></li> 305 <li><a href="#" style="cursor:default;">EF Core · MySQL</a></li> 306 </ul> 307 </div> 308 </div> 309 <div class="footer-bottom"> 310 <span>© 2026 å°æº WebSocket è°è¯å·¥å · · çæææ · <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">éICPå¤19003267å·-3</a></span> 311 <div class="d-flex align-items-center gap-3 flex-wrap"> 312 <a href="/Xiaozhi">è°è¯å·¥å ·</a> 313 <a href="/Vip">VIPç¹æ</a> 314 </div> 315 </div> 316 </div> 317</footer> 318 319
319<script src="https://cdn.staticfile.net/twitter-bootstrap/5.3.3/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
319 320
320<script> 321 (function () { 322 var btn = document.getElementById('nav-hamburger'); 323 var menu = document.getElementById('nav-mobile-menu'); 324 if (!btn || !menu) return; 325 326 btn.addEventListener('click', function (e) { 327 e.stopPropagation(); 328 var open = menu.classList.toggle('open'); 329 btn.setAttribute('aria-expanded', open); 330 btn.querySelector('i').className = open ? 'bi bi-x-lg' : 'bi bi-list'; 331 }); 332 333 // ç¹å»èåå¤å ³é 334 document.addEventListener('click', function (e) { 335 if (!menu.contains(e.target) && e.target !== btn && !btn.contains(e.target)) { 336 menu.classList.remove('open'); 337 btn.setAttribute('aria-expanded', false); 338 btn.querySelector('i').className = 'bi bi-list'; 339 } 340 }); 341 342 // ç¹å»èåå é¾æ¥åå ³é 343 menu.querySelectorAll('a').forEach(function (a) { 344 a.addEventListener('click', function () { 345 menu.classList.remove('open'); 346 btn.querySelector('i').className = 'bi bi-list'; 347 }); 348 }); 349 })(); 350 </script>
350 351 352
352<script src="/js/wxLogin.js"></script>
352 353
353<script> 354 new WxLogin({ 355 id: "wx_login_container", 356 appid: "wxc6fb0e4d0e39c4f2", 357 scope: "snsapi_login", 358 redirect_uri: "https%3A%2F%2Fqa360.net%2Fapi%2Fwx%2Fcallback", 359 state: "xzdbg_a0a4ef3e", 360 self_redirect: false, 361 style: "black" 362 }); 363 </script>
363 364 365</body> 366</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.