0225015
/
tongquU


			
							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>