GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Mobile Feed Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Robota, Arial, sans-serif;16    color: #222;17  }18 19  /* Status bar */20  .status-bar {21    height: 90px;22    padding: 0 36px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #555;27    font-size: 34px;28  }29  .status-right {30    display: flex;31    align-items: center;32    gap: 22px;33  }34  .status-dot { width: 12px; height: 12px; background: #555; border-radius: 50%; }35 36  /* Header with search */37  .header {38    padding: 16px 32px 12px;39  }40  .header-row {41    display: flex;42    align-items: center;43    gap: 24px;44    margin-bottom: 20px;45  }46  .app-avatar {47    width: 74px;48    height: 74px;49    border-radius: 50%;50    background: #E0E0E0;51    border: 1px solid #BDBDBD;52    display: flex;53    align-items: center;54    justify-content: center;55    color: #757575;56    font-size: 20px;57    position: relative;58  }59  .notif-dot {60    position: absolute;61    right: -2px;62    top: -2px;63    width: 20px;64    height: 20px;65    background: #FF5252;66    border-radius: 50%;67    border: 2px solid #fff;68  }69  .search {70    flex: 1;71    height: 110px;72    background: #F3F3F4;73    border-radius: 28px;74    display: flex;75    align-items: center;76    padding: 0 28px;77    color: #999;78    font-size: 36px;79    box-shadow: inset 0 0 0 1px #e7e7e7;80  }81  .search svg { margin-right: 16px; }82  .bell {83    width: 72px;84    height: 72px;85    border-radius: 18px;86    display: flex;87    align-items: center;88    justify-content: center;89    position: relative;90    color: #222;91  }92  .bell .badge {93    position: absolute;94    right: -2px;95    top: -6px;96    background: #FF5252;97    color: #fff;98    width: 38px;99    height: 38px;100    border-radius: 50%;101    font-size: 26px;102    display: flex;103    align-items: center;104    justify-content: center;105    border: 3px solid #fff;106    box-sizing: border-box;107  }108 109  /* Chips */110  .chips {111    display: flex;112    gap: 22px;113    padding: 10px 32px 2px;114  }115  .chip {116    padding: 22px 36px;117    border-radius: 40px;118    font-size: 34px;119    border: 1px solid #D8D8D8;120    color: #666;121    background: #F7F7F8;122  }123  .chip.primary {124    background: #FF5F86;125    color: #fff;126    border: none;127    box-shadow: 0 4px 8px rgba(255,95,134,0.25);128  }129 130  /* Topic header */131  .topic {132    display: flex;133    align-items: center;134    gap: 22px;135    padding: 28px 32px 18px;136  }137  .topic .circle {138    width: 80px;139    height: 80px;140    border-radius: 50%;141    background: #E0E0E0;142    border: 1px solid #BDBDBD;143    display: flex;144    align-items: center;145    justify-content: center;146    color: #757575;147    font-size: 20px;148  }149  .topic .title {150    font-size: 40px;151    font-weight: 600;152  }153  .topic .follow {154    color: #00BBD3;155    font-weight: 600;156    margin-left: 14px;157    font-size: 38px;158  }159  .topic .more {160    margin-left: auto;161    width: 48px; height: 48px;162    display: flex; align-items: center; justify-content: center;163  }164 165  /* Hero image with overlay text */166  .hero {167    width: 100%;168    height: 740px;169    background: #E0E0E0;170    border-top: 1px solid #BDBDBD;171    border-bottom: 1px solid #BDBDBD;172    position: relative;173    display: flex;174    align-items: center;175    justify-content: center;176    color: #757575;177    font-size: 28px;178  }179  .overlay {180    position: absolute;181    left: 50%;182    top: 50%;183    transform: translate(-50%, -20%);184    text-align: center;185    color: #ffffff;186    font-size: 64px;187    font-weight: 800;188    line-height: 1.25;189    text-shadow: 0 2px 4px rgba(0,0,0,0.35);190  }191 192  /* Social row */193  .social {194    display: flex;195    align-items: center;196    gap: 38px;197    padding: 26px 32px;198    font-size: 40px;199  }200  .social .spacer { flex: 1; }201  .icon {202    width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center;203  }204  .count { margin-left: 12px; color: #222; }205 206  /* Comment card */207  .comment-wrap {208    padding: 20px 32px;209  }210  .comment-row {211    display: flex;212    align-items: flex-start;213    gap: 22px;214  }215  .small-avatar {216    width: 72px;217    height: 72px;218    border-radius: 50%;219    background: #E0E0E0;220    border: 1px solid #BDBDBD;221    display: flex;222    align-items: center;223    justify-content: center;224    color: #757575;225    font-size: 18px;226    position: relative;227  }228  .comment {229    background: #F2F2F3;230    border-radius: 26px;231    padding: 28px 28px;232    font-size: 36px;233    line-height: 1.4;234    color: #333;235    box-shadow: inset 0 0 0 1px #E7E7E7;236  }237  .comment a { color: #00BBD3; text-decoration: none; font-weight: 600; }238 239  .comments-link {240    text-align: center;241    color: #00BBD3;242    font-size: 40px;243    font-weight: 700;244    padding: 26px 0 16px;245  }246 247  .divider { height: 12px; background: #F1F1F2; }248 249  /* Bottom nav */250  .bottom-nav {251    height: 210px;252    display: flex;253    align-items: center;254    justify-content: space-around;255    padding-bottom: 10px;256  }257  .nav-item {258    display: flex;259    flex-direction: column;260    align-items: center;261    gap: 14px;262    color: #7A7A7A;263    font-size: 34px;264  }265  .nav-item .label { font-size: 32px; }266  .gesture {267    position: absolute;268    bottom: 24px;269    left: 50%;270    transform: translateX(-50%);271    width: 320px;272    height: 12px;273    background: #C9C9C9;274    border-radius: 8px;275  }276</style>277</head>278<body>279<div id="render-target">280 281  <!-- Status bar -->282  <div class="status-bar">283    <div>10:27</div>284    <div class="status-right">285      <div class="status-dot"></div>286      <div class="status-dot"></div>287      <div class="status-dot"></div>288      <div>100%</div>289    </div>290  </div>291 292  <!-- Header -->293  <div class="header">294    <div class="header-row">295      <div class="app-avatar">296        [IMG]297        <div class="notif-dot"></div>298      </div>299      <div class="search">300        <svg width="38" height="38" viewBox="0 0 24 24" fill="none">301          <circle cx="10" cy="10" r="7" stroke="#9E9E9E" stroke-width="2"></circle>302          <line x1="15.5" y1="15.5" x2="22" y2="22" stroke="#9E9E9E" stroke-width="2"></line>303        </svg>304        Search305      </div>306      <div class="bell">307        <svg width="44" height="44" viewBox="0 0 24 24" fill="none">308          <path d="M12 2c-3 0-5 2-5 5v3c0 .8-.3 1.6-.8 2.2L5 14h14l-1.2-1.8c-.5-.6-.8-1.4-.8-2.2V7c0-3-2-5-5-5z" stroke="#111" stroke-width="2" fill="none"/>309          <path d="M9 17c0 1.7 1.3 3 3 3s3-1.3 3-3" stroke="#111" stroke-width="2" fill="none"/>310        </svg>311        <div class="badge">1</div>312      </div>313    </div>314 315    <!-- Chips -->316    <div class="chips">317      <div class="chip primary">Popular</div>318      <div class="chip">319        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" style="margin-right:8px;">320          <path d="M6 3h12v18l-6-3-6 3V3z" stroke="#999" stroke-width="2" fill="none"/>321        </svg>322        Saved323      </div>324      <div class="chip">Following</div>325    </div>326  </div>327 328  <!-- Topic header -->329  <div class="topic">330    <div class="circle">[IMG]</div>331    <div class="title">Romantic Relationships · <span class="follow">Follow</span></div>332    <div class="more">333      <svg width="42" height="42" viewBox="0 0 24 24" fill="#777">334        <circle cx="5" cy="12" r="2"></circle>335        <circle cx="12" cy="12" r="2"></circle>336        <circle cx="19" cy="12" r="2"></circle>337      </svg>338    </div>339  </div>340 341  <!-- Hero image -->342  <div class="hero">343    [IMG: Eyelashes and red rose background]344    <div class="overlay">Do you remember your first kiss?<br>Share how it went</div>345  </div>346 347  <!-- Social counts -->348  <div class="social">349    <div class="icon">350      <svg width="48" height="48" viewBox="0 0 24 24" fill="none">351        <path d="M12 21s-7-4.7-7-10a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 19 11c0 5.3-7 10-7 10z" stroke="#111" stroke-width="2" fill="none"/>352      </svg>353    </div>354    <div class="count">8.1K</div>355 356    <div class="icon" style="margin-left:24px;">357      <svg width="48" height="48" viewBox="0 0 24 24" fill="none">358        <path d="M4 5h16v11H9l-5 4V5z" stroke="#111" stroke-width="2" fill="none"/>359      </svg>360    </div>361    <div class="count">14.6K</div>362 363    <div class="spacer"></div>364 365    <div class="icon">366      <svg width="48" height="48" viewBox="0 0 24 24" fill="none">367        <path d="M6 3h12v18l-6-4-6 4V3z" stroke="#111" stroke-width="2" fill="none"/>368      </svg>369    </div>370  </div>371 372  <!-- Comment card -->373  <div class="comment-wrap">374    <div class="comment-row">375      <div class="small-avatar">[IMG]</div>376      <div class="comment">377        back in september, me and him went to a forest preserve by my house. we laid in the back of his truck and watched the stars and cuddled. it was so crazy for me, i had never kissed, hugged, or cuddled by a boy before...378        <a href="#">Continue reading</a>379      </div>380    </div>381    <div class="comments-link">View all 14.6K comments</div>382  </div>383 384  <div class="divider"></div>385 386  <!-- Bottom navigation -->387  <div class="bottom-nav">388    <div class="nav-item">389      <svg width="64" height="64" viewBox="0 0 24 24" fill="none">390        <rect x="3" y="4" width="18" height="16" rx="2" stroke="#7A7A7A" stroke-width="2" fill="none"></rect>391        <line x1="7" y1="8" x2="17" y2="8" stroke="#7A7A7A" stroke-width="2"></line>392      </svg>393      <div class="label">Today</div>394    </div>395    <div class="nav-item">396      <svg width="64" height="64" viewBox="0 0 24 24" fill="none">397        <rect x="4" y="4" width="6" height="6" stroke="#7A7A7A" stroke-width="2"></rect>398        <rect x="14" y="4" width="6" height="6" stroke="#7A7A7A" stroke-width="2"></rect>399        <rect x="4" y="14" width="6" height="6" stroke="#7A7A7A" stroke-width="2"></rect>400        <rect x="14" y="14" width="6" height="6" stroke="#7A7A7A" stroke-width="2"></rect>401      </svg>402      <div class="label">Insights</div>403    </div>404    <div class="nav-item">405      <svg width="64" height="64" viewBox="0 0 24 24" fill="none">406        <path d="M3 7h18v10H3z" stroke="#7A7A7A" stroke-width="2" fill="none"></path>407        <circle cx="12" cy="12" r="3" stroke="#7A7A7A" stroke-width="2" fill="none"></circle>408        <path d="M6 7c1 2 2 3 6 3s5-1 6-3" stroke="#7A7A7A" stroke-width="2" fill="none"></path>409      </svg>410      <div class="label">Secret Chats</div>411    </div>412  </div>413 414  <div class="gesture"></div>415</div>416</body>417</html>