This commit is contained in:
2026-03-21 19:30:13 +08:00
parent 7520b7e2a0
commit 557e25d187
100 changed files with 16990 additions and 18914 deletions

View File

@@ -172,6 +172,8 @@
.close-btn { font-size: 24px; cursor: pointer; color: #999; line-height: 1; }
.close-btn:hover { color: #333; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }
@keyframes slideIn { from { transform: translateY(-30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
/* Footer Expansion */
@@ -200,21 +202,21 @@
</head>
<body bgcolor="#ffffff" text="#000000" link="#0000EE" vlink="#551A8B" alink="#FF0000">
<div class="theme-toggle" onclick="toggleTheme()" title="切换夜间模式">🌓</div>
<div class="theme-toggle" onclick="toggleTheme()" title="切换夜间模式" aria-label="Toggle dark/light mode">🌓</div>
<!-- Modals -->
<div id="modal-container" class="modal-overlay">
<div class="modal-box" id="modal-box">
<div id="modal-container" class="modal-overlay" role="presentation" aria-hidden="true">
<div class="modal-box" id="modal-box" role="dialog" aria-modal="true" aria-labelledby="modal-title">
<div class="modal-header">
<span class="modal-title" id="modal-title">Alert</span>
<span class="close-btn" onclick="closeModal()">×</span>
<button class="close-btn" onclick="closeModal()" aria-label="Close modal">×</button>
</div>
<div class="modal-body" id="modal-content">
<!-- Content -->
</div>
<div class="modal-footer" id="modal-footer">
<button class="modal-btn btn-secondary" onclick="closeModal()" style="padding: 6px 15px; border: 1px solid #ccc; background: white; border-radius: 4px; cursor: pointer;">Close</button>
<button class="modal-btn btn-primary" id="modal-confirm-btn" style="padding: 6px 15px; border: none; background: var(--accent); color: white; border-radius: 4px; cursor: pointer; margin-left: 10px; display:none;">Confirm</button>
<button class="modal-btn btn-secondary" onclick="closeModal()" style="padding: 6px 15px; border: 1px solid #ccc; background: white; border-radius: 4px; cursor: pointer;" aria-label="Close">Close</button>
<button class="modal-btn btn-primary" id="modal-confirm-btn" style="padding: 6px 15px; border: none; background: var(--accent); color: white; border-radius: 4px; cursor: pointer; margin-left: 10px; display:none;" aria-label="Confirm">Confirm</button>
</div>
</div>
</div>
@@ -321,28 +323,29 @@
<!-- Header -->
<center>
<table class="header-container" width="100%">
<table class="header-container" width="100%" role="banner">
<tr>
<td width="25%">
<h1 class="logo">Global<span>Daily</span></h1>
<small class="logo-sub">Connecting the World Since 1998</small>
</td>
<td width="45%" align="center">
<form class="search-box" onsubmit="event.preventDefault(); showCustomAlert('Searching database, please wait...');">
<input type="text" placeholder="Enter keywords (e.g., Economy, AI, World Cup)">
<input type="submit" value="Search">
<form class="search-box" onsubmit="event.preventDefault(); showCustomAlert('Searching database, please wait...');" role="search">
<label for="search-input" style="display:none;">Search</label>
<input type="text" id="search-input" placeholder="Enter keywords (e.g., Economy, AI, World Cup)" aria-label="Search news">
<button type="submit" aria-label="Submit search">Search</button>
</form>
</td>
<td width="30%" class="meta-info">
<div id="live-date">January 19, 2026 Monday</div>
<div id="live-time" style="font-size:20px; font-weight:bold; color:var(--primary); margin:5px 0;">12:00:00</div>
<div>
<span style="display:inline-block; width:10px; height:10px; background:#2ecc71; border-radius:50%;"></span> Beijing | 15°C Sunny | PM2.5: 45
<span style="display:inline-block; width:10px; height:10px; background:#2ecc71; border-radius:50%;" aria-hidden="true"></span> Beijing | 15°C Sunny | PM2.5: 45
</div>
<div class="mt-10">
<a href="javascript:void(0)" onclick="showCustomAlert('Please login from the sidebar')">Login</a>
<a href="javascript:void(0)" onclick="showCustomAlert('Registration closed')">Sign Up</a>
<a href="javascript:void(0)" onclick="showCustomAlert('Bookmarked')">Bookmark</a>
<button onclick="showCustomAlert('Please login from the sidebar')" style="background:none; border:none; color:var(--primary); cursor:pointer; text-decoration:underline;" aria-label="Login">Login</button>
<button onclick="showCustomAlert('Registration closed')" style="background:none; border:none; color:var(--primary); cursor:pointer; text-decoration:underline;" aria-label="Sign up">Sign Up</button>
<button onclick="showCustomAlert('Bookmarked')" style="background:none; border:none; color:var(--primary); cursor:pointer; text-decoration:underline;" aria-label="Bookmark">Bookmark</button>
</div>
</td>
</tr>
@@ -351,21 +354,21 @@
<!-- Navigation -->
<center>
<table class="nav-container" width="100%">
<table class="nav-container" width="100%" role="navigation" aria-label="Main navigation">
<tr>
<td align="center">
<a href="#" class="nav-item active">Home</a>
<a href="javascript:void(0)" class="nav-item">Global</a>
<a href="javascript:void(0)" class="nav-item">China</a>
<a href="javascript:void(0)" class="nav-item">Finance</a>
<a href="javascript:void(0)" class="nav-item">Tech</a>
<a href="javascript:void(0)" class="nav-item">Military</a>
<a href="javascript:void(0)" class="nav-item">Sports</a>
<a href="javascript:void(0)" class="nav-item">Entertainment</a>
<a href="javascript:void(0)" class="nav-item">Auto & Real Estate</a>
<a href="javascript:void(0)" class="nav-item">Education</a>
<a href="javascript:void(0)" class="nav-item">Travel</a>
<a href="javascript:void(0)" class="nav-item">Blogs</a>
<a href="#" class="nav-item active" role="menuitem" aria-current="page" aria-label="Home">Home</a>
<button onclick="event.preventDefault();" class="nav-item" role="menuitem" aria-label="Global news" style="background:none; border:none; cursor:pointer; padding:12px 25px; text-decoration:none; color:rgba(255,255,255,0.9); font-weight:bold; font-size:15px; border-right:1px solid rgba(255,255,255,0.1); white-space:nowrap; transition:0.2s; display:block;">Global</button>
<button onclick="event.preventDefault();" class="nav-item" role="menuitem" aria-label="China news" style="background:none; border:none; cursor:pointer; padding:12px 25px; text-decoration:none; color:rgba(255,255,255,0.9); font-weight:bold; font-size:15px; border-right:1px solid rgba(255,255,255,0.1); white-space:nowrap; transition:0.2s; display:block;">China</button>
<button onclick="event.preventDefault();" class="nav-item" role="menuitem" aria-label="Finance news" style="background:none; border:none; cursor:pointer; padding:12px 25px; text-decoration:none; color:rgba(255,255,255,0.9); font-weight:bold; font-size:15px; border-right:1px solid rgba(255,255,255,0.1); white-space:nowrap; transition:0.2s; display:block;">Finance</button>
<button onclick="event.preventDefault();" class="nav-item" role="menuitem" aria-label="Tech news" style="background:none; border:none; cursor:pointer; padding:12px 25px; text-decoration:none; color:rgba(255,255,255,0.9); font-weight:bold; font-size:15px; border-right:1px solid rgba(255,255,255,0.1); white-space:nowrap; transition:0.2s; display:block;">Tech</button>
<button onclick="event.preventDefault();" class="nav-item" role="menuitem" aria-label="Military news" style="background:none; border:none; cursor:pointer; padding:12px 25px; text-decoration:none; color:rgba(255,255,255,0.9); font-weight:bold; font-size:15px; border-right:1px solid rgba(255,255,255,0.1); white-space:nowrap; transition:0.2s; display:block;">Military</button>
<button onclick="event.preventDefault();" class="nav-item" role="menuitem" aria-label="Sports news" style="background:none; border:none; cursor:pointer; padding:12px 25px; text-decoration:none; color:rgba(255,255,255,0.9); font-weight:bold; font-size:15px; border-right:1px solid rgba(255,255,255,0.1); white-space:nowrap; transition:0.2s; display:block;">Sports</button>
<button onclick="event.preventDefault();" class="nav-item" role="menuitem" aria-label="Entertainment news" style="background:none; border:none; cursor:pointer; padding:12px 25px; text-decoration:none; color:rgba(255,255,255,0.9); font-weight:bold; font-size:15px; border-right:1px solid rgba(255,255,255,0.1); white-space:nowrap; transition:0.2s; display:block;">Entertainment</button>
<button onclick="event.preventDefault();" class="nav-item" role="menuitem" aria-label="Auto and real estate news" style="background:none; border:none; cursor:pointer; padding:12px 25px; text-decoration:none; color:rgba(255,255,255,0.9); font-weight:bold; font-size:15px; border-right:1px solid rgba(255,255,255,0.1); white-space:nowrap; transition:0.2s; display:block;">Auto & Real Estate</button>
<button onclick="event.preventDefault();" class="nav-item" role="menuitem" aria-label="Education news" style="background:none; border:none; cursor:pointer; padding:12px 25px; text-decoration:none; color:rgba(255,255,255,0.9); font-weight:bold; font-size:15px; border-right:1px solid rgba(255,255,255,0.1); white-space:nowrap; transition:0.2s; display:block;">Education</button>
<button onclick="event.preventDefault();" class="nav-item" role="menuitem" aria-label="Travel news" style="background:none; border:none; cursor:pointer; padding:12px 25px; text-decoration:none; color:rgba(255,255,255,0.9); font-weight:bold; font-size:15px; border-right:1px solid rgba(255,255,255,0.1); white-space:nowrap; transition:0.2s; display:block;">Travel</button>
<button onclick="event.preventDefault();" class="nav-item" role="menuitem" aria-label="Blogs" style="background:none; border:none; cursor:pointer; padding:12px 25px; text-decoration:none; color:rgba(255,255,255,0.9); font-weight:bold; font-size:15px; border-right:1px solid rgba(255,255,255,0.1); white-space:nowrap; transition:0.2s; display:block;">Blogs</button>
</td>
</tr>
</table>
@@ -515,10 +518,10 @@
<!-- Tabbed News List -->
<div class="card-panel">
<div class="tab-header">
<div class="tab-btn active" onclick="switchTab(this, 'news-domestic')">Domestic</div>
<div class="tab-btn" onclick="switchTab(this, 'news-intl')">International</div>
<div class="tab-btn" onclick="switchTab(this, 'news-society')">Society</div>
<div class="tab-header" role="tablist">
<div class="tab-btn active" onclick="switchTab(this, 'news-domestic')" role="tab" aria-selected="true" aria-controls="news-domestic" aria-label="Domestic news tab">Domestic</div>
<div class="tab-btn" onclick="switchTab(this, 'news-intl')" role="tab" aria-selected="false" aria-controls="news-intl" aria-label="International news tab">International</div>
<div class="tab-btn" onclick="switchTab(this, 'news-society')" role="tab" aria-selected="false" aria-controls="news-society" aria-label="Society news tab">Society</div>
<div style="flex:1; border-bottom:1px solid #ddd; position:relative; top:1px;"></div>
</div>
@@ -945,8 +948,12 @@
const wrapper = header.parentElement;
const btns = header.querySelectorAll('.tab-btn');
btns.forEach(b => b.classList.remove('active'));
btns.forEach(b => {
b.classList.remove('active');
b.setAttribute('aria-selected', 'false');
});
btn.classList.add('active');
btn.setAttribute('aria-selected', 'true');
const panes = wrapper.querySelectorAll('.tab-pane');
panes.forEach(p => p.classList.remove('active'));