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>Baby's first photo - UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #ffffff;15    border-radius: 0;16    box-shadow: none;17  }18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 96px;25    padding: 0 36px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #222;30    font-weight: 600;31    font-size: 38px;32  }33  .status-icons {34    display: flex;35    gap: 24px;36    align-items: center;37  }38  .icon {39    width: 40px; height: 40px; display: inline-block;40  }41 42  /* Header */43  .header {44    position: absolute;45    top: 96px;46    left: 0;47    width: 1080px;48    height: 132px;49    display: flex;50    align-items: center;51    padding: 0 32px;52    border-bottom: 1px solid #eee;53    box-sizing: border-box;54  }55  .back-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; margin-right: 16px; }56  .title {57    font-size: 42px;58    font-weight: 700;59    color: #222;60    white-space: nowrap;61    overflow: hidden;62    text-overflow: ellipsis;63    max-width: 760px;64  }65  .bell {66    margin-left: auto;67    position: relative;68    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;69  }70  .badge {71    position: absolute;72    top: 6px; right: 6px;73    background: #ff4d5a;74    color: #fff;75    font-size: 28px;76    line-height: 28px;77    padding: 6px 12px;78    border-radius: 999px;79    border: 2px solid #fff;80  }81 82  /* Tabs */83  .tabs {84    position: absolute;85    top: 228px;86    left: 0;87    width: 1080px;88    height: 120px;89    display: flex;90    align-items: center;91    padding: 0 32px;92    box-sizing: border-box;93    border-bottom: 1px solid #eee;94    background: #fff;95    gap: 16px;96  }97  .pill {98    padding: 18px 36px;99    border-radius: 999px;100    font-size: 36px;101    font-weight: 700;102    border: 1px solid #e6e6e6;103    color: #777;104    background: #f4f4f4;105  }106  .pill.active {107    background: #ff6f91;108    border-color: #ff6f91;109    color: #fff;110  }111 112  /* Content area */113  .content {114    position: absolute;115    top: 348px;116    left: 0;117    width: 1080px;118    height: 1770px;119    box-sizing: border-box;120    padding: 24px 32px 180px;121    overflow: hidden;122  }123 124  .bubble {125    max-width: 950px;126    background: #f2f2f2;127    color: #333;128    font-size: 36px;129    line-height: 1.5;130    padding: 24px 28px;131    border-radius: 26px;132    margin: 12px 0 24px 24px;133  }134 135  .post-image {136    width: 650px;137    height: 880px;138    background: #E0E0E0;139    border: 1px solid #BDBDBD;140    border-radius: 22px;141    display: flex;142    align-items: center;143    justify-content: center;144    color: #757575;145    font-size: 34px;146    margin-left: 24px;147    overflow: hidden;148  }149 150  .meta-row {151    display: flex;152    align-items: center;153    gap: 18px;154    margin: 18px 0 12px 24px;155  }156  .age {157    color: #888;158    font-size: 32px;159  }160  .like-pill {161    margin-left: 12px;162    display: inline-flex;163    align-items: center;164    gap: 10px;165    padding: 8px 18px;166    border: 1px solid #e6e6e6;167    border-radius: 999px;168    color: #666;169    font-size: 32px;170    background: #fff;171  }172  .link {173    color: #09b2c7;174    font-size: 40px;175    font-weight: 700;176    margin: 24px 24px;177  }178 179  .comment {180    display: flex;181    align-items: flex-start;182    gap: 18px;183    margin: 32px 24px;184  }185  .avatar {186    width: 86px; height: 86px;187    border-radius: 999px;188    background: #E0E0E0;189    border: 1px solid #BDBDBD;190    display: flex; align-items: center; justify-content: center;191    color: #757575; font-size: 28px;192  }193  .comment-bubble {194    flex: 1;195    background: #f2f2f2;196    border-radius: 28px;197    padding: 24px 28px;198    font-size: 36px;199    line-height: 1.55;200    color: #333;201    position: relative;202  }203  .dots {204    position: absolute;205    right: 18px;206    top: 18px;207    width: 28px;208    height: 80px;209    display: flex;210    align-items: center;211    justify-content: center;212  }213 214  /* Composer bar */215  .composer {216    position: absolute;217    left: 0;218    bottom: 96px;219    width: 1080px;220    height: 140px;221    background: #ffffff;222    border-top: 1px solid #e8e8e8;223    display: flex;224    align-items: center;225    padding: 0 28px;226    box-sizing: border-box;227  }228  .camera {229    width: 72px; height: 72px;230    display: flex; align-items: center; justify-content: center;231    margin-right: 18px;232  }233  .input {234    flex: 1;235    height: 88px;236    border: 1px solid #e6e6e6;237    border-radius: 999px;238    padding: 0 32px;239    font-size: 36px;240    color: #777;241    display: flex; align-items: center;242    background: #fafafa;243  }244  .send {245    width: 88px; height: 88px; margin-left: 18px;246    display: flex; align-items: center; justify-content: center;247  }248 249  /* Gesture bar */250  .gesture {251    position: absolute;252    bottom: 24px;253    left: 50%;254    transform: translateX(-50%);255    width: 280px;256    height: 16px;257    background: #cfcfcf;258    border-radius: 10px;259  }260</style>261</head>262<body>263<div id="render-target">264 265  <!-- Status bar -->266  <div class="status-bar">267    <div>10:29</div>268    <div class="status-icons">269      <!-- Simple status icons -->270      <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="none" stroke="#333" stroke-width="2"/><path d="M7 12h10" stroke="#333" stroke-width="2"/></svg>271      <svg class="icon" viewBox="0 0 24 24"><path d="M3 12c3-4 6-6 9-6s6 2 9 6" fill="none" stroke="#333" stroke-width="2"/><circle cx="12" cy="12" r="2" fill="#333"/></svg>272      <svg class="icon" viewBox="0 0 24 24"><rect x="2" y="6" width="18" height="12" rx="3" fill="none" stroke="#333" stroke-width="2"/><path d="M20 10l2 2-2 2" stroke="#333" stroke-width="2"/></svg>273      <svg class="icon" viewBox="0 0 24 24"><rect x="2" y="7" width="18" height="10" rx="2" fill="none" stroke="#333" stroke-width="2"/><path d="M22 10v4" stroke="#333" stroke-width="2"/><path d="M22 8v0" stroke="#333" stroke-width="2"/></svg>274      <div style="font-size:32px; color:#333;">100%</div>275    </div>276  </div>277 278  <!-- Header -->279  <div class="header">280    <div class="back-btn">281      <svg width="48" height="48" viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>282    </div>283    <div class="title">Baby's first photo: A place to shar...</div>284    <div class="bell">285      <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 3a5 5 0 0 1 5 5v3.5l1.5 3.5H5.5L7 11.5V8a5 5 0 0 1 5-5z" fill="none" stroke="#333" stroke-width="2"/><path d="M9 18a3 3 0 0 0 6 0" fill="none" stroke="#333" stroke-width="2"/></svg>286      <div class="badge">1</div>287    </div>288  </div>289 290  <!-- Tabs -->291  <div class="tabs">292    <div class="pill active">Top</div>293    <div class="pill">Newest</div>294    <div class="pill">My</div>295    <div class="pill">Expert</div>296  </div>297 298  <!-- Content -->299  <div class="content">300    <div class="bubble">been hard, very, but it will be okay, i’m not gonna give up ❤️</div>301 302    <div class="post-image">[IMG: Ultrasound scan photo]</div>303 304    <div class="meta-row">305      <div class="age">2w</div>306      <div class="like-pill">307        <svg width="36" height="36" viewBox="0 0 24 24"><path d="M12 21s-7-4.35-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.65-7 10-7 10z" fill="none" stroke="#666" stroke-width="2"/></svg>308        <span>180</span>309      </div>310    </div>311 312    <div class="link">View all 9 replies</div>313 314    <div class="comment">315      <div class="avatar">Avatar</div>316      <div class="comment-bubble">317        i used to be pregnant at 17 with a boy i was with for 3 years its not easy i had a stress induced miscarriage after i caught him in MY bed with his brothers wife... i lost my first live and my children the same day... its going to be hard id do anything to get my child back but im now 21 and 11 weeks i got pregnant with the man i feel im ment to be with him and i argue alot more then usual couples but we know we love each other and we know know its hard were financially poor living at a friends house with no318        <div class="dots">319          <svg width="16" height="64" viewBox="0 0 4 16">320            <circle cx="2" cy="2" r="2" fill="#999"></circle>321            <circle cx="2" cy="8" r="2" fill="#999"></circle>322            <circle cx="2" cy="14" r="2" fill="#999"></circle>323          </svg>324        </div>325      </div>326    </div>327  </div>328 329  <!-- Composer -->330  <div class="composer">331    <div class="camera">332      <svg width="48" height="48" viewBox="0 0 24 24"><rect x="3" y="7" width="18" height="12" rx="3" fill="none" stroke="#666" stroke-width="2"/><path d="M8 7l2-2h4l2 2" fill="none" stroke="#666" stroke-width="2"/><circle cx="12" cy="13" r="3" fill="none" stroke="#666" stroke-width="2"/></svg>333    </div>334    <div class="input">Write a comment...</div>335    <div class="send">336      <svg width="56" height="56" viewBox="0 0 24 24"><path d="M3 12l18-9-6 9 6 9-18-9z" fill="none" stroke="#999" stroke-width="2" stroke-linejoin="round"/></svg>337    </div>338  </div>339 340  <!-- Gesture bar -->341  <div class="gesture"></div>342 343</div>344</body>345</html>