510 lines
40 KiB
HTML
510 lines
40 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Memory - UI Preview</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
background: #000; display: flex; justify-content: center; gap: 40px;
|
|
padding: 40px; min-height: 100vh; flex-wrap: wrap;
|
|
}
|
|
.phone-frame {
|
|
width: 375px; height: 812px; background: #000; border-radius: 40px;
|
|
box-shadow: 0 0 0 3px #333; overflow: hidden; position: relative;
|
|
}
|
|
.status-bar {
|
|
height: 44px; background: #000; display: flex; justify-content: center;
|
|
align-items: center; font-size: 14px; font-weight: 600; color: #fff;
|
|
}
|
|
.header {
|
|
display: flex; justify-content: space-between; align-items: center;
|
|
padding: 12px 16px; border-bottom: 1px solid #2f3336;
|
|
}
|
|
.header-title { font-size: 20px; font-weight: 700; color: #e7e9ea; }
|
|
.back-btn { padding: 8px; margin: -8px; cursor: pointer; }
|
|
.back-btn svg { width: 20px; height: 20px; fill: #e7e9ea; }
|
|
.home-content { height: calc(100% - 44px - 50px - 83px); overflow-y: auto; }
|
|
.detail-content { height: calc(100% - 44px - 50px - 60px); overflow-y: auto; }
|
|
.post-card { padding: 12px 16px; border-bottom: 1px solid #2f3336; display: flex; gap: 12px; }
|
|
.avatar {
|
|
width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
|
|
background: linear-gradient(135deg, #1d9bf0 0%, #1a8cd8 100%);
|
|
display: flex; align-items: center; justify-content: center;
|
|
color: #fff; font-weight: 700; font-size: 16px;
|
|
}
|
|
.avatar.small { width: 32px; height: 32px; font-size: 13px; }
|
|
.avatar.purple { background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%); }
|
|
.avatar.green { background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%); }
|
|
.post-body { flex: 1; min-width: 0; }
|
|
.post-header { display: flex; align-items: center; gap: 4px; margin-bottom: 2px; flex-wrap: wrap; }
|
|
.username { font-weight: 700; font-size: 15px; color: #e7e9ea; }
|
|
.handle, .post-time, .dot { font-size: 15px; color: #71767b; }
|
|
.post-content { font-size: 15px; line-height: 1.4; color: #e7e9ea; margin-bottom: 12px; }
|
|
.post-media { border-radius: 16px; overflow: hidden; border: 1px solid #2f3336; margin-bottom: 12px; }
|
|
.post-media.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
|
|
.media-item { aspect-ratio: 16/10; background: #16181c; display: flex; align-items: center; justify-content: center; }
|
|
.media-item svg { width: 32px; height: 32px; fill: #71767b; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<style>
|
|
/* 表情反应标签 */
|
|
.reactions { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
|
|
.reaction {
|
|
display: flex; align-items: center; gap: 4px; background: #16181c;
|
|
border: 1px solid #2f3336; border-radius: 9999px; padding: 4px 10px;
|
|
font-size: 13px; cursor: pointer; transition: all 0.2s;
|
|
}
|
|
.reaction:hover { border-color: #1d9bf0; background: rgba(29,155,240,0.1); }
|
|
.reaction.active { border-color: #1d9bf0; background: rgba(29,155,240,0.15); }
|
|
.reaction-emoji { font-size: 14px; }
|
|
.reaction-count { color: #71767b; }
|
|
.reaction.active .reaction-count { color: #1d9bf0; }
|
|
/* 操作栏 - 评论、点赞、表情 */
|
|
.post-actions { display: flex; gap: 4px; }
|
|
.action-btn {
|
|
display: flex; align-items: center; gap: 6px; color: #71767b;
|
|
font-size: 13px; cursor: pointer; padding: 8px 12px; border-radius: 9999px; transition: all 0.2s;
|
|
}
|
|
.action-btn:hover { background: rgba(29,155,240,0.1); }
|
|
.action-btn.comment:hover { color: #1d9bf0; }
|
|
.action-btn.like:hover { color: #f91880; }
|
|
.action-btn.like.active { color: #f91880; }
|
|
.action-btn.like.active svg { fill: #f91880; }
|
|
.action-btn.emoji:hover { color: #ffd93d; }
|
|
.action-btn svg { width: 18px; height: 18px; fill: currentColor; }
|
|
.action-btn span { font-size: 13px; }
|
|
.fab-button {
|
|
position: absolute; right: 16px; bottom: 95px; width: 56px; height: 56px;
|
|
background: #1d9bf0; border-radius: 50%;
|
|
display: flex; align-items: center; justify-content: center;
|
|
box-shadow: 0 4px 12px rgba(29,155,240,0.4); cursor: pointer;
|
|
}
|
|
.fab-button svg { width: 26px; height: 26px; fill: #fff; }
|
|
.bottom-nav {
|
|
position: absolute; bottom: 0; left: 0; right: 0; height: 83px;
|
|
background: #000; border-top: 1px solid #2f3336;
|
|
display: flex; justify-content: space-around; align-items: flex-start; padding-top: 12px;
|
|
}
|
|
.nav-item { padding: 12px; cursor: pointer; border-radius: 50%; transition: background 0.2s; }
|
|
.nav-item:hover { background: rgba(231,233,234,0.1); }
|
|
.nav-item svg { width: 26px; height: 26px; fill: #e7e9ea; }
|
|
.nav-item.active svg { fill: #1d9bf0; }
|
|
</style>
|
|
<style>
|
|
/* 评论区样式 */
|
|
.comments-section { border-top: 1px solid #2f3336; }
|
|
.comment { padding: 12px 16px; display: flex; gap: 10px; border-bottom: 1px solid #2f3336; }
|
|
.comment-body { flex: 1; }
|
|
.comment-header { display: flex; align-items: center; gap: 4px; margin-bottom: 2px; }
|
|
.comment-content { font-size: 14px; line-height: 1.4; color: #e7e9ea; }
|
|
.comment-actions { display: flex; gap: 16px; margin-top: 8px; }
|
|
.comment-action { display: flex; align-items: center; gap: 4px; color: #71767b; font-size: 12px; cursor: pointer; }
|
|
.comment-action:hover { color: #1d9bf0; }
|
|
.comment-action svg { width: 14px; height: 14px; fill: currentColor; }
|
|
/* 评论输入框 */
|
|
.comment-input-bar {
|
|
position: absolute; bottom: 0; left: 0; right: 0;
|
|
background: #000; border-top: 1px solid #2f3336;
|
|
padding: 12px 16px; display: flex; gap: 12px; align-items: center;
|
|
}
|
|
.comment-input {
|
|
flex: 1; background: #16181c; border: 1px solid #2f3336; border-radius: 9999px;
|
|
padding: 10px 16px; color: #e7e9ea; font-size: 14px; outline: none;
|
|
}
|
|
.comment-input::placeholder { color: #71767b; }
|
|
.comment-input:focus { border-color: #1d9bf0; }
|
|
.send-btn {
|
|
width: 36px; height: 36px; background: #1d9bf0; border-radius: 50%;
|
|
display: flex; align-items: center; justify-content: center; cursor: pointer;
|
|
}
|
|
.send-btn svg { width: 18px; height: 18px; fill: #fff; }
|
|
/* 发帖页面 */
|
|
.post-page-header {
|
|
display: flex; justify-content: space-between; align-items: center;
|
|
padding: 8px 16px; border-bottom: 1px solid #2f3336;
|
|
}
|
|
.close-btn { padding: 8px; cursor: pointer; }
|
|
.close-btn svg { width: 20px; height: 20px; fill: #e7e9ea; }
|
|
.post-btn {
|
|
background: #1d9bf0; color: #fff; border: none; padding: 8px 16px;
|
|
border-radius: 9999px; font-size: 14px; font-weight: 700; cursor: pointer;
|
|
}
|
|
.compose-area { padding: 12px 16px; display: flex; gap: 12px; }
|
|
.compose-input { flex: 1; }
|
|
.compose-input textarea {
|
|
width: 100%; border: none; background: transparent; font-size: 20px;
|
|
line-height: 1.4; resize: none; outline: none; color: #e7e9ea;
|
|
min-height: 150px; font-family: inherit;
|
|
}
|
|
.compose-input textarea::placeholder { color: #71767b; }
|
|
.compose-toolbar { display: flex; gap: 4px; padding: 12px 0; border-top: 1px solid #2f3336; margin-top: 12px; }
|
|
.toolbar-btn { padding: 8px; border-radius: 50%; cursor: pointer; transition: background 0.2s; }
|
|
.toolbar-btn:hover { background: rgba(29,155,240,0.1); }
|
|
.toolbar-btn svg { width: 20px; height: 20px; fill: #1d9bf0; }
|
|
.media-upload-area {
|
|
margin: 16px; border: 1px dashed #2f3336; border-radius: 16px;
|
|
padding: 60px 40px; text-align: center; cursor: pointer; transition: all 0.2s;
|
|
}
|
|
.media-upload-area:hover { border-color: #1d9bf0; background: rgba(29,155,240,0.05); }
|
|
.upload-icon { width: 40px; height: 40px; fill: #1d9bf0; margin-bottom: 8px; }
|
|
.upload-text { color: #71767b; font-size: 15px; }
|
|
.page-label {
|
|
position: absolute; top: -35px; left: 50%; transform: translateX(-50%);
|
|
background: #1d9bf0; color: #fff; padding: 6px 16px;
|
|
border-radius: 9999px; font-size: 13px; font-weight: 500; white-space: nowrap;
|
|
}
|
|
.phone-container { position: relative; padding-top: 45px; }
|
|
</style>
|
|
|
|
<!-- 首页 -->
|
|
<div class="phone-container">
|
|
<div class="page-label">首页 - 时间线</div>
|
|
<div class="phone-frame">
|
|
<div class="status-bar">9:41</div>
|
|
<div class="header"><span class="header-title">Memory</span></div>
|
|
<div class="home-content">
|
|
<!-- 帖子1 -->
|
|
<div class="post-card">
|
|
<div class="avatar">M</div>
|
|
<div class="post-body">
|
|
<div class="post-header">
|
|
<span class="username">Memory</span>
|
|
<span class="handle">@memory_user</span>
|
|
<span class="dot">·</span>
|
|
<span class="post-time">5分钟</span>
|
|
</div>
|
|
<div class="post-content">今天天气真好，出门散步拍了几张照片 📸</div>
|
|
<div class="post-media grid">
|
|
<div class="media-item"><svg viewBox="0 0 24 24"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg></div>
|
|
<div class="media-item"><svg viewBox="0 0 24 24"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg></div>
|
|
</div>
|
|
<div class="reactions">
|
|
<div class="reaction active"><span class="reaction-emoji">❤️</span><span class="reaction-count">12</span></div>
|
|
<div class="reaction"><span class="reaction-emoji">👍</span><span class="reaction-count">5</span></div>
|
|
<div class="reaction"><span class="reaction-emoji">😊</span><span class="reaction-count">3</span></div>
|
|
</div>
|
|
<div class="post-actions">
|
|
<div class="action-btn comment"><svg viewBox="0 0 24 24"><path d="M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01z"/></svg><span>8</span></div>
|
|
<div class="action-btn like active"><svg viewBox="0 0 24 24"><path d="M20.884 13.19c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.45-4.55-.782-6.14.657-1.57 2.03-2.64 3.76-3.02 1.36-.3 2.94-.07 4.41.87.57.36 1.1.81 1.58 1.34.48-.53 1.01-.98 1.58-1.34 1.47-.94 3.05-1.17 4.41-.87 1.73.38 3.1 1.45 3.76 3.02.67 1.59.58 3.64-.78 6.14z"/></svg><span>20</span></div>
|
|
<div class="action-btn emoji"><svg viewBox="0 0 24 24"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zm3.5-9c.828 0 1.5-.672 1.5-1.5S16.328 8 15.5 8 14 8.672 14 9.5s.672 1.5 1.5 1.5zm-7 0c.828 0 1.5-.672 1.5-1.5S9.328 8 8.5 8 7 8.672 7 9.5 7.672 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"/></svg></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 帖子2 -->
|
|
<div class="post-card">
|
|
<div class="avatar">M</div>
|
|
<div class="post-body">
|
|
<div class="post-header">
|
|
<span class="username">Memory</span>
|
|
<span class="handle">@memory_user</span>
|
|
<span class="dot">·</span>
|
|
<span class="post-time">11月12日</span>
|
|
</div>
|
|
<div class="post-content">记录一下今天的午餐，自己做的意面 🍝</div>
|
|
<div class="post-media">
|
|
<div class="media-item"><svg viewBox="0 0 24 24"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg></div>
|
|
</div>
|
|
<div class="reactions">
|
|
<div class="reaction"><span class="reaction-emoji">😋</span><span class="reaction-count">8</span></div>
|
|
<div class="reaction"><span class="reaction-emoji">👏</span><span class="reaction-count">4</span></div>
|
|
</div>
|
|
<div class="post-actions">
|
|
<div class="action-btn comment"><svg viewBox="0 0 24 24"><path d="M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01z"/></svg><span>3</span></div>
|
|
<div class="action-btn like"><svg viewBox="0 0 24 24"><path d="M16.697 5.5c-1.222-.06-2.679.51-3.89 2.16l-.805 1.09-.806-1.09C9.984 6.01 8.526 5.44 7.304 5.5c-1.243.07-2.349.78-2.91 1.91-.552 1.12-.633 2.78.479 4.82 1.074 1.97 3.257 4.27 7.129 6.61 3.87-2.34 6.052-4.64 7.126-6.61 1.111-2.04 1.03-3.7.477-4.82-.561-1.13-1.666-1.84-2.908-1.91z"/></svg><span>12</span></div>
|
|
<div class="action-btn emoji"><svg viewBox="0 0 24 24"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zm3.5-9c.828 0 1.5-.672 1.5-1.5S16.328 8 15.5 8 14 8.672 14 9.5s.672 1.5 1.5 1.5zm-7 0c.828 0 1.5-.672 1.5-1.5S9.328 8 8.5 8 7 8.672 7 9.5 7.672 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"/></svg></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 帖子3 -->
|
|
<div class="post-card">
|
|
<div class="avatar">M</div>
|
|
<div class="post-body">
|
|
<div class="post-header">
|
|
<span class="username">Memory</span>
|
|
<span class="handle">@memory_user</span>
|
|
<span class="dot">·</span>
|
|
<span class="post-time">11月10日</span>
|
|
</div>
|
|
<div class="post-content">新的一周开始了，给自己加油 💪</div>
|
|
<div class="reactions">
|
|
<div class="reaction"><span class="reaction-emoji">💪</span><span class="reaction-count">15</span></div>
|
|
<div class="reaction"><span class="reaction-emoji">🔥</span><span class="reaction-count">6</span></div>
|
|
</div>
|
|
<div class="post-actions">
|
|
<div class="action-btn comment"><svg viewBox="0 0 24 24"><path d="M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01z"/></svg><span>5</span></div>
|
|
<div class="action-btn like"><svg viewBox="0 0 24 24"><path d="M16.697 5.5c-1.222-.06-2.679.51-3.89 2.16l-.805 1.09-.806-1.09C9.984 6.01 8.526 5.44 7.304 5.5c-1.243.07-2.349.78-2.91 1.91-.552 1.12-.633 2.78.479 4.82 1.074 1.97 3.257 4.27 7.129 6.61 3.87-2.34 6.052-4.64 7.126-6.61 1.111-2.04 1.03-3.7.477-4.82-.561-1.13-1.666-1.84-2.908-1.91z"/></svg><span>21</span></div>
|
|
<div class="action-btn emoji"><svg viewBox="0 0 24 24"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zm3.5-9c.828 0 1.5-.672 1.5-1.5S16.328 8 15.5 8 14 8.672 14 9.5s.672 1.5 1.5 1.5zm-7 0c.828 0 1.5-.672 1.5-1.5S9.328 8 8.5 8 7 8.672 7 9.5 7.672 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"/></svg></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="fab-button"><svg viewBox="0 0 24 24"><path d="M23 3c-6.62-.1-10.38 2.421-13.05 6.03C7.29 12.61 6 17.331 6 22h2c0-1.007.07-2.012.19-3H12c4.1 0 7.48-3.082 7.94-7.054C22.79 10.147 23.17 6.359 23 3zm-7 8h-1.5v2H16c.63-.016 1.2-.08 1.72-.188C16.95 15.24 14.68 17 12 17H8.55c.57-2.512 1.57-4.851 3-6.78 2.16-2.912 5.29-4.911 9.45-5.187C20.95 8.079 19.9 11 16 11zM4 9V6H1V4h3V1h2v3h3v2H6v3H4z"/></svg></div>
|
|
<div class="bottom-nav">
|
|
<div class="nav-item active"><svg viewBox="0 0 24 24"><path d="M21.591 7.146L12.52 1.157c-.316-.21-.724-.21-1.04 0l-9.071 5.99c-.26.173-.409.456-.409.757v13.183c0 .502.418.913.929.913H9.14c.51 0 .929-.41.929-.913v-7.075h3.909v7.075c0 .502.417.913.928.913h6.165c.511 0 .929-.41.929-.913V7.904c0-.301-.158-.584-.409-.758z"/></svg></div>
|
|
<div class="nav-item"><svg viewBox="0 0 24 24"><path d="M10.25 3.75c-3.59 0-6.5 2.91-6.5 6.5s2.91 6.5 6.5 6.5c1.795 0 3.419-.726 4.596-1.904 1.178-1.177 1.904-2.801 1.904-4.596 0-3.59-2.91-6.5-6.5-6.5zm-8.5 6.5c0-4.694 3.806-8.5 8.5-8.5s8.5 3.806 8.5 8.5c0 1.986-.682 3.815-1.824 5.262l4.781 4.781-1.414 1.414-4.781-4.781c-1.447 1.142-3.276 1.824-5.262 1.824-4.694 0-8.5-3.806-8.5-8.5z"/></svg></div>
|
|
<div class="nav-item"><svg viewBox="0 0 24 24"><path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z"/></svg></div>
|
|
<div class="nav-item"><svg viewBox="0 0 24 24"><path d="M12 11.816c1.355 0 2.872-.15 3.84-1.256.814-.93 1.078-2.368.806-4.392-.38-2.825-2.117-4.512-4.646-4.512S7.734 3.343 7.354 6.168c-.272 2.024-.008 3.462.806 4.392.968 1.107 2.485 1.256 3.84 1.256zM8.84 6.368c.162-1.2.787-3.212 3.16-3.212s2.998 2.013 3.16 3.212c.207 1.55.057 2.627-.45 3.205-.455.52-1.266.743-2.71.743s-2.255-.223-2.71-.743c-.507-.578-.657-1.656-.45-3.205zm11.44 12.868c-.877-3.526-4.282-5.99-8.28-5.99s-7.403 2.464-8.28 5.99c-.172.692-.028 1.4.395 1.94.408.52 1.04.82 1.733.82h12.304c.693 0 1.325-.3 1.733-.82.424-.54.567-1.247.394-1.94zm-1.576 1.016c-.126.16-.316.252-.552.252H5.848c-.235 0-.426-.092-.552-.252-.137-.175-.18-.412-.12-.654.71-2.855 3.517-4.85 6.824-4.85s6.114 1.994 6.824 4.85c.06.242.017.479-.12.654z"/></svg></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 帖子详情页 - 带评论 -->
|
|
<div class="phone-container">
|
|
<div class="page-label">帖子详情 - 评论区</div>
|
|
<div class="phone-frame">
|
|
<div class="status-bar">9:41</div>
|
|
<div class="header">
|
|
<div class="back-btn"><svg viewBox="0 0 24 24"><path d="M7.414 13l5.043 5.04-1.414 1.42L3.586 12l7.457-7.46 1.414 1.42L7.414 11H21v2H7.414z"/></svg></div>
|
|
<span class="header-title">帖子</span>
|
|
<div style="width:36px"></div>
|
|
</div>
|
|
<div class="detail-content">
|
|
<div class="post-card">
|
|
<div class="avatar">M</div>
|
|
<div class="post-body">
|
|
<div class="post-header">
|
|
<span class="username">Memory</span>
|
|
<span class="handle">@memory_user</span>
|
|
<span class="dot">·</span>
|
|
<span class="post-time">5分钟</span>
|
|
</div>
|
|
<div class="post-content">今天天气真好，出门散步拍了几张照片 📸</div>
|
|
<div class="post-media grid">
|
|
<div class="media-item"><svg viewBox="0 0 24 24"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg></div>
|
|
<div class="media-item"><svg viewBox="0 0 24 24"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg></div>
|
|
</div>
|
|
<div class="reactions">
|
|
<div class="reaction active"><span class="reaction-emoji">❤️</span><span class="reaction-count">12</span></div>
|
|
<div class="reaction"><span class="reaction-emoji">👍</span><span class="reaction-count">5</span></div>
|
|
<div class="reaction"><span class="reaction-emoji">😊</span><span class="reaction-count">3</span></div>
|
|
</div>
|
|
<div class="post-actions">
|
|
<div class="action-btn comment"><svg viewBox="0 0 24 24"><path d="M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01z"/></svg><span>8</span></div>
|
|
<div class="action-btn like active"><svg viewBox="0 0 24 24"><path d="M20.884 13.19c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.45-4.55-.782-6.14.657-1.57 2.03-2.64 3.76-3.02 1.36-.3 2.94-.07 4.41.87.57.36 1.1.81 1.58 1.34.48-.53 1.01-.98 1.58-1.34 1.47-.94 3.05-1.17 4.41-.87 1.73.38 3.1 1.45 3.76 3.02.67 1.59.58 3.64-.78 6.14z"/></svg><span>20</span></div>
|
|
<div class="action-btn emoji"><svg viewBox="0 0 24 24"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zm3.5-9c.828 0 1.5-.672 1.5-1.5S16.328 8 15.5 8 14 8.672 14 9.5s.672 1.5 1.5 1.5zm-7 0c.828 0 1.5-.672 1.5-1.5S9.328 8 8.5 8 7 8.672 7 9.5 7.672 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"/></svg></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 评论区 -->
|
|
<div class="comments-section">
|
|
<div class="comment">
|
|
<div class="avatar small purple">A</div>
|
|
<div class="comment-body">
|
|
<div class="comment-header">
|
|
<span class="username" style="font-size:14px">Alice</span>
|
|
<span class="handle" style="font-size:13px">@alice</span>
|
|
<span class="dot">·</span>
|
|
<span class="post-time" style="font-size:13px">2分钟</span>
|
|
</div>
|
|
<div class="comment-content">照片拍得真好看！是在哪里拍的呀？</div>
|
|
<div class="comment-actions">
|
|
<div class="comment-action"><svg viewBox="0 0 24 24"><path d="M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01z"/></svg>回复</div>
|
|
<div class="comment-action"><svg viewBox="0 0 24 24"><path d="M16.697 5.5c-1.222-.06-2.679.51-3.89 2.16l-.805 1.09-.806-1.09C9.984 6.01 8.526 5.44 7.304 5.5c-1.243.07-2.349.78-2.91 1.91-.552 1.12-.633 2.78.479 4.82 1.074 1.97 3.257 4.27 7.129 6.61 3.87-2.34 6.052-4.64 7.126-6.61 1.111-2.04 1.03-3.7.477-4.82-.561-1.13-1.666-1.84-2.908-1.91z"/></svg>2</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="comment">
|
|
<div class="avatar small green">B</div>
|
|
<div class="comment-body">
|
|
<div class="comment-header">
|
|
<span class="username" style="font-size:14px">Bob</span>
|
|
<span class="handle" style="font-size:13px">@bob_dev</span>
|
|
<span class="dot">·</span>
|
|
<span class="post-time" style="font-size:13px">1分钟</span>
|
|
</div>
|
|
<div class="comment-content">天气确实不错，适合出门走走 ☀️</div>
|
|
<div class="comment-actions">
|
|
<div class="comment-action"><svg viewBox="0 0 24 24"><path d="M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01z"/></svg>回复</div>
|
|
<div class="comment-action"><svg viewBox="0 0 24 24"><path d="M16.697 5.5c-1.222-.06-2.679.51-3.89 2.16l-.805 1.09-.806-1.09C9.984 6.01 8.526 5.44 7.304 5.5c-1.243.07-2.349.78-2.91 1.91-.552 1.12-.633 2.78.479 4.82 1.074 1.97 3.257 4.27 7.129 6.61 3.87-2.34 6.052-4.64 7.126-6.61 1.111-2.04 1.03-3.7.477-4.82-.561-1.13-1.666-1.84-2.908-1.91z"/></svg>5</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="comment">
|
|
<div class="avatar small">C</div>
|
|
<div class="comment-body">
|
|
<div class="comment-header">
|
|
<span class="username" style="font-size:14px">Charlie</span>
|
|
<span class="handle" style="font-size:13px">@charlie</span>
|
|
<span class="dot">·</span>
|
|
<span class="post-time" style="font-size:13px">刚刚</span>
|
|
</div>
|
|
<div class="comment-content">羡慕！我这边下雨了 🌧️</div>
|
|
<div class="comment-actions">
|
|
<div class="comment-action"><svg viewBox="0 0 24 24"><path d="M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01z"/></svg>回复</div>
|
|
<div class="comment-action"><svg viewBox="0 0 24 24"><path d="M16.697 5.5c-1.222-.06-2.679.51-3.89 2.16l-.805 1.09-.806-1.09C9.984 6.01 8.526 5.44 7.304 5.5c-1.243.07-2.349.78-2.91 1.91-.552 1.12-.633 2.78.479 4.82 1.074 1.97 3.257 4.27 7.129 6.61 3.87-2.34 6.052-4.64 7.126-6.61 1.111-2.04 1.03-3.7.477-4.82-.561-1.13-1.666-1.84-2.908-1.91z"/></svg>1</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="comment-input-bar">
|
|
<div class="avatar small">M</div>
|
|
<input type="text" class="comment-input" placeholder="发表评论...">
|
|
<div class="send-btn"><svg viewBox="0 0 24 24"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 发帖页面 -->
|
|
<div class="phone-container">
|
|
<div class="page-label">发帖页面</div>
|
|
<div class="phone-frame">
|
|
<div class="status-bar">9:41</div>
|
|
<div class="post-page-header">
|
|
<div class="close-btn"><svg viewBox="0 0 24 24"><path d="M10.59 12L4.54 5.96l1.42-1.42L12 10.59l6.04-6.05 1.42 1.42L13.41 12l6.05 6.04-1.42 1.42L12 13.41l-6.04 6.05-1.42-1.42L10.59 12z"/></svg></div>
|
|
<button class="post-btn">发布</button>
|
|
</div>
|
|
<div class="compose-area">
|
|
<div class="avatar">M</div>
|
|
<div class="compose-input">
|
|
<textarea placeholder="有什么新鲜事？"></textarea>
|
|
<div class="compose-toolbar">
|
|
<div class="toolbar-btn"><svg viewBox="0 0 24 24"><path d="M3 5.5C3 4.119 4.119 3 5.5 3h13C19.881 3 21 4.119 21 5.5v13c0 1.381-1.119 2.5-2.5 2.5h-13C4.119 21 3 19.881 3 18.5v-13zM5.5 5c-.276 0-.5.224-.5.5v9.086l3-3 3 3 5-5 3 3V5.5c0-.276-.224-.5-.5-.5h-13zM19 15.414l-3-3-5 5-3-3-3 3V18.5c0 .276.224.5.5.5h13c.276 0 .5-.224.5-.5v-3.086zM9.75 7C8.784 7 8 7.784 8 8.75s.784 1.75 1.75 1.75 1.75-.784 1.75-1.75S10.716 7 9.75 7z"/></svg></div>
|
|
<div class="toolbar-btn"><svg viewBox="0 0 24 24"><path d="M12 7c-1.93 0-3.5 1.57-3.5 3.5S10.07 14 12 14s3.5-1.57 3.5-3.5S13.93 7 12 7zm0 5c-.827 0-1.5-.673-1.5-1.5S11.173 9 12 9s1.5.673 1.5 1.5S12.827 12 12 12zm0-10c-4.687 0-8.5 3.813-8.5 8.5 0 5.967 7.621 11.116 7.945 11.332l.555.37.555-.37c.324-.216 7.945-5.365 7.945-11.332C20.5 5.813 16.687 2 12 2zm0 17.77c-1.665-1.241-6.5-5.196-6.5-9.27C5.5 6.916 8.416 4 12 4s6.5 2.916 6.5 6.5c0 4.073-4.835 8.028-6.5 9.27z"/></svg></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="media-upload-area">
|
|
<svg class="upload-icon" viewBox="0 0 24 24"><path d="M3 5.5C3 4.119 4.119 3 5.5 3h13C19.881 3 21 4.119 21 5.5v13c0 1.381-1.119 2.5-2.5 2.5h-13C4.119 21 3 19.881 3 18.5v-13zM5.5 5c-.276 0-.5.224-.5.5v9.086l3-3 3 3 5-5 3 3V5.5c0-.276-.224-.5-.5-.5h-13zM19 15.414l-3-3-5 5-3-3-3 3V18.5c0 .276.224.5.5.5h13c.276 0 .5-.224.5-.5v-3.086z"/></svg>
|
|
<div class="upload-text">点击上传图片或视频</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 我的页面 -->
|
|
<style>
|
|
.profile-content { height: calc(100% - 44px - 50px - 83px); overflow-y: auto; }
|
|
.profile-header-bg { height: 120px; background: linear-gradient(135deg, #1d9bf0 0%, #0d47a1 100%); position: relative; }
|
|
.profile-avatar-wrapper { position: absolute; bottom: -40px; left: 16px; }
|
|
.profile-avatar {
|
|
width: 80px; height: 80px; border-radius: 50%; border: 4px solid #000;
|
|
background: linear-gradient(135deg, #1d9bf0 0%, #1a8cd8 100%);
|
|
display: flex; align-items: center; justify-content: center;
|
|
color: #fff; font-weight: 700; font-size: 32px; cursor: pointer;
|
|
position: relative; overflow: hidden;
|
|
}
|
|
.profile-avatar:hover .avatar-overlay { opacity: 1; }
|
|
.avatar-overlay {
|
|
position: absolute; inset: 0; background: rgba(0,0,0,0.5);
|
|
display: flex; align-items: center; justify-content: center;
|
|
opacity: 0; transition: opacity 0.2s;
|
|
}
|
|
.avatar-overlay svg { width: 24px; height: 24px; fill: #fff; }
|
|
.profile-info { padding: 50px 16px 16px; }
|
|
.profile-name-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
|
|
.profile-name { font-size: 20px; font-weight: 700; color: #e7e9ea; }
|
|
.edit-icon { cursor: pointer; padding: 4px; border-radius: 50%; transition: background 0.2s; }
|
|
.edit-icon:hover { background: rgba(29,155,240,0.1); }
|
|
.edit-icon svg { width: 16px; height: 16px; fill: #71767b; }
|
|
.profile-handle { font-size: 15px; color: #71767b; margin-bottom: 12px; }
|
|
.profile-bio { font-size: 15px; color: #e7e9ea; line-height: 1.4; margin-bottom: 12px; }
|
|
.profile-stats { display: flex; gap: 20px; margin-bottom: 16px; }
|
|
.stat { display: flex; gap: 4px; }
|
|
.stat-num { font-weight: 700; color: #e7e9ea; font-size: 14px; }
|
|
.stat-label { color: #71767b; font-size: 14px; }
|
|
.profile-joined { display: flex; align-items: center; gap: 4px; color: #71767b; font-size: 14px; }
|
|
.profile-joined svg { width: 18px; height: 18px; fill: #71767b; }
|
|
.settings-section { border-top: 1px solid #2f3336; padding: 16px; }
|
|
.settings-title { font-size: 15px; font-weight: 700; color: #e7e9ea; margin-bottom: 16px; }
|
|
.setting-item {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
padding: 14px 0; border-bottom: 1px solid #2f3336; cursor: pointer;
|
|
}
|
|
.setting-item:last-child { border-bottom: none; }
|
|
.setting-left { display: flex; align-items: center; gap: 12px; }
|
|
.setting-icon { width: 36px; height: 36px; border-radius: 50%; background: #16181c;
|
|
display: flex; align-items: center; justify-content: center; }
|
|
.setting-icon svg { width: 20px; height: 20px; fill: #e7e9ea; }
|
|
.setting-text { font-size: 15px; color: #e7e9ea; }
|
|
.setting-arrow svg { width: 20px; height: 20px; fill: #71767b; }
|
|
.logout-btn {
|
|
margin: 16px; padding: 14px; background: transparent; border: 1px solid #f4212e;
|
|
border-radius: 9999px; color: #f4212e; font-size: 15px; font-weight: 700;
|
|
cursor: pointer; transition: background 0.2s; text-align: center;
|
|
}
|
|
.logout-btn:hover { background: rgba(244,33,46,0.1); }
|
|
</style>
|
|
<div class="phone-container">
|
|
<div class="page-label">我的页面</div>
|
|
<div class="phone-frame">
|
|
<div class="status-bar">9:41</div>
|
|
<div class="header">
|
|
<span class="header-title">我的</span>
|
|
</div>
|
|
<div class="profile-content">
|
|
<div class="profile-header-bg">
|
|
<div class="profile-avatar-wrapper">
|
|
<div class="profile-avatar">
|
|
M
|
|
<div class="avatar-overlay">
|
|
<svg viewBox="0 0 24 24"><path d="M9.697 3H11v2h-.697l-3 2H5c-.276 0-.5.224-.5.5v11c0 .276.224.5.5.5h14c.276 0 .5-.224.5-.5V10h2v8.5c0 1.381-1.119 2.5-2.5 2.5h-14C3.119 21 2 19.881 2 18.5v-11C2 6.119 3.119 5 4.5 5h1.697l3-2zM12 10.5c-1.38 0-2.5 1.12-2.5 2.5s1.12 2.5 2.5 2.5 2.5-1.12 2.5-2.5-1.12-2.5-2.5-2.5zm0-2c2.485 0 4.5 2.015 4.5 4.5s-2.015 4.5-4.5 4.5-4.5-2.015-4.5-4.5 2.015-4.5 4.5-4.5zM17.5 6H20V3h2v3h3v2h-3v3h-2V8h-2.5V6z"/></svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="profile-info">
|
|
<div class="profile-name-row">
|
|
<span class="profile-name">Memory 用户</span>
|
|
<div class="edit-icon">
|
|
<svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
|
|
</div>
|
|
</div>
|
|
<div class="profile-handle">@memory_user</div>
|
|
<div class="profile-bio">记录生活的点点滴滴 ✨ 用 Memory 留住美好时光</div>
|
|
<div class="profile-stats">
|
|
<div class="stat"><span class="stat-num">128</span><span class="stat-label">帖子</span></div>
|
|
<div class="stat"><span class="stat-num">1,024</span><span class="stat-label">获赞</span></div>
|
|
</div>
|
|
<div class="profile-joined">
|
|
<svg viewBox="0 0 24 24"><path d="M7 4V3h2v1h6V3h2v1h1.5C19.89 4 21 5.12 21 6.5v12c0 1.38-1.11 2.5-2.5 2.5h-13C4.12 21 3 19.88 3 18.5v-12C3 5.12 4.12 4 5.5 4H7zm0 2H5.5c-.27 0-.5.22-.5.5v12c0 .28.23.5.5.5h13c.28 0 .5-.22.5-.5v-12c0-.28-.22-.5-.5-.5H17v1h-2V6H9v1H7V6zm0 6h2v2H7v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2z"/></svg>
|
|
<span>2024年11月 加入</span>
|
|
</div>
|
|
</div>
|
|
<div class="settings-section">
|
|
<div class="settings-title">设置</div>
|
|
<div class="setting-item">
|
|
<div class="setting-left">
|
|
<div class="setting-icon"><svg viewBox="0 0 24 24"><path d="M12 11.816c1.355 0 2.872-.15 3.84-1.256.814-.93 1.078-2.368.806-4.392-.38-2.825-2.117-4.512-4.646-4.512S7.734 3.343 7.354 6.168c-.272 2.024-.008 3.462.806 4.392.968 1.107 2.485 1.256 3.84 1.256zM8.84 6.368c.162-1.2.787-3.212 3.16-3.212s2.998 2.013 3.16 3.212c.207 1.55.057 2.627-.45 3.205-.455.52-1.266.743-2.71.743s-2.255-.223-2.71-.743c-.507-.578-.657-1.656-.45-3.205zm11.44 12.868c-.877-3.526-4.282-5.99-8.28-5.99s-7.403 2.464-8.28 5.99c-.172.692-.028 1.4.395 1.94.408.52 1.04.82 1.733.82h12.304c.693 0 1.325-.3 1.733-.82.424-.54.567-1.247.394-1.94z"/></svg></div>
|
|
<span class="setting-text">编辑个人资料</span>
|
|
</div>
|
|
<div class="setting-arrow"><svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg></div>
|
|
</div>
|
|
<div class="setting-item">
|
|
<div class="setting-left">
|
|
<div class="setting-icon"><svg viewBox="0 0 24 24"><path d="M12 1.75C6.34 1.75 1.75 6.34 1.75 12S6.34 22.25 12 22.25 22.25 17.66 22.25 12 17.66 1.75 12 1.75zm-.25 10.48L10.5 17.5l-2-1.5v-3.5L7.25 9 12 5.5l4.75 3.5-1.25 3.5v3.5l-2 1.5-1.25-5.27z"/></svg></div>
|
|
<span class="setting-text">隐私设置</span>
|
|
</div>
|
|
<div class="setting-arrow"><svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg></div>
|
|
</div>
|
|
<div class="setting-item">
|
|
<div class="setting-left">
|
|
<div class="setting-icon"><svg viewBox="0 0 24 24"><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2c4.411 0 8-3.589 8-8s-3.589-8-8-8-8 3.589-8 8 3.589 8 8 8zm-1-8v4h2v-4h3l-4-4-4 4h3z"/></svg></div>
|
|
<span class="setting-text">数据备份</span>
|
|
</div>
|
|
<div class="setting-arrow"><svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg></div>
|
|
</div>
|
|
<div class="setting-item">
|
|
<div class="setting-left">
|
|
<div class="setting-icon"><svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/></svg></div>
|
|
<span class="setting-text">帮助与反馈</span>
|
|
</div>
|
|
<div class="setting-arrow"><svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg></div>
|
|
</div>
|
|
</div>
|
|
<div class="logout-btn">退出登录</div>
|
|
</div>
|
|
<div class="bottom-nav">
|
|
<div class="nav-item"><svg viewBox="0 0 24 24"><path d="M21.591 7.146L12.52 1.157c-.316-.21-.724-.21-1.04 0l-9.071 5.99c-.26.173-.409.456-.409.757v13.183c0 .502.418.913.929.913H9.14c.51 0 .929-.41.929-.913v-7.075h3.909v7.075c0 .502.417.913.928.913h6.165c.511 0 .929-.41.929-.913V7.904c0-.301-.158-.584-.409-.758z"/></svg></div>
|
|
<div class="nav-item"><svg viewBox="0 0 24 24"><path d="M10.25 3.75c-3.59 0-6.5 2.91-6.5 6.5s2.91 6.5 6.5 6.5c1.795 0 3.419-.726 4.596-1.904 1.178-1.177 1.904-2.801 1.904-4.596 0-3.59-2.91-6.5-6.5-6.5zm-8.5 6.5c0-4.694 3.806-8.5 8.5-8.5s8.5 3.806 8.5 8.5c0 1.986-.682 3.815-1.824 5.262l4.781 4.781-1.414 1.414-4.781-4.781c-1.447 1.142-3.276 1.824-5.262 1.824-4.694 0-8.5-3.806-8.5-8.5z"/></svg></div>
|
|
<div class="nav-item"><svg viewBox="0 0 24 24"><path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z"/></svg></div>
|
|
<div class="nav-item active"><svg viewBox="0 0 24 24"><path d="M12 11.816c1.355 0 2.872-.15 3.84-1.256.814-.93 1.078-2.368.806-4.392-.38-2.825-2.117-4.512-4.646-4.512S7.734 3.343 7.354 6.168c-.272 2.024-.008 3.462.806 4.392.968 1.107 2.485 1.256 3.84 1.256zM8.84 6.368c.162-1.2.787-3.212 3.16-3.212s2.998 2.013 3.16 3.212c.207 1.55.057 2.627-.45 3.205-.455.52-1.266.743-2.71.743s-2.255-.223-2.71-.743c-.507-.578-.657-1.656-.45-3.205zm11.44 12.868c-.877-3.526-4.282-5.99-8.28-5.99s-7.403 2.464-8.28 5.99c-.172.692-.028 1.4.395 1.94.408.52 1.04.82 1.733.82h12.304c.693 0 1.325-.3 1.733-.82.424-.54.567-1.247.394-1.94zm-1.576 1.016c-.126.16-.316.252-.552.252H5.848c-.235 0-.426-.092-.552-.252-.137-.175-.18-.412-.12-.654.71-2.855 3.517-4.85 6.824-4.85s6.114 1.994 6.824 4.85c.06.242.017.479-.12.654z"/></svg></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|