1154 lines
58 KiB
HTML
1154 lines
58 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>BSOD Help - System_Thread_Exception - TechZone Forums</title>
|
|
<style>
|
|
/* === CSS Variables & Reset === */
|
|
:root {
|
|
--primary: #1877f2;
|
|
--secondary: #42b72a;
|
|
--bg-body: #f0f2f5;
|
|
--bg-card: #ffffff;
|
|
--text-main: #1c1e21;
|
|
--text-sub: #65676b;
|
|
--border: #dddfe2;
|
|
--header-height: 60px;
|
|
--danger: #dc3545;
|
|
--warning: #ffc107;
|
|
}
|
|
|
|
/* Dark Mode Support */
|
|
body.dark-mode {
|
|
--primary: #4599ff;
|
|
--secondary: #42b72a;
|
|
--bg-body: #18191a;
|
|
--bg-card: #242526;
|
|
--text-main: #e4e6eb;
|
|
--text-sub: #b0b3b8;
|
|
--border: #3e4042;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
|
background-color: var(--bg-body);
|
|
color: var(--text-main);
|
|
margin: 0;
|
|
line-height: 1.5;
|
|
padding-top: var(--header-height); /* Nav spacing */
|
|
transition: background 0.3s, color 0.3s;
|
|
}
|
|
|
|
a { text-decoration: none; color: var(--primary); cursor: pointer; }
|
|
a:hover { text-decoration: underline; }
|
|
ul { list-style: none; padding: 0; margin: 0; }
|
|
|
|
/* === Layout Components === */
|
|
.container { max-width: 1200px; margin: 0 auto; padding: 20px; }
|
|
.layout-grid { display: grid; grid-template-columns: 280px 1fr 300px; gap: 20px; }
|
|
|
|
/* Thread View Layout Fix */
|
|
/* When in thread view, hide left sidebar, keep main(1fr) and right sidebar(300px) */
|
|
.layout-grid.thread-view { grid-template-columns: 1fr 300px; }
|
|
.layout-grid.thread-view .sidebar { display: none; } /* Key fix: Hide left nav */
|
|
|
|
/* Responsive */
|
|
@media (max-width: 1000px) {
|
|
.layout-grid { grid-template-columns: 1fr; }
|
|
.sidebar { display: none; } /* Hide sidebar on small screens for simplicty */
|
|
.layout-grid.thread-view { grid-template-columns: 1fr; } /* 移动端响应式 */
|
|
.layout-grid.thread-view .sidebar-right { display: none; } /* 移动端帖子页隐藏右侧栏 */
|
|
}
|
|
|
|
/* === Fixed Header === */
|
|
.site-header {
|
|
position: fixed; top: 0; left: 0; right: 0;
|
|
height: var(--header-height);
|
|
background: var(--bg-card);
|
|
border-bottom: 1px solid var(--border);
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
|
z-index: 1000;
|
|
display: flex; align-items: center; padding: 0 20px;
|
|
justify-content: space-between;
|
|
}
|
|
.logo { font-size: 1.5rem; font-weight: bold; color: var(--primary); display: flex; align-items: center; gap: 10px; }
|
|
.search-bar { position: relative; width: 400px; }
|
|
.search-bar input {
|
|
width: 100%; padding: 8px 15px; border-radius: 20px;
|
|
border: 1px solid var(--border); background: var(--bg-body);
|
|
color: var(--text-main);
|
|
}
|
|
.nav-user { display: flex; gap: 15px; align-items: center; }
|
|
.user-avatar-sm { width: 32px; height: 32px; border-radius: 50%; background: #ccc; cursor: pointer; }
|
|
|
|
/* === Cards & Panels === */
|
|
.card {
|
|
background: var(--bg-card);
|
|
border-radius: 8px;
|
|
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
|
|
margin-bottom: 20px;
|
|
overflow: hidden;
|
|
border: 1px solid var(--border);
|
|
}
|
|
.card-header {
|
|
padding: 12px 15px; border-bottom: 1px solid var(--border);
|
|
font-weight: 600; font-size: 0.95rem; display: flex; justify-content: space-between;
|
|
}
|
|
.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; 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);
|
|
transition: 0.2s;
|
|
}
|
|
.thread-item:hover { background: rgba(0,0,0,0.02); transform: translateX(5px); }
|
|
.thread-stats {
|
|
display: flex; flex-direction: column; align-items: center; min-width: 60px;
|
|
color: var(--text-sub); font-size: 0.8rem;
|
|
}
|
|
.stat-count { font-size: 1.1rem; font-weight: bold; color: var(--text-main); }
|
|
.thread-main { flex: 1; }
|
|
.thread-title { font-size: 1.1rem; font-weight: 500; margin-bottom: 5px; display: block; color: var(--text-main); }
|
|
.thread-meta { font-size: 0.85rem; color: var(--text-sub); display: flex; gap: 10px; }
|
|
.tag { padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; background: #eee; color: #555; }
|
|
.tag.red { background: #fee2e2; color: #b91c1c; }
|
|
.tag.blue { background: #e0f2fe; color: #0369a1; }
|
|
|
|
/* === Post View Styles (Logic Refactored from Tables to Flex) === */
|
|
.post-container { display: flex; border-bottom: 1px solid var(--border); }
|
|
.post-sidebar {
|
|
width: 180px; background: rgba(0,0,0,0.02); border-right: 1px solid var(--border);
|
|
padding: 20px; text-align: center; flex-shrink: 0;
|
|
}
|
|
.post-avatar-lg { width: 100px; height: 100px; border-radius: 4px; background: #ddd; margin-bottom: 10px; object-fit: cover; }
|
|
.user-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 0.75rem; font-weight: bold; margin: 5px 0; }
|
|
.post-content-area { flex: 1; padding: 20px; position: relative; min-height: 200px; }
|
|
.post-meta-header {
|
|
border-bottom: 1px dashed var(--border); padding-bottom: 10px; margin-bottom: 15px;
|
|
font-size: 0.85rem; color: var(--text-sub); display: flex; justify-content: space-between;
|
|
}
|
|
.post-body { font-size: 1rem; line-height: 1.7; min-height: 100px; }
|
|
.post-signature {
|
|
margin-top: 30px; border-top: 1px dashed var(--border); padding-top: 10px;
|
|
color: var(--text-sub); font-size: 0.85rem; font-style: italic;
|
|
}
|
|
.post-actions {
|
|
margin-top: 20px; display: flex; justify-content: flex-end; gap: 10px;
|
|
}
|
|
.btn-action {
|
|
background: transparent; border: 1px solid transparent; color: var(--text-sub);
|
|
padding: 5px 10px; border-radius: 4px; font-size: 0.85rem; cursor: pointer;
|
|
}
|
|
.btn-action:hover { background: rgba(0,0,0,0.05); color: var(--primary); }
|
|
|
|
/* === Components === */
|
|
.btn { padding: 8px 16px; border-radius: 6px; border: none; font-weight: 600; cursor: pointer; transition: 0.2s; }
|
|
.btn-primary { background: var(--primary); color: white; }
|
|
.btn-primary:hover { opacity: 0.9; }
|
|
.btn-block { display: block; width: 100%; }
|
|
|
|
/* Pagination */
|
|
.pagination { display: flex; gap: 5px; margin-top: 20px; justify-content: center; }
|
|
.page-num {
|
|
width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
|
|
border: 1px solid var(--border); border-radius: 4px; background: var(--bg-card);
|
|
cursor: pointer;
|
|
}
|
|
.page-num.active { background: var(--primary); color: white; border-color: var(--primary); }
|
|
|
|
/* Modals */
|
|
.modal-backdrop {
|
|
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
|
|
background: rgba(0,0,0,0.5); z-index: 2000;
|
|
display: none; justify-content: center; align-items: center;
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
.modal-backdrop.show { display: flex; }
|
|
.modal-panel {
|
|
background: var(--bg-card); width: 500px; max-width: 90%;
|
|
border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,0.3);
|
|
overflow: hidden; animation: slideUp 0.3s ease;
|
|
}
|
|
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
|
|
|
|
/* Toast */
|
|
.toast-box {
|
|
position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%);
|
|
background: #333; color: white; padding: 12px 24px; border-radius: 30px;
|
|
box-shadow: 0 5px 15px rgba(0,0,0,0.2); z-index: 3000;
|
|
display: none; font-weight: 500;
|
|
}
|
|
|
|
/* Spam Style */
|
|
.spam-mask { opacity: 0.5; filter: grayscale(1); pointer-events: none; position: relative; }
|
|
.spam-mask::after {
|
|
content: "Content Blocked by System"; position: absolute; top: 50%; left: 50%;
|
|
transform: translate(-50%, -50%); color: red; font-weight: bold; border: 2px solid red;
|
|
padding: 5px 10px; transform: rotate(-10deg);
|
|
}
|
|
|
|
/* Editor Toolbar */
|
|
.editor-toolbar {
|
|
border: 1px solid var(--border); border-bottom: none;
|
|
background: rgba(0,0,0,0.02); padding: 5px; display: flex; gap: 5px;
|
|
}
|
|
.tool-btn {
|
|
width: 30px; height: 30px; border: 1px solid transparent; background: transparent;
|
|
border-radius: 4px; cursor: pointer; display: flex; justify-content: center; align-items: center;
|
|
}
|
|
.tool-btn:hover { background: rgba(0,0,0,0.1); }
|
|
</style>
|
|
</head>
|
|
<body id="body">
|
|
|
|
<!-- Navbar -->
|
|
<header class="site-header" role="banner">
|
|
<div class="logo">
|
|
<span style="font-size:2rem;" aria-hidden="true">🛠️</span> TechZone
|
|
</div>
|
|
<div class="search-bar">
|
|
<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 id="btn-register-login" class="btn btn-primary" onclick="openModal('loginModal')" aria-label="Open login or registration modal">Register / Login</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Layout -->
|
|
<div class="container layout-grid" id="mainLayout">
|
|
|
|
<!-- Left Sidebar -->
|
|
<nav class="sidebar" aria-label="Forum categories">
|
|
<div class="card">
|
|
<h2 class="card-header">Navigation</h2>
|
|
<div class="card-body" style="padding:0;">
|
|
<button id="nav-home" class="forum-category-item" onclick="switchView('home')" aria-label="Go to home">🏠 Home</button>
|
|
<button id="nav-hardware" class="forum-category-item" onclick="filterCategory('hardware')" aria-label="Filter by hardware category">🖥️ Hardware</button>
|
|
<button id="nav-software" class="forum-category-item" onclick="filterCategory('software')" aria-label="Filter by software category">💿 Software</button>
|
|
<button id="nav-water" class="forum-category-item" onclick="filterCategory('water')" aria-label="Filter by off-topic category">🌊 Off-topic</button>
|
|
<button id="nav-market" class="forum-category-item" onclick="filterCategory('market')" aria-label="Filter by marketplace category">💹 Marketplace</button>
|
|
<button id="nav-feedback" class="forum-category-item" onclick="filterCategory('feedback')" aria-label="Filter by announcements category">📢 Announcements</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<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;">
|
|
<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')" aria-label="Check in to earn 5 points">Check In (+5 pts)</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Main Content Area -->
|
|
<main class="main-content">
|
|
<div id="loading" style="text-align:center; padding:50px;">
|
|
<div style="font-size:2rem; animation: spin 1s infinite linear;">⚙️</div>
|
|
<p>Loading Content...</p>
|
|
</div>
|
|
<div id="contentArea"></div>
|
|
|
|
<!-- Old content place holder to be deleted by JS or ignored -->
|
|
<div style="display:none;">
|
|
|
|
|
|
<div class="ad-banner">
|
|
<p>[Notice] 2026 New GPU pre-sale starts now, click for details >></p>
|
|
<p>[Recommend] Computer running slow? Click here for one-click cleanup (Expert Recommended)</p>
|
|
</div>
|
|
|
|
<div class="content-wrapper">
|
|
|
|
<div class="main-column">
|
|
<div class="post-title">
|
|
<h2>[Help] How to fix System_Thread_Exception BSOD? Dump file attached</h2>
|
|
<p style="font-size:12px; color:#666;">Status: <strong style="color:red">[Unsolved]</strong> | Views: 45,221 | Replies: 12</p>
|
|
</div>
|
|
|
|
<div class="post-card">
|
|
<table border="1" width="100%">
|
|
<tr>
|
|
<td width="150" valign="top" class="user-info-cell">
|
|
<p><strong>Newbie_User_007</strong></p>
|
|
<p class="badge-new">Level: Newbie</p>
|
|
<p>Points: 5</p>
|
|
<p>Joined: 2025-10-01</p>
|
|
<p><img src="" alt="Default Avatar"></p>
|
|
</td>
|
|
<td valign="top" class="content-cell">
|
|
<p class="post-meta"><small>Posted on 2025-12-21 09:30:00 | OP</small></p>
|
|
|
|
<p>My computer keeps getting BSOD recently, error code is System_Thread_Exception_Not_Handled.</p>
|
|
<p>Specs:</p>
|
|
<ul>
|
|
<li>CPU: Intel i9-14900K</li>
|
|
<li>GPU: RTX 4080</li>
|
|
<li>RAM: 32G x 2</li>
|
|
</ul>
|
|
<p>I have tried reinstalling the system but it didn't help. Attached dump file, please help!</p>
|
|
<br>
|
|
|
|
<fieldset>
|
|
<legend>Attachment Download</legend>
|
|
<p>File: Minidump_20251221.zip (256 KB)</p>
|
|
<a href="#" onclick="showCustomAlert('Downloading real file...')">[Click to Download]</a>
|
|
</fieldset>
|
|
|
|
<div align="center" class="fake-download-area">
|
|
<br>
|
|
<button>==> High Speed Download (Recommended) <==</button>
|
|
<button>==> BSOD Fix Tool <==</button>
|
|
<p><small>Ad: Professional System Repair, No Data Loss</small></p>
|
|
</div>
|
|
|
|
<br>
|
|
<hr style="border:0; border-top:1px dashed #ccc;">
|
|
<p style="color:#999; font-size:12px;"><em>-- Sig: Newbie needs help, thank you.</em></p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2" align="right" class="action-bar">
|
|
<button onclick="replyPost()">Reply</button>
|
|
<button>Quote</button>
|
|
<button onclick="reportPost()">Report</button>
|
|
<button>Like (0)</button>
|
|
<button>Dislike (0)</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="post-card spam-post">
|
|
<table border="1" width="100%">
|
|
<tr>
|
|
<td width="150" valign="top" class="user-info-cell">
|
|
<p><strong>System_Cleaner_Bot</strong></p>
|
|
<p>Level: <strong>Ambassador</strong></p>
|
|
<p>Points: 99999</p>
|
|
<p><img src="" alt="VIP Avatar"></p>
|
|
</td>
|
|
<td valign="top" class="content-cell">
|
|
<p class="post-meta"><small>Posted on 2025-12-21 09:31:05 | #2</small></p>
|
|
|
|
<p>Detected <strong>128</strong> system errors on your PC!</p>
|
|
<p>Recommended to download <strong>PC Master Pro</strong> immediately for repair.</p>
|
|
<p>Our software fixes: BSOD, Lag, Freeze, Virus.</p>
|
|
<br>
|
|
<h1><a href="#" onclick="return false;">[Download Fix Patch Now]</a></h1>
|
|
<br>
|
|
<hr style="border:0; border-top:1px dashed #ccc;">
|
|
<p style="color:#999; font-size:12px;"><em>-- Sig: Official Certified, Safe & Virus Free.</em></p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2" align="right" class="action-bar">
|
|
<button>Reply</button>
|
|
<button>Quote</button>
|
|
<button>Report</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="post-card">
|
|
<table border="1" width="100%">
|
|
<tr>
|
|
<td width="150" valign="top" class="user-info-cell">
|
|
<p><strong>Hardware_Guru</strong></p>
|
|
<p class="badge-mod">Level: <strong>Moderator</strong></p>
|
|
<p>Points: 54,200</p>
|
|
<p style="color:orange;">Badges: [Tech Expert] [Helpful]</p>
|
|
</td>
|
|
<td valign="top" class="content-cell">
|
|
<p class="post-meta"><small>Posted on 2025-12-21 09:45:12 | #3</small></p>
|
|
|
|
<p>OP, looked at your specs, it's likely unstable memory overclocking.</p>
|
|
<p>Did you enable XMP? Try going into BIOS and lowering memory frequency to 4800MHz.</p>
|
|
<p>Also, the post on the 2nd floor is an ad, don't click that link, it's bloatware.</p>
|
|
<br>
|
|
<hr style="border:0; border-top:1px dashed #ccc;">
|
|
<p style="color:#999; font-size:12px;"><em>-- Sig: Read pinned posts first, include specs when asking.</em></p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2" align="right" class="action-bar">
|
|
<button onclick="replyPost()">Reply</button>
|
|
<button>Quote</button>
|
|
<button>Report</button>
|
|
<button onclick="likePost(this)">Like (52)</button>
|
|
<button>Dislike (0)</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div style="border: 1px dashed #ccc; padding: 10px; margin: 10px 0; background:#fafafa; font-size:12px; color:#999;">
|
|
<p><strong>Sponsor Links:</strong></p>
|
|
<ul style="list-style: none;">
|
|
<li><a href="#" style="color:#999;">Always losing games? This cheats tool helps you!</a></li>
|
|
<li><a href="#" style="color:#999;">Side hustle earning 50k/month, click to get tutorial.</a></li>
|
|
<li><a href="#" style="color:#999;">Hair loss? Ancient herbal remedy.</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="post-card">
|
|
<table border="1" width="100%">
|
|
<tr>
|
|
<td width="150" valign="top" class="user-info-cell">
|
|
<p><strong>Newbie_User_007</strong></p>
|
|
<p class="badge-new">Level: Newbie</p>
|
|
<p>Points: 5</p>
|
|
</td>
|
|
<td valign="top" class="content-cell">
|
|
<p class="post-meta"><small>Posted on 2025-12-21 10:05:00 | #4</small></p>
|
|
|
|
<div style="background:#f0f0f0; padding:10px; margin-bottom:10px;">Reply to #3:</div>
|
|
<p>Thanks expert! I did enable XMP. I'll try disabling it now.</p>
|
|
<p>By the way, do I need to rollback GPU driver?</p>
|
|
<br>
|
|
<hr style="border:0; border-top:1px dashed #ccc;">
|
|
<p style="color:#999; font-size:12px;"><em>-- Sig: Newbie needs help, thank you.</em></p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2" align="right" class="action-bar">
|
|
<button onclick="replyPost()">Reply</button>
|
|
<button>Quote</button>
|
|
<button>Report</button>
|
|
<button>Like (0)</button>
|
|
<button>Dislike (0)</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="post-card">
|
|
<table border="1" width="100%">
|
|
<tr>
|
|
<td width="150" valign="top" class="user-info-cell">
|
|
<p><strong>Troll_Master_123</strong></p>
|
|
<p>Level: Lurker</p>
|
|
<p>Points: -20</p>
|
|
</td>
|
|
<td valign="top" class="content-cell">
|
|
<p class="post-meta"><small>Posted on 2025-12-21 10:15:33 | #5</small></p>
|
|
|
|
<p>BSOD with these specs? OP must have bought mining cards.</p>
|
|
<p>Intel is degrading fast these days, just switch to AMD to be safe.</p>
|
|
<p>If you can't fix it, sell it to me for 50 bucks.</p>
|
|
<br>
|
|
<hr style="border:0; border-top:1px dashed #ccc;">
|
|
<p style="color:#999; font-size:12px;"><em>-- Sig: No signature.</em></p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2" align="right" class="action-bar">
|
|
<button onclick="replyPost()">Reply</button>
|
|
<button>Quote</button>
|
|
<button onclick="reportPost()">Report</button>
|
|
<button>Like (1)</button>
|
|
<button>Dislike (88)</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="post-card">
|
|
<table border="1" width="100%">
|
|
<tr>
|
|
<td width="150" valign="top" class="user-info-cell">
|
|
<p><strong>Passerby_A</strong></p>
|
|
<p>Level: Core Member</p>
|
|
<p>Points: 888</p>
|
|
</td>
|
|
<td valign="top" class="content-cell">
|
|
<p class="post-meta"><small>Posted on 2025-12-21 10:20:00 | #6</small></p>
|
|
<hr>
|
|
<p>Marking this, I have the same issue. Following.</p>
|
|
<br>
|
|
<hr style="border:0; border-top:1px dashed #ccc;">
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2" align="right" class="action-bar">
|
|
<button>Reply</button>
|
|
<button>Quote</button>
|
|
<button>Report</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
|
|
<br>
|
|
<div align="center" style="padding: 20px;">
|
|
<a href="#" class="btn-primary" style="background:white; color:#333; border:1px solid #ccc;">Home</a>
|
|
<a href="#" class="btn-primary" style="background:white; color:#333; border:1px solid #ccc;">Prev</a>
|
|
<strong>[1]</strong> <a href="#">2</a> <a href="#">3</a> ... <a href="#">99</a>
|
|
<a href="#" class="btn-primary" style="background:white; color:#333; border:1px solid #ccc;">Next</a>
|
|
</div>
|
|
|
|
<br>
|
|
<div class="quick-reply">
|
|
<h3>Quick Reply</h3>
|
|
<form>
|
|
<textarea rows="5" cols="80"></textarea><br>
|
|
<input type="checkbox"> Signature
|
|
<input type="checkbox"> Anonymous
|
|
<button class="btn-primary">Post Reply</button>
|
|
</form>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="side-column">
|
|
<div class="sidebar-box">
|
|
<h3>Forum Hot Picks</h3>
|
|
<ul>
|
|
<li><a href="#">[Pinned] GPU Hierarchy Chart Dec 2025</a></li>
|
|
<li><a href="#">[Digest] PSU Buying Guide: Don't buy bombs</a></li>
|
|
<li><a href="#">Help! Computer is smoking!</a></li>
|
|
<li><a href="#">4090Ti Leaked specs revealed!</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="sidebar-box" style="border-color: #ffeeba;">
|
|
<h3 style="color:#856404; border-color:#856404;">Events</h3>
|
|
<ul>
|
|
<li><a href="#">[Ad] Register to get $88 cash coupon</a></li>
|
|
<li><a href="#">[Ad] Game only men understand</a></li>
|
|
<li><a href="#">[Ad] Free 1TB Cloud Storage</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="sidebar-box">
|
|
<h3>Online Stats</h3>
|
|
<p>Members: 1205</p>
|
|
<p>Guests: 8841</p>
|
|
<p>New Posts: 342</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div> <!-- /End hidden content -->
|
|
</main>
|
|
|
|
<!-- Right Sidebar -->
|
|
<aside class="sidebar-right" role="complementary" aria-label="Hot topics and statistics">
|
|
<div class="card">
|
|
<h2 class="card-header">🔥 24-Hour Hot Topics</h2>
|
|
<div class="card-body" style="padding:0;">
|
|
<ul id="hotThreadsList" style="padding:0; margin:0;" role="list">
|
|
<!-- JS Generated -->
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<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>
|
|
<div>Server Latency: <span id="pingValue">12ms</span></div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
</div>
|
|
|
|
<!-- Modals -->
|
|
<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')" 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" 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')" aria-label="Close notice">Got it</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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 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 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 id="btn-login-submit" class="btn btn-primary btn-block" onclick="doLogin()" aria-label="Submit login form">Login</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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">
|
|
<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>
|
|
<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 id="btn-cancel-thread" class="btn" onclick="closeModal('newThreadModal')" aria-label="Cancel thread creation">Cancel</button>
|
|
<button id="btn-submit-thread" class="btn btn-primary" onclick="submitNewThread()" aria-label="Submit new thread">Post Thread</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="toast-box" id="toast"></div>
|
|
|
|
<script>
|
|
// === Single Page Application Logic (SPA) ===
|
|
|
|
// --- Custom Alert/Confirm Logic ---
|
|
let onConfirmCallback = null;
|
|
|
|
function showCustomAlert(msg) {
|
|
document.getElementById('alertMessage').innerText = msg;
|
|
openModal('alertModal');
|
|
}
|
|
|
|
function showCustomConfirm(msg, callback) {
|
|
document.getElementById('confirmMessage').innerText = msg;
|
|
onConfirmCallback = callback;
|
|
openModal('confirmModal');
|
|
}
|
|
|
|
// Bind Confirm Action
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const confirmBtn = document.getElementById('confirmBtnAction');
|
|
if(confirmBtn) {
|
|
confirmBtn.addEventListener('click', () => {
|
|
if (typeof onConfirmCallback === 'function') {
|
|
onConfirmCallback();
|
|
}
|
|
closeModal('confirmModal');
|
|
});
|
|
}
|
|
});
|
|
|
|
const DB = {
|
|
users: [
|
|
{ id: 1, name: 'System_Admin', role: 'admin', avatar: 'https://ui-avatars.com/api/?name=SA&background=0D8ABC&color=fff' },
|
|
{ id: 2, name: 'Hardware_Guru', role: 'mod', avatar: 'https://ui-avatars.com/api/?name=HG&background=ff5722&color=fff' },
|
|
{ id: 3, name: 'Newbie_User_007', role: 'user', avatar: 'https://ui-avatars.com/api/?name=NU&background=4caf50&color=fff' },
|
|
{ id: 99, name: 'Spam_Bot_X', role: 'banned', avatar: '' }
|
|
],
|
|
threads: [], // Will be generated
|
|
};
|
|
|
|
const STATE = {
|
|
currentUser: null, // null = guest
|
|
currentView: 'home',
|
|
currentCategory: 'all',
|
|
viewingThreadId: null,
|
|
notifications: [],
|
|
page: 1
|
|
};
|
|
|
|
// --- Mock Data Generator ---
|
|
function initData() {
|
|
// High-quality mock data source
|
|
const mockSources = [
|
|
{
|
|
title: "RTX 5090 Stats Leaked, 600W Power Consumption?",
|
|
cat: "hardware",
|
|
content: "Foreign media reports suggest the next-gen flagship RTX 5090 TGP might reach 600W. This means all existing ATX 3.0 PSUs might need retirement.<br><br>From leaked PCB designs, the die size is 15% larger than the 4090, possibly using GDDR7. thoughts? I'm getting ready to swap my PSU.",
|
|
replies: ["600W? Do I need an AC unit pointing at it?", "Electricity bill is gonna kill me, sticking to my 1060.", "AMD Yes! As long as Su Bae doesn't follow this power race.", "Is this reliable? Feels like a smokescreen.", "Perfect for winter, gaming and heating in one, big win!"]
|
|
},
|
|
{
|
|
title: "Help: Win12 update caused BSOD Critical_Process_Died",
|
|
cat: "software",
|
|
content: "Updated to Windows 12 Preview (Build 26000) last night, now it BSODs immediately on boot.<br><br>Error Code: Critical_Process_Died.<br>Tried Safe Mode, can't get in. No PE drive handy. Important thesis files inside, please help! I really don't want to reinstall!",
|
|
replies: ["Brave soul updating main rig to preview.", "Try making a Linux Live USB to copy files out.", "Probably driver conflict, try rolling back in RE mode.", "Critical_Process_Died usually means core corruption, likely need reinstall.", "No backups? That's basically game over."]
|
|
},
|
|
{
|
|
title: "[Build Log] All-White 'Sea View' Case, Aesthetics is Justice!",
|
|
cat: "hardware",
|
|
content: "Finally completed my dream white panoramic build!<br><br>Specs:<br>- CPU: i7-14700K<br>- MB: ROG Z790-A Gaming<br>- RAM: Adata D5 6400 White<br>- GPU: GALAX HOF 4080<br>- Case: Lian Li O11D Evo<br><br>[Image] Looks insane, RGB maxed out. Cable management killed my back though.",
|
|
replies: ["Rich guy, V50 please.", "Cable management is top tier, satisfying to watch.", "All white is nice but dust shows easily, clean often.", "Thinking of copying this, costs about 20k right?", "Am I the only one noticing the white desk too?"]
|
|
},
|
|
{
|
|
title: "Python crawler getting 403 Forbidden on specific site",
|
|
cat: "software",
|
|
content: "Writing a crawler for an e-commerce site, but getting 403 Forbidden if frequency goes up even slightly.<br><br>Already added User-Agent pool, random delays 1-3s, still no go. Do I need paid proxies? Any good open source proxy pools?",
|
|
replies: ["Anti-scraping is smart now, swapping UA isn't enough.", "Suggest buying tunnel proxies, free ones are unstable and slow.", "Check for captchas or cookie tracking, IP ban is last resort.", "Lower frequency, or use Selenium to simulate browser.", "Scrape less, watch out for lawyer letters [Doge]"]
|
|
},
|
|
{
|
|
title: "AMD YES! Ryzen 9000 Series Preview",
|
|
cat: "hardware",
|
|
content: "AMD official slides finally out, Zen 5 IPC up 15%! <br><br>Key point is heat accumulation seems improved. If launch price stays near 7000 series levels, Intel is getting crushed again. Who's buying?",
|
|
replies: ["AMD Yes! Just shout it.", "Launch will be expensive, waiting 6 months is the true YES.", "As long as socket doesn't change, I'm in.", "Heat fixed? I don't believe it until I see reviews.", "Intel 15th gen coming too, wait if not urgent."]
|
|
},
|
|
{
|
|
title: "Mech Keyboard Switch Recs: Red vs Brown?",
|
|
cat: "hardware",
|
|
content: "Want a mech keyboard for office, occasional LOL.<br><br>Used Blue switches before, too loud, colleagues complained. Now deciding between Red and Brown. Heard Red is mushy? Brown has tactile bump?<br>Req: Quiet, good feel, not tiring.",
|
|
replies: ["Office definitely Red, smooth like water.", "Brown is universal, tactile bump feels good for typing.", "Have to recommend Gold Pink switches, lighter than Red, typing god.", "Buy a switch tester for cheap, try them all.", "Topre Realforce, end game choice."]
|
|
},
|
|
{
|
|
title: "Monitor Buying Guide: IPS vs OLED",
|
|
cat: "hardware",
|
|
content: "OLED monitors getting cheap, 27-inch 2K 240Hz for just over 3000.<br><br>But worried about burn-in. I'm a heavy Windows user, taskbar always on. IPS Nano-IPS contrast is bad. What to choose? Mainly for movies and AAA games.",
|
|
replies: ["Movies definitely OLED, infinite contrast.", "Heavy office work forget it, burn-in in 6 months.", "Modern OLEDs have anti-burn-in tech, not that fragile.", "Consider Mini-LED? Middle ground.", "If you have money, just replace when broken, then OLED no brainer."]
|
|
},
|
|
{
|
|
title: "Company server struck by lightning, how to recover data?",
|
|
cat: "water",
|
|
content: "Real disaster. Lightning struck the server room yesterday, UPS failed too.<br><br>RAID card reporting errors, two drives red light. Have offsite backup but it's a week old... Boss is furious. Asking for reliable data recovery services!",
|
|
replies: ["Physical damage, software won't help, find a pro lab.", "Sympathies, not your fault, facility issue.", "Happened to us, spent 100k to get some data back.", "Do NOT power it on! More damage!", "Week old backup is decent, otherwise you'd be fired."]
|
|
},
|
|
{
|
|
title: "Newbie needs 3000 budget PC build recs",
|
|
cat: "hardware",
|
|
content: "Budget only 3000, want to build a PC for 'Black Myth: Wukong'.<br><br>Don't need max settings, 1080P medium smooth is fine. Looking at 12400F + 6600. Is this stable? Or should I wait?",
|
|
replies: ["3000 for AAA is tight, suggest adding money for 4060.", "12400F + 6600 value is high, 1080P no problem.", "Check used market? 3000 gets better specs there.", "Don't skimp on PSU, or it blows up.", "Wait for game release to see optimization."]
|
|
},
|
|
{
|
|
title: "How to configure Nginx Reverse Proxy on Linux?",
|
|
cat: "software",
|
|
content: "Deployed a Node.js service on Ubuntu, port 3000.<br><br>Want to access via domain, configured Nginx proxy_pass, but static assets are 404. Any complete conf templates? Beginner here, docs are confusing.",
|
|
replies: ["Static assets need separate root or alias.", "Post your config, otherwise how to help?", "Suggest Nginx Proxy Manager with Docker, GUI is easy.", "ChatGPT is good at configs, ask it.", "Check location priority, might be shadowed."]
|
|
}
|
|
];
|
|
|
|
for (let i = 0; i < 45; i++) {
|
|
const seed = mockSources[i % mockSources.length]; // Loop templates
|
|
const author = DB.users[Math.floor(Math.random() * 3)];
|
|
|
|
// Randomize stats
|
|
const replyCount = Math.floor(Math.random() * 150) + (seed.replies.length * 5);
|
|
const viewCount = replyCount * (Math.floor(Math.random() * 40) + 20);
|
|
|
|
// Modify title slightly
|
|
let titleVariant = seed.title;
|
|
if (i >= mockSources.length) {
|
|
const suffixes = ["(Help)", "[Discuss]", "...", "!!", "(Updated)"];
|
|
titleVariant += " " + suffixes[i % suffixes.length];
|
|
}
|
|
|
|
// Store preset replies
|
|
DB.threads.push({
|
|
id: 1000 + i,
|
|
title: titleVariant,
|
|
author: author,
|
|
date: new Date(Date.now() - Math.floor(Math.random() * 2000000000)).toISOString(),
|
|
category: seed.cat,
|
|
views: viewCount,
|
|
replies: replyCount,
|
|
isHot: replyCount > 80,
|
|
content: seed.content, // Use real content
|
|
mockReplies: seed.replies // Pass topic specific replies
|
|
});
|
|
}
|
|
|
|
// Add fake sidebar hot data
|
|
const hotList = document.getElementById('hotThreadsList');
|
|
DB.threads.slice(0, 5).sort((a,b) => b.replies - a.replies).forEach(t => {
|
|
hotList.innerHTML += `
|
|
<li class="thread-item" style="padding:10px; border:none;" onclick="openThread(${t.id})">
|
|
<span style="color:var(--primary); font-weight:bold;">${t.replies}</span>
|
|
<a href="javascript:void(0)" style="margin-left:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">${t.title}</a>
|
|
</li>`;
|
|
});
|
|
}
|
|
|
|
// --- Core View Logic ---
|
|
function renderApp() {
|
|
const container = document.getElementById('contentArea');
|
|
container.innerHTML = '';
|
|
|
|
document.getElementById('loading').style.display = 'block';
|
|
|
|
// Simulate network delay
|
|
setTimeout(() => {
|
|
document.getElementById('loading').style.display = 'none';
|
|
if (STATE.currentView === 'home') {
|
|
renderHome(container);
|
|
} else if (STATE.currentView === 'thread') {
|
|
renderThreadDetail(container, STATE.viewingThreadId);
|
|
}
|
|
|
|
// Update UI User State
|
|
updateUserUI();
|
|
}, 300);
|
|
}
|
|
|
|
function renderHome(container) {
|
|
// Filter Logic
|
|
let data = DB.threads;
|
|
if (STATE.currentCategory !== 'all') {
|
|
data = data.filter(t => t.category === STATE.currentCategory);
|
|
}
|
|
|
|
// Toolbar
|
|
const toolbar = document.createElement('div');
|
|
toolbar.className = 'card';
|
|
toolbar.innerHTML = `
|
|
<div class="card-body" style="display:flex; justify-content:space-between; align-items:center; padding:10px 15px;">
|
|
<div>
|
|
<span style="font-weight:bold; font-size:1.1rem;">${getCategoryName(STATE.currentCategory)}</span>
|
|
<span style="color:#888; margin-left:10px; font-size:0.9rem;">Total ${data.length} threads</span>
|
|
</div>
|
|
<div>
|
|
<button id="btn-new-thread" class="btn btn-primary" onclick="openModal('newThreadModal')">✍️ New Thread</button>
|
|
<select style="padding:5px; border-radius:4px; border:1px solid #ddd; margin-left:10px;" onchange="showToast('Sorting feature in development...', 'info')">
|
|
<option>Latest Replies</option>
|
|
<option>Newest</option>
|
|
<option>Most Viewed</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
`;
|
|
container.appendChild(toolbar);
|
|
|
|
// List
|
|
const listCard = document.createElement('div');
|
|
listCard.className = 'card';
|
|
// Header
|
|
listCard.innerHTML = `<div class="card-header" style="color:#666; font-size:0.8rem;">
|
|
<span style="flex:1;">Topic</span>
|
|
<span style="width:100px; text-align:center;">Author</span>
|
|
<span style="width:80px; text-align:center;">Replies/Views</span>
|
|
<span style="width:120px; text-align:right;">Last Post</span>
|
|
</div>`;
|
|
|
|
const listBody = document.createElement('div');
|
|
|
|
data.slice(0, 15).forEach(t => {
|
|
const row = document.createElement('div');
|
|
row.className = 'thread-item';
|
|
row.onclick = () => openThread(t.id);
|
|
row.style.cursor = 'pointer';
|
|
|
|
let tagsHtml = '';
|
|
if(t.isHot) tagsHtml += `<span class="tag red">HOT</span> `;
|
|
if(t.category === 'hardware') tagsHtml += `<span class="tag blue">HW</span> `;
|
|
|
|
row.innerHTML = `
|
|
<div class="thread-stats">
|
|
<span class="stat-count">${t.replies}</span>
|
|
</div>
|
|
<div class="thread-main">
|
|
<span class="thread-title">${tagsHtml}${t.title}</span>
|
|
<span class="thread-meta">
|
|
Posted ${formatDate(t.date)}
|
|
${t.replies > 50 ? '🔥' : ''}
|
|
</span>
|
|
</div>
|
|
<div style="width:100px; text-align:center; font-size:0.85rem;">
|
|
<img src="${t.author.avatar}" style="width:20px; vertical-align:middle; border-radius:50%;">
|
|
${t.author.name}
|
|
</div>
|
|
<div style="width:120px; text-align:right; font-size:0.8rem; color:#888;">
|
|
${timeAgo(t.date)}
|
|
</div>
|
|
`;
|
|
listBody.appendChild(row);
|
|
});
|
|
|
|
listCard.appendChild(listBody);
|
|
|
|
// Manual Pagination
|
|
const pagination = document.createElement('div');
|
|
pagination.className = 'pagination';
|
|
pagination.innerHTML = `
|
|
<div class="page-num active">1</div>
|
|
<div class="page-num">2</div>
|
|
<div class="page-num">3</div>
|
|
<div class="page-num">...</div>
|
|
<div class="page-num">9</div>
|
|
`;
|
|
|
|
container.appendChild(listCard);
|
|
container.appendChild(pagination);
|
|
}
|
|
|
|
function renderThreadDetail(container, threadId) {
|
|
const thread = DB.threads.find(t => t.id === threadId);
|
|
if(!thread) { container.innerHTML = "Thread Not Found"; return; }
|
|
|
|
// Breadcrumb
|
|
container.innerHTML = `
|
|
<div style="margin-bottom:15px; font-size:0.9rem;">
|
|
<a onclick="switchView('home')">Home</a> > ${getCategoryName(thread.category)} > Thread
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="post-title" style="border:none; border-bottom:1px solid var(--border);">
|
|
<h1 style="font-size:1.5rem; margin:0;">${thread.title}</h1>
|
|
<div style="margin-top:10px; font-size:0.85rem; color:#666;">
|
|
<span style="color:red;">[Read Permission 10]</span>
|
|
Views: ${thread.views} | Replies: ${thread.replies}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
// Generate Posts (Mock Replies)
|
|
const posts = generateMockReplies(thread);
|
|
|
|
posts.forEach((post, index) => {
|
|
const isLouZhu = index === 0;
|
|
const postEl = document.createElement('div');
|
|
postEl.className = 'card';
|
|
if(post.isSpam) postEl.classList.add('spam-mask'); // CSS logic for spam
|
|
|
|
postEl.innerHTML = `
|
|
<div class="post-container">
|
|
<div class="post-sidebar">
|
|
<img src="${post.author.avatar}" class="post-avatar-lg">
|
|
<div style="font-weight:bold; color:var(--primary);">${post.author.name}</div>
|
|
<div class="user-badge" style="background:${post.author.role === 'admin' ? '#000' : '#eee'}; color:${post.author.role === 'admin' ? '#fff' : '#333'}">
|
|
${post.author.role.toUpperCase()}
|
|
</div>
|
|
<ul style="font-size:0.8rem; text-align:left; margin-top:10px; color:#666; padding-left:10px;">
|
|
<li>UID: ${post.author.id}</li>
|
|
<li>Posts: ${Math.floor(Math.random()*1000)}</li>
|
|
<li>Gold: ${Math.floor(Math.random()*5000)}</li>
|
|
</ul>
|
|
</div>
|
|
<div class="post-content-area">
|
|
<div class="post-meta-header">
|
|
<span>Posted ${formatDate(post.date)} ${isLouZhu ? '<span class="tag red">OP</span>' : `#${index}`}</span>
|
|
<span>Author Only | Reverse</span>
|
|
</div>
|
|
<div class="post-body">
|
|
${post.content}
|
|
${post.attachment ? renderAttachment(post.attachment) : ''}
|
|
</div>
|
|
<div class="post-signature">
|
|
${post.signature || 'This user is lazy and hasn\'t written anything.'}
|
|
</div>
|
|
<div class="post-actions">
|
|
<button class="btn-action" onclick="showToast('Reported', 'success')">Report</button>
|
|
<button class="btn-action">Support(${Math.floor(Math.random()*10)})</button>
|
|
<button class="btn-action" onclick="openReply()">Reply</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
container.appendChild(postEl);
|
|
});
|
|
|
|
// Quick Reply Box
|
|
const replyBox = document.createElement('div');
|
|
replyBox.className = 'card';
|
|
replyBox.innerHTML = `
|
|
<div class="card-header">Quick Reply</div>
|
|
<div class="card-body">
|
|
<textarea style="width:100%; height:100px; padding:10px; border:1px solid #ddd;"></textarea>
|
|
<button class="btn btn-primary" style="margin-top:10px;" onclick="showToast('Reply Posted! (+1 Credit)', 'success')">Post Reply</button>
|
|
</div>
|
|
`;
|
|
container.appendChild(replyBox);
|
|
}
|
|
|
|
// --- Utils & Helpers ---
|
|
function generateMockReplies(thread) {
|
|
// Always include the OP
|
|
const list = [{
|
|
author: thread.author,
|
|
date: thread.date,
|
|
content: thread.content, // Now uses the realistic content content from initData
|
|
signature: "System.out.println('Hello World');",
|
|
attachment: thread.category === 'software' ? { name: "Error_Log.txt", size: "256 KB" } :
|
|
thread.category === 'hardware' ? { name: "BIOS_Backup.bin", size: "16 MB" } : null
|
|
}];
|
|
|
|
// Context-aware reply pool
|
|
const genericReplies = [
|
|
"OP is a good person.", "This tutorial is detailed, saved!",
|
|
"Watching the expert.", "I agree completely.",
|
|
"To be honest, great value.", "Suggest OP checks the other forum, lots of experts there.",
|
|
"Bumping.", "I don't understand but looks cool.", "Leaving a mark."
|
|
];
|
|
|
|
// Use thread-specific replies first, then generic ones
|
|
const availableReplies = (thread.mockReplies && thread.mockReplies.length > 0)
|
|
? [...thread.mockReplies, ...genericReplies]
|
|
: genericReplies;
|
|
|
|
// Generate random replies (between 3 and 10)
|
|
const count = Math.floor(Math.random() * 8) + 3;
|
|
|
|
for(let i=0; i<count; i++) {
|
|
// Pick a reply and ensure we don't repeat too often if possible
|
|
const replyText = availableReplies[i % availableReplies.length];
|
|
|
|
list.push({
|
|
author: DB.users[Math.floor(Math.random() * DB.users.length)],
|
|
date: new Date(new Date(thread.date).getTime() + (i+1)*Math.random()*3600000).toISOString(), // Time progresses
|
|
content: replyText,
|
|
signature: `Signature_User_${Math.floor(Math.random()*999)}`
|
|
});
|
|
}
|
|
return list;
|
|
}
|
|
|
|
function renderAttachment(att) {
|
|
return `
|
|
<fieldset style="border:1px solid #ddd; padding:10px; margin-top:20px; background:#f9f9f9;">
|
|
<legend style="font-weight:bold;">Attachment</legend>
|
|
📄 ${att.name} (${att.size}) <a href="#">[Download]</a>
|
|
</fieldset>
|
|
`;
|
|
}
|
|
|
|
function getCategoryName(cat) {
|
|
const map = { all: 'All Threads', hardware: 'Hardware', software: 'Software', water: 'Off-topic', market: 'Marketplace', feedback: 'Announcements' };
|
|
return map[cat] || 'Unknown';
|
|
}
|
|
|
|
// --- Actions ---
|
|
function switchView(viewName) {
|
|
STATE.currentView = viewName;
|
|
// Reset layout if needed
|
|
document.getElementById('mainLayout').className = viewName === 'thread' ? 'container layout-grid thread-view' : 'container layout-grid';
|
|
renderApp();
|
|
}
|
|
|
|
function openThread(id) {
|
|
STATE.viewingThreadId = id;
|
|
switchView('thread');
|
|
}
|
|
|
|
function filterCategory(cat) {
|
|
STATE.currentCategory = cat;
|
|
switchView('home');
|
|
}
|
|
|
|
// Modal & Toast
|
|
function openModal(id) {
|
|
document.getElementById(id).classList.add('show');
|
|
}
|
|
function closeModal(id) {
|
|
document.getElementById(id).classList.remove('show');
|
|
}
|
|
function showToast(msg, type) {
|
|
const t = document.getElementById('toast');
|
|
t.innerText = msg;
|
|
t.style.display = 'block';
|
|
t.style.background = type === 'warning' ? '#ff9800' : (type === 'success' ? '#4caf50' : '#333');
|
|
setTimeout(() => t.style.display = 'none', 3000);
|
|
}
|
|
|
|
// Auth Simulation
|
|
function doLogin() {
|
|
const user = document.getElementById('loginUser').value;
|
|
closeModal('loginModal');
|
|
STATE.currentUser = { name: user || "User" };
|
|
showToast(`Welcome back, ${STATE.currentUser.name}`, 'success');
|
|
updateUserUI();
|
|
}
|
|
|
|
function updateUserUI() {
|
|
const nav = document.getElementById('navUser');
|
|
if (STATE.currentUser) {
|
|
nav.innerHTML = `
|
|
<div style="display:flex; align-items:center; gap:10px; cursor:pointer;">
|
|
<span style="font-weight:bold;">${STATE.currentUser.name}</span>
|
|
<div class="user-avatar-sm" style="background:#4caf50;"></div>
|
|
<button class="btn" style="padding:2px 8px; font-size:0.8rem;" onclick="location.reload()">Logout</button>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
function formatDate(iso) {
|
|
return iso.replace('T', ' ').substring(0, 16);
|
|
}
|
|
|
|
function timeAgo(props) {
|
|
return "1 hour ago"; // Simplified
|
|
}
|
|
|
|
function insertText(prefix, suffix) {
|
|
const area = document.getElementById('newPostContent');
|
|
area.value += prefix + suffix;
|
|
}
|
|
|
|
function submitNewThread() {
|
|
closeModal('newThreadModal');
|
|
showToast('Posted Successfully! (Simulated)', 'success');
|
|
// Fake add
|
|
setTimeout(() => {
|
|
DB.threads.unshift({
|
|
id: 9999,
|
|
title: document.getElementById('newPostTitle').value || "No Title",
|
|
author: STATE.currentUser || DB.users[2],
|
|
replies: 0, views: 1, category: 'hardware',
|
|
date: new Date().toISOString(),
|
|
isHot: false
|
|
});
|
|
renderHome(document.getElementById('contentArea'));
|
|
}, 500);
|
|
}
|
|
|
|
// --- Init ---
|
|
window.onload = function() {
|
|
initData();
|
|
renderApp();
|
|
|
|
// Background Ping Simulation
|
|
setInterval(() => {
|
|
const ms = Math.floor(Math.random() * 50) + 10;
|
|
document.getElementById('pingValue').innerText = ms + 'ms';
|
|
document.getElementById('pingValue').style.color = ms > 100 ? 'red' : 'green';
|
|
}, 2000);
|
|
};
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html> |