苹果一般什么时候会发布新机

moog2026-07-10

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>暗夜模式 · 论坛风格</title>
<style>
/ ===== CSS 变量：亮色主题（默认） ===== /
:root {
--bg-body: #f6f8fa;
--bg-card: #ffffff;
--bg-header: #ffffff;
--bg-input: #f0f2f5;
--bg-hover: #f0f2f5;
--text-primary: #1f2328;
--text-secondary: #4b5563;
--text-muted: #8b949e;
--text-link: #2563eb;
--border-color: #d0d7de;
--shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
--radius: 12px;
--transition: 0.3s ease;
}
/ ===== CSS 变量：暗夜主题 ===== /
[data-theme="dark"] {
--bg-body: #0d1117;
--bg-card: #161b22;
--bg-header: #161b22;
--bg-input: #1c2333;
--bg-hover: #1c2333;
--text-primary: #e6edf3;
--text-secondary: #b0b8c4;
--text-muted: #6e7681;
--text-link: #58a6ff;
--border-color: #30363d;
--shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
/ ===== 全局重置 & 基础 ===== /
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
background: var(--bg-body);
color: var(--text-primary);
transition: background var(--transition), color var(--transition);
min-height: 100vh;
padding: 24px;
display: flex;
justify-content: center;
align-items: flex-start;
}
/ ===== 容器 ===== /
.container {
max-width: 820px;
width: 100%;
position: relative;
}
/ ===== 论坛头部 ===== /
.forum-header {
background: var(--bg-header);
border: 1px solid var(--border-color);
border-radius: var(--radius);
padding: 20px 24px;
margin-bottom: 20px;
box-shadow: var(--shadow);
transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
}
.forum-header h1 {
font-size: 20px;
font-weight: 700;
letter-spacing: -0.3px;
color: var(--text-primary);
transition: color var(--transition);
}
.forum-header h1 span {
color: var(--text-link);
}
.forum-header .subtitle {
font-size: 14px;
color: var(--text-secondary);
transition: color var(--transition);
}
/ ===== ★★★ 四方格切换按钮 ★★★ ===== /
.theme-toggle-wrapper {
flex-shrink: 0;
/ 四方格：宽高相等，带圆角，有边框和背景 /
width: 48px;
height: 48px;
border-radius: var(--radius);
background: var(--bg-card);
border: 1px solid var(--border-color);
box-shadow: var(--shadow);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background var(--transition), border-color var(--transition),
box-shadow var(--transition), transform 0.2s ease;
user-select: none;
position: relative;
}
.theme-toggle-wrapper:hover {
transform: scale(1.04);
border-color: var(--text-link);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.theme-toggle-wrapper:active {
transform: scale(0.94);
}
/ 图标 /
.theme-toggle-wrapper .icon {
font-size: 22px;
line-height: 1;
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
pointer-events: none;
}
/ 暗夜模式下图标旋转 /
[data-theme="dark"] .theme-toggle-wrapper .icon {
transform: rotate(360deg);
}
/ 小提示 tooltip /
.theme-toggle-wrapper .tooltip {
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) scale(0.9);
background: var(--bg-card);
color: var(--text-primary);
border: 1px solid var(--border-color);
padding: 4px 12px;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease, background var(--transition), color var(--transition), border-color var(--transition);
box-shadow: var(--shadow);
}
.theme-toggle-wrapper:hover .tooltip {
opacity: 1;
transform: translateX(-50%) scale(1);
}
/ ===== 帖子列表 ===== /
.topic-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.topic-item {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius);
padding: 16px 20px;
box-shadow: var(--shadow);
transition: background var(--transition), border-color var(--transition),
box-shadow var(--transition), transform 0.15s ease;
display: flex;
flex-direction: column;
gap: 6px;
}
.topic-item:hover {
transform: translateY(-1px);
border-color: var(--text-link);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
[data-theme="dark"] .topic-item:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
.topic-title {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
transition: color var(--transition);
text-decoration: none;
display: inline-block;
}
.topic-title a {
color: var(--text-primary);
text-decoration: none;
transition: color var(--transition);
}
.topic-title a:hover {
color: var(--text-link);
}
.topic-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 16px;
font-size: 13px;
color: var(--text-secondary);
transition: color var(--transition);
}
.topic-meta .author {
font-weight: 500;
color: var(--text-primary);
transition: color var(--transition);
}
.topic-meta .badge {
display: inline-block;
background: var(--bg-hover);
color: var(--text-secondary);
padding: 0 10px;
border-radius: 20px;
font-size: 12px;
line-height: 22px;
border: 1px solid var(--border-color);
transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.topic-meta .badge.hot {
background: #fef3c7;
color: #b45309;
border-color: #fcd34d;
}
[data-theme="dark"] .topic-meta .badge.hot {
background: #2d1f0e;
color: #fbbf24;
border-color: #78350f;
}
.topic-meta .badge.new {
background: #dbeafe;
color: #1d4ed8;
border-color: #93c5fd;
}
[data-theme="dark"] .topic-meta .badge.new {
background: #1e293b;
color: #60a5fa;
border-color: #1e3a5f;
}
.topic-meta .time {
color: var(--text-muted);
transition: color var(--transition);
}
.topic-meta .reply-count {
color: var(--text-muted);
transition: color var(--transition);
}
.topic-meta .reply-count strong {
color: var(--text-primary);
font-weight: 600;
}
/ ===== 底部信息 ===== /
.footer-note {
margin-top: 24px;
text-align: center;
font-size: 13px;
color: var(--text-muted);
border-top: 1px solid var(--border-color);
padding-top: 20px;
transition: color var(--transition), border-color var(--transition);
}
.footer-note a {
color: var(--text-link);
text-decoration: none;
transition: color var(--transition);
}
.footer-note a:hover {
text-decoration: underline;
}
/ ===== 响应式 ===== /
@media (max-width: 600px) {
body {
padding: 12px;
}
.forum-header {
padding: 14px 16px;
flex-direction: row;
}
.forum-header h1 {
font-size: 17px;
}
.forum-header .subtitle {
font-size: 12px;
}
.theme-toggle-wrapper {
width: 42px;
height: 42px;
}
.theme-toggle-wrapper .icon {
font-size: 18px;
}
.topic-item {
padding: 12px 14px;
}
.topic-title {
font-size: 14px;
}
.topic-meta {
font-size: 12px;
gap: 6px 10px;
}
}
@media (max-width: 400px) {
.forum-header .subtitle {
display: none;
}
.theme-toggle-wrapper {
width: 38px;
height: 38px;
}
.theme-toggle-wrapper .icon {
font-size: 16px;
}
}
</style>
</head>
<body>
<div>

<header>
<div>
<h1>???? <span>Linux</span>.bi</h1>
<div>技术 · 分享 · 极客</div>
</div>

<div id="themeToggle" role="button" tabindex="0" aria-label="切换暗夜模式">
<span id="themeIcon">????</span>
<span id="tooltipText">切换暗夜模式</span>
</div>
</header>

<div>

<div>
<div>
<a href="#">请不要把 LINUX DO 和 SB 的戾气带来这里</a>
</div>
<div>
<span class="badge hot">???? 精华</span>
<span>若</span>
<span>· 3天前</span>
<span>最后回复来自 <strong>cotedAzur</strong></span>
</div>
</div>

<div>
<div>
<a href="#">发帖量有点低啊，给冲冲，在此楼打卡回复</a>
</div>
<div>
<span class="badge new">???? 打卡</span>
<span>wowo</span>
<span>· 26分钟前</span>
<span>回复 <strong>12</strong></span>
</div>
</div>

<div>
<div>
<a href="#">论坛 header 好像有点问题，站长尽快修复一下</a>
</div>
<div>
<span>C</span>
<span>· 1小时前</span>
<span>最后回复来自 <strong>若</strong></span>
</div>
</div>

<div>
<div>
<a href="#">google 是这样介绍 linux.bi，希望站长能名副其实，哈哈哈</a>
</div>
<div>
<span>cn2_9929</span>
<span>· 52分钟前</span>
<span>回复 <strong>5</strong></span>
</div>
</div>

<div>
<div>
<a href="#">0 成本免费使用流量</a>
</div>
<div>
<span>???? 福利</span>
<span>5525666</span>
<span>· 55分钟前</span>
<span>回复 <strong>3</strong></span>
</div>
</div>

<div>
<div>
<a href="#">整个社会的价值体系，太可怕了。</a>
</div>
<div>
<span>马斯克</span>
<span>· 13小时前</span>
<span>最后回复来自 <strong>5525666</strong></span>
</div>
</div>

<div>
<div>
<a href="#">新人送福利流量随便领</a>
</div>
<div>
<span>???? 福利</span>
<span>Novproxy</span>
<span>· 1天前</span>
<span>回复 <strong>8</strong></span>
</div>
</div>

<div>
<div>
<a href="#">总算注册了</a>
</div>
<div>
<span>tplbi</span>
<span>· 2小时前</span>
<span>回复 <strong>2</strong></span>
</div>
</div>
</div>

<div>
<span id="themeStatus">???? 当前为亮色模式</span>
 ·  点击右上角四方格切换暗夜模式
</div>
</div>
<script>
(function() {
'use strict';
// ===== DOM 引用 =====
const toggleBtn = document.getElementById('themeToggle');
const iconEl = document.getElementById('themeIcon');
const tooltipEl = document.getElementById('tooltipText');
const statusEl = document.getElementById('themeStatus');
// ===== 检测系统偏好 =====
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
// ===== 读取存储的主题 =====
let currentTheme = localStorage.getItem('theme') || (prefersDark ? 'dark' : 'light');
// ===== 应用主题 =====
function applyTheme(theme) {
if (theme === 'dark') {
document.documentElement.setAttribute('data-theme', 'dark');
iconEl.textContent = '☀️';
tooltipEl.textContent = '切换为亮色模式';
if (statusEl) statusEl.textContent = '???? 当前为暗夜模式';
} else {
document.documentElement.removeAttribute('data-theme');
iconEl.textContent = '????';
tooltipEl.textContent = '切换为暗夜模式';
if (statusEl) statusEl.textContent = '???? 当前为亮色模式';
}
currentTheme = theme;
localStorage.setItem('theme', theme);
}
// ===== 切换主题 =====
function toggleTheme() {
const next = currentTheme === 'dark' ? 'light' : 'dark';
applyTheme(next);
}
// ===== 初始化 =====
applyTheme(currentTheme);
// ===== 绑定事件 =====
toggleBtn.addEventListener('click', toggleTheme);
// 键盘支持 (Enter / Space)
toggleBtn.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
toggleTheme();
}
});
// ===== 监听系统主题变化（可选） =====
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
// 仅当用户没有手动设置过时才跟随系统
if (!localStorage.getItem('theme')) {
applyTheme(e.matches ? 'dark' : 'light');
}
});
// ===== 控制台提示 =====
console.log('???? 暗夜模式已就绪！点击右上角四方格切换。');
})();
</script>
</body>
</html>

主楼

发表回复