GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8" />5<meta name="viewport" content="width=1080, initial-scale=1.0" />6<title>Community Feed Mock</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;13 color: #1f2d1f;14 }15 #render-target {16 width: 1080px;17 height: 2400px;18 position: relative;19 overflow: hidden;20 background: #FFFFFF;21 }22 23 /* Status bar */24 .status-bar {25 height: 96px;26 padding: 0 32px;27 display: flex;28 align-items: center;29 justify-content: space-between;30 color: #3d3d3d;31 font-size: 34px;32 letter-spacing: 0.3px;33 }34 .status-left {35 display: flex;36 align-items: center;37 gap: 16px;38 font-weight: 600;39 }40 .status-right {41 display: flex;42 align-items: center;43 gap: 28px;44 }45 .icon {46 width: 48px;47 height: 48px;48 }49 50 /* Header */51 .header {52 height: 140px;53 padding: 0 32px;54 display: flex;55 align-items: center;56 position: relative;57 }58 .header .side {59 width: 140px;60 display: flex;61 align-items: center;62 justify-content: flex-start;63 }64 .header .side.right {65 justify-content: flex-end;66 }67 .header-title {68 flex: 1;69 text-align: center;70 font-size: 52px;71 color: #244F33;72 font-weight: 700;73 }74 .icon-btn {75 width: 72px;76 height: 72px;77 border-radius: 24px;78 border: 2px solid #2E7D32;79 display: inline-flex;80 align-items: center;81 justify-content: center;82 color: #2E7D32;83 }84 85 /* User row */86 .user-row {87 display: flex;88 align-items: center;89 gap: 24px;90 padding: 16px 32px 20px;91 }92 .avatar {93 width: 116px;94 height: 116px;95 border-radius: 50%;96 background: #E0E0E0;97 border: 1px solid #BDBDBD;98 display: flex;99 align-items: center;100 justify-content: center;101 color: #757575;102 font-size: 22px;103 }104 .username {105 font-size: 42px;106 color: #244F33;107 font-weight: 700;108 }109 .spacer {110 flex: 1;111 }112 .kebab {113 width: 56px;114 height: 56px;115 display: inline-flex;116 align-items: center;117 justify-content: center;118 color: #2E7D32;119 }120 121 /* Post image */122 .post-image {123 position: relative;124 width: 100%;125 height: 920px;126 background: #E0E0E0;127 border-top: 1px solid #BDBDBD;128 border-bottom: 1px solid #BDBDBD;129 display: flex;130 align-items: center;131 justify-content: center;132 color: #757575;133 font-size: 40px;134 }135 .plant-chip {136 position: absolute;137 left: 28px;138 bottom: 28px;139 display: inline-flex;140 align-items: center;141 gap: 18px;142 background: #EAF3EA;143 color: #244F33;144 border: 1px solid #D5E6D6;145 padding: 20px 26px;146 border-radius: 42px;147 font-size: 32px;148 font-weight: 600;149 }150 .chip-icon {151 width: 56px;152 height: 56px;153 border-radius: 50%;154 background: #FFFFFF;155 border: 1px solid #C7DEC8;156 display: inline-flex;157 align-items: center;158 justify-content: center;159 color: #2E7D32;160 }161 162 /* Post details */163 .post-details {164 padding: 30px 32px 8px;165 }166 .likes-row {167 display: flex;168 align-items: center;169 gap: 16px;170 }171 .likes-row .like-count {172 font-size: 44px;173 color: #2E7D32;174 font-weight: 800;175 }176 .actions-right {177 margin-left: auto;178 display: flex;179 align-items: center;180 gap: 28px;181 }182 .caption {183 font-size: 40px;184 margin: 18px 0 14px;185 color: #263326;186 }187 .link {188 color: #2E7D32;189 font-weight: 700;190 font-size: 36px;191 }192 .timestamp {193 margin-top: 14px;194 font-size: 30px;195 color: #7C8B7C;196 }197 198 /* Secondary user row (comment section header) */199 .user-row.secondary {200 padding-top: 24px;201 padding-bottom: 16px;202 }203 204 /* Divider to hint next content */205 .divider {206 width: 100%;207 height: 18px;208 background: #F5F7F5;209 border-top: 1px solid #EEF2EE;210 border-bottom: 1px solid #EEF2EE;211 margin: 16px 0 0;212 }213 214 /* Bottom navigation */215 .bottom-nav {216 position: absolute;217 left: 0;218 right: 0;219 bottom: 88px;220 height: 152px;221 border-top: 1px solid #E8E8E8;222 background: #FFFFFF;223 padding: 18px 32px 12px;224 display: flex;225 align-items: center;226 justify-content: space-around;227 }228 .nav-item {229 width: 120px;230 height: 120px;231 border-radius: 36px;232 display: flex;233 align-items: center;234 justify-content: center;235 color: #2E7D32;236 }237 .nav-item.fab {238 background: #2E7D32;239 color: #FFFFFF;240 width: 130px;241 height: 130px;242 border-radius: 40px;243 }244 .nav-item.dim {245 color: #A5C2A5;246 }247 .nav-item.yellow {248 color: #F2C84B;249 }250 .nav-dot {251 position: absolute;252 bottom: 74px;253 left: calc(50% - 160px);254 width: 14px;255 height: 14px;256 background: #2E7D32;257 border-radius: 50%;258 }259 260 /* Home indicator */261 .home-indicator {262 position: absolute;263 left: 50%;264 transform: translateX(-50%);265 bottom: 24px;266 width: 360px;267 height: 14px;268 border-radius: 8px;269 background: #BDBDBD;270 }271</style>272</head>273<body>274<div id="render-target">275 <!-- Status Bar -->276 <div class="status-bar">277 <div class="status-left">278 <span>9:08</span>279 <svg class="icon" viewBox="0 0 24 24" fill="#7a7a7a">280 <path d="M6 15c0-3.3 2.7-6 6-6 2.2 0 4.1 1.2 5.1 3 1.6.2 2.9 1.6 2.9 3.3 0 1.9-1.6 3.4-3.5 3.4H7.5C6.1 18.7 5 17.6 5 16.2 5 15.5 5.4 15 6 15z"/>281 </svg>282 </div>283 <div class="status-right">284 <svg class="icon" viewBox="0 0 24 24" fill="#6f6f6f">285 <path d="M3 18h2.5L20 3.5V1L3 18zM14 3l7 7V8l-6-6h-1z"/>286 </svg>287 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#6f6f6f" stroke-width="2">288 <rect x="3" y="6" width="16" height="12" rx="2" ry="2"></rect>289 <rect x="19" y="10" width="2" height="4" fill="#6f6f6f" stroke="none"></rect>290 </svg>291 </div>292 </div>293 294 <!-- Header -->295 <div class="header">296 <div class="side">297 <div class="icon-btn" aria-label="Notifications">298 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#2E7D32" stroke-width="2">299 <path d="M12 22a2.5 2.5 0 0 0 2.4-2H9.6a2.5 2.5 0 0 0 2.4 2z"/>300 <path d="M18 16V10a6 6 0 1 0-12 0v6l-2 2h16l-2-2z"/>301 </svg>302 </div>303 </div>304 <div class="header-title">Community</div>305 <div class="side right">306 <div class="icon-btn" aria-label="Add Post">307 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#2E7D32" stroke-width="2">308 <path d="M12 5v14M5 12h14"/>309 </svg>310 </div>311 </div>312 </div>313 314 <!-- User Row -->315 <div class="user-row">316 <div class="avatar">[IMG: User Avatar]</div>317 <div class="username">Harry_Potter</div>318 <div class="spacer"></div>319 <div class="kebab" aria-label="More">320 <svg viewBox="0 0 24 24" width="44" height="44" fill="#2E7D32">321 <circle cx="12" cy="5" r="2.2"></circle>322 <circle cx="12" cy="12" r="2.2"></circle>323 <circle cx="12" cy="19" r="2.2"></circle>324 </svg>325 </div>326 </div>327 328 <!-- Post Image -->329 <div class="post-image">330 [IMG: Indoor plant photo]331 <div class="plant-chip">332 <div class="chip-icon">333 <svg viewBox="0 0 24 24" width="34" height="34" fill="#2E7D32">334 <path d="M12 21c-3-6 1-10 7-10-4 4-5 5-7 10zM11 13C7 13 5 9 5 5c4 0 8 2 8 6 0 1-.3 1.8-.8 2.5-.7.3-1.4.5-2.2.5z"/>335 </svg>336 </div>337 <span>Scarlet Wisteria (Sesbania grandiflora)</span>338 </div>339 </div>340 341 <!-- Post Details -->342 <div class="post-details">343 <div class="likes-row">344 <div class="like-count">1 like</div>345 <div class="actions-right">346 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#2E7D32" stroke-width="2">347 <path d="M12 21s-6-4.3-8.5-7.2C1 11 2 7.5 5 7c2-.3 3.5 1 4 2 .5-1 2-2.3 4-2 3 .5 4 4 1.5 6.8C18 16.7 12 21 12 21z"/>348 </svg>349 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#2E7D32" stroke-width="2">350 <path d="M21 15a4 4 0 0 1-4 4H9l-5 4V7a4 4 0 0 1 4-4h9a4 4 0 0 1 4 4v8z"/>351 </svg>352 </div>353 </div>354 <div class="caption">My bedroom plant</div>355 <div class="link">View 1 comment</div>356 <div class="timestamp">31 minutes ago</div>357 </div>358 359 <!-- Secondary user row (e.g., first comment author preview) -->360 <div class="user-row secondary">361 <div class="avatar">[IMG: User Avatar]</div>362 <div class="username">Harry_Potter</div>363 <div class="spacer"></div>364 <div class="kebab" aria-label="More">365 <svg viewBox="0 0 24 24" width="44" height="44" fill="#2E7D32">366 <circle cx="12" cy="5" r="2.2"></circle>367 <circle cx="12" cy="12" r="2.2"></circle>368 <circle cx="12" cy="19" r="2.2"></circle>369 </svg>370 </div>371 </div>372 373 <div class="divider"></div>374 375 <!-- Bottom Navigation -->376 <div class="bottom-nav">377 <div class="nav-item fab" aria-label="Camera">378 <svg class="icon" viewBox="0 0 24 24" fill="#FFFFFF">379 <path d="M9 5h6l2 2h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h3l2-2zM12 10a4 4 0 1 0 0 8 4 4 0 0 0 0-8z"/>380 </svg>381 </div>382 <div class="nav-item" aria-label="Posts">383 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">384 <rect x="5" y="3" width="14" height="18" rx="2"></rect>385 <path d="M8 7h8M8 12h8M8 17h6"/>386 </svg>387 </div>388 <div class="nav-item dim" aria-label="Discover">389 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">390 <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2z"></path>391 <path d="M14 10l-4 1-1 4 4-1 1-4z" fill="currentColor" stroke="none"></path>392 </svg>393 </div>394 <div class="nav-item dim" aria-label="Profile">395 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">396 <circle cx="12" cy="8" r="4"></circle>397 <path d="M4 20c1.5-3.5 5-6 8-6s6.5 2.5 8 6"/>398 </svg>399 </div>400 <div class="nav-item yellow" aria-label="Premium">401 <svg class="icon" viewBox="0 0 24 24" fill="currentColor">402 <path d="M4 20l2-10 6 4 6-4 2 10H4zM6 6l2.5 3L12 6l3.5 3L18 6"/>403 </svg>404 </div>405 <div class="nav-dot"></div>406 </div>407 408 <!-- Home Indicator -->409 <div class="home-indicator"></div>410</div>411</body>412</html>