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

@@ -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>