GD-ML/AndroidCode

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>UI Render</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: Arial, Helvetica, sans-serif;16    color: #222;17  }18 19  /* Top area */20  .safe-pad { height: 40px; } /* status bar spacer */21  .topbar {22    display: flex;23    align-items: center;24    gap: 24px;25    padding: 24px 32px;26  }27  .app-avatar {28    width: 74px;29    height: 74px;30    border-radius: 50%;31    background: #E0E0E0;32    border: 1px solid #BDBDBD;33    display: flex;34    align-items: center;35    justify-content: center;36    color: #757575;37    position: relative;38    font-size: 22px;39  }40  .app-avatar .dot {41    position: absolute;42    right: -2px;43    top: -2px;44    width: 18px;45    height: 18px;46    background: #ff5b6e;47    border: 3px solid #fff;48    border-radius: 50%;49  }50  .search {51    flex: 1;52    height: 90px;53    background: #F3F3F3;54    border-radius: 45px;55    display: flex;56    align-items: center;57    padding: 0 28px;58    color: #9E9E9E;59    font-size: 40px;60    gap: 20px;61  }62  .notif {63    width: 64px;64    height: 64px;65    position: relative;66    display: flex;67    align-items: center;68    justify-content: center;69  }70  .notif .badge {71    position: absolute;72    right: -2px;73    top: -6px;74    background: #ff3b57;75    color: #fff;76    font-weight: bold;77    font-size: 26px;78    border-radius: 30px;79    padding: 2px 10px;80  }81 82  /* Chips */83  .chips {84    display: flex;85    gap: 24px;86    padding: 20px 32px;87  }88  .chip {89    padding: 18px 34px;90    border-radius: 40px;91    background: #EFEFEF;92    font-size: 38px;93    color: #555;94    display: inline-flex;95    align-items: center;96    gap: 12px;97  }98  .chip.following {99    background: linear-gradient(90deg, #ff6a8a, #ff6a8a 40%, #ff6fb0 100%);100    color: #fff;101    font-weight: bold;102  }103 104  /* Group header */105  .group-head {106    display: flex;107    align-items: center;108    padding: 20px 32px;109    gap: 20px;110  }111  .group-avatar {112    width: 92px;113    height: 92px;114    border-radius: 50%;115    background: #E0E0E0;116    border: 1px solid #BDBDBD;117    display: flex;118    align-items: center;119    justify-content: center;120    color: #757575;121    font-size: 22px;122    overflow: hidden;123  }124  .group-info {125    flex: 1;126  }127  .group-title {128    font-size: 46px;129    font-weight: bold;130    margin-bottom: 6px;131  }132  .group-sub {133    font-size: 30px;134    color: #9E9E9E;135  }136  .more {137    width: 60px;138    height: 60px;139    display: flex;140    align-items: center;141    justify-content: center;142  }143 144  /* Banner post */145  .banner {146    margin-top: 10px;147    width: 100%;148    height: 560px;149    position: relative;150  }151  .banner .img {152    position: absolute;153    left: 0; top: 0; right: 0; bottom: 0;154    background: #E0E0E0;155    border-top: 1px solid #BDBDBD;156    border-bottom: 1px solid #BDBDBD;157    display: flex;158    align-items: center;159    justify-content: center;160    color: #757575;161    font-size: 34px;162  }163  .banner .title {164    position: absolute;165    left: 40px;166    right: 40px;167    bottom: 40px;168    color: #ffffff;169    font-weight: 800;170    font-size: 56px;171    line-height: 1.2;172    text-align: center;173    text-shadow: 0 2px 6px rgba(0,0,0,0.3);174  }175 176  /* Reactions row */177  .reactions {178    display: flex;179    align-items: center;180    gap: 36px;181    padding: 28px 36px;182    font-size: 38px;183  }184  .reaction {185    display: flex;186    align-items: center;187    gap: 16px;188    color: #333;189  }190  .bookmark-right {191    margin-left: auto;192  }193 194  /* Comment card */195  .thread {196    padding: 0 32px 0 32px;197  }198  .thread-header {199    display: flex;200    align-items: center;201    gap: 16px;202  }203  .mini-avatar-wrap {204    width: 74px;205    height: 74px;206    border-radius: 50%;207    background: #ff7fb1;208    display: flex;209    align-items: center;210    justify-content: center;211  }212  .mini-avatar {213    width: 58px;214    height: 58px;215    border-radius: 50%;216    background: #E0E0E0;217    border: 1px solid #BDBDBD;218    display: flex;219    align-items: center;220    justify-content: center;221    color: #757575;222    font-size: 20px;223  }224  .comment-bubble {225    margin-top: 16px;226    background: #F4F4F4;227    border-radius: 26px;228    padding: 28px;229    font-size: 40px;230    line-height: 1.4;231    color: #111;232  }233  .attach {234    margin-top: 20px;235    width: 340px;236    height: 260px;237    background: #E0E0E0;238    border: 1px solid #BDBDBD;239    display: flex;240    align-items: center;241    justify-content: center;242    color: #757575;243    font-size: 28px;244    border-radius: 12px;245    overflow: hidden;246  }247 248  /* Bottom nav */249  .bottom-nav {250    position: absolute;251    left: 0; right: 0; bottom: 40px;252    height: 170px;253    border-top: 1px solid #E5E5E5;254    background: #ffffff;255    display: flex;256    align-items: center;257    justify-content: space-around;258    padding-bottom: 20px;259  }260  .nav-item {261    display: flex;262    flex-direction: column;263    align-items: center;264    gap: 16px;265    color: #777;266    font-size: 32px;267  }268  .nav-item .accent { color: #13D5CA; }269  .home-indicator {270    position: absolute;271    bottom: 10px;272    left: 50%;273    transform: translateX(-50%);274    width: 220px;275    height: 12px;276    background: #D6D6D6;277    border-radius: 12px;278  }279 280  /* Utility */281  .muted { color: #9E9E9E; }282</style>283</head>284<body>285<div id="render-target">286  <div class="safe-pad"></div>287 288  <!-- Top bar with avatar, search and notifications -->289  <div class="topbar">290    <div class="app-avatar">291      [IMG: App Mascot]292      <div class="dot"></div>293    </div>294    <div class="search">295      <svg width="42" height="42" viewBox="0 0 24 24" fill="none">296        <circle cx="10" cy="10" r="7" stroke="#9E9E9E" stroke-width="2"></circle>297        <line x1="15.5" y1="15.5" x2="21" y2="21" stroke="#9E9E9E" stroke-width="2" stroke-linecap="round"></line>298      </svg>299      Search300    </div>301    <div class="notif">302      <svg width="44" height="44" viewBox="0 0 24 24" fill="none">303        <path d="M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2Zm6-6V11a6 6 0 0 0-12 0v5l-2 2v1h16v-1l-2-2Z" stroke="#222" stroke-width="1.6" fill="none"/>304      </svg>305      <div class="badge">1</div>306    </div>307  </div>308 309  <!-- Chips -->310  <div class="chips">311    <div class="chip">Popular</div>312    <div class="chip">313      <svg width="34" height="34" viewBox="0 0 24 24" fill="none">314        <path d="M6 3h12a1 1 0 0 1 1 1v16l-7-4-7 4V4a1 1 0 0 1 1-1z" stroke="#777" stroke-width="1.6" fill="none"/>315      </svg>316      Saved317    </div>318    <div class="chip following">Following</div>319  </div>320 321  <!-- Group header -->322  <div class="group-head">323    <div class="group-avatar">[IMG: Group Avatar]</div>324    <div class="group-info">325      <div class="group-title">Moms-To-Be Club</div>326      <div class="group-sub">New top comment from 2w ago</div>327    </div>328    <div class="more">329      <svg width="36" height="36" viewBox="0 0 24 24" fill="#9E9E9E">330        <circle cx="12" cy="5" r="2"></circle>331        <circle cx="12" cy="12" r="2"></circle>332        <circle cx="12" cy="19" r="2"></circle>333      </svg>334    </div>335  </div>336 337  <!-- Banner post with overlay title -->338  <div class="banner">339    <div class="img">[IMG: Hands holding ultrasound photo on yellow background]</div>340    <div class="title">341      Baby's first photo: A place to<br>342      share your ultrasound scan photo,<br>343      if you like344    </div>345  </div>346 347  <!-- Reactions row -->348  <div class="reactions">349    <div class="reaction">350      <svg width="46" height="46" viewBox="0 0 24 24" fill="none">351        <path d="M12 21s-6.5-4.35-9.5-7.35A6 6 0 0 1 12 5a6 6 0 0 1 9.5 8.65C18.5 16.65 12 21 12 21z" stroke="#222" stroke-width="1.6" fill="none"/>352      </svg>353      <span>8.8K</span>354    </div>355    <div class="reaction">356      <svg width="46" height="46" viewBox="0 0 24 24" fill="none">357        <path d="M4 5h16v10H7l-3 4V5z" stroke="#222" stroke-width="1.6" fill="none"/>358      </svg>359      <span>59.9K</span>360    </div>361    <div class="reaction bookmark-right">362      <svg width="46" height="46" viewBox="0 0 24 24" fill="none">363        <path d="M6 3h12a1 1 0 0 1 1 1v16l-7-4-7 4V4a1 1 0 0 1 1-1z" stroke="#222" stroke-width="1.6" fill="none"/>364      </svg>365    </div>366  </div>367 368  <!-- Comment thread preview -->369  <div class="thread">370    <div class="thread-header">371      <div class="mini-avatar-wrap">372        <div class="mini-avatar">[IMG: Mascot]</div>373      </div>374      <div class="comment-bubble">375        No one in my family or my husbands had twins, i’m only 19 struggling with school and now 9w3d having twins, it’s been hard, very, but it will be okay, i’m not gonna give up❤️376      </div>377    </div>378    <div class="attach">[IMG: Ultrasound scan photo]</div>379  </div>380 381  <!-- Bottom navigation -->382  <div class="bottom-nav">383    <div class="nav-item">384      <svg width="50" height="50" viewBox="0 0 24 24" fill="none">385        <rect x="3" y="3" width="7" height="7" stroke="#777" stroke-width="1.6"></rect>386        <rect x="14" y="3" width="7" height="7" stroke="#777" stroke-width="1.6"></rect>387        <rect x="3" y="14" width="7" height="7" stroke="#777" stroke-width="1.6"></rect>388        <rect x="14" y="14" width="7" height="7" stroke="#777" stroke-width="1.6"></rect>389      </svg>390      <div>Today</div>391    </div>392    <div class="nav-item">393      <svg width="50" height="50" viewBox="0 0 24 24" fill="none">394        <path d="M4 4h16v16H4z" stroke="#777" stroke-width="1.6" fill="none"></path>395        <path d="M8 12h8" stroke="#777" stroke-width="1.6" stroke-linecap="round"></path>396        <path d="M12 8v8" stroke="#777" stroke-width="1.6" stroke-linecap="round"></path>397      </svg>398      <div>Insights</div>399    </div>400    <div class="nav-item accent">401      <svg width="50" height="50" viewBox="0 0 24 24" fill="none">402        <rect x="3" y="5" width="18" height="14" rx="3" stroke="#13D5CA" stroke-width="1.8"></rect>403        <circle cx="12" cy="12" r="3" stroke="#13D5CA" stroke-width="1.8"></circle>404      </svg>405      <div class="accent">Secret Chats</div>406    </div>407  </div>408  <div class="home-indicator"></div>409</div>410</body>411</html>