12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007 |
- <!DOCTYPE html>
- <html lang="zh-CN">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>大学生兴趣伙伴 App - 页面预览</title>
- <style>
- body {
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
- margin: 0;
- padding: 0;
- background-color: #f0f2f5;
- display: flex;
- justify-content: center;
- align-items: flex-start; /* Align items to the top */
- padding-top: 20px; /* Add some top padding */
- padding-bottom: 100px; /* Add padding to see all content */
- }
- .phone-mockup {
- width: 375px; /* Typical phone width */
- height: 750px; /* Typical phone height */
- border: 10px solid #333;
- border-radius: 40px;
- background-color: #fff;
- box-shadow: 0 10px 30px rgba(0,0,0,0.2);
- position: relative; /* Needed for absolute positioning of header/footer */
- overflow: hidden; /* Hide content that overflows */
- display: flex;
- flex-direction: column;
- }
- .app-header {
- background-color: #007bff;
- color: white;
- padding: 15px;
- text-align: center;
- font-weight: bold;
- font-size: 1.1em;
- flex-shrink: 0; /* Prevent header from shrinking */
- position: sticky; /* Keep header visible when scrolling content */
- top: 0;
- z-index: 10;
- display: flex;
- align-items: center;
- justify-content: space-between; /* Align items */
- }
- .app-header .icon, .app-header .back-button {
- color: white;
- text-decoration: none;
- font-size: 1.2em;
- padding: 0 10px;
- }
- .app-header .back-button {
- font-size: 1.5em; /* Make back arrow slightly larger */
- }
- .app-content {
- flex-grow: 1; /* Allow content to fill available space */
- overflow-y: auto; /* Enable scrolling for content */
- padding: 15px;
- }
- .app-footer {
- display: flex;
- justify-content: space-around;
- padding: 10px 0;
- border-top: 1px solid #eee;
- background-color: #fff;
- flex-shrink: 0; /* Prevent footer from shrinking */
- position: sticky; /* Keep footer visible */
- bottom: 0;
- z-index: 10;
- }
- .tab-item {
- text-align: center;
- color: #888;
- text-decoration: none;
- font-size: 0.8em;
- }
- .tab-item.active {
- color: #007bff;
- }
- .tab-item span { /* Icon placeholder */
- display: block;
- font-size: 1.5em;
- margin-bottom: 3px;
- }
- /* Basic Element Styles */
- h2, h3 { margin-top: 10px; margin-bottom: 10px; color: #333; }
- p { color: #555; line-height: 1.5; margin-bottom: 10px; }
- button, .button-link {
- display: inline-block;
- padding: 10px 15px;
- background-color: #007bff;
- color: white;
- border: none;
- border-radius: 20px;
- cursor: pointer;
- text-align: center;
- font-size: 0.9em;
- margin: 5px 0;
- text-decoration: none;
- }
- button:hover, .button-link:hover { background-color: #0056b3; }
- button.secondary, .button-link.secondary { background-color: #6c757d; }
- button.secondary:hover, .button-link.secondary:hover { background-color: #5a6268; }
- button.outline, .button-link.outline { background-color: transparent; border: 1px solid #007bff; color: #007bff; }
- button.outline:hover, .button-link.outline:hover { background-color: rgba(0, 123, 255, 0.1); }
- input[type="text"], input[type="password"], input[type="email"], textarea, select {
- width: calc(100% - 22px); /* Adjust for padding and border */
- padding: 10px;
- margin-bottom: 10px;
- border: 1px solid #ccc;
- border-radius: 5px;
- font-size: 1em;
- }
- textarea { height: 80px; resize: vertical; }
- /* Component Styles */
- .card {
- background-color: #fff;
- border: 1px solid #eee;
- border-radius: 8px;
- padding: 15px;
- margin-bottom: 15px;
- box-shadow: 0 2px 5px rgba(0,0,0,0.05);
- }
- .user-card, .message-item, .group-item, .event-item, .notification-item, .skill-item {
- display: flex;
- align-items: center;
- margin-bottom: 15px;
- padding-bottom: 10px;
- border-bottom: 1px solid #f0f0f0;
- }
- .user-card:last-child, .message-item:last-child, .group-item:last-child, .event-item:last-child, .notification-item:last-child, .skill-item:last-child {
- border-bottom: none;
- margin-bottom: 0;
- padding-bottom: 0;
- }
- .avatar {
- width: 50px;
- height: 50px;
- border-radius: 50%;
- background-color: #e0e0e0;
- margin-right: 15px;
- object-fit: cover; /* Make images fit well */
- flex-shrink: 0;
- }
- .content-details { flex-grow: 1; }
- .content-details h3 { margin: 0 0 5px 0; font-size: 1em; }
- .content-details p { margin: 0; font-size: 0.9em; color: #777; }
- .user-card .actions { margin-left: auto; }
- .interest-tag {
- display: inline-block;
- background-color: #e7f3ff;
- color: #007bff;
- padding: 3px 8px;
- border-radius: 15px;
- font-size: 0.8em;
- margin: 2px;
- border: 1px solid #cce5ff;
- }
- .interest-category h3 { font-size: 1em; margin-bottom: 5px; border-bottom: 1px solid #eee; padding-bottom: 5px;}
- .interest-category .tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 15px;}
- .interest-category .tag-button {
- background-color: #f0f0f0;
- border: 1px solid #ddd;
- color: #555;
- padding: 5px 10px;
- border-radius: 15px;
- font-size: 0.9em;
- cursor: pointer;
- }
- .interest-category .tag-button.selected {
- background-color: #007bff;
- color: white;
- border-color: #007bff;
- }
- .chat-bubble {
- max-width: 75%;
- padding: 10px 15px;
- border-radius: 18px;
- margin-bottom: 10px;
- line-height: 1.4;
- word-wrap: break-word;
- }
- .chat-bubble.sent {
- background-color: #007bff;
- color: white;
- margin-left: auto;
- border-bottom-right-radius: 5px;
- }
- .chat-bubble.received {
- background-color: #e9ecef;
- color: #333;
- margin-right: auto;
- border-bottom-left-radius: 5px;
- }
- .chat-input {
- display: flex;
- padding: 10px;
- border-top: 1px solid #eee;
- background: #f8f9fa;
- }
- .chat-input input { flex-grow: 1; margin-right: 10px; margin-bottom: 0; }
- .profile-header { text-align: center; margin-bottom: 20px; }
- .profile-header .avatar { width: 100px; height: 100px; margin: 0 auto 10px auto; }
- .profile-header h2 { margin: 5px 0; }
- .profile-header p { color: #666; font-size: 0.9em; }
- .section-title { font-weight: bold; margin-top: 20px; margin-bottom: 10px; border-bottom: 1px solid #eee; padding-bottom: 5px;}
- .map-placeholder {
- width: 100%;
- height: 300px;
- background-color: #e0e0e0;
- display: flex;
- justify-content: center;
- align-items: center;
- color: #999;
- font-style: italic;
- text-align: center;
- border-radius: 8px;
- border: 1px dashed #ccc;
- position: relative;
- }
- .map-placeholder::after { /* Simple pin example */
- content: '📍';
- font-size: 2em;
- position: absolute;
- top: 40%;
- left: 50%;
- transform: translate(-50%, -50%);
- }
- .map-placeholder p { padding: 0 20px;}
- /* Hide all pages initially */
- .app-page { display: none; }
- /* Show the default page (Home) */
- #page-home { display: block; }
- </style>
- </head>
- <body>
- <div class="phone-mockup">
- <!-- Dynamic Header will be controlled by JS in a real app -->
- <!-- Placeholder Header -->
- <div class="app-header" id="app-header">
- <!-- Content changes based on active page -->
- </div>
- <!-- Content Area: Contains all pages -->
- <div class="app-content">
- <!-- PAGE: Home / Feed -->
- <div class="app-page" id="page-home">
- <script>document.getElementById('app-header').innerHTML = '<span>兴趣伙伴</span><a href="#page-notifications" class="icon">🔔</a>';</script>
- <h2>为你推荐</h2>
- <div class="card user-card">
- <img src="https://via.placeholder.com/50/FFA500/FFFFFF?text=U1" alt="User Avatar" class="avatar">
- <div class="content-details">
- <h3>张伟 <span style="font-size: 0.8em; color: #777;">(北京大学)</span></h3>
- <p>共同兴趣: <span class="interest-tag">摄影</span> <span class="interest-tag">爬山</span></p>
- <p style="font-size: 0.8em; color: #999;">"周末想找人一起去奥森拍照~"</p>
- </div>
- <div class="actions">
- <a href="#page-chat" class="button-link outline" style="padding: 5px 10px; font-size: 0.8em;">打招呼</a>
- </div>
- </div>
- <div class="card user-card">
- <img src="https://via.placeholder.com/50/4682B4/FFFFFF?text=U2" alt="User Avatar" class="avatar">
- <div class="content-details">
- <h3>李静 <span style="font-size: 0.8em; color: #777;">(清华大学)</span></h3>
- <p>共同兴趣: <span class="interest-tag">日语学习</span> <span class="interest-tag">看动漫</span></p>
- <p style="font-size: 0.8em; color: #999;">"寻找N1备考伙伴,互相监督!"</p>
- </div>
- <div class="actions">
- <a href="#page-chat" class="button-link outline" style="padding: 5px 10px; font-size: 0.8em;">打招呼</a>
- </div>
- </div>
- <div class="card user-card">
- <img src="https://via.placeholder.com/50/32CD32/FFFFFF?text=U3" alt="User Avatar" class="avatar">
- <div class="content-details">
- <h3>王磊 <span style="font-size: 0.8em; color: #777;">(人民大学)</span></h3>
- <p>共同兴趣: <span class="interest-tag">篮球</span> <span class="interest-tag">说唱音乐</span></p>
- <p style="font-size: 0.8em; color: #999;">"下午东操场3v3,来不来?"</p>
- </div>
- <div class="actions">
- <a href="#page-chat" class="button-link outline" style="padding: 5px 10px; font-size: 0.8em;">打招呼</a>
- </div>
- </div>
- <h2>附近的活动</h2>
- <div class="card event-item">
- <img src="https://via.placeholder.com/50/FF6347/FFFFFF?text=E" alt="Event Icon" class="avatar" style="border-radius: 8px;">
- <div class="content-details">
- <h3>周末狼人杀局</h3>
- <p>时间: 周六 14:00</p>
- <p>地点: 学校咖啡厅</p>
- </div>
- <div class="actions">
- <a href="#page-event-detail" class="button-link outline" style="padding: 5px 10px; font-size: 0.8em;">查看详情</a>
- </div>
- </div>
- </div>
- <!-- PAGE: Discover / Search -->
- <div class="app-page" id="page-discover">
- <script>document.getElementById('app-header').innerHTML = '<span>发现</span>';</script>
- <input type="text" placeholder="搜索用户、兴趣、小组、活动...">
- <button style="width: 100%; margin-bottom: 15px;">搜索</button>
- <h3>按兴趣浏览</h3>
- <div>
- <span class="interest-tag">摄影</span>
- <span class="interest-tag">篮球</span>
- <span class="interest-tag">吉他</span>
- <span class="interest-tag">Python</span>
- <span class="interest-tag">日语学习</span>
- <span class="interest-tag">电影</span>
- <span class="interest-tag">爬山</span>
- <span class="interest-tag">桌游</span>
- <a href="#page-interests" style="font-size: 0.9em; color: #007bff;">更多...</a>
- </div>
- <h3 style="margin-top: 20px;">推荐用户</h3>
- <!-- User cards like on home page -->
- <div class="card user-card">
- <img src="https://via.placeholder.com/50/8A2BE2/FFFFFF?text=U4" alt="User Avatar" class="avatar">
- <div class="content-details">
- <h3>赵敏 <span style="font-size: 0.8em; color: #777;">(北京师范大学)</span></h3>
- <p>兴趣: <span class="interest-tag">志愿者活动</span> <span class="interest-tag">阅读</span></p>
- </div>
- <div class="actions"> <a href="#page-profile-other" class="button-link outline" style="padding: 5px 10px; font-size: 0.8em;">查看资料</a> </div>
- </div>
- <h3 style="margin-top: 20px;">热门小组</h3>
- <div class="card group-item">
- <img src="https://via.placeholder.com/50/FFD700/000000?text=G1" alt="Group Icon" class="avatar" style="border-radius: 8px;">
- <div class="content-details">
- <h3>北邮吉他社</h3>
- <p>128 成员 | 活跃度高</p>
- </div>
- <div class="actions"> <a href="#page-group-detail" class="button-link outline" style="padding: 5px 10px; font-size: 0.8em;">加入</a> </div>
- </div>
- <a href="#page-groups" class="button-link secondary" style="width: 100%; text-align: center; margin-top: 10px;">查看所有小组</a>
- <h3 style="margin-top: 20px;">推荐活动</h3>
- <div class="card event-item">
- <img src="https://via.placeholder.com/50/00CED1/FFFFFF?text=E2" alt="Event Icon" class="avatar" style="border-radius: 8px;">
- <div class="content-details">
- <h3>校园编程马拉松</h3>
- <p>时间: 下周五 9:00</p>
- <p>地点: 计算机学院楼</p>
- </div>
- <div class="actions"> <a href="#page-event-detail" class="button-link outline" style="padding: 5px 10px; font-size: 0.8em;">感兴趣</a> </div>
- </div>
- <a href="#page-events" class="button-link secondary" style="width: 100%; text-align: center; margin-top: 10px;">查看所有活动</a>
- <h3 style="margin-top: 20px;">技能交换</h3>
- <div class="card skill-item">
- <img src="https://via.placeholder.com/50/6495ED/FFFFFF?text=S1" alt="User Avatar" class="avatar">
- <div class="content-details">
- <h3>刘洋 <span style="font-size: 0.8em; color: #777;">(北京航空航天大学)</span></h3>
- <p><strong>提供:</strong> PPT美化 <span style="color: green;">|</span> <strong>需要:</strong> 英语口语练习</p>
- </div>
- <div class="actions"> <a href="#page-chat" class="button-link outline" style="padding: 5px 10px; font-size: 0.8em;">联系Ta</a> </div>
- </div>
- <a href="#page-skills" class="button-link secondary" style="width: 100%; text-align: center; margin-top: 10px;">查看技能交换</a>
- <h3 style="margin-top: 20px;">附近的人 (地图)</h3>
- <a href="#page-map" class="button-link" style="width: 100%; text-align: center;">查看地图模式</a>
- </div>
- <!-- PAGE: Messages List -->
- <div class="app-page" id="page-messages">
- <script>document.getElementById('app-header').innerHTML = '<span>消息</span><a href="#page-chat" class="icon">+</a>';</script>
- <div class="message-item">
- <img src="https://via.placeholder.com/50/4682B4/FFFFFF?text=U2" alt="User Avatar" class="avatar">
- <div class="content-details">
- <h3>李静</h3>
- <p>好的,那我们周二晚上图书馆见!</p>
- </div>
- <span style="font-size: 0.8em; color: #999; margin-left: auto;">10:35</span>
- </div>
- <div class="message-item">
- <img src="https://via.placeholder.com/50/FFA500/FFFFFF?text=U1" alt="User Avatar" class="avatar">
- <div class="content-details">
- <h3>张伟</h3>
- <p>[图片]</p>
- </div>
- <span style="font-size: 0.8em; color: #999; margin-left: auto;">昨天</span>
- </div>
- <div class="message-item">
- <img src="https://via.placeholder.com/50/FFD700/000000?text=G1" alt="Group Icon" class="avatar" style="border-radius: 8px;">
- <div class="content-details">
- <h3>北邮吉他社 (群)</h3>
- <p>@所有人 周五晚上有迎新演出!</p>
- </div>
- <span style="font-size: 0.8em; color: red; background: red; color: white; border-radius: 50%; padding: 2px 6px; margin-left: auto;">3</span>
- </div>
- </div>
- <!-- PAGE: Chat / Direct Message -->
- <div class="app-page" id="page-chat">
- <script>document.getElementById('app-header').innerHTML = '<a href="#page-messages" class="back-button">‹</a><span>李静</span><a href="#" class="icon">···</a>';</script>
- <div style="height: calc(100% - 60px); overflow-y: auto; display: flex; flex-direction: column-reverse; padding-bottom: 10px;"> <!-- Chat history area -->
- <!-- Messages would load here, newest at the bottom -->
- <div class="chat-bubble sent">好的,那我们周二晚上图书馆见!</div>
- <div class="chat-bubble received">太好了!我正好也在复习,可以一起。</div>
- <div class="chat-bubble sent">我看到你也选了高数,下周考试一起复习怎么样?地点图书馆?</div>
- <div class="chat-bubble received">你好,看到你也喜欢日语学习,我也是!😊</div>
- <div class="chat-bubble sent">[系统提示] 你们都对“日语学习”感兴趣,可以聊聊哦~</div>
- </div>
- <div class="chat-input">
- <input type="text" placeholder="输入消息...">
- <button>发送</button>
- </div>
- </div>
- <!-- PAGE: User Profile (Self) -->
- <div class="app-page" id="page-profile-self">
- <script>document.getElementById('app-header').innerHTML = '<span>我的资料</span><a href="#page-settings" class="icon">⚙️</a>';</script>
- <div class="profile-header">
- <img src="https://via.placeholder.com/100/007BFF/FFFFFF?text=ME" alt="My Avatar" class="avatar">
- <h2>你的昵称</h2>
- <p>北京邮电大学 | 计算机科学 | 大二</p>
- <p>"努力成为有趣的人 | Coding & Reading"</p>
- <a href="#page-interests" class="button-link outline" style="margin-top: 10px;">编辑兴趣标签</a>
- </div>
- <div class="section-title">我的兴趣</div>
- <div class="card">
- <span class="interest-tag">Python</span>
- <span class="interest-tag">机器学习</span>
- <span class="interest-tag">科幻电影</span>
- <span class="interest-tag">羽毛球</span>
- <span class="interest-tag">独立音乐</span>
- </div>
- <div class="section-title">我的小组</div>
- <div class="card group-item">
- <img src="https://via.placeholder.com/50/20B2AA/FFFFFF?text=G2" alt="Group Icon" class="avatar" style="border-radius: 8px;">
- <div class="content-details">
- <h3>BUPT算法交流群</h3>
- <p>55 成员</p>
- </div>
- </div>
- <a href="#page-groups" class="button-link secondary" style="width: 100%; text-align: center;">查看所有小组</a>
- <div class="section-title">我发布的活动</div>
- <p style="text-align: center; color: #999;">暂无活动</p>
- <a href="#page-event-post" class="button-link" style="width: 100%; text-align: center;">发布新活动</a>
- <div class="section-title">我的技能/需求</div>
- <div class="card skill-item">
- <img src="https://via.placeholder.com/50/007BFF/FFFFFF?text=ME" alt="User Avatar" class="avatar">
- <div class="content-details">
- <p><strong>提供:</strong> Python基础教学 <span style="color: green;">|</span> <strong>需要:</strong> 羽毛球球友</p>
- </div>
- <div class="actions"> <a href="#page-skills" class="button-link outline" style="padding: 5px 10px; font-size: 0.8em;">编辑</a> </div>
- </div>
- <a href="#page-skills" class="button-link" style="width: 100%; text-align: center;">发布技能/需求</a>
- </div>
- <!-- PAGE: User Profile (Other) -->
- <div class="app-page" id="page-profile-other">
- <script>document.getElementById('app-header').innerHTML = '<a href="#page-discover" class="back-button">‹</a><span>用户资料</span><a href="#" class="icon">···</a>';</script>
- <div class="profile-header">
- <img src="https://via.placeholder.com/100/FFA500/FFFFFF?text=U1" alt="User Avatar" class="avatar">
- <h2>张伟</h2>
- <p>北京大学 | 艺术学院 | 大三</p>
- <p>"周末想找人一起去奥森拍照~"</p>
- <a href="#page-chat" class="button-link" style="margin-top: 10px;">发消息</a>
- <button class="secondary">关注</button>
- </div>
- <div class="section-title">Ta的兴趣</div>
- <div class="card">
- <span class="interest-tag">摄影</span>
- <span class="interest-tag">后期制作</span>
- <span class="interest-tag">爬山</span>
- <span class="interest-tag">纪录片</span>
- </div>
- <div class="section-title">共同兴趣</div>
- <div class="card">
- <span class="interest-tag">摄影</span>
- <span class="interest-tag">爬山</span>
- </div>
- <div class="section-title">Ta的小组</div>
- <p style="text-align: center; color: #999;">用户尚未加入任何小组</p>
- <div class="section-title">Ta发布的活动</div>
- <div class="card event-item">
- <img src="https://via.placeholder.com/50/FFA500/FFFFFF?text=U1" alt="Host Avatar" class="avatar">
- <div class="content-details">
- <h3>奥森公园外拍活动</h3>
- <p>时间: 本周六 10:00</p>
- <p>地点: 奥林匹克森林公园南门</p>
- </div>
- <div class="actions"> <a href="#page-event-detail" class="button-link outline" style="padding: 5px 10px; font-size: 0.8em;">查看详情</a> </div>
- </div>
- </div>
- <!-- PAGE: Interest Selection/Editing -->
- <div class="app-page" id="page-interests">
- <script>document.getElementById('app-header').innerHTML = '<a href="#page-profile-self" class="back-button">‹</a><span>选择我的兴趣</span><a href="#page-profile-self" class="icon" style="font-size: 0.9em;">保存</a>';</script>
- <input type="text" placeholder="搜索兴趣标签...">
- <div class="interest-category">
- <h3>运动</h3>
- <div class="tags">
- <button class="tag-button selected">羽毛球</button>
- <button class="tag-button">篮球</button>
- <button class="tag-button">跑步</button>
- <button class="tag-button">游泳</button>
- <button class="tag-button">健身</button>
- <button class="tag-button">瑜伽</button>
- <button class="tag-button">乒乓球</button>
- <button class="tag-button">爬山</button>
- </div>
- </div>
- <div class="interest-category">
- <h3>音乐</h3>
- <div class="tags">
- <button class="tag-button selected">独立音乐</button>
- <button class="tag-button">摇滚</button>
- <button class="tag-button">流行</button>
- <button class="tag-button">古典</button>
- <button class="tag-button">吉他</button>
- <button class="tag-button">钢琴</button>
- </div>
- </div>
- <div class="interest-category">
- <h3>学术/技术</h3>
- <div class="tags">
- <button class="tag-button selected">Python</button>
- <button class="tag-button selected">机器学习</button>
- <button class="tag-button">Web开发</button>
- <button class="tag-button">算法</button>
- <button class="tag-button">考研</button>
- <button class="tag-button">四六级</button>
- </div>
- </div>
- <div class="interest-category">
- <h3>艺术/生活</h3>
- <div class="tags">
- <button class="tag-button selected">科幻电影</button>
- <button class="tag-button">摄影</button>
- <button class="tag-button">阅读</button>
- <button class="tag-button">绘画</button>
- <button class="tag-button">桌游</button>
- <button class="tag-button">美食探店</button>
- </div>
- </div>
- <p style="color: #888; font-size: 0.9em;">找不到你的兴趣?可以尝试搜索或 <a href="#">创建新标签</a>。</p>
- </div>
- <!-- PAGE: Notifications -->
- <div class="app-page" id="page-notifications">
- <script>document.getElementById('app-header').innerHTML = '<a href="#page-home" class="back-button">‹</a><span>通知</span>';</script>
- <div class="notification-item">
- <img src="https://via.placeholder.com/50/32CD32/FFFFFF?text=U3" alt="User Avatar" class="avatar">
- <div class="content-details">
- <p><strong>王磊</strong> 赞了你的动态。</p>
- <p style="font-size: 0.8em; color: #999;">5分钟前</p>
- </div>
- </div>
- <div class="notification-item">
- <img src="https://via.placeholder.com/50/FF6347/FFFFFF?text=E" alt="Event Icon" class="avatar" style="border-radius: 8px;">
- <div class="content-details">
- <p>你报名的活动 <strong>周末狼人杀局</strong> 将在1小时后开始。</p>
- <p style="font-size: 0.8em; color: #999;">15分钟前</p>
- </div>
- </div>
- <div class="notification-item">
- <img src="https://via.placeholder.com/50/8A2BE2/FFFFFF?text=U4" alt="User Avatar" class="avatar">
- <div class="content-details">
- <p><strong>赵敏</strong> 开始关注你了。</p>
- <p style="font-size: 0.8em; color: #999;">1小时前</p>
- </div>
- <div class="actions"> <a href="#page-profile-other" class="button-link outline" style="padding: 5px 10px; font-size: 0.8em;">回关</a> </div>
- </div>
- <div class="notification-item">
- <img src="https://via.placeholder.com/50/FFD700/000000?text=G1" alt="Group Icon" class="avatar" style="border-radius: 8px;">
- <div class="content-details">
- <p><strong>北邮吉他社</strong> 有新公告。</p>
- <p style="font-size: 0.8em; color: #999;">3小时前</p>
- </div>
- </div>
- </div>
- <!-- PAGE: Settings -->
- <div class="app-page" id="page-settings">
- <script>document.getElementById('app-header').innerHTML = '<a href="#page-profile-self" class="back-button">‹</a><span>设置</span>';</script>
- <ul style="list-style: none; padding: 0;">
- <li style="padding: 15px 0; border-bottom: 1px solid #eee;"><a href="#page-profile-self" style="text-decoration: none; color: #333;">编辑个人资料</a></li>
- <li style="padding: 15px 0; border-bottom: 1px solid #eee;"><a href="#" style="text-decoration: none; color: #333;">账号与安全</a></li>
- <li style="padding: 15px 0; border-bottom: 1px solid #eee;"><a href="#" style="text-decoration: none; color: #333;">隐私设置</a></li>
- <li style="padding: 15px 0; border-bottom: 1px solid #eee;"><a href="#page-notifications" style="text-decoration: none; color: #333;">通知设置</a></li>
- <li style="padding: 15px 0; border-bottom: 1px solid #eee;"><a href="#" style="text-decoration: none; color: #333;">关于我们</a></li>
- <li style="padding: 15px 0; border-bottom: 1px solid #eee;"><a href="#" style="text-decoration: none; color: #333;">帮助与反馈</a></li>
- </ul>
- <button style="width: 100%; background-color: #dc3545; margin-top: 30px;">退出登录</button>
- </div>
- <!-- PAGE: Group List -->
- <div class="app-page" id="page-groups">
- <script>document.getElementById('app-header').innerHTML = '<a href="#page-profile-self" class="back-button">‹</a><span>我的小组</span><a href="#" class="icon">+</a>';</script>
- <!-- Add Tabs for My Groups / Discover Groups -->
- <div class="card group-item">
- <img src="https://via.placeholder.com/50/20B2AA/FFFFFF?text=G2" alt="Group Icon" class="avatar" style="border-radius: 8px;">
- <div class="content-details">
- <h3>BUPT算法交流群</h3>
- <p>55 成员</p>
- </div>
- <div class="actions"> <a href="#page-group-detail" class="button-link outline" style="padding: 5px 10px; font-size: 0.8em;">进入</a> </div>
- </div>
- <div class="card group-item">
- <img src="https://via.placeholder.com/50/DAA520/FFFFFF?text=G3" alt="Group Icon" class="avatar" style="border-radius: 8px;">
- <div class="content-details">
- <h3>电影爱好者协会</h3>
- <p>210 成员</p>
- </div>
- <div class="actions"> <a href="#page-group-detail" class="button-link outline" style="padding: 5px 10px; font-size: 0.8em;">进入</a> </div>
- </div>
- <p style="text-align: center; margin-top: 20px;"><a href="#page-discover" style="color: #007bff;">发现更多小组...</a></p>
- </div>
- <!-- PAGE: Group Detail -->
- <div class="app-page" id="page-group-detail">
- <script>document.getElementById('app-header').innerHTML = '<a href="#page-groups" class="back-button">‹</a><span>BUPT算法交流群</span><a href="#" class="icon">···</a>';</script>
- <div style="text-align: center; margin-bottom: 15px;">
- <img src="https://via.placeholder.com/80/20B2AA/FFFFFF?text=G2" alt="Group Icon" class="avatar" style="width: 80px; height: 80px; border-radius: 15px; margin: 0 auto 10px auto;">
- <h2>BUPT算法交流群</h2>
- <p>55 成员 | <a href="#">查看成员</a></p>
- <p style="font-size: 0.9em; color: #666;">欢迎对算法、数据结构、ACM竞赛感兴趣的同学加入讨论!</p>
- <button class="secondary">已加入</button>
- </div>
- <hr>
- <h3>小组动态</h3>
- <div class="card"> <!-- Post within group -->
- <div class="user-card" style="border-bottom: none; margin-bottom: 10px; padding-bottom: 0;">
- <img src="https://via.placeholder.com/40/CD5C5C/FFFFFF?text=U5" alt="User Avatar" class="avatar" style="width: 40px; height: 40px;">
- <div class="content-details">
- <h3 style="font-size: 0.9em;">陈晨</h3>
- <p style="font-size: 0.8em;">5小时前</p>
- </div>
- </div>
- <p>LeetCode今天这道Hard题有人AC了吗?求思路分享!#每日一题</p>
- <div style="font-size: 0.8em; color: #888;">👍 5 💬 2</div>
- </div>
- <div class="card"> <!-- Post within group -->
- <div class="user-card" style="border-bottom: none; margin-bottom: 10px; padding-bottom: 0;">
- <img src="https://via.placeholder.com/40/4682B4/FFFFFF?text=U2" alt="User Avatar" class="avatar" style="width: 40px; height: 40px;">
- <div class="content-details">
- <h3 style="font-size: 0.9em;">李静 (管理员)</h3>
- <p style="font-size: 0.8em;">昨天</p>
- </div>
- </div>
- <p>【公告】下周三晚上7点,邀请学长分享蓝桥杯备赛经验,地点教三201,欢迎参加!</p>
- <div style="font-size: 0.8em; color: #888;">👍 15 💬 1</div>
- </div>
- <button style="width: 100%; margin-top: 15px;">发布新动态</button>
- </div>
- <!-- PAGE: Event Listing -->
- <div class="app-page" id="page-events">
- <script>document.getElementById('app-header').innerHTML = '<a href="#page-discover" class="back-button">‹</a><span>活动广场</span><a href="#page-event-post" class="icon">+</a>';</script>
- <!-- Add Tabs for Upcoming / My Events / Discover -->
- <div class="card event-item">
- <img src="https://via.placeholder.com/50/FF6347/FFFFFF?text=E" alt="Event Icon" class="avatar" style="border-radius: 8px;">
- <div class="content-details">
- <h3>周末狼人杀局</h3>
- <p>时间: 周六 14:00</p>
- <p>地点: 学校咖啡厅 | 发起人: 王磊</p>
- </div>
- <div class="actions"> <a href="#page-event-detail" class="button-link outline" style="padding: 5px 10px; font-size: 0.8em;">详情</a> </div>
- </div>
- <div class="card event-item">
- <img src="https://via.placeholder.com/50/00CED1/FFFFFF?text=E2" alt="Event Icon" class="avatar" style="border-radius: 8px;">
- <div class="content-details">
- <h3>校园编程马拉松</h3>
- <p>时间: 下周五 9:00 - 周日 17:00</p>
- <p>地点: 计算机学院楼 | 主办方: 计算机学院</p>
- </div>
- <div class="actions"> <a href="#page-event-detail" class="button-link outline" style="padding: 5px 10px; font-size: 0.8em;">详情</a> </div>
- </div>
- <div class="card event-item">
- <img src="https://via.placeholder.com/50/9370DB/FFFFFF?text=E3" alt="Event Icon" class="avatar" style="border-radius: 8px;">
- <div class="content-details">
- <h3>草坪音乐分享会</h3>
- <p>时间: 周日 16:00</p>
- <p>地点: 学校大草坪 | 发起人: 赵敏</p>
- </div>
- <div class="actions"> <a href="#page-event-detail" class="button-link outline" style="padding: 5px 10px; font-size: 0.8em;">详情</a> </div>
- </div>
- </div>
- <!-- PAGE: Event Detail -->
- <div class="app-page" id="page-event-detail">
- <script>document.getElementById('app-header').innerHTML = '<a href="#page-events" class="back-button">‹</a><span>活动详情</span><a href="#" class="icon">☆</a>';</script>
- <img src="https://via.placeholder.com/345x150/FF6347/FFFFFF?text=Event+Banner" alt="Event Image" style="width: 100%; height: 150px; object-fit: cover; border-radius: 8px; margin-bottom: 15px;">
- <h2>周末狼人杀局</h2>
- <p><strong>时间:</strong> 本周六 14:00 - 18:00</p>
- <p><strong>地点:</strong> 学校南门咖啡厅二楼</p>
- <p><strong>发起人:</strong> <a href="#page-profile-other">王磊</a> (人民大学)</p>
- <p><strong>活动介绍:</strong> 找个地方一起玩狼人杀,新手友好,欢迎各种板子!目前已有3人,还差5-7人。费用AA(场地费)。</p>
- <p><strong>兴趣标签:</strong> <span class="interest-tag">桌游</span> <span class="interest-tag">狼人杀</span> <span class="interest-tag">线下聚会</span></p>
- <p><strong>已报名 (3/10):</strong> <img src="https://via.placeholder.com/30/32CD32/FFFFFF?text=U3" class="avatar" style="width:30px; height:30px; margin-right: 5px;"> <img src="https://via.placeholder.com/30/1E90FF/FFFFFF?text=U6" class="avatar" style="width:30px; height:30px; margin-right: 5px;"> <img src="https://via.placeholder.com/30/FF4500/FFFFFF?text=U7" class="avatar" style="width:30px; height:30px; margin-right: 5px;"> <a href="#">查看全部</a></p>
- <button style="width: 100%;">我要报名</button>
- <button class="secondary" style="width: 100%; margin-top: 10px;">分享活动</button>
- </div>
- <!-- PAGE: Event Posting -->
- <div class="app-page" id="page-event-post">
- <script>document.getElementById('app-header').innerHTML = '<a href="#page-events" class="back-button">‹</a><span>发布新活动</span><a href="#page-events" class="icon" style="font-size: 0.9em;">发布</a>';</script>
- <label for="event-title">活动标题:</label>
- <input type="text" id="event-title" placeholder="如:周日图书馆约学习">
- <label for="event-desc">活动描述:</label>
- <textarea id="event-desc" placeholder="详细说明活动内容、目的、要求等..."></textarea>
- <label for="event-time">时间:</label>
- <input type="text" id="event-time" placeholder="如:本周日 下午2点-5点">
- <label for="event-loc">地点:</label>
- <input type="text" id="event-loc" placeholder="如:学校图书馆三楼自习室">
- <label for="event-tags">关联兴趣标签 (可选):</label>
- <input type="text" id="event-tags" placeholder="如:考研, 学习伙伴, 图书馆">
- <label for="event-limit">人数限制 (可选):</label>
- <input type="number" id="event-limit" placeholder="如:5 (留空表示不限)">
- <label for="event-cover">上传封面图 (可选):</label>
- <button class="outline">选择图片</button>
- </div>
- <!-- PAGE: Skill Exchange Listing -->
- <div class="app-page" id="page-skills">
- <script>document.getElementById('app-header').innerHTML = '<a href="#page-discover" class="back-button">‹</a><span>技能交换</span><a href="#page-skill-post" class="icon">+</a>';</script>
- <!-- Add Tabs: 提供 / 需求 / 浏览 -->
- <div class="card skill-item">
- <img src="https://via.placeholder.com/50/6495ED/FFFFFF?text=S1" alt="User Avatar" class="avatar">
- <div class="content-details">
- <h3>刘洋 <span style="font-size: 0.8em; color: #777;">(北航)</span></h3>
- <p><strong style="color: green;">提供:</strong> PPT美化, 海报设计</p>
- <p><strong style="color: orange;">需要:</strong> 英语口语练习</p>
- </div>
- <div class="actions"> <a href="#page-chat" class="button-link outline" style="padding: 5px 10px; font-size: 0.8em;">联系Ta</a> </div>
- </div>
- <div class="card skill-item">
- <img src="https://via.placeholder.com/50/DC143C/FFFFFF?text=S2" alt="User Avatar" class="avatar">
- <div class="content-details">
- <h3>孙悦 <span style="font-size: 0.8em; color: #777;">(北理)</span></h3>
- <p><strong style="color: green;">提供:</strong> 日语N2辅导</p>
- <p><strong style="color: orange;">需要:</strong> Python爬虫教学</p>
- </div>
- <div class="actions"> <a href="#page-chat" class="button-link outline" style="padding: 5px 10px; font-size: 0.8em;">联系Ta</a> </div>
- </div>
- <div class="card skill-item">
- <img src="https://via.placeholder.com/50/FF8C00/FFFFFF?text=S3" alt="User Avatar" class="avatar">
- <div class="content-details">
- <h3>周峰 <span style="font-size: 0.8em; color: #777;">(北交大)</span></h3>
- <p><strong style="color: green;">提供:</strong> 吉他弹唱教学 (入门)</p>
- <p><strong style="color: orange;">需要:</strong> 无</p>
- </div>
- <div class="actions"> <a href="#page-chat" class="button-link outline" style="padding: 5px 10px; font-size: 0.8em;">联系Ta</a> </div>
- </div>
- </div>
- <!-- PAGE: Skill Post/Edit -->
- <div class="app-page" id="page-skill-post">
- <script>document.getElementById('app-header').innerHTML = '<a href="#page-skills" class="back-button">‹</a><span>发布技能/需求</span><a href="#page-skills" class="icon" style="font-size: 0.9em;">发布</a>';</script>
- <label for="skill-provide">我能提供的技能/帮助:</label>
- <textarea id="skill-provide" placeholder="详细描述你能提供的技能或帮助,如:Python数据分析入门、日语五十音教学..."></textarea>
- <label for="skill-need">我需要的技能/帮助:</label>
- <textarea id="skill-need" placeholder="详细描述你需要的技能或帮助,如:寻找英语口语语伴、求PS修图指导..."></textarea>
- <p style="font-size: 0.9em; color: #888;">可以只填写一项或两项都填。</p>
- </div>
- <!-- PAGE: Map View (Conceptual) -->
- <div class="app-page" id="page-map">
- <script>document.getElementById('app-header').innerHTML = '<a href="#page-discover" class="back-button">‹</a><span>附近 (<span style="color:red;">隐私保护模式</span>)</span><a href="#" class="icon">⚙️</a>';</script>
- <p style="font-size: 0.85em; color: #dc3545; text-align: center; border: 1px solid #f5c6cb; background-color: #f8d7da; padding: 8px; border-radius: 5px; margin-bottom: 15px;">
- <strong>注意:</strong> 为保护隐私,地图仅显示模糊位置和共同兴趣,不会暴露精确坐标或个人身份。你需要明确授权才能使用此功能。
- </p>
- <div class="map-placeholder">
- <p>模拟地图区域<br/>(显示附近有相同兴趣的用户或活动的大致位置)</p>
- </div>
- <div style="margin-top: 15px;">
- <label for="map-filter-interest">筛选兴趣:</label>
- <select id="map-filter-interest">
- <option>所有兴趣</option>
- <option>摄影</option>
- <option>篮球</option>
- <option>学习伙伴</option>
- </select>
- <label for="map-filter-radius">范围:</label>
- <select id="map-filter-radius">
- <option>1公里内</option>
- <option>3公里内</option>
- <option>5公里内</option>
- </select>
- </div>
- <!-- List nearby items below the map? -->
- <p style="text-align: center; color: #999; margin-top: 20px;">地图下方可列出匹配项</p>
- </div>
- <!-- PAGE: Login -->
- <div class="app-page" id="page-login">
- <script>document.getElementById('app-header').innerHTML = '<span>登录</span>';</script>
- <h2 style="text-align: center; margin-top: 40px;">欢迎回来</h2>
- <label for="login-email">邮箱/手机号:</label>
- <input type="email" id="login-email" placeholder="输入你的注册邮箱或手机号">
- <label for="login-password">密码:</label>
- <input type="password" id="login-password" placeholder="输入密码">
- <button style="width: 100%; margin-top: 20px;">登录</button>
- <div style="display: flex; justify-content: space-between; margin-top: 15px; font-size: 0.9em;">
- <a href="#" style="color: #007bff;">忘记密码?</a>
- <a href="#page-signup" style="color: #007bff;">没有账号?去注册</a>
- </div>
- <p style="text-align: center; color: #aaa; margin: 30px 0 15px 0;">--- 第三方登录 ---</p>
- <div style="text-align: center;">
- <button class="outline" style="margin: 5px; border-radius: 50%; width: 50px; height: 50px; font-size: 1.5em;">微</button>
- <button class="outline" style="margin: 5px; border-radius: 50%; width: 50px; height: 50px; font-size: 1.5em;">Q</button>
- <button class="outline" style="margin: 5px; border-radius: 50%; width: 50px; height: 50px; font-size: 1.5em;"></button>
- </div>
- </div>
- <!-- PAGE: Signup -->
- <div class="app-page" id="page-signup">
- <script>document.getElementById('app-header').innerHTML = '<span>注册</span>';</script>
- <h2 style="text-align: center; margin-top: 20px;">创建新账号</h2>
- <label for="signup-school-email">学校邮箱 (.edu):</label>
- <input type="email" id="signup-school-email" placeholder="推荐使用edu邮箱验证身份">
- <label for="signup-nickname">昵称:</label>
- <input type="text" id="signup-nickname" placeholder="给自己取个名字吧">
- <label for="signup-password">设置密码:</label>
- <input type="password" id="signup-password" placeholder="至少8位,包含字母和数字">
- <label for="signup-password-confirm">确认密码:</label>
- <input type="password" id="signup-password-confirm" placeholder="再次输入密码">
- <button style="width: 100%; margin-top: 20px;">注册</button>
- <p style="font-size: 0.8em; color: #888; margin-top: 10px; text-align: center;">
- 点击注册表示同意 <a href="#" style="color: #007bff;">用户协议</a> 和 <a href="#" style="color: #007bff;">隐私政策</a>
- </p>
- <p style="text-align: center; margin-top: 15px;">
- <a href="#page-login" style="color: #007bff;">已有账号?去登录</a>
- </p>
- </div>
- </div> <!-- End .app-content -->
- <!-- Footer / Tab Bar -->
- <div class="app-footer" id="app-footer">
- <a href="#page-home" class="tab-item active" onclick="setActiveTab(this)"><span>🏠</span>首页</a>
- <a href="#page-discover" class="tab-item" onclick="setActiveTab(this)"><span>🔍</span>发现</a>
- <a href="#page-messages" class="tab-item" onclick="setActiveTab(this)"><span>💬</span>消息</a>
- <a href="#page-profile-self" class="tab-item" onclick="setActiveTab(this)"><span>👤</span>我的</a>
- </div>
- </div> <!-- End .phone-mockup -->
- <script>
- // Simple JavaScript for page navigation simulation and tab highlighting
- const pages = document.querySelectorAll('.app-page');
- const footerTabs = document.querySelectorAll('.app-footer .tab-item');
- const header = document.getElementById('app-header');
- function showPage(pageId) {
- pages.forEach(page => {
- page.style.display = 'none'; // Hide all pages
- });
- const targetPage = document.getElementById(pageId);
- if (targetPage) {
- targetPage.style.display = 'block'; // Show the target page
- // Find the script inside the target page and run it to update the header
- const headerScript = targetPage.querySelector('script');
- if (headerScript) {
- try {
- eval(headerScript.innerText); // Execute the script to set the header
- } catch (e) {
- console.error("Error executing header script for page:", pageId, e);
- // Set a default header if script fails
- header.innerHTML = '<span>App Name</span>';
- }
- } else {
- // Set a default header if no script found
- header.innerHTML = '<span>App Name</span>';
- }
- // Scroll content to top when changing pages
- targetPage.parentElement.scrollTop = 0;
- } else {
- console.warn("Page not found:", pageId);
- document.getElementById('page-home').style.display = 'block'; // Fallback to home
- header.innerHTML = '<span>兴趣伙伴</span><a href="#page-notifications" class="icon">🔔</a>';
- }
- }
- function setActiveTab(selectedTab) {
- footerTabs.forEach(tab => {
- tab.classList.remove('active');
- });
- selectedTab.classList.add('active');
- // Navigate to the page specified in the tab's href
- const pageId = selectedTab.getAttribute('href').substring(1); // Remove #
- showPage(pageId);
- }
- // Handle initial page load based on URL hash, or default to home
- window.addEventListener('load', () => {
- const hash = window.location.hash;
- if (hash) {
- const pageId = hash.substring(1);
- showPage(pageId);
- // Update active tab based on hash
- footerTabs.forEach(tab => {
- if(tab.getAttribute('href') === hash) {
- setActiveTab(tab);
- } else {
- tab.classList.remove('active');
- }
- });
- // Ensure at least one tab is active if hash matches a main page
- const activeTabs = document.querySelectorAll('.app-footer .tab-item.active');
- if(activeTabs.length === 0 && ['page-home', 'page-discover', 'page-messages', 'page-profile-self'].includes(pageId)) {
- document.querySelector(`.app-footer .tab-item[href="#${pageId}"]`).classList.add('active');
- } else if (activeTabs.length === 0) {
- document.querySelector('.app-footer .tab-item[href="#page-home"]').classList.add('active'); // Default active tab
- }
- } else {
- showPage('page-home'); // Default page
- document.querySelector('.app-footer .tab-item[href="#page-home"]').classList.add('active'); // Default active tab
- }
- });
- // Optional: Handle browser back/forward navigation
- window.addEventListener('hashchange', () => {
- const hash = window.location.hash;
- if (hash) {
- const pageId = hash.substring(1);
- showPage(pageId);
- // Update active tab based on hash
- footerTabs.forEach(tab => {
- if(tab.getAttribute('href') === hash) {
- setActiveTab(tab); // This already calls showPage
- } else {
- tab.classList.remove('active');
- }
- });
- // Ensure at least one tab is active if hash matches a main page
- const activeTabs = document.querySelectorAll('.app-footer .tab-item.active');
- if(activeTabs.length === 0 && ['page-home', 'page-discover', 'page-messages', 'page-profile-self'].includes(pageId)) {
- document.querySelector(`.app-footer .tab-item[href="#${pageId}"]`).classList.add('active');
- } else if (activeTabs.length === 0) {
- document.querySelector('.app-footer .tab-item[href="#page-home"]').classList.add('active'); // Default active tab
- }
- } else {
- showPage('page-home'); // Default to home if hash is empty
- setActiveTab(document.querySelector('.app-footer .tab-item[href="#page-home"]'));
- }
- });
- // Make internal links work for navigation
- document.addEventListener('click', function(event) {
- let target = event.target;
- // Traverse up the DOM if the click was inside a link
- while(target && target.tagName !== 'A') {
- target = target.parentElement;
- }
- if (target && target.tagName === 'A' && target.getAttribute('href') && target.getAttribute('href').startsWith('#')) {
- const href = target.getAttribute('href');
- // Check if it's a tab bar link (already handled by setActiveTab)
- if (!target.classList.contains('tab-item')) {
- event.preventDefault(); // Prevent default anchor jump
- const pageId = href.substring(1);
- window.location.hash = pageId; // Change hash to trigger navigation
- } else {
- // If it IS a tab item, ensure setActiveTab is called (covers cases where onclick might fail or be absent)
- setActiveTab(target);
- }
- }
- });
- </script>
- </body>
- </html>
|