qq-login.html12.6 KB
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QQ 登录</title>
<style>
/* ============================================================
QQ 登录框 - 1:1 仿制
替换指南：
1. 背景图：修改下方 --bg-image 变量中的 url
2. 头像图：修改下方 --avatar-image 变量中的 url
============================================================ */
:root {
/* ===== 背景图片 URL —— 替换为你自己的背景图 ===== */
--bg-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%221920%22 height=%221080%22%3E%3Cdefs%3E%3ClinearGradient id=%22g%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%25%22 stop-color=%22%23ff9a76%22/%3E%3Cstop offset=%2220%25%22 stop-color=%22%23fec89a%22/%3E%3Cstop offset=%2240%25%22 stop-color=%22%23ffe0b2%22/%3E%3Cstop offset=%2260%25%22 stop-color=%22%23f8e0f0%22/%3E%3Cstop offset=%2280%25%22 stop-color=%22%23d4b8e8%22/%3E%3Cstop offset=%22100%25%22 stop-color=%22%239b8cf0%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width=%221920%22 height=%221080%22 fill=%22url(%23g)%22/%3E%3Ccircle cx=%22200%22 cy=%22300%22 r=%22220%22 fill=%22rgba(255,255,255,0.08)%22/%3E%3Ccircle cx=%22800%22 cy=%22200%22 r=%22280%22 fill=%22rgba(255,255,255,0.06)%22/%3E%3Ccircle cx=%221400%22 cy=%22400%22 r=%22250%22 fill=%22rgba(255,255,255,0.07)%22/%3E%3Ccircle cx=%22600%22 cy=%22600%22 r=%22300%22 fill=%22rgba(255,255,255,0.05)%22/%3E%3Ccircle cx=%221600%22 cy=%22700%22 r=%22200%22 fill=%22rgba(255,255,255,0.06)%22/%3E%3C/svg%3E');
/* ===== 头像图片 URL —— 替换为你自己的头像 ===== */
--avatar-image: url('https://evan.xin/logo.png');
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background-image: var(--bg-image);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
-webkit-font-smoothing: antialiased;
}
/* ===== 登录容器 ===== */
.login-container {
width: 320px;
background: rgba(255, 255, 255, 0.72);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
border-radius: 12px;
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.06),
0 8px 32px rgba(0, 0, 0, 0.10),
0 16px 64px rgba(0, 0, 0, 0.06);
overflow: hidden;
transition: box-shadow 0.3s ease;
}
/* ===== 顶部标题栏 ===== */
.top-bar {
height: 48px;
padding: 0 16px;
display: flex;
align-items: center;
justify-content: space-between;
-webkit-app-region: drag;
user-select: none;
}
.window-controls {
display: flex;
align-items: center;
gap: 8px;
-webkit-app-region: no-drag;
}
.window-controls .dot {
width: 12px;
height: 12px;
border-radius: 50%;
cursor: pointer;
transition: filter 0.2s ease;
}
.window-controls .dot:hover {
filter: brightness(0.85);
}
.dot-red { background: #ff5f57; }
.dot-yellow { background: #febc2e; }
.dot-green { background: #28c840; }
/* 汉堡菜单 */
.hamburger {
width: 20px;
height: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
-webkit-app-region: no-drag;
opacity: 0.6;
transition: opacity 0.2s ease;
}
.hamburger:hover {
opacity: 1;
}
.hamburger span {
display: block;
width: 100%;
height: 2px;
background: #666;
border-radius: 1px;
}
/* ===== 主内容区 ===== */
.content {
display: flex;
flex-direction: column;
align-items: center;
padding: 24px 16px 28px;
}
/* QQ Logo */
.qq-logo {
font-size: 28px;
font-weight: 700;
letter-spacing: 2px;
background: linear-gradient(135deg, #0099ff, #a78bfa);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
margin-bottom: 24px;
user-select: none;
}
/* 头像 */
.avatar-wrapper {
width: 76px;
height: 76px;
border-radius: 50%;
border: 2px solid #fff;
overflow: hidden;
margin-bottom: 24px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
flex-shrink: 0;
background-image: var(--avatar-image);
background-size: cover;
background-position: center;
}
/* 用户名 */
.username-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
cursor: pointer;
user-select: none;
transition: opacity 0.2s ease;
}
.username-row:hover {
opacity: 0.75;
}
.username-text {
font-size: 16px;
font-weight: 700;
color: #333;
}
.username-arrow {
font-size: 12px;
color: #999;
line-height: 1;
transition: transform 0.2s ease;
}
/* 自动登录 */
.auto-login-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 24px;
cursor: pointer;
user-select: none;
}
.auto-login-row input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
.custom-checkbox {
width: 16px;
height: 16px;
border: 1px solid #ccc;
border-radius: 4px;
flex-shrink: 0;
position: relative;
transition: all 0.2s ease;
}
.auto-login-row input:checked + .custom-checkbox {
background: #12b7f5;
border-color: #12b7f5;
}
.auto-login-row input:checked + .custom-checkbox::after {
content: '';
position: absolute;
left: 4px;
top: 1px;
width: 5px;
height: 9px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.auto-login-label {
font-size: 12px;
color: #999;
line-height: 1;
}
/* 登录按钮 */
.login-btn {
width: 288px;
height: 40px;
background: #12b7f5;
color: #fff;
font-size: 15px;
font-weight: 700;
border: none;
border-radius: 8px;
cursor: pointer;
margin-bottom: 32px;
transition: all 0.2s ease;
outline: none;
font-family: inherit;
letter-spacing: 2px;
}
.login-btn:hover {
background: #0ea5d9;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(18, 183, 245, 0.35);
}
.login-btn:active {
background: #0c8ab3;
transform: translateY(1px);
box-shadow: 0 1px 4px rgba(18, 183, 245, 0.25);
}
.login-btn:focus-visible {
box-shadow: 0 0 0 3px rgba(18, 183, 245, 0.3);
}
/* 底部链接 */
.bottom-links {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
user-select: none;
}
.bottom-links a {
color: #0099ff;
text-decoration: none;
cursor: pointer;
transition: all 0.2s ease;
}
.bottom-links a:hover {
text-decoration: underline;
color: #0077cc;
}
.bottom-links a:focus-visible {
outline: 2px solid rgba(0, 153, 255, 0.4);
outline-offset: 2px;
border-radius: 2px;
}
.bottom-links .separator {
color: #ccc;
cursor: default;
}
/* ===== 弹窗 ===== */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.35);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
}
.modal-overlay.active {
opacity: 1;
pointer-events: auto;
}
.modal-dialog {
width: 280px;
background: rgba(255, 255, 255, 0.78);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
border-radius: 12px;
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.08),
0 12px 40px rgba(0, 0, 0, 0.15);
padding: 32px 24px 24px;
position: relative;
text-align: center;
transform: scale(0.9);
transition: transform 0.25s ease;
}
.modal-overlay.active .modal-dialog {
transform: scale(1);
}
.modal-close {
position: absolute;
top: 10px;
right: 12px;
width: 28px;
height: 28px;
border: none;
background: none;
font-size: 18px;
color: #999;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.2s ease;
line-height: 1;
font-family: inherit;
}
.modal-close:hover {
color: #333;
background: rgba(0, 0, 0, 0.06);
}
.modal-qq-text {
font-size: 15px;
color: #666;
margin-bottom: 20px;
line-height: 1.6;
}
.modal-qq-text .qq-number {
font-weight: 700;
color: #12b7f5;
font-size: 16px;
}
.modal-copy-btn {
width: 100%;
height: 38px;
background: #12b7f5;
color: #fff;
font-size: 14px;
font-weight: 600;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
font-family: inherit;
outline: none;
}
.modal-copy-btn:hover {
background: #0ea5d9;
}
.modal-copy-btn:active {
background: #0c8ab3;
transform: scale(0.97);
}
.modal-copy-btn.copied {
background: #34c759;
pointer-events: none;
}
</style>
</head>
<body>
<div class="login-container">
<!-- 顶部标题栏 -->
<div class="top-bar">
<div class="window-controls">
<span class="dot dot-red" title="关闭"></span>
<span class="dot dot-yellow" title="最小化"></span>
<span class="dot dot-green" title="全屏"></span>
</div>
<div class="hamburger" title="菜单">
<span></span>
<span></span>
<span></span>
</div>
</div>
<!-- 主内容 -->
<div class="content">
<div class="qq-logo">QQ</div>
<div class="avatar-wrapper"></div>
<div class="username-row" id="usernameRow">
<span class="username-text">EVAN</span>
<span class="username-arrow" id="arrowIcon">▼</span>
</div>
<label class="auto-login-row">
<input type="checkbox" id="autoLogin">
<span class="custom-checkbox"></span>
<span class="auto-login-label">自动登录</span>
</label>
<button class="login-btn" id="loginBtn">登录</button>
<div class="bottom-links">
<a href="https://mi.cd" target="_blank" rel="noopener noreferrer">账密登录</a>
<span class="separator">|</span>
<a href="https://mi.cd" target="_blank" rel="noopener noreferrer">注册账号</a>
</div>
</div>
</div>
<!-- QQ号弹窗 -->
<div class="modal-overlay" id="modalOverlay">
<div class="modal-dialog">
<button class="modal-close" id="modalClose">×</button>
<p class="modal-qq-text">QQ <span class="qq-number">22686871</span></p>
<button class="modal-copy-btn" id="modalCopyBtn">复制</button>
</div>
</div>
<script>
(function() {
var checkbox = document.getElementById('autoLogin');
var arrowIcon = document.getElementById('arrowIcon');
var usernameRow = document.getElementById('usernameRow');
var loginBtn = document.getElementById('loginBtn');
var expanded = false;
var clicked = false;
// 点击整行切换复选框
checkbox.parentElement.addEventListener('click', function(e) {
if (e.target === checkbox) return;
checkbox.checked = !checkbox.checked;
checkbox.dispatchEvent(new Event('change', { bubbles: true }));
});
// 用户名行点击 - 旋转箭头
usernameRow.addEventListener('click', function() {
expanded = !expanded;
arrowIcon.style.transform = expanded ? 'rotate(180deg)' : 'rotate(0deg)';
});
// 登录按钮 - 登录中跳转
loginBtn.addEventListener('click', function() {
if (clicked || loginBtn.disabled) return;
clicked = true;
loginBtn.textContent = '登录中...';
loginBtn.disabled = true;
loginBtn.style.opacity = '0.7';
loginBtn.style.cursor = 'not-allowed';
setTimeout(function() {
window.open('https://evan.xin', '_blank');
setTimeout(function() {
loginBtn.textContent = '登录';
loginBtn.disabled = false;
loginBtn.style.opacity = '';
loginBtn.style.cursor = '';
clicked = false;
}, 1000);
}, 1200);
});
// === 弹窗逻辑 ===
var modalOverlay = document.getElementById('modalOverlay');
var modalClose = document.getElementById('modalClose');
var modalCopyBtn = document.getElementById('modalCopyBtn');
function closeModal() {
modalOverlay.classList.remove('active');
}
modalClose.addEventListener('click', closeModal);
modalOverlay.addEventListener('click', function(e) {
if (e.target === modalOverlay) closeModal();
});
modalCopyBtn.addEventListener('click', function() {
function onCopied() {
modalCopyBtn.textContent = '已复制';
modalCopyBtn.classList.add('copied');
setTimeout(function() {
closeModal();
// 弹窗关闭动画结束后重置按钮状态
setTimeout(function() {
modalCopyBtn.textContent = '复制';
modalCopyBtn.classList.remove('copied');
}, 300);
}, 900);
}
navigator.clipboard.writeText('22686871').then(onCopied).catch(function() {
var ta = document.createElement('textarea');
ta.value = '22686871';
ta.style.position = 'fixed';
ta.style.opacity = '0';
document.body.appendChild(ta);
ta.select();
document.execCommand('copy');
document.body.removeChild(ta);
onCopied();
});
});
})();
</script>
</body>
</html>