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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -99,7 +99,7 @@
.card-body { padding: 15px; }
/* === Forum List Styles === */
.forum-category-item { display: flex; justify-content: space-between; padding: 10px; border-bottom: 1px solid var(--border); cursor: pointer; }
.forum-category-item { display: flex; justify-content: space-between; padding: 10px; border-bottom: 1px solid var(--border); cursor: pointer; background: transparent; border: none; width: 100%; text-align: left; }
.forum-category-item:hover { background: rgba(0,0,0,0.02); }
.thread-item {
display: flex; gap: 15px; padding: 15px; border-bottom: 1px solid var(--border);
@@ -206,15 +206,16 @@
<body id="body">
<!-- Navbar -->
<header class="site-header">
<header class="site-header" role="banner">
<div class="logo">
<span style="font-size:2rem;">🛠️</span> TechZone
<span style="font-size:2rem;" aria-hidden="true">🛠️</span> TechZone
</div>
<div class="search-bar">
<input type="text" id="searchInput" placeholder="Search threads, users or resources..." onkeydown="if(event.key==='Enter') doSearch()">
<label for="searchInput" style="display:none;">Search</label>
<input type="text" id="searchInput" placeholder="Search threads, users or resources..." onkeydown="if(event.key==='Enter') doSearch()" aria-label="Search threads, users or resources">
</div>
<div class="nav-user" id="navUser">
<button class="btn btn-primary" onclick="openModal('loginModal')">Register / Login</button>
<button class="btn btn-primary" onclick="openModal('loginModal')" aria-label="Open login or registration modal">Register / Login</button>
</div>
</header>
@@ -222,31 +223,31 @@
<div class="container layout-grid" id="mainLayout">
<!-- Left Sidebar -->
<nav class="sidebar">
<nav class="sidebar" aria-label="Forum categories">
<div class="card">
<div class="card-header">Navigation</div>
<h2 class="card-header">Navigation</h2>
<div class="card-body" style="padding:0;">
<div class="forum-category-item" onclick="switchView('home')">🏠 Home</div>
<div class="forum-category-item" onclick="filterCategory('hardware')">🖥️ Hardware</div>
<div class="forum-category-item" onclick="filterCategory('software')">💿 Software</div>
<div class="forum-category-item" onclick="filterCategory('water')">🌊 Off-topic</div>
<div class="forum-category-item" onclick="filterCategory('market')">💹 Marketplace</div>
<div class="forum-category-item" onclick="filterCategory('feedback')">📢 Announcements</div>
<button class="forum-category-item" onclick="switchView('home')" aria-label="Go to home">🏠 Home</button>
<button class="forum-category-item" onclick="filterCategory('hardware')" aria-label="Filter by hardware category">🖥️ Hardware</button>
<button class="forum-category-item" onclick="filterCategory('software')" aria-label="Filter by software category">💿 Software</button>
<button class="forum-category-item" onclick="filterCategory('water')" aria-label="Filter by off-topic category">🌊 Off-topic</button>
<button class="forum-category-item" onclick="filterCategory('market')" aria-label="Filter by marketplace category">💹 Marketplace</button>
<button class="forum-category-item" onclick="filterCategory('feedback')" aria-label="Filter by announcements category">📢 Announcements</button>
</div>
</div>
<div class="card">
<div class="card-header">My Status</div>
<h2 class="card-header">My Status</h2>
<div class="card-body">
<p style="color:#666; font-size:0.9rem;">Please login to view your points and tasks.</p>
</div>
</div>
<div class="card" style="border-color: #ffeeba; background:#fffdf5;">
<div class="card-header" style="color:#856404;">📅 Daily Check-in</div>
<h2 class="card-header" style="color:#856404;">📅 Daily Check-in</h2>
<div class="card-body">
<p style="font-size:0.8rem; margin-bottom:10px;">Checked in today: 12,503</p>
<button class="btn btn-block" style="background:#ffc107; color:#333;" onclick="showToast('Please login first!', 'warning')">Check In (+5 pts)</button>
<button class="btn btn-block" style="background:#ffc107; color:#333;" onclick="showToast('Please login first!', 'warning')" aria-label="Check in to earn 5 points">Check In (+5 pts)</button>
</div>
</div>
</nav>
@@ -546,19 +547,19 @@
</main>
<!-- Right Sidebar -->
<aside class="sidebar-right">
<aside class="sidebar-right" role="complementary" aria-label="Hot topics and statistics">
<div class="card">
<div class="card-header">🔥 24-Hour Hot Topics</div>
<h2 class="card-header">🔥 24-Hour Hot Topics</h2>
<div class="card-body" style="padding:0;">
<ul id="hotThreadsList" style="padding:0; margin:0;">
<ul id="hotThreadsList" style="padding:0; margin:0;" role="list">
<!-- JS Generated -->
</ul>
</div>
</div>
<div class="card">
<div class="card-header">📊 Statistics</div>
<div class="card-body" style="font-size:0.85rem; line-height:2;">
<h2 class="card-header">📊 Statistics</h2>
<div class="card-body" style="font-size:0.85rem; line-height:2;" role="region" aria-label="Forum statistics" aria-live="polite">
<div>Members Online: <strong style="color:green">1,024</strong></div>
<div>Posts Today: <strong>5,231</strong></div>
<div>Total Posts: <strong>8.4M</strong></div>
@@ -570,73 +571,75 @@
</div>
<!-- Modals -->
<div class="modal-backdrop" id="confirmModal">
<div class="modal-panel" style="width: 400px;">
<div class="card-header">
Confirm Action <span style="cursor:pointer; float:right;" onclick="closeModal('confirmModal')">&times;</span>
<div class="modal-backdrop" id="confirmModal" role="presentation" aria-hidden="true">
<div class="modal-panel" style="width: 400px;" role="dialog" aria-modal="true" aria-labelledby="confirm-title">
<div class="card-header" id="confirm-title">
Confirm Action <button style="cursor:pointer; float:right; background:none; border:none; font-size:1.5rem;" onclick="closeModal('confirmModal')" aria-label="Close confirmation dialog">&times;</button>
</div>
<div class="card-body">
<p id="confirmMessage" style="margin-bottom: 20px;">Are you sure?</p>
<div style="text-align: right;">
<button class="btn" onclick="closeModal('confirmModal')">Cancel</button>
<button class="btn btn-primary" id="confirmBtnAction">Confirm</button>
<button class="btn" onclick="closeModal('confirmModal')" aria-label="Cancel action">Cancel</button>
<button class="btn btn-primary" id="confirmBtnAction" aria-label="Confirm action">Confirm</button>
</div>
</div>
</div>
</div>
<div class="modal-backdrop" id="alertModal">
<div class="modal-panel" style="width: 400px;">
<div class="card-header">
Notice <span style="cursor:pointer; float:right;" onclick="closeModal('alertModal')">&times;</span>
<div class="modal-backdrop" id="alertModal" role="presentation" aria-hidden="true">
<div class="modal-panel" style="width: 400px;" role="dialog" aria-modal="true" aria-labelledby="alert-title">
<div class="card-header" id="alert-title">
Notice <button style="cursor:pointer; float:right; background:none; border:none; font-size:1.5rem;" onclick="closeModal('alertModal')" aria-label="Close notice dialog">&times;</button>
</div>
<div class="card-body">
<p id="alertMessage" style="margin-bottom: 20px;"></p>
<div style="text-align: right;">
<button class="btn btn-primary" onclick="closeModal('alertModal')">Got it</button>
<button class="btn btn-primary" onclick="closeModal('alertModal')" aria-label="Close notice">Got it</button>
</div>
</div>
</div>
</div>
<div class="modal-backdrop" id="loginModal">
<div class="modal-panel">
<div class="card-header">
User Login <span style="cursor:pointer; float:right;" onclick="closeModal('loginModal')">&times;</span>
<div class="modal-backdrop" id="loginModal" role="presentation" aria-hidden="true">
<div class="modal-panel" role="dialog" aria-modal="true" aria-labelledby="login-title">
<div class="card-header" id="login-title">
User Login <button style="cursor:pointer; float:right; background:none; border:none; font-size:1.5rem;" onclick="closeModal('loginModal')" aria-label="Close login dialog">&times;</button>
</div>
<div class="card-body">
<div style="margin-bottom:15px;">
<label style="display:block; margin-bottom:5px;">Username / Email</label>
<input type="text" id="loginUser" class="form-control" style="width:100%; padding:8px;" value="TechUser_2026">
<label for="loginUser" style="display:block; margin-bottom:5px;">Username / Email</label>
<input type="text" id="loginUser" class="form-control" style="width:100%; padding:8px;" value="TechUser_2026" aria-label="Username or email">
</div>
<div style="margin-bottom:20px;">
<label style="display:block; margin-bottom:5px;">Password</label>
<input type="password" class="form-control" style="width:100%; padding:8px;" value="123456">
<label for="loginPassword" style="display:block; margin-bottom:5px;">Password</label>
<input type="password" id="loginPassword" class="form-control" style="width:100%; padding:8px;" value="123456" aria-label="Password">
</div>
<button class="btn btn-primary btn-block" onclick="doLogin()">Login</button>
<button class="btn btn-primary btn-block" onclick="doLogin()" aria-label="Submit login form">Login</button>
</div>
</div>
</div>
<div class="modal-backdrop" id="newThreadModal">
<div class="modal-panel" style="width:800px;">
<div class="card-header">
Create New Thread <span style="cursor:pointer; float:right;" onclick="closeModal('newThreadModal')">&times;</span>
<div class="modal-backdrop" id="newThreadModal" role="presentation" aria-hidden="true">
<div class="modal-panel" style="width:800px;" role="dialog" aria-modal="true" aria-labelledby="new-thread-title">
<div class="card-header" id="new-thread-title">
Create New Thread <button style="cursor:pointer; float:right; background:none; border:none; font-size:1.5rem;" onclick="closeModal('newThreadModal')" aria-label="Close new thread dialog">&times;</button>
</div>
<div class="card-body">
<input type="text" id="newPostTitle" placeholder="Enter title..." style="width:100%; padding:10px; font-size:1.1rem; margin-bottom:10px; border:1px solid #ddd; border-radius:4px;">
<div class="editor-toolbar">
<button class="tool-btn"><b>B</b></button>
<button class="tool-btn"><i>I</i></button>
<button class="tool-btn"><u>U</u></button>
<button class="tool-btn" onclick="insertText(' [code] ', ' [/code] ')">Code</button>
<button class="tool-btn">🔗</button>
<button class="tool-btn">📷</button>
<label for="newPostTitle" style="display:block; margin-bottom:5px; font-weight:bold;">Thread Title</label>
<input type="text" id="newPostTitle" placeholder="Enter title..." style="width:100%; padding:10px; font-size:1.1rem; margin-bottom:10px; border:1px solid #ddd; border-radius:4px;" aria-label="Thread title">
<div class="editor-toolbar" role="toolbar" aria-label="Text formatting options">
<button class="tool-btn" aria-label="Bold"><b>B</b></button>
<button class="tool-btn" aria-label="Italic"><i>I</i></button>
<button class="tool-btn" aria-label="Underline"><u>U</u></button>
<button class="tool-btn" onclick="insertText(' [code] ', ' [/code] ')" aria-label="Insert code block">Code</button>
<button class="tool-btn" aria-label="Insert link">🔗</button>
<button class="tool-btn" aria-label="Insert image">📷</button>
</div>
<textarea id="newPostContent" style="width:100%; height:300px; padding:10px; border:1px solid #ddd; border-top:none; resize:vertical;" placeholder="Describe your issue detailedly..."></textarea>
<label for="newPostContent" style="display:block; margin-bottom:5px; font-weight:bold;">Content</label>
<textarea id="newPostContent" style="width:100%; height:300px; padding:10px; border:1px solid #ddd; border-top:none; resize:vertical;" placeholder="Describe your issue detailedly..." aria-label="Thread content"></textarea>
<div style="margin-top:10px; text-align:right;">
<button class="btn" onclick="closeModal('newThreadModal')">Cancel</button>
<button class="btn btn-primary" onclick="submitNewThread()">Post Thread</button>
<button class="btn" onclick="closeModal('newThreadModal')" aria-label="Cancel thread creation">Cancel</button>
<button class="btn btn-primary" onclick="submitNewThread()" aria-label="Submit new thread">Post Thread</button>
</div>
</div>
</div>