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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

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'));