modify
This commit is contained in:
115
004/all.html
115
004/all.html
@@ -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')">×</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">×</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')">×</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">×</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')">×</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">×</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')">×</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">×</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>
|
||||
|
||||
Reference in New Issue
Block a user