You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

1686 lines
53 KiB

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态广场 - 青核 Youthome</title>
<style>
/* ============================================================
CSS Variables - 青核 Youthome Light Theme
============================================================ */
:root {
/* 品牌色 */
--primary: #17B0CF;
--primary-hover: #1298B3;
--primary-active: #0E8098;
--primary-light: #73D3E6;
--primary-bg: rgba(23, 176, 207, 0.1);
/* 页面与卡片 */
--page-bg: #F7F8FA;
--card-bg: #FFFFFF;
--sidebar-bg: #FFFFFF;
/* 文字 */
--text-primary: #333333;
--text-secondary: #666666;
--text-tertiary: #999999;
--text-placeholder: #BFBFBF;
--text-white: #FFFFFF;
/* 边框 */
--border: #E8E8E8;
--border-light: #F0F0F0;
/* 交互 */
--hover-bg: #F5F5F5;
--active-bg: rgba(23, 176, 207, 0.1);
/* 功能色 */
--success: #52C41A;
--warning: #FAAD14;
--error: #F5222D;
/* 圆角 */
--radius-card: 14px;
--radius-md: 12px;
--radius-sm: 10px;
--radius-tag: 8px;
--radius-full: 9999px;
/* 尺寸 */
--sidebar-width: 240px;
--feed-width: 1280px;
--right-sidebar-width: 280px;
--page-padding: 24px;
/* 阴影 */
--shadow-card: 0 2px 8px rgba(0, 0, 0, 0.04);
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
/* 过渡 */
--transition-fast: 0.15s ease;
--transition-base: 0.2s ease;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Segoe UI', 'SF Pro Display', 'Helvetica Neue', 'Microsoft YaHei', sans-serif;
background: var(--page-bg);
color: var(--text-primary);
font-size: 14px;
line-height: 1.57;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
min-height: 100vh;
}
a {
color: inherit;
text-decoration: none;
}
button {
font-family: inherit;
cursor: pointer;
border: none;
outline: none;
background: none;
color: inherit;
}
/* ============================================================
App Layout
============================================================ */
.app {
min-height: 100vh;
display: flex;
width: 1920px;
max-width: 100%;
overflow: hidden;
margin: 0 auto;
position: relative;
box-sizing: border-box;
background: var(--bg-page);
}
/* ============================================================
Left Sidebar
============================================================ */
.sidebar {
width: 230px;
background: var(--sidebar-bg);
border-right: 1px solid var(--border);
flex-shrink: 0;
position: sticky;
top: 0;
height: 100vh;
display: flex;
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
z-index: 20;
box-sizing: border-box;
}
.sidebar::-webkit-scrollbar {
width: 4px;
}
.sidebar::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 2px;
}
/* Logo */
.sidebar-logo {
padding: 20px 20px 18px;
border-bottom: 1px solid var(--border-light);
}
.logo {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
}
.logo-icon {
width: 36px;
height: 36px;
border-radius: 10px;
background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
color: #fff;
box-shadow: 0 3px 10px rgba(23, 176, 207, 0.3);
}
.logo-text {
font-size: 18px;
font-weight: 700;
color: var(--text-primary);
letter-spacing: 0.5px;
}
.logo-sub {
font-size: 11px;
color: var(--text-tertiary);
margin-top: 1px;
letter-spacing: 1px;
}
/* Publish Button */
.sidebar-publish {
padding: 16px 16px 12px;
}
.publish-btn {
width: 100%;
height: 42px;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
color: #fff;
border-radius: var(--radius-md);
font-size: 14px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: all var(--transition-fast);
box-shadow: 0 4px 12px rgba(23, 176, 207, 0.3);
}
.publish-btn:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(23, 176, 207, 0.4);
}
.publish-btn svg {
width: 18px;
height: 18px;
}
.publish-dropdown {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-left: 1px solid rgba(255, 255, 255, 0.2);
margin-left: 4px;
}
.publish-dropdown svg {
width: 14px;
height: 14px;
}
/* Nav Section */
.sidebar-nav {
flex: 1;
padding: 8px 12px;
display: flex;
flex-direction: column;
gap: 2px;
}
.nav-section-title {
font-size: 11px;
font-weight: 600;
color: var(--text-tertiary);
padding: 16px 14px 8px;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.nav-item {
display: flex;
align-items: center;
gap: 12px;
height: 44px;
padding: 0 14px;
border-radius: var(--radius-sm);
font-size: 14px;
font-weight: 500;
color: var(--text-secondary);
cursor: pointer;
transition: all var(--transition-fast);
position: relative;
}
.nav-item:hover {
background: var(--hover-bg);
color: var(--text-primary);
}
.nav-item.active {
background: var(--primary-bg);
color: var(--primary);
font-weight: 600;
}
.nav-item.active::before {
content: '';
position: absolute;
left: -12px;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 20px;
background: var(--primary);
border-radius: 0 2px 2px 0;
}
.nav-item svg {
width: 20px;
height: 20px;
flex-shrink: 0;
}
.nav-badge {
margin-left: auto;
min-width: 20px;
height: 18px;
padding: 0 6px;
background: var(--primary);
color: #fff;
font-size: 11px;
font-weight: 600;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
}
/* Sidebar Footer - User Card */
.sidebar-footer {
padding: 12px;
border-top: 1px solid var(--border-light);
}
.user-card {
display: flex;
align-items: center;
gap: 10px;
padding: 10px;
border-radius: var(--radius-sm);
cursor: pointer;
transition: background var(--transition-fast);
}
.user-card:hover {
background: var(--hover-bg);
}
.user-card-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary-light), var(--primary));
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 14px;
font-weight: 600;
flex-shrink: 0;
overflow: hidden;
}
.user-card-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.user-card-info {
flex: 1;
min-width: 0;
}
.user-card-name {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user-card-school {
font-size: 12px;
color: var(--text-tertiary);
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user-card-more {
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-tertiary);
flex-shrink: 0;
}
.user-card-more svg {
width: 16px;
height: 16px;
}
/* ============================================================
Main Content
============================================================ */
.main-content {
flex: 1;
padding: var(--page-padding);
display: flex;
justify-content: center;
gap: 24px;
background: var(--page-bg);
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}
/* ============================================================
Feed Main Column
============================================================ */
.feed-main {
flex: 1;
max-width: var(--feed-width);
min-width: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
/* Search Bar */
.search-bar {
display: flex;
align-items: center;
gap: 10px;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius-full);
padding: 0 20px;
height: 48px;
transition: all var(--transition-fast);
box-shadow: var(--shadow-card);
}
.search-bar:focus-within {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(23, 176, 207, 0.1), var(--shadow-card);
}
.search-bar-icon {
width: 18px;
height: 18px;
color: var(--text-tertiary);
flex-shrink: 0;
}
.search-bar-input {
flex: 1;
border: none;
outline: none;
background: transparent;
font-size: 14px;
color: var(--text-primary);
font-family: inherit;
}
.search-bar-input::placeholder {
color: var(--text-placeholder);
}
.search-bar-tag {
display: flex;
align-items: center;
gap: 4px;
padding: 4px 12px;
background: var(--primary-bg);
color: var(--primary);
border-radius: var(--radius-full);
font-size: 12px;
font-weight: 500;
flex-shrink: 0;
cursor: pointer;
transition: all var(--transition-fast);
}
.search-bar-tag:hover {
background: rgba(23, 176, 207, 0.18);
}
.search-bar-btn {
display: flex;
align-items: center;
gap: 4px;
padding: 6px 16px;
background: var(--primary);
color: #fff;
border-radius: var(--radius-full);
font-size: 13px;
font-weight: 500;
flex-shrink: 0;
transition: all var(--transition-fast);
}
.search-bar-btn:hover {
background: var(--primary-hover);
}
/* Feed Header */
.feed-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 2px;
}
.feed-tabs {
display: flex;
gap: 28px;
}
.feed-tab {
font-size: 16px;
font-weight: 600;
color: var(--text-tertiary);
cursor: pointer;
padding: 6px 0;
position: relative;
transition: color var(--transition-fast);
}
.feed-tab:hover {
color: var(--text-secondary);
}
.feed-tab.active {
color: var(--text-primary);
font-size: 18px;
}
.feed-tab.active::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 24px;
height: 3px;
background: var(--primary);
border-radius: 2px;
}
.feed-sort {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--text-secondary);
cursor: pointer;
padding: 8px 14px;
border-radius: var(--radius-sm);
background: var(--card-bg);
border: 1px solid var(--border);
transition: all var(--transition-fast);
}
.feed-sort:hover {
border-color: var(--primary);
color: var(--primary);
}
.feed-sort svg {
width: 14px;
height: 14px;
}
/* Publish Box */
.publish-box {
background: var(--card-bg);
border-radius: var(--radius-card);
border: 1px solid var(--border-light);
padding: 18px 20px;
box-shadow: var(--shadow-card);
}
.publish-box-row {
display: flex;
gap: 12px;
align-items: flex-start;
}
.publish-avatar {
width: 42px;
height: 42px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary-light), var(--primary));
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 15px;
font-weight: 600;
flex-shrink: 0;
}
.publish-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.publish-body {
flex: 1;
min-width: 0;
}
.publish-input {
width: 100%;
min-height: 44px;
background: transparent;
border: none;
outline: none;
color: var(--text-primary);
font-size: 15px;
resize: none;
font-family: inherit;
line-height: 1.6;
padding: 8px 0;
}
.publish-input::placeholder {
color: var(--text-placeholder);
}
.publish-actions {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 12px;
margin-top: 8px;
border-top: 1px solid var(--border-light);
}
.publish-tools {
display: flex;
gap: 4px;
}
.publish-tool {
width: 36px;
height: 36px;
border-radius: var(--radius-tag);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
cursor: pointer;
transition: all var(--transition-fast);
}
.publish-tool:hover {
background: var(--primary-bg);
color: var(--primary);
}
.publish-tool svg {
width: 18px;
height: 18px;
}
.publish-submit {
height: 36px;
padding: 0 22px;
background: var(--primary);
color: #fff;
border-radius: 18px;
font-size: 13px;
font-weight: 600;
transition: all var(--transition-fast);
box-shadow: 0 2px 8px rgba(23, 176, 207, 0.25);
}
.publish-submit:hover:not(:disabled) {
background: var(--primary-hover);
box-shadow: 0 4px 12px rgba(23, 176, 207, 0.35);
}
.publish-submit:disabled {
background: var(--border-light);
color: var(--text-tertiary);
cursor: not-allowed;
box-shadow: none;
}
/* ===== Feed Cards - 小红书风格瀑布流 ===== */
.feed-list {
column-count: 4;
column-gap: 16px;
}
.feed-card {
background: var(--card-bg);
border-radius: 12px;
overflow: hidden;
transition: all 0.25s ease;
cursor: pointer;
break-inside: avoid;
margin-bottom: 16px;
display: inline-block;
width: 100%;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.feed-card:hover {
box-shadow: 0 8px 24px rgba(0,0,0,0.1);
transform: translateY(-2px);
}
/* 卡片封面图 */
.card-cover {
position: relative;
width: 100%;
overflow: hidden;
background: #f5f5f5;
}
.card-cover img {
width: 100%;
display: block;
object-fit: cover;
}
.card-cover.video::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 44px;
height: 44px;
background: rgba(0,0,0,0.5);
border-radius: 50%;
backdrop-filter: blur(4px);
z-index: 2;
}
.card-cover.video::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
border-left: 14px solid #fff;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
margin-left: 3px;
z-index: 3;
}
.cover-duration {
position: absolute;
right: 8px;
bottom: 8px;
background: rgba(0,0,0,0.6);
color: #fff;
font-size: 11px;
padding: 2px 6px;
border-radius: 4px;
z-index: 2;
}
/* 卡片内容区 */
.card-content {
padding: 10px 12px 12px;
}
.card-title {
font-size: 14px;
line-height: 1.5;
color: var(--text-primary);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 8px;
font-weight: 500;
}
/* 卡片底部:作者 + 点赞 */
.card-bottom {
display: flex;
align-items: center;
justify-content: space-between;
}
.card-author-row {
display: flex;
align-items: center;
gap: 6px;
flex: 1;
min-width: 0;
}
.card-avatar-sm {
width: 20px;
height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 10px;
font-weight: 600;
flex-shrink: 0;
}
.card-author-name {
font-size: 12px;
color: var(--text-tertiary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
}
.card-like {
display: flex;
align-items: center;
gap: 3px;
font-size: 12px;
color: var(--text-tertiary);
flex-shrink: 0;
}
.card-like svg {
width: 14px;
height: 14px;
}
/* 封面渐变背景 */
.cover-1 { background: linear-gradient(135deg, #A8E6CF 0%, #17B0CF 100%); height: 200px; }
.cover-2 { background: linear-gradient(135deg, #FFD4A3 0%, #FF9F45 100%); height: 260px; }
.cover-3 { background: linear-gradient(135deg, #D4B5FF 0%, #9254DE 100%); height: 180px; }
.cover-4 { background: linear-gradient(135deg, #FFB3D9 0%, #EB2F96 50%, #FFD4A3 100%); height: 300px; }
.cover-5 { background: linear-gradient(135deg, #B5D8FF 0%, #4A90FF 100%); height: 220px; }
.cover-6 { background: linear-gradient(135deg, #FFE58F 0%, #FAAD14 100%); height: 240px; }
.cover-7 { background: linear-gradient(135deg, #95E1B5 0%, #52C41A 100%); height: 190px; }
.cover-8 { background: linear-gradient(135deg, #FFCCE0 0%, #FF7AB6 100%); height: 280px; }
.cover-9 { background: linear-gradient(135deg, #E8D5FF 0%, #7B61FF 100%); height: 210px; }
.cover-10 { background: linear-gradient(135deg, #C4F0FF 0%, #36CFFB 100%); height: 250px; }
.cover-11 { background: linear-gradient(135deg, #FFE0CC 0%, #FF7F50 100%); height: 230px; }
.cover-12 { background: linear-gradient(135deg, #D4F7E7 0%, #34C77B 100%); height: 270px; }
.feed-card:hover .play-icon {
opacity: 1;
}
/* ============================================================
Right Sidebar
============================================================ */
.feed-right {
width: var(--right-sidebar-width);
flex-shrink: 0;
position: sticky;
top: 24px;
align-self: flex-start;
display: flex;
flex-direction: column;
gap: 16px;
padding-top: 56px;
box-sizing: border-box;
}
.widget {
background: var(--card-bg);
border-radius: var(--radius-card);
border: 1px solid var(--border-light);
padding: 18px 18px 14px;
box-shadow: var(--shadow-card);
}
.widget-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
}
.widget-title {
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
display: flex;
align-items: center;
gap: 8px;
}
.widget-title-icon {
width: 6px;
height: 16px;
background: var(--primary);
border-radius: 3px;
}
.widget-more {
font-size: 12px;
color: var(--text-tertiary);
cursor: pointer;
transition: color var(--transition-fast);
display: flex;
align-items: center;
gap: 2px;
}
.widget-more:hover {
color: var(--primary);
}
.widget-more svg {
width: 12px;
height: 12px;
}
/* Trending Topics */
.topic-list {
display: flex;
flex-direction: column;
}
.topic-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 8px;
cursor: pointer;
transition: all var(--transition-fast);
border-radius: var(--radius-sm);
margin: 0 -4px;
}
.topic-item:hover {
background: var(--hover-bg);
}
.topic-rank {
width: 22px;
font-size: 15px;
font-weight: 700;
text-align: center;
flex-shrink: 0;
color: var(--text-tertiary);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.topic-item:nth-child(1) .topic-rank { color: #F5222D; }
.topic-item:nth-child(2) .topic-rank { color: #FF7A45; }
.topic-item:nth-child(3) .topic-rank { color: #FAAD14; }
.topic-info {
flex: 1;
min-width: 0;
}
.topic-name {
font-size: 14px;
font-weight: 500;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.topic-count {
font-size: 12px;
color: var(--text-tertiary);
margin-top: 2px;
}
.topic-tag {
font-size: 10px;
padding: 2px 6px;
border-radius: 4px;
flex-shrink: 0;
font-weight: 600;
letter-spacing: 0.3px;
}
.topic-tag.hot {
background: rgba(245, 34, 45, 0.1);
color: #F5222D;
}
.topic-tag.new {
background: rgba(82, 196, 26, 0.1);
color: #52C41A;
}
/* Recommended Users */
.user-list {
display: flex;
flex-direction: column;
gap: 14px;
}
.user-item {
display: flex;
align-items: center;
gap: 10px;
}
.user-item-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 14px;
font-weight: 600;
flex-shrink: 0;
overflow: hidden;
}
.user-item-avatar.color-1 { background: linear-gradient(135deg, var(--primary-light), var(--primary)); }
.user-item-avatar.color-2 { background: linear-gradient(135deg, #FFD4A3, #FF9F45); }
.user-item-avatar.color-3 { background: linear-gradient(135deg, #95E1B5, #52C41A); }
.user-item-avatar.color-4 { background: linear-gradient(135deg, #D4B5FF, #9254DE); }
.user-item-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.user-item-info {
flex: 1;
min-width: 0;
}
.user-item-name {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user-item-desc {
font-size: 12px;
color: var(--text-tertiary);
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.follow-btn {
height: 28px;
padding: 0 14px;
background: var(--primary-bg);
color: var(--primary);
border-radius: 14px;
font-size: 12px;
font-weight: 600;
transition: all var(--transition-fast);
flex-shrink: 0;
border: 1px solid transparent;
}
.follow-btn:hover {
background: var(--primary);
color: #fff;
}
.follow-btn.followed {
background: var(--hover-bg);
color: var(--text-secondary);
}
.follow-btn.followed:hover {
background: var(--border);
color: var(--text-primary);
}
/* ============================================================
Global Scrollbar
============================================================ */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-thumb {
background: #D9D9D9;
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: #BFBFBF;
}
::-webkit-scrollbar-track {
background: transparent;
}
</style>
<link rel="stylesheet" href="../css/web-refresh.css?v=20261020-brand-color">
</head>
<body>
<div class="app">
<!-- ===== Left Sidebar ===== -->
<aside class="sidebar">
<!-- Logo -->
<div class="sidebar-logo">
<div class="logo">
<div class="logo-icon">青</div>
<div>
<div class="logo-text">青核 Youthome</div>
<div class="logo-sub">青年成长社区</div>
</div>
</div>
</div>
<!-- Publish Button -->
<div class="sidebar-publish">
<button class="publish-btn">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 5v14M5 12h14"></path>
</svg>
<span>发布动态</span>
<span class="publish-dropdown">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</span>
</button>
</div>
<!-- Nav -->
<nav class="sidebar-nav">
<div class="nav-section-title">探索</div>
<div class="nav-item active">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"></path>
</svg>
<span>动态广场</span>
</div>
<div class="nav-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polygon points="23 7 16 12 23 17 23 7"></polygon>
<rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
</svg>
<span>视频</span>
</div>
<div class="nav-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
<line x1="16" y1="2" x2="16" y2="6"></line>
<line x1="8" y1="2" x2="8" y2="6"></line>
<line x1="3" y1="10" x2="21" y2="10"></line>
</svg>
<span>活动</span>
</div>
<div class="nav-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M16 3h5v5"></path>
<path d="M8.5 8.5 21 21"></path>
<path d="M21 16v5h-5"></path>
<path d="m15 15-6 6"></path>
<path d="M3 8V3h5"></path>
<path d="M3 16 8 21"></path>
</svg>
<span>话题广场</span>
</div>
<div class="nav-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
</svg>
<span>聊天消息</span>
<span class="nav-badge">3</span>
</div>
<div class="nav-section-title">我的</div>
<div class="nav-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
<span>个人中心</span>
</div>
<div class="nav-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
</svg>
<span>我的收藏</span>
</div>
<div class="nav-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="3"></circle>
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
</svg>
<span>设置</span>
</div>
</nav>
<!-- Sidebar Footer - User Card -->
<div class="sidebar-footer">
<div class="user-card">
<div class="user-card-avatar">
<img src="../assets/avatar-02-male-short-medium.jpg" alt="用户头像" onerror="this.style.display='none';this.parentElement.textContent='我'">
</div>
<div class="user-card-info">
<div class="user-card-name">我是小青</div>
<div class="user-card-school">清华大学 · 大三</div>
</div>
<div class="user-card-more">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="1"></circle>
<circle cx="12" cy="5" r="1"></circle>
<circle cx="12" cy="19" r="1"></circle>
</svg>
</div>
</div>
</div>
</aside>
<!-- ===== Main Content ===== -->
<main class="main-content">
<!-- Feed Main Column -->
<div class="feed-main">
<!-- Search Bar -->
<div class="search-bar">
<svg class="search-bar-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
<input type="text" class="search-bar-input" placeholder="搜索动态、话题、用户…">
<div class="search-bar-tag">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path>
<line x1="7" y1="7" x2="7.01" y2="7"></line>
</svg>
校园
</div>
<button class="search-bar-btn">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
搜索
</button>
</div>
<!-- Feed Header -->
<div class="feed-header">
<div class="feed-tabs">
<div class="feed-tab active">推荐</div>
<div class="feed-tab">关注</div>
<div class="feed-tab">热门</div>
</div>
<div class="feed-sort">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="3 6 5 4 7 6"></polyline>
<polyline points="21 18 19 20 17 18"></polyline>
<line x1="5" y1="4" x2="5" y2="20"></line>
<line x1="19" y1="4" x2="19" y2="20"></line>
</svg>
最新
</div>
</div>
<!-- Feed 列表 -->
<div class="feed-list">
<!-- Card 1 -->
<div class="feed-card">
<div class="card-cover cover-4"></div>
<div class="card-content">
<div class="card-title">期末周图书馆生存指南|亲测有效的复习方法分享📚</div>
<div class="card-bottom">
<div class="card-author-row">
<div class="card-avatar-sm" style="background: linear-gradient(135deg, #73D3E6, #17B0CF);">林</div>
<span class="card-author-name">林晚星</span>
</div>
<div class="card-like">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
<span>3.2k</span>
</div>
</div>
</div>
</div>
<!-- Card 2 -->
<div class="feed-card">
<div class="card-cover cover-2"></div>
<div class="card-content">
<div class="card-title">食堂新出的麻辣香锅也太绝了吧😭</div>
<div class="card-bottom">
<div class="card-author-row">
<div class="card-avatar-sm" style="background: linear-gradient(135deg, #FFD4A3, #FF9F45);">陈</div>
<span class="card-author-name">陈皮皮</span>
</div>
<div class="card-like">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
<span>1.8k</span>
</div>
</div>
</div>
</div>
<!-- Card 3 -->
<div class="feed-card">
<div class="card-cover cover-1"></div>
<div class="card-content">
<div class="card-title">校园秋景|银杏大道随手拍都是壁纸🍂</div>
<div class="card-bottom">
<div class="card-author-row">
<div class="card-avatar-sm" style="background: linear-gradient(135deg, #95E1B5, #52C41A);">苏</div>
<span class="card-author-name">苏慕白</span>
</div>
<div class="card-like">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
<span>5.6k</span>
</div>
</div>
</div>
</div>
<!-- Card 4 -->
<div class="feed-card">
<div class="card-cover cover-6"></div>
<div class="card-content">
<div class="card-title">大学生平价穿搭分享|一周不重样👕</div>
<div class="card-bottom">
<div class="card-author-row">
<div class="card-avatar-sm" style="background: linear-gradient(135deg, #FFB3D9, #EB2F96);">周</div>
<span class="card-author-name">周游世界</span>
</div>
<div class="card-like">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
<span>2.1k</span>
</div>
</div>
</div>
</div>
<!-- Card 5: 视频 -->
<div class="feed-card">
<div class="card-cover cover-5 video">
<div class="cover-duration">03:24</div>
</div>
<div class="card-content">
<div class="card-title">校园vlog | 带你逛我们学校的图书馆</div>
<div class="card-bottom">
<div class="card-author-row">
<div class="card-avatar-sm" style="background: linear-gradient(135deg, #B5D8FF, #4A90FF);">王</div>
<span class="card-author-name">王小明</span>
</div>
<div class="card-like">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
<span>4.7k</span>
</div>
</div>
</div>
</div>
<!-- Card 6 -->
<div class="feed-card">
<div class="card-cover cover-8"></div>
<div class="card-content">
<div class="card-title">宿舍改造|300元打造ins风小窝✨</div>
<div class="card-bottom">
<div class="card-author-row">
<div class="card-avatar-sm" style="background: linear-gradient(135deg, #D4B5FF, #9254DE);">张</div>
<span class="card-author-name">张小满</span>
</div>
<div class="card-like">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
<span>6.8k</span>
</div>
</div>
</div>
</div>
<!-- Card 7 -->
<div class="feed-card">
<div class="card-cover cover-3"></div>
<div class="card-content">
<div class="card-title">考研上岸经验贴|双非逆袭985</div>
<div class="card-bottom">
<div class="card-author-row">
<div class="card-avatar-sm" style="background: linear-gradient(135deg, #FFE58F, #FAAD14);">李</div>
<span class="card-author-name">李学长</span>
</div>
<div class="card-like">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
<span>8.9k</span>
</div>
</div>
</div>
</div>
<!-- Card 8 -->
<div class="feed-card">
<div class="card-cover cover-10"></div>
<div class="card-content">
<div class="card-title">探店|学校西门新开的咖啡店也太好拍了☕</div>
<div class="card-bottom">
<div class="card-author-row">
<div class="card-avatar-sm" style="background: linear-gradient(135deg, #C4F0FF, #36CFFB);">赵</div>
<span class="card-author-name">赵雨桐</span>
</div>
<div class="card-like">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
<span>1.5k</span>
</div>
</div>
</div>
</div>
<!-- Card 9 -->
<div class="feed-card">
<div class="card-cover cover-9"></div>
<div class="card-content">
<div class="card-title">社团招新|摄影社欢迎喜欢拍照的你📷</div>
<div class="card-bottom">
<div class="card-author-row">
<div class="card-avatar-sm" style="background: linear-gradient(135deg, #E8D5FF, #7B61FF);">钱</div>
<span class="card-author-name">钱多多</span>
</div>
<div class="card-like">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
<span>956</span>
</div>
</div>
</div>
</div>
<!-- Card 10: 视频 -->
<div class="feed-card">
<div class="card-cover cover-7 video">
<div class="cover-duration">02:15</div>
</div>
<div class="card-content">
<div class="card-title">运动会精彩瞬间|这也太燃了吧🏃‍♂️</div>
<div class="card-bottom">
<div class="card-author-row">
<div class="card-avatar-sm" style="background: linear-gradient(135deg, #95E1B5, #52C41A);">孙</div>
<span class="card-author-name">孙阳光</span>
</div>
<div class="card-like">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
<span>3.6k</span>
</div>
</div>
</div>
</div>
<!-- Card 11 -->
<div class="feed-card">
<div class="card-cover cover-11"></div>
<div class="card-content">
<div class="card-title">实习第一天|记录我的大厂生活💼</div>
<div class="card-bottom">
<div class="card-author-row">
<div class="card-avatar-sm" style="background: linear-gradient(135deg, #FFE0CC, #FF7F50);">吴</div>
<span class="card-author-name">吴一凡</span>
</div>
<div class="card-like">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
<span>1.2k</span>
</div>
</div>
</div>
</div>
<!-- Card 12 -->
<div class="feed-card">
<div class="card-cover cover-12"></div>
<div class="card-content">
<div class="card-title">奖学金到手啦!分享我的学习方法📝</div>
<div class="card-bottom">
<div class="card-author-row">
<div class="card-avatar-sm" style="background: linear-gradient(135deg, #D4F7E7, #34C77B);">郑</div>
<span class="card-author-name">郑学霸</span>
</div>
<div class="card-like">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
<span>2.3k</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Right Sidebar -->
<aside class="feed-right">
<!-- Trending Topics -->
<div class="widget">
<div class="widget-header">
<h3 class="widget-title">
<span class="widget-title-icon"></span>
热门话题
</h3>
<button class="widget-more topic-more-button" type="button" aria-expanded="false">
更多
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
</button>
</div>
<div class="topic-list">
<div class="topic-item">
<span class="topic-rank">1</span>
<div class="topic-info">
<div class="topic-name">#期末复习攻略</div>
<div class="topic-count">12.8万动态</div>
</div>
<span class="topic-tag hot">热</span>
</div>
<div class="topic-item">
<span class="topic-rank">2</span>
<div class="topic-info">
<div class="topic-name">#校园春日穿搭</div>
<div class="topic-count">8.6万动态</div>
</div>
<span class="topic-tag new">新</span>
</div>
<div class="topic-item">
<span class="topic-rank">3</span>
<div class="topic-info">
<div class="topic-name">#考研上岸经验</div>
<div class="topic-count">6.3万动态</div>
</div>
</div>
<div class="topic-item">
<span class="topic-rank">4</span>
<div class="topic-info">
<div class="topic-name">#社团招新季</div>
<div class="topic-count">5.1万动态</div>
</div>
</div>
<div class="topic-item">
<span class="topic-rank">5</span>
<div class="topic-info">
<div class="topic-name">#宿舍改造大赛</div>
<div class="topic-count">4.2万动态</div>
</div>
</div>
<div class="topic-item">
<span class="topic-rank">6</span>
<div class="topic-info">
<div class="topic-name">#实习求职分享</div>
<div class="topic-count">3.9万动态</div>
</div>
</div>
<div class="topic-item">
<span class="topic-rank">7</span>
<div class="topic-info">
<div class="topic-name">#校园美食地图</div>
<div class="topic-count">3.5万动态</div>
</div>
</div>
<div class="topic-item">
<span class="topic-rank">8</span>
<div class="topic-info">
<div class="topic-name">#运动会精彩瞬间</div>
<div class="topic-count">2.8万动态</div>
</div>
</div>
<div class="topic-item topic-item-extra" hidden>
<span class="topic-rank">9</span><div class="topic-info"><div class="topic-name">#四六级备考</div><div class="topic-count">2.4万动态</div></div>
</div>
<div class="topic-item topic-item-extra" hidden>
<span class="topic-rank">10</span><div class="topic-info"><div class="topic-name">#秋招信息站</div><div class="topic-count">2.1万动态</div></div><span class="topic-tag new">新</span>
</div>
<div class="topic-item topic-item-extra" hidden>
<span class="topic-rank">11</span><div class="topic-info"><div class="topic-name">#校园摄影日记</div><div class="topic-count">1.9万动态</div></div>
</div>
<div class="topic-item topic-item-extra" hidden>
<span class="topic-rank">12</span><div class="topic-info"><div class="topic-name">#周末去哪儿</div><div class="topic-count">1.7万动态</div></div>
</div>
</div>
</div>
<!-- Recommended Users -->
<div class="widget">
<div class="widget-header">
<h3 class="widget-title">
<span class="widget-title-icon"></span>
推荐关注
</h3>
<button class="widget-more recommendation-refresh" type="button">
换一批
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="23 4 23 10 17 10"></polyline>
<path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path>
</svg>
</button>
</div>
<div class="user-list">
<div class="user-item">
<div class="user-item-avatar color-1">
<img src="../assets/avatar-05-female-ponytail-medium.jpg" alt="头像" onerror="this.style.display='none';this.parentElement.textContent='苏'">
</div>
<div class="user-item-info">
<div class="user-item-name">苏梦瑶</div>
<div class="user-item-desc">中国人民大学 · 摄影</div>
</div>
<button class="follow-btn">关注</button>
</div>
<div class="user-item">
<div class="user-item-avatar color-2">
<img src="../assets/avatar-08-male-messy-medium.jpg" alt="头像" onerror="this.style.display='none';this.parentElement.textContent='周'">
</div>
<div class="user-item-info">
<div class="user-item-name">周浩然</div>
<div class="user-item-desc">同济大学 · 建筑设计</div>
</div>
<button class="follow-btn">关注</button>
</div>
<div class="user-item">
<div class="user-item-avatar color-3">
<img src="../assets/avatar-09-female-bob-dark.jpg" alt="头像" onerror="this.style.display='none';this.parentElement.textContent='黄'">
</div>
<div class="user-item-info">
<div class="user-item-name">黄诗雅</div>
<div class="user-item-desc">中山大学 · 音乐</div>
</div>
<button class="follow-btn">关注</button>
</div>
<div class="user-item">
<div class="user-item-avatar color-4">
<img src="../assets/avatar-01-female-short-light.jpg" alt="头像" onerror="this.style.display='none';this.parentElement.textContent='吴'">
</div>
<div class="user-item-info">
<div class="user-item-name">吴一凡</div>
<div class="user-item-desc">南京大学 · 旅行博主</div>
</div>
<button class="follow-btn">关注</button>
</div>
</div>
</div>
</aside>
</main>
</div>
<script>
// Publish box interaction
const publishInput = document.querySelector('.publish-input');
const publishSubmit = document.querySelector('.publish-submit');
if (publishInput && publishSubmit) {
publishInput.addEventListener('input', function() {
publishSubmit.disabled = this.value.trim().length === 0;
this.style.height = 'auto';
this.style.height = Math.min(this.scrollHeight, 180) + 'px';
});
}
// Like button interaction
document.querySelectorAll('.post-action').forEach(action => {
action.addEventListener('click', function() {
const svgPath = this.querySelector('svg path');
if (svgPath && svgPath.getAttribute('d') && svgPath.getAttribute('d').indexOf('M20.84') !== -1) {
const isLiked = this.classList.contains('liked');
const countEl = this.querySelector('span');
let count = parseInt(countEl.textContent);
if (isLiked) {
this.classList.remove('liked');
countEl.textContent = count - 1;
} else {
this.classList.add('liked');
countEl.textContent = count + 1;
}
}
});
});
// Feed tabs
document.querySelectorAll('.feed-tab').forEach(tab => {
tab.addEventListener('click', function() {
document.querySelectorAll('.feed-tab').forEach(t => t.classList.remove('active'));
this.classList.add('active');
});
});
</script>
<script src="../js/web-local-data.js?v=20261016-local" defer></script>
<script src="../js/web-api.js?v=20261020-api" defer></script>
<script src="../js/web-shell.js?v=20261013-publish" defer></script>
<script src="../js/web-publishing.js?v=20261016-local" defer></script>
</body>
</html>