|
|
@@ -0,0 +1,1007 @@
|
|
|
+<!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>
|
